/* style.css */
:root {
--bg: #F1F1EB;
--surface: #FBFBF8;
--ink: #172019;
--ink-2: #4A544C;
--ink-3: #626A63;
--line: #DCDDD5;
--line-strong: #C3C5BA;
--edge: #878C82;
--track: #E6E7E0;
--tick: rgba(23,32,25,.26);
--grid: rgba(36,77,61,.07);
--red: #b53a3f;
--amber: #8a5c00;
--green: #287b55;
--likely: #4f7013;
--red-fill: #ce4b50;
--amber-fill: #ad7a08;
--green-fill: #358d63;
--likely-fill: #5b8512;
--fill-shade: #000;
--red-soft: rgba(206,75,80,.12);
--amber-soft: rgba(221,165,29,.16);
--green-soft: rgba(60,152,108,.13);
--likely-soft: rgba(127,166,42,.15);
--accent: #244D3D;
--accent-hover: #183B2E;
--accent-ink: #FBFBF8;
--accent-soft: rgba(36,77,61,.10);
--btn-primary: var(--accent);
--btn-primary-hover: var(--accent-hover);
--btn-primary-ink: var(--accent-ink);
--focus: #244D3D;
--focus-soft: rgba(36,77,61,.16);
--focus-halo: 0 0 0 4px var(--focus-soft);
--toast-action: #BFD8C9;
--shadow: 0 1px 2px rgba(23,32,25,.05), 0 18px 40px -26px rgba(23,32,25,.32);
--shadow-modal: 0 30px 80px -32px rgba(23,32,25,.55), 0 2px 8px rgba(23,32,25,.08);
--r-ctl: 6px;
--r-surface: 12px;
--radius: var(--r-ctl);
--radius-lg: var(--r-surface);
--meter-h: 10px;
--fs-12: 12px;
--fs-13: 13.5px;
--fs-15: 15px;
--fs-17: 17px;
--fs-18: 18px;
--fs-20: 20px;
--fs-24: 24px;
--fs-28: 28px;
--fs-32: 32px;
--fs-48: 48px;
--fs-56: 56px;
--fs-num: 96px;
--track-display: -0.015em;
--font: "Instrument Sans", "Instrument Sans Fallback", "Instrument Sans Fallback Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
--display: "Instrument Serif", "Instrument Serif Fallback", "Instrument Serif Fallback Noto", Georgia, "Times New Roman", serif;
--muted: var(--ink-3);
--t1: 40; --t2: 70; --t3: 80;
color-scheme: light;
}
[data-theme="dark"] {
--bg: #111712;
--surface: #19211b;
--ink: #f2efe7;
--ink-2: #c0c6bd;
--ink-3: #9aa499;
--line: #2c372f;
--line-strong: #435046;
--edge: #5f6e63;
--track: #303a32;
--tick: rgba(242,239,231,.26);
--grid: rgba(145,185,161,.07);
--red: #F07B72;
--amber: #E9B949;
--green: #5CC98F;
--likely: #A9D34F;
--red-fill: #E0666A;
--amber-fill: #E0A832;
--green-fill: #4FB283;
--likely-fill: #97C23F;
--fill-shade: #fff;
--red-soft: rgba(224,102,106,.18);
--amber-soft: rgba(224,168,50,.18);
--green-soft: rgba(79,178,131,.18);
--likely-soft: rgba(151,194,63,.18);
--accent: #91b9a1;
--accent-hover: #afd0ba;
--accent-ink: #101711;
--accent-soft: rgba(145,185,161,.14);
--btn-primary: #2f7050;
--btn-primary-hover: #276146;
--btn-primary-ink: #F2EFE7;
--focus: #a8cdb5;
--focus-soft: rgba(168,205,181,.2);
--toast-action: #244D3D;
--shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.7);
--shadow-modal: 0 32px 80px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04) inset;
color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
margin: 0; height: 100vh; overflow: hidden;
background: var(--bg);
color: var(--ink);
font-family: var(--font);
font-size: var(--fs-15);
line-height: 1.45;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
}
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 600; }
::selection { background: var(--accent-soft); }
:is(.app-body, .editorial-shell) a:not(.btn, .brand) { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
:is(.app-body, .editorial-shell) a:not(.btn, .brand):hover { color: var(--ink); text-decoration-color: currentColor; }
.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; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-ctl); text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 36px; padding: 7px 14px;
border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-ctl);
cursor: pointer; font-size: var(--fs-13); font-weight: 500; line-height: 1.2; color: var(--ink);
transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--btn-primary); color: var(--btn-primary-ink); border-color: var(--btn-primary); }
.btn.primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.btn.primary:disabled, .btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); border-color: transparent; color: var(--ink); }
.btn.icon { padding: 7px; min-height: 0; }
a.btn { text-decoration: none; color: inherit; }
a.btn.primary, :is(.app-body, .editorial-shell) a.btn.primary { color: var(--btn-primary-ink); }
.link { background: none; border: 0; padding: 4px 2px; margin: -4px -2px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); cursor: pointer; font-size: var(--fs-13); line-height: 1.25; }
.link:hover { color: var(--ink); text-decoration-color: currentColor; }
.hint { color: var(--ink-3); font-size: var(--fs-13); }
.hint.error { color: var(--red); }
.row { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.lock { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.field-label { display: block; font-weight: 600; font-size: var(--fs-12); color: var(--ink-2); margin-bottom: 6px; }
textarea {
width: 100%; resize: vertical; border: 1px solid var(--edge); border-radius: var(--r-ctl);
background: var(--surface); padding: 12px 14px; line-height: 1.55; font-size: var(--fs-15);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
textarea:focus-visible, .url-row input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--accent); box-shadow: var(--focus-halo); }
textarea::placeholder, input::placeholder { color: var(--ink-3); }
.url-row { display: flex; gap: 8px; margin-bottom: 8px; }
.url-row input {
flex: 1; min-width: 0; min-height: 36px; border: 1px solid var(--edge); border-radius: var(--r-ctl);
background: var(--surface); padding: 7px 12px; font-size: var(--fs-15); line-height: 1.3;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.url-row .btn { white-space: nowrap; }
.source-link { text-decoration: none; color: var(--ink-2); }
.source-link:hover { text-decoration: underline; }
:is(body.app-body, body.editorial-shell) {
min-height: 100vh;
height: 100vh;
display: grid;
grid-template-columns: 184px minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
overflow: hidden;
background: var(--bg);
}
.top { display: flex; align-items: center; gap: 10px; padding: 12px 28px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: var(--fs-18); }
.brand-mark { width: 26px; height: 16px; display: block; color: var(--ink); }
.top-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.top-actions .btn { white-space: nowrap; }
:is(.app-body, .editorial-shell) .top {
grid-column: 1;
grid-row: 1 / 3;
min-height: 0;
padding: 20px 14px 14px;
border: 0;
border-right: 1px solid var(--line);
background: var(--bg);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 24px;
}
:is(.app-body, .editorial-shell) .brand { padding: 0 9px; gap: 9px; color: var(--ink); font-family: var(--display); font-size: var(--fs-20); font-weight: 400; letter-spacing: var(--track-display); text-decoration: none; border-radius: var(--r-ctl); }
:is(.app-body, .editorial-shell) .feather-mark { width: 24px; height: 24px; color: color-mix(in srgb, var(--accent) 82%, var(--surface)); overflow: visible; }
:is(.app-body, .editorial-shell) .feather-mark path:first-child { fill: color-mix(in srgb, currentColor 22%, transparent); stroke: currentColor; stroke-width: 1.2; }
:is(.app-body, .editorial-shell) .feather-mark path:last-child { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; }
:is(.app-body, .editorial-shell) .top-actions { margin: 0; display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
:is(.app-body, .editorial-shell) .top-actions .nav-item {
justify-content: flex-start;
gap: 11px;
width: 100%;
min-height: 36px;
padding: 8px 10px;
border: 0;
border-radius: var(--r-ctl);
color: var(--ink-2);
font-size: var(--fs-13);
font-weight: 500;
text-decoration: none;
}
:is(.app-body, .editorial-shell) .top-actions .nav-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
:is(.app-body, .editorial-shell) .top-actions .nav-item.active {
color: var(--ink);
background: color-mix(in srgb, var(--accent) 11%, var(--surface));
font-weight: 600;
}
:is(.app-body, .editorial-shell) .top-actions .nav-item.active svg { color: var(--accent); }
:is(.app-body, .editorial-shell) .top-actions .nav-item svg {
width: 16px; height: 16px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
:is(.app-body, .editorial-shell) .side-help { display: none; }
:is(.app-body, .editorial-shell) .top > #theme-btn { margin-top: auto; align-self: flex-start; padding: 8px; color: var(--ink-3); border-color: transparent; background: transparent; }
:is(.app-body, .editorial-shell) .top > #theme-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
:is(.app-body, .editorial-shell) .top > #theme-btn svg { width: 18px; height: 18px; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 28px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-12); background: var(--bg); }
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-links a, :is(.app-body, .editorial-shell) .foot-links a:not(.btn) { color: var(--ink-3); text-decoration: none; padding: 6px 0; display: inline-block; }
.foot-links a:hover, :is(.app-body, .editorial-shell) .foot-links a:not(.btn):hover { color: var(--ink); text-decoration: underline; }
.app-body .foot { grid-column: 2; grid-row: 2; padding: 6px 28px; }
.app-body .app {
grid-column: 2;
grid-row: 1;
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: start;
overflow: auto;
background: var(--bg);
}
.pane { min-width: 0; }
.pane:focus:not(:focus-visible) { outline: none; }
.workspace-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
column-gap: 40px;
padding: 36px 48px 28px;
}
.head-copy { min-width: 0; }
.workspace-kicker, .page-kicker { display: block; margin: 0 0 6px; color: var(--ink-3); font-size: var(--fs-12); line-height: 1.3; font-weight: 500; }
.workspace-head h2 {
font-family: var(--display);
font-size: var(--fs-48);
line-height: 1.02;
font-weight: 400;
letter-spacing: var(--track-display);
text-wrap: balance;
max-width: 7.36em;
}
.workspace-subtitle { max-width: 30.636em; margin: 16px 0 0; color: var(--ink-2); font-size: var(--fs-18); line-height: 1.5; }
.head-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.head-actions .btn { min-height: 44px; padding-inline: 18px; font-size: var(--fs-15); }
.app:is(.has-cv, .has-job) #sample-btn-2 { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.app:is(.has-cv, .has-job) #sample-btn-2:hover { border-color: var(--ink-3); }
.allowance-line { margin: 12px 0 0; color: var(--ink-3); font-size: var(--fs-13); }
.free-promise { margin: 16px 0 0; max-width: 46ch; color: var(--ink-2); font-size: var(--fs-15); line-height: 1.5; }
.free-promise + .allowance-line { margin-top: 4px; }
.plan-offer { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.plan-offer strong { color: var(--ink); font-weight: 600; }
.cl-free-score { margin: 0 0 10px; font-size: var(--fs-15); color: var(--ink); }
.cl-free-score .cl-fs-label { font-weight: 600; }
.cl-free-score .cl-fs-n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--band); }
.cl-free-score .cl-fs-note { color: var(--ink-3); font-size: var(--fs-13); }
.workspace-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.workspace-head .role-meta { display: flex; gap: 4px 14px; align-items: baseline; flex-wrap: wrap; margin: 0; color: var(--ink-3); font-size: var(--fs-13); min-width: 0; }
.app[data-stage="empty"] .workspace-kicker,
.app[data-stage="empty"] .workspace-actions { display: none; }
.app:not([data-stage="ready"]) .workspace-head .role-meta { display: none; }
.app:not([data-stage="empty"]) :is(.specimen-panel, .allowance-line, .free-promise, .head-actions, .recent-jobs) { display: none; }
.recent-jobs { margin: 18px 0 0; max-width: 34rem; }
.recent-jobs[hidden] { display: none; }
.recent-jobs h3 { margin: 0 0 8px; font-size: var(--fs-15); font-weight: 600; color: var(--ink); }
.recent-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); overflow: hidden; }
.recent-list li + li { border-top: 1px solid var(--line); }
.recent-list li[hidden] { display: none; }
.recent-job {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px; padding: 10px 14px;
border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.recent-job strong { font-size: var(--fs-15); font-weight: 600; }
.recent-job span { font-size: var(--fs-13); color: var(--ink-3); }
.recent-job:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.recent-job:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -2px; }
.recent-jobs #recent-more { margin-top: 8px; font-size: var(--fs-13); }
.recent-jobs #recent-more[hidden] { display: none; }
.app[data-stage="empty"] .workspace-head {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 56px;
align-items: start;
max-width: 1336px;
}
.app[data-stage="empty"] .specimen-panel { margin-top: 6px; }
@media (min-width: 1101px) and (max-width: 1320px) {
.app[data-stage="empty"] .workspace-head { column-gap: 44px; }
}
.app[data-stage="empty"] .workspace-head h2 { font-size: var(--fs-56); line-height: 1; max-width: 7.36em; }
@media (min-width: 1101px) and (min-height: 801px) {
.app[data-stage="empty"] .workspace-head { align-items: center; }
.app[data-stage="empty"] .specimen-panel { margin-top: 0; gap: 12px; }
.app[data-stage="empty"] .specimen { gap: 12px; }
}
.specimen-panel {
grid-column: 2; grid-row: 1;
display: flex; flex-direction: column; gap: 16px;
width: auto; max-width: 560px;
padding: 18px 22px 20px;
border: 1px solid var(--line);
border-radius: var(--r-surface);
background-color: var(--surface);
background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 8px 8px;
background-position: -1px -1px;
}
.spec-caption { margin: 0; color: var(--ink-3); font-size: var(--fs-12); font-weight: 500; line-height: 1.35; }
.specimen { display: flex; flex-direction: column; gap: 16px; }
.specimen-instrument { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "dial verdict" "readout verdict"; column-gap: 24px; align-items: center; }
.specimen-dial { --d: 128px; grid-area: dial; }
.specimen-readout { grid-area: readout; display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 18px; }
.specimen-num { font-family: var(--display); font-size: var(--fs-48); line-height: .8; letter-spacing: var(--track-display); font-variant-numeric: lining-nums; }
.specimen-of { font-size: var(--fs-12); color: var(--ink-3); }
.spec-verdict { grid-area: verdict; margin: 0; max-width: 16.104em; font-size: var(--fs-17); font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); text-wrap: pretty; }
.specimen-rows { display: flex; flex-direction: column; gap: 10px; }
.spec-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 1.332em 4.662em; grid-template-areas: "label track val band"; column-gap: 10px; align-items: center; }
.spec-label { grid-area: label; font-size: var(--fs-13); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-val { grid-area: val; font-family: var(--font); font-weight: 600; font-size: var(--fs-15); line-height: 1; color: var(--band); font-variant-numeric: tabular-nums; text-align: right; }
.spec-band { grid-area: band; justify-self: start; font-size: var(--fs-13); line-height: 1; color: var(--band); }
.spec-track { grid-area: track; position: relative; display: block; height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--edge) 45%, transparent); }
.spec-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--band-fill); }
.spec-rule { height: 1px; margin: 2px 0 0; border: 0; background: var(--line); }
.spec-fix { display: flex; flex-direction: column; gap: 6px; }
.spec-fix p { margin: 0; text-wrap: pretty; }
.spec-fix-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
.spec-before, .spec-after { padding-left: 0; }
.spec-before del { color: var(--ink-3); font-size: var(--fs-13); line-height: 1.45; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 70%, transparent); }
.spec-after ins {
text-decoration: none; color: var(--ink); font-size: var(--fs-15); line-height: 1.5;
background: color-mix(in srgb, var(--accent) 12%, transparent);
padding: 1px 4px; border-radius: 3px;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.spec-fix-note { padding-left: 0; color: var(--ink-3); font-size: var(--fs-12); }
.ad-block, .cv-block { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-surface); background: var(--surface); padding: 20px; }
.step-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.step-head > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.step-head strong { font-size: var(--fs-15); font-weight: 600; }
.step-head small { margin-top: 2px; color: var(--ink-3); font-size: var(--fs-12); }
.step-num {
display: block; flex: none;
width: 28px;
font-family: var(--display); font-size: var(--fs-32); line-height: 1; font-weight: 400;
color: var(--accent); text-align: center;
font-variant-numeric: lining-nums;
}
#job-ad { min-height: 118px; }
.job-text-option { margin-top: 6px; }
.job-text-option summary {
display: inline-flex; align-items: center; gap: 9px; width: fit-content;
padding: 6px 0; list-style: none; cursor: pointer;
color: var(--ink-2); font-size: var(--fs-13); font-weight: 500; text-decoration: none;
}
.job-text-option summary::-webkit-details-marker { display: none; }
.job-text-option summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 150ms ease; margin-left: 1px; }
.job-text-option[open] summary::before { transform: rotate(45deg); }
.job-text-option summary:hover { color: var(--ink); }
.job-text-option[open] summary { margin-bottom: 6px; }
.ad-open > .row { margin-top: 8px; }
.ad-collapsed { padding: 0; }
.role-title { font-family: var(--display); font-weight: 400; font-size: var(--fs-24); line-height: 1.1; letter-spacing: var(--track-display); }
.role-meta { display: flex; gap: 6px 14px; align-items: baseline; flex-wrap: wrap; color: var(--ink-3); font-size: var(--fs-13); margin-top: 6px; }
.cv-block { display: flex; flex-direction: column; position: relative; min-height: 0; }
.cv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; min-height: 32px; }
.cv-head .field-label { margin: 0; }
.cv-tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.upload-cta { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-soft); font-weight: 600; }
.upload-cta:hover { border-color: var(--accent); }
.cv-donot { margin: 0 0 10px; font-size: var(--fs-12); line-height: 1.4; max-width: 47.952em; }
.cv-experience { margin: 0 0 8px; font-size: var(--fs-12); color: var(--ink-3); text-wrap: pretty; }
.file-chip {
display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
margin: 0 0 10px; padding: 10px 12px;
border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface);
font-size: var(--fs-13); color: var(--ink-2);
}
.file-chip[hidden] { display: none; }
.file-row { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; width: 100%; }
.file-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.file-name { font-weight: 600; color: var(--ink); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.file-meta { color: var(--ink-3); white-space: nowrap; }
.file-change { margin-left: auto; }
.file-chip .link { min-height: 32px; }
.file-note { margin: 2px 0 0; padding: 6px 10px; border-radius: var(--r-ctl); background: var(--amber-soft); color: var(--ink); font-size: var(--fs-13); line-height: 1.45; text-wrap: pretty; }
.file-chip.is-error { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); background: var(--red-soft); color: var(--ink); gap: 8px; }
.file-error-msg { margin: 0; line-height: 1.5; text-wrap: pretty; }
.file-tips { margin: 0; padding-left: 18px; line-height: 1.5; }
.file-tips li + li { margin-top: 4px; }
.file-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.read-text {
max-height: min(55vh, 520px); overflow: auto; margin: 12px 0;
padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--bg, var(--surface));
font: inherit; font-size: var(--fs-13); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink);
}
.cv-outline {
display: flex; align-items: center; gap: 6px; margin: 0 0 8px; min-height: 32px;
overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
scroll-padding-inline: 16px;
padding-right: 24px;
}
.cv-outline::-webkit-scrollbar { display: none; }
.cv-outline > span { flex: none; color: var(--ink-3); font-size: var(--fs-12); font-weight: 500; margin-right: 2px; }
.cv-outline button { flex: none; min-height: 28px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); padding: 3px 10px; font: inherit; font-size: var(--fs-12); cursor: pointer; white-space: nowrap; }
.cv-outline button:hover, .cv-outline button:focus-visible { border-color: var(--accent); color: var(--accent); }
#cv { min-height: 260px; flex: 1; }
#cv::placeholder { text-align: center; }
.drop-glyph { display: none; }
.drop-hint {
display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
padding: 10px 16px; border: 1px dashed var(--accent); border-radius: var(--r-ctl);
background: var(--surface); color: var(--ink-2); font-weight: 500; font-size: var(--fs-15);
pointer-events: none; z-index: 3; white-space: nowrap;
}
.cv-block.dragover .drop-hint { display: block; }
.cv-block.dragover #cv { border-color: var(--accent); box-shadow: var(--focus-halo); }
.cv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; }
.cv-foot .status { flex-basis: 100%; }
.cv-foot .status:empty { display: none; }
.status { color: var(--ink-2); font-size: var(--fs-13); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status.error { color: var(--red); }
.status .link { font-weight: 500; }
.draft-status { margin-left: auto; color: var(--ink-3); font-size: var(--fs-12); white-space: normal; }
.draft-status.saved::before { content: "✓ "; color: var(--green); }
.app:not(.has-cv) #save-cv-btn { display: none; }
#save-cv-btn.is-saved, #save-spec-btn.is-saved { color: var(--ink-2); text-decoration: none; }
#save-cv-btn.is-saved::before, #save-spec-btn.is-saved::before { content: "✓"; color: var(--green); margin-right: 4px; font-weight: 600; }
#save-cv-btn.is-saved:hover, #save-spec-btn.is-saved:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .cv-head { flex-wrap: wrap; row-gap: 4px; } }
.app.has-cv .cv-block > .step-head,
.app.has-cv #cv-donot { display: none; }
.app.has-cv .cv-head { min-height: 40px; margin: -6px 0 8px; flex-wrap: wrap; row-gap: 4px; }
.app.has-cv .cv-tools { flex-wrap: nowrap; }
.app.has-cv .cv-head .field-label { font-size: var(--fs-15); font-weight: 600; color: var(--ink); }
.app.has-cv #upload-btn {
min-height: 0; padding: 4px 2px; margin: -4px -2px; border: 0; background: none; border-radius: 0;
color: var(--ink-2); font-weight: 400; font-size: var(--fs-13);
text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.app.has-cv #upload-btn:hover { color: var(--ink); text-decoration-color: currentColor; }
.app:not(.has-cv) .cv-head .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app:not(.has-cv) .cv-head { justify-content: flex-start; }
.app[data-stage="empty"]:not(.has-cv) .cv-block {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto auto auto;
grid-template-areas: "step" "drop" "chip" "note" "foot";
}
.app[data-stage="empty"]:not(.has-cv) .cv-block > .step-head { grid-area: step; }
.app[data-stage="empty"]:not(.has-cv) .cv-block > #cv {
grid-area: drop;
min-height: 220px;
border: 1.5px dashed var(--edge); border-radius: var(--r-surface);
background: color-mix(in srgb, var(--surface) 50%, var(--bg));
resize: none;
}
.app[data-stage="empty"]:not(.has-cv) .cv-block > #cv:placeholder-shown { padding-top: 68px; }
.app[data-stage="empty"]:not(.has-cv) .cv-block > #cv:focus-visible { border-style: solid; }
.app[data-stage="empty"]:not(.has-cv) .drop-glyph {
display: block; grid-area: drop; align-self: start; justify-self: center;
width: 24px; height: 24px; margin-top: 32px;
fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
pointer-events: none; position: relative; z-index: 1;
transition: opacity 120ms ease;
}
.app[data-stage="empty"]:not(.has-cv) .cv-block:focus-within .drop-glyph { opacity: 0; }
.app[data-stage="empty"]:not(.has-cv) .cv-block > .cv-head {
grid-area: drop; align-self: end; justify-self: center;
margin: 0 0 20px; min-height: 0; position: relative; z-index: 2;
}
.app[data-stage="empty"]:not(.has-cv) .cv-block > #cv-donot {
grid-area: note; margin: 8px 0 0; color: var(--ink-3); font-size: var(--fs-12); line-height: 1.4;
}
.app[data-stage="empty"]:not(.has-cv) .cv-block > .cv-foot { grid-area: foot; }
.app[data-stage="empty"]:not(.has-cv) .cv-block > .file-chip { grid-area: chip; margin: 10px 0 0; }
.app[data-stage="empty"]:not(.has-cv) .cv-block.dragover #cv { border-style: solid; }
.pane-foot { display: contents; }
.analysis-action { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.analysis-action .btn.primary { min-height: 44px; font-size: var(--fs-15); font-weight: 600; }
.analysis-action .btn.is-waiting { opacity: .45; cursor: not-allowed; }
.analysis-action .btn.is-waiting:hover { background: var(--btn-primary); border-color: var(--btn-primary); }
.analyse-hint { margin: 0; text-align: center; color: var(--ink-3); font-size: var(--fs-13); }
.usage-left { margin: 0; text-align: center; color: var(--ink-2); font-size: var(--fs-13); }
.trust-line { display: flex; gap: 7px; align-items: flex-start; justify-content: center; margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: 1.45; text-align: center; }
.trust-line .lock { margin-top: 3px; }
.trust-line a:not(.btn) { color: var(--ink-2); white-space: nowrap; }
.latency { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.latency-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-fill); box-shadow: 0 0 0 3px var(--green-soft); }
.latency.busy .latency-dot, .latency.failed .latency-dot { background: var(--amber-fill); box-shadow: 0 0 0 3px var(--amber-soft); animation: pulse .8s ease-in-out infinite; }
.latency.paused .latency-dot { background: var(--red-fill); box-shadow: 0 0 0 3px var(--red-soft); animation: none; }
@keyframes pulse { 50% { opacity: .3; } }
.app[data-stage="empty"] .pane-right { display: none; }
.app-body .app[data-stage="empty"] .pane-left {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
align-items: stretch;
gap: 14px 16px;
margin: 0 48px 36px;
max-width: 1240px;
}
.app[data-stage="empty"] .ad-block,
.app[data-stage="empty"] .cv-block { min-height: 250px; }
.app[data-stage="empty"] .ad-open { display: flex; flex-direction: column; height: 100%; }
.app[data-stage="empty"] .job-text-option[open] { display: flex; flex-direction: column; flex: 1; }
.app[data-stage="empty"] #job-ad { flex: 1; min-height: 150px; resize: none; }
.app[data-stage="empty"] .analysis-action,
.app[data-stage="empty"] .trust-line { grid-column: 1 / -1; }
.app[data-stage="empty"] .analysis-action { max-width: 520px; width: 100%; justify-self: center; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-head {
display: flex; align-items: baseline; gap: 8px 16px;
min-height: 64px; padding: 12px 28px;
border-bottom: 1px solid var(--line);
}
.app:is([data-stage="ready"], [data-stage="reading"]) .head-copy { display: contents; }
.app:is([data-stage="ready"], [data-stage="reading"]) :is(.workspace-kicker, .workspace-subtitle) { display: none; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-head h2 {
flex: 0 1 auto; min-width: 0; max-width: 45%;
font-size: var(--fs-28); line-height: 1.15;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap;
}
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-head .role-meta { flex: none; flex-wrap: nowrap; white-space: nowrap; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-actions { flex: none; align-self: center; margin-left: auto; flex-wrap: nowrap; }
.app:is([data-stage="ready"], [data-stage="reading"]) .sample-banner { flex: 0 0 auto; }
.app:is([data-stage="ready"], [data-stage="reading"]) #head-clear-btn { flex: none; }
@media (min-width: 861px) and (max-width: 1365px) {
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-head #role-count { display: none; }
.app:is([data-stage="ready"], [data-stage="reading"]) #sample-switch-btn { display: none; }
}
.app:is([data-stage="ready"], [data-stage="reading"]) :is(#sample-btn, #sample-picker-btn) { display: none; }
#clear-btn { display: none; }
.app:is([data-stage="ready"], [data-stage="reading"]) .ad-collapsed { display: none; }
.app:is([data-stage="ready"], [data-stage="reading"]) .ad-block.ad-shut { display: none; }
.app:is([data-stage="ready"], [data-stage="reading"]) #job-ad { height: 280px; min-height: 160px; }
.pane-right { position: relative; }
.app:is([data-stage="ready"], [data-stage="reading"]) .pane-left { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .pane-right { padding: 20px 24px 40px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .ad-block { padding: 16px; flex: none; }
.app:is([data-stage="ready"], [data-stage="reading"]) .cv-block { padding: 14px 16px 12px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .pane-foot { display: flex; align-items: center; gap: 16px; flex: none; }
.app:is([data-stage="ready"], [data-stage="reading"]) .trust-line { order: 1; flex: 1 1 auto; justify-content: flex-start; text-align: left; font-size: var(--fs-12); }
.app:is([data-stage="ready"], [data-stage="reading"]) .analysis-action { order: 2; flex: none; flex-direction: row; justify-content: flex-end; align-items: center; }
.app:is([data-stage="ready"], [data-stage="reading"]) .analysis-action .btn { min-height: 32px; padding: 5px 12px; font-size: var(--fs-13); font-weight: 500; }
.app:is([data-stage="ready"], [data-stage="reading"]) .analysis-action .analyse-hint { order: -1; text-align: right; }
.app:is([data-stage="ready"], [data-stage="reading"]) .analysis-action { position: static; width: auto; }
.app .analysis-action #analyse-btn.is-rescore {
min-height: 24px; padding: 0; border: 0; border-radius: 2px; background: none;
color: var(--ink-3); font-size: var(--fs-13); font-weight: 500;
text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.app .analysis-action #analyse-btn.is-rescore:is(:hover, :focus-visible) { color: var(--ink); text-decoration-color: currentColor; }
.app:is([data-stage="ready"], [data-stage="reading"]) .pane-foot.is-rating { flex-direction: column; align-items: stretch; gap: 10px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .analysis-action.is-rating { order: 0; flex-direction: column; align-items: stretch; gap: 8px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .analysis-action.is-rating .analyse-hint { order: 0; text-align: left; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.4; }
.app:is([data-stage="ready"], [data-stage="reading"]) .analysis-action.is-rating .btn { order: 1; min-height: 44px; font-size: var(--fs-15); font-weight: 600; }
.sample-banner {
display: inline-flex; align-items: center; gap: 12px;
min-height: 34px; padding: 0 4px 0 12px;
border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
border-radius: 999px;
background: var(--accent-soft);
font-size: var(--fs-13); color: var(--ink);
white-space: nowrap;
}
.sample-banner p { margin: 0; font-size: var(--fs-13); color: var(--ink); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sample-banner .link { flex: none; }
.sample-banner #use-own-btn { flex: none; min-height: 28px; padding: 3px 12px; border-radius: 999px; font-size: var(--fs-13); }
@media (min-width: 960px) and (min-height: 561px) {
.app-body .app:is([data-stage="ready"], [data-stage="reading"]) {
grid-template-columns: minmax(380px, 40%) minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
}
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-head { grid-column: 1 / -1; grid-row: 1; }
.app:is([data-stage="ready"], [data-stage="reading"]) .pane-left { grid-column: 1; grid-row: 2; min-height: 0; overflow: auto; border-right: 1px solid var(--line); }
.app:is([data-stage="ready"], [data-stage="reading"]) .pane-right { grid-column: 2; grid-row: 2; min-height: 0; overflow: auto; overscroll-behavior: contain; scroll-padding-top: 72px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .cv-block { flex: 1 0 auto; min-height: 0; overflow: hidden; }
.app:is([data-stage="ready"], [data-stage="reading"]) #cv { flex: 1; min-height: 320px; resize: none; }
}
@media (min-width: 960px) and (max-width: 1180px) and (min-height: 561px) {
.app.has-cv .cv-head { flex-wrap: wrap; row-gap: 4px; margin-top: -4px; }
.app.has-cv .cv-tools { flex: 1 1 100%; justify-content: flex-start; flex-wrap: nowrap; gap: 16px; }
}
@media (max-width: 1179px) {
.app:is([data-stage="ready"], [data-stage="reading"]) #cv-count { display: none; }
}
.cv-tools :is(.link, #upload-btn) { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1320px) and (min-height: 561px) {
.score-block { column-gap: 28px; padding-inline: 24px; }
.score-block .score-dial { --d: 200px; }
.score-block .score-num { font-size: 80px; }
.score-actions { flex-wrap: nowrap; }
}
.board { display: flex; flex-direction: column; gap: 28px; max-width: 980px; }
.empty-state { display: none; }
.score-block {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "meta meta" "dial side";
column-gap: 36px; row-gap: 14px;
align-items: start;
padding: 20px 28px 24px;
border: 1px solid var(--line);
border-radius: var(--r-surface);
background: var(--surface);
box-shadow: var(--shadow);
}
.board-title { grid-area: meta; margin: 0; font-size: var(--fs-13); font-weight: 400; color: var(--ink-3); }
.score-instrument { grid-area: dial; display: flex; flex-direction: column; align-items: center; }
.score-side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.score-verdict { margin: 0; font-size: var(--fs-20); line-height: 1.35; color: var(--ink); font-weight: 500; letter-spacing: -.005em; text-wrap: pretty; }
.score-verdict:empty { display: none; }
.score-sub { font-size: var(--fs-13); color: var(--ink-2); line-height: 1.45; }
.score-sub:empty { display: none; }
.score-sub .warn { color: var(--amber); }
.method { font-size: var(--fs-13); color: var(--ink-2); }
.method summary { width: fit-content; cursor: pointer; color: var(--ink-2); padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.method summary:hover { color: var(--ink); }
.method p { margin: 6px 0 0; max-width: 39.96em; line-height: 1.5; }
.method .legend { margin-top: 8px; }
.score-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.score-actions .btn { min-height: 36px; white-space: nowrap; }
.score-actions .btn.ghost { padding-inline: 0; margin-right: 8px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.score-actions .btn.ghost:hover { background: transparent; text-decoration-color: currentColor; }
.score-dial { --d: 240px; --ring: calc(var(--d) * .06); position: relative; width: var(--d); height: calc(var(--d) / 2); flex: none; }
.gauge { position: absolute; left: 0; top: 0; width: var(--d); height: calc(var(--d) / 2); overflow: hidden; }
.gauge-track, .gauge-zones, .gauge-ticks { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); border-radius: 50%; }
.gauge-track { box-shadow: inset 0 0 0 var(--ring) var(--track); }
.gauge-zones {
background: conic-gradient(from 270deg,
var(--red-fill) 0 calc(var(--t1) * 1.8deg - 1deg), transparent 0 calc(var(--t1) * 1.8deg + 1deg),
var(--amber-fill) 0 calc(var(--t2) * 1.8deg - 1deg), transparent 0 calc(var(--t2) * 1.8deg + 1deg),
var(--likely-fill) 0 calc(var(--t3) * 1.8deg - 1deg), transparent 0 calc(var(--t3) * 1.8deg + 1deg),
var(--green-fill) 0 180deg, transparent 180deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + .5px));
mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + .5px));
}
.gauge-ticks {
background: repeating-conic-gradient(from 269.5deg, var(--tick) 0 1deg, transparent 1deg 18deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring) - 8px), #000 calc(100% - var(--ring) - 7.5px) calc(100% - var(--ring) - 3px), transparent calc(100% - var(--ring) - 2.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring) - 8px), #000 calc(100% - var(--ring) - 7.5px) calc(100% - var(--ring) - 3px), transparent calc(100% - var(--ring) - 2.5px));
}
.gauge-needle {
position: absolute; width: 4px; height: calc(var(--d) * .4); left: calc(var(--d) / 2 - 2px); top: calc(var(--d) / 2);
background: var(--ink);
clip-path: polygon(0 0, 100% 0, 65% 100%, 35% 100%);
transform-origin: 50% 0; transform: rotate(calc(var(--pct, 0) * 1.8deg + 90deg));
transition: transform 800ms cubic-bezier(.2,.9,.3,1.08);
}
.score-dial::before { content: ""; position: absolute; z-index: 1; left: calc(var(--d) / 2 - 5px); top: calc(var(--d) / 2 - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.score-block.empty .gauge-needle, .score-block.empty .score-dial::before { opacity: .35; }
.app[data-stage="reading"] :is(.score-actions, .method, .score-verdict, .score-sub, .score-delta) { display: none; }
.app:not(.has-cv) :is(.score-actions, .method, #bar-next, #cover-letter-btn) { display: none; }
.app[data-stage="reading"] .score-readout { visibility: hidden; }
.score-dial::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.zone-label { position: absolute; top: calc(100% + 5px); font-size: var(--fs-12); line-height: 1; color: var(--ink-3); }
.zone-label.lo { left: 0; }
.zone-label.hi { right: 0; }
.score-readout { display: flex; flex-direction: column; align-items: center; margin-top: 18px; }
.score-num {
font-family: var(--display); font-weight: 400; font-size: var(--fs-num); line-height: .86; letter-spacing: -.02em;
color: var(--ink); min-width: 1.2ch; text-align: center; font-variant-numeric: lining-nums tabular-nums;
}
.score-label { font-size: var(--fs-13); color: var(--ink-3); margin-top: 2px; }
.bar-delta, .score-delta { padding: 2px 8px; border-radius: 999px; font-size: var(--fs-12); font-weight: 600; font-variant-numeric: tabular-nums; background: var(--green-soft); color: color-mix(in srgb, var(--green) 75%, var(--ink)); white-space: nowrap; }
.bar-delta.down, .score-delta.down { background: var(--red-soft); color: color-mix(in srgb, var(--red) 75%, var(--ink)); }
.score-delta { margin-top: 8px; }
.score-bar { position: relative; height: 0; z-index: 7; grid-column: 2; grid-row: 2; align-self: start; }
.app[data-stage="empty"] .score-bar { display: none; }
.score-bar-inner {
position: absolute; left: 0; right: var(--pane-sbw, 0px); top: 0; height: 52px;
display: flex; align-items: center; gap: 16px;
padding: 0 24px;
background: var(--surface);
box-shadow: 0 1px 0 var(--line);
font-size: var(--fs-13); color: var(--ink-2);
visibility: hidden; opacity: 0; transform: translateY(-6px);
transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.score-bar-inner::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: 6px; background: linear-gradient(var(--bg) 40%, transparent); pointer-events: none; }
.group, .meter { scroll-margin-top: 72px; }
.score-bar.show .score-bar-inner { visibility: visible; opacity: 1; transform: none; transition: opacity 160ms ease, transform 160ms ease; }
.bar-score { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink-2); }
.score-bar .n { font-family: var(--font); font-weight: 600; font-size: var(--fs-24); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bar-clear { color: var(--ink-2); }
#bar-next { margin-left: auto; min-height: 32px; padding: 5px 14px; }
.notice { border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); padding: 10px 14px; font-size: var(--fs-13); color: var(--ink-2); }
.notice.paused { border-color: var(--amber-fill); color: var(--ink); background: var(--amber-soft); }
.notice.paused .link { margin-left: 6px; }
.notice.remote-note { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-soft); color: var(--ink); font-size: var(--fs-14, 14px); line-height: 1.45; }
.board.paused .meters { opacity: .55; }
.group {
container: grp / inline-size;
border: 1px solid var(--line);
border-radius: var(--r-surface);
background: var(--surface);
overflow: clip;
}
.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.group-head h2, .group > h2 { font-family: var(--font); font-size: var(--fs-17); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); }
.group-meta { font-size: var(--fs-13); color: var(--ink-3); }
.group-note { margin: 0; padding: 10px 20px; border-bottom: 1px solid var(--line); font-size: var(--fs-13); color: var(--ink-2); line-height: 1.45; }
.honesty { color: var(--ink-3); }
.legend { font-size: var(--fs-12); color: var(--ink-3); display: flex; gap: 6px 12px; flex-wrap: wrap; }
.legend .seg { display: inline-flex; align-items: center; gap: 6px; }
.legend .seg::before { content: ""; width: 14px; height: 6px; border-radius: 3px; background: var(--ink-3); }
.legend .seg[data-band="red"]::before { background: var(--red-fill); }
.legend .seg[data-band="amber"]::before { background: var(--amber-fill); }
.legend .seg[data-band="likely"]::before { background: repeating-linear-gradient(135deg, transparent 0 2px, rgba(255,255,255,.45) 2px 4px), var(--likely-fill); }
.legend .seg[data-band="green"]::before { background: var(--green-fill); }
#plan-progress { display: none; }
.improvement-plan ol { margin: 0; padding: 0; list-style: none; }
.improvement-plan li {
display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center;
column-gap: 14px; row-gap: 8px;
min-height: 56px; padding: 12px 20px;
border-bottom: 1px solid var(--line);
}
.improvement-plan li:last-child { border-bottom: 0; }
.plan-number { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font-size: var(--fs-12); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.improvement-plan li strong { font-size: var(--fs-15); font-weight: 600; line-height: 1.3; }
.improvement-plan .plan-why { margin: 0; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.plan-actions .plan-skip { color: var(--ink-3); white-space: nowrap; }
.plan-actions .btn { min-height: 32px; padding: 5px 12px; font-size: var(--fs-13); white-space: nowrap; }
.plan-actions .plan-fix { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); font-weight: 600; }
.plan-actions .plan-fix:hover { border-color: var(--accent); background: var(--accent-soft); }
.plan-complete { grid-template-columns: minmax(0, 1fr) !important; }
.plan-complete span { color: var(--ink-2); font-size: var(--fs-13); }
.improvement-plan li.plan-removed { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 8px; color: var(--ink-2); font-size: var(--fs-13); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.improvement-plan .honesty { padding: 10px 20px 14px; border: 0; border-top: 1px solid var(--line); font-size: var(--fs-12); color: var(--ink-3); }
.improvement-plan li.has-help { align-items: start; }
.improvement-plan li.has-help > .plan-number { margin-top: 1px; }
.plan-help { display: grid; gap: 5px; margin: 8px 0 2px; font-size: var(--fs-13); line-height: 1.45; }
.plan-help > div { display: grid; grid-template-columns: 9.4em minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.plan-help dt { color: var(--ink-3); font-weight: 500; }
.plan-help dd { margin: 0; color: var(--ink); min-width: 0; }
.plan-words dd { display: flex; flex-wrap: wrap; gap: 6px; }
.copy-chip {
display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
font: inherit; font-size: var(--fs-13); font-weight: 500; line-height: 1; color: var(--ink);
border: 1px solid var(--line-strong); border-radius: var(--r-ctl, 6px); background: var(--surface); cursor: pointer;
}
.copy-chip:hover { border-color: var(--ink-3); }
.copy-chip:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.copy-chip .copy-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .65; }
.copy-chip .copy-done { display: none; color: var(--accent); font-size: 12.5px; }
.copy-chip.is-copied .copy-icon { display: none; }
.copy-chip.is-copied .copy-done { display: inline; }
.copy-fallback { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; font-size: var(--fs-13); color: var(--ink-2); }
.copy-fallback input { font: inherit; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl, 6px); background: var(--surface); color: var(--ink); min-width: 10ch; }
@container grp (max-width: 560px) {
.plan-help > div { grid-template-columns: minmax(0, 1fr); }
.plan-help { gap: 8px; }
}
@media (pointer: coarse) { .copy-chip { height: 40px; } }
@container grp (max-width: 560px) {
.improvement-plan li { grid-template-columns: 24px minmax(0, 1fr); align-items: start; }
.improvement-plan li > .plan-number { margin-top: 1px; }
.improvement-plan .plan-actions { grid-column: 2; justify-content: flex-start; }
.improvement-plan .plan-why { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
.meters { display: flex; flex-direction: column; }
.meter {
--band: var(--ink-3); --band-fill: var(--ink-3); --band-soft: color-mix(in srgb, var(--ink-3) 12%, transparent);
display: grid;
grid-template-columns: minmax(200px, 1.1fr) minmax(140px, 2fr) 116px 88px;
grid-template-areas: "label track reading foot";
align-items: center;
column-gap: 16px;
padding: 14px 20px;
border-bottom: 1px solid var(--line);
}
.meters > .meter:last-child, .meters-clear > .meter:last-child { border-bottom: 0; }
[data-band="red"] { --band: var(--red); --band-fill: var(--red-fill); --band-soft: var(--red-soft); }
[data-band="amber"] { --band: var(--amber); --band-fill: var(--amber-fill); --band-soft: var(--amber-soft); }
[data-band="likely"] { --band: var(--likely); --band-fill: var(--likely-fill); --band-soft: var(--likely-soft); }
[data-band="green"] { --band: var(--green); --band-fill: var(--green-fill); --band-soft: var(--green-soft); }
.meter.changed { animation: rowflash 600ms ease-out; }
@keyframes rowflash { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
.meter-top { grid-area: label; display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.meter-top[data-plan]::before {
content: attr(data-plan);
display: inline-grid; place-items: center; flex: none; align-self: center;
width: 20px; height: 20px; border-radius: 50%;
border: 1px solid var(--accent); color: var(--accent);
font-size: var(--fs-12); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.meter-label { font-size: var(--fs-15); font-weight: 500; color: var(--ink); line-height: 1.3; min-width: 0; }
.meter-flag { font-size: var(--fs-12); color: var(--ink-3); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 7px; cursor: help; white-space: nowrap; }
.meter-reading { grid-area: reading; display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.meter-val { font-family: var(--font); font-size: var(--fs-18); line-height: 1; font-weight: 600; color: var(--band); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.meter.pending .meter-val { color: var(--ink-3); font-weight: 500; }
.meter-band { font-size: var(--fs-13); line-height: 1.2; color: var(--band); white-space: nowrap; }
.meter-band:empty, .meter[data-band="green"] .meter-band { display: none; }
.meter.pending .meter-band { color: var(--ink-3); }
.meter-delta {
align-self: center;
font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-12); line-height: 1; padding: 3px 6px; border-radius: 999px;
animation: chipin 240ms cubic-bezier(.2,.8,.2,1);
}
.meter-delta.up { color: color-mix(in srgb, var(--green) 75%, var(--ink)); background: var(--green-soft); }
.meter-delta.down { color: color-mix(in srgb, var(--red) 75%, var(--ink)); background: var(--red-soft); }
@keyframes chipin { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.meter-track { grid-area: track; position: relative; height: var(--meter-h); background: var(--track); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--edge) 45%, transparent); }
.meter-track::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(90deg, transparent calc(var(--t1) * 1% - 1px), var(--tick) 0 calc(var(--t1) * 1%), transparent 0),
linear-gradient(90deg, transparent calc(var(--t2) * 1% - 1px), var(--tick) 0 calc(var(--t2) * 1%), transparent 0),
linear-gradient(90deg, transparent calc(var(--t3) * 1% - 1px), var(--tick) 0 calc(var(--t3) * 1%), transparent 0);
}
.meter-fill {
--fill: var(--band-fill);
position: relative; height: 100%; width: 0%; border-radius: 999px;
background: var(--fill);
transition: width 600ms cubic-bezier(.3,1.35,.5,1);
}
.meter.pending .meter-fill { --fill: var(--ink-3); }
.meter[data-band="likely"] .meter-fill { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255,255,255,.38) 5px 9px), var(--fill); }
.meter.pending .meter-track::before {
content: ""; position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; pointer-events: none;
background: linear-gradient(90deg, transparent 0 35%, var(--line) 50%, transparent 65% 100%) 100% 0 / 66.6667% 100% repeat-x;
animation: shimmer 1.4s linear infinite;
}
.meter.pending .meter-track { box-shadow: none; }
.meter.pending .meter-track::after { border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--edge) 45%, transparent); }
@keyframes shimmer { from { transform: translateX(-33.3333%); } to { transform: translateX(33.3333%); } }
.meter-foot { grid-area: foot; display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; }
.fix-btn {
display: inline-flex; align-items: center; gap: 6px;
min-height: 32px; padding: 4px 11px; white-space: nowrap;
border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface);
color: var(--ink); font-size: var(--fs-13); font-weight: 500; cursor: pointer;
}
.fix-btn:hover { border-color: var(--accent); color: var(--accent); }
.meter > .kw-strip { grid-column: 2 / -1; }
.meters-clear > summary {
display: flex; align-items: center; gap: 10px;
min-height: 48px; padding: 12px 20px;
list-style: none; cursor: pointer;
font-size: var(--fs-13); color: var(--ink-2);
border-top: 1px solid var(--line);
}
.meters > .meters-clear:first-child > summary { border-top: 0; }
.meters-clear > summary::-webkit-details-marker { display: none; }
.meters-clear > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 150ms ease; margin-right: 2px; }
.meters-clear[open] > summary::before { transform: rotate(45deg); }
.meters-clear > summary:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.meters-clear > summary .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-fill); }
.meters-clear[open] > summary { border-bottom: 1px solid var(--line); }
@container grp (max-width: 640px) {
.meter {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas: "label reading foot" "track track track";
row-gap: 8px;
}
.meter-reading { justify-content: flex-end; }
.app-body .meters .meter > .kw-strip { grid-column: 1 / -1; }
}
@container grp (max-width: 460px) {
.meter {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "label reading" "track track" "foot foot";
column-gap: 10px; row-gap: 8px;
padding: 12px 16px;
}
.meter-foot.bare { display: none; }
.group-head, .group-note, .improvement-plan li, .improvement-plan .honesty, .meters-clear > summary { padding-inline: 16px; }
}
.is-target { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-ctl); }
.improvement-plan li.is-target { outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
.is-target { animation: kw-flash 1.6s ease-out; }
}
.modal { position: fixed; inset: 0; background: rgba(12,17,13,.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 20; }
[data-theme="dark"] .modal { background: rgba(0,0,0,.68); }
[data-theme="dark"] .modal-card { border-top: 1px solid var(--line-strong); }
.modal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface); width: min(600px, 100%); max-height: 90vh; overflow: auto; padding: 22px 24px; box-shadow: var(--shadow-modal); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
.modal-head h3 { font-family: var(--font); font-weight: 600; font-size: var(--fs-18); line-height: 1.3; letter-spacing: -0.005em; }
.modal-head h3:focus { outline: none; }
.modal-head h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.modal-head .btn.icon { min-width: 36px; min-height: 36px; color: var(--ink-2); border-color: transparent; background: transparent; }
.modal-head .btn.icon:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.modal-body p { margin: 0 0 12px; color: var(--ink-2); }
.modal-body a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.modal-body .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.modal-body input[type=email] { min-height: 36px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface); padding: 7px 10px; min-width: 240px; }
.modal-body input[type=email]:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--accent); box-shadow: var(--focus-halo); }
.modal-body .small { font-size: var(--fs-12); color: var(--ink-3); }
.modal-body .notice { margin: 0 0 12px; }
.modal-body label.f { display: block; font-weight: 600; font-size: var(--fs-13); margin: 4px 0 6px; color: var(--ink); }
.modal-body .see-passes { color: var(--ink-2); font-size: var(--fs-13); }
.sample-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.sample-choice { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--ink); background: var(--bg); text-align: left; cursor: pointer; }
.sample-choice:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.sample-choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sample-choice strong { font-size: var(--fs-15); }
.sample-choice span { color: var(--ink-3); font-size: var(--fs-12); line-height: 1.35; }
.sample-choice[aria-current="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.sample-current { margin-left: 6px; color: var(--ink-3); font-size: var(--fs-12); font-style: normal; font-weight: 500; }
.sent-state strong { color: var(--ink); }
.code-form { margin: 14px 0 4px; }
.code-form label { display: block; font-weight: 600; font-size: var(--fs-13); color: var(--ink); margin: 0 0 6px; }
.code-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.code-row input {
width: 9.5ch; min-height: 44px; padding: 6px 12px; border: 1px solid var(--edge); border-radius: var(--r-ctl);
background: var(--surface); color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: .08em;
font-variant-numeric: tabular-nums; text-align: center;
}
.code-row input::placeholder { color: var(--ink-3); font-weight: 400; opacity: .6; }
.code-row input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--accent); box-shadow: var(--focus-halo, 0 0 0 4px var(--focus-soft)); }
.code-row input:disabled { opacity: .55; }
.code-row .btn { min-height: 44px; padding-inline: 18px; }
.sent-state .inapp-hint { margin: 12px 0 0; }
.modal-body .inapp-hint { margin: 0 0 12px; }
.inapp-note {
margin: 12px 16px 0; padding: 14px 16px; border: 1px solid var(--amber-fill); border-radius: var(--r-ctl);
background: var(--amber-soft); color: var(--ink); font-size: var(--fs-15); line-height: 1.45;
}
.inapp-note p { margin: 0; }
.inapp-note .inapp-steps { margin-top: 6px; color: var(--ink-2); }
.inapp-note .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.inapp-note .actions .btn { min-height: 44px; padding-inline: 18px; }
.inapp-note .inapp-msg:not(:empty) { margin-top: 10px; font-size: var(--fs-13); color: var(--ink-2); }
.inapp-note .inapp-url { width: 100%; margin: 0 0 6px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); font-size: var(--fs-13); }
.inapp-note .inapp-foot { margin-top: 10px; font-size: var(--fs-13); color: var(--ink-2); }
@media (min-width: 900px) { .inapp-note { margin: 20px 48px 0; max-width: 720px; } }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line-strong); border-top-color: var(--ink); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.share-card svg { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.pass-options { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.pass-options .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.pass-options .btn .small { font-weight: 400; opacity: .85; font-size: var(--fs-12); }
.revision-list { margin: 12px 0 0; padding: 0; list-style: none; }
.revision-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.revision-list li div { display: flex; flex-direction: column; }
.revision-list li span { color: var(--ink-3); font-size: var(--fs-12); }
.import-list { display: grid; gap: 7px; margin-top: 12px; }
.import-card { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: var(--fs-12); }
.import-card span { color: var(--ink-3); text-align: right; }
.import-card.ready { border-color: var(--green-fill); background: var(--green-soft); }
.import-card.failed { border-color: var(--red-fill); background: var(--red-soft); }
.toast-region { position: fixed; right: 20px; bottom: 56px; z-index: 25; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
@media (min-width: 960px) and (min-height: 561px) {
.app:is([data-stage="ready"], [data-stage="reading"]) ~ .toast-region { --rail: 184px; right: auto; bottom: 66px; left: calc(var(--rail) + max(380px, (100vw - var(--rail)) * .4) + 24px); align-items: flex-start; }
}
@media (min-width: 960px) and (max-width: 1100px) and (min-height: 561px) {
.app:is([data-stage="ready"], [data-stage="reading"]) ~ .toast-region { --rail: 72px; }
}
.toast {
pointer-events: auto;
display: flex; align-items: center; gap: 14px;
max-width: min(420px, calc(100vw - 32px));
padding: 11px 14px 11px 16px;
border-radius: var(--r-surface);
background: var(--ink); color: var(--surface);
font-size: var(--fs-13); line-height: 1.4;
animation: toastin 200ms cubic-bezier(.2,.8,.2,1);
}
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity 180ms ease, transform 180ms ease; }
.toast a, .toast button { flex: none; background: none; border: 0; padding: 4px 2px; margin: -4px -2px; color: var(--toast-action); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.app-body .toast a:not(.btn) { color: var(--toast-action); }
.toast :focus-visible { outline-color: var(--surface); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.workspace-tabs { display: none; }
@media (min-width: 861px) and (max-height: 800px) {
.app[data-stage="empty"] .workspace-head { padding: 24px 48px 20px; }
.app[data-stage="empty"] .workspace-head h2 { font-size: 44px; }
.app[data-stage="empty"] .workspace-subtitle { margin-top: 12px; font-size: var(--fs-15); }
.app[data-stage="empty"] .head-actions { margin-top: 18px; }
.app[data-stage="empty"] .specimen-panel { gap: 12px; padding: 14px 18px 16px; }
.app[data-stage="empty"] .ad-block, .app[data-stage="empty"] .cv-block { min-height: 0; padding: 16px 18px; }
.app[data-stage="empty"] .step-head { margin-bottom: 12px; }
.app[data-stage="empty"] #job-ad { min-height: 64px; }
.app[data-stage="empty"]:not(.has-cv) .cv-block > #cv { min-height: 150px; }
.app[data-stage="empty"]:not(.has-cv) .cv-block > #cv:placeholder-shown { padding-top: 56px; }
.app[data-stage="empty"]:not(.has-cv) .drop-glyph { margin-top: 22px; }
.app[data-stage="empty"]:not(.has-cv) .cv-block > .cv-head { margin-bottom: 14px; }
.app-body .app[data-stage="empty"] .pane-left { gap: 12px 16px; margin-bottom: 20px; }
}
@media (min-width: 861px) and (max-height: 800px), (min-width: 861px) and (max-width: 1100px) {
.app[data-stage="empty"] .specimen-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "readout cap" "rows rows" "fix fix"; gap: 12px 16px; align-items: center; }
.app[data-stage="empty"] :is(.specimen, .specimen-instrument) { display: contents; }
.app[data-stage="empty"] .spec-caption { grid-area: cap; }
.app[data-stage="empty"] .specimen-rows { grid-area: rows; }
.app[data-stage="empty"] .spec-fix { grid-area: fix; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.app[data-stage="empty"] :is(.specimen-dial, .spec-verdict, .spec-rule, .spec-fix-note),
.app[data-stage="empty"] .spec-row:nth-child(2) { display: none; }
.app[data-stage="empty"] .specimen-readout { grid-area: readout; margin: 0; }
.app[data-stage="empty"] .specimen-num { font-size: 40px; }
.app[data-stage="empty"] .spec-row { grid-template-columns: minmax(0, 1.5fr) minmax(56px, 1fr) 1.332em 4.662em; }
.app[data-stage="empty"] .spec-after ins { font-size: var(--fs-13); }
}
@media (max-width: 1100px) and (min-width: 861px) {
:is(body.app-body, body.editorial-shell) { grid-template-columns: 72px minmax(0, 1fr); }
:is(.app-body, .editorial-shell) .top { padding-inline: 12px; align-items: center; }
:is(.app-body, .editorial-shell) .brand { padding: 0; }
:is(.app-body, .editorial-shell) .brand span { display: none; }
:is(.app-body, .editorial-shell) .top-actions .nav-item { justify-content: center; padding: 10px; }
:is(.app-body, .editorial-shell) .top-actions .nav-item span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(.app-body, .editorial-shell) .top > #theme-btn { align-self: center; }
.workspace-head { padding-inline: 32px; }
.app[data-stage="empty"] .workspace-head { column-gap: 32px; }
.specimen-panel { max-width: 400px; }
.app-body .app[data-stage="empty"] .pane-left { margin-inline: 32px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-head { padding-inline: 24px; }
}
@media (min-width: 960px) and (max-width: 1100px) and (min-height: 561px) {
.score-block { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "dial" "side"; row-gap: 12px; }
.score-instrument { justify-self: center; }
}
.app.has-cv .cv-head .field-label { white-space: nowrap; }
@media (max-width: 860px) {
:is(body.app-body, body.editorial-shell) { min-height: 100vh; height: auto; display: flex; overflow: auto; }
body.app-body { --header-h: 61px; }
:is(.app-body, .editorial-shell) .top {
position: sticky; top: 0; z-index: 10;
min-height: auto; height: var(--header-h, auto);
padding: 8px 12px;
border-right: 0; border-bottom: 1px solid var(--line);
flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px;
background: color-mix(in srgb, var(--bg) 94%, transparent);
backdrop-filter: blur(14px);
}
:is(.app-body, .editorial-shell) .brand { padding: 0; }
:is(.app-body, .editorial-shell) .brand span { display: none; }
:is(.app-body, .editorial-shell) .top-actions { order: 2; flex: 1; min-width: 0; flex-direction: row; justify-content: flex-start; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0; }
:is(.app-body, .editorial-shell) .top-actions::-webkit-scrollbar { display: none; }
:is(.app-body, .editorial-shell) .top-actions .nav-item { width: auto; flex: none; gap: 6px; padding: 8px 10px; font-size: var(--fs-13); }
:is(.app-body, .editorial-shell) .top-actions .nav-item span { display: inline; }
:is(.app-body, .editorial-shell) .top > #theme-btn { order: 3; margin: 0; align-self: auto; }
.app-body .app { display: flex; flex-direction: column; overflow: visible; }
.app-body .foot { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; }
textarea, .url-row input { font-size: 16px; }
.cv-head { flex-wrap: wrap; }
.cv-tools { justify-content: flex-start; gap: 6px 14px; }
.workspace-head { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 18px; row-gap: 20px; }
.app[data-stage="empty"] .workspace-head { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.workspace-head h2 { font-size: 40px; max-width: 7.36em; }
.app[data-stage="empty"] .workspace-head h2 { font-size: 40px; }
.workspace-subtitle { font-size: var(--fs-15); }
.app-body .app[data-stage="empty"] .pane-left { display: flex; flex-direction: column; margin: 0 16px 28px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-head { flex-wrap: wrap; padding: 12px 16px; min-height: 0; row-gap: 6px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-head h2 { flex: 1 1 100%; max-width: none; font-size: var(--fs-24); }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-head .role-meta { flex: 1 1 100%; padding-top: 0; flex-wrap: wrap; white-space: normal; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-actions { flex: 1 1 100%; margin-left: 0; justify-content: space-between; gap: 8px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-head:not(.has-sample) > .workspace-actions { justify-content: flex-end; }
.app:is([data-stage="ready"], [data-stage="reading"]) .sample-banner { min-width: 0; flex: 0 1 auto; }
.app:is([data-stage="ready"], [data-stage="reading"]) #head-clear-btn { margin-left: auto; flex: none; }
.app:is([data-stage="ready"], [data-stage="reading"]) .pane-right { padding: 16px 16px 32px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .pane-left { padding: 16px; }
.board { gap: 24px; }
}
@media (min-width: 700px) and (max-width: 860px) {
.app[data-stage="empty"] .workspace-head { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 28px; align-items: center; }
.app[data-stage="empty"] .specimen-panel { grid-column: 2; grid-row: 1; }
.app[data-stage="empty"] .specimen-instrument { grid-template-columns: auto; grid-template-areas: "dial" "readout"; justify-content: center; }
.app[data-stage="empty"] .specimen-dial { --d: 140px; }
.app[data-stage="empty"] :is(.specimen-rows, .spec-rule, .spec-fix, .spec-verdict) { display: none; }
}
.meter-plan-link .where-tab { display: none; }
@media (max-width: 959px), (max-height: 560px) {
.meter-plan-link .where-above { display: none; }
.meter-plan-link .where-tab { display: inline; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-tabs:not([hidden]) {
position: sticky; top: var(--header-h, 0px); z-index: 8;
display: flex; align-items: center; gap: 4px;
padding: 6px 16px 6px 12px; border-bottom: 1px solid var(--line);
background: var(--bg);
}
.workspace-tabs button { flex: 1 1 0; max-width: 128px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-13); font-weight: 500; cursor: pointer; }
.workspace-tabs button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.workspace-tabs button.active { background: var(--btn-primary); color: var(--btn-primary-ink); font-weight: 600; }
.tab-score { display: block; flex: none; margin-left: auto; padding-left: 12px; color: var(--ink); font-family: var(--font); font-size: var(--fs-20); font-weight: 600; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab-score:empty { display: none; }
.tab-score[data-band="red"] { color: var(--red); }
.tab-score[data-band="amber"] { color: var(--amber); }
.tab-score[data-band="likely"] { color: var(--likely); }
.tab-score[data-band="green"] { color: var(--green); }
.app .score-bar { display: none; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-head { order: 1; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-tabs { order: 2; }
.app:is([data-stage="ready"], [data-stage="reading"]) .pane-right { order: 4; }
.app:is([data-stage="ready"], [data-stage="reading"]) .pane-left { order: 5; }
.app:is([data-stage="ready"], [data-stage="reading"])[data-mobile-view="cv"] #cv { min-height: 55vh; }
.app:is([data-stage="ready"], [data-stage="reading"]):is([data-mobile-view="overview"], [data-mobile-view="improve"]) .pane-left { display: none; }
.app:is([data-stage="ready"], [data-stage="reading"])[data-mobile-view="cv"] .pane-right { display: none; }
.app:is([data-stage="ready"], [data-stage="reading"])[data-mobile-view="cv"] .pane-left { display: flex; }
.app:is([data-stage="ready"], [data-stage="reading"])[data-mobile-view="improve"] :is(.score-block, .improvement-plan, .free-next) { display: none; }
.app:is([data-stage="ready"], [data-stage="reading"])[data-mobile-view="overview"] :is(#group-must, #group-nice, #group-quality, #weak-lines) { display: none; }
.app:is([data-stage="ready"], [data-stage="reading"]) .pane-foot { display: contents; }
.app:is([data-stage="ready"], [data-stage="reading"]) .analysis-action { order: 0; align-self: flex-end; flex-direction: row; align-items: center; justify-content: flex-end; margin-top: -4px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .trust-line { order: 1; justify-content: flex-start; text-align: left; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-tabs:not([hidden]) { margin-bottom: 8px; }
.app:is([data-stage="ready"], [data-stage="reading"]) :is(.pane-left, .pane-right) { padding-top: 8px; }
#cv, .pane { scroll-margin-top: calc(var(--header-h, 0px) + 64px); }
}
@media (max-width: 959px) and (pointer: coarse), (max-height: 560px) and (pointer: coarse) {
.workspace-tabs button { min-height: 44px; }
}
@media (min-width: 861px) and (max-width: 959px), (min-width: 861px) and (max-height: 560px) {
body.app-body:is([data-stage="ready"], [data-stage="reading"]) { height: auto; min-height: 100vh; overflow: visible; }
body.app-body:is([data-stage="ready"], [data-stage="reading"]) > .top { position: sticky; top: 0; height: 100vh; align-self: start; }
.app-body .app:is([data-stage="ready"], [data-stage="reading"]) { overflow: visible; }
}
@media (max-width: 860px) and (max-height: 560px) {
body.app-body { --header-h: 0px; }
.app-body .top { position: relative; height: 61px; }
}
@media (max-width: 959px), (max-height: 560px) {
html.has-tabs { scroll-padding-top: 57px; }
}
@media (max-width: 860px) and (min-height: 561px) {
html.has-tabs { scroll-padding-top: 118px; }
}
@media (max-width: 959px) and (pointer: coarse), (max-height: 560px) and (pointer: coarse) {
html.has-tabs { scroll-padding-top: 65px; }
}
@media (max-width: 860px) and (min-height: 561px) and (pointer: coarse) {
html.has-tabs { scroll-padding-top: 126px; }
}
@media (max-width: 699px) {
.app[data-stage="empty"] .specimen-panel { grid-column: 1; grid-row: auto; max-width: none; gap: 8px; padding: 12px 16px; }
.app[data-stage="empty"] .specimen-instrument { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "dial readout"; align-items: end; column-gap: 16px; }
.app[data-stage="empty"] .specimen-dial { --d: 110px; }
.app[data-stage="empty"] .specimen-readout { justify-content: flex-start; margin: 0 0 -4px; }
.app[data-stage="empty"] .specimen-num { font-size: 44px; }
.app[data-stage="empty"] :is(.specimen-rows, .spec-rule, .spec-fix, .spec-verdict) { display: none; }
.app:is([data-stage="ready"], [data-stage="reading"]) .workspace-actions { flex-wrap: wrap; }
.app:is([data-stage="ready"], [data-stage="reading"]) .sample-banner { flex: 1 1 100%; flex-wrap: wrap; gap: 6px 14px; padding: 8px 8px 8px 12px; border-radius: var(--r-surface); white-space: normal; }
.app:is([data-stage="ready"], [data-stage="reading"]) .sample-banner p { flex: 1 1 100%; }
.app:is([data-stage="ready"], [data-stage="reading"]) .sample-banner #use-own-btn { margin-left: auto; }
.app[data-stage="ready"] .workspace-head:not(.has-sample) #head-clear-btn { display: none; }
.app[data-stage="ready"] .workspace-head:not(.has-sample) #clear-btn { display: inline; }
.app[data-stage="ready"] .workspace-head:not(.has-sample) > .workspace-actions { display: none; }
.score-block { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "dial" "side"; padding: 18px 20px 20px; row-gap: 12px; }
.score-instrument { justify-self: center; }
.score-dial { --d: 220px; }
.score-num { font-size: 84px; }
.toast-region { left: 12px; right: 12px; bottom: 16px; align-items: stretch; }
.app[data-stage="empty"] ~ .toast-region { bottom: 84px; }
.toast { max-width: none; }
.score-actions .btn.ghost { flex: 0 0 auto; outline-offset: 4px; }
}
@media (max-width: 520px) {
html, body { scroll-padding-bottom: 96px; }
textarea, input { scroll-margin-bottom: 96px; }
:is(.app-body, .editorial-shell) .top { padding-inline: 6px; gap: 4px; }
:is(.app-body, .editorial-shell) .top-actions { justify-content: space-around; overflow: visible; gap: 0; }
:is(.app-body, .editorial-shell) .top-actions .nav-item { flex-direction: column; gap: 2px; min-width: 56px; padding: 5px 3px; font-size: var(--fs-12); line-height: 1.1; }
.workspace-head { padding: 20px 16px 16px; }
.workspace-head h2, .app[data-stage="empty"] .workspace-head h2 { font-size: 36px; }
.workspace-actions { justify-content: flex-start; gap: 8px; }
.head-actions { flex-direction: column; align-items: stretch; }
.head-actions .btn { width: 100%; min-height: 44px; }
.app-body .app[data-stage="empty"] .pane-left { margin-inline: 12px; }
.url-row { flex-direction: column; }
.url-row .btn { width: 100%; }
.app[data-stage="empty"] .pane-left { padding-bottom: 24px; }
.app[data-stage="empty"] .analysis-action:not(.waiting) {
position: sticky; bottom: 0; z-index: 6;
flex-direction: row; align-items: center; gap: 12px;
width: auto; max-width: none; min-height: 64px; margin-inline: -12px; padding: 10px 12px;
border-top: 1px solid var(--line); border-radius: 0;
background: var(--surface);
}
.app[data-stage="empty"] .analysis-action:not(.waiting) #analyse-btn { flex: 1 1 auto; }
.app[data-stage="empty"] .analysis-action:not(.waiting) :is(.analyse-hint, .usage-left) { order: -1; flex: 0 1 auto; max-width: 45%; text-align: left; font-size: var(--fs-13); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app[data-stage="empty"] .analysis-action .btn.primary { min-height: 44px; }
.app[data-stage="empty"] .trust-line { order: 2; }
.app[data-stage="empty"] .analysis-action { order: 3; }
.app[data-stage="empty"]:not(.has-cv) .cv-block > #cv { min-height: 180px; }
.score-dial { --d: 200px; }
.score-num { font-size: 76px; }
.score-actions .btn { flex: 1 1 auto; }
.bar-clear { display: none; }
}
@media (max-width: 520px), (max-height: 560px) {
.modal { align-items: flex-end; padding: 0; }
.modal-card { width: 100%; max-width: 720px; max-height: 92vh; margin-inline: auto; border-radius: 12px 12px 0 0; border-bottom: 0; padding: 18px 18px 0; }
.modal-body { padding-bottom: 12px; }
.modal-body .actions { position: sticky; bottom: 0; z-index: 1; margin: 12px -18px 0; padding: 12px 18px; background: var(--surface); border-top: 1px solid var(--line); }
}
@media (max-width: 359px) {
:is(.app-body, .editorial-shell) .top-actions .nav-item { min-width: 0; flex: 1 1 0; padding: 5px 1px; letter-spacing: -0.01em; }
:is(.app-body, .editorial-shell) .top-actions .nav-item span { white-space: nowrap; font-size: 11px; }
:is(.app-body, .editorial-shell) .top > .brand { display: none; }
}
@media (pointer: coarse) {
.file-chip .link, .file-actions .btn { min-height: 44px; }
.btn, .fix-btn, .workspace-tabs button, :is(.app-body, .editorial-shell) .top-actions .nav-item, #theme-btn, .modal-head .btn.icon { min-height: 44px; }
#theme-btn, .modal-head .btn.icon { min-width: 44px; justify-content: center; }
:is(.app-body, .editorial-shell) .brand { min-width: 44px; min-height: 44px; justify-content: center; }
.cv-outline button { min-height: 32px; }
.score-actions .btn, .plan-actions .btn, #bar-next { min-height: 44px; }
.app:is([data-stage="ready"], [data-stage="reading"]) .analysis-action .btn { min-height: 44px; }
.sample-banner { min-height: 44px; }
.sample-banner #use-own-btn { min-height: 36px; }
.link, .trust-line a, .method summary, .foot-links a, :is(.app-body, .editorial-shell) .foot-links a:not(.btn) { padding: 10px 4px; margin: -10px -4px; }
:is(.board, .workspace-head) button.link { display: inline-flex; align-items: center; min-height: 44px; }
.app .analysis-action #analyse-btn.is-rescore { min-height: 44px; }
.score-bar-inner { height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
.meter-fill { transition: none; }
.meter-delta { animation: none; }
.meter.changed { animation: none; }
.meter.pending .meter-track::before { animation: none; content: none; }
.latency.busy .latency-dot, .latency.failed .latency-dot { animation: none; }
.spinner { animation: none; border-top-color: transparent; }
.gauge-needle { transition: none; }
.btn { transition: none; }
.drop-glyph { transition: none; }
.score-bar-inner, .score-bar.show .score-bar-inner { transition: none; transform: none; }
.toast, .toast.leaving { animation: none; transition: none; transform: none; }
.meters-clear > summary::before, .job-text-option summary::before { transition: none; }
}
.app.free-tier :is(#cover-letter-btn, #weak-lines, #compare-jobs-btn, #save-cv-btn, #save-spec-btn, #revisions-btn, #fetch-btn) { display: none !important; }
.cv-rated-line { margin: -2px 0 8px; font-size: var(--fs-13); color: var(--ink-2); line-height: 1.4; }
.cv-block.is-rated #cv { background: color-mix(in srgb, var(--ink) 3%, var(--surface)); color: var(--ink-2); cursor: default; }
.cv-block.is-rated #cv:focus-visible { border-color: var(--edge); }
.cv-block.is-rated :is(#cv-count, #draft-status) { display: none; }
.app.free-tier #latency:not(.busy, .failed, .paused) { display: none !important; }
.cv-locked-note { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; font-size: var(--fs-13); color: var(--ink); line-height: 1.45; }
.cv-locked-note .link { color: var(--accent); font-weight: 600; }
.forget-btn { align-self: flex-start; margin-top: 2px; color: var(--ink-3); }
.free-next { display: grid; }
.free-next[hidden] { display: none; }
.next-step { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.next-step h2 { margin: 0 0 6px; font-size: var(--fs-17); font-weight: 600; line-height: 1.3; }
.next-step p { margin: 0; color: var(--ink-2); font-size: var(--fs-15); line-height: 1.45; }
.next-step .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.next-step .actions .btn { min-height: 44px; padding-inline: 20px; font-size: var(--fs-15); font-weight: 600; }
.next-step .hint { margin-top: 8px; font-size: var(--fs-13); color: var(--ink-3); }
.next-step .undo-line { margin-top: 10px; font-size: var(--fs-13); color: var(--ink-3); }
.next-step .undo-line[hidden] { display: none; }
.next-step .undo-line .link { font-size: inherit; }
@media (pointer: coarse) { .next-step .undo-line .link { display: inline-flex; align-items: center; min-height: 44px; } }
.check-list { margin: 0 0 12px; padding-left: 1.2em; }
.check-list li { margin: 0 0 6px; color: var(--ink); line-height: 1.45; }
.free-next .sample-only { display: none; }
.free-next.is-sample .sample-only { display: revert; }
.free-next.is-sample .own-only { display: none !important; }
.pass-card { padding: 16px 20px 18px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.pass-card h3 { margin: 0 0 4px; font-size: var(--fs-15); font-weight: 600; }
.pass-card p { margin: 0; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.pass-card .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; }
.pass-card .actions .link { font-size: var(--fs-13); }
.rate-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 6px; }
.rate-choice .btn { min-height: 48px; font-size: var(--fs-15); font-weight: 600; }
@media (max-width: 420px) { .rate-choice { grid-template-columns: 1fr; } }
.modal-body textarea.rv-text { min-height: 40vh; width: 100%; }
#rv-msg:not(:empty) { margin-top: 10px; }
#rv-msg .file-error-msg { margin: 0 0 6px; color: var(--red); }
#rv-msg .file-tips { margin: 0; padding-left: 18px; font-size: var(--fs-13); color: var(--ink-2); }
.ex-score { font-size: var(--fs-15); }
.ex-list { margin: 12px 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ex-change { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.ex-change p { margin: 0; }
.ex-head { display: flex; align-items: center; gap: 10px; }
.ex-head strong { flex: 1; font-size: var(--fs-15); }
.ex-move { font-size: var(--fs-13); font-weight: 600; color: var(--green); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ex-where, .ex-line { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; margin-top: 8px !important; font-size: var(--fs-13); line-height: 1.45; color: var(--ink); }
.ex-where span, .ex-line span { color: var(--ink-3); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }
.ex-where { color: var(--ink-2); }
@media (max-width: 420px) { .ex-where, .ex-line { grid-template-columns: 1fr; gap: 2px; } }
.tryout-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: -2px 0 8px; font-size: var(--fs-13); color: var(--ink-2); line-height: 1.45; }
.tryout-note[hidden] { display: none; }
.tryout-note p { margin: 0; flex: 1 1 260px; }
.tryout-note.is-closed p { padding: 8px 10px; border-left: 3px solid var(--amber); background: var(--amber-soft); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; color: var(--ink); }
.tryout-note .link { font-size: var(--fs-13); white-space: nowrap; }
.cv-block.is-tryout #cv { border-style: dashed; border-color: var(--line-strong); }
.cv-block.is-tryout #cv:focus-visible { border-style: solid; }
.tryout-tried { margin: 8px 0 0; font-size: var(--fs-13); color: var(--ink-2); }
.tryout-tried[hidden] { display: none; }
.tryout-tried .link { font-size: var(--fs-13); font-weight: 600; }
.tryout-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px; background: var(--surface); border-top: 1px solid var(--line-strong); box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); font-size: var(--fs-15); color: var(--ink); }
.tryout-bar[hidden] { display: none; }
.tb-score { flex: none; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tb-score strong { font-size: var(--fs-20); font-weight: 600; color: var(--ink); }
.tb-score strong[data-band="red"] { color: var(--red); }
.tb-score strong[data-band="amber"] { color: var(--amber); }
.tb-score strong[data-band="likely"] { color: var(--likely); }
.tb-score strong[data-band="green"] { color: var(--green); }
.tb-delta { flex: none; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-12); font-weight: 600; background: var(--green-soft); color: color-mix(in srgb, var(--green) 75%, var(--ink)); }
.tb-delta.down { background: var(--red-soft); color: color-mix(in srgb, var(--red) 75%, var(--ink)); }
.tb-delta[hidden] { display: none; }
.tb-move { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
html.tryout-typing { scroll-padding-bottom: 64px; }
html.tryout-typing .toast-region { bottom: calc(var(--tryout-bar-bottom, 0px) + 60px); }
/* weaklines.css */
.wl-root { display: block; }
.wl .group-head h2 { font-family: var(--font); font-weight: 600; font-size: var(--fs-17, 17px); line-height: 1.3; letter-spacing: -0.005em; }
.wl-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px; }
.wl-run { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.wl-run #weak-lines-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.wl-intro { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.wl-intro[hidden] { display: none; }
.wl-status { font-size: 13.5px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-status[hidden] { display: none; }
.wl-status.error { color: var(--red); }
.wl-status .link { font-weight: 500; }
.wl-list { list-style: none; margin: 2px -20px -16px; padding: 0; border-top: 1px solid var(--line); }
.wl-list[hidden] { display: none; }
.wl-item {
display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; row-gap: 10px;
padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.wl-item:last-child { border-bottom: 0; }
.wl-item > * { grid-column: 2; }
.wl-item.done { background: color-mix(in srgb, var(--green-soft) 55%, transparent); }
.wl-item.gone .wl-text { text-decoration: line-through; color: var(--ink-3); }
.wl-line {
grid-column: 1 / -1; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: start;
text-align: left; width: calc(100% + 12px); margin: -6px -6px 0; padding: 6px;
background: none; border: 0; border-radius: var(--r-ctl, 6px);
color: var(--ink); cursor: pointer; font: inherit; font-size: 15px; line-height: 1.5;
transition: background-color 120ms;
}
.wl-line:hover { background: var(--accent-soft, color-mix(in srgb, var(--accent) 10%, transparent)); }
.wl-line:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 0; box-shadow: var(--focus-halo, 0 0 0 4px var(--focus-soft)); }
.wl-line .wl-n { margin-top: 0; }
.wl-text { white-space: pre-wrap; overflow-wrap: anywhere; padding-top: 1px; }
.wl-item.done .wl-n { border-color: var(--green-fill); color: var(--green); }
.wl-meta { display: flex; gap: 6px 10px; align-items: baseline; flex-wrap: wrap; }
.wl-reason {
display: inline-flex; align-items: center; height: 22px; padding: 0 8px; white-space: nowrap;
font-size: 12px; font-weight: 600; line-height: 1; color: var(--ink-2);
background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: var(--r-ctl, 6px);
}
.wl-why { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.wl-ask { display: flex; gap: 10px 16px; align-items: flex-end; flex-wrap: wrap; }
.wl-qblock { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 220px; }
.wl-q-label { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink-3); }
.wl-q { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.wl-ask .wl-ask-btn { min-height: 32px; padding: 0 12px; white-space: nowrap; font-size: 13.5px; }
.wl-ask .wl-ask-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.wl-done { font-size: 13.5px; color: var(--green); font-weight: 600; }
.wl-done::before { content: "✓ "; }
.wl-form { display: flex; flex-direction: column; gap: 8px; }
.wl-form[hidden] { display: none; }
.wl-form textarea { width: 100%; min-height: 84px; resize: vertical; padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--surface); border: 1px solid var(--edge, var(--line-strong)); border-radius: var(--r-ctl, 6px); }
.wl-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--accent); box-shadow: var(--focus-halo, 0 0 0 4px var(--focus-soft)); }
.wl-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wl-form .small, .wl-note { font-size: 13px; color: var(--ink-3); margin: 0; }
.wl-item.gone .wl-note { color: var(--amber); }
@media (max-width: 860px) {
.wl-body { padding: 12px 14px 14px; }
.wl-list { margin: 2px -14px -14px; }
.wl-item { column-gap: 10px; padding: 14px; }
.wl-line { column-gap: 10px; }
.wl-form textarea { font-size: 16px; }
}
@media (pointer: coarse) {
.wl-run #weak-lines-btn, .wl-actions .btn { min-height: 44px; }
.wl-ask .wl-ask-btn { min-height: 44px; height: auto; }
.wl-status .link { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
.wl-line { transition: none; }
}
/* keywords.css */
.kw-strip { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kw-strip[hidden] { display: none; }
.app-body .meter > .kw-strip { grid-column: 2 / -1; margin-top: -2px; }
.kw-toggle { display: none; align-self: flex-start; }
.kw-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kw-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.kw-lead { font-size: 13px; line-height: 1.2; color: var(--ink-3); white-space: nowrap; }
.kw-lead[hidden] { display: none; }
.kw-set { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.kw-set[hidden] { display: none; }
.kw-chip {
display: inline-flex; align-items: center; gap: 5px;
height: 28px; padding: 0 10px 0 8px;
font-family: var(--font); font-size: 13.5px; line-height: 1; font-weight: 500;
border-radius: var(--r-ctl, 6px); border: 1px solid var(--line);
background: var(--surface); color: var(--ink-2); cursor: pointer;
transition: border-color 150ms, background-color 150ms, color 150ms;
}
.kw-chip[hidden] { display: none; }
.kw-chip .kw-mark { display: inline-block; width: 11px; text-align: center; font-weight: 600; font-size: 13px; }
.kw-chip .copy-icon { display: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.kw-chip.is-miss .copy-icon { display: inline-block; }
.kw-chip .copy-done { display: none; font-size: 12.5px; color: var(--accent); }
.kw-chip.is-copied .copy-icon { display: none; }
.kw-chip.is-copied .copy-done { display: inline; }
.kw-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.kw-chip.is-hit .kw-mark { display: none; }
.kw-strip[data-row="strong"] .kw-chip.is-hit { color: var(--ink); padding-left: 8px; }
.kw-strip[data-row="strong"] .kw-chip.is-hit .kw-mark { display: inline-block; color: var(--green); }
.kw-strip:not([data-row="strong"]) .kw-chip.is-hit { padding-left: 10px; }
.kw-chip.is-miss { border: 1px dashed var(--line-strong); background: var(--surface); color: var(--ink-2); }
.kw-chip.is-miss .kw-mark { color: var(--ink-3); }
.kw-strip[data-row="weak"] .kw-chip.is-miss .kw-mark { color: var(--red); }
.kw-chip.is-miss:hover { border-color: var(--ink-3); color: var(--ink); }
.kw-chip:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; box-shadow: var(--focus-halo, 0 0 0 4px var(--focus-soft)); }
.kw-chips .kw-more { font-size: 13px; color: var(--ink-3); }
.kw-chips .kw-more:hover { color: var(--ink); }
.kw-chips .kw-more[hidden] { display: none; }
.kw-note {
margin: 0; max-width: 68ch;
font-size: 13px; line-height: 1.45; color: var(--ink-3);
}
.kw-note[hidden] { display: none; }
.meter.kw-target { box-shadow: inset 3px 0 0 var(--accent); animation: kw-flash 1.2s ease-out both; }
.meter.kw-target-static { box-shadow: inset 3px 0 0 var(--accent); }
@keyframes kw-flash {
0% { background-color: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, transparent)); }
100% { background-color: transparent; }
}
.kw-summary {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}
.kw-summary[hidden] { display: none; }
.kw-summary strong { font: inherit; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.kw-summary .link { font-size: 13.5px; }
.kw-summary .link[hidden], .kw-summary .kw-alias[hidden] { display: none; }
.kw-summary .kw-alias { flex-basis: 100%; color: var(--ink-3); font-size: 13px; max-width: 60ch; }
.app-body .meter[data-band] .meter-band:not(:empty) { display: inline; }
.app-body .meter[data-band="green"] .meter-band { color: var(--band); }
.meter-foot .meter-plan-link {
margin: 0; padding: 4px 0;
font-size: 13.5px; line-height: 1.25; color: var(--ink-2); white-space: nowrap;
text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px;
}
.meter-foot .meter-plan-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.meter-foot .meter-plan-link:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 2px; }
.allowance-line #allowance-signin { margin: 0 0 0 4px; padding: 0; font-size: inherit; vertical-align: baseline; }
#score-verdict:focus { outline: none; }
#score-verdict:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 860px) {
.app-body .meter > .kw-strip { grid-column: 1 / -1; margin-top: 0; }
.kw-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; font-size: 13.5px; }
.kw-toggle::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.kw-strip.open .kw-toggle::after { transform: translateY(1px) rotate(-135deg); }
.kw-body { display: none; }
.kw-strip.open .kw-body { display: flex; }
}
@media (pointer: coarse) {
.kw-chip { height: 32px; min-height: 32px; }
.kw-toggle { min-height: 44px; }
.kw-summary .link:not([hidden]), .kw-chips .kw-more:not([hidden]), .meter-foot .meter-plan-link { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
.kw-chip { transition: none; }
.meter.kw-target { animation: none; }
}
@container grp (max-width: 460px) {
.meter-foot.fix-off { justify-content: flex-start; }
}
@media (max-width: 860px) {
@container grp (max-width: 460px) {
.app-body .meters .meter.has-kw > .kw-strip:not([hidden]) { display: contents; }
.app-body .meters .meter.has-kw > .kw-strip:not([hidden]) > .kw-toggle { grid-column: 1; grid-row: 3; justify-self: start; align-self: center; }
.app-body .meters .meter.has-kw > .kw-strip:not([hidden]) > :not(.kw-toggle) { grid-column: 1 / -1; }
.app-body .meters .meter.has-kw > .meter-foot { grid-column: 2; grid-row: 3; align-self: center; flex-wrap: nowrap; justify-content: flex-end; }
}
}
/* changes.css */
.improvement-plan.changes-mode #plan-progress { display: inline; font-variant-numeric: tabular-nums; }
.cl[hidden], .cl-foot[hidden], .plan-sub[hidden], #plan-list[hidden] { display: none; }
.cl-intro { margin: 0; padding: 12px 20px; font-size: var(--fs-13); line-height: 1.5; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.cl-get { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.cl-get .small { font-size: var(--fs-13); color: var(--ink-3); }
.cl > p.small { margin: 0; padding: 12px 20px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.cl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 2%, var(--surface)); }
.cl-tools .btn { min-height: 36px; padding: 6px 14px; font-size: var(--fs-13); }
.cl-tools .btn.is-copied::after { content: " · Copied"; color: var(--accent); }
.cl-help-link { margin-left: auto; }
.cl-tools-msg { margin: 0; padding: 8px 20px; font-size: var(--fs-13); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.cl-tools-msg.error { color: var(--red); }
.cl-tools-msg[hidden] { display: none; }
.cl > p.cl-sync { color: var(--amber); }
.cl > p.cl-sync[hidden] { display: none; }
.cl-ended { color: var(--ink); background: color-mix(in srgb, var(--amber) 8%, var(--surface)); }
.cl-items { list-style: none; margin: 0; padding: 0; }
.improvement-plan .cl-item { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 10px; min-height: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.improvement-plan .cl-item:last-child { border-bottom: 0; }
.cl-item.is-target { outline-offset: -3px; }
.cl-item > p { margin: 0; }
.cl-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.cl-n { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font-size: var(--fs-12); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.cl-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.cl-label { font-size: var(--fs-15); font-weight: 600; line-height: 1.3; color: var(--ink); }
.cl-tag { font-size: var(--fs-12); color: var(--ink-3); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.cl-tag.is-detail { color: var(--amber); border-color: var(--amber-fill); background: var(--amber-soft); }
.cl-done { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-13); font-weight: 500; color: var(--ink-2); cursor: pointer; user-select: none; }
.cl-done input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.cl-done:hover { border-color: var(--ink-3); color: var(--ink); }
.cl-done.is-checked { border-color: var(--green-fill); background: var(--green-soft); color: var(--ink); }
.cl-done:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cl-example { margin: 0; font-size: var(--fs-12); color: var(--ink-3); }
.cl-why { font-size: var(--fs-13); line-height: 1.45; color: var(--ink-3); }
.cl-loading { display: flex; align-items: center; font-size: var(--fs-13); color: var(--ink-2); }
.cl-error { font-size: var(--fs-13); color: var(--red); }
.cl-rows { display: grid; gap: 8px; margin: 0; font-size: var(--fs-15); line-height: 1.45; }
.cl-row { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.cl-row dt { font-size: var(--fs-13); color: var(--ink-3); font-weight: 500; }
.cl-row dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.cl-where { color: var(--ink); }
.cl-phrase { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.cl-nth { font-size: var(--fs-13); color: var(--amber); }
.cl-now { color: var(--ink-2); overflow-wrap: anywhere; }
.cl-row-new dd { display: block; }
.cl-new { display: block; padding: 8px 12px; border-left: 3px solid var(--accent); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; background: var(--accent-soft); color: var(--ink); overflow-wrap: anywhere; }
.cl-edit, .cl-ask textarea {
display: block; width: 100%; min-height: calc(3 * 1.5em + 18px); padding: 8px 12px; resize: vertical;
font: inherit; font-size: var(--fs-15); line-height: 1.5; color: var(--ink);
border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface);
}
.cl-edit:focus-visible, .cl-ask textarea:focus-visible, .cl-under select:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--accent); box-shadow: var(--focus-halo); }
.cl-under { display: grid; gap: 4px; flex-basis: 100%; min-width: 0; font-size: var(--fs-13); color: var(--ink-3); }
.cl-under select { width: 100%; min-width: 0; text-overflow: ellipsis; min-height: 36px; padding: 4px 8px; font: inherit; font-size: var(--fs-13); color: var(--ink); border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--surface); }
.cl-how { font-size: var(--fs-13); line-height: 1.45; color: var(--ink-2); }
.cl-len, .cl-note { font-size: var(--fs-13); line-height: 1.45; color: var(--amber); }
.cl-msg { margin: 0; font-size: var(--fs-13); line-height: 1.45; color: var(--red); }
.cl-msg.is-detail { color: var(--amber); }
.cl-msg[hidden] { display: none; }
.cl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cl-actions .btn { min-height: 36px; padding: 6px 14px; font-size: var(--fs-13); }
.cl-copy { display: inline-flex; align-items: center; gap: 6px; }
.cl-copy .copy-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cl-copy .copy-done { display: none; }
.cl-copy.is-copied .copy-icon, .cl-copy.is-copied .cl-copy-label { display: none; }
.cl-copy.is-copied .copy-done { display: inline; }
.cl-copy-look {
height: 30px; padding: 0 10px; font: inherit; font-size: var(--fs-13); font-weight: 500; color: var(--ink);
border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); cursor: pointer;
}
.cl-copy-look:hover { border-color: var(--ink-3); }
.cl-copy-look .copy-icon { opacity: .65; }
.cl-copy-look.is-copied .copy-done { color: var(--accent); }
.cl-copy-look:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cl-actions .link { white-space: nowrap; }
.cl-item.is-done .cl-rows, .cl-item.is-done .cl-how, .cl-item.is-done .cl-why { opacity: .62; }
.cl-ask { display: grid; gap: 8px; }
.cl-q { font-size: var(--fs-15); font-weight: 500; line-height: 1.45; color: var(--ink); }
.plan-sub { margin: 0; padding: 14px 20px 4px; font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); border-top: 1px solid var(--line); }
.cl + .plan-sub[hidden] + #plan-list > li:first-child { border-top: 0; }
.cl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 20px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.cl-foot p { margin: 0; flex: 1 1 260px; font-size: var(--fs-13); line-height: 1.45; color: var(--ink-2); }
.cl-foot p strong { color: var(--ink); }
.cl-notes { width: 100%; font: inherit; font-size: var(--fs-13); line-height: 1.5; padding: 8px 10px; border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); }
.ph-lead { margin: 0 0 4px !important; padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; background: var(--accent-soft); color: var(--ink) !important; font-size: var(--fs-15); line-height: 1.5; }
.ph-rules-head { margin: 18px 0 6px; font-family: var(--font); font-size: var(--fs-15); font-weight: 600; color: var(--ink); }
.ph-rules { margin: 0 0 4px; padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-13); line-height: 1.5; color: var(--ink-2); }
.ph-which { margin: 0 0 8px !important; font-size: var(--fs-13); font-weight: 600; color: var(--ink) !important; }
.ph-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ph-tab { flex: none; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--fs-13); font-weight: 500; cursor: pointer; }
.ph-tab.active { background: var(--btn-primary); border-color: var(--btn-primary); color: var(--btn-primary-ink); }
.ph-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ph-panel h4 { margin: 12px 0 6px; font-family: var(--font); font-size: var(--fs-15); font-weight: 600; color: var(--ink); }
.ph-panel ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-15); line-height: 1.5; color: var(--ink); }
.ph-panel[hidden] { display: none; }
@container grp (max-width: 560px) {
.cl-intro, .cl-get, .cl-tools, .cl-tools-msg, .improvement-plan .cl-item, .plan-sub, .cl-foot, .cl > p.small { padding-inline: 16px; }
.cl-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
.cl-head { grid-template-columns: 24px minmax(0, 1fr); row-gap: 8px; }
.cl-head .cl-done { grid-column: 2; justify-self: start; }
.cl-help-link { margin-left: 0; flex-basis: 100%; }
.cl-tools .btn { flex: 1 1 auto; }
}
@media (pointer: coarse) {
.cl-actions .btn, .cl-tools .btn, .cl-done, .cl-under select, .ph-tab { min-height: 44px; }
.cl-copy-look { height: 40px; }
.cl-actions .link, .cl-help-link { padding-block: 12px; margin-block: -8px; }
}
.cl-tag.is-tryout { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.cl-tried { font-size: var(--fs-13); line-height: 1.45; color: var(--accent); font-weight: 500; }
/* compare.css */
.what-moved { overflow: hidden; }
.wm-lead { padding: 14px 20px 12px; border-bottom: 1px solid var(--line); }
.wm-score { margin: 0; font-size: var(--fs-18); line-height: 1.35; color: var(--ink); }
.wm-score strong { font-variant-numeric: tabular-nums; }
.wm-counts { margin: 4px 0 0; font-size: var(--fs-13); color: var(--ink-2); }
.wm-note { margin: 8px 0 0; font-size: var(--fs-13); color: var(--ink-3); line-height: 1.45; }
.what-moved > .wm-note { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.wm-found { margin: 0; padding: 14px 20px 4px; font-size: var(--fs-18); font-weight: 600; line-height: 1.35; color: var(--ink); }
.wm-overall .wm-score { font-size: var(--fs-15); }
.wm-block { border-bottom: 1px solid var(--line); }
.wm-block > h3, .wm-block > summary { margin: 0; padding: 12px 20px 8px; font-size: var(--fs-15); font-weight: 600; color: var(--ink); }
.wm-block > summary { cursor: pointer; padding-bottom: 12px; min-height: 44px; box-sizing: border-box; }
.wm-block[open] > summary { padding-bottom: 8px; }
.wm-block > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.wm-block ul { list-style: none; margin: 0; padding: 0 20px 12px; }
.wm-hint { margin: 0; padding: 0 20px 8px; font-size: var(--fs-13); color: var(--ink-2); line-height: 1.45; }
.wm-meter { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto 2.6em; align-items: center; gap: 4px 10px; padding: 6px 0; font-size: var(--fs-15); }
.wm-label { min-width: 0; overflow-wrap: anywhere; }
.wm-track { position: relative; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.wm-track .wm-fill { position: absolute; top: 0; bottom: 0; }
.wm-meter.is-up .wm-fill { left: var(--from); right: calc(100% - var(--to)); background: var(--green-fill); }
.wm-meter.is-up .wm-track::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--from); background: var(--line-strong); }
.wm-meter.is-down .wm-fill { left: var(--to); right: calc(100% - var(--from)); background: repeating-linear-gradient(135deg, var(--red-fill) 0 3px, transparent 3px 6px); }
.wm-meter.is-down .wm-track::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--to); background: var(--line-strong); }
.wm-nums { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.wm-delta { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.wm-meter.is-up .wm-delta { color: var(--green); }
.wm-meter.is-down .wm-delta { color: var(--red); }
.wm-more { padding: 4px 0; font-size: var(--fs-13); color: var(--ink-3); }
.wm-line { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: var(--fs-15); line-height: 1.45; }
.wm-line:first-child { border-top: 0; }
.wm-line .wm-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wm-sign { flex: none; width: 1.2em; font-weight: 700; color: var(--ink-3); text-align: center; }
.wm-line.is-added .wm-sign { color: var(--green); }
.wm-was { display: block; margin-top: 2px; font-size: var(--fs-13); color: var(--ink-3); }
.wm-copy { flex: none; min-height: 44px; }
.wm-copy .copy-done { display: none; color: var(--accent); }
.wm-copy.is-copied .wm-copy-label { display: none; }
.wm-copy.is-copied .copy-done { display: inline; }
.wm-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0; font-size: var(--fs-15); }
.wm-tag { flex: none; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-12); font-weight: 600; }
.wm-item.is-found .wm-tag { background: var(--green-soft); color: var(--green); }
.wm-item.is-own .wm-tag { background: var(--likely-soft); color: var(--likely); }
.wm-item.is-notyet .wm-tag { background: var(--amber-soft); color: var(--amber); }
.wm-item .wm-text { flex: 1; min-width: 0; }
.wm-item .link { min-height: 44px; }
.wm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 20px 16px; }
.wm-main { color: var(--ink-3); }
@media (max-width: 640px) {
.wm-lead, .wm-actions, .wm-found { padding-left: 16px; padding-right: 16px; }
.wm-block > h3, .wm-block > summary, .wm-block ul, .wm-hint { padding-left: 16px; padding-right: 16px; }
.wm-meter { grid-template-columns: minmax(0, 1fr) auto 2.4em; }
.wm-meter .wm-track { grid-column: 1 / -1; grid-row: 2; }
.wm-actions .btn { flex: 1 1 100%; }
}
.cv-choices { display: grid; gap: 8px; margin: 10px 0 12px; }
.cv-choice { display: flex; flex-direction: column; gap: 3px; min-height: 44px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--ink); background: var(--bg); text-align: left; font: inherit; cursor: pointer; }
.cv-choice:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.cv-choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cv-choice strong { font-size: var(--fs-15); }
.cv-choice span { color: var(--ink-3); font-size: var(--fs-12); line-height: 1.35; overflow-wrap: anywhere; }
.cv-choice.is-default { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
/* experience.css */
.cv-experience { margin: 0 0 6px; font-size: 13px; color: var(--ink-3); line-height: 1.35; font-variant-numeric: tabular-nums; white-space: normal; overflow: visible; text-overflow: clip; text-wrap: pretty; }
.cv-experience[hidden] { display: none; }
/* coverletter.css */
.cover-letter-btn { white-space: nowrap; }
.modal-body .cl-lead { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.modal-body .cl-lead b { font-weight: 600; color: var(--ink); }
.modal-body #cover-letter-text {
display: block; width: 100%; min-height: 340px; resize: vertical;
font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--ink);
padding: 14px 16px; background: var(--bg);
border: 1px solid var(--line-strong); border-radius: var(--r-ctl, 6px);
}
.modal-body #cover-letter-text:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 0; border-color: var(--accent); }
.modal-body .cl-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.modal-body .notice.cl-thin { border: 1px solid color-mix(in srgb, var(--amber-fill) 70%, transparent); background: var(--amber-soft); color: var(--ink); border-radius: var(--r-ctl, 6px); font-size: 13.5px; }
.modal-body .notice.cl-thin code { font: inherit; font-weight: 600; }
.modal-body .cl-actions { margin-top: 14px; }
.modal-body .cl-actions .btn { white-space: nowrap; }
.modal-body #cl-msg:empty { display: none; }
.modal-body .cl-cost { margin: 10px 0 0; color: var(--ink-3); }
.modal-body .cl-cost[hidden] { display: none; }
.modal-body #cl-msg { margin: 6px 0 0; }
.modal-body #cover-letter-text:focus-visible { box-shadow: var(--focus-halo, 0 0 0 4px var(--focus-soft)); }
.modal-body .cl-stale {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px;
margin: 0 0 12px; padding: 8px 8px 8px 12px;
font-size: 13.5px; line-height: 1.4; color: var(--ink);
background: var(--amber-soft); border-left: 2px solid var(--amber-fill); border-radius: 0 var(--r-ctl, 6px) var(--r-ctl, 6px) 0;
}
.modal-body .cl-stale p { margin: 0; }
.modal-body .cl-stale .btn { min-height: 32px; white-space: nowrap; }
@media (max-width: 860px) {
.modal-body #cover-letter-text { min-height: 48vh; font-size: 16px; }
.modal-body .cl-actions .btn { flex: 1 1 auto; }
}
@media (pointer: coarse) {
.modal-body .cl-actions .btn, .modal-body .cl-stale .btn { min-height: 44px; }
}
/* library.css */
.library { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 28px 28px 56px; display: flex; flex-direction: column; gap: 16px; }
body.editorial-shell .library { max-width: none; margin: 0; padding: 44px 48px 72px; gap: 20px; background: var(--bg); }
.lib-head { margin-bottom: 8px; }
.lib-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lib-toolbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.lib-select { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.lib-select select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--edge, var(--line-strong)); border-radius: var(--r-ctl); min-height: 36px; padding: 6px 10px; max-width: 260px; }
.lib-select select:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--accent); box-shadow: var(--focus-halo, 0 0 0 4px var(--focus-soft)); }
.lib-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font-size: var(--fs-13); color: var(--ink-2); cursor: pointer; }
.lib-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
[data-theme="dark"] .lib-check input { color-scheme: dark; }
.lib-view { display: none; align-items: stretch; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); }
.lib-view .btn { min-height: 30px; padding: 4px 14px; border: 0; border-radius: calc(var(--r-ctl) - 2px); background: transparent; color: var(--ink-2); }
.lib-view .btn:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.lib-view .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.up-to-date { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--ink-2); }
.up-to-date svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#run-msg:empty { display: none; }
.lib-empty { border: 1px dashed var(--line-strong); border-radius: var(--r-surface); padding: 26px; max-width: 700px; background: var(--surface); }
.lib-empty h2 { font-family: var(--display); font-weight: 400; font-size: var(--fs-32); line-height: 1.1; letter-spacing: var(--track-display); margin-bottom: 8px; }
.lib-empty .row { display: flex; gap: 10px; flex-wrap: wrap; }
.lib-empty p { color: var(--ink-2); margin: 0 0 8px; }
.lib-empty .row { margin-top: 16px; }
.lib-locked { max-width: 60ch; }
.lib-locked p { color: var(--ink-2); margin: 0 0 10px; }
.lib-locked.gate-empty { max-width: 460px; }
.lib-locked.gate-empty p { margin: 0 auto 20px; }
.lib-locked.gate-empty .hint { margin: 20px 0 0; }
.lib-empty.lib-gate { max-width: 700px; }
.lib-empty.lib-gate h2 { margin: 0 0 8px; }
.lib-empty.lib-gate .hint { margin: 16px 0 0; font-size: var(--fs-13); color: var(--ink-3); }
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-surface); background: var(--surface); }
table.matrix { border-collapse: separate; border-spacing: 0; font-size: 13.5px; min-width: 100%; }
.matrix th, .matrix td { border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.matrix thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; padding: 12px 12px 10px; font-weight: 600; font-size: var(--fs-12); color: var(--ink-2); }
.matrix thead th.corner { vertical-align: bottom; color: var(--ink-3); font-weight: 500; }
.matrix th.corner { z-index: 3; }
.matrix th.spec { min-width: 168px; max-width: 240px; }
.matrix th.spec .name { display: block; font-family: var(--font); font-weight: 600; font-size: var(--fs-17, 17px); line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); white-space: normal; }
.matrix th.spec .meta { display: block; font-weight: 400; color: var(--ink-3); margin-top: 3px; white-space: nowrap; }
.matrix .cvcol { position: sticky; left: 0; background: var(--surface); z-index: 1; width: 240px; min-width: 200px; max-width: 280px; border-right: 1px solid var(--line); padding: 10px 12px; }
.matrix tr.lineage td.lineage-cell { background: color-mix(in srgb, var(--bg) 60%, var(--surface)); padding: 0; }
.matrix .lineage-inner { position: sticky; left: 0; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 12px 6px; font-weight: 600; color: var(--ink); max-width: 320px; box-sizing: border-box; }
.matrix .lineage-inner .n { color: var(--ink-3); font-weight: 400; font-size: var(--fs-12); white-space: nowrap; }
.matrix tr.version .cvcol { padding-left: 22px; }
.matrix tr.version .cvcol .v { font-weight: 600; margin-right: 6px; }
.matrix tr.version .cvcol .meta { color: var(--ink-3); font-size: 12px; }
.matrix tr.version .cvcol { padding-right: 40px; }
.matrix tr.version .cvcol > .lib-menu { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); }
.matrix tr.version.archived .cvcol { color: var(--ink-3); }
.matrix tr.version.archived .cvcol .v::after { content: " archived"; font-weight: 400; font-size: var(--fs-12); color: var(--ink-3); }
.matrix td.cell { padding: 0; min-width: 168px; height: 56px; position: relative; }
.matrix td.cell .cell-link { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; height: 100%; min-height: 56px; padding: 8px 12px; text-decoration: none; color: inherit; }
.matrix td.cell .cell-link:hover { background: var(--accent-soft); }
.matrix td.cell .cell-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.matrix td.cell .score { display: inline-flex; align-items: baseline; gap: 0; }
.matrix td.cell .n { font-family: var(--font); font-weight: 600; font-size: var(--fs-20); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em; }
.matrix td.cell .of { font-size: var(--fs-13); font-weight: 500; color: var(--ink-2); white-space: pre; }
.matrix td.cell .when { font-size: var(--fs-12); color: var(--ink-2); display: block; font-weight: 400; line-height: 1.3; }
.matrix td.cell .when::first-letter { text-transform: uppercase; }
.matrix td.cell .when .band { font-weight: 400; color: inherit; }
.matrix td.cell[data-band="red"] .n { color: var(--red); }
.matrix td.cell[data-band="amber"] .n { color: var(--amber); }
.matrix td.cell[data-band="likely"] .n { color: var(--likely); }
.matrix td.cell[data-band="green"] .n { color: var(--green); }
.matrix td.cell[data-band="red"] { box-shadow: inset 3px 0 0 var(--red); }
.matrix td.cell[data-band="amber"] { box-shadow: inset 3px 0 0 var(--amber); }
.matrix td.cell[data-band="likely"] { box-shadow: inset 3px 0 0 var(--likely); }
.matrix td.cell[data-band="green"] { box-shadow: inset 3px 0 0 var(--green); }
.matrix td.cell.has-run .cell-link { padding-left: 15px; }
.matrix td.cell .cell-run { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; padding: 4px 9px; }
.matrix td.cell.has-run .cell-run { opacity: 0; }
.matrix td.cell.has-run:hover .cell-run, .matrix td.cell.has-run:focus-within .cell-run { opacity: 1; }
.matrix td.cell.empty { vertical-align: middle; }
.matrix td.cell.empty .cell-run { position: static; transform: none; margin: 0 12px; min-height: 32px; padding: 4px 14px; font-size: var(--fs-13); }
.matrix td.cell.running .cell-run { opacity: 1; }
.matrix td.cell .cell-err { display: block; font-size: var(--fs-12); color: var(--red); padding: 4px 12px 8px; }
.matrix tbody tr:last-child td { border-bottom: 0; }
.lib-menu { position: relative; display: inline-block; margin-left: auto; }
.lib-menu summary { list-style: none; cursor: pointer; border: 1px solid transparent; border-radius: var(--r-ctl); padding: 4px 9px; color: var(--ink-3); font-weight: 600; line-height: 1; }
.lib-menu summary::-webkit-details-marker { display: none; }
.lib-menu summary:hover, .lib-menu[open] summary { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.lib-menu summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.lib-menu .lib-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); box-shadow: var(--shadow-modal); min-width: 160px; padding: 4px; display: flex; flex-direction: column; }
.lib-menu .lib-menu-list button, .lib-menu .lib-menu-list a { font: inherit; font-size: 13px; text-align: left; background: none; border: 0; color: var(--ink); padding: 8px 10px; border-radius: calc(var(--r-ctl) - 2px); cursor: pointer; text-decoration: none; white-space: nowrap; }
.lib-menu .lib-menu-list button:hover, .lib-menu .lib-menu-list a:hover { background: var(--accent-soft); }
.lib-menu .lib-menu-list button:focus-visible, .lib-menu .lib-menu-list a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lib-menu .lib-menu-list .danger { color: var(--red); }
.matrix th.spec .lib-menu { margin-left: 6px; vertical-align: top; }
.matrix th.spec .head { display: flex; align-items: flex-start; gap: 4px; }
.matrix th.spec .head .name { flex: 1; }
.expanded-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.expanded-head h2 { font-family: var(--font); font-weight: 600; font-size: var(--fs-17, 17px); line-height: 1.3; letter-spacing: -0.005em; margin: 0; }
.expanded-head .meta { color: var(--ink-3); font-size: 13px; }
.matrix-wrap.fit { width: fit-content; max-width: 100%; }
table.matrix.expanded { min-width: 0; }
.matrix.expanded th.cv { min-width: 110px; text-align: center; vertical-align: bottom; }
.matrix.expanded th.cv .cell-link { display: block; text-decoration: none; color: inherit; border-radius: var(--r-ctl); }
.matrix.expanded th.cv .cell-link:hover { background: var(--accent-soft); }
.matrix.expanded th.cv .cell-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.matrix.expanded th.cv .n { font-family: var(--font); font-weight: 600; font-size: var(--fs-20); font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); display: block; margin-top: 6px; }
.matrix.expanded th.cv .who { display: block; font-weight: 600; white-space: normal; }
.matrix.expanded th.cv .v { display: block; color: var(--ink-3); font-weight: 400; }
.matrix.expanded th.cv .band { display: block; font-weight: 600; font-size: var(--fs-12); }
.matrix.expanded th.cv[data-band="red"] .n, .matrix.expanded th.cv[data-band="red"] .band { color: var(--red); }
.matrix.expanded th.cv[data-band="amber"] .n, .matrix.expanded th.cv[data-band="amber"] .band { color: var(--amber); }
.matrix.expanded th.cv[data-band="likely"] .n, .matrix.expanded th.cv[data-band="likely"] .band { color: var(--likely); }
.matrix.expanded th.cv[data-band="green"] .n, .matrix.expanded th.cv[data-band="green"] .band { color: var(--green); }
.matrix.expanded tr.section td { color: var(--ink-3); font-size: 12px; font-weight: 600; padding: 12px 12px 4px; border-bottom: 0; }
.matrix.expanded .req { white-space: normal; padding: 8px 12px; min-width: 240px; max-width: 420px; font-weight: 500; }
.matrix.expanded .req .imp { color: var(--ink-3); font-size: var(--fs-12); font-weight: 400; margin-left: 6px; }
.matrix.expanded td.rcell { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; padding: 8px 10px; min-width: 96px; }
.matrix.expanded td.rcell .w { display: block; font-size: var(--fs-12); font-weight: 500; }
.matrix.expanded td.rcell[data-band="red"] { color: var(--red); background: var(--red-soft); }
.matrix.expanded td.rcell[data-band="amber"] { color: var(--amber); background: var(--amber-soft); }
.matrix.expanded td.rcell[data-band="likely"] { color: var(--likely); background: var(--likely-soft); }
.matrix.expanded td.rcell[data-band="green"] { color: var(--green); background: var(--green-soft); }
.matrix.expanded td.rcell.empty { color: var(--ink-3); font-weight: 400; }
.matrix.expanded td.rcell.best { box-shadow: inset 0 0 0 2px var(--accent); }
.matrix.expanded td.rcell .bv { display: block; font-size: var(--fs-12); font-weight: 400; color: var(--ink-3); }
.expanded-note { color: var(--ink-3); font-size: var(--fs-12); margin: 0; }
.lib-list { display: flex; flex-direction: column; gap: 10px; }
.lib-card { border: 1px solid var(--line); border-radius: var(--r-surface); background: var(--surface); padding: 12px 14px; }
.lib-card .t { font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.lib-card .t .v { color: var(--ink-3); font-weight: 400; font-size: var(--fs-12); }
.lib-card ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lib-card li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.lib-card li .spec { flex: 1; color: var(--ink-2); }
.lib-card li a { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 6px; }
body.editorial-shell .lib-card li a { gap: 4px; text-decoration: none; color: inherit; }
.lib-card li .n { font-family: var(--font); font-weight: 600; font-size: var(--fs-20); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em; }
.lib-card li .of { font-size: var(--fs-13); color: var(--ink-2); }
.lib-card li[data-band="red"] .n { color: var(--red); }
.lib-card li[data-band="amber"] .n { color: var(--amber); }
.lib-card li[data-band="likely"] .n { color: var(--likely); }
.lib-card li[data-band="green"] .n { color: var(--green); }
.modal-body label.f { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2); margin: 10px 0 4px; }
.modal-body input[type=text], .modal-body input[type=url], .modal-body textarea, .modal-body select { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--edge, var(--line-strong)); border-radius: var(--r-ctl); padding: 8px 10px; }
.modal-body textarea { min-height: 180px; resize: vertical; }
.modal-body input:focus-visible, .modal-body textarea:focus-visible, .modal-body select:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--accent); box-shadow: var(--focus-halo, 0 0 0 4px var(--focus-soft)); }
.modal-body .or { text-align: center; color: var(--ink-3); font-size: var(--fs-12); margin: 8px 0; }
.modal-body .msg { min-height: 1.2em; }
.modal-body .msg.error { color: var(--red); }
.modal-body .radio { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; color: var(--ink-2); }
.modal-body .radio input { margin-top: 4px; accent-color: var(--accent); }
@media (max-width: 1100px) and (min-width: 861px) {
body.editorial-shell .library { padding: 40px 40px 56px; }
}
@media (max-width: 860px) {
.library, body.editorial-shell .library { padding: 28px 20px 40px; }
.lib-toolbar-right { margin-left: 0; }
}
@media (max-width: 600px) {
.lib-view { display: inline-flex; }
.library, body.editorial-shell .library { padding: 24px 16px 40px; }
.matrix .cvcol { width: 160px; min-width: 150px; max-width: 200px; }
.matrix td.cell { min-width: 140px; }
}
@media (prefers-reduced-motion: no-preference) {
.matrix td.cell .cell-run { transition: opacity 120ms ease; }
}
/* analyse-stream.css */
.meter.reading { animation: rowin 320ms cubic-bezier(.2,.8,.2,1) both; }
.meter.reading .meter-val { color: var(--ink-3); }
.meter.reading .meter-band:empty,
.meter.reading .meter-delta,
.meter.reading .fix-btn,
.meter.reading .kw-strip { display: none; }
.meter.reading .meter-band { background: none; padding-inline: 0; }
.app[data-stage="reading"] .kw-summary { display: none; }
@keyframes rowin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.meter.reading { animation: none; }
}