/* Positioned — the application's own look. The resume has its own
   stylesheet and fonts (static/resume/); this file styles the page around it.
   Design tokens as custom properties; the dark theme redefines them. */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --surface-3: #e7eaef;
  --text: #18202b;
  --muted: #5a6574;
  --border: #dfe3e9;
  --border-strong: #c6ccd5;
  /* One accent, used sparingly: what acts, and where you are. */
  --accent: #1f5bd8;
  --accent-hover: #1a4cb6;
  --accent-soft: #e8effd;
  --accent-contrast: #ffffff;
  --ok: #17784a;
  --ok-soft: #e3f4ea;
  --warn: #8a5800;
  --warn-soft: #fbf1dc;
  --bad: #b42318;
  --bad-soft: #fdeceb;
  --focus: #1f5bd8;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%);
  --shadow: 0 1px 3px rgb(16 24 40 / 8%), 0 8px 24px rgb(16 24 40 / 6%);
  --shadow-lg: 0 24px 64px rgb(16 24 40 / 18%);
  --paper: #ffffff;
  --stage: #e9ecf1;
  /* Drawn on the paper, which stays white in both themes. */
  --page-break: #c2410c;
  --page-break-contrast: #ffffff;
  /* The spots' pins: the same red the picture sent to the assistant has
     (ResumeConstants.spot_color). */
  --spot: #dc2626;
  --spot-contrast: #ffffff;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --header-height: 56px;
  /* The banner at the foot of a narrow screen, and the room kept for it:
     its own height plus the device's safe area under it. */
  --bottom-nav-height: 49px;
  --bottom-nav-space: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0e1116;
  --surface: #161a21;
  --surface-2: #1c212a;
  --surface-3: #252b36;
  --text: #e5e8ed;
  --muted: #9aa4b2;
  --border: #2a303b;
  --border-strong: #3a4250;
  --accent: #7ea6ff;
  --accent-hover: #a2bfff;
  --accent-soft: #1d2a46;
  --accent-contrast: #0e1116;
  --ok: #5fd39a;
  --ok-soft: #173427;
  --warn: #f0bf5a;
  --warn-soft: #3a2e14;
  --bad: #ff8a80;
  --bad-soft: #3d1c1a;
  --focus: #7ea6ff;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow: 0 1px 3px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 55%);
  --stage: #0a0d11;
  color-scheme: dark;
}

/* ------------------------------------------------------------ base */

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Nothing is drawn until the page knows whether someone is signed in. */
body.booting .main { visibility: hidden; }

h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; font-weight: 650; }
h2 { font-size: 1.125rem; font-weight: 620; }
h3 { font-size: 0.95rem; font-weight: 620; }
p { margin: 0; }
a { color: var(--accent); }
code, pre { font-family: var(--mono); font-size: 0.875em; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 8px; box-shadow: var(--shadow); }

.muted { color: var(--muted); }
.small-text { font-size: 0.85rem; }
.tiny-text { font-size: 0.78rem; }
.spacer { flex: 1 1 auto; }

.icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon svg { display: block; }

/* ---------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 560;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.button:disabled { opacity: 0.55; cursor: not-allowed; }
.button.primary { background: var(--accent); color: var(--accent-contrast); }
.button.primary:hover:not(:disabled) { background: var(--accent-hover); }
.button.secondary { background: var(--surface); border-color: var(--border-strong); }
.button.secondary:hover:not(:disabled) { background: var(--surface-2); }
.button.ghost:hover:not(:disabled) { background: var(--surface-2); }
.button.danger { background: var(--bad); color: #ffffff; }
.button.small { min-height: 30px; padding: 0 10px; font-size: 0.875rem; }
.button.wide { width: 100%; min-height: 42px; }
.button.icon-button { width: 36px; padding: 0; }

/* A button waiting on the server: a spinner in place of its content. */
.button.busy { position: relative; color: transparent !important; }
.button.busy > * { visibility: hidden; }
.button.busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--muted);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.button.primary.busy::after, .button.danger.busy::after { border-color: var(--accent-contrast); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- fields */

label { font-size: 0.875rem; font-weight: 560; }

input, select, textarea {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
  border-color: var(--focus);
}
input[readonly] { background: var(--surface-2); color: var(--muted); }
select.compact { width: auto; min-height: 32px; padding: 3px 8px; font-size: 0.875rem; }

.stack { display: flex; flex-direction: column; gap: 8px; }
.stack > label { margin-top: 6px; }
.narrow { max-width: 420px; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.message { min-height: 1.25em; font-size: 0.875rem; }
.message.error { color: var(--bad); }
.message:empty { min-height: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.info { background: var(--accent-soft); color: var(--accent); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}
button.chip { cursor: pointer; }
button.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.applied { border-color: transparent; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip .icon svg { width: 14px; height: 14px; }

/* ----------------------------------------------------------- header */

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--header-height);
  padding: 0 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.brand-mark { color: var(--accent); }
.brand-mark svg path { fill: var(--accent-contrast); }
.brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }

.version-tag {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* The prepaid balance, left of the language switch: amber under the floor
   below which Positioned's own connection stops answering. */
.balance-tag {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
}
/* Narrow screens only: the version behind a "?". */
.version-help { display: none; }
.button.icon-button.version-help { width: 30px; min-height: 30px; color: var(--muted); }

.balance-tag.low { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }

.nav { display: flex; gap: 2px; margin-left: 12px; }
.nav-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 560;
  cursor: pointer;
}
.nav-button:hover { background: var(--surface-2); color: var(--text); }
.nav-button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
/* Settings, as an icon between the language and the theme. */
.nav-icon { color: var(--muted); }
.nav-icon:hover:not(:disabled) { color: var(--text); }
.nav-icon[aria-current="page"], .nav-icon[aria-current="page"]:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }

/* Narrow screens only: "Resumes" and "Applications" at the foot of the screen. */
.bottom-nav { display: none; }

.segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.segment {
  min-width: 34px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
}
.segment[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.who { max-width: 180px; overflow: hidden; color: var(--muted); font-size: 0.875rem; text-overflow: ellipsis; white-space: nowrap; }

.toast {
  position: fixed;
  top: calc(var(--header-height) + 10px);
  left: 50%;
  z-index: 30;
  max-width: min(560px, calc(100vw - 32px));
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  cursor: pointer;
  transform: translateX(-50%);
}
.toast:not(.shown) { display: none; }
.toast.ok { background: var(--ok); color: #ffffff; }
.toast.error { background: var(--bad); color: #ffffff; }

/* ------------------------------------------------------------- main */

.main { outline: none; }
.view.page { max-width: 1120px; margin: 0 auto; padding: 32px 16px 48px; }
.page-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.page-head p { margin-top: 6px; }

/* ---------------------------------------------------------- landing */

.landing {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
  max-width: 1080px;
  min-height: calc(100vh - var(--header-height));
  margin: 0 auto;
  padding: 48px 24px;
}
.eyebrow { color: var(--accent); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.landing h1 { margin-top: 12px; font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 720; letter-spacing: -0.03em; }
.lead { margin-top: 16px; color: var(--muted); font-size: 1.12rem; line-height: 1.6; }
.promise-list { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.promise-list li { display: flex; gap: 10px; align-items: flex-start; }
.promise-list .icon { margin-top: 2px; color: var(--ok); }
.landing-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; box-shadow: var(--shadow); }
.landing-card h2 { font-size: 1.2rem; }
.sent { align-items: flex-start; }
.sent-icon { display: inline-flex; padding: 10px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.divider { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 0.82rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* ---------------------------------------------------------- resumes */

.resume-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

.resume-card { position: relative; display: flex; flex-direction: column; overflow: hidden; transition: box-shadow 0.15s, border-color 0.15s; }
.resume-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.resume-open {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 14px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.resume-open:focus-visible { outline-offset: -2px; border-radius: var(--radius-lg); }

/* A page, drawn: what a resume card stands for. */
.resume-thumb {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 128px;
  margin-bottom: 10px;
  padding: 22px 22% 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.resume-thumb span { display: block; height: 6px; border-radius: 3px; background: var(--border-strong); }
.resume-thumb span:first-child { width: 55%; height: 9px; background: var(--accent); opacity: 0.7; }
.resume-thumb span:nth-child(2) { width: 80%; }
.resume-thumb span:nth-child(3) { width: 90%; }
.resume-thumb span:nth-child(4) { width: 65%; }
.resume-card-title { padding: 0 14px; font-weight: 620; overflow-wrap: anywhere; }
.resume-card-meta { padding: 0 14px; color: var(--muted); font-size: 0.82rem; }
.card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.card-actions .button { background: var(--surface); box-shadow: var(--shadow-sm); }
.resume-card:hover .card-actions, .resume-card:focus-within .card-actions { opacity: 1; }
@media (hover: none) { .card-actions { opacity: 1; } }

.empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 48px 24px; text-align: center; }
.empty-icon { padding: 14px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.empty-icon svg { width: 28px; height: 28px; }

/* ----------------------------------------------------------- editor */

body.editing { overflow: hidden; }
.editor { display: flex; flex-direction: column; height: calc(100vh - var(--header-height)); height: calc(100dvh - var(--header-height)); }

.editor-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.title-input {
  width: auto;
  min-width: 0;
  max-width: 340px;
  flex: 0 1 340px;
  border-color: transparent;
  background: none;
  font-size: 1.05rem;
  font-weight: 620;
}
.title-input:hover { border-color: var(--border); }
/* As wide as the title, so the mode switch sits right after it; a browser
   without field-sizing keeps the fixed width above. */
@supports (field-sizing: content) {
  .title-input { flex: 0 1 auto; min-width: 8ch; field-sizing: content; }
}

.save-status { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.save-status.saved::before { content: "✓ "; color: var(--ok); }
.save-status.error { max-width: 280px; overflow: hidden; color: var(--bad); text-overflow: ellipsis; cursor: pointer; }
.save-status.titleNeeded { color: var(--warn); }

/* The export: one button in two parts, and the page's own menu. */
.split-button { display: inline-flex; align-items: stretch; }
.split-button .split-main { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.split-button .split-toggle {
  width: 30px;
  padding: 0;
  border-left-color: color-mix(in srgb, var(--accent-contrast) 35%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.split-toggle .icon svg { width: 16px; height: 16px; transition: transform 0.15s; }
.split-toggle[aria-expanded="true"] .icon svg { transform: rotate(180deg); }
.menu {
  position: fixed;
  z-index: 40;
  min-width: 180px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  list-style: none;
}
.menu-item {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-check { visibility: hidden; color: var(--accent); }
.menu-check svg { width: 16px; height: 16px; }
.menu-item[aria-checked="true"] { font-weight: 620; }
.menu-item[aria-checked="true"] .menu-check { visibility: visible; }

.editor-tabs { display: none; }

/* Wide: three panes side by side, in five columns — pane, gutter, pane,
   gutter, pane. The script sets each column's width (a share of the room
   with a floor, or 0 for a hidden pane and the gutter beside it); the
   fallbacks here are the defaults. */
.editor-panes {
  --col-markdown: minmax(260px, 1fr);
  --col-gutter-0: 9px;
  --col-preview: minmax(260px, 1.15fr);
  --col-gutter-1: 9px;
  --col-chat: minmax(300px, 0.8fr);
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: var(--col-markdown) var(--col-gutter-0) var(--col-preview) var(--col-gutter-1) var(--col-chat);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pane-markdown { grid-column: 1; }
.pane-preview { grid-column: 3; }
.pane-chat { grid-column: 5; }
.gutter[data-gutter="0"] { grid-column: 2; }
.gutter[data-gutter="1"] { grid-column: 4; }
.pane.pane-off, .gutter.gutter-off { display: none; }

/* A 1px rule with room around it to grab; the grip shows on hover and focus. */
.gutter {
  position: relative;
  z-index: 1;
  background: var(--surface);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}
.gutter::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: var(--border);
  transition: background-color 0.15s, width 0.15s, left 0.15s;
}
.gutter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 5px;
  height: 36px;
  margin-top: -18px;
  border-radius: 3px;
  background: var(--border-strong);
  opacity: 0;
  transition: opacity 0.15s, background-color 0.15s;
}
.gutter:hover::after, .gutter:focus-visible::after, .gutter.dragging::after { opacity: 1; }
.gutter:hover::before, .gutter.dragging::before { left: 3px; width: 3px; background: var(--accent-soft); }
.gutter.dragging::after { background: var(--accent); }
.gutter:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 0; }
/* While a gutter is dragged, nothing else reacts to the pointer — the
   preview's frame would otherwise swallow it. */
body.resizing { cursor: col-resize; user-select: none; }
body.resizing .preview-frame, body.resizing .print-frame, body.resizing .markdown-input { pointer-events: none; }

/* The editor's two modes, each named, and its assistant shown or hidden. */
.mode-switch .segment { display: inline-flex; gap: 6px; align-items: center; justify-content: center; padding: 0 12px; }
.mode-switch .segment[aria-pressed="true"] { color: var(--accent); }
.mode-switch .icon svg { width: 16px; height: 16px; }
.chat-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
/* The PDF's own controls: the page size and the style history. */
.editor[data-mode="content"] .pdf-only { display: none; }
.editor[data-mode="pdf"] .content-only { display: none; }
.pane-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
/* The Markdown pane keeps its tools on one line when narrow: the words of
   Guide and Upload give way to their icons (their titles still say them). */
.pane-markdown { container-type: inline-size; }
@container (max-width: 560px) {
  .pane-markdown .head-label { display: none; }
  .pane-markdown .pane-head { flex-wrap: nowrap; }
}
.pane-head h2 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
/* What the conversation has cost, beside its title. */
.chat-cost { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; cursor: default; }
/* One line at every width, never shrunk under its content: the title and
   the cost keep their size, and the connection's name gives way. */
.pane-chat .pane-head { flex: none; flex-wrap: nowrap; }
.pane-chat .pane-head h2, .pane-chat .chat-cost, .pane-chat .pane-head .icon-button { flex: none; white-space: nowrap; }
.pane-chat .pane-head #chat-connection {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pane-markdown { background: var(--surface); }
.markdown-input {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  /* Set from the page's text-size buttons; 14px until then. */
  font: var(--markdown-font-size, 14px)/1.65 var(--mono);
  tab-size: 4;
  resize: none;
}
.markdown-input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.warnings { flex: none; max-height: 30%; overflow: auto; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--warn-soft); }
.warnings-title { display: flex; gap: 6px; align-items: center; color: var(--warn); font-size: 0.85rem; }
.warning-list { margin: 6px 0 0; padding: 0; list-style: none; font-size: 0.85rem; }
.warning-list li { padding: 2px 0; }
.warning-link { padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: underline; text-decoration-color: var(--warn); text-underline-offset: 3px; cursor: pointer; }
.warning-link:hover { color: var(--warn); }

.pane-preview { container-type: inline-size; background: var(--stage); }
/* A phone-wide preview keeps its tools on one line: the pane's name (the
   tab above already says it) and the page size give way; the page count,
   the toggles and the zoom stay. */
@container (max-width: 560px) {
  .pane-preview .pane-head h2, .preview-page { display: none; }
  .pane-preview .preview-pages:not(:empty)::before { content: none; }
  .pane-preview .pane-head { gap: 4px; padding-inline: 8px; }
}
/* One line: the page's name gives way first, then the words of the zoom. */
.pane-preview .pane-head { flex-wrap: nowrap; }
.pane-preview .pane-head h2, .zoom { flex: none; }
.preview-page { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-pages { flex: none; white-space: nowrap; }
.preview-pages:not(:empty)::before { content: "·"; margin-right: 6px; }
.preview-toggles { flex: none; }
/* Narrower still, the tools take a second line rather than overflow: a
   toolbar wider than the phone widened the whole page, the browser zoomed
   out to fit it, and a focus then panned the header off the screen
   (2026-09-29). */
@container (max-width: 440px) {
  .pane-preview .pane-head { flex-wrap: wrap; row-gap: 4px; }
}
.preview-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
.preview-toggle .icon svg { width: 16px; height: 16px; }

.zoom { display: inline-flex; gap: 2px; align-items: center; }
.zoom-modes { margin-right: 4px; }
.zoom-modes .segment { display: inline-flex; gap: 5px; align-items: center; padding: 0 8px; white-space: nowrap; }
.zoom .icon svg { width: 16px; height: 16px; }
.button.zoom-step { width: 30px; min-height: 30px; }
.zoom-level { min-width: 44px; color: var(--muted); font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }

/* The page is laid out at its real size and scaled by --page-scale; the
   paper around it takes the scaled size, so the stage scrolls the scaled
   page. The scrollbar's room is kept, so fitting to the width never makes
   the scrollbar come and go. */
.preview-stage {
  --page-width: 794px;
  --page-height: 1123px;
  /* The whole document: one page or more. */
  --doc-height: 1123px;
  --page-scale: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  scrollbar-gutter: stable;
}
.preview-stage.fit-width { overflow-x: hidden; }
.preview-paper {
  position: relative;
  width: calc(var(--page-width) * var(--page-scale));
  height: calc(var(--doc-height) * var(--page-scale));
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: var(--shadow);
  transition: opacity 0.2s;
}
.preview-frame {
  display: block;
  width: var(--page-width);
  height: var(--doc-height);
  border: 0;
  background: var(--paper);
  transform: scale(var(--page-scale));
  transform-origin: 0 0;
}
.preview-stage.loading .preview-paper { opacity: 0.6; }

/* Where the pages will be cut: each line at its place in the page's own
   pixels, scaled with the page, so it follows the zoom without a redraw.
   The label keeps its size, to stay legible at any zoom. */
.page-breaks { position: absolute; inset: 0; pointer-events: none; }
.page-break {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--break-y) * var(--page-scale));
  border-top: 1.5px dashed var(--page-break);
}
.page-break-label {
  position: absolute;
  right: 6px;
  top: 0;
  transform: translateY(-50%);
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--page-break);
  color: var(--page-break-contrast);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}

/* The spots marked on the sheet. Each pin's pointed corner, bottom left,
   is the spot, placed in page pixels and scaled with the page, so it stays
   on the same words at every zoom; the pin keeps its size to stay legible.
   A pin is dragged, or moved with the arrow keys, to move its spot.
   The layer lets clicks through to nothing but its pins, except while
   marking, when it takes them all. */
.preview-spots { position: absolute; inset: 0; pointer-events: none; }
.preview-spots.marking { pointer-events: auto; cursor: crosshair; }
.spot-pin {
  position: absolute;
  left: calc(var(--spot-x) * var(--page-scale));
  top: calc(var(--spot-y) * var(--page-scale) - 26px);
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--spot-contrast);
  border-radius: 50% 50% 50% 0;
  background: var(--spot);
  color: var(--spot-contrast);
  box-shadow: 0 1px 3px rgb(0 0 0 / 45%);
  font: 700 13px/22px var(--font);
  text-align: center;
  cursor: grab;
  pointer-events: auto;
  /* A finger drags the pin rather than scrolling the page under it. */
  touch-action: none;
  user-select: none;
}
.spot-pin.dragging { cursor: grabbing; box-shadow: 0 3px 8px rgb(0 0 0 / 45%); }
.spot-pin:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The spots' comments, under the sheet: a fixed frame whose list scrolls,
   so the preview above never jumps as spots come and go. */
.spots-panel {
  display: flex;
  flex: none;
  flex-direction: column;
  height: 220px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.spots-panel[hidden] { display: none; }
.spots-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 12px 4px; }
.spots-head h3 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.spots-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 4px 12px; overflow-y: auto; list-style: none; }
.spot-row { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.spot-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 5px;
  border-radius: 50% 50% 50% 0;
  background: var(--spot);
  color: var(--spot-contrast);
  font-size: 12px;
  font-weight: 700;
}
/* Two lines, always: a longer comment scrolls inside, and the list never
   reflows as one grows. The height is the two lines, the padding and the
   border (box-sizing is border-box). */
.spot-comment { flex: 1 1 auto; height: calc(2 * 1.4em + 16px); min-height: 0; line-height: 1.4; resize: none; overflow-y: auto; }
.spot-row .button.icon-button { flex: none; width: 34px; min-height: 34px; }
.spots-foot { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); }

/* The print view: the browser's own PDF viewer fills the pane. */
.print-stage { position: relative; display: flex; flex: 1 1 auto; min-height: 0; background: var(--stage); }
.print-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--stage); transition: opacity 0.2s; }
.print-status {
  position: absolute;
  inset: 0;
  display: none;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  pointer-events: none;
}
.print-stage.loading .print-status { display: flex; }
.print-stage.loading .print-frame { opacity: 0.25; }
.print-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--muted);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.pane-chat { background: var(--surface); }
.callout { margin: 12px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.callout p { margin-bottom: 10px; font-size: 0.9rem; }
.chat-log { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 12px; list-style: none; }
.bubble { display: flex; flex-direction: column; gap: 6px; max-width: 88%; }
/* The chat's text size is the person's (the − and + of its pane). */
.bubble-text { padding: 9px 12px; border-radius: 14px; font-size: var(--chat-font-size, 14px); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.from-user { align-self: flex-end; align-items: flex-end; }
.from-user .bubble-text { background: var(--accent); color: var(--accent-contrast); border-bottom-right-radius: 4px; }
.from-assistant { align-self: flex-start; align-items: flex-start; }
.from-assistant .bubble-text { background: var(--surface-2); border-bottom-left-radius: 4px; }
.bubble.pending { opacity: 0.7; }
.thinking { display: flex; flex-direction: row; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
/* The seconds the model has been answering, beside its dots; and under an
   answer, how long it took. */
.thinking-time { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.bubble-meta { color: var(--muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.dots { display: inline-flex; gap: 4px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite ease-in-out; }
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.chat-intro { display: flex; gap: 10px; align-items: flex-start; margin: auto 4px 0; padding: 14px; border-radius: var(--radius); background: var(--accent-soft); font-size: var(--chat-font-size, 14px); }
.chat-intro-icon { color: var(--accent); }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
/* The form stays at the foot of the pane, one fixed size: three lines. */
.chat-form { display: flex; flex: none; gap: 8px; align-items: flex-end; margin-top: auto; padding: 10px 12px 4px; border-top: 1px solid var(--border); }
.chat-form textarea { font-size: var(--chat-font-size, 14px); height: calc(4.5em + 16px); min-height: 0; max-height: none; line-height: 1.5; resize: none; overflow-y: auto; }
.chat-form .button { flex: none; width: 42px; min-height: 42px; }
.pane-chat > .tiny-text { padding: 0 12px 10px; }

/* Wide: three panes side by side. Narrower: one at a time, under tabs —
   and the header and the navigation made compact. This is the one
   breakpoint for all of it. */
@media (max-width: 1099px) {
  /* The version behind a "?", and "Resumes" and "Applications" at the foot of the screen,
     over everything but the menus, the toast and the modals. */
  .version-tag, .header .nav { display: none; }
  .version-help { display: inline-flex; }
  .bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    display: flex;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgb(16 24 40 / 6%);
  }
  .bottom-nav-button {
    display: inline-flex;
    flex: 1 1 auto;
    gap: 8px;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .bottom-nav-button:hover { background: var(--surface-2); color: var(--text); }
  .bottom-nav-button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  /* Nothing hides behind the banner: the pages end above it, and the
     editor — the chat's input, the Markdown — is that much shorter. */
  body:not(.signed-out) { padding-bottom: var(--bottom-nav-space); }
  /* The header is pinned like the banner, not merely sticky: whatever
     scrolls the page — a focus, a find, the browser restoring a position —
     both bars stay on the screen, and the page starts below the header. */
  .header { position: fixed; right: 0; left: 0; }
  body { padding-top: var(--header-height); }
  body:not(.signed-out) .editor {
    height: calc(100vh - var(--header-height) - var(--bottom-nav-space));
    height: calc(100dvh - var(--header-height) - var(--bottom-nav-space));
  }

  .editor-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  /* One pane at a time: the widths, the gutters and the toggles are for
     wide screens only. */
  .editor-panes { grid-template-columns: minmax(0, 1fr); }
  .editor-panes > .pane { grid-column: 1; }
  .pane.pane-off { display: flex; }
  .gutter, .chat-toggle { display: none; }
  .editor-panes[data-pane="markdown"] .pane-preview,
  .editor-panes[data-pane="markdown"] .pane-chat,
  .editor-panes[data-pane="preview"] .pane-markdown,
  .editor-panes[data-pane="preview"] .pane-chat,
  .editor-panes[data-pane="chat"] .pane-markdown,
  .editor-panes[data-pane="chat"] .pane-preview { display: none; }
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 580;
  cursor: pointer;
}
.tab:hover { background: var(--surface-2); color: var(--text); }
.tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.editor-tabs .tab { flex: 1; justify-content: center; }
/* The same icons as the wide screen's pane toggles; the one shown is
   marked by its colour and a rule under it. */
.editor-tabs .tab .icon svg { width: 20px; height: 20px; }
.editor-tabs .tab[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent); }

/* --------------------------------------------------------- settings */

.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-tabs { display: flex; flex-direction: column; gap: 2px; }
.settings-tabs .tab { justify-content: flex-start; }
.settings-panel { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.panel-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.settings-version { margin-top: 24px; text-align: right; }
.consent-state { padding: 12px 14px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); font-weight: 560; }
.consent-state.given { background: var(--ok-soft); color: var(--ok); }
/* Nothing is pending: an agreement only platform models will ask for. */
.consent-state.neutral { background: var(--surface-2); color: var(--muted); font-weight: 400; }
#tab-privacy .button { align-self: flex-start; }

.items { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 4px; border-top: 1px solid var(--border); }
.item:first-child { border-top: 0; }
.item.current { background: var(--accent-soft); border-radius: var(--radius-sm); }
.item-icon { margin-top: 2px; padding: 7px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); }
.item-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.item-title { font-weight: 600; overflow-wrap: anywhere; }
.item-meta { color: var(--muted); font-size: 0.84rem; overflow-wrap: anywhere; }
.item-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.item-actions { display: flex; flex: none; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: flex-end; }
.empty-line { padding: 14px 4px; }
.version-number { min-width: 40px; padding-top: 2px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }

.login-steps { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); font-size: 0.88rem; }
.login-steps .button { align-self: flex-start; }
.login-url { display: block; max-height: 4.5em; overflow: auto; color: var(--muted); font-size: 0.75rem; overflow-wrap: anywhere; }
.login-code { display: flex; gap: 8px; align-items: center; }
.login-code code { padding: 4px 10px; border-radius: var(--radius-sm); background: var(--surface); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em; }
.login-paste { display: flex; gap: 8px; }

/* ----------------------------------------------------------- modals */

/* A modal owns a fixed frame: its size never follows its content, which
   scrolls inside it (coding recipe §2.13). */
.modal {
  width: min(560px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.modal.modal-small { width: min(460px, calc(100vw - 32px)); height: min(380px, calc(100dvh - 32px)); }
/* "What next?": the small frame, tall enough for its line of dates. */
.modal.modal-small.modal-what-next { height: min(460px, calc(100dvh - 32px)); }
.modal.modal-large { width: min(780px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 32px)); }
.modal::backdrop { background: rgb(10 14 20 / 50%); backdrop-filter: blur(2px); }
.modal[open] { display: block; animation: rise 0.16s ease-out; }
.modal-frame { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
/* A modal whose parts are tabs: the tab row sits between the title and the
   body, and only the body scrolls. */
.modal-frame-tabbed { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.modal-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 20px 10px; border-bottom: 1px solid var(--border); }
.modal-tabs .tab { flex: 0 0 auto; }
.modal-frame-tabbed .modal-body { padding-top: 16px; }
/* A phone cannot hold five tabs on one line: they wrap rather than hide
   the last parts of the application behind a sideways scroll. */
@media (max-width: 560px) {
  .modal-tabs { flex-wrap: wrap; overflow-x: visible; }
  .modal-tabs .tab { padding: 0 10px; }
}
.modal-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 18px 20px 10px; }
.modal-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; padding: 6px 20px 16px; }
/* The body scrolls, so what is in it keeps its size: a flex column would
   otherwise squeeze a textarea down to one line before scrolling. */
.modal-body > * { flex-shrink: 0; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.modal.nudge { animation: nudge 0.3s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

.guide-rules { display: grid; gap: 6px; margin: 0; padding-left: 20px; font-size: 0.9rem; }
.guide-example-head { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.code-block { margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: 0.82rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ------------------------------------------------------- small screens */

@media (max-width: 900px) {
  .landing { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; padding: 32px 16px; }
  .settings { grid-template-columns: minmax(0, 1fr); }
  .settings-tabs { flex-direction: row; overflow-x: auto; }
}

@media (max-width: 720px) {
  .nav-label { display: none; }
  .nav { margin-left: 4px; }
  .nav-button { padding: 0 10px; }
  .who { display: none; }
  .settings-tabs .tab span:not(.icon) { display: none; }
  .settings-tabs .tab { flex: 1; justify-content: center; }
  .settings-panel { padding: 16px; }
  .view.page { padding-top: 20px; }
  h1 { font-size: 1.45rem; }
  .title-input { flex: 1 1 140px; max-width: none; }
}

/* The version stays in the header, minimized. */
@media (max-width: 560px) {
  .header { gap: 4px; padding: 0 10px; }
  .brand-name { display: none; }
  .version-tag { padding: 0 4px; border: 0; font-size: 0.62rem; }
  .resume-grid { grid-template-columns: minmax(0, 1fr); }
  .item { flex-wrap: wrap; }
  .item-actions { width: 100%; justify-content: flex-start; }
  .editor-bar { padding: 8px 10px; }
  #style-versions span:not(.icon) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ------------------------------------------------------ attachments */

/* Files waiting to go, and files sent: chips with a thumbnail or an icon. */
.attachment-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pending-attachments { flex: none; max-height: 160px; overflow: auto; padding: 8px 12px 0; border-top: 1px solid var(--border); }
.from-user .attachment-list { justify-content: flex-end; }
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  min-height: 40px;
  padding: 4px 6px 4px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
}
button.attachment-chip { cursor: pointer; }
button.attachment-chip:hover { border-color: var(--accent); }
.attachment-thumb { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); }
.attachment-chip.sent .attachment-thumb { width: 56px; height: 56px; }
.attachment-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); }
.attachment-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-size { flex: none; color: var(--muted); }
.attachment-remove { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.attachment-remove:hover { background: var(--surface-2); color: var(--bad); }
.attachment-remove .icon svg { width: 14px; height: 14px; }
.attachment-chip.busy { opacity: 0.6; }

/* A file dragged over the chat: the whole pane says it will take it. */
.pane-chat { position: relative; }
.pane-chat.dropping { outline: 2px dashed var(--accent); outline-offset: -6px; }
.chat-drop {
  position: absolute;
  inset: 6px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-soft) 92%, transparent);
  color: var(--accent);
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}
.chat-drop .icon svg { width: 32px; height: 32px; }

/* The image preview: the frame is the modal's, the image fits inside it. */
.attachment-view-title { min-width: 0; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.attachment-view-body { align-items: center; justify-content: center; overflow: hidden; background: var(--stage); }
.attachment-view-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.pending-attachments + .chat-form { border-top: 0; }

/* ------------------------------------------------------- proposals */

/* The content assistant's proposal: what it changes, line by line, and the
   button that applies it. The bubble takes the log's width for the diff;
   the diff scrolls inside its own frame. */
.bubble.with-proposal { width: 100%; max-width: 100%; }
.proposal { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.proposal-details summary { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.proposal-details summary .icon svg { width: 14px; height: 14px; }
.proposal-diff {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  margin-top: 8px;
  overflow: auto;
}
/* One change: its lines, then its own Accept and Reject. */
.diff-change { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.diff-lines { padding: 6px 0; font-family: var(--mono); font-size: 0.76rem; line-height: 1.5; }
.diff-line { display: block; padding: 0 8px 0 22px; text-indent: -14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-mark { display: inline-block; width: 14px; text-indent: 0; color: var(--muted); }
.diff-line.added { background: color-mix(in srgb, var(--ok) 16%, transparent); }
.diff-line.added .diff-mark { color: var(--ok); }
.diff-line.removed { background: color-mix(in srgb, var(--bad) 14%, transparent); }
.diff-line.removed .diff-mark { color: var(--bad); }
/* A decided change keeps its place: an accepted one is marked, a rejected
   one greyed with its additions struck through. */
.diff-change.accepted { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.diff-change.rejected .diff-lines { opacity: 0.5; }
.diff-change.rejected .diff-line.added { text-decoration: line-through; }
.change-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; padding: 4px 6px; border-top: 1px solid var(--border); }
.change-actions .button.small { min-height: 26px; padding: 0 8px; font-size: 0.8rem; }
.change-actions .icon svg { width: 14px; height: 14px; }
.change-accept:hover { color: var(--ok); }
.change-reject:hover { color: var(--bad); }
.proposal-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ------------------------------------------------- content history */

/* The versions on one side, what changed between two of them on the
   other; each scrolls inside the window's fixed frame. */
.modal.modal-history { width: min(1100px, calc(100vw - 32px)); }
.contents-body { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 16px; overflow: hidden; }
.contents-side, .contents-main { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.content-items { flex: 1 1 auto; min-height: 0; overflow: auto; }
.content-item { align-items: center; padding: 8px 4px; }
.content-item.current { background: var(--accent-soft); border-radius: var(--radius-sm); }
.content-pick { display: flex; flex: 1 1 auto; gap: 10px; align-items: center; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.content-pick .item-text { display: flex; flex-direction: column; min-width: 0; }
.contents-compare { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.contents-compare label { font-size: 0.85rem; color: var(--muted); }
.content-diff { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.content-diff .empty-line { padding: 12px; }
.diff-line.gap { color: var(--muted); font-style: italic; text-align: center; text-indent: 0; }
@media (max-width: 720px) {
  .contents-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 2fr) minmax(0, 3fr); }
  .history-label { display: none; }
}

/* ------------------------------------------------------ applications */

.applications-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.applications-search { flex: 1 1 220px; max-width: 360px; }
.filter-segment { padding: 0 10px; }
#applications-layout .segment { display: inline-flex; align-items: center; justify-content: center; }

/* The table scrolls sideways inside its card; the page never does. */
.table-wrap { overflow-x: auto; }
.application-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.9rem; }
.application-table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
}
.application-table td { padding: 12px 14px; border-top: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.application-table tbody tr:first-child td { border-top: 0; }
.application-row { cursor: pointer; }
.application-row:hover { background: var(--surface-2); }
.application-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cell-company { font-weight: 620; }
.cell-status { white-space: nowrap; }
.cell-activity > * + * { margin-left: 4px; }

.stealth { font-style: italic; }
.next-step { display: inline; }
.overdue { color: var(--bad); font-weight: 600; }
.upcoming-line { display: inline-flex; gap: 4px; align-items: center; color: var(--accent); font-size: 0.82rem; }
.upcoming-line .icon svg { width: 14px; height: 14px; }

.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.board-column { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }
.board-title { font-size: 0.9rem; color: var(--muted); }
.application-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.application-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.application-card-company { font-weight: 620; overflow-wrap: anywhere; }
.application-card-position { overflow-wrap: anywhere; }
.application-card-meta { color: var(--muted); font-size: 0.8rem; }

/* One application: its details and contacts beside its timeline. */
.application-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.application-heading { min-width: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.application-status { display: flex; gap: 6px; }
.application-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.application-side, .application-details { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detail-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; min-width: 0; }
.detail-card-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.detail-card-head .icon-button { margin: -6px -8px -6px 0; }
.due-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.facts { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 0.9rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* The narrowest phones: each label above its value, so a value — a long
   address, the resume's button — has the card's whole width. */
@media (max-width: 380px) {
  .facts { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .facts dd + dt { margin-top: 6px; }
}
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.lines { display: flex; flex-direction: column; gap: 2px; }
.next-step-large { display: flex; gap: 8px; align-items: flex-start; font-weight: 560; overflow-wrap: anywhere; }
.next-step-large .icon { margin-top: 2px; color: var(--accent); }
.next-step-large.overdue .icon { color: var(--bad); }
.next-step-due { font-weight: 400; }
.posting-text summary { color: var(--accent); cursor: pointer; font-size: 0.9rem; }
.posting-text > div { max-height: 360px; margin-top: 8px; padding: 12px; overflow: auto; border-radius: var(--radius); background: var(--surface-2); font-size: 0.85rem; }
.resume-link { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.contact-lines a { overflow-wrap: anywhere; }

/* The timeline: a rule down the side, a dot on it for each event. */
.timeline { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0 0 0 22px; list-style: none; }
.timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px; border-left: 2px solid var(--border); }
.timeline .empty-line { margin-left: -22px; }
.event { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.event::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -21px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--border-strong);
}
.event.upcoming { border-style: dashed; border-color: var(--accent); }
.event.upcoming::before { background: var(--accent); }
.event-head { display: flex; gap: 6px; align-items: center; }
.event-head .button.icon-button { width: 30px; min-height: 30px; }
.event-kind { display: inline-flex; gap: 6px; align-items: center; font-weight: 620; }
.event-kind .icon { color: var(--accent); }
.event-comment { font-size: 0.9rem; overflow-wrap: anywhere; }
.event-comment > * { margin: 0; }
.event-comment > * + * { margin-top: 6px; }
.event-comment ul, .event-comment ol { padding-left: 20px; }
.event-comment h4, .event-comment h5, .event-comment h6 { margin-bottom: 0; font-size: 0.92rem; }
.event-comment blockquote { padding-left: 10px; border-left: 3px solid var(--border-strong); color: var(--muted); }
.event-comment pre { padding: 8px 10px; overflow: auto; border-radius: var(--radius-sm); background: var(--surface-2); }
.event-offer { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--ok-soft); font-size: 0.88rem; }
.event-offer .icon { margin-top: 2px; color: var(--ok); }
.event-files { margin: 0; }
.event-file-link { display: inline-flex; gap: 6px; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.event-file-link:hover .attachment-name { text-decoration: underline; }

/* The modals' forms: sections, and fields side by side where they fit. */
.form-section { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.form-section legend { margin-bottom: 4px; padding: 0; font-size: 0.95rem; font-weight: 650; }
.form-section > label { margin-top: 6px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-wide { grid-column: span 2; }
.field-label { font-size: 0.875rem; font-weight: 560; }
.currency-input { text-transform: uppercase; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 400; cursor: pointer; }
.check input { width: auto; min-height: 0; }
.copy-company { align-self: flex-start; }
.event-files-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 6px; }

@media (max-width: 1099px) {
  .application-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  /* Two rows, not three: the controls on the first, as icons, and the
     title under them on a line of its own. */
  .application-bar { gap: 6px; margin-bottom: 14px; }
  .application-bar .application-status { order: 1; }
  .application-bar .spacer { order: 2; }
  #application-edit { order: 3; }
  #application-delete { order: 4; }
  .application-heading { order: 5; flex-basis: 100%; font-size: 1.25rem; }
  #application-edit { width: 34px; padding: 0; justify-content: center; }
  /* Read by a screen reader, not shown: the button is its icon here. */
  #application-edit .button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 560px) {
  .field-wide { grid-column: auto; }
  .applications-search { max-width: none; }
}