/* EntryPoint skin of Contour. Values come from the approved prototype's final cascade
   (docs/package/prototype) and docs/package/08-design-system.md. 228px rail per owner ruling 6. */
@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/SpaceGrotesk.ttf') format('truetype'); font-weight: 300 700; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400 600; }

:root {
  color-scheme: dark;
  --ct-bg: #191919; --ct-rail: #141414; --ct-surface: #212120; --ct-surface-elevated: #282827; --ct-lane: #1E1E1D;
  --ct-ink: #F2F0EC; --ct-muted: #B0ADA8; --ct-subtle: #918E89; --ct-line: #3A3938; --ct-line-soft: #2B2A29; --ct-scrim: #0B0B0B;
  --ct-accent: #CF7248; --ct-accent-hover: #D98762; --ct-accent-text: #D57B53;
  --ct-dot: hsla(20,58%,78%,.44);
  --c-blue: #9DB7DA; --c-teal: #86C1BA; --c-plum: #C3AEDC; --c-amber: #E7BC7B; --c-sage: #A4C9AC; --c-rose: #E5A79D;
  --ct-font-display: 'Space Grotesk', Arial, sans-serif;
  --ct-font-body: 'Space Grotesk', Arial, sans-serif;
  --ct-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --ct-tracking-body: -0.012em;
  --ct-radius-sm: 7px;
  --ct-radius: 11px;
  --ct-motion-quick: 140ms;
}
:root[data-theme=light] {
  color-scheme: light;
  --ct-bg: #F6F5F2; --ct-rail: #EDEBE7; --ct-surface: #FFFFFF; --ct-surface-elevated: #FFFFFF; --ct-lane: #EDEBE7;
  --ct-ink: #191919; --ct-muted: #5A5854; --ct-subtle: #64615C; --ct-line: #D4D1CC; --ct-line-soft: #E6E3DF; --ct-scrim: #191919;
  --ct-accent-text: #A9532E;
  --ct-dot: hsla(20,51%,34%,.36);
  --c-blue: #35598C; --c-teal: #27696A; --c-plum: #674E8C; --c-amber: #85590A; --c-sage: #2C6A4C; --c-rose: #9E4438;
}

/* Root and quiet dot field: clean in the middle, brighter toward the edges */
*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--ct-bg); }
body {
  margin: 0; min-height: 100vh; color: var(--ct-ink); font-family: var(--ct-font-body); font-size: 14px; line-height: 1.5;
  letter-spacing: var(--ct-tracking-body); font-synthesis: none; -webkit-font-smoothing: antialiased;
  background-color: var(--ct-bg);
  background-image:
    radial-gradient(ellipse 74% 74% at 50% 50%, var(--ct-bg) 0%, var(--ct-bg) 42%, transparent 100%),
    repeating-linear-gradient(118deg, color-mix(in srgb, var(--ct-bg) 58%, transparent) 0, transparent 13%, color-mix(in srgb, var(--ct-bg) 58%, transparent) 26%),
    radial-gradient(circle, var(--ct-dot) 1.05px, transparent 1.45px);
  background-size: 100% 100%, 100% 100%, 26px 26px;
}
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
button, summary { cursor: pointer; }
:is(button, a, select, input, textarea, summary):focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Shell */
.ct-scaffold { position: relative; display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.ct-rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 30px; padding: 16px 12px; background: color-mix(in srgb, var(--ct-rail) 88%, transparent); border-right: 1px solid var(--ct-line); }
.ct-brand { display: flex; align-items: center; height: 36px; padding: 0 10px; color: var(--ct-ink); text-decoration: none; }
.ct-brand img { display: block; width: 26px; height: 26px; flex: none; margin-right: 9px; }
.ct-brand-word { font: 700 19px var(--ct-font-display); letter-spacing: -.055em; }
.ct-brand-word span { color: var(--ct-accent); }
.ct-rail-group { margin-bottom: 22px; }
.ct-rail-label { padding: 0 10px 8px; font: 500 10px var(--ct-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ct-subtle); }
.ct-rail-links { display: flex; flex-direction: column; gap: 2px; }
.ct-rail-link { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 11px; border-radius: var(--ct-radius-sm); color: var(--ct-muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: color var(--ct-motion-quick), background var(--ct-motion-quick); }
.ct-rail-link:hover { color: var(--ct-ink); background: color-mix(in srgb, var(--ct-ink) 7%, transparent); }
.ct-rail-link[aria-current=page] { color: var(--ct-ink); font-weight: 600; background: color-mix(in srgb, var(--ct-accent) 11%, transparent); }
.ct-rail-link[aria-current=page] svg { color: var(--ct-accent); }
.ct-rail-link[aria-current=page]::before { content: ""; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 2px; background: var(--ct-accent); border-radius: 2px; }
.ct-rail-link svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ct-nav-count { margin-left: auto; font: 500 11px var(--ct-font-mono); color: var(--ct-subtle); }
.ct-rail-link[aria-current=page] .ct-nav-count { color: var(--ct-accent-text); }
.ct-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 8px 2px; border-top: 1px solid var(--ct-line-soft); color: var(--ct-ink); text-decoration: none; font-size: 12px; font-weight: 600; line-height: 1.3; }
.ct-me small { display: block; font-size: 12px; font-weight: 400; color: var(--ct-muted); }
.ct-me:hover small { color: var(--ct-accent-text); }
/* Sign out sits under the signed-in person on every workspace page. */
.ct-signout { margin: 6px 0 0; padding: 0 8px; }
.ct-signout-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 0; border: 0; background: none; color: var(--ct-muted); font: 500 12px var(--ct-font-body); cursor: pointer; }
.ct-signout-btn:hover, .ct-signout-btn:focus-visible { color: var(--ct-accent-text); }
.ct-signout-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ct-avatar { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ct-line); color: var(--ct-muted); font: 600 10px/1 var(--ct-font-body); letter-spacing: 0; text-transform: uppercase; }
.ct-main { display: flex; flex-direction: column; min-width: 0; }
.ct-topbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 72px; padding: 10px clamp(20px, 3vw, 48px); border-bottom: 1px solid var(--ct-line); background: color-mix(in srgb, var(--ct-bg) 82%, transparent); }
.ct-crumb { display: flex; align-items: center; gap: 12px; min-width: 0; white-space: nowrap; font-size: 13px; color: var(--ct-muted); }
.ct-crumb strong { font-size: 16px; font-weight: 700; letter-spacing: -.045em; color: var(--ct-ink); }
.ct-crumb a { color: inherit; text-decoration: none; }
.ct-crumb a:hover { color: var(--ct-ink); }
.ct-slash { color: var(--ct-accent); }
.ct-crumb-end { overflow: hidden; text-overflow: ellipsis; }
.ct-actions { display: flex; align-items: center; gap: 9px; flex: none; }
.ct-icon-button { width: 39px; height: 39px; display: grid; place-items: center; flex: none; padding: 0; border: 1px solid var(--ct-line); border-radius: var(--ct-radius-sm); background: color-mix(in srgb, var(--ct-bg) 65%, transparent); color: var(--ct-ink); }
.ct-icon-button:hover { border-color: var(--ct-accent); }
.ct-icon-button svg, .ct-command-trigger svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ct-command-trigger { min-height: 39px; width: 240px; display: flex; align-items: center; gap: 9px; padding: 0 9px 0 11px; border: 1px solid var(--ct-line); border-radius: var(--ct-radius-sm); background: color-mix(in srgb, var(--ct-bg) 65%, transparent); color: var(--ct-muted); font-size: 13px; text-decoration: none; }
.ct-command-trigger span { flex: 1; }
.ct-command-trigger:hover { color: var(--ct-ink); border-color: var(--ct-accent); }
kbd { color: var(--ct-muted); border: 1px solid var(--ct-line); border-radius: 4px; padding: 2px 5px; font: 500 10px var(--ct-font-mono); }
.ct-workspace { width: min(100%, 1120px); margin: 0 auto; padding: clamp(24px, 3.2vw, 44px) clamp(18px, 4vw, 52px) 40px; flex: 1; }
.ct-workspace-footer { display: flex; justify-content: space-between; gap: 12px; padding: 14px clamp(20px, 3vw, 40px); border-top: 1px solid var(--ct-line-soft); color: var(--ct-subtle); background: color-mix(in srgb, var(--ct-bg) 82%, transparent); font: 500 10px var(--ct-font-mono); }
.ct-workspace-footer i { color: var(--ct-accent); font-style: normal; }

