/* cells.css · P33, Cells: the layout of the spreadsheet, the page against
   LibreOffice and the recalculation page on the design system's tokens. The
   buttons, fields, selects, menus, badges, banners and tables are the
   design system's; this file places them and draws what a spreadsheet has
   that the design system does not: the grid on its canvas, the formula bar
   with its colored references, the sheet tabs, the autocomplete and the
   argument hint. Every value is a token. */

/* ── the spreadsheet ── */
.ce { flex: 1; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--paper); overflow: hidden; }
.ce-tools { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; padding: 6px 12px; background: var(--ground); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--line-2); }
.ce-tools .ce-sep { width: var(--px); height: var(--h-20); background: var(--line-2); margin: 0 4px; }
.ce-tools [data-r="select"] { min-width: 132px; }
.ce-tools .ce-spacer { flex: 1; }
.ce-stat { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ce-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--line-2); }
.ce-addr { width: 112px; flex: none; }
.ce-addr input, .ce-formula input, .ce-editor input { font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.ce-fx { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-style: italic; flex: none; }
.ce-formula { position: relative; flex: 1; min-width: 0; height: var(--h-28); border-radius: var(--r-value); background: var(--raised); box-shadow: inset 0 0 0 var(--px) var(--line-3); }
.ce-formula:focus-within { box-shadow: inset 0 0 0 var(--px) var(--accent), var(--ring-inline, 0 0 0 2px var(--accent-tint)); }
/* a field whose text is drawn by the mirror under it, so references can be colored */
.ce-formula input, .ce-editor input { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; margin: 0; padding: 0 8px; border: 0; outline: 0; background: transparent; color: transparent; caret-color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: normal; }
.ce-mirror { position: absolute; inset: 0; box-sizing: border-box; padding: 0 8px; display: flex; align-items: center; white-space: pre; overflow: hidden; pointer-events: none; color: var(--ink); font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-13); line-height: var(--lh-13); font-variant-numeric: tabular-nums; }
.ce-mirror > span { white-space: pre; }
.ce-mirror .ce-m-text { color: var(--ink-2); }
.ce-mirror .ce-m-err { color: var(--danger-ink); }

.ce-body { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.ce-grid { position: relative; min-width: 0; min-height: 0; outline: none; }
.ce-grid:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.ce-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.ce-scroll > canvas { position: sticky; top: 0; left: 0; display: block; }
.ce-space { pointer-events: none; }
.ce-editor { position: absolute; z-index: 2; min-width: 64px; height: 24px; box-sizing: border-box; background: var(--raised); box-shadow: 0 0 0 2px var(--accent), var(--e2, 0 2px 8px rgb(0 0 0 / .12)); }
.ce-editor .ce-mirror, .ce-editor input { padding: 0 4px; font-size: var(--fs-12); line-height: var(--lh-12); }

.ce-side { min-height: 0; overflow: auto; padding: 12px 14px; background: var(--ground); box-shadow: inset var(--px) 0 0 var(--line-2); display: flex; flex-direction: column; gap: 4px; }
.ce-side h2 { margin: 12px 0 4px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); color: var(--ink-2); }
.ce-side h2:first-child { margin-top: 0; }
.ce-cell { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); overflow-wrap: anywhere; }
.ce-note { margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.ce-val { margin: 0; color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); overflow-wrap: anywhere; }
.ce-refs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ce-swatch { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-mark); margin-right: 2px; }
.ce-keys { margin: 0; padding: 0 0 0 16px; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }

.ce-tabs { display: flex; align-items: center; gap: 4px; padding: 4px 12px; background: var(--ground); box-shadow: inset 0 var(--px) 0 var(--line-2); overflow-x: auto; }
.ce-tabs [role="tablist"] { display: flex; gap: 2px; }
.ce-tab { height: var(--h-24); padding: 0 10px; border: 0; border-radius: var(--r-row); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-12); line-height: var(--lh-12); white-space: nowrap; }
.ce-tab[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 var(--px) var(--line-2); font-weight: var(--fw-500); }
.ce-tab:focus-visible { outline: none; box-shadow: var(--ring-inline, 0 0 0 2px var(--accent)); }
@media (hover: hover) { .ce-tab:hover { background: var(--ground-hover); color: var(--ink); } .ce-tab[aria-selected="true"]:hover { background: var(--paper); } }

/* the autocomplete and the argument hint float under the field being typed in */
.ce-ac { position: fixed; z-index: 30; min-width: 220px; max-width: 360px; padding: 4px; border-radius: var(--r-contain); background: var(--raised); box-shadow: var(--e3, 0 8px 24px rgb(0 0 0 / .16)), 0 0 0 var(--px) var(--line-2); }
.ce-ac-item { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: var(--r-row); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
.ce-ac-item b { font-family: var(--font-mono, ui-monospace, monospace); font-weight: var(--fw-550); color: var(--ink); }
.ce-ac-item[aria-selected="true"] { background: var(--accent-tint); color: var(--ink); }
.ce-hint { position: fixed; z-index: 29; max-width: 420px; padding: 6px 10px; border-radius: var(--r-contain); background: var(--raised); box-shadow: var(--e2, 0 2px 8px rgb(0 0 0 / .12)), 0 0 0 var(--px) var(--line-2); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
.ce-hint code { font-family: var(--font-mono, ui-monospace, monospace); color: var(--ink); }
.ce-hint b { color: var(--accent-ink); font-weight: var(--fw-550); }
.ce-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* a phone: the side panel goes under the grid */
@media (max-width: 760px) {
  .ce-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ce-side { max-height: 160px; box-shadow: inset 0 var(--px) 0 var(--line-2); }
  .ce-tools [data-r="select"] { min-width: 0; }
  .ce-addr { width: 80px; }
}

/* ── the pages against LibreOffice and of recalculation ── */
.cj { flex: 1; min-height: 0; overflow: auto; background: var(--paper); }
.cj-wrap { max-width: 1120px; margin: 0 auto; padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 12px; }
.cj-head h1 { margin: 0 0 6px; font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-550); color: var(--ink); }
.cj-head p { margin: 0; max-width: 72ch; color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cj-sum { margin: 0; color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-13); font-variant-numeric: tabular-nums; }
.cj-fam { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cj-fam h2 { margin: 0; font-size: var(--fs-15, var(--fs-13)); line-height: var(--lh-15, var(--lh-13)); font-weight: var(--fw-550); color: var(--ink); }
.cj-fam > p { margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.cj-diffs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cj-diffs li { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
.cj-diffs code, .cj code { font-family: var(--font-mono, ui-monospace, monospace); color: var(--ink); overflow-wrap: anywhere; }
.cj-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cj-bar { height: 4px; border-radius: var(--r-press); background: var(--line-2); overflow: hidden; }
.cj-bar > i { display: block; height: 100%; width: 0; background: var(--accent); }
.cj-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.cj-stat { padding: 10px 12px; border-radius: var(--r-contain); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); }
.cj-stat b { display: block; font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
.cj-stat span { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.cj-chart { width: 100%; height: 180px; display: block; border-radius: var(--r-contain); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); }
@media (max-width: 760px) { .cj-wrap { padding: 16px 16px 40px; } }
.cj-sub { margin: 12px 0 0; font-size: var(--fs-15, var(--fs-13)); line-height: var(--lh-15, var(--lh-13)); font-weight: var(--fw-550); color: var(--ink); }
.cj-row [data-r="segmented"] { max-width: 100%; overflow-x: auto; }
.ce-note { margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }