/* =========================================================================
   The document and spreadsheet editors in a client's Files
   (src/features/files/editorChrome.js, fileDoc.js, fileSheet.js).

   Both open in the note-sized modal (modal.css .modal-note) with the same top
   bar (notes.css .ne-bar: here the item's icon and its name) and the same tool
   row, a rounded bar of compact buttons like Google's. A document is A4 pages
   on a grey canvas, like Google Docs; a spreadsheet is the formula bar and the
   grid, dressed like Google Sheets: hairline gridlines, sunk headers that turn
   blue for the selected row/column, and a selection layer drawn over the grid
   (.sh-sel: a 2px blue active cell, a 1px range edge, a round fill handle, a
   halo while editing). The grid is Jspreadsheet CE; its own CSS loads ahead of
   this file (fileSheet.js).
   ========================================================================= */

/* ---- the bar: the item's icon and its name ---- */
.fe-bar { gap: var(--space-2-5); }
.fe-ico { display: inline-flex; flex-shrink: 0; }
.fe-ico svg { width: 20px; height: 20px; }
.fe-ico--doc { color: var(--file-doc); }
.fe-ico--sheet { color: var(--file-sheet); }
/* the name is plain inline text you can click into: no box, just as wide as the words (field-sizing), the caret shows it's editable */
.fe-title { flex: 0 1 auto; field-sizing: content; min-width: 6ch; max-width: 100%; height: 28px; padding: 0; margin: 0 auto 0 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--text-strong); text-overflow: ellipsis; }
.fe-title::placeholder { color: var(--text-soft); }
.fe-title:hover, .fe-title:focus, .fe-title:focus-visible { outline: none; box-shadow: none; border: 0; background: transparent; }
/* (the name's auto right margin pushes the bar's buttons, or the phone's Done, to the right edge) */
/* where it lives, beside the name: the client's logo and name (editorChrome setWhere; hidden for the Drive's own) —
   then the pill takes the auto margin */
.fe-where { display: inline-flex; align-items: center; gap: var(--space-1-5); flex-shrink: 1; min-width: 0; max-width: 40%; height: 24px; padding: 0 var(--space-2-5) 0 var(--space-1); margin-right: auto; border-radius: var(--radius-full); background: var(--surface-sunk); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.fe-where[hidden] { display: none; }
.fe-where-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-bar:has(.fe-where:not([hidden])) .fe-title { margin-right: var(--space-1); }
/* the bar's Share button (a view-only link): an outlined pill like Google's, before the icon buttons; a phone keeps
   just its icon */
.fe-share { height: 30px; padding: 0 var(--space-3); gap: var(--space-1-5); flex-shrink: 0; }
.fe-share svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .fe-share span { display: none; } .fe-share { padding: 0 var(--space-2); } }
/* the "@" client picker under the name (editorChrome wireTitleMentions): the keyboard stays in the name, so the
   highlighted row is .is-active */
