/* Custom combobox (open-on-focus) + keyboard-edit affordances. Tokens fall back if app.css absent. */
.combo{position:relative;display:flex;max-width:100%;align-items:center;justify-content:space-between;gap:8px;
  min-width:84px;border:1px solid var(--border,#ccc);border-radius:var(--radius-sm,6px);
  background:var(--surface,#fff);color:var(--ink,#1c1b19);padding:7px 9px;cursor:text;font-size:calc(13px * var(--fs, 1));outline:none}
.combo:focus-within{outline:2px solid var(--accent,#A8842C);outline-offset:1px;border-color:var(--accent,#A8842C)}
.combo-caret{color:var(--muted,#8a7f6a);font-size:calc(18px * var(--fs, 1));line-height:1;padding:2px 4px;cursor:pointer;user-select:none}
.combo-text{flex:1 1 0px;width:0;min-width:0;border:0;outline:none;background:transparent;
  font:inherit;color:inherit;padding:0;cursor:text}
.combo-text::placeholder{color:var(--muted,#9a9384)}
.combo-list{display:none;position:absolute;top:100%;left:0;min-width:100%;margin:3px 0 0;padding:3px;z-index:60;
  list-style:none;background:var(--surface,#fff);border:1px solid var(--border,#ccc);border-radius:var(--radius-sm,6px);
  box-shadow:var(--shadow-lg,0 6px 24px rgba(0,0,0,.16));max-height:min(340px, 46vh);overflow:auto}
.combo.open .combo-list{display:block}
.combo.open{outline:2px solid var(--accent,#A8842C);outline-offset:1px}
.combo-list li{padding:5px 10px;border-radius:4px;white-space:nowrap}
/* the pointer shows where it is (customer 2026-09-09); combobox.js also moves the
   keyboard highlight onto the hovered item, so there is one cursor, not two */
.combo-list li:hover{background:var(--bg,#F7F4EF)}
.combo-list li.hl{background:var(--accent,#A8842C);color:#fff}
.combo-list li.sel{font-weight:700}
/* keyboard edit mode */
.sheet-mode .cell.cell-active{outline:3px solid #3B6EA5;outline-offset:-3px}
.sheet-guide{display:none;gap:6px 14px;flex-wrap:wrap;align-items:center;font-size:calc(12.5px * var(--fs, 1));color:var(--muted,#6f6a61);
  background:var(--bg,#f7f4ef);border:1px solid var(--border,#e3dccb);border-radius:var(--radius,8px);padding:8px 12px;margin-bottom:var(--s3,12px)}
.sheet-mode .sheet-guide{display:flex}
.sheet-guide kbd{display:inline-block;min-width:16px;text-align:center;border:1px solid #c9c2b3;border-bottom-width:2px;border-radius:4px;background:#f7f4ec;padding:1px 6px;font-weight:600;font-size:calc(11px * var(--fs, 1));line-height:1.4;font-family:ui-monospace,Consolas,monospace;color:#5a513c}
.kbd-hint{font-size:calc(11px * var(--fs, 1));line-height:1.4;font-family:system-ui;color:var(--muted,#a08a4f);margin-top:7px}
/* the editor's description column: roomier line + paragraph spacing (kept
   modest so the left column fits unstacked at ~820px-tall desktop windows);
   tight to the context above, clearly separated from the highlight below */
.ed-hints .kbd-hint{line-height:1.65;margin-top:12px}
.ed-hints .kbd-hint:first-child{margin-top:0}
.hint-stack>.kbd-hint:first-child{margin-top:0}
/* Key-then-meaning rows, same shape as the spreadsheet-mode popover's. ONE
   grid for the whole hint (the rows are display:contents) so every meaning
   starts at the same x whatever its key is wide; left-aligned, since the cell
   the editor grows from centres its text and a list of keys must not be
   centred. The tighter line-height keeps a four-row tab under the height the
   old prose reached. */
.ed-hints .kbd-hint{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;
  align-content:start;text-align:left;line-height:1.35}
.kbd-hint .guide-row{display:contents}
.editor.ed-tabs .ed-hints .kbd-hint{gap:2px 10px}
/* tabbed description (.ed-tabs, applied by editorstack.js at laptop heights
   BEFORE stacking): one hint shows at a time, so the highlight block below
   keeps its full height and the left–right layout holds */
.ed-tabbar{display:none;gap:6px;flex-wrap:wrap}
.ed-tab{border:1px solid var(--border,#e3dccb);background:var(--surface,#fff);color:var(--muted,#6f6a61);
  border-radius:var(--pill,20px);padding:3px 12px;cursor:pointer;font-size:calc(12px * var(--fs, 1));line-height:1.4}
.ed-tab.on{background:var(--accent,#A8842C);border-color:var(--accent,#A8842C);color:#fff}
.editor.ed-tabs .ed-tabbar{display:flex}
/* All three hints share ONE grid cell, so the block always reserves the
   height of the TALLEST and switching tabs cannot resize the popup under the
   pointer (customer 2026-09-15). visibility, not display:none — a hidden hint
   must still take its space. */
.editor.ed-tabs .hint-stack{display:grid}
.editor.ed-tabs .hint-stack>.kbd-hint{grid-area:1/1;visibility:hidden}
.editor.ed-tabs .hint-stack>.kbd-hint.tab-on{visibility:visible}
/* tab mode is the space-saving mode: tighter rhythm so it wins at laptop heights */
.editor.ed-tabs .ed-ctx{margin-bottom:4px}
.editor.ed-tabs .ed-hints .kbd-hint{margin-top:6px}
.editor.ed-tabs .ed-right{margin-top:10px}
.ed-right .hl-row{margin-bottom:2px}

/* larger fonts inside the cell editor (the edit grid) */
.editor{font-size:calc(14px * var(--fs, 1))}
.editor .lbl-sm{font-size:calc(11px * var(--fs, 1))}
.editor .rec-head{font-size:calc(11px * var(--fs, 1))}
.editor .combo,.editor .combo-list li,.editor .time-input,.editor .kbd-hint{font-size:calc(14px * var(--fs, 1))}

/* per-field highlight picker (one .hl-row of swatch radios per template
   field; used by the cell editor's right column AND the week/template
   Highlight-defaults dialog) */
.hl-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.hl-row .hl-lbl{flex:0 0 8em;font-size:calc(14px * var(--fs, 1));color:var(--muted,#6f6a61)}
.hl-sw{position:relative;cursor:pointer;display:inline-flex}
.hl-sw input{position:absolute;opacity:0;pointer-events:none}
.hl-sw span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--sw,var(--surface,#fff));border:1px solid var(--border,#b9b2a2);color:var(--muted,#6f6a61);
  font-size:calc(11px * var(--fs, 1));line-height:1}
.hl-sw input:checked+span{outline:2px solid var(--accent,#A8842C);outline-offset:2px}
.hl-sw input:focus-visible+span{outline:2px solid #3B6EA5;outline-offset:2px}
.hl-sw-star span{color:var(--accent,#A8842C)}
/* the four rarely-coloured fields share one row, named by a dropdown beside
   their swatches; the rows are only hidden once the script is running, so
   without it all eight stay reachable (customer 2026-08-26) */
.hl-extra{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
/* the SAME font-size as .hl-lbl above: both reserve 8em, and em is relative to
   the element's own size — at 13px the dropdown's column came out 8px narrower
   and its swatches sat left of every other row's (customer 2026-08-27) */
.hl-extra-pick{flex:0 0 8em;min-width:0;font-size:calc(14px * var(--fs, 1));padding:3px 4px}
    /* min-width:0 — a flex item defaults to min-width:auto, and the widest
       option name ("OT Wage Rate ●") pushed the dropdown 2px past its basis */
.hl-fields.hl-js .hl-rare{display:none}
.hl-fields.hl-js .hl-rare.on{display:flex}
.hl-fields.hl-js .hl-rare .hl-lbl{display:none}   /* the dropdown names it */
/* a day cell as the colours will paint it */
.hl-preview{margin-top:var(--s3);display:flex;align-items:flex-start;gap:8px}
/* bold, like the field labels beside it (customer 2026-08-27) */
.hl-pv-lbl{flex:0 0 8em;font-size:calc(13px * var(--fs, 1));font-weight:700;color:var(--muted,#6f6a61)}
.hl-pv-cell{border:1px solid var(--border,#b9b2a2);border-radius:var(--radius-sm,6px);
  padding:5px 7px;background:var(--surface,#fff);min-width:15em}
.hl-pv-line{display:flex;gap:5px;align-items:center;margin:1px 0}
.hl-pv{display:inline-block;padding:1px 5px;border-radius:3px;
  font-size:calc(12px * var(--fs, 1));line-height:1.5;border:1px solid transparent}
.hl-pv-keep{border-style:dashed;border-color:var(--border,#b9b2a2);opacity:.55}
.hl-pv-note{color:var(--muted,#6f6a61);font-style:italic}
/* Highlight areas read at 14px everywhere (labels above; dialog intro + the
   editor colour column's heading below) */
#hl-dlg p.small{font-size:calc(14px * var(--fs, 1))}
#hl-dlg .hl-row{margin-bottom:8px}
.ed-right .lbl-sm{font-size:calc(14px * var(--fs, 1))}
/* (the editor's hl labels keep the base 8em — the 560px column fits label + all 12 swatches, and "OT Wage Rate" stays one line) */
/* Platform-styled hover tips (mirrors #day-tip) on the highlight swatches —
   both the Highlight dialog and the cell editor's colour rows */
.hl-sw[data-tip]{position:relative}
.hl-sw[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);background:var(--ink,#1c1b19);color:#fff;font-weight:600;
  font-size:calc(14px * var(--fs, 1));padding:5px 10px;border-radius:6px;white-space:nowrap;
  z-index:5;box-shadow:var(--shadow-lg,0 10px 36px rgba(0,0,0,.25));pointer-events:none}
/* first row: the tip opens BELOW the swatch so it can never poke above the panel */
.hl-row:first-of-type .hl-sw[data-tip]:hover::after{bottom:auto;top:calc(100% + 8px)}
.ed-ctx{margin-bottom:10px}
.ed-staff{font-weight:600;font-size:calc(15px * var(--fs, 1))}
.ed-when{font-size:calc(13px * var(--fs, 1));color:var(--muted,#6f6a61)}
.ed-holiday{font-size:calc(12px * var(--fs, 1));color:#9a2b1f}

/* popup-mode close button (hidden until layout.css shows it below desktop) */
.editor{position:relative}
.editor-x{display:none;position:absolute;top:6px;right:6px;z-index:3;
  width:calc(30px * var(--fs, 1));height:calc(30px * var(--fs, 1));align-items:center;justify-content:center;
  border:1px solid var(--border,#e3dccb);border-radius:50%;background:var(--surface,#fff);
  color:var(--muted,#6f6a61);font-size:calc(15px * var(--fs, 1));line-height:1;cursor:pointer}
.editor-x:hover{background:var(--bg,#f7f4ef);color:var(--ink,#1c1b19)}