/* Head */
.ct-overline { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 10px var(--ct-font-mono); letter-spacing: .045em; color: var(--ct-muted); text-transform: uppercase; }
.ct-overline a { color: inherit; text-decoration: none; }
.ct-overline a:hover { color: var(--ct-ink); }
.ct-overline-index { color: var(--ct-accent-text); margin-right: 12px; }
.ct-overline-end { color: var(--ct-subtle); text-align: right; }
.ct-title { margin: 0; font: 600 clamp(34px, 3.6vw, 50px)/1.04 var(--ct-font-display); letter-spacing: -.058em; }
.ct-title-soft { font-weight: 400; }
.ct-title-dot { color: var(--ct-accent); }
.ct-subhead { margin: 8px 0 0; max-width: 620px; color: var(--ct-muted); font-size: 14px; line-height: 1.6; }
.ct-subhead a, .ct-link { color: var(--ct-muted); text-decoration: none; border: 0; border-bottom: 1px solid var(--ct-line); background: none; padding: 0; }
.ct-subhead a:hover, .ct-link:hover { color: var(--ct-ink); border-color: var(--ct-accent); }
.ct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 14px 0 26px; }
.ct-head-actions { display: flex; align-items: flex-end; gap: 22px; }
.ct-stat { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.ct-stat small { font: 500 10px var(--ct-font-mono); letter-spacing: .05em; color: var(--ct-subtle); text-transform: uppercase; }
.ct-stat strong { font: 500 30px/1 var(--ct-font-display); letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.ct-stat i { font-style: normal; color: var(--ct-accent); }
.ct-eyebrow { font: 500 10px var(--ct-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ct-accent-text); }

/* Actions */
.ct-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 39px; padding: 0 13px; border: 1px solid var(--ct-line); border-radius: var(--ct-radius-sm); background: color-mix(in srgb, var(--ct-bg) 76%, transparent); color: var(--ct-ink); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; list-style: none; transition: border-color var(--ct-motion-quick), background var(--ct-motion-quick); }
.ct-action::-webkit-details-marker { display: none; }
.ct-action:hover { border-color: var(--ct-accent); background: var(--ct-surface); }
.ct-action--accent { border-color: var(--ct-accent); background: var(--ct-accent); color: #191919; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px -10px var(--ct-accent); }
.ct-action--accent:hover { border-color: var(--ct-accent-hover); background: var(--ct-accent-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 10px 26px -10px var(--ct-accent); }
.ct-action--small { min-height: 32px; padding: 0 12px; }
.ct-inline { display: inline-flex; margin: 0; }
.ct-actionbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.ct-actionbar-left, .ct-actionbar-right { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ct-confirm { position: relative; display: inline-block; }
.ct-confirm-body { position: absolute; z-index: 6; bottom: calc(100% + 8px); left: 0; width: min(340px, 78vw); padding: 14px 16px; background: var(--ct-surface-elevated); border: 1px solid var(--ct-line); border-radius: var(--ct-radius); box-shadow: 0 16px 44px -14px rgba(0,0,0,.45); font-size: 13px; line-height: 1.55; color: var(--ct-muted); white-space: normal; }
.ct-confirm--right .ct-confirm-body { left: auto; right: 0; }
.ct-confirm-body p { margin: 0 0 12px; }

/* Status never relies on color alone: each pill carries its word */
.ct-status { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--ct-muted); background: color-mix(in srgb, var(--ct-muted) 13%, transparent); white-space: nowrap; }
.ct-status[data-status=success] { color: var(--c-sage); background: color-mix(in srgb, var(--c-sage) 15%, transparent); }
.ct-status[data-status=working] { color: var(--c-teal); background: color-mix(in srgb, var(--c-teal) 15%, transparent); }
.ct-status[data-status=warning] { color: var(--c-amber); background: color-mix(in srgb, var(--c-amber) 15%, transparent); }
.ct-status[data-status=error] { color: var(--c-rose); background: color-mix(in srgb, var(--c-rose) 15%, transparent); }
.ct-status[data-status=info] { color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 15%, transparent); }
.ct-tag { font-size: 11px; color: var(--ct-muted); padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ct-muted) 12%, transparent); white-space: nowrap; }
.ct-tag[data-tone=must] { color: var(--c-plum); background: color-mix(in srgb, var(--c-plum) 15%, transparent); }
.ct-tag[data-tone=client] { color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 15%, transparent); }
.ct-tag[data-tone=warn] { color: var(--c-amber); background: color-mix(in srgb, var(--c-amber) 15%, transparent); }

