/* ============================================================================
   Forms (KBM-0012): the Forms view of /tasks, the "New form" dialog, and the
   form page — palette (left panel), canvas, inspector, preview, results.
   Theme variables only (theme.css). One breakpoint: 1023px; below it the
   inspector becomes a bottom sheet that opens on a selection.
   ============================================================================ */

.fb-pad { padding: 1rem; }

/* ── Forms view (list) ───────────────────────────────────────────────────── */
.fb-new { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; }
.klist-cols.fb-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(8rem, .8fr); }
.fb-counts { display: flex; gap: .6rem; justify-content: flex-end; }
.fb-waiting { color: var(--amber-text); font-weight: 600; }

/* ── New form dialog ─────────────────────────────────────────────────────── */
.fb-new-body { display: flex; flex-direction: column; gap: .45rem; }
.fb-starts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.fb-start {
    display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-align: left;
    padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
    color: var(--ink); cursor: pointer; font: inherit;
}
.fb-start:hover { border-color: var(--human); }
.fb-start.on { border-color: var(--human); background: var(--human-soft); box-shadow: 0 0 0 1px var(--human); }
.fb-start-ico { color: var(--human-text); }
.fb-start-name { font-weight: 600; font-size: var(--fs-md); }
.fb-start-hint { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.35; }

/* ── Form page: head and tabs ────────────────────────────────────────────── */
.fb-head { align-items: center; }
.fb-titlebox { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1 1 auto; }
.fb-title-input {
    flex: 1 1 auto; min-width: 0; border: 1px solid transparent; border-radius: 9px; background: transparent;
    padding: .25rem .5rem; color: var(--ink); font-family: var(--font-head); font-size: var(--fs-2xl); font-weight: 700;
}
.fb-title-input:hover { border-color: var(--line); }
.fb-title-input:focus { outline: none; border-color: var(--human); background: var(--field); }

/* ── Workbench: canvas | inspector ───────────────────────────────────────── */
.fb-work { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.fb-canvas-col { min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.fb-canvas-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fb-add-mobile, .fb-sheet-head { display: none; }
.fb-settings-btn { margin-left: auto; }

.fb-canvas { display: flex; flex-direction: column; gap: .6rem; max-width: 760px; width: 100%; margin: 0 auto; }
.fb-intro { border: 1px dashed var(--line); border-radius: 12px; padding: .4rem; }
.fb-intro.on { border-color: var(--human); }
.fb-intro-text {
    width: 100%; border: 0; resize: vertical; background: transparent; color: var(--ink);
    font: inherit; font-size: var(--fs-md); padding: .4rem;
}
.fb-intro-text:focus { outline: none; }
.fb-intro-read { margin: 0 0 .4rem; color: var(--ink-soft); white-space: pre-line; }
.fb-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-soft); border: 1px dashed var(--line); border-radius: 12px; }

