/* CVScriba app screens.
   Style: achromatic ledger, no-sidebar shell (.taste-skill/app/direction.json), brand kept:
   the chrome is ink and stone, the one hue (jungle green) goes on the product's own data
   (matched skills, "ready", the free-plan meter) and on the one primary action.
   Same tokens as the home page's interface fragments (`.ui` in home.html). */

:root {
  --ground: #f1e7d1;        /* cream, the home page's ground */
  --surface: #fdfaf3;       /* panels and cards: warm white on the cream, never cream on cream */
  --white: #ffffff;         /* fields and paper */
  --putty: #e9dfc9;         /* the desk the CV lies on */
  --active: #e8ddc6;        /* nav pill, selected segment */
  --border: #e2d7bf;
  --rule: #ece3d0;
  --control: #cbbd9e;

  --ink: #161616;
  --muted: #5f5a53;         /* 6.3:1 on --surface */
  --faint: #67614f;         /* placeholders, 5:1 on the cream */

  --primary: #0f2a1c;       /* the brand's deepest green, reads near-black */
  --primary-hover: #1a4731;
  --accent: #1a4731;
  --on-primary: #f4ecd8;

  --ok-bg: #eef3ee;  --ok-line: #cfdccf;  --ok-ink: #173d2a;
  --warn-bg: #fbf3e2; --warn-line: #ecd9ae; --warn-ink: #6b4a10;
  --err-bg: #fbeeeb; --err-line: #efcdc5; --err-ink: #8a2416;
  --negative: #b3261e;

  --radius: 8px;
  --radius-control: 6px;
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --m: 24px;
  --col: 1160px;
}

/* ---------- reset, scoped to app pages ---------- */
body { margin: 0; } /* every page, the home page included: no browser frame around the first screen */
.app *, .app *::before, .app *::after { box-sizing: border-box; }
body.app {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
:where(.app) :is(h1, h2, h3, h4, p, figure, dl, dd, blockquote) { margin: 0; }
:where(.app) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.app) a { color: inherit; text-decoration: none; }
:where(.app) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.app) img { display: block; max-width: 100%; }
.app ::selection { background: var(--accent); color: var(--on-primary); }
.app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.app [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 30; background: var(--ground); border-bottom: 1px solid transparent; transition: border-color 160ms ease; }
.bar.is-scrolled { border-bottom-color: var(--border); }
.bar-in { max-width: var(--col); margin: 0 auto; padding: 0 var(--m); height: 60px; display: flex; align-items: center; gap: 28px; }
.mark { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.mark img { width: 26px; height: 26px; border-radius: 6px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--radius-control); font-size: 15px; font-weight: 500; color: var(--muted); transition: color 160ms ease, background-color 160ms ease; }
.nav a[aria-current="page"] { color: var(--ink); background: var(--active); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--ink); } }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.plan-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--radius-control); font-size: 14px; font-weight: 500; color: var(--ink); border: 1px solid var(--border); background: var(--surface); white-space: nowrap; transition: border-color 160ms ease; }
.plan-chip b { font-weight: 600; }
.plan-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (hover: hover) and (pointer: fine) { button.plan-chip:hover { border-color: var(--control); } }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #dfe7e1; color: var(--accent); font-size: 14px; font-weight: 600; flex: none; }
.avatar-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 4px; border-radius: 999px; }
.avatar-btn svg { width: 14px; height: 14px; color: var(--muted); }

.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 248px; padding: 6px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(22, 22, 22, 0.12); z-index: 40;
  transform-origin: top right; transition: opacity 140ms var(--ease-out), transform 160ms var(--ease-out); }
