/*
THESIS: A submission console, not a brochure. One rail holds the whole job; the page refuses the
stacked marketing cards, numbered eyebrows and mono costume of the previous build.
OWN-WORLD: 268px ink rail (#101b1a) against a #f6f7f6 workspace of white panels on 1px hairlines.
Signal green #12734a owns every primary action and the active step; lime #cef79e means done, nothing else.
One family, fixed px scale, tabular figures. No shadow except the primary button's contact and the drawer.
STORY: The author signs in, sees nine steps and how many are done, works down the rail, and the one green
button at the bottom turns live when the last dot fills.
FIRST VIEWPORT: rail left (brand, chapter, steps, progress meter, submit); workspace right under a sticky
header carrying chapter title, status and the screen's own action; content column 860px.
FORM: SaaS console shell, pinned by the user; progress on the left, scroll-linked.
*/

:root {
  /* rail */
  --rail: #101b1a;
  --rail-hover: rgba(255, 255, 255, 0.07);
  --rail-active: rgba(255, 255, 255, 0.13);
  --rail-line: rgba(255, 255, 255, 0.1);
  --rail-text: #cfd8d5;
  --rail-dim: #8b9a96;

  /* workspace */
  --bg: #f6f7f6;
  --panel: #ffffff;
  --sunk: #f1f3f1;
  --line: #e4e7e4;
  --line-2: #d3d8d4;
  --ink: #10201d;
  --body: #46524f;
  --dim: #616d67;

  /* signal */
  --green: #12734a;
  --green-hi: #0d5c3a;
  --green-soft: #e8f3ed;
  --green-line: #b8dac8;
  --lime: #cef79e;
  --amber: #8a5a06;
  --amber-soft: #fdf3e0;
  --amber-line: #e8cf9a;
  --red: #b3261e;
  --red-soft: #fceceb;
  --red-line: #efb9b5;

  --r: 10px;
  --r-lg: 14px;
  --r-xl: 22px;       /* the sign-in card, floated on the ink */
  --rail-w: 268px;
  --head-h: 68px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);   /* longer settle, for draw-ins and stuck shadows */
  --t: 160ms;
  --press: 0 1px 2px rgba(16, 32, 29, 0.16);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font: 400 15px/1.55 -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -0.017em; line-height: 1.2; }
h1 { font-size: 28px; letter-spacing: -0.022em; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: 0; }
small, .small { font-size: 13px; }
.dim { color: var(--dim); }
strong, b { font-weight: 600; color: var(--ink); }
a { color: inherit; text-underline-offset: 3px; }
a.link { color: var(--green); text-decoration: none; font-weight: 500; }
a.link:hover { text-decoration: underline; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
code, .mono { font-family: ui-monospace, 'SF Mono', 'Roboto Mono', monospace; font-size: 0.92em; }
svg.ico { width: 16px; height: 16px; flex: none; }
svg.chev { width: 17px; height: 17px; flex: none; }
.panel-head > svg.ico { width: 18px; height: 18px; color: var(--amber); }

/* ============ shell ============ */
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }
.work { min-width: 0; display: flex; flex-direction: column; }

.scrim { position: fixed; inset: 0; background: rgba(16, 27, 26, 0.5); z-index: 35; opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease); }
.scrim.on { opacity: 1; pointer-events: auto; }