/* Notices: what happened and what to do next, in words */
.ct-notice { display: flex; gap: 10px; align-items: baseline; margin: 0 0 18px; padding: 11px 14px; border: 1px solid var(--ct-line-soft); border-radius: var(--ct-radius-sm); font-size: 13px; color: var(--ct-ink); background: color-mix(in srgb, var(--c-sage) 9%, transparent); }
.ct-notice[data-tone=block] { border-color: color-mix(in srgb, var(--c-rose) 45%, var(--ct-line)); background: color-mix(in srgb, var(--c-rose) 9%, transparent); }
.ct-notice[data-tone=warn] { border-color: color-mix(in srgb, var(--c-amber) 45%, var(--ct-line)); background: color-mix(in srgb, var(--c-amber) 8%, transparent); }
.ct-notice[data-tone=info] { background: color-mix(in srgb, var(--c-blue) 9%, transparent); }
.ct-notice strong { font-weight: 600; flex: none; }

/* Cards */
.ct-stack { display: flex; flex-direction: column; gap: 12px; }
.ct-card { display: block; background: var(--ct-surface); border: 1px solid var(--ct-line-soft); border-radius: var(--ct-radius); padding: 22px 24px; }
.ct-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.ct-card-title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.ct-card-right { display: inline-flex; align-items: center; gap: 8px; }
.ct-count { font: 500 11px var(--ct-font-mono); color: var(--ct-subtle); }
.ct-read { margin: 0; max-width: 720px; font-size: 15px; line-height: 1.7; }
.ct-copy { margin: 0; color: var(--ct-muted); font-size: 14px; line-height: 1.65; }
.ct-none { margin: 0; color: var(--ct-muted); font-size: 14px; }
.ct-muted { color: var(--ct-muted); font-size: 13px; }
.ct-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.ct-link-card { color: var(--ct-ink); text-decoration: none; padding: 18px 20px; transition: border-color var(--ct-motion-quick); }
.ct-link-card:hover { border-color: var(--ct-accent); }
.ct-link-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ct-link-top strong { font: 600 22px/1.1 var(--ct-font-display); letter-spacing: -.05em; }
.ct-link-card small { display: block; margin-top: 4px; font-size: 13px; color: var(--ct-muted); }
.ct-link-stats { display: flex; gap: 22px; margin-top: 22px; font: 500 10px var(--ct-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ct-subtle); }
.ct-link-stats b { font: 500 26px/1 var(--ct-font-display); letter-spacing: -.07em; margin-right: 5px; color: var(--ct-ink); }
.ct-section { margin-bottom: 18px; }
.ct-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ct-section-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.ct-placeholder { padding: 26px 0; border-block: 1px solid var(--ct-line); color: var(--ct-muted); font-size: 14px; }
.ct-placeholder p { margin: 0; }

/* Rows */
.ct-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 54px; padding: 8px 0; border-top: 1px solid var(--ct-line-soft); color: var(--ct-ink); text-decoration: none; }
.ct-row:first-child { border-top: 0; }
a.ct-row:hover strong { color: var(--ct-accent-text); }
.ct-row-main { min-width: 0; }
.ct-row-main strong { display: block; font-size: 14px; font-weight: 600; }
.ct-row-main small { display: block; font-size: 13px; color: var(--ct-muted); overflow-wrap: anywhere; }
.ct-row-right { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.ct-arrow { color: var(--ct-subtle); }

/* Next up: Contour's instrument band, between hairlines with the orange fade */
.ct-next { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding: 28px 0 30px; margin-bottom: 18px; border-block: 1px solid var(--ct-line); }
.ct-next::before { content: ""; position: absolute; left: 0; top: -1px; width: min(280px, 45%); height: 1px; background: linear-gradient(90deg, var(--ct-accent), color-mix(in srgb, var(--ct-accent) 0%, transparent)); }
.ct-next-title { margin: 14px 0 10px; max-width: 640px; font: 600 clamp(30px, 3.4vw, 46px)/1.06 var(--ct-font-display); letter-spacing: -.058em; text-wrap: balance; }
.ct-next-title em { font-style: normal; font-weight: 400; }
.ct-next-title i { font-style: normal; color: var(--ct-accent); }
.ct-next p { margin: 0 0 18px; color: var(--ct-muted); font-size: 13px; line-height: 1.65; }
.ct-tally { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; text-align: right; }
.ct-tally strong { font: 500 clamp(56px, 6vw, 84px)/.92 var(--ct-font-display); letter-spacing: -.09em; font-variant-numeric: tabular-nums; }
.ct-tally i { font-style: normal; color: var(--ct-accent); }
.ct-tally small { font-size: 11px; color: var(--ct-muted); }

/* Work queues, in the same colors as the board columns */
[data-phase=new] { --pc: var(--c-blue); }
[data-phase=eval] { --pc: var(--c-teal); }
[data-phase=short] { --pc: var(--c-plum); }
[data-phase=client] { --pc: var(--c-amber); }
[data-phase=dec] { --pc: var(--c-sage); }
.ct-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; }
.ct-tile { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 18px 8px; min-height: 124px; padding: 14px 16px 15px; color: var(--ct-ink); text-decoration: none; background: var(--ct-surface); border: 1px solid var(--ct-line-soft); border-top: 3px solid var(--pc, var(--ct-line)); border-radius: var(--ct-radius); transition: border-color var(--ct-motion-quick), background var(--ct-motion-quick); }
.ct-tile:hover { background: var(--ct-surface-elevated); }
.ct-tile[aria-current=true] { border-color: var(--ct-accent); border-top-color: var(--ct-accent); background: color-mix(in srgb, var(--ct-accent) 7%, var(--ct-surface)); }
.ct-tile-index { font: 500 10px var(--ct-font-mono); color: var(--ct-subtle); }
.ct-tile .ct-chev { justify-self: end; margin: -2px -3px 0 0; }
.ct-tile[aria-current=true] .ct-chev { transform: rotate(180deg); }
.ct-tile-n { grid-column: 1 / -1; font: 500 42px/.95 var(--ct-font-display); letter-spacing: -.08em; font-variant-numeric: tabular-nums; }
.ct-tile-label { grid-column: 1 / -1; margin-top: -12px; font-size: 13px; font-weight: 600; }
.ct-tile[data-empty=true] .ct-tile-n { color: var(--ct-subtle); }
.ct-queue { margin-top: 10px; padding: 8px 20px 6px; }
.ct-queue-head { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; font: 500 10px var(--ct-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ct-subtle); }
.ct-queue .ct-row { border-top: 1px solid var(--ct-line-soft); }
.ct-queue .ct-none { padding: 10px 0 14px; }
.ct-chev { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ct-subtle); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ct-motion-quick); }