.menu[hidden] { display: block !important; opacity: 0; transform: scale(0.97) translateY(-4px); pointer-events: none; visibility: hidden; }
.menu-who { padding: 10px 10px 8px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.menu-who p { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-who small { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu a, .menu button { display: flex; width: 100%; align-items: center; min-height: 40px; padding: 0 10px; border-radius: var(--radius-control); font-size: 15px; text-align: left; }
@media (hover: hover) and (pointer: fine) { .menu a:hover, .menu button:hover { background: var(--ground); } }
.menu .only-phone { display: none; }

/* ---------- canvas ---------- */
.main { width: 100%; max-width: var(--col); margin: 0 auto; padding: 28px var(--m) 96px; flex: 1; }
.main-narrow { max-width: 820px; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--muted); margin-bottom: 14px; min-height: 32px; }
.back svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .back:hover { color: var(--ink); } }
.title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.title-row h1, .h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.title-row .sub, .sub { margin-top: 6px; font-size: 16px; color: var(--muted); max-width: 62ch; }
.title-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--radius-control); border: 1px solid transparent;
  font-family: var(--font); font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.btn:active:not([disabled]) { transform: scale(0.97); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-secondary { background: var(--white); color: var(--ink); border-color: var(--control); }
.btn-quiet { background: transparent; color: var(--ink); padding: 0 10px; }
.btn-danger { background: transparent; color: var(--negative); padding: 0 10px; }
.btn-lg { height: 50px; padding: 0 22px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; background: #e6e2db; color: #5f5a53; border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not([disabled]) { background: var(--primary-hover); }
  .btn-secondary:hover:not([disabled]) { border-color: #a9a196; }
  .btn-quiet:hover, .btn-danger:hover { background: var(--active); }
}

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.panel + .panel { margin-top: 16px; }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-h h2, .h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.panel-h .meta { font-size: 14px; color: var(--muted); white-space: nowrap; }
.panel p + p { margin-top: 8px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 15px; }
.kv dt { color: var(--muted); }

/* ---------- fields ---------- */
.field { display: grid; gap: 8px; }
.field + .field { margin-top: 18px; }
.label { font-size: 15px; font-weight: 500; }
.hint { font-size: 14px; color: var(--muted); }
.input, .textarea, .select {
  width: 100%; background: var(--white); color: var(--ink); border: 1px solid var(--control); border-radius: var(--radius);
  font-family: var(--font); font-size: 16px; line-height: 1.45; padding: 10px 12px; min-height: 44px;
  transition: border-color 160ms ease, box-shadow 160ms ease; }
.textarea { resize: vertical; min-height: 120px; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 71, 49, 0.16); }
.select { appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235f5a53'%3E%3Cpath d='M5.2 7.2a.75.75 0 011.06 0L10 10.94l3.74-3.74a.75.75 0 111.06 1.06l-4.27 4.27a.75.75 0 01-1.06 0L5.2 8.26a.75.75 0 010-1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
.select-sm { min-height: 36px; padding: 6px 34px 6px 10px; font-size: 15px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 10px 0; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.check b { display: block; font-size: 15px; font-weight: 500; }
.check span { display: block; font-size: 14px; color: var(--muted); }

/* ---------- notices and pills ---------- */
.notice { border: 1px solid var(--border); background: var(--white); border-radius: var(--radius); padding: 12px 14px; font-size: 15px; }
.notice b { font-weight: 600; }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.notice-err { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); }

.pill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; flex: none; white-space: nowrap;
  font-size: 13px; font-weight: 500; background: var(--active); color: var(--ink); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55; }
.pill[data-status="draft"] { background: #efece7; color: var(--muted); }
.pill[data-status="applied"] { background: #e8ebe9; color: #22302a; }
.pill[data-status="screened"], .pill[data-status="interviewing"] { background: var(--ok-bg); color: var(--ok-ink); }
.pill[data-status="offer"], .pill[data-status="accepted"] { background: var(--accent); color: var(--on-primary); }
.pill[data-status="offer"]::before, .pill[data-status="accepted"]::before { opacity: 1; }
.pill[data-status="rejected"], .pill[data-status="ghosted"], .pill[data-status="withdrawn"] { background: #efece7; color: #6f6a62; }
.status-select { border-radius: 999px; min-height: 36px; padding: 6px 34px 6px 14px; font-size: 15px; font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }
.chips li.is-cut { border-color: var(--border); background: #f1eee9; color: var(--muted); text-decoration: line-through; }
.chips li.is-plain { border-color: var(--border); background: var(--white); color: var(--ink); }

/* ---------- lists of applications ---------- */
.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.list-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 6px; }
.list-h h2 { font-size: 17px; font-weight: 600; }
.list-h .meta { font-size: 14px; color: var(--muted); }
.row { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1.5fr) minmax(0, 1fr) 148px 136px; gap: 16px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--rule); }
.list-h + .row { border-top: 0; }
.row-thumb { width: 46px; height: 60px; border-radius: 3px; border: 1px solid var(--border); background: var(--white); object-fit: cover; object-position: top center; overflow: hidden; }
.row-thumb.is-empty { display: grid; place-items: center; color: var(--faint); }
.row-thumb.is-empty svg { width: 18px; height: 18px; }
.row-main { min-width: 0; }
.row-title { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.row-sub { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-when { font-size: 14px; color: var(--muted); text-align: right; }
.row-files { display: flex; justify-content: flex-end; gap: 4px; position: relative; z-index: 1; }
.row-files a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: var(--radius-control); font-size: 14px; font-weight: 500; border: 1px solid var(--border); background: var(--white); }
.row-files a svg { width: 14px; height: 14px; color: var(--muted); }
.row-files a.row-prep { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.row-files a[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .row:hover { background: #f6f4f0; }
  .row-files a:hover { border-color: var(--control); }
}
.row-status { display: flex; justify-content: flex-start; }
.row.is-running .row-sub { color: var(--accent); }

.empty { border: 1px dashed var(--control); border-radius: var(--radius); padding: 28px 24px; background: var(--white); }
.empty h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.empty p { margin-top: 6px; color: var(--muted); max-width: 56ch; }

/* the co-op season, at the top of the applications */
.season { margin-bottom: 16px; }
.season-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; margin-top: 18px; align-items: start; }
.stat-n { font-size: 15px; color: var(--muted); line-height: 1.1; }
.stat-n b { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); margin-right: 2px; }
.stat-l { margin-top: 4px; font-size: 14px; color: var(--muted); }
.stat .meter { margin-top: 10px; }
.season-hint { margin-top: 12px; font-size: 14px; color: var(--muted); }
.season-g { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 15px; }
p.season-g { display: block; }

/* a status changed from the list, in one click */
.row-status { position: relative; z-index: 1; }
.st-form { display: flex; align-items: center; min-width: 0; }
.st-select { appearance: none; max-width: 100%; height: 30px; padding: 0 28px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--ink); background-color: var(--active);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235f5a53'%3E%3Cpath d='M5.2 7.2a.75.75 0 011.06 0L10 10.94l3.74-3.74a.75.75 0 111.06 1.06l-4.27 4.27a.75.75 0 01-1.06 0L5.2 8.26a.75.75 0 010-1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; transition: background-color 160ms ease, color 160ms ease; }
.st-select[data-status="draft"] { background-color: #efece7; color: var(--muted); }
.st-select[data-status="applied"] { background-color: #e8ebe9; color: #22302a; }
.st-select[data-status="screened"], .st-select[data-status="interviewing"] { background-color: var(--ok-bg); color: var(--ok-ink); }
.st-select[data-status="offer"], .st-select[data-status="accepted"] { background-color: var(--accent); color: var(--on-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23f4ecd8'%3E%3Cpath d='M5.2 7.2a.75.75 0 011.06 0L10 10.94l3.74-3.74a.75.75 0 111.06 1.06l-4.27 4.27a.75.75 0 01-1.06 0L5.2 8.26a.75.75 0 010-1.06z'/%3E%3C/svg%3E"); }
.st-select[data-status="rejected"], .st-select[data-status="ghosted"], .st-select[data-status="withdrawn"] { background-color: #efece7; color: #6f6a62; }
.st-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-mark { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; background: var(--primary); color: var(--on-primary); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .btn-mark:hover { background: var(--primary-hover); } }
.row.is-saving .st-form { opacity: 0.6; }

/* interview prep, under the documents */
.prep { margin-top: 40px; scroll-margin-top: 80px; }
.prep-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.prep-grid .panel + .panel { margin-top: 0; }
.prep-qs { grid-row: span 3; }
.prep-text { margin-top: 10px; font-size: 16px; line-height: 1.6; }
.prep-mail { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--border); font-size: 15px; line-height: 1.55; white-space: pre-line; }
.prep-mail b { display: block; font-weight: 600; }
.qa { border-top: 1px solid var(--rule); padding: 12px 0; }
.qa:first-of-type { border-top: 0; padding-top: 2px; }
.qa summary { cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.4; list-style-position: outside; }
.qa .hint { margin-top: 6px; }
.qa-a { margin-top: 8px; display: grid; gap: 6px; font-size: 15px; line-height: 1.55; }
.qa-a li { position: relative; padding-left: 16px; }
.qa-a li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.prep-empty { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; }
.prep-list { display: grid; gap: 8px; font-size: 15px; }
.prep-list li { position: relative; padding-left: 22px; }
.prep-list li::before { content: ""; position: absolute; left: 2px; top: 0.35em; width: 9px; height: 5px; border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent); transform: rotate(-45deg); }
.prep-go { display: grid; gap: 10px; justify-items: start; max-width: 300px; }
.btn-sm { height: 32px; padding: 0 10px; font-size: 14px; }

/* after the free application: the next step */
.next-step { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 16px; border-color: var(--ok-line); background: var(--ok-bg); }
.next-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* invite a friend */
.invite-row { display: flex; gap: 8px; margin-top: 12px; }
.quota-invite { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--rule); }
.quota-invite .hint b { color: var(--ink); font-weight: 600; }
.invite-row .input { flex: 1; min-width: 0; font-size: 15px; background: var(--white); }

/* settings */
.settings { display: grid; gap: 16px; }
.settings .panel { padding: 22px; }
.settings .panel + .panel { margin-top: 0; }
.set-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 18px; }
.set-grid .field + .field { margin-top: 0; }
.set-grid .wide { grid-column: 1 / -1; }
.set-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
/* before you stop: an optional reason, and the answer that goes with it */
.exit-reasons { margin-top: 12px; display: grid; gap: 8px; border: 0; padding: 0; }
.exit-reason { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--white); cursor: pointer; }
.exit-reason input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.exit-reason:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.exit-answer { margin-top: 14px; }
.plan-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.plan-now b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }

/* free plan meter */
.quota { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; gap: 14px 24px; align-items: center; margin-bottom: 16px; }
.quota-meter .hint { margin-top: 6px; font-size: 13px; white-space: nowrap; }
.meter { height: 6px; border-radius: 999px; background: var(--active); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* ---------- new application ---------- */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.flow-main > .panel + .panel { margin-top: 16px; }
.step-h { display: flex; gap: 12px; align-items: baseline; margin-bottom: 4px; }
.step-h .n { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; transform: translateY(-1px); }
.step-h.is-done .n { background: var(--accent); }
.step-h h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.step-body { margin-left: 38px; }
.step-body > * + * { margin-top: 14px; }
.posting-box { position: relative; }
.posting-status { display: flex; align-items: center; gap: 10px; min-height: 24px; font-size: 15px; color: var(--muted); }
.read-card { border: 1px solid var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); border-radius: var(--radius); padding: 12px 14px; }
.read-card b { font-weight: 600; }
.read-card details { margin-top: 6px; }
.read-card summary { cursor: pointer; font-size: 14px; font-weight: 500; width: fit-content; }
.read-card pre { margin: 8px 0 0; max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--white); border-radius: 6px; padding: 10px 12px; border: 1px solid var(--border); }