.fe-pop--mention { min-width: 240px; max-height: 340px; overflow-y: auto; }
.fe-mention-head { padding: var(--space-1) var(--space-2) var(--space-1-5); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fe-mention-opt { display: flex; align-items: center; gap: var(--space-2); width: 100%; }
.fe-mention-opt.is-active { background: var(--surface-hover); }
/* no field-sizing (Firefox, Safari before 18.4): the field takes the free width instead of its default 20 characters */
@supports not (field-sizing: content) { .fe-title { flex: 1 1 auto; min-width: 0; } }

/* ---- the tool row: a rounded bar of compact buttons (Google's) ---- */
.fe-tools { flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 1px; margin: var(--space-1-5) var(--space-3) var(--space-2); padding: 3px var(--space-2); border-radius: var(--radius-full); background: var(--surface-sunk); }
.fe-tools .icon-ghost { border-radius: var(--radius-xs); color: var(--text-muted); }
@media (pointer: fine) { .fe-tools .icon-ghost { width: 28px; height: 28px; } }   /* compact for a mouse; touch keeps the 38px minimum */
.fe-tools .icon-ghost svg { width: 17px; height: 17px; }
/* a phone: one row that scrolls sideways (Google's app), not a wrapped block of touch-sized buttons */
@media (max-width: 640px) {
  .fe-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: var(--space-2); }
  .fe-tools::-webkit-scrollbar { display: none; }
  .fe-tools > * { flex-shrink: 0; }
}
@media (hover: hover) and (pointer: fine) { .fe-tools .icon-ghost:hover { background: var(--gray-150); color: var(--text-strong); } }
.fe-tools .icon-ghost.is-on { background: color-mix(in srgb, var(--sheet-select) 16%, var(--surface)); color: var(--sheet-select); }
.fe-tool--menu { width: auto !important; padding: 0 var(--space-1) 0 var(--space-1-5); gap: 1px; }
/* a colour tool's icon sits on a stripe of the colour it applies (none: a hairline outline) */
.fe-colored { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.fe-colored svg { width: 15px !important; height: 15px !important; }
.fe-colorbar { width: 15px; height: 3px; border-radius: 1px; background: var(--bar, var(--text-strong)); }
.fe-colorbar.is-none { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
/* the font-size box: − [11] + */
.fe-size { display: inline-flex; align-items: center; gap: 1px; }
.fe-size-input { width: 36px; height: 24px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface); font-family: var(--font-sans); font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: center; color: var(--text); }
.fe-size-input:focus-visible { outline: none; border-color: var(--sheet-select); box-shadow: 0 0 0 1px var(--sheet-select); }
.fe-caret { display: inline-flex; color: var(--text-soft); }
.fe-caret svg { width: 12px !important; height: 12px !important; }
.fe-sep { width: 1px; height: 18px; margin: 0 var(--space-1-5); background: var(--border); }
.fe-style { display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; min-width: 120px; padding: 0 var(--space-1-5) 0 var(--space-2-5); border: 0; border-radius: var(--radius-sm); background: transparent; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text); cursor: pointer; }
.fe-style-label { flex: 1; text-align: left; }
@media (hover: hover) and (pointer: fine) { .fe-style:hover { background: var(--gray-150); } }
.fe-style:focus-visible { outline: 2px solid var(--info-600); outline-offset: 1px; }