/* Numbered tabs */
.ct-tabs { display: flex; gap: 4px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--ct-line); }
.ct-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px 0 2px; margin: 0 8px -1px 0; border-bottom: 2px solid transparent; color: var(--ct-muted); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.ct-tab:hover { color: var(--ct-ink); }
.ct-tab[aria-current=page] { color: var(--ct-ink); font-weight: 600; border-bottom-color: var(--ct-accent); }
.ct-tab-n { font: 500 11px var(--ct-font-mono); color: var(--ct-subtle); }
.ct-tab[aria-current=page] .ct-tab-n, .ct-tab[aria-current=page] .ct-tab-badge { color: var(--ct-accent-text); }
.ct-tab-badge { font: 500 10px var(--ct-font-mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ct-subtle); }

/* Brief */
.ct-quote-hero { padding: 30px 0 32px; margin: 2px 0 18px; border-bottom: 1px solid var(--ct-line); }
.ct-quote-hero blockquote { margin: 16px 0 14px; max-width: 800px; font: 500 clamp(28px, 3.3vw, 44px)/1.12 var(--ct-font-display); letter-spacing: -.05em; text-wrap: balance; }
.ct-quote-hero blockquote em { font-style: normal; color: var(--ct-accent); }
.ct-quote-by { margin: 0; font-size: 13px; color: var(--ct-muted); }
.ct-acc { padding: 0; overflow: hidden; margin-bottom: 14px; }
.ct-acc-head { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 12px 20px; font-size: 14px; font-weight: 600; letter-spacing: -.02em; list-style: none; }
.ct-acc-head::-webkit-details-marker { display: none; }
.ct-acc-head:hover { background: color-mix(in srgb, var(--ct-ink) 3%, transparent); }
.ct-acc-title { display: inline-flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.ct-acc-body { padding: 0 20px 16px; }
details[open] > summary .ct-chev { transform: rotate(180deg); }
.ct-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c-amber); }
.ct-dot[data-tone=done] { background: var(--c-sage); }
.ct-check { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 14px; }
.ct-check.done > span:first-child { text-decoration: line-through; color: var(--ct-muted); }
.ct-crit { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--ct-line-soft); font-size: 14px; }

/* Forms */
.ct-field + .ct-field, .ct-field + .ct-field-pair, .ct-field-pair + .ct-field, .ct-field-pair + .ct-field-pair { margin-top: 14px; }
.ct-field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-field-pair > .ct-field + .ct-field { margin-top: 0; }
.ct-create-form { padding-bottom: 20px; }
.ct-field-label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 600; }
.ct-field-hint { margin: 6px 0 0; font-size: 12px; color: var(--ct-muted); }
.ct-input { display: block; width: 100%; min-height: 38px; padding: 9px 11px; color: var(--ct-ink); background: var(--ct-bg); border: 1px solid var(--ct-line); border-radius: var(--ct-radius-sm); font-size: 13px; }
.ct-input:hover, .ct-input:focus { border-color: var(--ct-accent); outline: 0; }
textarea.ct-input { resize: vertical; line-height: 1.55; }
.ct-check-line { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 13px; line-height: 1.5; cursor: pointer; }
.ct-check-line input { width: 16px; height: 16px; flex: none; margin: 2px 0 0; accent-color: var(--ct-accent); }
.ct-progress { height: 3px; margin-bottom: 16px; border-radius: 999px; background: color-mix(in srgb, var(--ct-muted) 16%, transparent); overflow: hidden; }
.ct-progress span { display: block; height: 100%; border-radius: 999px; background: var(--ct-accent); }

/* Evaluation */
.ct-ev { border-top: 1px solid var(--ct-line-soft); }
.ct-ev-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; font-size: 14px; list-style: none; }
.ct-ev-head::-webkit-details-marker { display: none; }
.ct-ev-name { flex: 1; min-width: 0; font-weight: 500; }
.ct-ev-name small { display: block; font-size: 12px; font-weight: 400; color: var(--ct-muted); }
.ct-ev-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; padding-bottom: 14px; }
.ct-crit-read { padding: 11px 0; border-top: 1px solid var(--ct-line-soft); font-size: 13px; }
.ct-crit-read strong { font-weight: 500; }
.ct-crit-read p { margin: 5px 0 0; color: var(--ct-muted); }
.ct-rec-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ct-dl { margin: 0; }
.ct-metadata { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--ct-line-soft); }
.ct-metadata:last-child { border-bottom: 0; }
.ct-metadata dt { color: var(--ct-muted); }
.ct-metadata dd { margin: 0; font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ct-log-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--ct-line-soft); font-size: 14px; line-height: 1.5; }
.ct-log-row:first-child { border-top: 0; }
.ct-log-date { font: 500 10px var(--ct-font-mono); text-transform: uppercase; color: var(--ct-subtle); padding-top: 4px; }
.ct-log-row small { display: block; color: var(--ct-muted); font-size: 12px; margin-top: 2px; }

