/* HabloTech — the page is a sheet.
   ---------------------------------------------------------------------------
   The visual system comes out of the subject: square cells, one hairline rule
   weight, a formula bar, the grid's selection border and fill handle. Corners
   are 3px because spreadsheet cells are square — not a stylistic tic.

   --brand is DELIBERATELY unchanged (#6366f1). It is mirrored in the parent
   project's shared/config.yaml and remotion/src/brand.ts, and every published
   video intro uses it; changing it here would put the site out of step with the
   whole back catalogue. The colours added around it are additions, so all three
   files stay in sync without touching the other two.

   --ink-indigo exists because --brand fails contrast on white at body size.
   --ran is semantic and means one thing only: this formula was executed in a
   real spreadsheet. Never use it for decoration. */

:root {
  --brand:      #6366f1;
  --ink-indigo: #4038c4;
  --ran:        #0e7a52;
  --ran-soft:   #e7f4ee;
  --ran-line:   #b6ddca;

  --paper:  #f1f4f8;
  --cell:   #ffffff;
  --sunk:   #eef1f6;
  --ink:    #131726;
  --muted:  #59617a;
  --rule:   #dce1ea;
  --warn:   #9a6b00;
  --danger: #b4232c;

  --radius: 3px;
  --wrap:   64rem;

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Dark is designed, not inverted: the ground goes blue-black, and both accents
   lift so they stay legible on it. Tokens only — no component ever declares a
   colour inside this block. */
@media (prefers-color-scheme: dark) {
  :root {
    --brand:      #8b8dff;
    --ink-indigo: #a5a6ff;
    --ran:        #3cd199;
    --ran-soft:   #10261f;
    --ran-line:   #1f5642;

    --paper:  #0b0d14;
    --cell:   #141826;
    --sunk:   #1b2032;
    --ink:    #e9ecf6;
    --muted:  #959db5;
    --rule:   #262c3e;
    --warn:   #d9a63a;
    --danger: #ff8a8a;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.62 var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--ink-indigo); text-underline-offset: .18em; }
a:hover { color: var(--brand); }

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 10;
  background: var(--cell); color: var(--ink);
  padding: .55rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius);
}

/* --- header / footer ------------------------------------------------------ */

.site-header { background: var(--cell); border-bottom: 1px solid var(--rule); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .95rem; flex-wrap: wrap;
}
.logo {
  display: flex; align-items: center; gap: .55rem;
  font: 700 1.12rem/1 var(--sans); letter-spacing: -.02em;
  text-decoration: none; color: var(--ink);
}
.logo .mark { width: 22px; height: 22px; flex: 0 0 auto; }
.logo span { color: var(--brand); }
.site-header nav { display: flex; gap: 1.5rem; }
.site-header nav a {
  text-decoration: none; font: 500 .9rem/1 var(--sans); color: var(--muted);
  padding-bottom: .2rem;
}
.site-header nav a:hover { color: var(--ink); }
.site-header nav a[aria-current="page"] { color: var(--ink); box-shadow: 0 2px 0 var(--brand); }

.site-footer {
  margin-top: 4rem; padding-block: 2rem;
  background: var(--cell); border-top: 1px solid var(--rule);
  color: var(--muted); font-size: .9rem;
}
.site-footer p { margin: .3rem 0; max-width: none; }

/* --- typography ----------------------------------------------------------- */

h1 {
  font: 700 clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem)/1.08 var(--serif);
  letter-spacing: -.025em; margin: 0 0 .8rem; text-wrap: balance;
}
h2 {
  font: 600 clamp(1.3rem, 1.1rem + .8vw, 1.6rem)/1.22 var(--serif);
  letter-spacing: -.015em; margin: 2.6rem 0 .7rem; text-wrap: balance;
}
h3 { font: 600 1.02rem/1.35 var(--sans); margin: 1.7rem 0 .35rem; }
p { margin: 0 0 1rem; max-width: 66ch; }
.lede { font-size: 1.1rem; color: var(--muted); max-width: 52ch; }
.muted { color: var(--muted); }

code, kbd, pre { font-family: var(--mono); font-size: .92em; }
code { background: var(--sunk); padding: .1em .34em; border-radius: 2px; }
pre {
  background: var(--cell); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: .85rem 1rem; overflow-x: auto;
}
pre code { background: none; padding: 0; }

/* --- the formula bar, which is how this site does search ------------------ */

.fx {
  display: flex; align-items: stretch; margin: 1.5rem 0 2rem; max-width: 34rem;
  background: var(--cell); border: 1px solid var(--rule); border-radius: var(--radius);
}
.fx:focus-within { box-shadow: 0 0 0 2px var(--brand); border-color: var(--brand); }
.fx .fx-tag {
  display: flex; align-items: center; padding: 0 .8rem;
  font: 600 .95rem/1 var(--serif); font-style: italic; color: var(--muted);
  background: var(--sunk); border-right: 1px solid var(--rule);
  border-radius: var(--radius) 0 0 var(--radius);
}
.fx input {
  flex: 1; min-width: 0; padding: .68rem .8rem;
  font: 400 .95rem/1.3 var(--mono); color: var(--ink);
  background: transparent; border: 0;
}
.fx input:focus { outline: none; }
.fx button {
  padding: 0 1.1rem; font: 600 .85rem/1 var(--sans); cursor: pointer;
  color: #fff; background: var(--brand); border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.fx button:hover { background: var(--ink-indigo); }

/* --- cells: the grid, used as layout -------------------------------------- */

/* Each cell draws its own right and bottom rule and the container draws the
   top and left, rather than a 1px gap letting a background through. A grid
   whose last row is partly empty would otherwise show a slab of rule colour
   where the missing cells are — which is what a 1px-gap grid does to any
   collection that is not an exact multiple of the column count. */
.cells {
  display: grid; padding: 0; margin: 0 0 1rem; list-style: none;
  background: var(--cell);
  border: 1px solid var(--rule); border-width: 1px 0 0 1px;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.cell {
  background: var(--cell); padding: 1rem 1.05rem 1.05rem; position: relative;
  border: 0 solid var(--rule); border-right-width: 1px; border-bottom-width: 1px;
}
/* The selection state, borrowed from the grid itself: 2px border plus the fill
   handle in the corner. */
.cell:hover, .cell:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }
.cell:hover::after, .cell:focus-within::after {
  content: ""; position: absolute; right: -4px; bottom: -4px;
  width: 7px; height: 7px; background: var(--brand);
  border: 1px solid var(--cell); z-index: 1;
}
.cell a { text-decoration: none; font: 600 .98rem/1.3 var(--sans); color: var(--ink); }
.cell a:hover { color: var(--ink-indigo); }
.cell p { margin: .3rem 0 0; color: var(--muted); font-size: .88rem; max-width: none; }
.cell .fn-name { font-family: var(--mono); font-weight: 500; letter-spacing: -.01em; }

.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-block; text-decoration: none;
  font: 500 .74rem/1 var(--mono); padding: .3rem .48rem;
  border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink-indigo); background: var(--paper);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }

.sechead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 2.6rem 0 .8rem; flex-wrap: wrap;
}
.sechead h2 { margin: 0; }
.sechead a { font: 500 .85rem/1 var(--sans); }

/* --- provenance: the moat, as numbers ------------------------------------- */

