/* ==========================================================================
   /work/gluline/: page styles, on top of site.css (the clean light theme)

   The app runs on three phones on Gluline's own mist, and the web client in
   a window. The timeline is one filled track that ends on the release; the
   card figure is a schematic of what the assistant is allowed to read, with
   switches that work; the first-run choice runs on its own phone; the audit
   is one bar of 74 candidates. Ink only: nothing on this page is a
   measurement that clears an e-value bar, so the signal colour stays unused.
   ========================================================================== */

/* ------------------------------------------------------------ the phones */
.gl-stage {
  --ph-w: clamp(204px, min((100vh - 270px) * 0.46, 21vw), 300px);
  padding: clamp(44px, 5.4vw, 84px) clamp(20px, 3vw, 48px) clamp(30px, 3.4vw, 52px);
  box-shadow: 0 50px 90px -60px oklch(0.4 0.08 280 / 0.55);
}
@supports (height: 100svh) { .gl-stage { --ph-w: clamp(204px, min((100svh - 270px) * 0.46, 21vw), 300px); } }
.gl-devs { display: flex; justify-content: center; align-items: flex-start; gap: clamp(4px, 2.6vw, 44px); }
.gl-devs:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 12px; }
/* each slot is a little wider than its phone, so a long caption has room */
.gl-dev { flex: none; width: calc(var(--ph-w) + 36px); min-width: 0; }
.gl-dev .phone { width: var(--ph-w); margin-inline: auto; }
.gl-stage .phone {
  box-shadow:
    0 0 0 1px oklch(0.3 0.04 270 / 0.12),
    0 2px 6px oklch(0.3 0.05 270 / 0.1),
    0 40px 60px -30px oklch(0.3 0.08 275 / 0.55);
}
.gl-cap {
  margin: 20px auto 0;
  max-width: 30ch;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: oklch(0.3 0.03 262);
  text-wrap: balance;
}
.gl-media .stage-cap { margin-top: 16px; max-width: none; }