/* Kanban: each column scrolls inside its own container */
.ct-boardbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-board-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ct-board { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 10px; height: clamp(430px, calc(100vh - 360px), 760px); min-height: 0; }
.ct-col { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; padding: 4px 0 8px; background: var(--ct-lane); border: 1px solid var(--ct-line-soft); border-top: 3px solid var(--pc, var(--ct-line)); border-radius: var(--ct-radius); transition: background var(--ct-motion-quick); }
.ct-col.is-over { background: color-mix(in srgb, var(--ct-accent) 8%, var(--ct-lane)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-accent) 55%, transparent); }
.ct-col-head { flex: none; display: flex; align-items: baseline; gap: 7px; padding: 10px 14px 8px; }
.ct-col-head strong { font-size: 13px; font-weight: 600; }
.ct-col-n { font: 500 10px var(--ct-font-mono); color: var(--pc, var(--ct-subtle)); }
.ct-col-count { margin-left: auto; font: 500 11px var(--ct-font-mono); color: var(--ct-subtle); }
.ct-col-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 8px 4px; scrollbar-width: thin; scrollbar-color: var(--ct-line) transparent; }
.ct-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 8px; padding: 12px; background: var(--ct-surface); border: 1px solid var(--ct-line-soft); border-radius: var(--ct-radius); color: var(--ct-ink); text-decoration: none; transition: border-color var(--ct-motion-quick); }
.ct-item:hover { border-color: var(--ct-accent); }
.ct-item[draggable=true] { cursor: grab; }
.ct-item.is-dragging { opacity: .45; }
.ct-item strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.ct-hint { margin: 10px 0 0; font-size: 12px; color: var(--ct-subtle); }

/* Shortlist */
.ct-sl { padding: 0; }
.ct-sl-title { padding: 20px 24px 16px; }
.ct-sl-title h2 { margin: 0; font: 600 20px/1.15 var(--ct-font-display); letter-spacing: -.04em; }
.ct-sl-title p { margin: 4px 0 0; font-size: 13px; color: var(--ct-muted); }
.ct-sl-head, .ct-sl-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1.3fr) 92px 96px 140px; gap: 16px; align-items: center; padding-inline: 24px; }
.ct-sl-head { padding-block: 9px; font: 500 10px var(--ct-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ct-subtle); border-block: 1px solid var(--ct-line-soft); background: color-mix(in srgb, var(--ct-bg) 50%, transparent); }
.ct-sl-row { min-height: 78px; padding-block: 14px; border-bottom: 1px solid var(--ct-line-soft); transition: background var(--ct-motion-quick); }
.ct-sl-row:last-child { border-bottom: 0; }
.ct-sl-row:hover { background: color-mix(in srgb, var(--ct-accent) 4%, transparent); }
.ct-sl-rank { font: 500 11px var(--ct-font-mono); color: var(--ct-accent-text); }
.ct-sl-who { min-width: 0; color: var(--ct-ink); text-decoration: none; }
.ct-sl-who strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.ct-sl-who:hover strong { color: var(--ct-accent-text); }
.ct-sl-who small { display: block; margin-top: 2px; font-size: 12px; color: var(--ct-muted); line-height: 1.4; }
.ct-sl-why { font-size: 13px; line-height: 1.5; color: var(--ct-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-sl-met { font: 500 20px/1 var(--ct-font-display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.ct-sl-met i { font-style: normal; color: var(--ct-accent); }
.ct-sl-release { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ct-sl .ct-status { justify-self: start; }
.ct-sl-empty { padding: 8px 24px 24px; }
.ct-tip-wrap { position: relative; display: inline-flex; }
.ct-tip-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 39px; padding: 0 4px; color: var(--ct-muted); font-size: 12px; font-weight: 500; list-style: none; }
.ct-tip-btn::-webkit-details-marker { display: none; }
.ct-tip-btn:hover { color: var(--ct-ink); }
.ct-tip-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ct-tip { position: absolute; z-index: 6; left: 0; bottom: calc(100% + 8px); width: min(380px, 78vw); padding: 14px 16px; background: var(--ct-surface-elevated); border: 1px solid var(--ct-line); border-radius: var(--ct-radius); box-shadow: 0 16px 44px -14px rgba(0,0,0,.45); font-size: 13px; line-height: 1.55; color: var(--ct-muted); }
.ct-tip strong { color: var(--ct-ink); font-weight: 600; }
.ct-tip p { margin: 0; }
.ct-tip p + p { margin-top: 8px; }

/* Outcome */
.ct-outcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, auto) auto; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--ct-line-soft); font-size: 14px; }
.ct-card-head + .ct-outcome { border-top: 0; }
.ct-outcome strong { font-weight: 600; }
.ct-outcome small { display: block; font-size: 12px; color: var(--ct-muted); }
.ct-outcome > .ct-status { justify-self: start; }
.ct-outcome-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.ct-outcome-form select { min-height: 32px; padding: 5px 8px; font-size: 12px; }
.ct-outcome-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

/* Side sheet */
dialog.ct-sheet { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(680px, 100%); max-width: 100%; height: 100%; max-height: 100%; padding: 25px 25px 0; overflow-y: auto; color: var(--ct-ink); background: var(--ct-surface-elevated); border: 0; border-left: 1px solid var(--ct-line); box-shadow: -20px 0 80px rgba(0,0,0,.24); }
dialog.ct-sheet[open] { display: flex; flex-direction: column; }
dialog.ct-sheet::backdrop { background: color-mix(in srgb, var(--ct-scrim) 60%, transparent); }
.ct-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ct-sheet-label { font: 500 10px var(--ct-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ct-accent-text); }
.ct-sheet-title { margin: 18px 0 8px; font: 600 31px/1.13 var(--ct-font-display); letter-spacing: -.055em; }
.ct-sheet-copy { margin: 0; color: var(--ct-muted); font-size: 13px; line-height: 1.65; }
.ct-sheet-divider { height: 1px; margin: 20px 0; background: var(--ct-line); }
.ct-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-sheet-divider + .ct-pills { margin-top: -8px; }
.ct-rec-block { padding: 2px 0 18px; }
.ct-rec-block h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: -.015em; }
.ct-sheet-footer { position: sticky; z-index: 2; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: auto -25px 0; padding: 14px 25px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--ct-surface-elevated); border-top: 1px solid var(--ct-line-soft); }
.ct-sheet-footer .ct-inline, .ct-sheet-footer .ct-action { width: 100%; }

