/* EE26 lighting plans.
   Visual system derived from linear.app (see linear.app.md for the extraction).
   Four things carry over: mono is reserved for machine-written values, emphasis
   comes from luminance rather than weight, surfaces are etched with a hairline
   rather than lifted with a shadow, and nothing moves under the cursor. */

/* ---------- fonts ---------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Vietnamese is its own range. Without this every Chóa, Hiếu and hương on the
   page drops to a fallback face, which is exactly the text that matters. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("./fonts/mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("./fonts/mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("./fonts/mono-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* ---------- tokens ---------- */

:root {
  --bg: #08090a;
  --surface: #0f1011;
  --raised: #161718;

  /* Four rungs, and only four. Importance reads as brightness.
     Linear's faintest grey is #62666D, which measures 3.3:1 on this surface.
     Raised to keep every rung at or above 4.5:1, and the dim rung moved with it
     so the four steps stay separable. */
  --t-faint: #7c828c;
  --t-dim: #9ba1ab;
  --t: #d0d6e0;
  --t-bright: #f7f8f8;

  --hair: rgba(255, 255, 255, 0.08);
  --hair-strong: rgba(255, 255, 255, 0.14);
  --control-border: #2e2e32;

  /* Hue means state, never decoration. */
  --cam: #e06a5a;
  --warn: #d9a441;
  --live: #4ea672;

  --ring: 0 0 0 1px rgba(0, 0, 0, 0.35);
  --edge: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --float: 0 2px 32px rgba(0, 0, 0, 0.45);

  --r-control: 8px;
  --r-panel: 12px;
  --r-chip: 999px;

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fast: 0.1s;
  --slow: 0.16s;

  --nav-w: 288px;
  --previz-w: clamp(280px, 21vw, 340px);
  --side-w: 344px;
  --bar-h: 56px;
  --tools-h: 60px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--t);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Browser surfaces ship with defaults that belong to no design system. */
::selection { background: rgba(224, 106, 90, 0.28); color: var(--t-bright); }
* { scrollbar-width: thin; scrollbar-color: #26272a transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #26272a;
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: #34353a; background-clip: content-box; }

:focus { outline: none; }
:focus-visible {
  outline: 1px solid var(--cam);
  outline-offset: 2px;
  border-radius: 3px;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shell ---------- */

#shell {
  display: grid;
  height: 100%;
  grid-template-columns: var(--nav-w) var(--previz-w) 1fr var(--side-w);
  grid-template-rows: calc(var(--bar-h) + var(--safe-top)) auto 1fr calc(var(--tools-h) + var(--safe-bottom));
  grid-template-areas:
    "nav top    top    top"
    "nav banner banner banner"
    "nav previz stage  side"
    "nav tools  tools  tools";
}
/* Grid children default to min-width:auto, which lets the plate and the header
   push past the viewport instead of shrinking. */
#shell > * { min-width: 0; }

/* ---------- nav ---------- */

#nav {
  grid-area: nav;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--hair);
  padding-top: var(--safe-top);
}
.nav-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--bar-h);
  padding: 8px 14px;
  border-bottom: 1px solid var(--hair);
  flex: none;
}
.nav-head h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 510;
  color: var(--t-bright);
  letter-spacing: -0.012em;
}
.nav-head .tag {
  font-size: 11px;
  color: var(--t-faint);
  border: 1px solid var(--hair);
  border-radius: var(--r-chip);
  padding: 1px 6px;
}
.nav-head .count { margin-left: auto; font-size: 11px; color: var(--t-faint); }

#shots { overflow-y: auto; flex: 1; min-height: 0; padding: 4px 0; }
#shots button {
  display: grid;
  grid-template-columns: 74px 1fr 16px;
  grid-template-areas: "time id plan" "time name plan";
  align-items: center;
  gap: 0 10px;
  width: 100%;
  padding: 7px 14px;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  color: var(--t-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
#shots button:hover { background: rgba(255, 255, 255, 0.025); }
#shots button.active {
  background: rgba(255, 255, 255, 0.045);
  border-left-color: var(--cam);
}
#shots .t { grid-area: time; font-size: 11px; color: var(--t-faint); white-space: nowrap; }
#shots .n { grid-area: id; font-size: 11px; color: var(--t-faint); }
#shots button.active .n { color: var(--cam); }
#shots .d {
  grid-area: name;
  font-size: 13px;
  color: var(--t-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#shots button.active .d { color: var(--t-bright); }
#shots .p { grid-area: plan; font-size: 11px; color: var(--t-faint); text-align: right; }

.nav-foot {
  flex: none;
  margin: 0;
  padding: 12px 14px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--hair);
  font-size: 12px;
  line-height: 1.45;
  color: var(--t-faint);
}
.nav-foot .mono { font-size: 11px; }