/* ---- popovers from the tool row (palette, borders, text style, sizes, link) ---- */
.fe-pop { position: fixed; z-index: var(--z-popover); padding: var(--space-1-5); }
/* items read left to right (the shared menu item pushes a lone icon to the far right: it's built for ticks) */
.fe-pop .filter-opt { justify-content: flex-start; }
.fe-pop .filter-opt svg { margin-left: 0; color: var(--text-muted); }
.fe-choice svg { width: 16px; height: 16px; }
/* Google's palette: None / Reset, 8 rows of round swatches, then Custom (+ and the eyedropper) */
.fe-pop--palette { width: auto; padding: var(--space-2) var(--space-3) var(--space-3); }
.fe-reset { width: 100%; margin: 0 0 var(--space-1-5) calc(var(--space-2) * -1); padding-left: var(--space-2); }
.fe-swatches { display: grid; gap: 4px; }
.fe-swatch-row { display: flex; gap: 4px; }
.fe-swatch-row--gap { margin-bottom: var(--space-1-5); }
.fe-swatch { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--swatch); cursor: pointer; }
.fe-swatch.is-light { box-shadow: inset 0 0 0 1px var(--border-strong); }
.fe-swatch svg { width: 12px; height: 12px; color: var(--swatch-tick); }
.fe-swatch.is-light svg { color: var(--swatch-tick-light); }
@media (hover: hover) and (pointer: fine) { .fe-swatch:hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border-strong); } }
.fe-swatch:focus-visible { outline: 2px solid var(--sheet-select); outline-offset: 2px; }
.fe-custom-head { margin: var(--space-3) 0 var(--space-1-5); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fe-custom-row { align-items: center; }
.fe-swatch-tool { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.fe-swatch-tool svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .fe-swatch-tool:hover { background: var(--gray-150); color: var(--text-strong); } }
.fe-swatch-tool:focus-visible { outline: 2px solid var(--sheet-select); outline-offset: 1px; }
.fe-color-input { position: absolute; left: var(--space-3); bottom: var(--space-3); width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.fe-pop--sizes { min-width: 64px; max-height: 320px; overflow-y: auto; }
.fe-pop--sizes .filter-opt { height: 30px; justify-content: center; font-variant-numeric: tabular-nums; }
.fe-pop--styles .fe-choice[data-choice="h1"] span { font-size: var(--text-xl); font-weight: var(--fw-bold); }
.fe-pop--styles .fe-choice[data-choice="h2"] span { font-size: var(--text-lg); font-weight: var(--fw-semibold); }
.fe-pop--styles .fe-choice[data-choice="h3"] span { font-size: var(--text-base); font-weight: var(--fw-semibold); }
.fe-field { display: flex; gap: var(--space-2); width: 320px; }
.fe-field .input { flex: 1; min-width: 0; }

/* ---- the right-click menu (Google Docs / Sheets style: icon, label, shortcut on the right) ---- */
.fe-pop--ctx { min-width: 248px; }
.fe-ctx-item { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; text-align: left; }
.fe-ctx-ico { display: inline-flex; flex-shrink: 0; width: 16px; color: var(--text-soft); }
.fe-ctx-ico svg { width: 16px; height: 16px; }
.fe-ctx-label { flex: 1; min-width: 0; }
.fe-ctx-key { margin-left: var(--space-6); padding: 0; border: 0; background: none; box-shadow: none; font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-soft); }
.fe-ctx-item[disabled] { opacity: 0.45; cursor: default; }
.fe-ctx-item.is-active { background: var(--surface-hover); }

/* ---- a document: A4 pages (794 × 1123 at 96dpi, 1-inch margins, 16px apart) on a grey canvas; fileDoc.js
   paginate() sets --dc-pages and pushes what would cross a page onto the next. The pages are .theme-paper:
   white with dark text in both themes, like a printed page (the author's colours were picked on white) ---- */
.dc-canvas { flex: 1; min-height: 0; overflow: auto; padding: var(--space-5) var(--space-4) var(--space-10); background: var(--surface-sunk); }
.dc-pages { position: relative; width: 794px; height: calc(var(--dc-pages, 1) * 1139px - 16px); margin: 0 auto; }
.dc-sheets { position: absolute; inset: 0; pointer-events: none; }
.dc-sheet { position: absolute; left: 0; width: 100%; height: 1123px; background: var(--surface); box-shadow: 0 0 0 1px var(--border-faint), var(--shadow-sm); }
.dc-editor { position: relative; box-sizing: border-box; min-height: 100%; padding: 96px; font-size: 11pt; line-height: 1.5; }   /* a document's own text is set in points, like Google Docs (11pt body) */
/* Google Docs' sizes (the downloads use the same): paragraphs take the 11pt body, not the Notes editor's 15px */
.dc-editor p { font-size: inherit; }
.dc-editor h1 { font-size: 20pt; }
.dc-editor h2 { font-size: 16pt; }
.dc-editor h3 { font-size: 14pt; }
@media (max-width: 640px) {
  /* one continuous page filling the sheet, so a tap anywhere below the text lands in it */
  .dc-canvas { display: flex; flex-direction: column; padding: 0; }
  .dc-pages { flex: 1 0 auto; display: flex; flex-direction: column; width: auto; height: auto; margin: 0; background: var(--surface); }
  .dc-sheets { display: none; }
  .dc-editor { flex: 1 0 auto; min-height: 0; padding: var(--space-5) var(--space-4); }
}

/* ---- a spreadsheet: the formula bar ---- */
.sh-fx { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); border-bottom: 1px solid var(--border); background: var(--surface); }
.sh-fx-ref { min-width: 64px; padding-right: var(--space-2); border-right: 1px solid var(--border-faint); font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.sh-fx-mark { font-style: italic; font-size: var(--text-xs); color: var(--text-soft); padding-right: var(--space-2); border-right: 1px solid var(--border-faint); }
.sh-fx-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text); }
.sh-fx-input::placeholder { color: var(--text-soft); }
.sh-fx-input:focus-visible { outline: none; box-shadow: none; }