/* Client document */
.ct-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px clamp(16px, 3vw, 40px); font: 500 11px var(--ct-font-mono); letter-spacing: .03em; color: var(--ct-ink); background: color-mix(in srgb, var(--ct-accent) 18%, var(--ct-bg)); border-bottom: 1px solid var(--ct-accent); }
.ct-preview-bar a { color: inherit; }
.ct-document { width: min(100%, 780px); margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 32px) 64px; }
.ct-document .ct-brand { padding: 0; margin-bottom: 34px; }
.ct-client { padding: 28px 0; border-top: 1px solid var(--ct-line); }
.ct-client-title { margin: 12px 0 2px; font: 600 clamp(28px, 3.4vw, 38px)/1.1 var(--ct-font-display); letter-spacing: -.05em; }
.ct-client-role { margin: 0 0 14px; font-size: 14px; color: var(--ct-muted); }
.ct-client-section { margin-top: 18px; }
.ct-client-section h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.ct-client-section ul { list-style: none; margin: 0; padding: 0; }
.ct-client-section li { padding: 8px 0; border-top: 1px solid var(--ct-line-soft); font-size: 14px; color: var(--ct-muted); line-height: 1.5; }
.ct-client-section li strong { color: var(--ct-ink); font-weight: 600; }
.ct-doc-foot { margin-top: 28px; font: 500 10px var(--ct-font-mono); letter-spacing: .05em; color: var(--ct-subtle); }

/* Public pages */
.ct-login { width: min(100%, 460px); min-height: 100vh; margin: 0 auto; padding: 32px 22px; display: flex; flex-direction: column; justify-content: center; }
.ct-login .ct-brand { padding: 0; margin-bottom: 34px; }
.ct-login .ct-overline-index { display: block; font: 500 10px var(--ct-font-mono); letter-spacing: .05em; margin-bottom: 12px; }
.ct-login form { margin-top: 26px; }
/* Public posting and apply form (prototype "pv-public-main", "pv-apply") */
.ct-public { width: min(100%, 760px); margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 32px) 64px; }
.ct-public .ct-overline { margin-bottom: 14px; }
.ct-public-brand { padding: 0; margin-bottom: 34px; }
.ct-public .ct-post-description { margin: 22px 0 26px; font-size: 15px; line-height: 1.7; }
.ct-apply { padding: 24px; }
.ct-apply-title { margin: 0; font: 600 22px/1.1 var(--ct-font-display); letter-spacing: -.045em; }
.ct-apply .ct-card-head { margin-bottom: 18px; flex-wrap: wrap; }
.ct-apply .ct-card-right { font-size: 12px; }
.ct-apply-consent { margin-top: 18px; }
.ct-apply-consent .ct-notice { margin-bottom: 8px; }
.ct-apply-foot { margin-top: 18px; display: flex; justify-content: flex-end; }
.ct-check-line + .ct-field-error { margin-top: 0; }
.ct-legal { margin: 8px 0 0; font-size: 12px; color: var(--ct-subtle); }
/* Wording that waits on Riley and Jake's approval. Meant to be seen. */
.ct-placeholder { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 4px; border: 1px dashed color-mix(in srgb, var(--c-amber) 70%, transparent); border-radius: 3px; color: var(--c-amber); background: color-mix(in srgb, var(--c-amber) 10%, transparent); }
.ct-field-error { margin: 6px 0 0; font-size: 12px; color: var(--c-rose); }
.ct-input[aria-invalid=true] { border-color: color-mix(in srgb, var(--c-rose) 70%, var(--ct-line)); }
.ct-error-list { margin: 0; padding-left: 18px; }
.ct-file-input { padding: 7px 10px; color: var(--ct-muted); }
.ct-file-input::file-selector-button { margin-right: 10px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--ct-ink); background: var(--ct-surface); border: 1px solid var(--ct-line); border-radius: var(--ct-radius-sm); cursor: pointer; }
/* CSV import: the dry run table and counts. */
.ct-table-wrap { overflow-x: auto; }
.ct-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ct-table th, .ct-table td { padding: 9px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--ct-line); }
.ct-table th { border-top: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ct-muted); }
.ct-table .ct-num { font-variant-numeric: tabular-nums; color: var(--ct-muted); }
.ct-import-result small { display: block; margin-top: 4px; font-size: 12px; color: var(--ct-muted); }
.ct-import-counts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ct-import-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.ct-import-actions .ct-notice { flex: 1 1 320px; margin: 0; }
.ct-import-columns { margin-top: 14px; font-size: 13px; }
.ct-import-columns summary { cursor: pointer; font-weight: 600; }
form[data-import-form] .ct-action { margin-top: 14px; }
/* A field people never see; only a script fills it. */
.ct-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Apply-page submissions on the candidate overview */
.ct-submission + .ct-submission { margin-top: 18px; }
.ct-answers { margin: 10px 0 0; }
.ct-answer { padding: 9px 0; border-bottom: 1px solid var(--ct-line-soft); font-size: 14px; }
.ct-answer dt { color: var(--ct-muted); margin-bottom: 4px; }
.ct-answer dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ct-login-btn { margin-top: 14px; width: 100%; min-height: 46px; font-size: 13px; }