/* the stage rises whole (site.css); the phones follow it up, one after another */
html.js .gl-stage .gl-dev { opacity: 0; translate: 0 56px; transition: opacity 900ms var(--eo), translate 1400ms var(--eo); transition-delay: calc(160ms + var(--i) * 110ms); }
html.js .gl-stage.in .gl-dev { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------ the web */
.gl-web { margin-top: clamp(72px, 7.2vw, 128px); align-items: end; }
.gl-web-cap { grid-column: 1 / 2; padding-bottom: 6px; }
.gl-web-k { font-weight: 600; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.gl-web-s { margin-top: 10px; font-size: var(--fs-fine); line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.cols > .gl-win { grid-column: 2 / 6; padding-right: 0; }
.gl-win video { aspect-ratio: 1920 / 1200; background: oklch(0.965 0.02 190); }

/* ------------------------------------------------------------ the timeline */
.gl-ruler { margin-top: clamp(44px, 4.4vw, 72px); padding: clamp(22px, 2.6vw, 40px) clamp(20px, 2.8vw, 44px) clamp(20px, 2.4vw, 34px); }
.gl-ruler-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 32px; margin-bottom: clamp(22px, 2.6vw, 40px); }
.gr-read { flex: none; min-height: 0.9em; font-weight: 300; font-size: clamp(2.5rem, 1.5rem + 2.2vw, 3.75rem); line-height: 0.9; letter-spacing: -0.05em; white-space: nowrap; }
.gr-svg { overflow: visible; font-family: var(--f-sans); }
.gr-bed { fill: oklch(0.9 0.007 262); }
.gr-fill { fill: var(--ink); }
.gr-dots { stroke: var(--ink-3); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 8; }
.gr-knob { fill: var(--ink); stroke: var(--tile); stroke-width: 3; }
.gr-t { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.gr-w { stroke-opacity: 0.5; }
.gr-mo { font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; fill: var(--ink-2); }
.gr-lab { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; fill: var(--ink); }
.gr-sub { font-size: 12.5px; fill: var(--ink-3); }
.gr-au-b { fill: var(--ink-3); }
.gr-au-t { font-size: 12.5px; font-weight: 500; fill: var(--ink-2); }
.fl-narrow .gr-mo { font-size: 12.5px; }
.fl-narrow .gr-lab { font-size: 14px; }
.fl-narrow .gr-sub, .fl-narrow .gr-au-t { font-size: 12px; }

/* the graduation fades in; then gluline.js fills the track to the release */
html.js .gr-t { opacity: 0; transition: opacity 500ms ease calc(var(--i) * 14ms); }
html.js .gl-ruler.in .gr-t { opacity: 1; }
html.js .gr-endl, html.js .gr-au, html.js .gr-dots { transition: opacity 600ms ease; }
html.js .gr-endl { transition-delay: 120ms; }
html.js .gr-dots { transition-delay: 300ms; }
html.js .gl-ruler.is-pre .gr-endl, html.js .gl-ruler.is-pre .gr-dots, html.js .gl-ruler.is-pre .gr-au:not(.on) { opacity: 0; }

/* ------------------------------------------------------------ which chats the assistant reads */
.gl-sw { container-type: inline-size; padding: clamp(20px, 2.2vw, 32px); }
.gl-sw figcaption { margin-bottom: clamp(20px, 2.2vw, 30px); }
.gl-js { display: none; }
html.js .gl-js { display: inline; }
.gl-sw-body { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(220px, 264px); align-items: center; }
.gl-cards { display: grid; row-gap: 12px; }
.gl-card { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 18px 0 20px; background: var(--bg); border-radius: 16px; box-shadow: var(--lift); }
.gl-card-x { min-width: 0; }
.gl-card-n { display: block; font-size: 0.8125rem; line-height: 1.3; color: var(--ink-3); }
.gl-card-t { display: block; margin-top: 3px; font-weight: 600; font-size: 1.1875rem; line-height: 1.15; letter-spacing: -0.025em; color: var(--ink-3); transition: color 300ms ease; text-wrap: balance; }
.gl-card .t-on { display: none; }
.gl-card.is-read .gl-card-t { color: var(--ink); }
.gl-card.is-read .t-on { display: inline; }
.gl-card.is-read .t-off { display: none; }

/* a switch: a pill with a white knob */
.sw { position: relative; flex: none; width: 46px; height: 28px; padding: 0; border: 0; border-radius: 14px; background: oklch(0.86 0.007 262); cursor: pointer; transition: background-color 260ms ease, opacity 260ms ease; }
.sw::before { content: ""; position: absolute; inset: -9px -4px; }
.sw i { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 0.5px oklch(0.2 0.02 262 / 0.08), 0 2px 5px oklch(0.2 0.02 262 / 0.22); transition: transform 420ms var(--eo), width 220ms var(--eo); }
.sw[aria-checked="true"] { background: var(--ink); }
.sw[aria-checked="true"] i { transform: translateX(18px); }
.sw:disabled { cursor: default; }
.sw:active:not(:disabled) i { width: 29px; }
.sw[aria-checked="true"]:active:not(:disabled) i { transform: translateX(13px); }
.sw:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 14px; }
/* with the assistant off, a chat's own switch keeps its place but does nothing */
.gl-sw:not(.is-all) .gl-card .sw { opacity: 0.4; }

.gl-wires { position: relative; height: 188px; }
.gl-wires svg { position: absolute; left: 0; top: 0; overflow: visible; }
.gl-wires .wn { display: none; }
.bed { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 1 5; stroke-linecap: round; }
.wire { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 240px 240px; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--eo); }
.term { fill: var(--tile); stroke: var(--ink-3); stroke-width: 1.5; opacity: 0; transition: opacity 240ms ease; }
.gl-sw:not(.a-read) .wire-a, .gl-sw:not(.b-read) .wire-b { stroke-dashoffset: 240px; transition-duration: 600ms; }
.gl-sw:not(.a-read) .term-a, .gl-sw:not(.b-read) .term-b { opacity: 1; transition-delay: 300ms; }
/* what the assistant reads travels along the wire to it */
.flow { fill: var(--ink); opacity: 0; offset-rotate: 0deg; offset-distance: 0%; }
.flow-a { offset-path: path("M0 44 H22 C60 44 58 94 96 94"); }
.flow-b { offset-path: path("M0 144 H22 C60 144 58 94 96 94"); }
html.js .gl-sw.in.a-read .flow-a { animation: gl-flow 2800ms var(--eio) 900ms infinite; }
html.js .gl-sw.in.b-read .flow-b { animation: gl-flow 2800ms var(--eio) 2300ms infinite; }
@keyframes gl-flow {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  86% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.gl-node { padding: 16px 18px; background: var(--bg); border-radius: 18px; box-shadow: var(--lift); }
.gl-node-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gl-node-h b { font-weight: 600; font-size: 1.1875rem; line-height: 1.1; letter-spacing: -0.025em; transition: color 300ms ease; }
.gl-node-s { margin-top: 2px; font-size: 0.8125rem; line-height: 1.3; color: var(--ink-3); }
.gl-node-sw { display: inline-flex; align-items: center; gap: 8px; }
.gl-node-v { font-weight: 500; font-size: 0.875rem; color: var(--ink-2); min-width: 1.7em; }
.gl-node-r { margin-top: 12px; font-size: var(--fs-fine); line-height: 1.4; color: var(--ink-2); min-height: 2.8em; text-wrap: balance; }
.gl-sw:not(.is-all) .gl-node-h b { color: var(--ink-3); }

/* before it is seen, no wire has been drawn yet */
html.js .gl-sw:not(.in) .wire { stroke-dashoffset: 240px; }
html.js .gl-sw:not(.in) .term { opacity: 0; }
html.js .gl-sw.in .wire-b { transition-delay: 120ms; }

@container (max-width: 620px) {
  .gl-sw-body { grid-template-columns: minmax(0, 1fr) 36px; align-items: start; }
  .gl-wires .ww { display: none; }
  .gl-wires .wn { display: block; }
  .gl-node { grid-column: 1 / -1; margin-top: 22px; }
  .gl-node-r { min-height: 0; }
}

/* ------------------------------------------------------------ who can read what */
.gl-who { margin-top: 0; }
.gl-who th { width: 38%; padding-right: var(--gut); }
.gl-who td b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.gl-who tbody.is-not tr:first-child th, .gl-who tbody.is-not tr:first-child td { border-top: 1px solid var(--ink-3); }
html.js .gl-who tr { opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--eo), transform 800ms var(--eo); transition-delay: calc(120ms + var(--r) * 90ms); }
html.js .gl-who.in tr { opacity: 1; transform: none; }
html.js .gl-who tbody.is-not tr { transition-delay: calc(420ms + var(--r) * 90ms); }

/* ------------------------------------------------------------ the first-run choice, on its own phone */
.chapter-b > .gl-first { margin-top: clamp(36px, 3.6vw, 56px); }
.gl-first { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(28px, 4.4vw, 72px); padding: clamp(32px, 3.6vw, 56px) clamp(28px, 4.4vw, 72px); }
.gl-first .phone { width: clamp(180px, 16vw, 236px); }
.gl-first-t .fig-k { font-size: clamp(1.375rem, 1rem + 0.9vw, 1.875rem); line-height: 1.1; letter-spacing: -0.035em; }
.gl-first-c { position: relative; margin-top: 18px; padding-left: 24px; max-width: 32ch; font-size: 1rem; line-height: 1.5; letter-spacing: -0.01em; color: oklch(0.32 0.03 262); text-wrap: pretty; }
.gl-first-c + .gl-first-c { margin-top: 14px; padding-top: 14px; border-top: 1px solid oklch(0.3 0.04 270 / 0.12); }
.gl-first-c b { font-weight: 600; color: var(--ink); }
/* the marks gluline.com uses for its own two lists: filled for what the server can see, open for what it cannot */
.gl-first-c::after { content: ""; position: absolute; left: 1px; top: 0.5em; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; }
.gl-first-c + .gl-first-c::after { top: calc(14px + 0.5em); }
.gl-first-c.is-on::after { background: var(--ink); }
.gl-first-c.is-off::after { border: 1.5px solid var(--ink); }
html.js .gl-first .gl-first-t > * { opacity: 0; translate: 0 10px; transition: opacity 700ms ease, translate 900ms var(--eo); }
html.js .gl-first .gl-first-t > :nth-child(1) { transition-delay: 320ms; }
html.js .gl-first .gl-first-t > :nth-child(2) { transition-delay: 440ms; }
html.js .gl-first .gl-first-t > :nth-child(3) { transition-delay: 560ms; }
html.js .gl-first.in .gl-first-t > * { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------ the release checklist */
.gl-gate { margin-top: clamp(28px, 3vw, 44px); }
.gl-gate + p { margin-top: clamp(28px, 3vw, 44px); }
.gl-gate ul { margin-top: 12px; border-top: 1px solid var(--line-2); }
.gl-gate li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.4; }
.bx { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }
.bx svg { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; overflow: visible; }
.bx path { fill: none; stroke: var(--bg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 0; }
.gl-gate-t { flex: 1 1 0; min-width: 0; }
.gl-n { font-weight: 600; font-size: 1.125rem; line-height: 1; letter-spacing: -0.02em; }
.gl-fields { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; padding-left: 36px; }
.gl-fields i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); }