.sh-host { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--surface); }
.sh-fx { margin-top: 0; }
/* the grid is .theme-paper (fileSheet.js): white cells, as the author's fills and text colours were picked on */
.sh .jss_content { scrollbar-color: var(--gray-300) transparent; background: var(--surface); }
.sh .jss_content::-webkit-scrollbar-track { background: transparent; }
.sh .jss_content::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); }
/* every wrapper the grid adds takes the host's height, so the grid itself scrolls (they grew to the full sheet) */
.sh-grid, .sh .jtabs-content, .sh .jss_container { height: 100%; min-height: 0; }
.sh-loading { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
.sh-host.is-ready .sh-loading { display: none; }

/* ---- the grid, like Google Sheets ---- */
.sh .jss_container { display: block; height: 100%; padding: 0; font-family: var(--font-sans); }
.sh .jss_content { position: relative; width: 100% !important; height: 100% !important; max-height: none !important; padding: 0 !important; box-shadow: none; border: 0; overflow: auto; }
/* one hairline between cells: no spacing between the separate borders (each cell draws its top and left line) */
.sh .jss_worksheet { border-spacing: 0; border: 0; background: var(--surface); font-size: 13px; color: var(--text); }
.sh .jss_worksheet > tbody > tr > td { height: 21px; padding: 0 5px; line-height: 20px; vertical-align: bottom; border-top: 1px solid var(--border); border-left: 1px solid var(--border); border-right: 1px solid transparent; border-bottom: 1px solid transparent; background: var(--surface); color: var(--text); }
/* numbers sit right unless the cell was aligned on purpose (fileSheet saves "start" / "center" / "right") */
.sh .jss_worksheet > tbody > tr > td.is-num:not([style*="text-align: start"]):not([style*="text-align: center"]):not([style*="text-align: right"]) { text-align: right !important; }
/* headers: sunk, small, centred; the selected row / column turns blue */
.sh .jss_worksheet > thead > tr > td,
.sh .jss_worksheet > tbody > tr > td:first-child { background: var(--surface-sunk); color: var(--text-muted); font-size: var(--text-2xs); font-weight: var(--fw-medium); text-align: center; vertical-align: middle; border-color: var(--border); }
.sh .jss_worksheet > thead > tr > td { height: 22px; padding: 0 4px; border-top: 0; border-right: 1px solid transparent; text-align: center !important; }   /* the column's own alignment is for its cells */
.sh .jss_worksheet > tbody > tr > td:first-child { padding: 0 6px; }
.sh .jss_worksheet > thead > tr > td.jss_selectall { background: var(--surface-sunk); }
@media (hover: hover) and (pointer: fine) {
  .sh .jss_worksheet > thead > tr > td:not(.jss_selectall):hover,
  .sh .jss_worksheet > tbody > tr > td:first-child:hover { background: var(--gray-100); color: var(--text); }
}
.sh .jss_worksheet > thead > tr > td.selected,
.sh .jss_worksheet > tbody > tr.selected > td:first-child { background: color-mix(in srgb, var(--sheet-select) 18%, var(--surface)); color: var(--sheet-select); font-weight: var(--fw-semibold); }
/* the selection: cells keep their gridlines (and any borders someone drew: inline, so they win) and take a light-blue
   wash, the active cell stays white; the edges are the selection layer's (.sh-sel), drawn over the grid */
/* (the range's light-blue wash is the selection layer's, over the cells, so a cell with its own fill is washed too
   and the active cell of a range is washed like the rest, as in Google Sheets: the cells themselves stay as they are) */
.sh .jss_worksheet > tbody > tr > td.highlight,
.sh .jss_worksheet > tbody > tr > td.highlight-selected { background: var(--surface); }
.sh .jss_worksheet > tbody > tr > td.highlight-top { border-top-color: var(--border); box-shadow: none; }
.sh .jss_worksheet > tbody > tr > td.highlight-left { border-left-color: var(--border); box-shadow: none; }
.sh .jss_worksheet > tbody > tr > td.highlight-right { border-right-color: transparent; }
.sh .jss_worksheet > tbody > tr > td.highlight-bottom { border-bottom-color: transparent; }
/* editing: the grid puts an input in the cell, as wide as the cell. It fills the cell exactly (the cell's own padding
   moves to the input, or the input ran past the cell's right edge) and draws nothing of its own, not even the app's
   focus ring: the selection layer's edge is the editing frame */
.sh .jss_worksheet > tbody > tr > td.editor { padding: 0; background: var(--surface); outline: 0; box-shadow: none; }
.sh .jss_worksheet > tbody > tr > td.editor > input,
.sh .jss_worksheet > tbody > tr > td.editor > textarea { display: block; box-sizing: border-box; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0; padding: 0 5px; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; font-family: var(--font-sans); font-size: inherit; font-weight: inherit; font-style: inherit; line-height: 20px; color: inherit; text-align: inherit; }
.sh .jss_worksheet > tbody > tr > td.editor > input:focus,
.sh .jss_worksheet > tbody > tr > td.editor > input:focus-visible,
.sh .jss_worksheet > tbody > tr > td.editor > textarea:focus-visible { outline: 0; box-shadow: none; }
/* no fill handle while a cell is being typed in (Google Sheets) */
.sh-host.is-editing .jss_corner { visibility: hidden; }
/* the selection layer: the range's 1px edge and the active cell's 2px edge, centred on the gridlines */
.sh-sel { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 1; }
.sh-sel-range, .sh-sel-active { position: absolute; box-sizing: border-box; pointer-events: none; }
.sh-sel-range { border: 1px solid var(--sheet-select); background: color-mix(in srgb, var(--sheet-select) 10%, transparent); }
.sh-sel-active { border: 2px solid var(--sheet-select); }
/* editing: a deeper edge with a pale halo */
.sh-sel-active.is-editing { border-color: color-mix(in srgb, var(--sheet-select) 78%, var(--gray-900)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sheet-select) 35%, transparent); }
/* the fill handle: a round blue dot with a white ring on the range's corner (placed by fileSheet.js; drag it to fill) */
.sh .jss_corner { width: 6px; height: 6px; padding: 0; border: 2px solid var(--surface); border-radius: 50%; background: var(--sheet-select); box-sizing: content-box; cursor: crosshair; z-index: 3; }
/* dragging the fill handle (dashed preview), copying (dashed "marching" edge) */
.sh .jss_worksheet .selection { background: color-mix(in srgb, var(--sheet-select) 6%, var(--surface)); }
.sh .jss_worksheet .selection-top { border-top: 1px dashed var(--sheet-select) !important; }
.sh .jss_worksheet .selection-bottom { border-bottom: 1px dashed var(--sheet-select) !important; }
.sh .jss_worksheet .selection-left { border-left: 1px dashed var(--sheet-select) !important; }
.sh .jss_worksheet .selection-right { border-right: 1px dashed var(--sheet-select) !important; }
.sh .jss_worksheet .copying-top { border-top: 2px dashed var(--sheet-select) !important; }
.sh .jss_worksheet .copying-bottom { border-bottom: 2px dashed var(--sheet-select) !important; }
.sh .jss_worksheet .copying-left { border-left: 2px dashed var(--sheet-select) !important; }
.sh .jss_worksheet .copying-right { border-right: 2px dashed var(--sheet-select) !important; }
/* moving a row or column: it fades while it travels; resizing: the edge being dragged turns blue */
.sh .jss_worksheet > thead > tr > td.dragging,
.sh .jss_worksheet > tbody > tr.dragging > td { opacity: 0.55; background: color-mix(in srgb, var(--sheet-select) 12%, var(--surface)); }
.sh .jss_worksheet .dragline div { background: var(--sheet-select); }
.sh .jss_worksheet .dragging-left { border-left: 2px solid var(--sheet-select) !important; }
.sh .jss_worksheet .dragging-right { border-right: 2px solid var(--sheet-select) !important; }
.sh .jss_worksheet thead td.resizing { border-right: 2px solid var(--sheet-select) !important; }
.sh .jss_worksheet tbody tr.resizing > td { border-bottom: 2px solid var(--sheet-select) !important; }

