/* Consensus — Cinematic Mode (Doctrine v2.0 §2.4; Canon v1.0).
   The key light is the slot, standing upright at the right of the page: it falls from the upper right.
   Every shadow falls down and to the left, every glass edge is lit on top, every glow is the slot's,
   and the only gradients are the slot's light falling off to nothing. */

@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/poppins-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/poppins-700-latin.woff2") format("woff2"); }

:root {
  --ground: #172033;   /* midnight, lit by the slot */
  --light: #ECE9E2;
  --accent: #8FE3FF;
  --ink: #0A0F1C;      /* deeper than the ground: type on light, and every shadow */
  --warn: #FF8A80;           /* compliance, not decoration (Canon: state colours) */
  --floor: #1E2940;
  --dim: rgba(236, 233, 226, .68);
  --glass: rgba(236, 233, 226, .07);
  --edge: rgba(236, 233, 226, .14);
  --r1: 10px;
  --r2: 22px;
  --r3: 999px;
  --slot-x: 18vw;            /* from the right edge */
  --shadow: -18px 28px 60px rgba(10, 15, 28, .62);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--ground); color: var(--light);
  font: 500 15px/1.55 "Poppins", ui-sans-serif, system-ui, sans-serif;
}
a { color: var(--light); text-underline-offset: 3px; }
h1, h2, h3 { font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- the scene: floor, slot, and the slot's light ---------- */
.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.scene .floor { position: absolute; left: 0; right: 0; top: 72vh; bottom: 0; background: var(--floor); }
.scene .slot {
  position: absolute; right: var(--slot-x); top: 0; height: 72vh; width: 5px; background: #F4F6F8;
  box-shadow: 0 0 36px 6px rgba(143, 227, 255, .5), 0 0 140px 32px rgba(143, 227, 255, .16);
}
.scene .spill { /* the slot's light, lying on the floor */
  position: absolute; right: calc(var(--slot-x) - 28vw); width: 56vw; top: 72vh; height: 28vh;
  background: radial-gradient(50% 60% at 50% 0%, rgba(143, 227, 255, .28), rgba(143, 227, 255, 0) 70%);
}
.scene .halo { /* the slot's light, thrown on the wall around it */
  position: absolute; right: calc(var(--slot-x) - 30vw); width: 60vw; top: 0; height: 72vh;
  background: radial-gradient(40% 55% at 50% 60%, rgba(143, 227, 255, .13), rgba(143, 227, 255, 0) 70%);
}

/* ---------- materials ---------- */
.glass {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r2);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--shadow);
}
.label, label { display: block; }
.label, label, th { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.dim { color: var(--dim); }
.accent { color: var(--accent); }
.warn { color: var(--warn); }
.big { font-size: clamp(28px, 5vw, 44px); font-weight: 700; letter-spacing: -.02em; line-height: 1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  font: 500 13px "Poppins", sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: var(--light); border: 1px solid var(--light); border-radius: var(--r3);
  padding: 10px 20px; cursor: pointer; box-shadow: -8px 14px 30px rgba(10, 15, 28, .5);
  transition: transform .4s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost, .pill { background: rgba(10, 15, 28, .4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn.ghost { color: var(--light); border-color: var(--edge); box-shadow: none; }
.btn.small { min-height: 36px; padding: 6px 14px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

input, select, textarea {
  width: 100%; font: 500 15px "Poppins", sans-serif; color: var(--light);
  background: rgba(10, 15, 28, .55); border: 1px solid var(--edge); border-radius: var(--r1);
  padding: 11px 14px; min-height: 44px;
}
textarea { min-height: 88px; resize: vertical; }
select option { background: var(--ground); }
input[type=checkbox], input[type=radio] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.field { display: grid; gap: 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--light); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--r3);
  border: 1px solid var(--edge); background: rgba(10, 15, 28, .45); text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--light);
}
.chip input:checked + span { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 18px rgba(143, 227, 255, .25); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.pill {
  display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r3); border: 1px solid var(--edge); color: var(--dim); white-space: nowrap;
}
.pill.live, .pill.approved, .pill.paid { color: var(--accent); border-color: rgba(143, 227, 255, .45); }
.pill.review, .pill.pending, .pill.requested { color: var(--light); border-color: rgba(236, 233, 226, .4); }
.pill.rejected, .pill.cancelled { color: var(--warn); border-color: rgba(255, 138, 128, .4); }

.ring { width: 56px; height: 56px; transform: rotate(-90deg); flex: none; }
.ring .track { fill: none; stroke: rgba(236, 233, 226, .14); stroke-width: 3; }
.ring .done { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 1.2s var(--ease); }

.bar { height: 6px; border-radius: var(--r3); background: rgba(236, 233, 226, .1); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r3); box-shadow: 0 0 12px rgba(143, 227, 255, .5); }

/* ---------- the public page ---------- */
.top { display: flex; justify-content: space-between; align-items: center; padding: 22px 16px; max-width: 1180px; margin: 0 auto; }
.mark { font-weight: 700; letter-spacing: .32em; font-size: 14px; text-decoration: none; }
.hero {
  max-width: 1180px; margin: 0 auto; padding: 8vh 16px 12vh; min-height: 86vh;
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px;
}
.hero h1 { font-size: clamp(48px, 8.4vw, 116px); line-height: .92; letter-spacing: -.035em; }
.hero p { margin-top: 26px; max-width: 34ch; font-size: 17px; color: var(--dim); }
.hero .cta { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.monolith {
  justify-self: center; width: min(250px, 60vw); aspect-ratio: 5 / 11; border-radius: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; padding: 26px 0;
}
.monolith .ring { width: 92px; height: 92px; }
.monolith .meta { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); text-align: center; }
.monolith .meta b { display: block; font-size: 30px; letter-spacing: -.02em; color: var(--light); text-transform: none; }
.reading .done { animation: read 3.2s var(--ease) .4s both; }
@keyframes read { from { stroke-dasharray: 0 100.5; opacity: 0; } 8% { opacity: 1; } to { stroke-dasharray: 72.4 100.5; } }

.band { max-width: 1180px; margin: 0 auto; padding: 0 16px 14vh; }
.band h2 { font-size: clamp(30px, 4.4vw, 52px); max-width: 18ch; letter-spacing: -.025em; }
.steps { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps .glass { padding: 28px; display: grid; gap: 12px; align-content: start; }
.steps .n { font-size: 12px; letter-spacing: .12em; color: var(--accent); }
.steps h3 { font-size: 24px; }
.steps p, .who p { color: var(--dim); }
.who { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid var(--edge); padding-top: 32px; }
.who h3 { font-size: 18px; margin-bottom: 8px; }
.foot { max-width: 1180px; margin: 0 auto; padding: 32px 16px 48px; color: var(--dim); font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- the sign-in page ---------- */
.door { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.door .glass { width: min(420px, 100%); padding: 32px 28px; display: grid; gap: 14px; }
.door h1 { font-size: 32px; margin-top: 12px; }
.door .links { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; flex-wrap: wrap; }
.err { color: var(--warn); min-height: 1.2em; font-size: 14px; }
/* The robot pulls the pane in from the right (robot.js); until it does, the pane waits off stage. */
.door { overflow-x: clip; }
.pull .door form { transform: translateX(120vw); }
canvas.bot { position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; }
@media (max-width: 759px) { .door { padding-top: 132px; } } /* a phone's robot stands on the pane's top edge */

/* ---------- the platform ---------- */
.appbar {
  position: sticky; top: 12px; z-index: 5; margin: 12px auto 0; max-width: 1180px; width: calc(100% - 24px);
  display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 20px; border-radius: var(--r3);
}
.appbar nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.appbar nav a { text-decoration: none; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding: 8px 12px; border-radius: var(--r3); white-space: nowrap; }
.appbar nav a[aria-current] { color: var(--light); background: rgba(236, 233, 226, .08); }
.appbar .who { margin: 0; border: 0; padding: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); }
main.view { max-width: 1180px; margin: 0 auto; padding: 36px 16px 80px; display: grid; gap: 22px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.head h1 { font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -.025em; }
.pane { padding: 24px; display: grid; gap: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.card { padding: 22px; display: grid; gap: 12px; text-decoration: none; color: inherit; transition: transform .5s var(--ease); }
a.card:hover { transform: translateY(-2px); }
.card .row, .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card h3 { font-size: 20px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.list { display: grid; gap: 10px; }
.item { padding: 16px 18px; display: grid; gap: 10px; border-radius: var(--r2); border: 1px solid var(--edge); background: rgba(10, 15, 28, .35); }
.item dl { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.item dt { color: var(--dim); }
.item dd { margin: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.q { padding: 18px; display: grid; gap: 12px; border-radius: var(--r2); border: 1px solid var(--edge); background: rgba(10, 15, 28, .35); }
/* Inner panes are glass too: the slot behind them is diffused, never seen as a line across a field. */
.q, .item { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.q .two { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.consent { border-color: rgba(143, 227, 255, .35); }
.notice { padding: 14px 18px; border-radius: var(--r2); border: 1px solid rgba(143, 227, 255, .35); color: var(--light); }
.notice.bad { border-color: rgba(255, 138, 128, .45); }
.empty { color: var(--dim); padding: 24px 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--edge); vertical-align: top; }
.scroll { /* a table is a pane of glass too */
  overflow-x: auto; padding: 8px 16px; border-radius: var(--r2); border: 1px solid var(--edge); background: rgba(10, 15, 28, .45);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.scroll tr:last-child td { border-bottom: 0; }
td:first-child { white-space: nowrap; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 860px) {
  :root { --slot-x: 5px; } /* in the gutter: on a phone the slot stands beside the type, never behind it */
  .hero { grid-template-columns: 1fr; padding-top: 4vh; min-height: 0; }
  .monolith { width: min(200px, 56vw); justify-self: end; margin-right: -12px; } /* in front of the slot */
  .steps, .who { grid-template-columns: 1fr; }
  .q .two, .pair { grid-template-columns: 1fr; }
  .appbar { border-radius: var(--r2); flex-wrap: wrap; padding: 10px 14px; }
  .appbar nav { order: 3; flex-basis: 100%; }
  .appbar .who { margin-left: auto; }
  .item dl { grid-template-columns: 1fr; }
}
/* Route change: the room under the bar goes out of focus and pulls back in, like a lens.
   A backdrop layer rather than a filter on the view, which would switch off the panes' own glass. */
.view.focus::after {
  content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none;
  animation: focus .5s cubic-bezier(.2, .7, .2, 1);
}
@keyframes focus {
  from { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  to { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}