html.js .gl-gate .bx { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color 240ms ease, box-shadow 240ms ease, transform 500ms var(--eo); }
html.js .gl-gate .bx path { stroke-dashoffset: 20; transition: stroke-dashoffset 420ms var(--eo); }
html.js .gl-gate.in .bx { background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
html.js .gl-gate.in .bx path { stroke-dashoffset: 0; }
html.js .gl-gate.in li:nth-child(1) .bx { transition-delay: 350ms; }
html.js .gl-gate.in li:nth-child(1) .bx path { transition-delay: 450ms; }
html.js .gl-gate.in li:nth-child(2) .bx { transition-delay: 900ms; }
html.js .gl-gate.in li:nth-child(2) .bx path { transition-delay: 1000ms; }
html.js .gl-gate.in li:nth-child(3) .bx { transition-delay: 2150ms; }
html.js .gl-gate.in li:nth-child(3) .bx path { transition-delay: 2250ms; }
html.js .gl-fields i { background: var(--line-2); transform: scale(0.6); transition: background-color 200ms ease, transform 400ms var(--eo); transition-delay: calc(1200ms + var(--i) * 60ms); }
html.js .gl-gate.in .gl-fields i { background: var(--ink-2); transform: none; }

/* ------------------------------------------------------------ August's audit */
.gl-au { padding: clamp(20px, 2.2vw, 32px); }
.gl-au-g { margin-top: clamp(20px, 2.2vw, 30px); display: grid; grid-template-columns: 42fr 32fr; column-gap: 3px; }
.gl-au-cells { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(74, minmax(0, 1fr)); column-gap: 3px; height: 48px; }
.gl-au-cells > :is(.is-y, .is-n) { display: block; border-radius: 3px; background: var(--ink); }
.gl-au-cells > .is-n { background: oklch(0.88 0.007 262); }
.gl-au-pass { position: absolute; top: -8px; bottom: -8px; left: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: 0; pointer-events: none; }
.gl-au-y, .gl-au-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-top: 16px; font-size: var(--fs-fine); line-height: 1.35; color: var(--ink-2); }
.gl-au-y { grid-column: 1; padding-right: 12px; }
.gl-au-n { grid-column: 2; }
.gl-au-y b, .gl-au-n b { font-size: clamp(2rem, 1.4rem + 1.3vw, 2.75rem); line-height: 1; letter-spacing: -0.045em; }
.gl-au-y b { font-weight: 600; color: var(--ink); }
.gl-au-n b { font-weight: 300; color: var(--ink-2); }