/* full screen: flush against the sidebar, no floating shadow */
.modal-shell.modal-note.modal-note-full { box-shadow: none; border: 0; border-left: 1px solid var(--border); }

@media (max-width: 640px) {
  /* the phone keeps the ⋮ menu here (a sheet's only Download as CSV; a document's downloads), which the note sheet hides */
  .modal-note .fe-bar [data-ne-more] { display: inline-flex; }
  /* no drag-to-dismiss on these sheets: no grab handle, and the grid and pages get their own touch gestures */
  .modal-shell.modal-note:has(.fe)::before { display: none; }
  .modal-shell.modal-note:has(.fe) { touch-action: auto; }
}

/* ---- the Plan panel beside a document (planPanel.js): the page and the panel side by side; the floating document
   widens to make room (full screen already has it); on a phone the panel covers the page. Outside the page's
   .theme-paper, so it follows the app's theme ---- */
.dc-body { flex: 1; min-height: 0; display: flex; }
.dc-body > .dc-canvas { flex: 1; min-width: 0; }
.fe-plan { flex: 0 0 380px; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--border); background: var(--surface); }
.fe-plan[hidden] { display: none; }
.modal-shell.modal-note:has(.fe-plan:not([hidden])) { width: min(1260px, calc(100vw - 48px)); }
/* the Plan button, in the bar beside Share (the same size); pressed while the panel is open */
.fe-plan-btn { height: 30px; padding: 0 var(--space-3); gap: var(--space-1-5); flex-shrink: 0; }
.fe-plan-btn svg { width: 15px; height: 15px; }
.dc.has-plan .fe-plan-btn { border-color: color-mix(in srgb, var(--sheet-select) 35%, var(--border)); background: color-mix(in srgb, var(--sheet-select) 12%, var(--surface)); color: var(--sheet-select); }
@media (max-width: 640px) { .fe-plan-btn span { display: none; } .fe-plan-btn { padding: 0 var(--space-2); } }

