/* lookup: one question, asked of one big spreadsheet and of a database with one file per group
   (components/lookup.js). The spreadsheet is read top to bottom; the database opens one file and
   reads only one column. The page holds the drawing (sheet, files, zoom, readout, controls) and the
   sizes as JSON: {"sizes": [{"files": 8, "rows": 1.79, "gap": 9, "ms": 900}, …], "pick": 6}.
   rows in millions; gap: the space between drawn rows; ms: how long the spreadsheet read takes.
   Speeds are for feel, not measured. */
.lookup { --ink: var(--gray-1200); --paper: var(--surface); --shade: var(--gray-200); --hi: #d9822b; --ok: #2f8f5b; }
.lookup-stage { position: relative; border-radius: 12px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); overflow: hidden;
  background: radial-gradient(circle, rgb(0 0 0 / 0.08) 0.8px, transparent 0.9px) 0 0 / 16px 16px, var(--gray-100);
  padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 18px; min-height: 360px; }
.lookup-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--s-4); }
.lookup-controls .tabs { margin: 0; }
.lookup .ask { font: inherit; font-size: var(--text-sm); cursor: pointer; border: 0; border-radius: 999px; min-height: 32px; padding: 1px 16px;
  background: var(--gray-1200); color: var(--gray-100); box-shadow: 0 2px 8px -2px rgb(0 0 0 / 0.2); }
.lookup .ask:active { scale: .97; }
.lookup .ask:disabled { opacity: .5; cursor: default; }
/* the spreadsheet */
.lookup .sheet { position: relative; border-radius: 6px; background: var(--paper); box-shadow: 0 0 0 2px var(--ink); overflow: hidden; height: 324px; }
.lookup .sheet-head, .lookup .file-cols { display: grid; grid-template-columns: 1.2fr 1fr 1.5fr .6fr; font-family: var(--mono); font-size: 11px; color: var(--gray-1100); }
.lookup .sheet-head { padding: 6px 10px; border-bottom: 1.5px solid var(--ink); background: var(--paper); position: relative; z-index: 2; }
.lookup .rows { position: absolute; inset: 29px 0 0 0; background: repeating-linear-gradient(var(--paper) 0 var(--gap), rgb(0 0 0 / 0.13) var(--gap) calc(var(--gap) + 1px)); }
.lookup .scan { position: absolute; left: 0; right: 0; top: 29px; height: 0; background: color-mix(in oklch, var(--hi) 22%, transparent); border-bottom: 2px solid var(--hi); z-index: 1; }
.lookup .sheet-name { position: absolute; left: 10px; bottom: 8px; z-index: 2; font-family: var(--mono); font-size: 11px; color: var(--gray-1100); background: var(--paper); padding: 2px 6px; border-radius: 4px; }
/* the database: one file per council */
.lookup .files { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--fgap); height: 324px; overflow: hidden; }
.lookup .f { width: var(--fw); height: calc(var(--fw) * 1.25); border-radius: 2px; background: var(--paper); box-shadow: 0 0 0 1.5px var(--ink); transition: opacity 250ms, background 250ms; }
.lookup .f.bed { background: var(--hi); box-shadow: 0 0 0 1.5px var(--hi); }
.lookup[data-asked][data-mode="db"] .f:not(.bed) { opacity: .15; }
.lookup .zoom { position: absolute; right: 226px; bottom: 26px; width: 250px; border-radius: 6px; background: var(--paper); box-shadow: 0 0 0 2px var(--hi), 0 10px 30px -10px rgb(0 0 0 / .35);
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity 300ms, transform 400ms cubic-bezier(.23,1,.32,1); pointer-events: none; }
.lookup[data-asked][data-mode="db"] .zoom { opacity: 1; transform: none; }
.lookup .zoom-name { font-family: var(--mono); font-size: 11px; padding: 6px 10px; border-bottom: 1.5px solid var(--ink); }
.lookup .file-cols { padding: 0; }
.lookup .file-cols > div { padding: 6px 8px 40px; border-right: 1px solid var(--gray-300); position: relative; }
.lookup .file-cols > div:last-child { border-right: 0; }
.lookup .file-cols .fill { position: absolute; left: 0; right: 0; top: 0; height: 0; background: color-mix(in oklch, var(--hi) 30%, transparent); transition: height 500ms cubic-bezier(.23,1,.32,1) 250ms; }
.lookup[data-asked] .file-cols .money .fill { height: 100%; }
/* readout */
.lookup .readout { font-size: var(--text-sm); color: var(--gray-1100); display: flex; flex-direction: column; gap: 14px; }
.lookup .machine { font-family: 'Shantell Sans', cursive; font-size: 16px; color: var(--ink); }
.lookup .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 22px; color: var(--ink); line-height: 1.1; }
.lookup .lbl { font-size: 12px; color: var(--gray-1000); }
.lookup .done { font-family: 'Shantell Sans', cursive; color: var(--ok); font-size: 16px; opacity: 0; transition: opacity 250ms; }
.lookup[data-finished] .done { opacity: 1; }
.lookup [hidden] { display: none !important; }
@media (max-width: 640px) {
  .lookup-stage { grid-template-columns: 1fr; padding: 12px; }
  .lookup .sheet, .lookup .files { height: 250px; }
  .lookup .zoom { right: 12px; bottom: auto; top: 150px; width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) { .lookup * { transition: none !important; } }