.prov {
  display: flex; flex-wrap: wrap; margin: 1.5rem 0 0; max-width: 34rem;
  background: var(--cell); border: 1px solid var(--rule); border-radius: var(--radius);
}
.prov div { padding: .7rem .95rem; flex: 1 1 8rem; }
.prov div + div { border-left: 1px solid var(--rule); }
.prov b {
  display: block; font: 600 1.3rem/1.1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.prov .lit b { color: var(--ran); }
.prov span {
  font: 500 .67rem/1.3 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* --- function detail ------------------------------------------------------ */

.crumb { font: 500 .75rem/1 var(--mono); color: var(--muted); margin: 0 0 1rem; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--ink-indigo); }
.crumb .sep { opacity: .5; padding: 0 .35rem; }

.fn-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: 2.4rem; align-items: start; margin-top: .5rem;
}
@media (max-width: 900px) { .fn-layout { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }

.fn-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.fn-head h1 {
  font: 700 clamp(1.7rem, 1.2rem + 1.8vw, 2.2rem)/1 var(--mono);
  letter-spacing: -.035em; margin: 0;
}

/* The executed stamp. Only ever means "this ran in a real sheet". */
.stamp {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 600 .7rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ran); background: var(--ran-soft);
  border: 1px solid var(--ran-line); border-radius: 2px; padding: .36rem .55rem;
}
.stamp svg { width: 11px; height: 11px; }

.syntax {
  display: block; font: 500 .95rem/1.5 var(--mono);
  background: var(--cell); border: 1px solid var(--rule);
  border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0;
  padding: .75rem .95rem; margin: 0 0 1.4rem; overflow-x: auto; white-space: pre;
}

/* The capture, framed as evidence rather than dropped in as a screenshot. */
.evidence {
  margin: 0 0 1.6rem; background: var(--cell);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.evidence-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: .55rem .8rem;
  border-bottom: 1px solid var(--rule);
  font: 500 .72rem/1.4 var(--mono); color: var(--muted);
}
.evidence-top .ran { display: flex; align-items: center; gap: .45rem; color: var(--ran); font-weight: 600; }
.evidence-top .ran svg { width: 11px; height: 11px; }
.evidence img { display: block; width: 100%; height: auto; }
.evidence figcaption {
  padding: .6rem .8rem; font-size: .84rem; color: var(--muted);
  border-top: 1px solid var(--rule);
}

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .92rem; }
th {
  font: 500 .69rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 0 .7rem .45rem 0;
  border-bottom: 1px solid var(--rule);
}
td { padding: .55rem .7rem .55rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
td:first-child code { font-weight: 500; }
.data-table { font-variant-numeric: tabular-nums; }

.gotchas { list-style: none; padding: 0; margin: 0; display: grid;
           border: 1px solid var(--rule); border-bottom: 0; }
.gotchas li {
  background: var(--cell); padding: .65rem .85rem; font-size: .9rem; color: var(--muted);
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  border-bottom: 1px solid var(--rule);
}
.gotchas .n { font: 500 .74rem/1.55 var(--mono); color: var(--danger); font-variant-numeric: tabular-nums; }

/* sticky rail */
.rail {
  position: sticky; top: 1rem; display: grid;
  background: var(--cell); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 900px) { .rail { position: static; } }
.rail section { background: var(--cell); padding: .85rem .9rem; border-bottom: 1px solid var(--rule); }
.rail section:last-child { border-bottom: 0; }
.rail h2 {
  font: 500 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .45rem;
}
.rail .val { font: 500 .95rem/1.35 var(--mono); word-break: break-word; }
.rail .val.ok { color: var(--ran); }
.rail .chips { margin: 0; }
.rail iframe { display: block; width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 2px; }
.rail-tool { background: var(--brand); }
.rail-tool h2 { color: rgba(255,255,255,.75); }
.rail-tool p { color: #fff; font-size: .85rem; margin: 0 0 .6rem; max-width: none; }
.rail-tool .btn {
  display: block; text-align: center; text-decoration: none;
  background: #fff; color: var(--ink-indigo);
  font: 600 .82rem/1 var(--sans); padding: .55rem; border-radius: 2px;
}

.notice {
  background: var(--cell); border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.15rem;
}
.notice p:last-child { margin-bottom: 0; }

/* --- tools ---------------------------------------------------------------- */

.tool-list { list-style: none; padding: 0; display: grid;
             border: 1px solid var(--rule); border-bottom: 0; }
.tool-list li { background: var(--cell); padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--rule); }
.tool-list h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
.tool-list p { margin: 0; color: var(--muted); font-size: .93rem; }

.qb-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.4rem; align-items: start; margin-top: 1.4rem;
}
@media (max-width: 860px) { .qb-layout { grid-template-columns: minmax(0, 1fr); } }