.fe-plan-head { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-1); height: 48px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border-faint); }
.fe-plan-mark { display: inline-flex; color: var(--primary-600); }
.fe-plan-mark svg { width: 17px; height: 17px; }
.fe-plan-title { flex: 1; margin-left: var(--space-1); font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fe-plan-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }
.fe-plan-foot { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-2-5); padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--border-faint); }
.fe-plan-foot[hidden] { display: none; }
.fe-plan-actions { display: flex; gap: var(--space-2); }
.fe-plan-actions .btn-primary { flex: 1; justify-content: center; }
.fe-plan-ask { position: relative; display: flex; }
.fe-plan-ask .input { flex: 1; min-width: 0; height: 38px; padding-right: 44px; border-radius: var(--radius-full); box-shadow: var(--shadow-xs); }
.fe-plan-send { position: absolute; top: 4px; right: 4px; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius-full); background: var(--primary-600); color: var(--on-primary); cursor: pointer; }
.fe-plan-send svg { width: 15px; height: 15px; }
.fe-plan-send:focus-visible { box-shadow: var(--ring-primary); }

.fe-plan-status { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.fe-plan-status.is-inline { font-size: var(--text-xs); }
.fe-plan-skel { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
.fe-plan-skel-row { display: flex; align-items: center; gap: var(--space-2-5); }
.fe-plan-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-3); text-align: center; font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.fe-plan-empty b { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fe-plan-empty .btn { margin-top: var(--space-2); }
.fe-plan-empty-mark { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--surface-sunk); color: var(--primary-600); }
.fe-plan-empty-mark svg { width: 20px; height: 20px; }
.fe-plan-summary { font-size: var(--text-sm); line-height: 1.5; color: var(--text); }
.fe-plan-error { display: flex; gap: var(--space-1-5); font-size: var(--text-xs); color: var(--danger-600); }
.fe-plan-error svg { flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; }
.fe-plan-changes { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.fe-plan-change { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--surface-sunk); font-size: var(--text-xs); color: var(--text-muted); }

/* a question: one tap answers it and the plan updates */
.fe-plan-q { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunk); }
.fe-plan-q-text { display: flex; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: 1.4; color: var(--text-strong); }
.fe-plan-q-text svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; color: var(--text-soft); }
.fe-plan-q-opts { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.fe-plan-opt { min-height: 30px; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .fe-plan-opt:hover { border-color: var(--border-strong); color: var(--text-strong); } }
.fe-plan-opt:focus-visible { box-shadow: var(--ring-primary); }

/* the plan, by day */
.fe-plan-day { display: flex; flex-direction: column; gap: 2px; }
.fe-plan-day-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fe-plan-day-count { font-weight: var(--fw-medium); color: var(--text-soft); }
.fe-plan-task { display: flex; gap: var(--space-2-5); padding: var(--space-2); border-radius: var(--radius-md); }
@media (hover: hover) and (pointer: fine) { .fe-plan-task:hover { background: var(--surface-hover); } }
.fe-plan-task.is-added { opacity: 0.6; }
.fe-plan-tick { padding-top: 2px; }
.fe-plan-task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fe-plan-name { width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
.fe-plan-name:focus, .fe-plan-name:focus-visible { outline: 0; box-shadow: 0 1px 0 var(--primary-600); }
.fe-plan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.fe-plan-chip { display: inline-flex; align-items: center; gap: 4px; }
.fe-plan-chip svg { width: 13px; height: 13px; color: var(--text-soft); }
.fe-plan-people { display: inline-flex; }
.fe-plan-person + .fe-plan-person { margin-left: -4px; }
.fe-plan-av { width: 18px; height: 18px; font-size: var(--text-3xs); box-shadow: 0 0 0 1.5px var(--surface); }
.fe-plan-av img { width: 100%; height: 100%; object-fit: cover; }
.fe-plan-added { display: inline-flex; align-items: center; gap: 3px; color: var(--success-600); }
.fe-plan-added svg { width: 13px; height: 13px; }
.fe-plan-note { font-size: var(--text-xs); line-height: 1.4; color: var(--text-soft); }
.fe-plan-clash { display: flex; gap: 5px; font-size: var(--text-xs); line-height: 1.4; color: var(--warning-700); }
.fe-plan-clash svg { flex-shrink: 0; width: 13px; height: 13px; margin-top: 1px; }
@media (max-width: 640px) {
  .dc-body { position: relative; }
  .fe-plan { position: absolute; inset: 0; flex: none; border-left: 0; }
}