/* Sign-in intro. The server writes it once, over the page a sign-in lands on (LOGIN_STINGER_ENABLED).
   The frame is traced, lit by a sweep as the arrow comes through, then the lockup lands on the rail's
   own mark while the veil clears. CSS alone runs and ends it; app.js adds skip and the landing.
   Every time below is a share of --stinger-duration, so that one value rescales the whole thing. */
.ct-stinger {
  --stinger-duration: 2600ms;   /* whole timeline */
  --stinger-skip: 120ms;        /* fade on click or key press */
  --stinger-display: grid;      /* none switches it off from CSS */
  --stinger-bg: var(--ct-bg);
  --stinger-mark: var(--ct-accent);
  --stinger-ink: var(--ct-ink);
  --stinger-size: clamp(64px, 13vmin, 240px);   /* height of the mark; the word and rule follow it */
  position: fixed; inset: 0; z-index: 100; display: var(--stinger-display); place-items: center; overflow: hidden;
  animation: ct-stinger-life var(--stinger-duration) linear both;
}
.ct-stinger.is-skipped { animation: none; opacity: 0; pointer-events: none; transition: opacity var(--stinger-skip) linear; }
.ct-stinger-veil {
  position: absolute; inset: 0; background-color: var(--stinger-bg);
  background-image:
    radial-gradient(ellipse 74% 74% at 50% 50%, var(--stinger-bg) 0%, var(--stinger-bg) 42%, transparent 100%),
    repeating-linear-gradient(118deg, color-mix(in srgb, var(--stinger-bg) 58%, transparent) 0, transparent 13%, color-mix(in srgb, var(--stinger-bg) 58%, transparent) 26%),
    radial-gradient(circle, var(--ct-dot) 1.05px, transparent 1.45px);
  background-size: 100% 100%, 100% 100%, 26px 26px;
  animation: ct-stinger-veil var(--stinger-duration) linear both;
}
.ct-stinger-stage { position: relative; }
/* Same proportions as .ct-brand (26px mark, 9px gap, 19px word), so one uniform scale lands it there. */
.ct-stinger-lockup { display: flex; align-items: center; transform-origin: 0 0; will-change: transform, opacity; animation: ct-stinger-lockup calc(var(--stinger-duration) * .9) linear both, ct-stinger-out calc(var(--stinger-duration) * .1) linear calc(var(--stinger-duration) * .9) forwards; }
.ct-stinger-mark { position: relative; flex: none; width: var(--stinger-size); height: var(--stinger-size); margin-right: calc(var(--stinger-size) * 9 / 26); }
.ct-stinger-mark svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; fill: var(--stinger-mark); }
.ct-stinger-fill { animation: ct-stinger-sweep var(--stinger-duration) linear both; }
.ct-stinger-trace { fill: none; stroke: var(--stinger-mark); stroke-width: 1.6; stroke-dasharray: 1; animation: ct-stinger-trace var(--stinger-duration) linear both; }
.ct-stinger-arrow { animation: ct-stinger-arrow var(--stinger-duration) linear both; }
.ct-stinger-word { font: 700 calc(var(--stinger-size) * 19 / 26) var(--ct-font-display); letter-spacing: -.055em; white-space: nowrap; color: var(--stinger-ink); transform-origin: 0 50%; animation: ct-stinger-word var(--stinger-duration) linear both; }
.ct-stinger-word span { color: var(--stinger-mark); animation: ct-stinger-dot var(--stinger-duration) linear both; }
.ct-stinger-rule { position: absolute; left: 0; top: calc(100% + var(--stinger-size) * .3); width: 100%; min-width: 160px; height: 1px; background: linear-gradient(90deg, var(--stinger-mark), color-mix(in srgb, var(--stinger-mark) 0%, transparent)); transform-origin: 0 50%; animation: ct-stinger-rule var(--stinger-duration) linear both; }
/* While the lockup is in flight the rail's own brand waits unseen. Once it has landed the real one
   shows beneath it and the lockup fades off, so the swap is a crossfade, never a jump. */
.ct-stinger.is-flying:not(.is-landed):not(.is-skipped) ~ .ct-scaffold .ct-rail .ct-brand > * { opacity: 0; }
.ct-stinger.is-flying { --stinger-end: 1; }