.qb fieldset {
  background: var(--cell); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: .9rem 1rem 1.1rem; margin: 0 0 .9rem;
}
.qb legend {
  font: 600 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 0 .4rem;
}
.qb legend .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.qb label { display: block; font: 500 .8rem/1.4 var(--sans); margin: .8rem 0 .28rem; }
.qb label.check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0; }
.qb input[type="text"], .qb input[type="number"], .qb select {
  font: 400 .88rem/1.3 var(--mono); padding: .45rem .55rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px; max-width: 100%;
}
.qb input[type="text"] { width: 100%; }
.qb input[type="number"] { width: 7rem; }
.qb .hint { color: var(--muted); font-size: .84rem; margin: .3rem 0 0; }
.qb .cols { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .4rem 0 0; }
.qb .row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 0 0 .45rem; }
.qb .row label { margin: 0; }
.qb .row .join { min-width: 4.5rem; }
.qb .row input[type="text"] { width: auto; flex: 1 1 11rem; min-width: 7rem; }
.qb .row select { flex: 0 0 auto; }
.qb .row.cond { padding: .35rem .5rem; border-radius: 2px; }
.qb .row.cond:nth-child(even) { background: var(--sunk); }
.qb button[type="submit"] {
  font: 600 .85rem/1 var(--sans); padding: .6rem 1.15rem; cursor: pointer;
  color: #fff; background: var(--brand); border: 0; border-radius: 2px;
}
.qb button[type="submit"]:hover { background: var(--ink-indigo); }
@media (max-width: 620px) {
  .qb .row { gap: .35rem; }
  .qb .row input[type="text"] { flex: 1 1 100%; }
}

.qb-result { margin: 0; }
.qb-result .out-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: .55rem .8rem;
  background: var(--cell); border: 1px solid var(--rule); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  font: 500 .72rem/1.4 var(--mono); color: var(--muted);
}
.qb-result .out-top b { color: var(--ran); font-weight: 600; }
.qb-result .out-body {
  background: var(--cell); border: 1px solid var(--rule);
  border-top: 3px solid var(--ran); border-radius: 0 0 var(--radius) var(--radius);
  padding: .9rem 1rem 1rem;
}
.qb-result .formula {
  font: 500 .88rem/1.55 var(--mono);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 2px;
  padding: .7rem .8rem; overflow-x: auto;
}
.qb-result .formula code { background: none; padding: 0; white-space: pre-wrap; word-break: break-word; }
.qb-result .copy {
  font: 600 .82rem/1 var(--sans); margin: .7rem 0 0; padding: .45rem .85rem;
  cursor: pointer; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
}
.qb-result .copy:hover { border-color: var(--brand); color: var(--ink-indigo); }
.qb-result .errors {
  border: 1px solid var(--rule); border-left: 3px solid var(--danger);
  background: var(--cell); padding: .7rem 1rem; border-radius: 0 2px 2px 0; margin: 0 0 1rem;
}
.qb-result ul { padding-left: 0; list-style: none; margin: 0; }
.qb-result .note {
  display: grid; grid-template-columns: auto 1fr; gap: .55rem;
  font-size: .87rem; color: var(--muted);
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--rule);
}
.qb-result .note .w {
  font: 600 .71rem/1.55 var(--mono); text-transform: uppercase;
  letter-spacing: .06em; color: var(--warn);
}
.qb-result .explain li { margin: .25rem 0; font-size: .89rem; color: var(--muted); }

/* A tool beats a description, so the pairing gets the accent, not a grey box. */
.tool-pair {
  margin: 1.6rem 0; padding: .85rem 1rem;
  background: var(--cell); border: 1px solid var(--rule);
  border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0;
}
.tool-pair p { margin: 0; max-width: none; }
.pair { margin: 2.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rule); }