/* A question card. */
.fb-q {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem;
    display: flex; flex-direction: column; gap: .45rem; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.fb-q:hover { border-color: var(--border-input); }
.fb-q.on { border-color: var(--human); box-shadow: 0 0 0 1px var(--human); }
.fb-q.drop { box-shadow: 0 -3px 0 var(--human); }
.fb-q.read { cursor: default; }
.fb-q.missing { border-color: var(--alert); }
.fb-q:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fb-q-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.fb-q-handle { color: var(--ink-soft); cursor: grab; letter-spacing: -2px; font-size: var(--fs-sm); }
.fb-q-n { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-soft); }
.fb-q-label { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.fb-req { color: var(--alert-text); margin-left: .15rem; }
.fb-q-help { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.fb-q-err { margin: 0; font-size: var(--fs-sm); color: var(--alert-text); }
.fb-q-body { pointer-events: auto; }
.fb-q:not(.read) .fb-q-body { pointer-events: none; }   /* the canvas shows the input, it does not fill it */
.fb-q-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.fb-q:hover .fb-q-actions, .fb-q.on .fb-q-actions, .fb-q:focus-within .fb-q-actions { opacity: 1; }
.fb-q-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.fb-intro .fb-q-chips { margin-top: .25rem; }
.fb-intro .fb-q-chips:not(:has(*)) { display: none; }
.fb-chip {
    display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-xs); font-weight: 600;
    padding: .15rem .5rem; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-chip.native { background: var(--human-soft); color: var(--human-text); }
.fb-chip.cond   { background: var(--amber-soft); color: var(--amber-text); }

.fb-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px;
    border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; font: inherit;
}
.fb-icon-btn:hover:not(:disabled) { background: var(--we); color: var(--ink); }
.fb-icon-btn.danger:hover:not(:disabled) { color: var(--alert-text); }
.fb-icon-btn:disabled { opacity: .35; cursor: default; }

/* Inputs inside a question. */
.fb-in.sm-w { max-width: 14rem; }
.fb-choices { display: flex; flex-direction: column; gap: .3rem; }
.fb-range { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fb-range .fb-in { flex: 1 1 10rem; }

/* A file question being filled: one row per file, the picker under them. */
.fb-files { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.fb-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.fb-file {
    display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .3rem .3rem .3rem .6rem;
    border: 1px solid var(--line); border-radius: 9px; background: var(--card);
}
.fb-file.busy { color: var(--ink-soft); }
.fb-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-file .k-meta { flex: 0 0 auto; font-size: var(--fs-sm); }
.fb-file-add { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fb-file-add .k-meta { font-size: var(--fs-sm); }
.fb-file-pick { position: relative; overflow: hidden; cursor: pointer; }
.fb-file-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fb-file-pick:focus-within { outline: 2px solid var(--human); outline-offset: 2px; }

/* Files in the results table: the first three, then "and N more". */
.fb-cell-files { display: flex; flex-wrap: wrap; gap: .2rem .5rem; }
.fb-file-link {
    border: 0; padding: 0; background: none; font: inherit; color: var(--human-text); cursor: pointer;
    max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}
.fb-file-link:hover { text-decoration: underline; }

.fb-preview-foot { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .4rem; }
.fb-thanks { padding: 2rem 1rem; text-align: center; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.fb-thanks p { white-space: pre-line; color: var(--ink); }

/* ── Palette (left panel) ────────────────────────────────────────────────── */
.fb-palette { display: flex; flex-direction: column; gap: 1px; padding: .35rem .5rem .75rem; }
.fb-palette-hint { margin: 0 .55rem .3rem; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.35; }
.fb-pal-item {
    display: flex; align-items: center; gap: .55rem; width: 100%; padding: .42rem .55rem; border: 0; border-radius: 9px;
    background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer;
}
.fb-pal-item:hover:not(:disabled) { background: var(--we); }
.fb-pal-item.native .fb-kind-ico { color: var(--human-text); }
.fb-pal-item:disabled { color: var(--ink-soft); cursor: default; }
.fb-pal-used { margin-left: auto; color: var(--ink-soft); }
.fb-kind-ico { flex: 0 0 auto; color: var(--ink-soft); }

/* ── Inspector ───────────────────────────────────────────────────────────── */
.fb-inspector {
    position: sticky; top: 1rem; max-height: calc(100dvh - 2rem); overflow: auto;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .9rem;
}
.fb-insp { display: flex; flex-direction: column; gap: .45rem; }
.fb-insp .k-label { margin-top: .35rem; }
.fb-insp-kind { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.fb-section {
    margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.fb-insp > .fb-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.fb-more summary { cursor: pointer; font-size: var(--fs-sm); color: var(--human-text); padding: .2rem 0; }
.fb-more[open] { display: flex; flex-direction: column; gap: .3rem; }
.fb-seg-full { width: 100%; }
.fb-seg-full button { flex: 1 1 0; }
.fb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.fb-rule { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.fb-toggle-hint { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-soft); }

.fb-options, .fb-showif { display: flex; flex-direction: column; gap: .35rem; margin-top: .35rem; }
.fb-option { display: flex; align-items: center; gap: .35rem; }
.fb-option .k-field { flex: 1 1 auto; }
.fb-option-prio { flex: 0 0 7rem; }
.fb-cond {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
    padding: .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
}
.fb-cond > select:first-child { flex: 1 1 100%; }
.fb-cond-op { flex: 0 0 auto; width: auto; }
.fb-cond-values { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1 1 auto; }
.fb-cond-num { flex: 1 1 5rem; }
.fb-cond .fb-icon-btn { margin-left: auto; }
.fb-logic { display: flex; flex-direction: column; gap: .45rem; margin-top: .35rem; }
.fb-logic-branch { display: flex; flex-direction: column; gap: .3rem; padding: .5rem; border: 1px solid var(--line); border-radius: 10px; }
.fb-logic-if { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

.fb-fillers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fb-filler { display: flex; align-items: center; gap: .5rem; padding: .25rem .35rem; border-radius: 8px; }
.fb-filler:hover { background: var(--we); }
.fb-filler-ico { color: var(--ink-soft); width: 1rem; text-align: center; }
.fb-filler-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-fillers-none { margin: 0; font-size: var(--fs-sm); color: var(--amber-text); }
.fb-fillers-add { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* ── Results ─────────────────────────────────────────────────────────────── */
.fb-groupby { display: flex; align-items: center; gap: .4rem; }
.fb-groupby .k-label { margin: 0; white-space: nowrap; }
/* .k-page-sub is sized for a head row; here it is a direct child of the page column, where flex-basis 100% would take its whole height. */
.k-page-sub.fb-results-count { flex: 0 0 auto; margin-bottom: .5rem; }
.fb-results td { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-result-row { cursor: pointer; }
.fb-result-row:hover td { background: var(--we); }
.fb-cell-title { font-weight: 600; }
.fb-group-row td {
    background: var(--paper); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-soft);
}

/* ── Automations modal ───────────────────────────────────────────────────── */
.fb-auto .klist { margin-bottom: .8rem; }
.fb-auto-new { margin-top: .4rem; }

/* ── Requests (catalogue, filling) ───────────────────────────────────────── */
.rq-count { margin-left: .35rem; }
.rq-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .6rem; }
.rq-card {
    display: flex; flex-direction: column; gap: .3rem; padding: .85rem .95rem; border: 1px solid var(--line);
    border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none;
    transition: border-color .12s, box-shadow .12s;
}
.rq-card:hover { border-color: var(--human); box-shadow: var(--shadow-sm); }
.rq-card-title { font-weight: 600; font-size: var(--fs-md); }
.rq-card-intro {
    font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rq-card-meta { font-size: var(--fs-xs); color: var(--ink-soft); }
.rq-fill .fb-canvas { margin: 0; }
.rq-anon-note { max-width: 760px; }

/* A request as the filled-in form (KBM-0020): status and who sent it above, the answers, the thread below. */
.rq-sheet { display: flex; flex-direction: column; gap: .75rem; max-width: 760px; }
.rq-sheet-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rq-sheet-task { margin-left: auto; }
.rq-sheet-lock { margin: 0; }
.rq-sheet .fb-canvas { margin: 0; }
.rq-sheet-comments { border-top: 1px solid var(--line); padding-top: .75rem; }

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .fb-starts { grid-template-columns: 1fr; }
    .klist-cols.fb-row { grid-template-columns: minmax(0, 1fr); }
    .fb-counts { justify-content: flex-start; }
    .fb-title-input { font-size: var(--fs-xl); }

    .fb-work { grid-template-columns: minmax(0, 1fr); }
    .fb-add-mobile { display: inline-flex; }
    /* The inspector is a bottom sheet, open only after a selection or "Settings". */
    .fb-inspector {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1050;
        max-height: 78dvh; border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg);
        padding-bottom: calc(.9rem + env(safe-area-inset-bottom));
        transform: translateY(105%); transition: transform .2s ease;
    }
    .fb-work.sheet-open .fb-inspector { transform: none; }
    .fb-sheet-head {
        display: flex; align-items: center; justify-content: space-between; gap: .5rem;
        font-weight: 700; margin-bottom: .4rem;
    }
    .fb-q-actions { opacity: 1; }
    .fb-results td { max-width: 12rem; }
}

/* A form with answers (KBM-0012): hidden questions and choices stay, dimmed; never deleted. */
.fb-q.hidden-q { opacity: .6; border-style: dashed; }
.fb-q.hidden-q.on { opacity: .85; }
.fb-chip.off   { background: var(--we); color: var(--ink-soft); }
.fb-chip.count { background: var(--we); color: var(--ink-soft); font-weight: 500; }
.fb-option.off .k-field { color: var(--ink-soft); text-decoration: line-through; }
.fb-insp-note { margin: .5rem 0; }
.fb-insp-note p { margin: 0 0 .5rem; }
.fb-answered { margin: 0 0 .6rem; font-size: var(--fs-sm); }
.fb-col-off { color: var(--ink-soft); font-weight: 400; }


/* Publishing a form (KBM-0008): address, embed snippet. */
.fb-pub-copy { display: flex; gap: .4rem; align-items: flex-start; }
.fb-pub-copy .k-field { flex: 1 1 auto; min-width: 0; }
.fb-pub-embed { font-family: var(--mono, monospace); font-size: var(--fs-xs); resize: none; }
.fb-pub-regen { margin-top: .4rem; }
.fb-pub-off { margin: .5rem 0; }
.fb-pub-off p { margin: 0 0 .5rem; }
.fb-pub-note { margin: .25rem 0 0; }

/* Two questions that may be shown together and write the same piece of the task. */
.fb-chip.clash { background: var(--amber-soft); color: var(--amber-text); }

/* A number with its unit outside the field: an amount's currency, before or after as the reader writes it. */
.fb-num { display: flex; align-items: center; gap: .4rem; }
.fb-num-affix { color: var(--ink-soft); font-size: var(--fs-md); white-space: nowrap; }

/* ── Project fields page (KBM-0003) ─────────────────────────────────────── */
.pf-page { max-width: 860px; }
.pf-intro { margin: 0 0 .8rem; }
.pf-add { display: flex; gap: .5rem; align-items: center; margin: 0 0 1rem; flex-wrap: wrap; }
.pf-empty { padding: 1rem 0; }
.pf-row { align-items: flex-start; padding-top: .55rem; padding-bottom: .55rem; }
.pf-row.off .pf-label { opacity: .6; }
.pf-move { display: flex; flex-direction: column; gap: 2px; }
.pf-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.pf-label { flex: 1 1 14rem; min-width: 0; max-width: 24rem; }
.pf-detail { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; max-width: 30rem; }
.pf-actions { display: flex; gap: .35rem; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.lft-filter { display: flex; flex-direction: column; gap: .45rem; }
.lft-choices { display: flex; flex-direction: column; gap: .2rem; max-height: 16rem; overflow-y: auto; }
@media (max-width: 640px) {
    .pf-row { flex-wrap: wrap; }
    .pf-actions { flex: 1 1 100%; justify-content: flex-start; }
}

/* ── Text blocks (KBM-0023) ─────────────────────────────────────────────── */
.fb-q.fb-q-text { background: var(--paper); }
.fb-q.fb-q-text .fb-q-body { margin-top: 0; }
.fb-text.md { color: var(--ink); line-height: 1.5; font-size: var(--fs-md); }
.fb-text.md p { margin: 0 0 .5rem; }
.fb-text.md p:last-child { margin-bottom: 0; }
.fb-text.md ul, .fb-text.md ol { margin: 0 0 .5rem 1.2rem; padding: 0; }
.fb-text.md a { color: var(--human-text); text-decoration: underline; }

/* ── Languages (KBM-0022) ───────────────────────────────────────────────── */
.fb-lang-bar button { position: relative; letter-spacing: .04em; }
.fb-lang-count {
    display: inline-block; min-width: 1.1rem; padding: 0 .3rem; margin-left: .3rem; border-radius: 999px;
    background: var(--amber-soft); color: var(--amber-text); font-size: .7rem; line-height: 1.1rem; text-align: center;
}
.fb-dot { display: inline-block; width: .45rem; height: .45rem; margin-left: .35rem; border-radius: 50%; background: var(--amber-text); vertical-align: middle; }
.fb-titlebox .fb-chip { flex: none; }
.fb-chip.missing { background: var(--amber-soft); color: var(--amber-text); }
.fb-chip.review { background: var(--human-soft); color: var(--human-text); }
.fb-review { margin-left: .4rem; font-weight: 500; }
.fb-reviewed {
    display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin-left: .3rem;
    padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface, transparent);
    color: var(--ink-soft); font-size: .7rem; line-height: 1; cursor: pointer; vertical-align: middle;
}
.fb-reviewed:hover { border-color: var(--human); color: var(--human-text); }
.fb-own-review { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fb-langs { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.fb-lang { display: flex; align-items: center; gap: .5rem; padding: .3rem .45rem; border: 1px solid var(--line); border-radius: 8px; }
.fb-lang.on { border-color: var(--human); }
.fb-lang-name { flex: 1 1 auto; display: flex; align-items: center; gap: .4rem; background: none; border: 0; padding: 0; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.fb-lang-name:hover { color: var(--human-text); }
.fb-lang-state { display: flex; gap: .3rem; flex-wrap: wrap; }
.fb-lang-actions { display: flex; gap: .15rem; }
.fb-lang-add { grid-template-columns: 1fr auto; align-items: end; }
.fb-lang-translate { margin-top: .5rem; display: inline-flex; align-items: center; gap: .35rem; }
.fb-translate-orig { margin: 0 0 .25rem; color: var(--ink-soft); font-size: var(--fs-sm); white-space: pre-line; }
.fb-translate-table td { vertical-align: top; }
.fb-translate-table .k-field { width: 100%; min-width: 14rem; }
.fb-translate-src { white-space: pre-line; max-width: 22rem; }