.saved-cv { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.saved-cv .doc { width: 40px; height: 52px; border: 1px solid var(--border); border-radius: 3px; display: grid; place-items: center; color: var(--muted); background: #fbfaf7; }
.saved-cv .doc svg { width: 18px; height: 18px; }
.saved-cv p { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-cv small { display: block; font-size: 14px; color: var(--muted); }

.drop { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 26px 20px; border: 1.5px dashed var(--control); border-radius: var(--radius); background: var(--white); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.drop svg { width: 22px; height: 22px; color: var(--muted); margin-bottom: 4px; }
.drop b { font-size: 16px; font-weight: 600; }
.drop span { font-size: 14px; color: var(--muted); }
.drop.is-over { border-color: var(--accent); background: #f3f7f4; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-ink); font-size: 15px; }
.file-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disclosure > summary { cursor: pointer; font-size: 15px; font-weight: 500; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform 160ms var(--ease-out); margin-right: 4px; }
.disclosure[open] > summary::before { transform: rotate(45deg); }

.aside-card { position: sticky; top: 84px; }
.aside-card .panel + .panel { margin-top: 12px; }
.aside-list li { display: flex; gap: 10px; font-size: 15px; padding: 6px 0; }
.aside-list li::before { content: ""; flex: none; width: 8px; height: 5px; margin-top: 8px; border-left: 1.7px solid var(--accent); border-bottom: 1.7px solid var(--accent); transform: rotate(-45deg); }

.submit-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.submit-row .hint { flex: 1; min-width: 200px; }

/* run progress */
.run { max-width: 720px; }
.run-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.run-h h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.run-h .num { font-size: 15px; color: var(--muted); }
.run-bar { margin-top: 14px; height: 6px; border-radius: 999px; background: var(--active); overflow: hidden; }
.run-bar span { display: block; height: 100%; width: 4%; background: var(--accent); border-radius: inherit; transition: width 600ms var(--ease-out); }
.steps { margin-top: 14px; }
.steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 46px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 16px; }
.steps li:first-child { border-top: 0; }
.steps .mk { width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid var(--control); position: relative; }
.steps .info { font-size: 14px; color: var(--muted); text-align: right; }
.steps li.is-running { color: var(--ink); font-weight: 500; }
.steps li.is-running .mk { border-color: var(--rule); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
.steps li.is-done { color: var(--ink); }
.steps li.is-done .mk { background: var(--accent); border-color: var(--accent); }
.steps li.is-done .mk::after { content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 4px; border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(-45deg); }
.steps li.is-error { color: var(--negative); }
.steps li.is-error .mk { border-color: var(--negative); background: var(--err-bg); }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--accent); animation: spin 0.9s linear infinite; flex: none; }

/* ---------- result page ---------- */
.result { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.doc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
/* on one column the checklist sits a screen below the download: point to it before the download */
.check-jump { margin: 0 0 12px; font-size: 15px; }
@media (min-width: 1041px) { .check-jump { display: none; } }
.seg { display: inline-grid; grid-auto-flow: column; gap: 3px; padding: 3px; background: var(--active); border-radius: 8px; }
.seg button { min-height: 36px; padding: 0 14px; border-radius: 6px; font-size: 15px; font-weight: 500; color: var(--muted); border: 1px solid transparent; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.seg button:active { transform: scale(0.97); }
.seg button[aria-selected="true"] { background: var(--white); color: var(--ink); border-color: var(--border); }
.tray { background: var(--putty); border-radius: var(--radius); padding: 28px; }
.paper { background: var(--white); box-shadow: 0 1px 2px rgba(22, 22, 22, 0.06); width: 100%; max-width: 760px; margin: 0 auto; }
.paper + .paper { margin-top: 20px; }
.paper img { width: 100%; height: auto; }
.paper iframe { display: block; width: 100%; height: min(85vh, 1100px); min-height: 640px; border: 0; }
.paper.is-text { padding: 40px 44px; font-size: 15px; line-height: 1.55; }
.paper.is-text h1 { font-size: 24px; font-weight: 600; }
.paper.is-text h2 { margin-top: 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.paper.is-text h3 { margin-top: 10px; font-size: 15px; font-weight: 600; }
.paper.is-text ul { list-style: disc; padding-left: 20px; margin-top: 6px; }
.paper.is-text p { margin-top: 6px; }
.page-label { text-align: center; font-size: 13px; color: var(--muted); margin-top: 8px; }
.downloads { display: grid; gap: 8px; }
.side > .panel + .panel { margin-top: 16px; }
/* "Before you send it": what to fix (red), what to look at (amber), ideas (grey); each line can be
   ticked once done (kept in this browser). */
.checks .panel-h { flex-wrap: wrap; row-gap: 8px; align-items: center; }
.checks .panel-h h2 { white-space: nowrap; }
.checks .panel-h .meta { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tally { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.tally.is-fix { background: var(--err-bg); color: var(--err-ink); }
.tally.is-look { background: var(--warn-bg); color: var(--warn-ink); }
.check-group { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--white); }
.check-group:first-of-type { margin-top: 2px; }
.check-group h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.check-group .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--control); flex: none; }
.check-group.is-fix { background: var(--err-bg); border-color: var(--err-line); }
.check-group.is-fix h3 { color: var(--err-ink); }
.check-group.is-fix .dot { background: var(--negative); }
.check-group.is-look { background: var(--warn-bg); border-color: var(--warn-line); }
.check-group.is-look h3 { color: var(--warn-ink); }
.check-group.is-look .dot { background: #c9a457; }
.check-group.is-idea h3 { color: var(--muted); }
.check-d { margin-top: 4px; font-size: 14px; color: var(--muted); }
.check-group.is-fix .check-d { color: var(--err-ink); }
.checklist { margin-top: 6px; }
.checklist li { padding: 7px 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); font-size: 15px; line-height: 1.45; }
.checklist li:first-child { border-top: 0; }
.checklist label { display: grid; grid-template-columns: 18px 1fr; gap: 10px; cursor: pointer; }
.checklist input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--primary); cursor: pointer; }
.checklist li.is-done span { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.check-tick { margin-top: 10px; font-size: 13px; }
.check-ok { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-ink); font-size: 15px; }
.check-ok svg { width: 18px; height: 18px; margin-top: 2px; }
.check-jump.is-fix .link { color: var(--err-ink); font-weight: 600; }
.owner-notes { margin-top: 12px; font-size: 13px; color: var(--muted); }
.owner-notes summary { cursor: pointer; }
.owner-notes ul { margin-top: 6px; display: grid; gap: 4px; list-style: disc; padding-left: 18px; }
.chips li.is-req { border-style: dashed; border-color: var(--control); background: transparent; color: var(--muted); }
.chips li.is-added { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }

/* The verdict: the first thing under the title says whether the CV can go out as it is. */
.verdict { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 14px 12px 16px; border-radius: var(--radius); border: 1px solid var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); font-size: 15px; }
.verdict .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; align-self: flex-start; margin-top: 7px; }
.verdict p { flex: 1 1 260px; margin: 0; }
.verdict b { font-weight: 600; margin-right: 4px; }
.verdict.is-fix { border-color: var(--err-line); background: var(--err-bg); color: var(--err-ink); }
.verdict.is-fix .dot { background: var(--negative); }
.verdict.is-look { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.verdict.is-look .dot { background: #b7791f; }
.prep-first { margin-top: 6px; color: var(--err-ink); }
.rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.rank li:first-child { border-top: 0; padding-top: 2px; }
.rank .nm { font-size: 15px; font-weight: 500; }
.rank .why { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.rank .score { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rank .score small { font-size: 13px; font-weight: 400; color: var(--muted); }
.rank li:first-child .score { color: var(--accent); }
.pitch { font-size: 16px; line-height: 1.5; }
.latex { width: 100%; min-height: 28rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; padding: 14px; border-radius: var(--radius); border: 1px solid var(--control); background: #fff; color: var(--ink); resize: vertical; }

/* ---------- dialogs ---------- */
dialog.sheet { border: 1px solid var(--border); border-radius: 12px; padding: 0; width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgba(22, 22, 22, 0.2); font-family: var(--font); }
dialog.sheet::backdrop { background: rgba(22, 24, 22, 0.42); }
dialog.sheet[open] { animation: sheet-in 200ms var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
.sheet-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 0; }
.sheet-h h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.sheet-h p { margin-top: 4px; color: var(--muted); font-size: 15px; }
.sheet-x { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); flex: none; }
.sheet-x svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .sheet-x:hover { background: var(--active); color: var(--ink); } }
.sheet-b { padding: 18px 20px 20px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--white); }
.plan.is-main { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan h3 { font-size: 16px; font-weight: 600; }
.plan .price { margin-top: 8px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.plan p { margin-top: 6px; font-size: 14px; color: var(--muted); flex: 1; }
.plan .btn { margin-top: 16px; }
.fine { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* ---------- statistics notice (shown on every page, home included) ---------- */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 560px; margin-left: auto; display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 10px; background: #161616; color: #f3efe6; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 15px; line-height: 1.45; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 260px; }
.consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.consent-b { display: flex; gap: 8px; }
.consent button { font: inherit; font-weight: 500; min-height: 40px; padding: 0 14px; border-radius: 6px; border: 1px solid rgba(243, 239, 230, 0.35); background: transparent; color: inherit; cursor: pointer; }
.consent button.is-yes { background: #f4ecd8; color: #0f2a1c; border-color: #f4ecd8; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--border); }
.foot-in { max-width: var(--col); margin: 0 auto; padding: 20px var(--m) 28px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 14px; color: var(--muted); }
.foot-in .sp { flex: 1; }
@media (hover: hover) and (pointer: fine) { .foot-in a:hover { color: var(--ink); } }

/* ---------- sign in ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-l { background: var(--primary); color: #f3efe6; padding: 36px 40px 0; display: flex; flex-direction: column; gap: 40px; height: 100vh; height: 100dvh; position: sticky; top: 0; overflow: hidden; }
.auth-l > div { margin-top: auto; }
.auth-l .mark { color: #f3efe6; }
.auth-l h1 { font-size: clamp(34px, 3.6vw, 52px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; max-width: 15ch; text-wrap: balance; }
.auth-l .lede { margin-top: 20px; font-size: 18px; line-height: 1.5; color: rgba(243, 239, 230, 0.86); max-width: 40ch; }
.auth-points { margin-top: 28px; display: grid; gap: 10px; }
.auth-points li { display: flex; gap: 12px; font-size: 16px; color: rgba(243, 239, 230, 0.92); }
.auth-points li::before { content: ""; flex: none; width: 9px; height: 5px; margin-top: 8px; border-left: 1.8px solid #9fc2ad; border-bottom: 1.8px solid #9fc2ad; transform: rotate(-45deg); }
.auth-cv { width: min(100%, 420px); margin: 0 0 -40px; border-radius: 4px 4px 0 0; overflow: hidden; background: #fff; transform: rotate(-1.2deg); flex: none; }
.auth-cv img { width: 100%; height: auto; display: block; } /* white paper, as the PDFs print */
.auth-r { display: grid; place-items: center; padding: 32px 24px; position: relative; }
.auth-top { position: absolute; top: 24px; right: 24px; left: 24px; display: flex; justify-content: space-between; align-items: center; }
.auth-card { width: min(100%, 400px); }
.auth-card h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.auth-card .sub { margin-top: 8px; }
.auth-btns { margin-top: 28px; display: grid; gap: 10px; }
.oauth { display: flex; align-items: center; justify-content: center; gap: 12px; height: 52px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--control); font-size: 16px; font-weight: 500;
  transition: border-color 160ms ease, transform 160ms var(--ease-out); }
.oauth:active { transform: scale(0.98); }
.oauth svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .oauth:hover { border-color: #a9a196; } }
.auth-legal { margin-top: 20px; font-size: 14px; color: var(--muted); }
.auth-legal a { color: var(--ink); }
/* trying without an account, and the way out of TikTok's or Instagram's browser */
.auth-card .btn-block { min-height: 52px; font-size: 16px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.auth-or + .auth-btns { margin-top: 18px; }
.auth-guest { margin-top: 16px; font-size: 15px; text-align: center; }
.oauth-note { font-size: 13px; font-weight: 400; color: var(--muted); }
.inapp.is-flash { animation: inapp-flash 900ms var(--ease-out); }
@keyframes inapp-flash { 0% { box-shadow: 0 0 0 0 rgba(107, 74, 16, 0.38); } 100% { box-shadow: 0 0 0 10px rgba(107, 74, 16, 0); } }
.guest-note { margin-top: 6px; }

/* ---------- prose pages (legal, help) ---------- */
.prose { max-width: 700px; }
.prose h1 { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.prose .updated { margin-top: 8px; font-size: 14px; color: var(--muted); }
.prose .intro { margin-top: 20px; font-size: 18px; line-height: 1.55; }
.prose section { margin-top: 32px; scroll-margin-top: 96px; }
.prose h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.prose p, .prose li { font-size: 16px; line-height: 1.6; }
.prose section p { margin-top: 8px; white-space: pre-line; }
.prose ul { list-style: disc; padding-left: 20px; margin-top: 8px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
/* guides: a table of contents, sub-steps and one quiet call to try it */
.prose h3 { margin-top: 20px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.prose strong { font-weight: 600; }
.guide-toc { margin-top: 24px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.guide-toc ol { list-style: decimal; padding-left: 20px; }
.guide-toc li { font-size: 15px; line-height: 1.7; }
.prose section ol { list-style: decimal; padding-left: 20px; margin-top: 8px; }
.guide section li + li { margin-top: 6px; }
.prose blockquote { margin-top: 12px; padding: 4px 20px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.guide-cta { margin-top: 36px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.guide-cta p { font-size: 16px; line-height: 1.6; }
.guide-cta .btn { margin-top: 14px; text-decoration: none; }

/* ---------- tablet and phone ---------- */
@media (max-width: 1040px) {
  .flow, .result { grid-template-columns: minmax(0, 1fr); }
  .aside-card { position: static; }
  .row { grid-template-columns: 46px minmax(0, 1fr) 148px 136px; }
  .row-when { display: none; }
}
@media (max-width: 760px) {
  :root { --m: 16px; }
  .bar-in { height: 56px; gap: 12px; }
  .nav { display: none; }
  .plan-chip.hide-phone { display: none; }
  .menu .only-phone { display: flex; }
  .main { padding-top: 20px; }
  .title-row { align-items: flex-start; }
  .title-row h1, .h1 { font-size: 25px; }
  .title-actions { width: 100%; }
  .title-actions .btn { flex: 1; height: 46px; }
  .row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; }
  .row-thumb { width: 40px; height: 52px; }
  .row-files { display: none; }
  .row-title, .row-sub { white-space: normal; overflow: visible; }
  .quota { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .stat-main { grid-column: 1 / -1; }
  .season-g .btn { width: 100%; }
  .st-select { height: 44px; padding-left: 14px; font-size: 14px; }
  .set-grid { grid-template-columns: 1fr; }
  .prep-grid, .prep-empty { grid-template-columns: 1fr; }
  .invite-row { flex-direction: column; }
  .invite-row .btn { width: 100%; }
  .prep-qs { grid-row: auto; }
  .prep-go, .prep-go .btn { max-width: none; width: 100%; }
  .set-actions .btn { width: 100%; }
  .quota .btn { width: 100%; }
  .saved-cv { grid-template-columns: 40px minmax(0, 1fr); }
  .saved-cv .btn { grid-column: 1 / -1; width: 100%; }
  .submit-row .btn-lg { width: 100%; }
  .row-status .pill { height: 24px; }
  .step-body { margin-left: 0; }
  .tray { padding: 12px; border-radius: 6px; }
  .paper.is-text { padding: 22px 18px; }
  .plans { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth-l { order: 2; padding: 28px 20px; gap: 24px; height: auto; position: static; }
  .auth-cv { display: none; }
  .auth-r { order: 1; padding: 96px 20px 40px; place-items: start center; }
  .auth-top { top: 16px; left: 16px; right: 16px; }
  .btn, .oauth { min-height: 44px; }
  .seg { width: 100%; grid-auto-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .steps li.is-running .mk, .spinner { animation: none; border-top-color: var(--accent); border-right-color: var(--accent); }
}
/* work made without an account, before it joins an account */
.claim-list { display: grid; gap: 10px; }
.claim-list li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--white); }

/* ---------- inside TikTok, Instagram or another app: reopen the page in Safari or Chrome ----------
   Every page, the home page included (body.site has none of the .app resets, so this stands alone).
   The arrow points at the app's own menu, drawn by the app above the page, top right. */
.bridge, .bridge *, .bridge *::before, .bridge *::after { box-sizing: border-box; }
.bridge { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }
:where(.bridge) :where(h2, p, ol, li) { margin: 0; padding: 0; }
:where(.bridge) ol { list-style: none; }
:where(.bridge) :where(button, input) { font: inherit; }
.bridge :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bridge-strip { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px;
  background: var(--primary-hover); color: var(--on-primary); font-size: 14px; font-weight: 500; line-height: 1.3; text-align: center; text-decoration: none; }
.bridge-strip svg { width: 16px; height: 16px; flex: none; }
.bridge.is-open .bridge-strip > * { visibility: hidden; } /* under the sheet, the arrow says it */
.bridge-layer { display: none; }
.bridge.is-open .bridge-layer { display: block; position: fixed; inset: 0; z-index: 95; }
.bridge-veil { position: absolute; inset: 0; background: rgba(16, 16, 14, 0.64); }
.bridge-arrow { position: absolute; top: 4px; right: 14px; width: 60px; height: 56px; color: var(--on-primary); }
.bridge-card { position: absolute; top: 64px; left: 12px; right: 12px; max-width: 440px; margin-left: auto; max-height: calc(100% - 76px); overflow: auto; overscroll-behavior: contain;
  padding: 20px 18px 10px; border-radius: 14px; background: var(--surface); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28); outline: none; animation: bridge-in 260ms var(--ease-out); } /* taste-skill-ignore: a dialog over the page */
@keyframes bridge-in { from { opacity: 0; transform: translateY(-6px); } }
.bridge-h { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.bridge-why { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.bridge-go { display: flex; align-items: center; justify-content: center; margin-top: 16px; min-height: 50px; padding: 0 16px; border-radius: var(--radius-control);
  background: var(--primary); color: var(--on-primary); font-size: 16px; font-weight: 600; text-decoration: none; transition: transform 160ms var(--ease-out); }
.bridge-go:active { transform: scale(0.97); }
.bridge-else { margin-top: 14px; font-size: 13px; color: var(--muted); }
.bridge-steps { display: grid; gap: 10px; margin-top: 16px; }
.bridge-else + .bridge-steps { margin-top: 8px; }
.bridge-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 16px; line-height: 1.4; }
.bridge-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bridge-dots { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; margin: 0 3px; border: 1px solid var(--control); border-radius: 6px; background: var(--white); font-weight: 700; line-height: 1; vertical-align: 1px; }
.bridge-copy-d { margin-top: 16px; font-size: 13px; color: var(--muted); }
.bridge-copy { display: flex; gap: 8px; margin-top: 6px; }
.bridge-copy input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--white); color: var(--ink); font-size: 15px; }
.bridge-copy button { flex: none; height: 44px; padding: 0 14px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--white); color: var(--ink); font-weight: 500; cursor: pointer; }
.bridge-later { display: block; width: 100%; margin-top: 6px; min-height: 44px; border: 0; background: none; color: var(--ink); font-size: 15px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
html.bridge-lock, html.bridge-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .bridge-card, .bridge-go { animation: none; transition: none; } }

/* Fix a red line here, or keep it: no LaTeX. */
.fix-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px 30px; }
.kept-lines { margin-top: 12px; font-size: 14px; color: var(--muted); }
.kept-lines summary { cursor: pointer; }
.kept-lines ul { margin: 8px 0 0 18px; display: grid; gap: 6px; }
.lines-editor .lines-sec { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 16px 0 6px; }
.lines-editor .line-field { display: grid; gap: 4px; margin-bottom: 8px; }
.lines-editor .line-label { font-size: 13px; color: var(--muted); }
.lines-editor textarea { width: 100%; font: inherit; font-size: 15px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--control); border-radius: var(--radius); background: var(--white); color: var(--ink); resize: vertical; }
.lines-editor textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lines-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

/* "See what to fix" lands on the checklist title, not under the sticky bar. */
#check-h { scroll-margin-top: 96px; }
/* After a download or a copy: "Sent it? Mark as sent". */
.sent-ask { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: -2px 0 12px; font-size: 15px; color: var(--muted); }
/* Interview prep within reach, under "Before you send it". */
.prep-card .hint + .btn, .prep-card .hint + form, .prep-card .prep-see { margin-top: 12px; }
.prep-card .prep-see { display: inline-block; font-size: 15px; }