/* ---------- top bar ---------- */

#top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: var(--safe-top) 16px 0;
  border-bottom: 1px solid var(--hair);
  background: var(--bg);
}
#top { overflow: hidden; }
#top .titles { min-width: 0; flex: 1 1 0; }
.title-row { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.shot-id {
  flex: none;
  font-size: 11px;
  color: var(--t-faint);
  border: 1px solid var(--hair);
  border-radius: var(--r-chip);
  padding: 1px 7px;
}
#shot-title {
  margin: 0;
  font-size: 16px;
  font-weight: 510;
  letter-spacing: -0.014em;
  color: var(--t-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#shot-meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--t-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--hair);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--t-dim);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
    background var(--fast) var(--ease);
}
.icon-btn:hover { color: var(--t-bright); border-color: var(--hair-strong); background: rgba(255, 255, 255, 0.03); }

/* ---------- banner ---------- */

#banner {
  grid-area: banner;
  display: flex;
  flex-direction: column;
}
#banner:empty { display: none; }
#banner span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--hair);
  font-size: 12px;
  color: var(--t-dim);
  background: var(--surface);
}
#banner span::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--warn);
}
#banner span.scale::before { background: var(--t-faint); }

/* ---------- previz ---------- */

#previz {
  grid-area: previz;
  min-height: 0;
  margin: 0;
  padding: 14px;
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.panel-head { display: flex; align-items: baseline; gap: 8px; }
.label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--t-dim);
}
.panel-head .note { font-size: 11px; color: var(--t-faint); margin-left: auto; }

#previz img {
  display: block;
  width: 100%;
  border-radius: var(--r-control);
  background: #000;
  box-shadow: var(--ring), var(--edge);
}
.fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--t-faint); }
#previz-ref { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 4px; border-top: 1px solid var(--hair); }
#previz-ref[hidden] { display: none; }
#previz-ref-name { font-size: 11px; }

/* ---------- stage: the original export, presented as a plate ---------- */

#stage {
  grid-area: stage;
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  /* The only ornament on the page, and it is doing a job: a measuring grid
     under a measuring instrument. */
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  opacity: 1;
}
#plate { margin: 0; display: flex; flex-direction: column; gap: 0; max-width: 100%; min-width: 0; }
.plate-frame {
  padding: 10px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  box-shadow: var(--float);
}
#plate-img {
  display: block;
  max-width: min(640px, 100%);
  min-width: 0;
  max-height: 62vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  /* The exports are 372-938px wide. Upscaling them softens the printed values,
     so they are shown at or below native size and never stretched. */
  image-rendering: auto;
  transition: opacity var(--slow) var(--ease);
}
#plate figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-top: 0;
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  font-size: 11px;
  color: var(--t-dim);
}
.plan-tag {
  flex: none;
  font-size: 11px;
  color: var(--t-bright);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-chip);
  padding: 1px 8px;
}
#plate-caption { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate-dims { margin-left: auto; flex: none; font-size: 11px; color: var(--t-faint); }

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

#side {
  grid-area: side;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface);
  border-left: 1px solid var(--hair);
}
#detail { padding: 14px; display: flex; flex-direction: column; gap: 16px; }
#detail .intent { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--t); }

#detail section { display: flex; flex-direction: column; gap: 7px; }
#detail h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--t-dim);
}

#detail dl { margin: 0; display: grid; grid-template-columns: 74px 1fr; gap: 5px 10px; }
#detail dt { font-size: 12px; color: var(--t-faint); }
#detail dd { margin: 0; font-size: 12px; color: var(--t); }

#detail ol, #detail ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
#detail li { display: flex; gap: 8px; font-size: 12px; color: var(--t); line-height: 1.45; }
#detail li .idx { flex: none; font-size: 11px; color: var(--t-faint); padding-top: 2px; }