@keyframes ct-stinger-life {
  0%, 80% { visibility: visible; pointer-events: auto; }
  81% { pointer-events: none; }
  100% { visibility: hidden; pointer-events: none; }
}
@keyframes ct-stinger-veil {
  0%, 72% { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  96%, 100% { opacity: 0; }
}
@keyframes ct-stinger-trace {
  0% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  30% { stroke-dashoffset: 0; }
  38% { opacity: 1; }
  48%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ct-stinger-sweep {
  0%, 24% { clip-path: polygon(-60% -10%, -60% -10%, -15% 110%, -60% 110%); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  48%, 100% { clip-path: polygon(-60% -10%, 120% -10%, 165% 110%, -60% 110%); }
}
@keyframes ct-stinger-arrow {
  0%, 26% { opacity: 0; transform: translate(-26px, 9.75px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  34% { opacity: 1; }
  52%, 100% { opacity: 1; transform: none; }
}
@keyframes ct-stinger-word {
  0%, 40% { opacity: 0; clip-path: inset(-20% 100% -20% -5%); transform: translateX(-.16em); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  44% { opacity: 1; }
  60%, 100% { opacity: 1; clip-path: inset(-20% -5% -20% -5%); }
  60%, 63% { transform: none; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  90%, 100% { transform: scaleX(var(--stinger-wx, 1)); }
}
@keyframes ct-stinger-dot {
  0%, 54% { opacity: 0; }
  60%, 100% { opacity: 1; }
}
@keyframes ct-stinger-rule {
  0%, 34% { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  58% { transform: scaleX(1); }
  64% { opacity: 1; }
  74%, 100% { transform: scaleX(1); opacity: 0; }
}
/* The flight runs over the first nine tenths (so 70% here is 63% of the whole) and the last tenth
   fades the landed lockup off. Without script it dissolves where it stands; app.js sets the landing
   offsets, the word's width correction (--stinger-wx) and --stinger-end. */
@keyframes ct-stinger-lockup {
  0%, 70% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  100% { opacity: var(--stinger-end, 0); transform: translate(var(--stinger-dx, 0px), var(--stinger-dy, 0px)) scale(var(--stinger-ds, .96)); }
}
@keyframes ct-stinger-out {
  from { opacity: var(--stinger-end, 0); }
  to { opacity: 0; }
}

@media (max-width: 920px) {
  .ct-scaffold { grid-template-columns: 60px minmax(0, 1fr); }
  .ct-rail { padding: 16px 8px; align-items: center; }
  .ct-brand { padding: 0; }
  .ct-brand img { margin: 0; }
  .ct-brand-word, .ct-nav-label, .ct-nav-count, .ct-me-text, .ct-rail-label { display: none; }
  /* Pages without the rail (public posting, sign-in) keep the full wordmark. */
  .ct-public-brand .ct-brand-word, .ct-login .ct-brand-word { display: inline; }
  .ct-public-brand img, .ct-login .ct-brand img { margin-right: 9px; }
  .ct-rail-link { justify-content: center; width: 42px; padding: 0; }
  .ct-rail-link[aria-current=page]::before { left: -8px; }
  .ct-me { padding: 12px 0 0; justify-content: center; }
  .ct-signout { padding: 0; }
  .ct-signout-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ct-signout-btn { justify-content: center; width: 42px; min-height: 42px; }
  /* The collapsed rail shows the mark alone, so the intro does too. */
  .ct-stinger { --stinger-size: clamp(72px, 18vmin, 132px); }
  .ct-stinger-word { display: none; }
  .ct-stinger-mark { margin-right: 0; }
  .ct-stinger-rule { left: 50%; margin-left: -80px; }
}
@media (max-width: 760px) {
  .ct-sl-head { display: none; }
  .ct-sl-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding-inline: 16px; }
  .ct-sl-rank { display: none; }
  .ct-sl-why { grid-column: 1 / -1; }
  .ct-sl-release { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .ct-sl-title { padding: 16px 16px 12px; }
  .ct-outcome { grid-template-columns: minmax(0, 1fr); }
  .ct-outcome-actions { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .ct-scaffold { grid-template-columns: 48px minmax(0, 1fr); }
  .ct-rail { padding: 12px 4px; gap: 18px; }
  .ct-rail-link { width: 38px; }
  .ct-rail-link[aria-current=page]::before { left: -4px; }
  .ct-topbar { min-height: 60px; padding-inline: 14px; }
  .ct-crumb { flex: 1; overflow: hidden; }
  .ct-crumb strong, .ct-crumb strong + .ct-slash { display: none; }
  .ct-command-trigger { width: 39px; padding: 0; justify-content: center; }
  .ct-command-trigger span, .ct-command-trigger kbd { display: none; }
  .ct-workspace { padding: 20px 14px 28px; }
  .ct-title { font-size: 32px; }
  .ct-head { margin: 10px 0 20px; }
  .ct-next { grid-template-columns: 1fr; gap: 16px; padding: 22px 0; }
  .ct-next-title { font-size: 30px; }
  .ct-tally { flex-direction: row; align-items: baseline; gap: 10px; text-align: left; }
  .ct-tally strong { font-size: 52px; }
  .ct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-tile { min-height: 112px; padding: 12px 13px; }
  .ct-tile-n { font-size: 36px; }
  .ct-tab { margin-right: 4px; padding-right: 8px; flex: 1 0 auto; }
  .ct-tab-n { display: none; }
  .ct-stat strong { font-size: 24px; }
  .ct-board { grid-template-columns: repeat(5, minmax(218px, 1fr)); height: clamp(390px, calc(100dvh - 300px), 600px); }
  .ct-quote-hero { padding: 20px 0 22px; }
  .ct-quote-hero blockquote { font-size: 27px; }
  .ct-card { padding: 18px 16px; }
  .ct-acc, .ct-sl { padding: 0; }
  .ct-acc-head, .ct-acc-body { padding-inline: 16px; }
  .ct-ev-body { grid-template-columns: 1fr; }
  .ct-log-row { grid-template-columns: 1fr; gap: 2px; }
  .ct-sheet-footer { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-sheet-footer > :nth-child(3) { grid-column: 1 / -1; }
  .ct-field-pair { grid-template-columns: 1fr; }
  .ct-apply { padding: 18px 16px; }
  .ct-field-pair > .ct-field + .ct-field { margin-top: 14px; }
  .ct-workspace-footer span:last-child { display: none; }
}
@media print {
  html, body { background: #fff !important; color: #191919; }
  .ct-preview-bar, .ct-stinger { display: none; }
  .ct-document { width: auto; padding: 8mm 4mm; }
  .ct-client { break-inside: avoid; border-color: #CF7248; }
  .ct-client-role, .ct-client-section li, .ct-doc-foot { color: #3a3938; }
  .ct-client-section li strong, .ct-brand { color: #191919; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  /* No intro at all: the page is simply there. */
  .ct-stinger { display: none; }
}

/* Stage control: the prototype's stage select, in the sheet and the record head */
.ct-stage-row { display: flex; align-items: center; gap: 8px; }
.ct-stage-select { width: auto; min-width: 150px; max-width: 200px; }
.ct-head-actions .ct-stage-form { align-self: flex-end; }
[data-js] [data-stage-submit] { display: none; }
.ct-item-days { font: 500 10px var(--ct-font-mono); letter-spacing: .04em; color: var(--ct-subtle); }
.ct-upload { margin-top: 14px; }
.ct-flow-form { display: inline-flex; gap: 8px; align-items: center; }
.ct-flow-controls { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ct-flow-controls form { display: inline; }
.ct-flow-add { margin-top: 14px; }
.ct-note-form { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; margin-bottom: 14px; }