/* ── SKILL CHIPS ── a comma-separated string made users manage punctuation by hand and gave no
   feedback about what was actually stored. Chips make each skill a real object: visible, individually
   removable, and impossible to mangle with a stray comma. */
.chipbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:42px;padding:7px 9px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface,transparent);cursor:text}
.chipbox:focus-within{border-color:var(--acc,#F5FFAB)}
.chips{display:contents}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:99px;
  background:var(--acc,#F5FFAB);color:#11131f;font-size:12.5px;font-weight:600;line-height:1.5;max-width:100%}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip b{cursor:pointer;font-weight:700;opacity:.55;padding:0 1px}
.chip b:hover{opacity:1}
.chipin{flex:1;min-width:150px;border:0;outline:0;background:none;color:inherit;font:inherit;padding:4px 2px}
.kwb{margin:26px 0 0;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface,rgba(255,255,255,.02))}
.kwb-h{margin:0 0 14px;font-size:1.02rem;letter-spacing:-.01em}
.kwb-tag{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5;border:1px solid var(--line);border-radius:99px;padding:2px 7px;margin-left:8px;vertical-align:middle}
.kwb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kwb-cell{display:flex;flex-direction:column;gap:3px;min-width:0}
.kwb-k{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;opacity:.45}
.kwb-cell b{font-size:.95rem;font-weight:650;overflow-wrap:anywhere}
.kwb-bar{height:5px;border-radius:99px;background:var(--line);margin:16px 0 4px;overflow:hidden}
.kwb-fill{height:100%;width:0;border-radius:99px;background:var(--acc,#F5FFAB);transition:width .5s ease}
.kwb-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.kwb-btn{cursor:pointer;border:1px solid var(--line);background:none;color:inherit;border-radius:10px;padding:9px 15px;font:inherit;font-size:.85rem;font-weight:600;transition:border-color .15s,color .15s}
/* ⛔ was: lime border AND lime TEXT. On the light card that is glare on near-white and
   the label all but disappears. Hover now lifts the surface and darkens the hairline —
   the accent stays reserved for the primary action. */
.kwb-btn:hover{border-color:var(--ink,#17172B);background:rgba(23,23,43,.045)}
.kwb-btn:active{transform:translateY(1px)}
.kwb-btn:focus-visible{outline:2px solid var(--acc,#F5FFAB);outline-offset:2px}
.kwb-primary{background:var(--acc,#F5FFAB);color:#11131f;border-color:transparent}
.kwb-primary:hover{color:#11131f;opacity:.9}
.kwb-danger:hover{border-color:#ff6b6b;color:#ff6b6b}
.kwb-btn[disabled]{opacity:.4;cursor:not-allowed}
.kwb-note{font-size:.78rem;opacity:.6}
.kwb-fine{margin:12px 0 0;font-size:.76rem;line-height:1.55;opacity:.55}
.kwb-mode{display:flex;flex-direction:column;gap:6px}
.kwb-modev{display:flex;align-items:center;gap:9px;font-size:1.05rem}
.kwb-dot{width:9px;height:9px;border-radius:99px;background:#7a7a86;flex:none}
.kwb-dot.live{background:#ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.16)}
.kwb-dot.dry{background:var(--acc,#F5FFAB)}
.kwb-modex{margin:0;font-size:.8rem;line-height:1.6;opacity:.62}
@media(max-width:720px){.kwb-grid{grid-template-columns:minmax(0,1fr);gap:11px}.kwb{padding:16px}}

/* ── SETTINGS FIELDS ── the Common block used to be bare comma-separated text boxes. Chips make each
   entry a real, removable object (same component as skills), and a segmented control makes the
   remote preference a decision rather than a dropdown to open. */
.form-grid .field-wide{grid-column:1/-1}
.field-hint{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--ink-dim,rgba(23,23,43,.55))}
.seg-lg{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative;
        border:1px solid var(--line);border-radius:12px;padding:4px;background:var(--surface-2,rgba(23,23,43,.04))}
.seg-lg .seg-opt{position:relative;z-index:1;background:none;border:0;font:inherit;font-size:12.5px;
        font-weight:700;letter-spacing:-.01em;color:var(--ink-dim,rgba(23,23,43,.6));padding:9px 6px;
        border-radius:9px;cursor:pointer;transition:color .16s}
.seg-lg .seg-opt:hover{color:var(--ink,#17172B)}
.seg-lg .seg-opt.active{color:var(--navy,#17172B)}
/* ⛔ WAS HARDCODED /4 (2026-08-01). The moment the control went from four options to two,
   the thumb stayed quarter-width and the CSS had no way to know. Derive it from the real
   option count (--seg-n, set in JS) so changing the options can never desync the thumb. */
.seg-lg .seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--seg-n,2));
        background:var(--acc,#F5FFAB);border-radius:9px;transition:transform .22s cubic-bezier(.4,0,.2,1);z-index:0}
@media(max-width:640px){.seg-lg{grid-auto-flow:row;grid-auto-columns:auto}.seg-lg .seg-thumb{display:none}
        .seg-lg .seg-opt.active{background:var(--acc,#F5FFAB)}}


/* screening questions, inline on the Sent tab */
.qpanel{padding:14px 16px;background:rgba(255,255,255,.04);border-radius:10px;margin:6px 0 10px}
/* required marker + the still-missing state after a save attempt */
.qreq{margin-left:8px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3,#7c7c93);border:1px solid var(--line);border-radius:20px;padding:1px 7px;vertical-align:middle}
.qitem.missing{border-left:3px solid var(--bad,#C0392B);padding-left:11px;margin-left:-14px}
.qitem.missing .qreq{color:var(--bad,#C0392B);border-color:var(--bad,#C0392B)}
.qitem.missing input,.qitem.missing select,.qitem.missing textarea{border-color:var(--bad,#C0392B)}
/* an employer label that carries no information — say so, do not let it read as our bug */
.qhint-odd{margin:0;font-size:11.5px;line-height:1.45;color:var(--ink-3,#7c7c93);
  background:rgba(23,23,43,.04);border-radius:8px;padding:6px 9px}
/* ── ANSWERS tab: mobile-first, no inline grids ── */
.factchips{margin:0 0 12px}
.factchips:empty{display:none}
.factchips-h{font-size:12.5px;color:var(--ink-2);margin:0 0 8px;line-height:1.45}
.factchip{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin:0 6px 6px 0;
  padding:8px 12px;border:1.5px solid var(--line);border-radius:20px;background:transparent;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink,#17172B);cursor:pointer;
  text-align:left;line-height:1.35;white-space:normal}
.factchip:hover{border-color:var(--ink-faint)}
.factchip .fc-n{flex:0 0 auto;font-size:11px;font-weight:800;background:var(--lime);color:var(--navy);
  border-radius:20px;padding:2px 7px}
.ansform{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.ansform .field{min-width:0}
.ansform input{width:100%}
@media(max-width:760px){
  /* ⛔ ONE COLUMN, FULL-WIDTH CONTROLS. Two 1fr columns on a 390px screen leave ~150px per
     input, which is where 'Are yc' came from. */
  .ansform{grid-template-columns:1fr;gap:12px}
  .ansform-go .btn{width:100%;min-height:46px}
  .factchip{width:100%;justify-content:space-between;margin:0 0 8px}
}
/* saved answers: table on desktop, one card per row on a phone */
@media(max-width:760px){
  .anstbl,.anstbl tbody,.anstbl tr,.anstbl td{display:block;width:100%}
  .anstbl thead{display:none}
  .anstbl tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px;position:relative}
  .anstbl td{border:0;padding:2px 0}
  /* ⛔ THE RESERVATION MUST EXCEED THE BUTTON. 34px reserved against a 39px button sitting
     6px from the edge (45px total) let long questions run UNDER the delete control. */
  .anstbl td[data-l="Question"]{font-weight:700;padding-right:52px}
  .anstbl td[data-l="Answer"]{color:var(--ink-2)}
  .anstbl .ans-upd{display:none}
  /* ⛔⛔ width:auto IS LOAD-BEARING. The card-mode rule above sets width:100% on EVERY td,
     and this cell is a td: absolute + width:100% + right:8px puts its LEFT edge 8px
     OUTSIDE the card, so the × button landed on top of the first letter of every
     question (the ghost box eating each "W" in the owner's screenshots). A shorthand
     that matched more elements than intended, exactly like the .seg-opt case. */
  .anstbl .ans-del{position:absolute;top:6px;right:6px;width:auto;padding:0;margin:0}
  .anstbl .ans-del .btn{min-width:34px;min-height:34px;line-height:1}
}
.qmulti{display:flex;flex-direction:column;gap:6px;margin:2px 0}.qopt{display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.35;padding:4px 0;cursor:pointer}.qopt input{width:16px;height:16px;flex:0 0 auto}.qitem{margin:0 0 12px;display:flex;flex-direction:column;gap:6px}
.qitem label{font-size:13.5px;line-height:1.45}
.qitem textarea,.qitem select{width:100%;max-width:640px;padding:8px 10px;border-radius:8px;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:inherit;font:inherit}
.qactions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
tr.qrow>td{padding-top:0!important;padding-bottom:0!important}

.qdone{margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.10)}
.qitem-done{margin:0 0 9px}
.qitem-done .qq{font-size:12.5px;line-height:1.45;opacity:.72}
.qitem-done .qa{font-size:13.5px;line-height:1.45;padding-left:10px;border-left:2px solid #c9d76a;margin-top:3px}
/* REVIEW BEFORE SEND (2026-10-07): the source chip next to each answer, the review rows (Keywordise chip family, no new tab) */
.srcchip{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;vertical-align:middle;background:rgba(127,127,160,.14);color:var(--ink-dim,#8a8aa3);white-space:nowrap}
.srcchip.src-your_answer{background:rgba(75,191,148,.16);color:var(--good,#2e8f68)}
.srcchip.src-estimated,.srcchip.src-model{background:rgba(224,182,74,.18);color:var(--warn,#9a7a1a)}
.srcchip.src-protected_declined{background:rgba(96,112,140,.14);color:#56627a}
.qitem.rvrow input[type=text],.qitem.rvrow input[type=date],.qitem.rvrow input[type=number]{width:100%;max-width:640px;padding:8px 10px;border-radius:8px}
.rvval{font-size:13.5px;line-height:1.45;padding-left:10px;border-left:2px solid #c9d76a}
@media (max-width:640px){.srcchip{display:block;margin:4px 0 0;width:max-content}}