/* The rig table is the densest thing here, so it gets the tightest rhythm. */
#detail table { width: 100%; border-collapse: collapse; }
#detail tr { border-top: 1px solid var(--hair); }
#detail tr:first-child { border-top: 0; }
#detail th {
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  color: var(--t);
  padding: 6px 8px 6px 0;
  white-space: nowrap;
}
#detail td { padding: 6px 0; font-size: 11.5px; color: var(--t-dim); vertical-align: baseline; }
#detail td.val { text-align: right; color: var(--t); white-space: nowrap; }
#detail td.none { color: var(--t-faint); }
#detail .fixture-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  background: var(--t-dim);
}
#detail .fixture-dot.cam { background: var(--cam); }
#detail .absent { display: flex; flex-direction: column; gap: 4px; }
#detail .absent span { display: flex; gap: 8px; font-size: 12px; color: var(--t-faint); }
#detail .absent span::before { content: "—"; color: #3a3b3f; }

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

#tools {
  grid-area: tools;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 14px 16px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--hair);
  background: var(--surface);
}
.field { display: flex; align-items: center; gap: 10px; min-width: 0; }
.input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--control-border);
  border-radius: var(--r-control);
  padding: 0 8px;
  height: 28px;
  background: var(--bg);
  transition: border-color var(--fast) var(--ease);
}
.input-wrap:focus-within { border-color: var(--t-faint); }
#reference {
  width: 62px;
  border: 0;
  background: none;
  color: var(--t-bright);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  text-align: right;
}
#reference::-webkit-outer-spin-button, #reference::-webkit-inner-spin-button { appearance: none; margin: 0; }
#reference { appearance: textfield; }
#reference::placeholder { color: var(--t-faint); }
.unit { font-size: 11px; color: var(--t-faint); }
.scale-state { font-size: 11px; color: var(--t-faint); }
.scale-state.set { color: var(--live); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  margin-left: auto;
  border: 1px solid var(--hair);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--t-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
    background var(--fast) var(--ease);
}
.btn:hover { color: var(--t-bright); border-color: var(--hair-strong); background: rgba(255, 255, 255, 0.03); }
.btn.active { color: var(--t-bright); border-color: var(--hair-strong); background: rgba(255, 255, 255, 0.06); }
.btn svg { width: 13px; height: 13px; }
.btn:disabled { opacity: 0.35; cursor: default; }

/* ---------- narrow ---------- */

@media (max-width: 1199px) {
  #shell {
    grid-template-columns: 1fr;
    grid-template-rows: calc(var(--bar-h) + var(--safe-top)) auto 1fr calc(var(--tools-h) + var(--safe-bottom));
    grid-template-areas: "top" "banner" "stage" "tools";
  }
  #nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(86vw, 320px);
    transform: translateX(-101%);
    transition: transform var(--slow) var(--ease);
    box-shadow: var(--float);
  }
  body.nav-open #nav { transform: none; }
  #side {
    position: fixed;
    inset: auto 0 calc(var(--tools-h) + var(--safe-bottom)) 0;
    z-index: 20;
    max-height: 52vh;
    border-left: 0;
    border-top: 1px solid var(--hair);
    transform: translateY(calc(100% + 80px));
    transition: transform var(--slow) var(--ease);
  }
  body.info-open #side { transform: none; }
  #previz {
    position: fixed;
    inset: auto 12px calc(var(--tools-h) + 12px + var(--safe-bottom)) 12px;
    z-index: 22;
    max-width: 420px;
    margin: 0 auto;
    max-height: calc(100vh - var(--bar-h) - var(--tools-h) - 60px);
    border: 1px solid var(--hair);
    border-radius: var(--r-panel);
    box-shadow: var(--float);
  }
  #previz[hidden] { display: none; }
  #stage { padding: 16px; background-size: 48px 48px; }
  #plate-img { max-height: 52vh; }
}

@media (min-width: 1200px) {
  #menu, #info { display: none; }
  #previz[hidden] { display: flex; }
}

@media (max-width: 520px) {
  .field .label { display: none; }
  .scale-state { font-size: 11px; }
  #banner span { padding: 6px 14px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}