/*
 * «بناء الخدمات» (Khadamat) admin: the list and the editor of a service, packages P1 to P5.
 * The pages load library.css first and take its band, section cards, fields, chips, table and menu. This file adds
 * only what those do not have: the three status badges, the save state on the band, the two steps, the partner
 * type groups of the picks with their count line, the need form (question cards, answers, partner filters, the preview)
 * and the path drawing: the block library, the board with one column per picked partner type, and the block settings,
 * then «نشر» with its problem list and «الإصدارات». The editor's band stays in view (.kh-flow--edit), with «نشر» as its
 * white main action.
 * Every rule is scoped to .kh-flow. Text stays at 12 px or more; a <p> carries !important on its size, weight and
 * line height, since typography.css sets every <p> with !important (qa-63 3).
 */

/* The error mark (brief 829): a circle with «!», drawn in the colour of the text it marks. */
.kh-flow { --kh-err-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }

/* ---------- the editor's band stays in view (D4) ---------- */
/* It sticks to the top edge of the shell's scroller (.clients .content, 24px of padding), just under the page header, so
   nothing of it sits under the header. Once stuck (flow-editor.js) it drops its crumbs, icon and line. */
.kh-flow--edit .kh-band { position: sticky; top: -24px; z-index: 30; }
.kh-flow--edit .kh-band-mark { height: 1px; margin-bottom: -1px; }
.kh-flow--edit .kh-band.is-stuck { padding-block: .65rem; }
.kh-flow--edit .kh-band.is-stuck .aq-finance-breadcrumb,
.kh-flow--edit .kh-band.is-stuck .kh-band__icon,
.kh-flow--edit .kh-band.is-stuck .kh-band__sub { display: none; }
.kh-flow--edit .kh-band.is-stuck .kh-band__title { display: block; font-size: 1.125rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-flow--edit .kh-band.is-stuck .kh-band__head { flex-wrap: wrap; min-width: 0; }
/* The name keeps 12rem beside its status; when both do not fit, the status moves under it instead of cutting the name
   to its first letter (qa-56 L1: 1024 px English, the save state beside «نشر»). */
.kh-flow--edit .kh-band.is-stuck .kh-band__head > .kh-band__title { flex: 0 1 auto; min-width: min(100%, 12rem); }
/* Nothing in the stuck band overlaps at any width (J1): the name and its status keep a share no item can squeeze, the
   status never shrinks, and what does not fit beside them moves to the next row. */
.kh-flow--edit .kh-band.is-stuck .kh-band__row { flex-wrap: wrap; row-gap: .5rem; }
.kh-flow--edit .kh-band.is-stuck .kh-band__txt { flex: 1 1 14rem; min-width: min(100%, 14rem); }
.kh-flow--edit .kh-band.is-stuck .kh-band__head > span { flex: 0 0 auto; white-space: nowrap; }
/* The panel lets the page scroll, so the path's side panels can stay in view too. */
[data-model-id="admin-khadamat-flow"] fieldset.finance-admin-panel { overflow: visible; }
/* A control the keyboard reaches scrolls clear of the band through the scroller's top padding (flow-editor.js), so it
   takes no scroll margin of its own and is not pushed down twice (D1). */

/* «نشر» is the band's main action: white with purple text, as every band's main action (H1); the others are outlined. */
.kh-flow .kh-band .kh-btn--primary { background: #fff; color: var(--kh-primary-full); border-color: #fff; font-weight: 700; box-shadow: 0 6px 16px rgba(30, 20, 60, .18); }
.kh-flow .kh-band .kh-btn--primary:hover { background: var(--kh-primary-50); color: var(--kh-primary-full); }
.kh-flow .kh-band .kh-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.kh-flow .kh-band .kh-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
/* Brief 829: «نشر» waits while the path shows a problem: dimmed and aria-disabled (it keeps the keyboard), its reason
   beside it with the error mark. */
.kh-flow .kh-band .kh-btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; box-shadow: none; }
.kh-flow .kh-band .kh-btn[aria-disabled="true"]:hover { background: #fff; }
.kh-flow .kh-pub-why { display: inline-flex; align-items: center; align-self: center; gap: .35rem; max-width: 18rem; font-size: max(12px, .8125rem); font-weight: 700; line-height: 1.4; color: #fff; }
.kh-flow .kh-pub-why::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: #FDA29B; -webkit-mask: var(--kh-err-icon) center / contain no-repeat; mask: var(--kh-err-icon) center / contain no-repeat; }

/* ---------- one status per service ---------- */
.kh-flow .kh-badge--draft { background: var(--kh-grey-bg); color: var(--kh-grey); border-color: rgba(71, 84, 103, .14); }
.kh-flow .kh-badge--published { background: var(--kh-ok-bg); color: var(--kh-ok); border-color: rgba(2, 122, 72, .14); }
.kh-flow .kh-badge--changes { background: var(--kh-warn-bg); color: var(--kh-warn); border-color: rgba(181, 71, 8, .14); }
.kh-flow .kh-badge--paused { background: var(--kh-bad-bg); color: var(--kh-bad); border-color: rgba(180, 35, 24, .14); }
.kh-flow .kh-alert--paused { background: var(--kh-bad-bg); color: var(--kh-bad); }

/* ---------- the service's card (brief 308): the image and the short descriptions. Brief 1016: the image square and whole,
   never cropped, about the size of the client's card ---------- */
.kh-flow .kh-card__image { max-width: 26rem; margin: 0 0 1rem; }
.kh-flow .kh-card__frame { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 16rem; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--kh-line); border-radius: 12px; background: var(--kh-primary-50); color: var(--kh-primary); }
.kh-flow .kh-card__frame.is-empty { background: linear-gradient(135deg, var(--kh-primary-50), #fff); }
.kh-flow .kh-card__frame img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.kh-flow .kh-card__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0 .25rem; }
.kh-flow .kh-card__busy { font-size: max(12px, .875rem); color: var(--kh-muted); }
.kh-flow .kh-card__text { min-height: 4.5rem; resize: vertical; }
/* «رسوم عرض الأسعار» (brief 323): the riyals beside a short number field. */
.kh-flow .kh-card__fee { max-width: 26rem; margin: 1rem 0 0; }
.kh-flow .kh-card__money { display: flex; align-items: center; gap: .5rem; }
.kh-flow .kh-card__money .kh-inp { max-width: 10rem; }
.kh-flow .kh-card__unit { font-size: max(12px, .875rem); color: var(--kh-muted); }

/* ---------- the save state, on the band where the editor's main action would be ---------- */
.kh-flow .kh-flow-save { align-items: center; }
.kh-flow .kh-save {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 34px;
    padding: 0 .85rem;
    border-radius: 999px;
    background: rgba(20, 12, 45, .22);
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: max(12px, .85rem);
    font-weight: 600;
    color: #fff;
}
.kh-flow .kh-save::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #D0D5DD; }
.kh-flow .kh-save--saved::before,
.kh-flow .kh-save--created::before { background: #75E0A7; }
.kh-flow .kh-save--dirty::before,
.kh-flow .kh-save--saving::before { background: #FEC84B; }
.kh-flow .kh-save--error::before,
.kh-flow .kh-save--invalid::before,
.kh-flow .kh-save--conflict::before,
.kh-flow .kh-save--forbidden::before { background: #FDA29B; }
.kh-flow .kh-save__retry {
    min-height: 34px;
    padding: 0 .9rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--kh-primary-full);
    font-size: max(12px, .85rem);
    font-weight: 700;
    cursor: pointer;
}

/* ---------- brief 1240: the five tabs, one panel shown at a time; a strip that scrolls on its own on a phone ---------- */
.kh-flow .kh-tabs { display: flex; gap: .4rem; margin: 0 0 1.15rem; padding: 0 0 .5rem; border-bottom: 1px solid var(--kh-line); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.kh-flow .kh-tabs[hidden] { display: none; }
.kh-flow .kh-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--kh-line);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: .94rem;
    font-weight: 700;
    color: var(--kh-ink);
    white-space: nowrap;
    cursor: pointer;
}
.kh-flow .kh-tab:hover { border-color: var(--kh-primary); }
.kh-flow .kh-tab.is-current { background: var(--kh-primary); border-color: var(--kh-primary); color: #fff; }
.kh-flow .kh-tab:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-panel { display: grid; gap: 1.15rem; min-width: 0; }
.kh-flow .kh-panel[hidden] { display: none; }

/* ---------- the picks: one group per partner type ---------- */
.kh-flow .kh-flow-groups { display: grid; gap: 1rem; }
.kh-flow .kh-flow-grp { padding: 0 0 1rem; border-bottom: 1px solid var(--kh-line-3); min-width: 0; }
.kh-flow .kh-flow-grp:last-child { padding-bottom: 0; border-bottom: 0; }
.kh-flow .kh-flow-grp h3.kh-flow-grp__title { margin: 0 0 .6rem; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--kh-ink-2); }
/* The three-type limit is information in the neutral note style, like the other limits (K3). */
.kh-flow .kh-flow-grp__note { margin: 0 0 .6rem; font-size: max(12px, .8125rem) !important; font-weight: 500 !important; line-height: 1.5 !important; color: var(--kh-muted); overflow-wrap: anywhere; }
/* A chip's text wraps beside its box, which stays on the first line (E2); a tag under it takes the full width. */
.kh-flow .kh-chip { flex-wrap: wrap; row-gap: 0; align-items: flex-start; }
.kh-flow .kh-chip label { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; align-items: flex-start; padding: .8rem 0; }
.kh-flow .kh-chip input { margin-top: calc(.8rem + (1.35 * .875rem - 1.05rem) / 2); }
.kh-flow .kh-chip.is-off { background: #F6F5F9; color: #6B6780; cursor: not-allowed; }
.kh-flow .kh-chip.is-off input,
.kh-flow .kh-chip.is-off label { cursor: not-allowed; }
.kh-flow .kh-flow-tag {
    flex: 1 1 100%;
    margin: -.6rem 0 .5rem;
    padding-inline-start: 1.65rem;
    font-size: max(12px, .75rem);
    font-weight: 500;
    color: var(--kh-muted);
}
.kh-flow .kh-flow-tag--paused { color: var(--kh-warn); }
.kh-flow .kh-flow-tag--warn { color: var(--kh-warn); font-weight: 600; }
.kh-flow .kh-flow-empty { margin: 0; font-size: .875rem !important; font-weight: 500 !important; line-height: 1.6 !important; color: var(--kh-muted-2); }

/* The count line under the picks, then the picked names. */
.kh-flow .kh-flow-sum { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: 12px; background: var(--kh-primary-50); }
.kh-flow .kh-flow-sum__count { margin: 0; font-size: max(12px, .8125rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-primary-600); }
.kh-flow .kh-flow-sum__names { margin: .15rem 0 0; font-size: .95rem !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--kh-ink); overflow-wrap: anywhere; }

/* ---------- the need form (package P2): questions, answers, partner filters, preview ---------- */
.kh-flow .kh-sec__title { display: flex; align-items: center; gap: .65rem; margin: 0 0 .15rem; font-size: 1.1875rem !important; font-weight: 700 !important; line-height: 1.35 !important; color: var(--kh-ink); }
.kh-flow .kh-qs__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.kh-flow .kh-qs__txt { flex: 1 1 18rem; min-width: 0; }
.kh-flow .kh-qs__txt .kh-sec__hint { margin-bottom: 0; }
.kh-flow .kh-qs__error,
.kh-flow .kh-qs__need { margin: 0 0 1rem; padding: .65rem .9rem; border-radius: 10px; font-size: max(12px, .875rem) !important; font-weight: 600 !important; line-height: 1.5 !important; }
.kh-flow .kh-qs__error { background: var(--kh-bad-bg); color: var(--kh-bad); }
.kh-flow .kh-qs__need { background: var(--kh-warn-bg); color: var(--kh-warn); }
.kh-flow .kh-qs__list { display: grid; gap: 1rem; min-width: 0; }

/* One card per question; the fixed «المدينة» card is quieter and has no control. */
.kh-flow .kh-q { min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; }
.kh-flow .kh-q--fixed { background: var(--kh-primary-50); border-style: dashed; }
.kh-flow .kh-q__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.kh-flow .kh-q__tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 .7rem; border-radius: 999px; background: var(--kh-grey-bg); font-size: max(12px, .8125rem); font-weight: 700; color: var(--kh-ink-2); }
/* Brief 436: «مشروط» beside the number of a question shown by an earlier answer. */
.kh-flow .kh-q__cond-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 .6rem; margin-inline-end: auto; border-radius: 999px; background: var(--kh-primary-50); font-size: max(12px, .75rem); font-weight: 700; color: var(--kh-primary-600); }
/* Brief 1265 (qa-1264: 36 px): a question's and an answer's buttons are 40 px, the least a finger needs. */
.kh-flow .kh-q__del {
    min-height: 40px;
    padding: 0 .8rem;
    border: 1px solid var(--kh-line);
    border-radius: 10px;
    background: #fff;
    font-size: max(12px, .8125rem);
    font-weight: 600;
    color: var(--kh-bad);
    cursor: pointer;
}
.kh-flow .kh-q__del:hover { background: var(--kh-bad-bg); }
/* A question moves up and down beside its delete (brief 104). */
.kh-flow .kh-q__acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.kh-flow .kh-q__move {
    min-height: 40px;
    padding: 0 .7rem;
    border: 1px solid var(--kh-line);
    border-radius: 10px;
    background: #fff;
    font-size: max(12px, .8125rem);
    font-weight: 600;
    color: var(--kh-ink-2);
    cursor: pointer;
}
.kh-flow .kh-q__move:hover:not(:disabled) { border-color: var(--kh-primary); color: var(--kh-primary-600); }
.kh-flow .kh-q__move:disabled { opacity: .45; cursor: not-allowed; }
.kh-flow .kh-q__fixed { margin: 0; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--kh-ink); }
/* A limit is information tied to the button it turns off, in the neutral note style (E6). */
.kh-flow .kh-q__note,
.kh-flow .kh-q__limit { margin: .25rem 0 0; font-size: max(12px, .8125rem) !important; font-weight: 500 !important; line-height: 1.5 !important; color: var(--kh-muted); overflow-wrap: anywhere; }
.kh-flow .kh-q h3.kh-q__sub { margin: .25rem 0 .5rem; font-size: .95rem !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--kh-ink-2); }
.kh-flow .kh-q__add { margin-top: .85rem; }
.kh-flow .kh-q__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }

/* An answer: a numbered box with its delete, its texts, «عند اختيارها» with the target, and the partner filter (E8). */
.kh-flow .kh-ans { min-width: 0; margin-bottom: .75rem; padding: .75rem .9rem; border: 1px solid var(--kh-line); border-radius: 12px; background: #FCFBFE; }
.kh-flow .kh-ans__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.kh-flow .kh-ans__tag { font-size: max(12px, .8125rem); font-weight: 700; color: var(--kh-ink-2); }
.kh-flow .kh-ans .kh-pair { margin-bottom: .75rem; }
/* Owner 2026-10-31: a question's text, its hint and an answer's text are open boxes of up to 500 characters, two lines
   at first and as tall as their text after (flow-editor.js sizes them where field-sizing is missing), their count under. */
.kh-flow textarea.kh-inp.kh-text-area { display: block; min-height: 4.1rem; resize: none; field-sizing: content; overflow-wrap: anywhere; }
/* Its overflow hidden only where the browser sizes it itself; elsewhere a box the editor does not size (a step's or a
   payment's explanation) keeps its scrollbar, so no text hides. */
@supports (field-sizing: content) {
    .kh-flow textarea.kh-inp.kh-text-area { overflow-y: hidden; }
}
/* Where it is missing (Firefox), a step's or a payment's explanation box scrolls over library.css's hidden overflow, so text
   the editor has not sized yet stays reachable. */
@supports not (field-sizing: content) {
    .kh-flow textarea.kh-inp.kh-blk-desc.kh-text-area { overflow-y: auto; }
}
.kh-flow .kh-ans__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem 1.1rem; align-items: end; margin-bottom: .75rem; }
.kh-flow .kh-ans__none { margin: 0 0 .7rem; font-size: max(12px, .8125rem) !important; font-weight: 500 !important; line-height: 1.5 !important; color: var(--kh-muted); overflow-wrap: anywhere; }
.kh-flow .kh-ans select.kh-inp { width: 100%; min-width: 0; }
.kh-flow .kh-flt { min-width: 0; margin-bottom: .75rem; padding: .75rem .9rem; border-radius: 12px; background: #FAF9FC; }
.kh-flow .kh-flt .kh-chips { margin-top: .35rem; }
.kh-flow .kh-flt__hint,
.kh-flow .kh-flt__label { margin: .5rem 0 0; font-size: max(12px, .8125rem) !important; font-weight: 500 !important; line-height: 1.5 !important; color: var(--kh-muted); overflow-wrap: anywhere; }
.kh-flow .kh-flt__label { font-weight: 600 !important; color: var(--kh-ink-2); }
.kh-flow .kh-flt__sum { margin: .6rem 0 0; font-size: max(12px, .875rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-primary-600); overflow-wrap: anywhere; }
.kh-flow .kh-flt__sum.is-err { color: var(--kh-err); }
/* «بيانات التسعير» (P9, brief 96): a numbered box per field like an answer, its kind, its labels and a number's unit. */
.kh-flow .kh-pf__item { min-width: 0; margin-bottom: .75rem; padding: .75rem .9rem; border: 1px solid var(--kh-line); border-radius: 12px; background: #FCFBFE; }
.kh-flow .kh-pf__item .kh-q__head { margin-bottom: .6rem; }
.kh-flow .kh-pf__item > .kh-fld { margin-bottom: .75rem; }
.kh-flow .kh-pf__item select.kh-inp { width: 100%; min-width: 0; }
.kh-flow .kh-pf__item .kh-pair { margin-bottom: .75rem; }
.kh-flow .kh-pf__item .kh-pair:last-child { margin-bottom: 0; }

/* «معاينة النموذج»: the client's view, one card per question. */
.kh-flow .kh-pv-q { min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; }
.kh-flow .kh-pv-q__title { display: block; margin: 0 0 .65rem; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
/* An answer tile grows with its text up to the full row, and each keeps its own height (J7). */
.kh-flow .kh-pv-opts { display: flex; flex-wrap: wrap; align-items: flex-start; }
.kh-flow .kh-pv-opts > .kh-chip { flex: 0 1 auto; min-width: min(100%, 9rem); max-width: 100%; }
/* Live QA 2026-10-31: an answer of up to 500 characters wraps beside its box, never on a row under it (its basis was its
   whole text); the tile still sizes to its text (J7), and a tag or image keeps its own place. */
.kh-flow .kh-pv-opts .kh-chip label { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.kh-flow .kh-pv-file { margin-top: .75rem; }
/* Fields asked one under another (pricing data, substitutes) keep a gap between a field and the next label (brief 96). */
.kh-flow .kh-pv-q > .kh-fld + .kh-fld { margin-top: .75rem; }
/* A file field in the page's language (E3): the real input is hidden but focusable; the label is its button. */
.kh-flow .kh-file__inp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.kh-flow .kh-file { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; min-width: 0; }
.kh-flow .kh-file__btn { margin: 0; cursor: pointer; }
.kh-flow .kh-file__inp:focus-visible + .kh-file .kh-file__btn { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-file__name { min-width: 0; font-size: max(12px, .875rem); color: var(--kh-ink-2); overflow-wrap: anywhere; }
/* «المسار حسب إجاباتك» as a timeline (brief 283): a line at the start edge with a dot per point, the points of one row
   side by side and wrapping (one under another at 375), each with its partner type in its column's tone, its payments
   under it, and the client's files as marked points. */
.kh-flow .kh-pv-tl { position: relative; margin: 0; padding: 0; padding-inline-start: 1.5rem; list-style: none; }
.kh-flow .kh-pv-tl::before { content: ""; position: absolute; inset-block: .5rem; inset-inline-start: .45rem; border-inline-start: 2px solid var(--kh-line); }
.kh-flow .kh-pv-tl__row { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.kh-flow .kh-pv-tl__row::before { content: ""; position: absolute; top: .8rem; inset-inline-start: calc(-1.425rem - 1px); width: .75rem; height: .75rem; border: 2px solid #fff; border-radius: 50%; background: var(--kh-primary); box-shadow: 0 0 0 1px var(--kh-primary); }
.kh-flow .kh-pv-tl__row--files::before { background: #B42318; box-shadow: 0 0 0 1px #B42318; }
.kh-flow .kh-pv-tl__row + .kh-pv-tl__row { margin-top: .6rem; }
.kh-flow .kh-pv-tl__node { --kh-tone: #6941C6; flex: 1 1 14rem; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--kh-line); border-inline-start: 3px solid var(--kh-tone); border-radius: 10px; background: #fff; overflow-wrap: anywhere; }
.kh-flow .kh-pv-tl__node[data-tone="1"] { --kh-tone: #027A48; }
.kh-flow .kh-pv-tl__node[data-tone="2"] { --kh-tone: #B54708; }
.kh-flow .kh-pv-tl__node[data-tone="3"] { --kh-tone: #175CD3; }
.kh-flow .kh-pv-tl__node[data-tone="4"] { --kh-tone: #C11574; }
.kh-flow .kh-pv-tl__node[data-tone="5"] { --kh-tone: #3F621A; }
.kh-flow .kh-pv-tl__node--file { --kh-tone: #B42318; background: #FEF3F2; border-style: dashed; border-inline-start-style: solid; }
.kh-flow .kh-pv-tl__type { display: inline-block; max-width: 100%; margin-bottom: .2rem; padding: .05rem .5rem; border-radius: 999px; background: var(--kh-tone); color: #fff; font-size: max(12px, .75rem); font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.kh-flow .kh-pv-tl__name { display: block; font-size: max(12px, .9375rem); font-weight: 700; line-height: 1.5; color: var(--kh-ink); overflow-wrap: anywhere; }
/* A payment: a small mark in its step's card (brief 314), and one line per partner above the timeline of how he is paid. */
.kh-flow .kh-pv-tl__pay { display: inline-block; max-width: 100%; margin-top: .35rem; margin-inline-end: .35rem; padding: .1rem .55rem; border: 1px solid #ABEFC6; border-radius: 999px; background: #ECFDF3; font-size: max(12px, .75rem); font-weight: 600; line-height: 1.6; color: #027A48; overflow-wrap: anywhere; }
.kh-flow .kh-pv-tl__terms { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .75rem; padding: 0; }
.kh-flow .kh-pv-tl__terms p { --kh-tone: #6941C6; margin: 0; padding: .3rem .6rem; border-inline-start: 3px solid var(--kh-tone); border-radius: 6px; background: #F9FAFB; font-size: max(12px, .8125rem); font-weight: 500; line-height: 1.5; color: var(--kh-ink); overflow-wrap: anywhere; }
.kh-flow .kh-pv-tl__terms p[data-tone="1"] { --kh-tone: #027A48; }
.kh-flow .kh-pv-tl__terms p[data-tone="2"] { --kh-tone: #B54708; }
.kh-flow .kh-pv-tl__terms p[data-tone="3"] { --kh-tone: #175CD3; }
.kh-flow .kh-pv-tl__terms p[data-tone="4"] { --kh-tone: #C11574; }
.kh-flow .kh-pv-tl__terms p[data-tone="5"] { --kh-tone: #3F621A; }
/* The short line of a running block's settings under its name (S26). */
.kh-flow .kh-pv-run__set { display: block; font-size: max(12px, .8125rem) !important; font-weight: 500 !important; line-height: 1.5 !important; color: var(--kh-muted); overflow-wrap: anywhere; }

/* ---------- the path drawing (package P3): library, board, settings ---------- */
/* Library at the start edge, the board in the middle, the settings at the end edge; columns follow the page direction. */
.kh-flow .kh-path { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) minmax(0, 19rem); gap: 1rem; align-items: start; }
/* A read-only page has no library (H7): the board and the settings. */
.kh-flow .kh-path--read { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
/* The simple path (S11, S12) has no library; brief 1193 (qa-1197): a step's settings open in a window, so the line or the
   board takes the whole width. */
.kh-flow .kh-path.kh-path--simple { grid-template-columns: minmax(0, 1fr); }
.kh-flow .kh-path-lib__msg { margin: .6rem 0 0; }
.kh-flow .kh-path-lib { min-width: 0; padding: .9rem; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; }
.kh-flow .kh-path-lib h3.kh-path-lib__title { margin: 0; font-size: .95rem !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--kh-ink-2); }
.kh-flow .kh-path-lib__hint { margin: .2rem 0 .6rem; font-size: max(12px, .75rem) !important; font-weight: 500 !important; line-height: 1.5 !important; color: var(--kh-muted); overflow-wrap: anywhere; }
.kh-flow .kh-path-lib__list { display: grid; gap: .45rem; }
.kh-flow .kh-lib-blk {
    min-height: 40px;
    padding: .45rem .65rem;
    border: 1px solid var(--kh-line);
    border-inline-start: 3px solid var(--kh-primary);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: max(12px, .8125rem);
    font-weight: 600;
    line-height: 1.4;
    text-align: start;
    color: var(--kh-ink);
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.kh-flow .kh-lib-blk:hover { background: var(--kh-primary-50); }
.kh-flow .kh-lib-blk:disabled { cursor: not-allowed; opacity: .6; }
.kh-flow .kh-lib-blk[data-blk-kind="match"],
.kh-flow .kh-blk[data-blk-kind="match"] { border-inline-start-color: #6941C6; }
.kh-flow .kh-lib-blk[data-blk-kind="approval"],
.kh-flow .kh-blk[data-blk-kind="approval"] { border-inline-start-color: #B54708; }
.kh-flow .kh-lib-blk[data-blk-kind="payment"],
.kh-flow .kh-blk[data-blk-kind="payment"] { border-inline-start-color: #027A48; }

/* The board: a dotted surface, a head per column, then one cell per column and row. No arrows, on purpose. A lane keeps
   8rem at every width; when the lanes (up to four, brief 837) do not fit the board scrolls sideways in its own box, never the page. The
   covers move with the lanes and the shadows stay at the box edges, so a shadow shows only on a side with more lanes. */
.kh-flow .kh-path-board {
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--kh-line);
    border-radius: 14px;
    overflow-x: auto;
    background:
        linear-gradient(#FAF9FC, #FAF9FC) left center / .75rem 100% no-repeat local,
        linear-gradient(#FAF9FC, #FAF9FC) right center / .75rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(20, 12, 45, .22), transparent) left center / .75rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(20, 12, 45, .22), transparent) right center / .75rem 100% no-repeat scroll,
        radial-gradient(#E4E2EC 1px, transparent 1px) 0 0 / 16px 16px local,
        #FAF9FC;
}
/* The grid is as wide as its lanes, so a board that scrolls keeps its end padding at the far end (qa-56 L2). */
.kh-flow .kh-board { display: grid; grid-template-columns: repeat(var(--kh-cols), minmax(8rem, 1fr)); gap: .75rem; min-width: calc(var(--kh-cols) * 8rem + (var(--kh-cols) - 1) * .75rem); }
.kh-flow .kh-lane { min-width: 0; padding: 0 .25rem .5rem; border-bottom: 2px solid var(--kh-line); font-size: max(12px, .875rem); font-weight: 700; text-align: center; color: var(--kh-ink-2); overflow-wrap: anywhere; }
.kh-flow .kh-cell { display: grid; min-width: 0; min-height: 96px; border: 1px dashed #D9D6E3; border-radius: 12px; }
.kh-flow .kh-cell.is-over { border-color: var(--kh-primary); border-style: solid; background: var(--kh-primary-50); }
.kh-flow .kh-cell__hint { align-self: center; padding: .5rem; font-size: max(12px, .75rem); font-weight: 500; text-align: center; color: var(--kh-muted); }
.kh-flow .kh-blk {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    width: 100%;
    min-width: 0;
    padding: .6rem .7rem;
    border: 1px solid var(--kh-line);
    border-inline-start: 3px solid var(--kh-primary);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    text-align: start;
    color: var(--kh-ink);
    overflow-wrap: anywhere;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.kh-flow .kh-blk.is-selected { border-color: var(--kh-primary); box-shadow: 0 0 0 2px var(--kh-primary); }
.kh-flow .kh-blk__kind { font-size: max(12px, .75rem); font-weight: 700; color: var(--kh-primary-600); }
.kh-flow .kh-blk__name { font-size: max(12px, .875rem); font-weight: 700; line-height: 1.4; }
.kh-flow .kh-blk__line { font-size: max(12px, .75rem); font-weight: 500; line-height: 1.45; color: var(--kh-muted); }
.kh-flow .kh-blk__line--start { color: var(--kh-ink-2); }
/* A card with a problem is marked and says it (brief 96); the pinned match step is not dragged, so it does not invite it. */
.kh-flow .kh-blk.is-invalid { border-color: var(--kh-err); background: var(--kh-bad-bg); }
/* Brief 829: a card's problem reads as an error, in the error colour, heavier, after the error mark; its column's head
   carries the mark too. */
.kh-flow .kh-blk__line--err { display: flex; align-items: flex-start; gap: .3rem; font-weight: 700; color: var(--kh-bad); }
.kh-flow .kh-blk__line--err::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-top: .15em; background: currentColor; -webkit-mask: var(--kh-err-icon) center / contain no-repeat; mask: var(--kh-err-icon) center / contain no-repeat; }
.kh-flow .kh-lane-head.is-invalid .kh-lane { border-bottom-color: var(--kh-bad); color: var(--kh-bad); }
.kh-flow .kh-lane__err { display: inline-block; width: 14px; height: 14px; margin-inline-start: .3rem; vertical-align: -2px; background: currentColor; -webkit-mask: var(--kh-err-icon) center / contain no-repeat; mask: var(--kh-err-icon) center / contain no-repeat; }
.kh-flow .kh-blk--pinned { cursor: pointer; }
.kh-flow .kh-blk__pin { font-weight: 600; color: var(--kh-muted); }
/* Drop, click-add and save messages over the board, the full width of it (brief 96). */
.kh-flow .kh-path-main { min-width: 0; }
.kh-flow .kh-path-main > .kh-path-lib__msg { margin: 0 0 .6rem; }
/* «ما شورك مع هذه المرحلة» on a column's match step (brief 96). */
.kh-flow .kh-share__in { display: grid; gap: .25rem; margin: 0; padding-inline-start: 1.1rem; font-size: max(12px, .8125rem); font-weight: 500; line-height: 1.5; color: var(--kh-ink-2); overflow-wrap: anywhere; }
.kh-flow .kh-path__need,
.kh-flow .kh-bs__empty { margin: 0; font-size: max(12px, .875rem) !important; font-weight: 500 !important; line-height: 1.6 !important; color: var(--kh-muted-2); }
.kh-flow .kh-drag-ghost {
    position: fixed;
    z-index: 1000;
    max-width: 12rem;
    padding: .5rem .75rem;
    border-radius: 10px;
    background: var(--kh-primary);
    font-size: max(12px, .8125rem);
    font-weight: 700;
    color: #fff;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(20, 12, 45, .25);
}

/* The selected block's settings: its names, its kind's own fields, «متى تبدأ؟», «مكان البلوك», delete. */
.kh-flow .kh-bs { display: grid; gap: .25rem; min-width: 0; }
.kh-flow .kh-bs__head { padding-bottom: .5rem; }
.kh-flow .kh-bs__kind { font-size: max(12px, .75rem); font-weight: 700; color: var(--kh-primary-600); }
.kh-flow .kh-bs__title { margin: .15rem 0 0; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
.kh-flow .kh-bs__sec { min-width: 0; padding: .75rem 0; border-top: 1px solid var(--kh-line-3); }
.kh-flow .kh-bs__sec .kh-pair { grid-template-columns: minmax(0, 1fr); }
.kh-flow .kh-bs__sec .kh-chips { grid-template-columns: minmax(0, 1fr); }
.kh-flow .kh-bs__sec > .kh-chip { margin-top: .5rem; }
/* «تنتظر خطوة من عمود آخر»: a tick for each step of the other columns, one under the other (S25). */
.kh-flow .kh-waits { min-width: 0; margin: 0; padding: 0; border: 0; }
.kh-flow .kh-waits > legend { padding: 0; margin-bottom: .4rem; }
.kh-flow .kh-waits__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.kh-flow .kh-waits:focus { outline: none; }
.kh-flow .kh-waits:focus-visible { outline: 2px solid var(--kh-primary-600); outline-offset: 2px; }
/* A block's list of names (S26): the quotes' items or a delivery's attachments, each its two names and «حذف». */
.kh-flow .kh-list { min-width: 0; margin: .5rem 0 0; padding: 0; border: 0; }
.kh-flow .kh-list > legend { padding: 0; margin-bottom: .4rem; }
.kh-flow .kh-list__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--kh-line); }
.kh-flow .kh-list__row .kh-q__del { justify-self: start; }
.kh-flow .kh-list__row > .kh-q__acts { justify-self: start; }
/* «ترتيب الاعتماد»: a ticked approver with its up and down beside it, wrapping under it on a narrow screen (brief 286). */
.kh-flow .kh-appr { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.kh-flow .kh-appr > .kh-chip { flex: 1 1 12rem; min-width: 0; }
.kh-flow .kh-list:focus { outline: none; }
.kh-flow .kh-list:focus-visible { outline: 2px solid var(--kh-primary-600); outline-offset: 2px; }
.kh-flow .kh-bs__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem .75rem; }
/* «العمود» over «الصف», each the full width, so a long partner type reads whole (F2). */
.kh-flow .kh-bs__place { display: grid; gap: .5rem; }
.kh-flow .kh-bs__sec select.kh-inp,
.kh-flow .kh-bs__sec input.kh-inp { width: 100%; min-width: 0; }
.kh-flow .kh-bs__label { margin: 0 0 .4rem; font-size: max(12px, .8125rem) !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--kh-ink-2); }
/* The chosen «متى تبدأ؟» or return step in full under its select, column and row included, since a narrow panel cuts the
   select's own text (D2, S06). */
.kh-flow .kh-bs__chosen { margin: .35rem 0 0; font-size: max(12px, .8125rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-ink-2); overflow-wrap: anywhere; }
/* «بعد اكتمال» ticks one block per row, so long names and their column and row read whole (P6). */
.kh-flow .kh-chips.kh-bs__starts { grid-template-columns: minmax(0, 1fr); margin: 0 0 .75rem; }
.kh-flow .kh-bs__label + .kh-bs__starts { margin-top: .5rem; }
/* The conversion note above the form: what moving a version 1 path to version 2 changed, shown once (P6). */
.kh-flow .kh-conv__title { margin: 0 0 .25rem; font-size: inherit !important; font-weight: 700 !important; line-height: 1.5 !important; }
.kh-flow .kh-conv__list { margin: 0; padding-inline-start: 1.25rem; }
/* «سجل الاعتمادات» under the board, read only (P7): one row per delivery, its approvers and the supervisor report fallback. */
.kh-flow .kh-log { margin-top: 1rem; padding: .9rem; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; }
.kh-flow .kh-log h3.kh-log__title { margin: 0; font-size: .95rem !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--kh-ink-2); }
.kh-flow .kh-log__hint,
.kh-flow .kh-log__decisions,
.kh-flow .kh-log__empty { margin: .25rem 0; font-size: max(12px, .8125rem) !important; font-weight: 500 !important; line-height: 1.5 !important; color: var(--kh-muted); overflow-wrap: anywhere; }
.kh-flow .kh-log__list { display: grid; gap: .5rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.kh-flow .kh-log__item { padding: .6rem .75rem; border: 1px solid var(--kh-line); border-radius: 10px; overflow-wrap: anywhere; }
.kh-flow .kh-log__name { margin: 0; font-size: max(12px, .875rem) !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--kh-ink-2); }
.kh-flow .kh-log__who,
.kh-flow .kh-log__fallback { margin: .15rem 0 0; font-size: max(12px, .8125rem) !important; font-weight: 500 !important; line-height: 1.5 !important; }
.kh-flow .kh-log__fallback { color: var(--kh-muted); }
.kh-flow .kh-bs__note { margin: .25rem 0; font-size: max(12px, .8125rem) !important; font-weight: 500 !important; line-height: 1.5 !important; color: var(--kh-muted); overflow-wrap: anywhere; }
/* Brief 829: the quotes' payments total that stops «نشر», said as the card says it. */
.kh-flow .kh-bs__note--err { display: flex; align-items: flex-start; gap: .35rem; font-weight: 700 !important; color: var(--kh-bad); }
.kh-flow .kh-bs__note--err::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; margin-top: .15em; background: currentColor; -webkit-mask: var(--kh-err-icon) center / contain no-repeat; mask: var(--kh-err-icon) center / contain no-repeat; }
.kh-flow .kh-bs__del { justify-self: start; margin-top: .5rem; }

/* A match step's quote settings (package P4): the format chips, the item rows, the fee basis and the problems. */
.kh-flow .kh-qt > .kh-fld + .kh-fld { margin-top: .5rem; }
/* «بنود الإدارة» stands apart from «من يُعدّ الجدول؟» above it (G3). */
.kh-flow .kh-qt > .kh-fld + .kh-bs__label { margin-top: 1rem !important; }
/* An item (G1, Q1). The settings panel is narrow beside the board, so by default each name takes the full row, with the
   unit or «تشمله نسبة الأتعاب» and delete under the Arabic name; its own problem under it (G2). The quote box is a size
   container, so the same item is compact as Codex once the panel has room (below). */
.kh-flow .kh-qt { container: kh-qt / inline-size; }
.kh-flow .kh-qt__item { display: grid; gap: .4rem; min-width: 0; margin-bottom: .6rem; padding: .55rem .6rem; border-radius: 12px; background: #FAF9FC; }
.kh-flow .kh-qt__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .4rem .5rem; min-width: 0; }
.kh-flow .kh-qt__row > .kh-qt__name { grid-column: 1 / -1; }
.kh-flow .kh-qt__row--en > .kh-fld { grid-column: 1 / -1; }
.kh-flow .kh-qt__row .kh-fld__top { min-height: 0; margin-bottom: .25rem; }
.kh-flow .kh-qt__row .kh-inp { min-height: 2.4rem; padding: .4rem .6rem; }
.kh-flow .kh-qt__fee { min-width: 0; min-height: 2.4rem; }
.kh-flow .kh-qt__fee label { padding: .55rem 0; }
.kh-flow .kh-qt__fee input { margin-top: calc(.55rem + (1.35 * .875rem - 1.05rem) / 2); }
.kh-flow .kh-qt__del { min-height: 2.4rem; white-space: nowrap; }
/* With room for every field at about 12 characters, an item is two rows on one grid: the Arabic name, the unit or the
   fee, and delete; the English name with «ترجمة» under the name, and the English unit under the unit. */
@container kh-qt (min-width: 30rem) {
    .kh-flow .kh-qt__item { grid-template-columns: minmax(8.5rem, 1fr) minmax(8.5rem, 11rem) auto; align-items: end; column-gap: .5rem; }
    .kh-flow .kh-qt__item--percentage { grid-template-columns: minmax(8.5rem, 1.3fr) minmax(8.5rem, 1fr) auto; }
    .kh-flow .kh-qt__row { display: contents; }
    .kh-flow .kh-qt__tag,
    .kh-flow .kh-qt__err { grid-column: 1 / -1; }
    .kh-flow .kh-qt__row > .kh-qt__name { grid-column: 1; }
    .kh-flow .kh-qt__row--en > .kh-qt__unit { grid-column: 2 / -1; }
    .kh-flow .kh-qt__row--en > .kh-qt__name:only-child { grid-column: 1 / -1; }
}
.kh-flow .kh-qt__tag { margin: 0; font-size: max(12px, .8125rem) !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--kh-ink-2); }
.kh-flow .kh-qt__add { margin-top: .25rem; }
.kh-flow .kh-qt__basis { margin: .5rem 0 0; font-size: max(12px, .8125rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-primary-600); overflow-wrap: anywhere; }
.kh-flow .kh-qt__err { margin: .5rem 0 0; font-size: max(12px, .8125rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-err); }
/* Each service's pricing in «عرض سعر للخدمات» (P9, brief 96): a box per service with its method, basis and estimate. */
.kh-flow .kh-qt__price { display: grid; gap: .5rem; min-width: 0; margin-top: .6rem; padding: .55rem .6rem; border-radius: 12px; background: #FAF9FC; }
.kh-flow .kh-qt__price .kh-fld__top { min-height: 0; margin-bottom: .25rem; }
.kh-flow .kh-qt__price > .kh-bs__note { margin: 0; }

/* «إعدادات المرحلة» and the payment (package P10): the column head opens the stage, its line sits under the match card. */
.kh-flow .kh-lane--stage { display: grid; justify-items: center; gap: .1rem; width: 100%; margin: 0; border: 0; border-bottom: 2px solid var(--kh-line); background: none; font-family: inherit; cursor: pointer; }
.kh-flow .kh-lane--stage:hover { border-bottom-color: var(--kh-primary); color: var(--kh-primary-600); }
.kh-flow .kh-lane--stage:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-lane__more { font-size: max(12px, .75rem); font-weight: 600; color: var(--kh-primary-600); }
/* A column head with its two moves under it (brief 104); «خدمات الدور» under the library. */
.kh-flow .kh-lane-head { display: grid; align-content: end; gap: .3rem; min-width: 0; }
.kh-flow .kh-lane__moves { display: flex; justify-content: center; gap: .35rem; }
.kh-flow .kh-lane__move { min-width: 36px; min-height: 32px; padding: 0 .5rem; border: 1px solid var(--kh-line); border-radius: 10px; background: #fff; font-size: max(12px, .875rem); font-weight: 700; color: var(--kh-ink-2); cursor: pointer; }
.kh-flow .kh-lane__move:hover:not(:disabled) { border-color: var(--kh-primary); color: var(--kh-primary-600); }
.kh-flow .kh-lane__move:disabled { opacity: .45; cursor: not-allowed; }
.kh-flow .kh-lane__move:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-roles { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--kh-line); }
.kh-flow .kh-roles .kh-bs__label { margin-top: 0; }
.kh-flow .kh-blk__line--stage { color: var(--kh-primary-600); }
.kh-flow .kh-st > .kh-fld + .kh-fld,
.kh-flow .kh-st > .kh-bs__row,
.kh-flow .kh-pay > .kh-fld + .kh-fld { margin-top: .5rem; }
.kh-flow .kh-st__title:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-st__total { margin: .25rem 0 0; font-size: max(12px, .8125rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-primary-600); }
.kh-flow .kh-pay__held { margin-top: .5rem; }

/* «جدول الطلبات» in the client preview: item, unit and quantity side by side, one row per item. */
.kh-flow .kh-pv-tbl__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .5rem .75rem; align-items: end; margin-top: .65rem; }
.kh-flow .kh-pv-tbl > .kh-btn { margin-top: .75rem; }

/* ---------- «نشر» and «الإصدارات» (package P5): the problem list as links, the published revisions ---------- */
.kh-flow .kh-flow-pub { align-items: center; }
.kh-flow .kh-pub { margin: 0 0 1rem; padding: .85rem 1rem; border-radius: 12px; border: 1px solid rgba(180, 35, 24, .18); background: var(--kh-bad-bg); color: var(--kh-bad); }
.kh-flow .kh-pub--note { border-color: var(--kh-line); background: var(--kh-grey-bg); color: var(--kh-ink-2); }
/* A successful «نشر» with a warning (M3): amber, not the problem red, and never counted. */
.kh-flow .kh-pub--warn { border-color: rgba(181, 71, 8, .18); background: var(--kh-warn-bg); color: var(--kh-warn); }
.kh-flow .kh-pub__title,
.kh-flow .kh-pub__note { margin: 0; font-size: max(12px, .875rem) !important; font-weight: 700 !important; line-height: 1.6 !important; }
.kh-flow .kh-pub__list { display: grid; gap: .35rem; margin: .5rem 0 0; padding-inline-start: 1.25rem; }
.kh-flow .kh-pub__link { font-size: max(12px, .875rem); font-weight: 600; color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.kh-flow .kh-pub__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.kh-flow .kh-rev { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; }
.kh-flow .kh-rev__list { display: grid; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.kh-flow .kh-rev__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .6rem .75rem; border: 1px solid var(--kh-line-3); border-radius: 10px; }
.kh-flow .kh-rev__name { font-size: max(12px, .9375rem); font-weight: 700; color: var(--kh-ink); }
.kh-flow .kh-rev__date { font-size: max(12px, .8125rem); color: var(--kh-ink-2); }
.kh-flow .kh-rev__open { margin-inline-start: auto; }
.kh-flow .kh-rev__open[aria-current="page"] { border-color: var(--kh-primary-600); }
.kh-flow .kh-rev__empty { margin: .75rem 0 0; font-size: max(12px, .875rem) !important; font-weight: 500 !important; line-height: 1.6 !important; color: var(--kh-ink-2); }

/* ---------- the board's side panels stay in view at desktop (F4) ---------- */
/* Under the band, as tall as the screen allows; the settings of a long match step scroll inside. */
/* A column's add buttons under its blocks (S11, S12), and the services with when each starts and ends. */
.kh-flow .kh-add { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; padding: .5rem; border: 1px dashed var(--kh-line); border-radius: 12px; }
.kh-flow .kh-add__label { width: 100%; font-size: max(12px, .75rem) !important; font-weight: 600; color: var(--kh-muted); }
.kh-flow .kh-add__btn { min-height: 32px; padding: .2rem .6rem; border: 1px solid var(--kh-line); border-radius: 999px; background: #fff; font-size: max(12px, .8rem); font-weight: 600; color: var(--kh-ink-2); cursor: pointer; }
.kh-flow .kh-add__btn:hover, .kh-flow .kh-add__btn:focus-visible { border-color: var(--kh-ink-2); }
.kh-flow .kh-bs__acts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.kh-flow .kh-svcs { margin-top: 1rem; padding: .9rem; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; }
.kh-flow .kh-svcs__col { margin: .75rem 0 .35rem; font-size: max(12px, .85rem) !important; font-weight: 700; color: var(--kh-ink-2); }
.kh-flow .kh-svcs__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.kh-flow .kh-svc { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--kh-line); border-radius: 12px; }
.kh-flow .kh-svc.is-selected { border-color: var(--kh-ink-2); }
.kh-flow .kh-svc.is-invalid { border-color: #c0392b; }
.kh-flow .kh-svc__name { margin: 0; font-size: max(12px, .9rem) !important; font-weight: 700 !important; line-height: 1.5 !important; }
.kh-flow .kh-svc__line { margin: .15rem 0 0; font-size: max(12px, .78rem) !important; font-weight: 500 !important; line-height: 1.5 !important; color: var(--kh-muted); overflow-wrap: anywhere; }
.kh-flow .kh-svc__line--err { color: #c0392b; }
@media (max-width: 600px) {
    .kh-flow .kh-svc { grid-template-columns: minmax(0, 1fr) auto; }
    .kh-flow .kh-svc__main { grid-column: 1 / -1; }
}

@media (min-width: 921px) {
    .kh-flow .kh-path-lib {
        position: sticky;
        top: calc(var(--kh-band-h, 0px) - 24px + .75rem);
        max-height: calc(var(--kh-view-h, 100vh) - var(--kh-band-h, 0px) - 1.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* The path message stays in view over the board as the library does (F1, brief 96). */
    .kh-flow .kh-path-main > .kh-path-lib__msg {
        position: sticky;
        z-index: 2;
        top: calc(var(--kh-band-h, 0px) - 24px + .75rem);
        box-shadow: 0 4px 12px rgba(20, 12, 45, .08);
    }
}

/* ---------- the path area chooses its layout from its own width (R1) ---------- */
/* Library, board and settings side by side only while each of three lanes keeps 8rem; under that the library is a row
   of chips above the board and the settings stay beside it; under that the settings drop under the board, and a
   selection scrolls them into view. */
.kh-flow #khPath { container: kh-path / inline-size; }
@container kh-path (width < 58rem) {
    .kh-flow .kh-path { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
    .kh-flow .kh-path-lib { grid-column: 1 / -1; position: static; max-height: none; overflow-y: visible; padding: .75rem; }
    .kh-flow .kh-path-lib__list { display: flex; flex-wrap: wrap; gap: .4rem; }
    .kh-flow .kh-lib-blk { min-height: 36px; padding: .35rem .6rem; }
}
@container kh-path (width < 47.5rem) {
    .kh-flow .kh-path { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .kh-flow .kh-band__acts.kh-flow-save,
    .kh-flow .kh-band__acts.kh-flow-pub { flex: 1 1 100%; }
    /* Brief 1215 (QA 1212: stuck on a 375 phone the band still took a quarter of the screen): on a phone the band does not
       stick; it stays at the top of the page with every action, and flow-editor.js never marks it stuck there. */
    .kh-flow--edit .kh-band { position: static; }
    /* Stuck, the save state and the actions share one row, so the band stays short on a phone. */
    .kh-flow--edit .kh-band.is-stuck .kh-band__acts.kh-flow-save,
    .kh-flow--edit .kh-band.is-stuck .kh-band__acts.kh-flow-pub { flex: 1 1 auto; }
    /* Stuck on a phone, the name wraps instead of being cut (brief 540: 375 px English). */
    .kh-flow--edit .kh-band.is-stuck .kh-band__title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
    /* Brief 829 (qa-815: about a quarter of the screen): stuck on a phone the band is shorter, less padding, a smaller
       name, its status and the save state slimmer, and 36 px actions; every action stays. */
    .kh-flow--edit .kh-band.is-stuck { padding-block: .4rem; padding-inline: .75rem; }
    .kh-flow--edit .kh-band.is-stuck .kh-band__row { gap: .4rem .5rem; }
    .kh-flow--edit .kh-band.is-stuck .kh-band__title { font-size: 1rem !important; line-height: 1.3 !important; }
    .kh-flow--edit .kh-band.is-stuck .kh-band__head .kh-badge { padding: .1rem .55rem; font-size: 12px; }
    .kh-flow--edit .kh-band.is-stuck .kh-band__acts { gap: .4rem; }
    .kh-flow--edit .kh-band.is-stuck .kh-btn { min-height: 36px; padding: 0 .8rem; font-size: .875rem; }
    .kh-flow--edit .kh-band.is-stuck .kh-save,
    .kh-flow--edit .kh-band.is-stuck .kh-save__retry { min-height: 28px; padding: 0 .65rem; }
    .kh-flow--edit .kh-band.is-stuck .kh-pub-why { flex: 1 1 100%; max-width: none; }
    .kh-flow .kh-flow-pub > .kh-btn { flex: 1 1 auto; }
    .kh-flow .kh-rev__open { width: 100%; margin-inline-start: 0; }
    .kh-flow .kh-tab { min-height: 40px; padding: 0 .8rem; font-size: .875rem; }
    .kh-flow .kh-qc__acts .kh-btn { flex: 1 1 100%; }
    .kh-flow .kh-sec__title { font-size: 1.0625rem !important; }
    .kh-flow .kh-chips { grid-template-columns: minmax(0, 1fr); }
    .kh-flow .kh-pv-opts > .kh-chip { flex-basis: 100%; }
    .kh-flow .kh-qs__head > .kh-btn { width: 100%; }
    .kh-flow .kh-q,
    .kh-flow .kh-pv-q { padding: .85rem .8rem; }
    .kh-flow .kh-ans__row { grid-template-columns: minmax(0, 1fr); }
    .kh-flow .kh-flt { padding: .65rem .7rem; }
    .kh-flow .kh-q__foot .kh-btn { width: 100%; }
}

/* 375 px: the library becomes a row of chips, then the board, then the settings; three columns share the width. */
@media (max-width: 560px) {
    .kh-flow .kh-path { display: block; }
    .kh-flow .kh-path-lib { margin-bottom: .75rem; padding: .75rem; }
    .kh-flow .kh-path-lib__list { display: flex; flex-wrap: wrap; gap: .4rem; }
    .kh-flow .kh-lib-blk { min-height: 36px; padding: .35rem .6rem; }
    .kh-flow .kh-path-board { padding: .5rem; }
    .kh-flow .kh-board { gap: .5rem .4rem; min-width: calc(var(--kh-cols) * 8rem + (var(--kh-cols) - 1) * .4rem); }
    .kh-flow .kh-cell { min-height: 84px; }
    .kh-flow .kh-blk { padding: .45rem .5rem; }
    .kh-flow .kh-bs__row { grid-template-columns: minmax(0, 1fr); }
    .kh-flow .kh-pf__item { padding: .65rem .7rem; }
    .kh-flow .kh-pf__item .kh-pair { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
    .kh-flow .kh-pv-tbl__row { grid-template-columns: minmax(0, 1fr); padding-bottom: .65rem; border-bottom: 1px solid var(--kh-line-3); }
    .kh-flow .kh-pv-tl__row { flex-direction: column; }
    .kh-flow .kh-pv-tl__node { flex-basis: auto; }
}

/* S45 (brief 507): «نوع السؤال» and a location question's place in the preview. */
.kh-flow .kh-q__type { margin-top: .5rem; }
.kh-flow .kh-pv-map { display: grid; place-items: center; min-height: 140px; margin: .5rem 0; border: 1px dashed var(--kh-line, #cbd5e1); border-radius: 12px; color: var(--kh-muted, #64748b); }
.kh-flow .kh-pv-q__opt { font-size: .8125rem; font-weight: 400; color: var(--kh-muted, #64748b); }
/* Brief 1220: a stop answer chosen in the form's preview, its message as the client reads it. */
.kh-flow .kh-pv-stop { margin-top: .75rem; padding: .75rem .9rem; border: 1px solid rgba(181, 71, 8, .18); border-radius: 12px; background: var(--kh-warn-bg, #fffaeb); }
.kh-flow .kh-pv-stop__title { margin: 0 0 .25rem; font-weight: 700 !important; color: var(--kh-warn, #b54708); }
.kh-flow .kh-pv-stop__text, .kh-flow .kh-pv-stop__more { margin: 0; line-height: 1.6 !important; overflow-wrap: anywhere; }
.kh-flow .kh-pv-stop__more { margin-top: .35rem; font-weight: 600 !important; }
.kh-flow .kh-pv-q textarea { width: 100%; }
/* Brief 572: a number question's line in the preview, its unit beside it. */
.kh-flow .kh-pv-num { display: flex; align-items: center; gap: .5rem; }
.kh-flow .kh-pv-num .kh-inp { min-width: 7rem; max-width: 16rem; }
/* Owner 2026-10-31: a unit of up to 200 characters wraps beside its box; a short one reads as before. */
.kh-flow .kh-pv-num__unit { flex: 0 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Brief 813: «تصنيفات الخدمات», one pop-up from the list's band (no side panel), and the editor's category field. */
.kh-flow .kh-cat {
    width: min(40rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(18, 28, 45, .22);
    color: var(--kh-ink);
}
.kh-flow .kh-cat::backdrop { background: rgba(16, 24, 40, .45); }
.kh-flow .kh-cat__box { display: grid; gap: .75rem; padding: 1.25rem; }
.kh-flow .kh-cat__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.kh-flow .kh-cat__title { margin: 0; font-size: 1.125rem !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--kh-ink); }
.kh-flow .kh-cat__close { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; font-size: 1.4rem; line-height: 1; color: var(--kh-ink-2); cursor: pointer; }
.kh-flow .kh-cat__close:hover { background: var(--kh-primary-50); }
.kh-flow .kh-cat__hint { margin: 0; font-size: max(12px, .875rem) !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--kh-muted); }
.kh-flow .kh-cat__status { margin: 0; min-height: 1.2em; font-size: max(12px, .8125rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-ok); }
.kh-flow .kh-cat__status:empty { min-height: 0; }
.kh-flow .kh-cat__status.is-error { color: var(--kh-bad); }
.kh-flow .kh-cat__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.kh-flow .kh-cat__row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--kh-line-2); border-radius: 12px; background: #fff; }
.kh-flow .kh-cat__row.is-hidden { background: #F9FAFB; }
.kh-flow .kh-cat__row.is-hidden .kh-cat__icon { opacity: .55; }
.kh-flow .kh-cat__icon { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: var(--kh-primary-50); color: var(--kh-primary-full); }
.kh-flow .kh-cat__names { display: grid; flex: 1 1 12rem; min-width: 0; gap: .1rem; }
.kh-flow .kh-cat__name { font-size: max(12px, .9375rem); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.kh-flow .kh-cat__other { font-size: max(12px, .8125rem); color: var(--kh-muted); overflow-wrap: anywhere; }
.kh-flow .kh-cat__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: max(12px, .8125rem); color: var(--kh-muted-2); }
.kh-flow .kh-cat__tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 .55rem; border-radius: 999px; background: var(--kh-grey-bg); font-weight: 700; color: var(--kh-grey); }
.kh-flow .kh-cat__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.kh-flow .kh-cat__acts .kh-btn { min-height: 40px; padding: 0 .9rem; }
.kh-flow .kh-cat__btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--kh-line); border-radius: 10px; background: #fff; font-size: 1.05rem; color: var(--kh-ink-2); cursor: pointer; }
.kh-flow .kh-cat__btn:hover:not(:disabled) { background: var(--kh-primary-50); }
.kh-flow .kh-cat__btn:disabled { opacity: .4; cursor: not-allowed; }
.kh-flow .kh-cat__empty { margin: 0; font-size: max(12px, .9375rem) !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--kh-muted); }
.kh-flow .kh-cat__add { justify-self: start; }
.kh-flow .kh-cat__form { display: grid; gap: .75rem; padding: .9rem; border: 1px solid var(--kh-line-2); border-radius: 12px; background: #FCFBFE; }
.kh-flow .kh-cat__form-title { margin: 0; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--kh-ink); }
.kh-flow .kh-cat__picks { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .35rem; }
.kh-flow .kh-cat__pick { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; color: var(--kh-ink-2); cursor: pointer; }
.kh-flow .kh-cat__pick.is-on { border-color: var(--kh-primary-full); background: var(--kh-primary-50); color: var(--kh-primary-full); box-shadow: 0 0 0 2px rgba(88, 50, 134, .18); }
.kh-flow .kh-cat__form-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.kh-flow .kh-card__category select.kh-inp { max-width: 28rem; }
@media (max-width: 600px) {
    .kh-flow .kh-cat__box { padding: 1rem; }
    .kh-flow .kh-cat__acts { flex: 1 1 100%; }
    .kh-flow .kh-cat__acts .kh-btn { flex: 1 1 auto; }
    .kh-flow .kh-cat__form-acts .kh-btn { flex: 1 1 0; }
    .kh-flow .kh-cat__form .kh-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- brief 1187: the path as one line, its views and «جرّب إجابات العميل» ---------- */
.kh-flow .kh-line-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 0 .9rem; }
.kh-flow .kh-seg { display: inline-flex; padding: 3px; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; }
.kh-flow .kh-seg__btn { min-height: 40px; padding: 0 1rem; border: 0; border-radius: 9px; background: transparent; font-family: inherit; font-size: max(12px, .875rem); font-weight: 700; color: var(--kh-ink-2); cursor: pointer; }
.kh-flow .kh-seg__btn:hover { background: var(--kh-primary-50); }
.kh-flow .kh-seg__btn.is-on { background: var(--kh-primary); color: #fff; }
.kh-flow .kh-seg__btn:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-path-line[hidden], .kh-flow .kh-path-board[hidden] { display: none; }
.kh-flow .kh-path-line { min-width: 0; padding: .9rem; border: 1px solid var(--kh-line); border-radius: 14px; background: #FAF9FC; }
.kh-flow .kh-line { display: grid; gap: .75rem; min-width: 0; }
.kh-flow .kh-line__hint { margin: 0; }
.kh-flow .kh-line__case { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0; padding: .55rem .75rem; border: 1px solid var(--kh-line-2); border-radius: 12px; background: #fff; font-size: max(12px, .875rem) !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
.kh-flow .kh-line__case-text { flex: 1 1 14rem; min-width: 0; }
.kh-flow .kh-line__change { min-height: 40px; }
.kh-flow .kh-line__empty { margin: 0; padding: .75rem; border: 1px dashed var(--kh-line); border-radius: 12px; background: #fff; font-size: max(12px, .875rem) !important; font-weight: 600 !important; color: var(--kh-muted); }
/* Brief 1232: the server's check of the draft, quiet while it is read; a real button to read it again when it failed. */
.kh-flow .kh-check-box:empty { display: none; }
.kh-flow .kh-check { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-size: max(12px, .875rem) !important; color: var(--kh-muted); }
.kh-flow .kh-check--failed { color: var(--kh-warn, #b54708); font-weight: 600 !important; }
/* Brief 1220: the case a stop answer ends: no step runs, the client reads its message. */
.kh-flow .kh-line__stop { margin: 0; padding: .75rem .9rem; border: 1px solid rgba(181, 71, 8, .18); border-radius: 12px; background: var(--kh-warn-bg, #fffaeb); }
.kh-flow .kh-line__stop-title { margin: 0 0 .25rem; font-weight: 700 !important; color: var(--kh-warn, #b54708); }
.kh-flow .kh-line__stop-text, .kh-flow .kh-line__stop-more { margin: 0; line-height: 1.6 !important; overflow-wrap: anywhere; }
.kh-flow .kh-line__stop-more { margin-top: .35rem; font-weight: 600 !important; }
/* The points: one number each down a rail, the cards of one point side by side as wide as they fit. */
.kh-flow .kh-line__points { position: relative; display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.kh-flow .kh-line__points::before { content: ""; position: absolute; inset-block: 1rem; inset-inline-start: .9rem; border-inline-start: 2px solid var(--kh-line); }
.kh-flow .kh-line__point { position: relative; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .35rem .7rem; align-items: start; }
.kh-flow .kh-line__head { display: contents; }
.kh-flow .kh-line__num { position: relative; z-index: 1; grid-column: 1; grid-row: 1; display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--kh-primary); color: #fff; font-size: max(12px, .8125rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.kh-flow .kh-line__num--internal { background: var(--kh-surface, #fff); border: 1px dashed var(--kh-line); color: var(--kh-ink-2); }
.kh-flow .kh-line__internal { grid-column: 2; font-size: max(12px, .8125rem); line-height: 1.6; color: var(--kh-ink-2); }
.kh-flow .kh-conditions { display: grid; gap: .5rem; min-width: 0; }
.kh-flow .kh-condition { display: grid; gap: .5rem; min-width: 0; margin: .25rem 0; padding: .65rem; border: 1px solid var(--kh-line); border-radius: .65rem; }
.kh-flow .kh-condition legend { float: none; width: auto; margin: 0; padding: 0 .3rem; font-size: .875rem; font-weight: 700; }
.kh-flow .kh-condition > .kh-btn { justify-self: start; min-height: 40px; }
.kh-flow .kh-line__together { grid-column: 2; justify-self: start; padding: .1rem .6rem; border-radius: 999px; background: var(--kh-primary-50); font-size: max(12px, .8125rem); font-weight: 800; line-height: 1.6; color: var(--kh-primary-600); }
.kh-flow .kh-line__items { grid-column: 2; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.kh-flow .kh-line__item { display: grid; gap: .35rem; flex: 1 1 15rem; min-width: 0; align-content: start; }
.kh-flow .kh-line__card { --kh-tone: #6941C6; cursor: pointer; touch-action: auto; user-select: auto; border-inline-start-color: var(--kh-tone); }
.kh-flow .kh-line__card[data-tone="1"] { --kh-tone: #027A48; }
.kh-flow .kh-line__card[data-tone="2"] { --kh-tone: #B54708; }
.kh-flow .kh-line__card[data-tone="3"] { --kh-tone: #175CD3; }
.kh-flow .kh-line__card[data-tone="4"] { --kh-tone: #C11574; }
.kh-flow .kh-line__card[data-tone="5"] { --kh-tone: #3F621A; }
.kh-flow .kh-line__card:hover { background: var(--kh-primary-50); }
.kh-flow .kh-line__card:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-line__role { align-self: flex-start; max-width: 100%; padding: .05rem .55rem; border-radius: 999px; background: var(--kh-tone); font-size: max(12px, .75rem); font-weight: 700; line-height: 1.6; color: #fff; overflow-wrap: anywhere; }
.kh-flow .kh-line__quotes { display: grid; gap: .25rem; padding: .5rem .7rem; border: 1px solid var(--kh-line-2); border-radius: 10px; background: #fff; }
.kh-flow .kh-line__fact { margin: 0; font-size: max(12px, .8125rem) !important; font-weight: 500 !important; line-height: 1.6 !important; color: var(--kh-ink-2); overflow-wrap: anywhere; }
.kh-flow .kh-line__label { font-weight: 800; color: var(--kh-ink); }
/* Brief 1265 (qa-1264: 26 to 29 px): each question under a column's quotes is a chip of 40 px at least, side by side, so the
   commas between them are left out. */
.kh-flow .kh-line__fact:has(> .kh-line__q) { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; }
.kh-flow .kh-line__fact > .kh-line__sep { display: none; }
.kh-flow .kh-line__q { display: inline-flex; align-items: center; min-height: 40px; max-width: 100%; padding: .3rem .75rem; border: 1px solid var(--kh-line); border-radius: 999px; background: #fff; font: inherit; font-weight: 700; color: var(--kh-primary-600); text-align: start; text-decoration: none; cursor: pointer; }
.kh-flow .kh-line__q:hover { background: var(--kh-primary-50); border-color: var(--kh-primary); }
.kh-flow .kh-line__q:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 1px; }
.kh-flow .kh-line__pays { grid-column: 2; display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.kh-flow .kh-line__pay { padding: .3rem .65rem; border: 1px solid #ABEFC6; border-radius: 10px; background: #ECFDF3; font-size: max(12px, .8125rem); font-weight: 600; line-height: 1.5; color: #027A48; overflow-wrap: anywhere; }
.kh-flow .kh-line__pay--release { border-color: var(--kh-line); background: #fff; color: var(--kh-ink-2); }
/* Brief 1215 (QA 1212: a long dense paragraph): «الدفع هنا ‹للدور›:» on its own line, then a row per payment. */
.kh-flow .kh-line__pay-head { display: block; }
.kh-flow .kh-line__pay-rows { display: grid; gap: .1rem; margin: .2rem 0 0; padding: 0; list-style: none; font-weight: 500; }
.kh-flow .kh-line__pay-row { overflow-wrap: anywhere; }
.kh-flow .kh-line__off-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0; font-size: max(12px, .875rem) !important; font-weight: 600 !important; color: var(--kh-muted); }
.kh-flow .kh-line__off { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.kh-flow .kh-line__off[hidden] { display: none; }
.kh-flow .kh-line__off .kh-line__card { opacity: .55; border-style: dashed; border-inline-start-style: solid; }
/* «جرّب إجابات العميل»: the platform's window in the middle of the page (the client pages' kh-win), the whole screen on a phone. */
.kh-win[hidden] { display: none !important; }
.kh-win { position: fixed; inset: 0; z-index: 100010; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(20, 20, 40, .45); }
.kh-win__box { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(42rem, 100%); max-height: min(90vh, 54rem); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgba(20, 20, 40, .2); }
.kh-win__box:focus { outline: none; }
.kh-win__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--kh-line-2); }
.kh-win__title { margin: 0; font-size: max(12px, 1.125rem) !important; font-weight: 800 !important; line-height: 1.4 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
.kh-win__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; color: var(--kh-ink-2); cursor: pointer; }
.kh-win__close:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-win__body { display: grid; gap: .75rem; min-height: 0; padding: 1rem 1.25rem 1.25rem; overflow-y: auto; overscroll-behavior: contain; }
.kh-win__body > .kh-sec__hint { margin: 0; }
.kh-win__foot { display: flex; flex-wrap: wrap; gap: .5rem; padding: .85rem 1.25rem; border-top: 1px solid var(--kh-line-2); }
/* Brief 1193 (UX 1184 §3.3): the step's window, 640 px wide; its kind over its name in the head, the delete at the far end. */
.kh-win__box--step { width: min(40rem, 100%); }
/* Brief 1296 (owner: «لو نكبر البوب أب حقها بس اوسع»): the question's window, 960 px wide on a computer. */
.kh-win__box--wide { width: min(960px, 100%); }
.kh-win__titles { display: grid; gap: .15rem; min-width: 0; }
.kh-step-foot { align-items: center; }
.kh-step-foot .kh-bs__del { margin-inline-start: auto; }
.kh-flow .kh-win__body > .kh-bs { gap: 0; }
.kh-flow .kh-win__body .kh-bs > .kh-bs__sec:first-child { padding-top: 0; border-top: 0; }
/* «تبدأ بعد»: the quotes' one choice, a step's ticks under a button, grouped by role, and the sentence of the case. */
.kh-flow .kh-start__toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 44px; padding: .45rem .75rem; border: 1px solid var(--kh-line); border-radius: 10px; background: #fff; font: inherit; font-size: max(12px, .875rem); font-weight: 600; color: var(--kh-ink); text-align: start; cursor: pointer; }
.kh-flow .kh-start__toggle:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-start__toggle[aria-expanded="true"] .kh-fold__chev { transform: rotate(180deg); }
.kh-flow .kh-start__chosen { min-width: 0; overflow-wrap: anywhere; }
.kh-flow .kh-start__list { display: grid; gap: .5rem; margin-top: .5rem; padding: .65rem; border: 1px solid var(--kh-line-2); border-radius: 10px; background: #FCFBFE; }
.kh-flow .kh-start__group { display: grid; gap: .35rem; }
.kh-flow .kh-start__role { margin: .25rem 0 0; font-size: max(12px, .8125rem) !important; font-weight: 800 !important; line-height: 1.5 !important; color: var(--kh-ink-2); }
.kh-flow .kh-start__result { margin: .5rem 0 0; padding: .45rem .65rem; border-radius: 10px; background: var(--kh-primary-50); font-size: max(12px, .875rem) !important; font-weight: 600 !important; line-height: 1.6 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
/* «+ أضف خطوة هنا» under each point, and the note of where the step went. */
.kh-flow .kh-line__addrow { grid-column: 2; }
.kh-flow .kh-line__add { min-height: 40px; padding: 0 .85rem; border: 1px dashed var(--kh-line); border-radius: 10px; background: #fff; font: inherit; font-size: max(12px, .8125rem); font-weight: 700; color: var(--kh-primary-600); cursor: pointer; }
.kh-flow .kh-line__add:hover { background: var(--kh-primary-50); border-style: solid; }
.kh-flow .kh-line__add:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-line__msg { margin: 0 0 .6rem; padding: .55rem .75rem; border: 1px solid #ABEFC6; border-radius: 10px; background: #ECFDF3; font-size: max(12px, .875rem) !important; font-weight: 600 !important; line-height: 1.6 !important; color: #027A48; overflow-wrap: anywhere; }
/* Brief 1215 (QA 1212: the band cut «أُضيفت …» once the new step scrolled into view): on a computer the note stays whole
   in view under the band, over the line, as the path's message does. */
@media (min-width: 921px) {
    .kh-flow .kh-path-main > .kh-line__msg { position: sticky; z-index: 3; top: calc(var(--kh-band-h, 0px) - 24px + .75rem); box-shadow: 0 4px 12px rgba(20, 12, 45, .08); }
}
@media (max-width: 600px) {
    .kh-win__box--step { width: 100%; }
    .kh-win__box--wide { width: 100%; }
    #khStepWin .kh-step-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #khStepWin .kh-step-foot .kh-btn { min-width: 0; width: 100%; white-space: normal; }
    #khStepWin .kh-step-foot .kh-bs__del { grid-column: 1 / -1; }
    .kh-step-foot .kh-bs__del { margin-inline-start: 0; flex: 1 1 100%; }
    .kh-flow .kh-line__add { width: 100%; }
    .kh-flow .kh-line-tools { align-items: stretch; }
    .kh-flow .kh-seg { width: 100%; }
    .kh-flow .kh-seg__btn { flex: 1 1 0; padding: 0 .5rem; }
    .kh-flow .kh-line-tools > .kh-btn { width: 100%; }
    .kh-flow .kh-path-line { padding: .6rem; }
    .kh-flow .kh-line__point { grid-template-columns: 1.5rem minmax(0, 1fr); gap: .35rem .5rem; }
    .kh-flow .kh-line__num { width: 1.5rem; height: 1.5rem; }
    .kh-flow .kh-line__points::before { inset-inline-start: .72rem; }
    .kh-flow .kh-line__item { flex-basis: 100%; }
    .kh-win { align-items: stretch; padding: 0; }
    .kh-win__box { width: 100%; height: 100%; max-height: none; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
    .kh-win__head, .kh-win__body, .kh-win__foot { padding-inline: 1rem; }
    .kh-win__foot .kh-btn { flex: 1 1 0; }
}

/* ---------- brief 1240: a question as a folded card; its fields open in a window ---------- */
.kh-flow .kh-qc { display: grid; gap: .45rem; }
.kh-flow .kh-qc__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kh-flow .kh-qc__type { font-size: max(12px, .8125rem); font-weight: 600; color: var(--kh-muted); }
.kh-flow .kh-q h3.kh-qc__title { margin: 0; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
.kh-flow .kh-qc__cond { margin: 0; padding: .35rem .65rem; border-radius: 8px; background: var(--kh-primary-50); font-size: max(12px, .8125rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-primary-600); overflow-wrap: anywhere; justify-self: start; }
.kh-flow .kh-qc__answers { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.kh-flow .kh-qc__answer { padding: .2rem .6rem; border: 1px solid var(--kh-line); border-radius: 999px; font-size: max(12px, .8125rem); font-weight: 500; line-height: 1.5; color: var(--kh-ink-2); overflow-wrap: anywhere; }
.kh-flow .kh-qc__answer.is-stop { border-color: rgba(180, 35, 24, .25); color: var(--kh-bad); }
/* Owner 2026-10-31: texts of up to 500 characters stay a short card: the question in three lines, its condition in three
   and each answer in two (a rounded box when it wraps); the whole text is in its window. */
.kh-flow .kh-q h3.kh-qc__title, .kh-flow .kh-qc__cond { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.kh-flow .kh-qc__answer { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-width: 100%; border-radius: 14px; }
.kh-flow .kh-qc__none { margin: 0; font-size: max(12px, .8125rem) !important; color: var(--kh-muted); }
.kh-flow .kh-qc__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .25rem; }
.kh-flow .kh-qc__edit { min-height: 40px; padding: 0 .9rem; }
.kh-flow .kh-q--win { padding: 0; border: 0; }
.kh-flow .kh-q__cond-text { margin: .25rem 0 0; font-size: max(12px, .875rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-primary-600); overflow-wrap: anywhere; }

/* ---------- brief 1240: the payments tab, one card per provider ---------- */
.kh-flow .kh-paycards { display: grid; gap: 1rem; min-width: 0; }
.kh-flow .kh-paycard { display: grid; gap: .75rem; min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; }
.kh-flow .kh-paycard.is-invalid { border-color: rgba(180, 35, 24, .35); }
.kh-flow .kh-paycard h3.kh-paycard__title { margin: 0; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
.kh-flow .kh-paycard__table { width: 100%; border-collapse: collapse; font-size: max(12px, .875rem); }
.kh-flow .kh-paycard__table th { padding: .45rem .5rem; border-bottom: 1px solid var(--kh-line); font-weight: 700; color: var(--kh-muted); text-align: start; }
.kh-flow .kh-paycard__table td { padding: .5rem; border-bottom: 1px solid var(--kh-line-3); vertical-align: top; color: var(--kh-ink-2); overflow-wrap: anywhere; }
.kh-flow .kh-paycard__row { cursor: pointer; }
.kh-flow .kh-paycard__row:hover td { background: var(--kh-primary-50); }
.kh-flow .kh-paycard__row.is-invalid td { background: var(--kh-bad-bg); }
/* Brief 1265 (qa-1264: 21 to 24 px): a payment's name is a full row of 40 px at least, the whole width of its cell (on a phone,
   of its card); the rest of its row opens it too (flow-editor.js, onPayClick). */
.kh-flow .kh-paycard__open { display: flex; align-items: center; width: 100%; min-height: 40px; padding: .35rem 0; border: 0; background: none; font-family: inherit; font-size: inherit; font-weight: 700; color: var(--kh-primary-600); text-align: start; text-decoration: underline; cursor: pointer; }
.kh-flow .kh-paycard__open:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-paycard__err { display: block; margin-top: .25rem; font-size: max(12px, .8125rem); font-weight: 600; color: var(--kh-bad); }
.kh-flow .kh-paycard__foot { display: grid; gap: .2rem; padding: .6rem .75rem; border-radius: 10px; background: var(--kh-grey-bg); }
.kh-flow .kh-paycard__foot:focus { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-paycard__sum { margin: 0; font-size: max(12px, .875rem) !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--kh-ink-2); overflow-wrap: anywhere; }
.kh-flow .kh-paycard__sum.is-bad { color: var(--kh-bad); }
.kh-flow .kh-paycard__sum.is-busy { font-weight: 500 !important; color: var(--kh-muted); }
/* Brief 1296: the tab is a summary; a line per payment card of the path, and «عدّل», which opens it there. */
.kh-flow .kh-paycard__lines { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.kh-flow .kh-paycard__line { display: flex; align-items: flex-start; gap: .5rem; font-size: max(12px, .875rem); font-weight: 600; line-height: 1.6; color: var(--kh-ink-2); overflow-wrap: anywhere; }
.kh-flow .kh-paycard__line .kh-sline__icon { flex: none; margin-top: .2rem; color: var(--kh-primary-600); }
.kh-flow .kh-paycard__stage { display: block; margin-bottom: .15rem; font-weight: 800; color: var(--kh-primary-600); }
.kh-flow .kh-paycard__edit { justify-self: start; min-height: 40px; }

/* ---------- brief 1240: a message «المكان: الخطأ. الإصلاح» with its «افتح» ---------- */
.kh-flow .kh-pub__list { list-style: none; padding-inline-start: 0; }
.kh-flow .kh-pub__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; }
.kh-flow .kh-pub__text { flex: 1 1 18rem; min-width: 0; font-size: max(12px, .875rem); font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.kh-flow .kh-pub__place { font-weight: 800; }
.kh-flow .kh-pub__open { flex: none; min-height: 36px; padding: 0 .9rem; }

/* 375 px: a payment's row reads as a small block, each cell under its label; nothing scrolls sideways. */
@media (max-width: 640px) {
    .kh-flow .kh-paycard { padding: .85rem .8rem; }
    .kh-flow .kh-paycard__table thead { display: none; }
    .kh-flow .kh-paycard__table, .kh-flow .kh-paycard__table tbody, .kh-flow .kh-paycard__table tr, .kh-flow .kh-paycard__table td { display: block; width: 100%; }
    .kh-flow .kh-paycard__table tr { padding: .45rem 0; border-bottom: 1px solid var(--kh-line); }
    .kh-flow .kh-paycard__table td { padding: .15rem 0; border: 0; }
    .kh-flow .kh-paycard__table td + td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--kh-muted); }
    .kh-flow .kh-paycard__edit { justify-self: stretch; }
    .kh-flow .kh-pub__open { flex: 1 1 100%; }
}

/* ---------- brief 1296: the simple line, a step per card, the payment a step of its own ---------- */
/* A card: its kind's icon and word, its name, who carries it out, a short «تبدأ بعد» line, and the share paid out there. */
.kh-flow .kh-line--simple .kh-line__card { gap: .3rem; }
.kh-flow .kh-sline__kind { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; color: var(--kh-tone); }
.kh-flow .kh-sline__kind .kh-blk__kind { color: var(--kh-ink-2); }
.kh-flow .kh-sline__icon { flex: none; }
.kh-flow .kh-sline__release { align-self: flex-start; max-width: 100%; padding: .1rem .6rem; border: 1px solid #ABEFC6; border-radius: 999px; background: #ECFDF3; font-size: max(12px, .75rem); font-weight: 700; line-height: 1.6; color: #027A48; overflow-wrap: anywhere; }
/* «11 خدمة و6 أسئلة» under a provider's first card, opening its services and the questions that ask for them. */
.kh-flow .kh-sline__more { display: grid; gap: .35rem; min-width: 0; }
.kh-flow .kh-sline__more-btn { display: inline-flex; align-items: center; gap: .4rem; justify-self: start; max-width: 100%; min-height: 40px; padding: .25rem .8rem; border: 1px solid var(--kh-line); border-radius: 999px; background: #fff; font: inherit; font-size: max(12px, .8125rem); font-weight: 700; color: var(--kh-ink-2); text-align: start; cursor: pointer; }
.kh-flow .kh-sline__more-btn:hover { background: var(--kh-primary-50); border-color: var(--kh-primary); }
.kh-flow .kh-sline__more-btn:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-sline__more-btn[aria-expanded="true"] .kh-fold__chev { transform: rotate(180deg); }
.kh-flow .kh-sline__more .kh-line__quotes[hidden] { display: none; }
/* The payments after a point: a step of their own on the line, a card mark in place of a number. */
.kh-flow .kh-sline__pays { position: relative; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .35rem .7rem; align-items: start; }
.kh-flow .kh-sline__pays > .kh-line__head { display: contents; }
.kh-flow .kh-sline__mark { position: relative; z-index: 1; grid-column: 1; grid-row: 1; display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 2px solid #ABEFC6; border-radius: 50%; background: #ECFDF3; color: #027A48; }
.kh-flow .kh-sline__pays > .kh-line__items { grid-column: 2; grid-row: 1; }
.kh-flow .kh-sline__pay { --kh-tone: #6941C6; display: flex; flex-direction: column; gap: .3rem; width: 100%; min-width: 0; min-height: 44px; padding: .55rem .7rem; border: 1px solid #ABEFC6; border-inline-start: 3px solid var(--kh-tone); border-radius: 12px; background: #F6FEF9; font: inherit; text-align: start; color: var(--kh-ink); overflow-wrap: anywhere; cursor: pointer; }
.kh-flow .kh-sline__pay[data-pay-way="transfer"] { border-color: var(--kh-line); border-inline-start-color: var(--kh-tone); background: #fff; }
.kh-flow .kh-sline__pay[data-tone="1"] { --kh-tone: #027A48; }
.kh-flow .kh-sline__pay[data-tone="2"] { --kh-tone: #B54708; }
.kh-flow .kh-sline__pay[data-tone="3"] { --kh-tone: #175CD3; }
.kh-flow .kh-sline__pay[data-tone="4"] { --kh-tone: #C11574; }
.kh-flow .kh-sline__pay[data-tone="5"] { --kh-tone: #3F621A; }
.kh-flow .kh-sline__pay:hover { background: var(--kh-primary-50); }
.kh-flow .kh-sline__pay:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-sline__pay.is-selected { border-color: var(--kh-primary); box-shadow: 0 0 0 2px var(--kh-primary); }
.kh-flow .kh-sline__pay.is-invalid { border-color: rgba(180, 35, 24, .35); background: var(--kh-bad-bg); }
.kh-flow .kh-sline__top { display: flex; align-items: flex-start; gap: .45rem; min-width: 0; }
.kh-flow .kh-sline__top > .kh-sline__icon { margin-top: .1rem; color: var(--kh-tone); }
.kh-flow .kh-sline__text { min-width: 0; font-size: max(12px, .875rem); font-weight: 600; line-height: 1.6; }
.kh-flow .kh-sline__alert { display: flex; align-items: flex-start; gap: .35rem; font-size: max(12px, .8125rem); font-weight: 700; line-height: 1.5; color: var(--kh-bad); }
.kh-flow .kh-sline__alert > .kh-sline__icon { margin-top: .15rem; }
/* «+» between the cards (UX: «زر + بين البطاقات»): a round 40 px button on the line's axis; «أضف خطوة هنا بعد النقطة N» is
   its name and its tip. */
.kh-flow .kh-line--simple .kh-line__addrow { grid-column: 1; justify-self: center; }
.kh-flow .kh-line__add.kh-line__add--plus { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px dashed var(--kh-primary); border-radius: 50%; background: #fff; font-size: 1.25rem; font-weight: 700; line-height: 1; }
.kh-flow .kh-line__add.kh-line__add--plus:hover { background: var(--kh-primary-50); border-style: solid; }
/* «تبدأ بعد»: one dropdown with a search, the default first, a choice a real button; «تنتظر أيضًا» folded under it. */
.kh-flow .kh-start__toggle:disabled { cursor: default; opacity: .75; }
.kh-flow .kh-start__search { width: 100%; min-height: 44px; }
.kh-flow .kh-start__opts { display: grid; gap: .35rem; max-height: min(22rem, 50vh); overflow-y: auto; overscroll-behavior: contain; }
.kh-flow .kh-start__opt { display: flex; align-items: center; width: 100%; min-height: 44px; padding: .4rem .75rem; border: 1px solid var(--kh-line); border-radius: 10px; background: #fff; font: inherit; font-size: max(12px, .875rem); font-weight: 600; line-height: 1.5; color: var(--kh-ink); text-align: start; overflow-wrap: anywhere; cursor: pointer; }
.kh-flow .kh-start__opt:hover { background: var(--kh-primary-50); }
.kh-flow .kh-start__opt:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-start__opt.is-on { border-color: var(--kh-primary); background: var(--kh-primary-50); color: var(--kh-primary-600); }
.kh-flow .kh-start__opt[hidden], .kh-flow .kh-start__group[hidden], .kh-flow .kh-start__none[hidden] { display: none; }
.kh-flow .kh-start__none { margin: 0; font-size: max(12px, .875rem) !important; font-weight: 600 !important; color: var(--kh-muted); }
.kh-flow .kh-start__fixed { margin: 0; padding: .55rem .75rem; border: 1px solid var(--kh-line-2); border-radius: 10px; background: #fff; font-size: max(12px, .875rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-ink); }
.kh-flow .kh-start__also { display: grid; gap: .35rem; margin-top: .6rem; }
.kh-flow .kh-start__also-sum { margin: 0; font-size: max(12px, .8125rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-ink-2); overflow-wrap: anywhere; }
/* The payments' window: the payments tab's table, each payment's name a full-width button. */
.kh-flow .kh-paygroup { padding: 0; border: 0; }
/* Brief 1296: on a computer each answer of the question's window is one row of two columns: its texts, then what choosing it
   does and the partner match; on a phone as before. */
@media (min-width: 921px) {
    .kh-flow .kh-win__box--wide .kh-ans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
    .kh-flow .kh-win__box--wide .kh-ans > * { grid-column: 2; min-width: 0; }
    .kh-flow .kh-win__box--wide .kh-ans > .kh-ans__head { grid-column: 1 / -1; }
    .kh-flow .kh-win__box--wide .kh-ans > .kh-pair:nth-child(2) { grid-column: 1; grid-row: 2 / span 8; grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
    .kh-flow .kh-win__box--wide .kh-ans > .kh-ans__row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .kh-flow .kh-seg__btn { line-height: 1.3; }
    .kh-flow .kh-sline__pays { grid-template-columns: 1.5rem minmax(0, 1fr); gap: .35rem .5rem; }
    .kh-flow .kh-sline__mark { width: 1.5rem; height: 1.5rem; }
}

/* ---------- brief 1302: a kind from «+», a window for each kind, one undo, a journey copied ---------- */
/* «+»'s kinds: a real button each, its icon, its word and its one line of meaning; two columns on a computer. */
.kh-flow .kh-typepick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.kh-flow .kh-typepick__hint { margin: 0; }
.kh-flow .kh-typepick__opt { display: flex; align-items: flex-start; gap: .6rem; width: 100%; min-width: 0; min-height: 56px; padding: .65rem .8rem; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; font: inherit; color: var(--kh-ink); text-align: start; cursor: pointer; }
.kh-flow .kh-typepick__opt > .kh-sline__icon { margin-top: .1rem; color: var(--kh-primary-600); }
.kh-flow .kh-typepick__opt:hover:not(:disabled) { border-color: var(--kh-primary); background: var(--kh-primary-50); }
.kh-flow .kh-typepick__opt:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-typepick__opt:disabled { background: #F6F5F9; color: var(--kh-muted); cursor: not-allowed; }
.kh-flow .kh-typepick__opt:disabled > .kh-sline__icon { color: var(--kh-muted); }
.kh-flow .kh-typepick__txt { display: grid; gap: .15rem; min-width: 0; }
.kh-flow .kh-typepick__name { font-size: max(12px, .9375rem); font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.kh-flow .kh-typepick__why { font-size: max(12px, .8125rem); font-weight: 500; line-height: 1.5; color: var(--kh-muted); overflow-wrap: anywhere; }
.kh-flow .kh-typepick__backrow { display: flex; }
.kh-flow .kh-typepick__back { min-height: 40px; white-space: normal; }
/* A kind's window: its meaning first, who carries it out as a fixed field, the other settings folded; its fields 44 px. */
.kh-flow .kh-tw .kh-inp { min-height: 44px; }
.kh-flow .kh-tw .kh-translate { min-height: 40px; }
.kh-flow .kh-tw--new { display: grid; gap: .75rem; min-width: 0; }
.kh-flow .kh-tw--new > .kh-tw__why { margin: 0; }
.kh-flow .kh-tw__why { margin: 0 0 .5rem; padding: .5rem .75rem; border-radius: 10px; background: var(--kh-primary-50); font-size: max(12px, .875rem) !important; font-weight: 600 !important; line-height: 1.6 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
.kh-flow .kh-tw__who { display: grid; gap: .3rem; margin: 0 0 .5rem; }
.kh-flow .kh-tw__label { font-size: max(12px, .875rem); font-weight: 700; line-height: 1.5; color: var(--kh-ink-2); }
.kh-flow .kh-tw__value { padding: .55rem .75rem; border: 1px dashed var(--kh-line); border-radius: 10px; background: #FCFBFE; font-size: max(12px, .875rem); font-weight: 700; line-height: 1.5; color: var(--kh-ink); overflow-wrap: anywhere; }
.kh-flow .kh-tw__more-btn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 44px; padding: .45rem .75rem; border: 1px solid var(--kh-line); border-radius: 10px; background: #fff; font: inherit; font-size: max(12px, .875rem); font-weight: 700; color: var(--kh-ink-2); text-align: start; cursor: pointer; }
.kh-flow .kh-tw__more-btn:hover { background: var(--kh-primary-50); }
.kh-flow .kh-tw__more-btn:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-flow .kh-tw__more-btn[aria-expanded="true"] .kh-fold__chev { transform: rotate(180deg); }
.kh-flow .kh-tw__more-body { display: grid; gap: .5rem; margin-top: .6rem; min-width: 0; }
.kh-flow .kh-tw__more-body[hidden] { display: none; }
/* «دورة الاعتماد»: each approver numbered, its «لأعلى», «لأسفل» and «حذف» beside it, «أضف» under the list. */
.kh-flow .kh-cycle { min-width: 0; margin: 0; padding: 0; border: 0; }
.kh-flow .kh-cycle > legend { padding: 0; margin-bottom: .4rem; }
.kh-flow .kh-cycle:focus { outline: none; }
.kh-flow .kh-cycle__list { display: grid; gap: .5rem; margin: 0 0 .6rem; padding: 0; list-style: none; }
.kh-flow .kh-cycle__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--kh-line); border-radius: 10px; background: #fff; }
.kh-flow .kh-cycle__num { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--kh-primary-50); font-size: max(12px, .8125rem); font-weight: 800; color: var(--kh-primary-600); }
.kh-flow .kh-cycle__name { flex: 1 1 10rem; min-width: 0; font-size: max(12px, .875rem); font-weight: 700; line-height: 1.5; color: var(--kh-ink); overflow-wrap: anywhere; }
.kh-flow .kh-cycle__add { display: grid; gap: .35rem; margin-bottom: .5rem; }
.kh-flow .kh-cycle__pick { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.kh-flow .kh-cycle__pick > select { flex: 1 1 12rem; min-width: 0; }
.kh-flow .kh-cycle__pick > .kh-btn { min-height: 44px; }
/* «تراجع: ‹ما حدث›» on the path's tools; the words wrap rather than run off a phone. */
.kh-flow .kh-undo { min-height: 40px; max-width: 100%; white-space: normal; text-align: start; }
/* «ابدأ من رحلة موجودة» under the new service's names: the whole row, 44 px. */
.kh-flow .kh-copy-from { margin-top: .75rem; }
.kh-flow .kh-copy-from .kh-inp { min-height: 44px; }
.kh-flow .kh-copy { display: grid; gap: .25rem; }
.kh-flow .kh-copy__text { margin: 0; overflow-wrap: anywhere; }
/* Brief 1305: «النسخة التي تُنسخ» under the list, its two choices side by side where they fit, one under the other on a phone. */
.kh-flow .kh-copy-version { margin-top: .75rem; }
.kh-flow .kh-copy-version .kh-waits__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
@media (max-width: 600px) {
    .kh-flow .kh-typepick { grid-template-columns: minmax(0, 1fr); }
    .kh-flow .kh-cycle__row > .kh-q__acts { flex: 1 1 100%; }
    .kh-flow .kh-cycle__pick > .kh-btn { flex: 1 1 100%; }
    .kh-flow .kh-undo { width: 100%; }
}

/* Service journey editor: let the title/status and actions wrap without covering each other. */
.kh-flow--edit .kh-band__row { flex-wrap: wrap; }
.kh-flow--edit .kh-band__txt { min-width: 0; flex: 1 1 18rem; }
.kh-flow--edit .kh-band__head { flex-wrap: wrap; gap: .5rem; }
.kh-flow--edit .kh-band__title { overflow-wrap: anywhere; }
.kh-flow--edit .kh-band__acts { flex-wrap: wrap; }
.kh-flow .kh-btn, .kh-flow .kh-tab, .kh-flow .kh-seg__btn { min-height: 40px; }
.kh-flow .kh-sline__pays .kh-line__num { background: var(--kh-primary, #635183); color: #fff; }
@media (max-width: 1280px) {
    .kh-flow--edit .kh-band { position: static; }
    .kh-flow--edit .kh-band__acts.kh-flow-pub { flex: 1 1 100%; }
}

/* Optional answer illustrations preserve the native labelled choice and its focus ring. */
.kh-choice-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #f8f7fb; border-radius: 10px; }
.kh-choice-image[hidden] { display: none; }
.kh-answer-image { display: grid; gap: .65rem; padding: 1rem; margin-block: .8rem; border: 1px solid var(--kh-line); border-radius: 12px; }
.kh-answer-image > img { max-width: 240px; }
.kh-answer-image > button { justify-self: start; }
.kh-flow .kh-pv-opts.kh-pv-opts--images { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: start; gap: .6rem; }
.kh-flow .kh-pv-opts--images > .kh-chip { min-width: 0; min-height: 84px; flex-wrap: nowrap; align-items: center; }
.kh-flow .kh-pv-opts--images .kh-chip input { margin-top: 0; }
.kh-flow .kh-pv-opts--images .kh-chip label { display: flex; flex-direction: row; align-items: center; gap: .65rem; width: auto; padding: .55rem 0; }
.kh-flow .kh-pv-opts--images .kh-choice-image { width: 96px; height: 64px; flex: 0 0 96px; }