/* the second pass: a hairline crosses the candidates and each one resolves behind it */
html.js .gl-au-cells > :is(.is-y, .is-n) { background: oklch(0.8 0.008 262); transition: background-color 280ms ease; transition-delay: calc(400ms + var(--i) * 22ms); }
html.js .gl-au.in .gl-au-cells > .is-y { background: var(--ink); }
html.js .gl-au.in .gl-au-cells > .is-n { background: oklch(0.88 0.007 262); }
html.js .gl-au.in .gl-au-pass { animation: gl-pass 1700ms linear 360ms both; }
@keyframes gl-pass { 0% { left: 0; opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
html.js .gl-au-y, html.js .gl-au-n { opacity: 0; translate: 0 8px; transition: opacity 700ms ease, translate 900ms var(--eo); transition-delay: 2100ms; }
html.js .gl-au-n { transition-delay: 2220ms; }
html.js .gl-au.in .gl-au-y, html.js .gl-au.in .gl-au-n { opacity: 1; translate: 0 0; }

/* ==========================================================================
   Widths
   ========================================================================== */
@media (max-width: 1100px) {
  .gl-web { display: block; }
  .gl-web-cap { max-width: 52ch; padding-bottom: 0; margin-bottom: 20px; }
  .gl-web-s { margin-top: 6px; }
}

@media (max-width: 760px) {
  .case-line { margin-top: 22px; }
  /* the phones become a strip that scrolls sideways inside the stage */
  .gl-stage { padding: 28px 0 22px; }
  .gl-devs { justify-content: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 0 20px 6px; scrollbar-width: none; }
  .gl-devs::-webkit-scrollbar { display: none; }
  .gl-devs::after { content: ""; flex: 0 0 6px; }
  .gl-dev { width: 60%; scroll-snap-align: start; }
  .gl-dev .phone { width: auto; }
  .gl-cap { margin-top: 14px; font-size: 0.875rem; }
  .gl-web { margin-top: 56px; }
  .gl-web-k { font-size: 1.0625rem; }
  .gl-ruler { padding: 20px 16px 16px; }
  .gl-ruler-h { display: block; }
  .gr-read { margin-top: 18px; font-size: 2.5rem; }
  .gl-sw { padding: 18px 14px 16px; }
  .gl-card { height: 88px; padding: 0 14px 0 16px; }
  .gl-card-t { font-size: 1.0625rem; }
  .gl-who th { width: 44%; padding-right: 14px; }
  .gl-first { grid-template-columns: 1fr; justify-items: center; padding: 28px 20px 26px; }
  .gl-first .phone { width: 58%; max-width: 236px; }
  .gl-first-t { margin-top: 24px; justify-self: stretch; }
  .gl-au { padding: 18px 14px 16px; }
  .gl-au-cells { column-gap: 1.5px; height: 40px; }
  .gl-au-cells > :is(.is-y, .is-n) { border-radius: 1.5px; }
  .gl-au-g { column-gap: 1.5px; }
}

/* ==========================================================================
   Motion off: every figure in its final state
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js .gl-stage .gl-dev, html.js .gl-first .gl-first-t > * { opacity: 1; translate: 0 0; transition: none; }
  html.js .gr-t { opacity: 1; transition: none; }
  html.js .gl-ruler.is-pre .gr-endl, html.js .gl-ruler.is-pre .gr-dots, html.js .gl-ruler.is-pre .gr-au:not(.on) { opacity: 1; }
  .wire, .term, .sw, .sw i, .gl-card-t, .gl-node-h b { transition: none; }
  html.js .gl-sw:not(.in) .wire { stroke-dashoffset: 0; }
  html.js .gl-sw:not(.in).gl-sw:not(.a-read) .wire-a, html.js .gl-sw:not(.in).gl-sw:not(.b-read) .wire-b { stroke-dashoffset: 240px; }
  html.js .gl-sw:not(.in):not(.a-read) .term-a, html.js .gl-sw:not(.in):not(.b-read) .term-b { opacity: 1; }
  html.js .gl-sw .flow { animation: none !important; opacity: 0; }
  html.js .gl-who tr { opacity: 1; transform: none; transition: none; }
  html.js .gl-gate .bx { background: var(--ink); box-shadow: none; transition: none; }
  html.js .gl-gate .bx path { stroke-dashoffset: 0; transition: none; }
  html.js .gl-fields i { background: var(--ink-2); transform: none; transition: none; }
  html.js .gl-au-cells > :is(.is-y, .is-n) { transition: none; }
  html.js .gl-au-cells > .is-y { background: var(--ink); }
  html.js .gl-au-cells > .is-n { background: oklch(0.88 0.007 262); }
  html.js .gl-au.in .gl-au-pass { animation: none; }
  html.js .gl-au-y, html.js .gl-au-n { opacity: 1; translate: 0 0; transition: none; }
}

@media print {
  .gl-stage, .gl-first { background: none !important; box-shadow: none !important; }
  html.js .gl-stage .gl-dev, html.js .gl-who tr, html.js .gl-first .gl-first-t > * { transform: none !important; translate: none !important; opacity: 1 !important; }
}