.rail {
  position: sticky; top: 0; height: 100vh; z-index: 40;
  background: var(--rail); color: var(--rail-text);
  display: flex; flex-direction: column; border-right: 1px solid var(--rail-line);
}
.rail-head { padding: 18px 18px 16px; border-bottom: 1px solid var(--rail-line); }
.rail-sub { color: var(--rail-dim); font-size: 12.5px; line-height: 1.45; }
.rail-sub b { color: #fff; font-weight: 500; display: block; font-size: 13.5px; margin-bottom: 2px; }

.rail-scroll { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 8px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.rail-scroll::-webkit-scrollbar { width: 8px; }
.rail-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 8px; }
.rail-label { padding: 12px 10px 6px; color: var(--rail-dim); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.rail-nav { list-style: none; margin: 0; padding: 0; position: relative; }
.rail-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px;
  color: var(--rail-text); text-decoration: none; font-size: 13.5px; line-height: 1.35;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.rail-item:hover { background: var(--rail-hover); color: #fff; }
.rail-item.current { background: var(--rail-active); color: #fff; font-weight: 500; }
.rail-item .txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item .n { color: var(--rail-dim); font-size: 12px; flex: none; }
.rail-item.current .n { color: #cfd8d5; }
.rail-item svg.ico { opacity: 0.85; }

.step-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 1.5px solid rgba(255, 255, 255, 0.3); position: relative; background: var(--rail); transition: background var(--t) var(--ease), border-color var(--t) var(--ease); }
.step-dot.done { background: var(--lime); border-color: var(--lime); }
/* the tick is an SVG whose stroke is drawn symmetric about its own 10x10 box (bbox x 1..9, y 1.85..8.15,
   both centred on 5), placed with background-position: center. Centred by construction — the old
   rotated-border L could not be, because its visual centre is not its box centre and Chrome snaps borders. */
.step-dot.done::after { content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 4.85l2.3 2.3L8 2.85' fill='none' stroke='%2312201a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat; }
.step-dot.over { border-color: #e39a4e; background: #3e3725; }   /* amber at 22% over the rail, flattened */
/* The spine runs BEHIND the dots, never through them: every dot is opaque, painted the exact colour of
   the row it sits on, so it masks the line without reading as a disc. Flattened values of the row
   backgrounds over the rail: --rail-hover (7% white) and --rail-active (13% white). */
.rail-item:hover .step-dot:not(.done):not(.over) { background: #212b2a; }
.rail-item.current .step-dot:not(.done):not(.over) { background: #2f3938; }
/* the beacon: the step you are on right now pulses. A ring pings outward from the dot and fades,
   on a 1.8s cycle that is slow enough to sit in the periphery while you write. White, not lime:
   in the rail lime means done, and the current step usually is not. ::before, because ::after is
   the tick. Reduced motion: the ring collapses to nothing and the brighter border alone marks it. */
.rail-item.current .step-dot { border-color: rgba(255, 255, 255, 0.9); }
.rail-item.current .step-dot::before { content: ''; position: absolute; inset: -1.5px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7); pointer-events: none;
  animation: beacon 1.8s cubic-bezier(0.2, 0, 0.35, 1) infinite; }
.rail-item.current .step-dot.done::before { border-color: var(--lime); }   /* a finished step you scrolled back to pings in its own colour */
@keyframes beacon { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(2.3); opacity: 0; } }

.spine { position: absolute; left: 17px; top: 16px; bottom: 16px; width: 2px; background: rgba(255, 255, 255, 0.09); border-radius: 2px; pointer-events: none; }
.spine i { display: block; width: 100%; height: 100%; background: var(--lime); border-radius: 2px; transform: scaleY(0); transform-origin: top; transition: transform 300ms var(--ease); }

.rail-foot { padding: 14px; border-top: 1px solid var(--rail-line); }
.meter { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.meter .track { flex: 1 1 auto; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.13); overflow: hidden; }
.meter .track i { display: block; height: 100%; width: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform 340ms var(--ease); }
.meter .val { color: #fff; font-size: 12px; font-weight: 500; flex: none; }
.rail-user { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--rail-dim); font-size: 12.5px; }
.rail-user .who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rail-text); }
.rail-user a { color: var(--rail-dim); text-decoration: none; }
.rail-user a:hover { color: #fff; text-decoration: underline; }

/* ============ topbar ============ */
.topbar {
  position: sticky; top: 0; z-index: 30; min-height: var(--head-h);
  display: flex; align-items: center; gap: 14px; padding: 12px 32px;
  background: rgba(246, 247, 246, 0.85); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid transparent; transition: border-color var(--t) var(--ease);
}
.topbar.stuck { border-bottom-color: var(--line); }
.topbar h1 { font-size: 20px; letter-spacing: -0.018em; }
.topbar .crumb { color: var(--dim); font-size: 12.5px; margin-bottom: 2px; }
.topbar .title-wrap { flex: 1 1 auto; min-width: 0; }
.topbar h1, .topbar .crumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .burger { display: none; }

.page { padding: 24px 32px 96px; }
.col { max-width: 860px; }
.col-wide { max-width: 1180px; }

/* ============ panels ============ */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); min-height: 62px; }
.panel-head h2, .panel-head h3 { flex: 1 1 auto; min-width: 0; font-size: 17px; }
.panel-body { padding: 22px; }
.panel-body.flush { padding: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.split > *, .stack > *, .panel, .panel-body, .deflist li, .timeline li, .filekind { min-width: 0; }
.deflist li > span:last-child, .timeline li > span:last-child, .notice > div { overflow-wrap: anywhere; }
.side-sticky { position: sticky; top: calc(var(--head-h) + 18px); }
.stack > * + * { margin-top: 18px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.tightgap { gap: 6px; }
.between { justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

/* ============ buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1; letter-spacing: -0.006em;
  cursor: pointer; text-decoration: none;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform 90ms var(--ease);
}
.btn:hover { background: var(--sunk); }
.btn:active { transform: translateY(0.5px); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; box-shadow: var(--press); }
.btn-primary:hover { background: var(--green-hi); border-color: var(--green-hi); color: #fff; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; border-radius: 11px; }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--dim); }
.btn-ghost:hover { background: var(--sunk); color: var(--ink); }
.btn-danger { color: var(--red); border-color: var(--red-line); background: var(--red-soft); }
.btn-danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; box-shadow: none;
  background: var(--sunk); border-color: var(--line); color: var(--dim); }
.btn-block { width: 100%; }
.rail .btn { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #fff; }
.rail .btn:hover { background: rgba(255, 255, 255, 0.12); }
/* the last step completes: one ring expands off the button and fades. Fired by app.js only on the
   transition from "steps left" to none, never on page load. Lime, because in the rail lime means done. */
.rail .btn-block { position: relative; }
.rail .btn-block.live::after { content: ''; position: absolute; inset: -3px; border: 2px solid var(--lime); border-radius: inherit;
  pointer-events: none; animation: live 700ms var(--ease) forwards; }
@keyframes live { from { opacity: .9; transform: scale(.98); } to { opacity: 0; transform: scale(1.06); } }
.rail .btn-primary { background: var(--green); border-color: var(--green); }
.rail .btn-primary:hover { background: #158554; border-color: #158554; }

/* ============ badges ============ */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; border: 1px solid var(--line-2); color: var(--body); background: var(--panel);
  white-space: nowrap;
}
.badge-green { background: var(--green-soft); border-color: var(--green-line); color: #0c5334; }
.badge-amber { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
.badge-red { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.badge-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.badge-sm { height: 20px; padding: 0 8px; font-size: 11.5px; }   /* inside a line of text: never taller than the line */
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--line-2); }
.dot-green { background: var(--green); }
.dot-amber { background: #c07f10; }
.dot-red { background: var(--red); }
.dot-ink { background: var(--ink); }

/* ============ forms ============ */
.field { display: block; }
.field + .field { margin-top: 20px; }
.grid2 > .field, .grid3 > .field { margin-top: 0; }
.field-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }   /* center, not baseline: the counter's ring would drag its text 4px above the label */
.field-head label, .field-head .lbl { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.field-head .hint { color: var(--dim); font-size: 12.5px; }
.field-head .counter { margin-left: auto; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=date], textarea, select {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: -0.006em;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.row > input, .row > select { width: auto; }
select {
  height: 36px; padding: 0 34px 0 12px; font-size: 13.5px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369756f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
textarea { min-height: 200px; resize: vertical; line-height: 1.65; font-size: 15.5px; }
textarea.tall { min-height: 420px; }
input::placeholder, textarea::placeholder { color: #98a29e; }
/* Chrome paints autofill with an !important background on a square-cornered layer, so on a rounded
   field it bleeds past the corners as yellow-green wedges. An inset shadow is the only thing that
   overrides that background, and unlike Chrome's layer it respects border-radius. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 40px var(--panel) inset; }
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px var(--panel) inset, 0 0 0 3px rgba(18, 115, 74, .18); }
input:hover, textarea:hover, select:hover { border-color: #b9c1bc; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(18, 115, 74, 0.15); }
/* read-only still has to be readable: the author's own chapter, after submitting */
input[readonly], textarea[readonly] { background: var(--sunk); color: var(--body); border-color: var(--line); cursor: default; }
.field.over textarea, .field.over input { border-color: var(--red); }
.field.over textarea:focus, .field.over input:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14); }
.err { color: var(--red); font-size: 13px; margin-top: 7px; }
.err:empty { display: none; }

.counter { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12.5px; font-weight: 500; }
.counter svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.counter circle { fill: none; stroke-width: 2.4; }
.counter .track { stroke: var(--line); }
.counter .bar { stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset 380ms var(--ease), stroke var(--t) var(--ease); }
.counter.warn { color: var(--amber); } .counter.warn .bar { stroke: #c07f10; }
.counter.over { color: var(--red); } .counter.over .bar { stroke: var(--red); }

.check { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; cursor: pointer; font-size: 14.5px; color: var(--body); border-top: 1px solid var(--line); }
.check:first-of-type { border-top: 0; }
.check:hover { color: var(--ink); }
.check input {
  appearance: none; width: 20px; height: 20px; margin: 1px 0 0; flex: none; position: relative; cursor: pointer;
  border: 1.5px solid var(--line-2); border-radius: 6px; background: var(--panel);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform 90ms var(--ease);
}
.check input:checked { background: var(--green); border-color: var(--green); }
.check input:checked::after { content: ''; position: absolute; left: 6.5px; top: 2.5px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check input:active { transform: scale(0.92); }
.check input:disabled { opacity: 0.55; cursor: default; }

/* ============ dropzone + files ============ */
.drop {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1px dashed var(--line-2); border-radius: var(--r); padding: 14px 16px; background: var(--panel);
  cursor: pointer; color: var(--dim); font-size: 13.5px;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.drop:hover, .drop.over { border-color: var(--green); background: var(--green-soft); color: #0c5334; }
.drop.over { border-style: solid; }
.drop input[type=file] { display: none; }
.drop .plus { width: 30px; height: 30px; border-radius: 8px; background: var(--sunk); display: grid; place-items: center; flex: none; color: var(--ink); }
.drop:hover .plus, .drop.over .plus { background: #fff; }
.drop .t { flex: 1 1 auto; min-width: 0; }
.drop .t b { display: block; color: var(--ink); font-weight: 500; font-size: 14px; }
.filekind { padding: 18px 0; border-top: 1px solid var(--line); }
.filekind:first-child { border-top: 0; padding-top: 0; }
.filekind:last-child { padding-bottom: 0; }
.filekind-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.filekind-head .lbl { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.files { list-style: none; margin: 10px 0 0; padding: 0; }
.file { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); font-size: 13.5px; }
.file { transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
@starting-style { .file.fresh { opacity: 0; transform: translateY(-4px); } }   /* only rows added after load */
.file.out { opacity: 0; transform: translateY(-4px); }
.file + .file { margin-top: 7px; }
.file .ficon { width: 30px; height: 30px; border-radius: 7px; background: var(--sunk); display: grid; place-items: center; flex: none; color: var(--ink); font-size: 9.5px; font-weight: 600; }
.file .nm { flex: 1 1 60%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; font-weight: 500; }
.file .nm:hover { text-decoration: underline; }
.file .meta { color: var(--dim); font-size: 12.5px; white-space: nowrap; }
.progress { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 10px; display: none; opacity: 0;
  transition: opacity 160ms var(--ease), display 160ms allow-discrete; }   /* stays displayed while it fades; older browsers just cut */
.progress i { display: block; height: 100%; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 120ms linear; }
.progress.on { display: block; opacity: 1; }

/* ============ rows, tables ============ */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.searchwrap { position: relative; flex: 0 1 300px; min-width: 150px; }
.searchwrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--dim); pointer-events: none; }
.searchwrap input { height: 36px; padding: 0 34px 0 33px; font-size: 13.5px; width: 100%; }
.searchwrap .key { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: 500 11px/1 ui-monospace, 'SF Mono', 'Roboto Mono', monospace; color: var(--dim); background: var(--sunk);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 5px 2px; }
.searchwrap input:focus ~ .key { opacity: 0; }   /* the hint has done its job */
/* ============ section nodes (editor dashboard) ============ */
/* Each section is a tray with a white plate set into it: the head lives on the tray, the chapters
   sit on the plate. Depth comes from hairline rings and one diffuse shadow, never a hard drop. */
.node { background: var(--sunk); border-radius: 16px; padding: 6px;
  box-shadow: 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .7); }
.node-head { position: sticky; top: var(--head-h); z-index: 5; display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 12px; background: var(--sunk); border-radius: 12px 12px 0 0;
  transition: box-shadow 240ms var(--ease-soft); }
.node-head.stuck { box-shadow: 0 12px 18px -14px rgba(16, 32, 29, .35); }   /* only while pinned under the topbar */
.node-num { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--panel); color: var(--ink); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px var(--line), inset 0 1px 0 #fff, 0 1px 2px rgba(16, 32, 29, .06);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.node.complete .node-num { background: var(--green); color: #fff;
  box-shadow: 0 0 0 1px var(--green-hi), inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(16, 32, 29, .1); }
.node.attention .node-num { position: relative; }
.node.attention .node-num::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: #e39a4e; box-shadow: 0 0 0 2px var(--sunk); }
.node-head h2 { flex: 0 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.012em; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-core { background: var(--panel); border-radius: 11px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 32, 29, .04), 0 12px 28px -18px rgba(16, 32, 29, .2); }
.node-core .rows > li:first-child .rowlink { border-top: 0; }

/* the section's bar: draws in on first paint, and again when a node reveals on scroll */
.group-meter { flex: 1 1 80px; min-width: 48px; height: 6px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
.group-meter i { display: block; height: 100%; width: 100%; background: var(--green); border-radius: inherit;
  transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 640ms var(--ease-soft); }
@starting-style { .group-meter i { transform: scaleX(0); } }
.node.reveal:not(.in) .group-meter i { transform: scaleX(0); }
.group-count { flex: none; font-size: 12.5px; font-weight: 500; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.group-count b { font-size: 13px; font-weight: 700; color: var(--ink); }
.group-count em { font-style: normal; }
.rows { list-style: none; margin: 0; padding: 0; }
.rowlink {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 18px; gap: 16px; align-items: center;
  padding: 13px 22px; border-top: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: background var(--t) var(--ease);
}
.rowlink:hover { background: var(--sunk); }
.rowlink { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .rowlink::before { content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--green); transform: scaleY(0); transition: transform 180ms var(--ease-soft); }
  .rowlink:hover::before { transform: scaleY(1); }
}
.rowlink .chnum { color: var(--dim); font-size: 12.5px; font-weight: 500; }
.rowlink .ttl { font-weight: 500; color: var(--ink); font-size: 14.5px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowlink .sub { color: var(--dim); font-size: 12.5px; margin-top: 3px; min-height: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }   /* one line: .who shrinks instead of wrapping */
.rowlink .sub > * { flex: none; }                                     /* status, dot, separator, badges never shrink or wrap */
.rowlink .sub .who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* only the affiliation gives way; the chapter page has it in full */
/* three right-aligned columns, so words, files and Turnitin line up down the list like a table */
.rowlink .facts { display: grid; grid-template-columns: 5.6em 3.4em 7em; gap: 0 12px; text-align: right; color: var(--dim); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rowlink .facts > span:last-child { text-align: left; }                    /* a label with a value after it anchors left, so "Turnitin" stays put */
.rowlink .chev { color: var(--line-2); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.rowlink:hover .chev { color: var(--ink); transform: translateX(2px); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { padding: 18px 22px; border-left: 1px solid var(--line); text-decoration: none; color: inherit; display: block;
  transition: background var(--t) var(--ease); }
a.kpi:hover { background: var(--sunk); }
a.kpi:hover .k { color: var(--ink); }
.kpi.on { background: var(--green-soft); }
.kpi.on .k, .kpi.on .v { color: #0c5334; }
.kpi.hot .k { color: var(--amber); font-weight: 500; }
svg.kchev { width: 13px; height: 13px; vertical-align: -1px; }
.kpi:first-child { border-left: 0; }
.kpi .v { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.kpi .v .of { font-size: 15px; font-weight: 500; color: var(--dim); letter-spacing: 0; margin-left: 1px; }
.kpi .k { color: var(--dim); font-size: 12.5px; margin-top: 4px; }
.kpi.hot .v { color: var(--amber); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--dim); font-weight: 500; font-size: 12.5px; padding: 0 14px 9px 0; border-bottom: 1px solid var(--line); }
td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
tr:last-child td { border-bottom: 0; }

.jumps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jumps a {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink);
  text-decoration: none; font-size: 13.5px; font-weight: 500;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.jumps a:hover { border-color: var(--green); background: var(--green-soft); color: #0c5334; }
.jumps svg { width: 14px; height: 14px; opacity: 0.6; }

.deflist { list-style: none; margin: 0; padding: 0; }
.deflist li { display: flex; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; }
.deflist li:first-child { border-top: 0; padding-top: 0; }
.deflist .k { flex: none; width: 128px; color: var(--dim); font-size: 12.5px; padding-top: 1px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline .when { color: var(--dim); font-size: 12.5px; }

details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 500; font-size: 13.5px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ''; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--t) var(--ease); }
details[open] > summary::before { transform: rotate(45deg); }
details > summary:hover { text-decoration: underline; }

/* ============ notices ============ */
.notice { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); font-size: 14px; }
.notice .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.notice-amber { background: var(--amber-soft); border-color: var(--amber-line); color: #6f4805; }
.notice-amber .ic { color: #b8790c; }
.notice-green { background: var(--green-soft); border-color: var(--green-line); color: #0c5334; }
.notice-green .ic { color: var(--green); }
.notice-red { background: var(--red-soft); border-color: var(--red-line); color: #8f1e17; }
.notice-red .ic { color: var(--red); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80;
  max-width: min(680px, calc(100% - 32px)); background: var(--ink); color: #fff;
  padding: 13px 18px; border-radius: 11px; font-size: 14px; box-shadow: 0 14px 40px -12px rgba(16, 32, 29, 0.55);
  animation: toast 320ms var(--ease) backwards;   /* not 'both': a forwards fill would pin the end frame and block .out */
}
@keyframes toast { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* leaves by the edge it arrived from: same 12px, same curve */
.toast.out { opacity: 0; transform: translate(-50%, 12px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.toast .pw { background: var(--lime); color: #12201a; padding: 2px 7px; border-radius: 5px; font-family: ui-monospace, monospace; user-select: all; }

.empty { text-align: center; padding: 56px 22px; color: var(--dim); }
.empty svg { width: 34px; height: 34px; margin: 0 auto 14px; color: var(--line-2); display: block; }
.empty h2, .empty h3 { margin-bottom: 6px; font-size: 17px; }

/* ============ workspace sections ============ */
.sec { scroll-margin-top: calc(var(--head-h) + 18px); }
.sec + .sec { margin-top: 18px; }
.sec-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.sec-head h2 { font-size: 17px; flex: 1 1 auto; }
.notice-top { margin-bottom: 18px; }
.saved { min-width: 96px; text-align: right; }
.submit-actions { margin-top: 22px; }
.check + .field { margin-top: 20px; }
.panel-body > .files { margin-top: 0; }
.panel-body > p + p { margin-top: 16px; }
.deflist .v { flex: 1 1 auto; min-width: 0; }
.deflist details { margin-top: 6px; }
.deflist .prose { margin-top: 8px; white-space: pre-wrap; line-height: 1.65; max-width: 70ch; }
.sec.hit { animation: hit 1100ms var(--ease); }
@keyframes hit { 0% { box-shadow: 0 0 0 3px rgba(18, 115, 74, 0.22); } 100% { box-shadow: 0 0 0 0 rgba(18, 115, 74, 0); } }

.reveal { opacity: 0; transform: translateY(10px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 460ms var(--ease), transform 460ms var(--ease); }

/* ============ auth ============ */
/* One surface: no panel split. The footage runs behind the whole viewport and the sign-in card
   floats on it. --rail-dim is lifted here because the faint text now sits over moving footage
   rather than flat ink; measured, the console tone falls under 4.5:1 against the bright frames. */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 34%, 520px);
  background: var(--rail); position: relative; isolation: isolate;   /* no overflow:hidden — it makes .auth a scrollport and kills the card’s sticky */
  --rail-dim: #a9b6b2; }
.auth-brand {
  color: #fff; padding: 64px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; z-index: 1;
}
.auth-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .34; pointer-events: none; z-index: 0;
}
.auth::after {                /* one flat scrim: text and card now sit across the whole width */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 27, 26, .72) 0%, rgba(16, 27, 26, .52) 46%, rgba(16, 27, 26, .74) 100%);
}
.auth-brand h1 { color: #fff; font-size: 38px; letter-spacing: -0.028em; line-height: 1.14; max-width: 17ch; text-wrap: balance; }
.auth-sub { color: #dfe7e4; font-size: 18px; line-height: 1.4; margin-top: 12px; max-width: 30ch; letter-spacing: -0.012em; }
.auth-brand .lede { color: var(--rail-dim); margin-top: 18px; max-width: 44ch; font-size: 15.5px; }
/* editors: an author arriving from an emailed link needs to see who runs this */
.eds { margin-top: 34px; }
.eds-k { color: var(--rail-dim); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 14px; }
.eds-row { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; flex-wrap: wrap; }
.eds-row li { display: flex; align-items: center; gap: 11px; }
.eds-row img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 4px rgba(255, 255, 255, .04); }
.eds-row span { font-size: 12px; line-height: 1.35; color: var(--rail-dim); }
.eds-row i { font-style: normal; display: block; }
.eds-row em { display: none; }
.eds-row b { display: block; color: #fff; font-weight: 600; font-size: 13.5px; letter-spacing: -0.008em; }
.auth-brand .foot { color: var(--rail-dim); font-size: 12.5px; }
/* Full-height card, sticky to the viewport so it never drops below the fold on a short window.
   Its content sits at the top of the card, not centred in it. */
/* Glass, not opaque: the footage reads through it. .86 is the floor — below it the darkest video
   frames drag the small print under 4.5:1, since the card's own tint is all that stands between
   body text and a moving image. The blur is what keeps a busy frame from showing as noise. */
/* Light liquid glass, in three parts.
   1. The backdrop: blurred AND brightened, so the scene shows through lit instead of greying the
      dark type. Where the browser can render it (Chrome, Edge — see @supports below) the blur lives
      inside the #lens filter in login.html, which also bends and brightens the outer band so the rim
      refracts; Safari rejects url() in backdrop-filter and keeps this plain blur.
   2. The veil: the system's soft green at 80% on a ::before layer (the tint costs contrast, the
      extra five points of opacity buy it back), with a white spotlight falling from the top, a
      faint emerald orb top-right, and the specular rim highlights. It is MASKED thinner in the outer ~22px, which is how the refracting
      band gets to show — the text column, 44px in, sits on the full veil, so contrast is unchanged.
   3. The glint on ::after: a soft band of light crossing the glass every nine seconds, under the
      content. Contrast is measured against the darkest surface pixel in the text column. */
.auth-form { padding: 34px 44px 44px; isolation: isolate; background: none;
  border-radius: var(--r-xl); border: 0;
  -webkit-backdrop-filter: blur(26px) saturate(160%) brightness(1.32);
  backdrop-filter: blur(26px) saturate(160%) brightness(1.32);
  margin: 16px; align-self: start; position: sticky; top: 16px; z-index: 1;   /* above .auth::after, which is a later sibling */
  height: calc(100vh - 32px); overflow-y: auto;
  box-shadow: 0 0 0 1px rgba(16, 32, 29, .10), 0 30px 70px -30px rgba(0, 0, 0, .7);
  /* the material arrives: blur and scale settle together, rather than a plain fade */
  transition: opacity 620ms var(--ease-soft), transform 620ms var(--ease-soft),
    -webkit-backdrop-filter 620ms var(--ease-soft), backdrop-filter 620ms var(--ease-soft); }
@starting-style { .auth-form { opacity: 0; transform: scale(.985) translateY(8px);
  -webkit-backdrop-filter: blur(0px) saturate(100%) brightness(1); backdrop-filter: blur(0px) saturate(100%) brightness(1); } }
@supports (backdrop-filter: url("#lens")) {
  .auth-form { backdrop-filter: url(#lens) saturate(160%) brightness(1.32); }
  @starting-style { .auth-form { backdrop-filter: url(#lens) saturate(100%) brightness(1); } }
}
.auth-form::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(72% 40% at 50% 0%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 72%),   /* the spotlight */
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 34%),          /* light running down the face */
    radial-gradient(140% 90% at 100% 0%, rgba(18, 115, 74, .07), rgba(18, 115, 74, 0) 58%),    /* the emerald orb */
    rgba(236, 245, 240, .80);                                                                    /* --green-soft, thinned */
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .96),        /* specular rim: the top edge catches the light */
    inset 1px 0 0 rgba(255, 255, 255, .55),          /* sides, lit less */
    inset -1px 0 0 rgba(255, 255, 255, .40),
    inset 0 -1px 0 rgba(255, 255, 255, .30),         /* bottom, least */
    inset 0 0 0 1px rgba(255, 255, 255, .26);        /* the glass wall */
  -webkit-mask:
    linear-gradient(90deg, rgba(0, 0, 0, .34) 0, #000 22px, #000 calc(100% - 22px), rgba(0, 0, 0, .34) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .26) 0, #000 26px, #000 calc(100% - 22px), rgba(0, 0, 0, .34) 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, rgba(0, 0, 0, .34) 0, #000 22px, #000 calc(100% - 22px), rgba(0, 0, 0, .34) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .26) 0, #000 26px, #000 calc(100% - 22px), rgba(0, 0, 0, .34) 100%);
  mask-composite: intersect; }
.auth-form::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, 0) 58%) 0 0 / 260% 100% no-repeat;
  animation: glint 9s var(--ease-soft) 1.2s infinite; }
@keyframes glint { 0% { background-position: 130% 0; } 38% { background-position: -30% 0; } 100% { background-position: -30% 0; } }
.auth-form .inner { position: relative; z-index: 1; }
@media (prefers-reduced-transparency: reduce) {
  .auth-form { background: #eef5f1; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .auth-form::before, .auth-form::after { display: none; }
}
.auth-form .dim { color: var(--body); }   /* --dim is tuned for solid white, not for glass */
/* autofilled fields: an opaque white well hides Chrome's own autofill colour (see the global rule) */
.auth-form input:-webkit-autofill, .auth-form input:-webkit-autofill:hover, .auth-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink); -webkit-box-shadow: 0 0 0 40px #fff inset; }
.auth-form input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #fff inset, 0 0 0 3px rgba(18, 115, 74, .18); }
.auth-form .inner { width: 100%; max-width: 372px; margin: 0 auto; }

/* the greeting: the one green thing on the card. --green-hi is the base, not --green: on glass the
   backdrop is ~#ddd at worst, where --green measures 4.16:1 and --green-hi 5.56:1.
   Below the greeting: 8px heading-to-subtitle, 32px into the fields, 24/20 out to the actions. */
.auth-hi { color: var(--green-hi); font-size: 21px; font-weight: 700; letter-spacing: -0.015em;
  /* the greeting is the card's header line; the sign-in group drops away from it so the card
     doesn't read as top-loaded. vh-based so a short window closes the gap instead of pushing
     the button out of reach. */
  line-height: 1.3; margin: 0 0 clamp(30px, 6vh, 58px); text-wrap: balance; }
.auth-hi span { display: inline-block;
  background: linear-gradient(100deg, var(--green-hi) 0 42%, var(--green) 50%, var(--green-hi) 58% 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-form h2 { font-size: 26px; letter-spacing: -0.022em; margin: 0; }
.auth-form .sub { margin: 8px 0 32px; }
/* The field block. Inputs and the button share one geometry — 44px tall, 11px radius — so the
   three stacked controls read as one column. And ONE focus ring, not three: the global
   :focus-visible outline is meant for buttons and links, but an input already has its own ring,
   so it stacked a second circle at a different radius (12px vs 10px) and the two disagreed at
   the corners. Translucent fill seats the field into the glass; a lit top edge on each. */
.auth-form input[type=text], .auth-form input[type=password] {
  height: 44px; padding: 0 14px; border-radius: 11px;
  background: rgba(255, 255, 255, .70); border-color: rgba(16, 32, 29, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.auth-form input:hover { background: rgba(255, 255, 255, .78); border-color: rgba(16, 32, 29, .26); }
.auth-form input:focus { background: #fff; border-color: var(--green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 3px rgba(18, 115, 74, .18); }
.auth-form input:focus-visible { outline: none; }   /* the green border + halo IS the indicator */
/* the placeholder carries the ID format, so it has to be readable: --dim is 4.8:1 on the well */
.auth-form input::placeholder { color: var(--dim); }
.auth-error { margin: 0 0 16px; }
.auth-submit { margin-top: 24px; }
.auth-help { margin-top: 20px; }

/* ===== TEMPORARY: test-access strip. Delete this block with the markup in login.html. =====
   Deliberately styled as scaffolding, not as part of the design: a dashed rule and the amber
   warning tone, so nobody mistakes it for a feature that is meant to ship. */
.demo { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.demo-k { display: flex; align-items: center; gap: 7px; color: var(--amber);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.demo-k .ic { width: 14px; height: 14px; }
.demo-err { color: var(--red); font-size: 12.5px; margin-bottom: 10px; }
.demo-row { display: flex; gap: 10px; }
.demo-row .btn { flex: 1 1 0; min-width: 0; border-style: dashed; border-color: var(--amber-line);
  background: var(--amber-soft); color: #6f4805; }
.demo-row .btn:hover { background: #fbe9c8; border-color: #d9b978; }
/* ===== end temporary block ===== */
.auth-hi, .auth-form h2, .auth-form .sub, .auth-form .field, .auth-submit {
  opacity: 0; transform: translateY(8px); animation: auth-in 320ms cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.auth-form h2 { animation-delay: 70ms; }
.auth-form .sub { animation-delay: 130ms; }
.auth-form .field:nth-of-type(1) { animation-delay: 190ms; }
.auth-form .field:nth-of-type(2) { animation-delay: 240ms; }
.auth-submit { animation-delay: 300ms; }
@keyframes auth-sheen { from { background-position: 100% 0; } to { background-position: -60% 0; } }
.auth-hi span { animation: auth-sheen 2.6s cubic-bezier(0.4, 0, 0.2, 1) 700ms 2 both; }


.receipt-head { display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.receipt-head .deflist { flex: 1 1 340px; min-width: 0; }

/* sign-in: words on the left, book on the right, countdown across the bottom */
.auth-top { flex: 1 1 auto; align-content: start; display: grid; grid-template-columns: minmax(300px, 1fr) auto; gap: 44px; align-items: center; }
.auth-words { min-width: 0; max-width: 560px; }

.cdown { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rail-line); }
.cdown-k { color: var(--rail-dim); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 14px; }
.cdown-row { display: flex; align-items: flex-start; gap: clamp(8px, 1.6vw, 20px); }
.cdown-unit { display: grid; justify-items: center; }
.cdown-unit b { font-size: clamp(34px, 4vw, 54px); font-weight: 600; color: #fff; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cdown-unit i { font-style: normal; margin-top: 9px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rail-dim); }
.cdown-sep { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1; color: rgba(255, 255, 255, .22); }
.cdown-past { color: #f0c98a; font-size: 15px; }

@keyframes auth-in { to { opacity: 1; transform: none; } }
.auth-words > * { opacity: 0; transform: translateY(8px); animation: auth-in 320ms cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.auth-words > *:nth-child(2) { animation-delay: 60ms; }
.auth-words > *:nth-child(3) { animation-delay: 120ms; }
.auth-words > *:nth-child(4) { animation-delay: 180ms; }
.auth-words > *:nth-child(5) { animation-delay: 240ms; }

/* ============ responsive ============ */
@media (max-width: 1365px) {          /* measured: below 1366 the book spills past the panel padding */
  .auth-top { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; }
  .side-sticky { position: static; }
}
@media (max-width: 940px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed; inset: 0 auto 0 0; width: 284px; transform: translateX(-101%);
    transition: transform 240ms var(--ease); box-shadow: 0 0 60px rgba(0, 0, 0, 0.35);
  }
  .rail.open { transform: none; }
  .topbar .burger { display: inline-flex; }
  .topbar { padding: 10px 16px; }
  .page { padding: 18px 16px 80px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: 28px 22px; }
  /* stacked: the card has nothing to float on, and sticky would pin it over the brand panel */
  .auth-form { margin: 0; border-radius: 0; position: static; height: auto; box-shadow: none;
    padding: 40px 22px; background: #eef5f1; border: 0;   /* the glass, solid, since there is no blur here */
    isolation: auto; }
  .auth-form::before, .auth-form::after { display: none; }
  .auth-form { 
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .auth-brand h1 { max-width: none; }
  .auth-sub { font-size: 16px; margin-top: 10px; }
  /* the scrim is uniform now, so the poster can stay — it was the old horizontal one that left
     full-width mobile text at 2.6:1. bg.js still refuses the video itself below 1024. */
  .auth-bg { opacity: .28; }
  /* the countdown must not push the sign-in button off a phone screen */
  .cdown { margin-top: 24px; padding-top: 16px; }
  .cdown-k { margin-bottom: 10px; }
  .cdown-unit b { font-size: 30px; }
  .cdown-unit i { margin-top: 5px; font-size: 9.5px; }
  .cdown-sep { font-size: 20px; }
  .auth-brand h1 { font-size: 30px; }
  .eds { margin-top: 26px; }
  .eds-row { gap: 18px; }
  .eds-row img { width: 40px; height: 40px; }
  .eds-row i, .eds-row b { display: none; }        /* surnames only, so all three keep one row */
  .eds-row em { display: block; font-style: normal; font-weight: 600; color: #fff; font-size: 11.5px; }
  .eds-row li { flex-direction: column; align-items: center; gap: 7px; text-align: center; }
}
@media (max-width: 640px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .rowlink { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; padding: 12px 16px; }
  .rowlink .sub { flex-wrap: wrap; }   /* phones: let the line wrap, there is no room to shrink into */
  .rowlink .sub .who { white-space: normal; }
  .rowlink .facts { display: none; }
  .panel-head, .sec-head, .panel-body { padding-left: 16px; padding-right: 16px; }
  .node { padding: 4px; border-radius: 13px; }
  .node-head { position: static; flex-wrap: wrap; gap: 10px 12px; padding: 10px 10px 10px; }
  .node-head h2 { white-space: normal; flex: 1 1 calc(100% - 48px); }
  .group-meter { flex: 1 1 120px; }
  .panel-head, .sec-head { flex-wrap: wrap; gap: 4px 10px; }
  .panel-head > .dim, .sec-head > .dim { flex: 1 0 100%; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
  .deflist li { flex-direction: column; gap: 3px; }
  .deflist .k { width: auto; }
  .file { flex-wrap: wrap; }
  .file .nm { flex: 1 1 100%; }
  .file .meta { white-space: normal; }
  .auth-form { padding: 32px 20px; }
  .topbar .badge, .topbar .crumb { display: none; }   /* the page already states status; the title needs the room */
  .topbar h1 { font-size: 17px; }
  .topbar { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

@media print {
  .rail, .topbar, .no-print, .toast, .scrim { display: none !important; }
  .app { display: block; }
  body { background: #fff; font-size: 11pt; }
  .panel { border-color: #bbb; break-inside: avoid; }
  .page { padding: 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* /privacy: a plain reading column, the one page that stands outside both shells */
.legal { max-width: 680px; margin: 0 auto; padding: 56px 24px 80px; }
.legal h1 { font-size: 30px; letter-spacing: -0.025em; margin: 6px 0 12px; }
.legal h2 { font-size: 17px; margin: 30px 0 8px; }
.legal p, .legal li { font-size: 15px; line-height: 1.6; color: var(--body); }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--green); }