:root {
  --bg: #fafbfc;
  --panel: #ffffff;
  --panel-2: #f8f9fb;
  --line: #e2e5ea;
  --line-strong: #cfd4db;
  --text: #1c2026;
  --muted: #59616a;
  --primary: #1f4e8c;
  --primary-ink: #ffffff;
  --primary-soft: #e8eef7;
  --danger: #c4323a;
  --ok: #217a4b;
  --warn: #a35b00;
  --canvas: #dfe3e8;
  --shadow: 0 8px 30px rgba(20, 30, 45, .16);
  --radius: 8px;
  /* Section cards sit darker than the page; entries inside them are white again. */
  --section: #e3e9f0;
  --section-head: #cdd7e3;
  --section-line: #a3b0c0;
  --entry-line: #8f9db0;
  --entry-bg: #ffffff;
  --entry-field: #ffffff;
  --badge: #c4323a;
  --entry-shadow: 0 1px 4px rgba(20, 40, 70, .2);
  --entry-open: 0 2px 10px rgba(20, 40, 70, .12);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181c; --panel: #1c2025; --panel-2: #22272d; --line: #2e343b; --line-strong: #3b424a;
    --text: #e7eaee; --muted: #aab2bb; --primary: #6d9fe0; --primary-ink: #0d1520; --primary-soft: #1f2b3b;
    --danger: #f07178; --ok: #5cc98d; --warn: #e8a54b; --canvas: #2a2f35; --shadow: 0 8px 30px rgba(0,0,0,.5);
    --section: #343c47; --section-head: #424c59; --section-line: #5f6b7a; --entry-bg: #181b20; --entry-line: #5f6b7a; --entry-field: #262b33; --badge: #c93a45; --entry-shadow: 0 2px 6px rgba(0,0,0,.55); --entry-open: 0 2px 12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15181c; --panel: #1c2025; --panel-2: #22272d; --line: #2e343b; --line-strong: #3b424a;
  --text: #e7eaee; --muted: #aab2bb; --primary: #6d9fe0; --primary-ink: #0d1520; --primary-soft: #1f2b3b;
  --danger: #f07178; --ok: #5cc98d; --warn: #e8a54b; --canvas: #2a2f35; --shadow: 0 8px 30px rgba(0,0,0,.5);
    --section: #343c47; --section-head: #424c59; --section-line: #5f6b7a; --entry-bg: #181b20; --entry-line: #5f6b7a; --entry-field: #262b33; --badge: #c93a45; --entry-shadow: 0 2px 6px rgba(0,0,0,.55); --entry-open: 0 2px 12px rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* Phones must not enlarge text on their own (text autosizing); it re-wraps text when zooming. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 16px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font: 14px Consolas, ui-monospace, monospace; background: var(--panel-2); border: 1px solid var(--line); padding: 0 4px; border-radius: 4px; }
[hidden] { display: none !important; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--panel); border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap; list-style: none; }
.btn:hover { border-color: var(--primary); }
.btn:focus-visible, .tab:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .menu-item:focus-visible, .lib-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--panel-2); border-color: var(--line); }
.btn.small { padding: 3px 9px; font-size: 15px; }
.btn.danger-ghost { color: var(--danger); border-color: transparent; background: transparent; }
.btn.danger-ghost:hover { border-color: var(--danger); }
.btn.icon { padding: 2px 7px; font-size: 14px; color: var(--muted); border-color: transparent; background: transparent; }
.btn.icon:hover { color: var(--text); background: var(--panel-2); border-color: var(--line); }
.btn:disabled { opacity: .45; cursor: default; }
summary.btn::-webkit-details-marker { display: none; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.logo { width: 24px; height: 24px; flex: none; background: url(../icons/icon.svg) center / contain no-repeat; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.save-status { color: var(--muted); font-size: 15px; }
.save-status.dirty { color: var(--warn); }
.save-status.error { color: var(--danger); }

/* Layout */
.app { flex: 1; min-height: 0; display: grid; grid-template-columns: 270px minmax(340px, var(--ed-fr, 1fr)) minmax(380px, var(--pv-fr, 1.1fr)); }
.library, .editor { background: var(--panel); border-right: 1px solid var(--line); min-height: 0; display: flex; flex-direction: column; }
.editor { position: relative; }

/* Library */
.lib-head { padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.lib-head input { width: 100%; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel-2); }
.lib-actions { display: flex; gap: 6px; }
.lib-actions .btn { flex: 1; justify-content: center; }
.lib-list { overflow: auto; padding: 6px 10px 16px; display: grid; gap: 10px; align-content: start; grid-auto-rows: max-content; } /* cards keep their full height; the list scrolls */
/* One card per person (same look as the editor's section cards) */
.lib-card { border: 1px solid var(--section-line); border-radius: var(--radius); background: var(--section); box-shadow: 0 1px 3px rgba(20, 30, 45, .12); overflow: hidden; }
.lib-card.current { border-color: var(--primary); }
.lib-person { padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .05em; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--section-head); border-bottom: 1px solid var(--section-line); }
.lib-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-count { font-size: 12px; min-width: 20px; text-align: center; padding: 0 6px; border-radius: 9px; background: var(--panel); color: var(--muted); border: 1px solid var(--section-line); }
.lib-items { display: grid; gap: 4px; padding: 6px; }
.lib-item { display: block; width: 100%; text-align: left; border: 1px solid var(--entry-line); border-radius: 6px; background: var(--entry-bg); padding: 7px 10px; cursor: pointer; border-left: 3px solid var(--entry-line); }
.lib-item:hover { border-color: var(--primary); }
.lib-item.active { background: var(--primary-soft); border-color: var(--primary); border-left-color: var(--primary); }
.lib-item b { display: block; font-weight: 600; }
.lib-item small { color: var(--muted); }
.lib-item.lib-child { margin-left: 18px; width: calc(100% - 18px); }
.lib-empty { padding: 20px 14px; color: var(--muted); }

/* Editor */
.doc-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
/* The name keeps at least ~12 characters; when space runs out the buttons wrap to a second line. */
.doc-title { display: flex; align-items: center; gap: 8px; min-width: min(220px, 100%); flex: 1 1 220px; }
.doc-title strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { font-size: 14px; background: var(--primary-soft); color: var(--primary); padding: 1px 8px; border-radius: 10px; white-space: nowrap; }
.pill:empty { display: none; }
.doc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
/* The editor's tabs look like folder tabs: bordered, with the open one joined to the page below. */
.tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--line-strong); }
.tab { border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 7px 7px 0 0; background: var(--panel-2); padding: 8px 14px; cursor: pointer; color: var(--muted); margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; box-shadow: inset 0 -1px 0 var(--line-strong); }
.tab:hover { color: var(--text); background: var(--primary-soft); }
.tab.active { color: var(--text); background: var(--panel); font-weight: 600; box-shadow: inset 0 3px 0 var(--primary); padding-bottom: 9px; }
.bank-tab { border: 0; background: none; padding: 9px 12px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.bank-tab.active { color: var(--text); border-bottom-color: var(--primary); font-weight: 600; }
.badge { font-size: 13px; background: var(--badge); color: #fff; border-radius: 9px; padding: 0 6px; font-weight: 700; }
.pane { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 16px 40px; }
.editor, .field, .grid2 > *, .card-body > * { min-width: 0; }
.pane[data-pane="markdown"] { display: flex; flex-direction: column; }
.md-text { flex: 1; min-height: 400px; width: 100%; resize: none; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px; background: var(--panel-2); font: 15px/1.55 Consolas, ui-monospace, monospace; }
.hint { color: var(--muted); font-size: 15px; margin: 0 0 10px; }

/* Form editor */
.card { border: 1px solid var(--section-line); border-radius: var(--radius); background: var(--section); margin-bottom: 14px; box-shadow: 0 1px 3px rgba(20, 30, 45, .12); }
.card-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--section-line); background: var(--section-head); border-radius: var(--radius) var(--radius) 0 0; }
.card-head { flex-wrap: wrap; }
.card-head .title-input { min-width: 140px; flex: 1; font-weight: 700; font-size: 16px; border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 5px; }
.card-head .title-input:hover, .card-head .title-input:focus { border-color: var(--line-strong); background: var(--panel); }
.card-body { padding: 12px; display: grid; gap: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.field { display: grid; gap: 3px; }
.field > span { font-size: 14px; font-weight: 600; color: var(--muted); }
.field > span small { font-weight: 400; display: block; }
.field input, .field textarea, .field select, .opts input[type=text], .opts select { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; background: var(--panel); }
.field textarea { resize: vertical; min-height: 38px; line-height: 1.45; }
.block { border: 1px solid var(--entry-line); border-radius: 7px; padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; background: var(--entry-bg); box-shadow: var(--entry-shadow); transition: box-shadow .2s, border-color .2s; }
/* Fields inside a role or block get their own shade so they stand out from the box. */
.block .field input, .block .field textarea, .block .field select, .block textarea, .block .rich { background: var(--entry-field); border-color: var(--entry-line); }
.block.position { border-style: dashed; }
details.entry[open] { border-color: var(--primary); border-left-width: 4px; padding-left: 5px; box-shadow: var(--entry-open); }
details.entry[open] > summary { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.block-head { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); font-weight: 600; }
.block-head .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.entry > summary { list-style: none; cursor: pointer; }
details.entry > summary::-webkit-details-marker { display: none; }
details.entry > summary .chev { display: inline-block; transition: transform .15s; }
details.entry[open] > summary .chev { transform: rotate(90deg); }
details.entry > .entry-fields { display: grid; gap: 8px; margin-top: 6px; }
.add-row { display: flex; gap: 6px; flex-wrap: wrap; }
.add-row .btn { font-size: 14px; padding: 3px 9px; color: var(--muted); border-style: dashed; }
.add-row .btn:hover { color: var(--primary); }

/* Review */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: var(--panel-2); }
.stat b { display: block; font-size: 22px; }
.stat small { color: var(--muted); }
.issues { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.issues li { padding: 7px 10px 7px 30px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); position: relative; }
.issues li::before { position: absolute; left: 10px; top: 7px; font-weight: 700; }
.issues li.warn::before { content: "!"; color: var(--warn); }
.issues li.tip::before { content: "↗"; color: var(--primary); }
.issues li.info::before { content: "i"; color: var(--muted); }
.issues li.ok::before { content: "✓"; color: var(--ok); }
.match-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.meter { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--ok); border-radius: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.chip { font-size: 14px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line-strong); }
.chip.hit { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
.chip.miss { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
h3.sub { font-size: 15px; margin: 14px 0 6px; }

/* Preview */
.preview { display: flex; flex-direction: column; min-height: 0; background: var(--canvas); }
.pv-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.spacer { flex: 1; }
.tpl-btn { font-weight: 600; }
.swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--primary); }
.caret { color: var(--muted); font-size: 13px; }
.zoom { display: flex; }
/* Export stays at the far right, also when there isn't room for it and it moves to a second row. */
#exportMenu { margin-left: auto; }
/* Export menu: the two everyday formats, then groups that open in place, one at a time. */
.exp-menu { width: 330px; max-height: calc(100dvh - 150px); overflow-y: auto; }
.menu-head { margin: 4px 10px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.toolbox-menu { width: 320px; max-height: calc(100dvh - 70px); overflow-y: auto; }
.toolbox-menu .menu-head:not(:first-child) { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px; }
.menu-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.menu-group > summary { list-style: none; position: relative; padding-right: 30px; }
.menu-group > summary::-webkit-details-marker { display: none; }
.menu-group > summary::after { content: "▸"; position: absolute; right: 12px; top: 9px; color: var(--muted); transition: transform 0.15s; }
.menu-group[open] > summary::after { transform: rotate(90deg); }
.menu-group[open] > summary small { display: none; }
.menu-group > button.menu-item { padding-left: 22px; }
.page-badge { font-size: 14px; padding: 2px 9px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.page-badge.over { color: var(--warn); border-color: var(--warn); }
.pv-scroll { flex: 1; overflow: auto; }
.pv-wrap { margin: 0 auto; overflow: hidden; }
.pv-wrap iframe { border: 0; display: block; transform-origin: 0 0; background: transparent; }

/* Theme menu */
.theme-menu { min-width: 220px; }
.theme-menu .menu-item { display: flex; align-items: center; gap: 10px; }
.theme-menu .menu-item .tick { width: 1em; color: var(--primary); font-weight: 700; }
.theme-menu .menu-item small { margin-left: auto; }

/* Menus */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu-body { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; min-width: 260px; }
.menu.right .menu-body { left: auto; right: 0; }
.menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.menu-item:hover { background: var(--panel-2); }
.menu-item small { display: block; color: var(--muted); }
/* File types in menus, e.g. (.docx): fixed-width so they read as file names. Roboto Mono is bundled (css/fonts). */
@font-face { font-family: RSRobotoMono; src: url(fonts/robotomono-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
.ext { font-family: RSRobotoMono, "Roboto Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 500; font-size: .86em; color: var(--muted); letter-spacing: -.01em; white-space: nowrap; }
.opts { display: grid; gap: 10px; padding: 12px; width: 320px; }
.opts label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; color: var(--muted); }
.opts .row { display: flex; align-items: center; gap: 8px; }
.opts input[type=color] { width: 44px; height: 28px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px; background: var(--panel); }
.opts input[type=range] { flex: 1; }
.opts output { font-weight: 400; color: var(--text); min-width: 38px; }

/* Dialogs */
.dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); padding: 20px 22px; width: min(520px, calc(100vw - 32px)); }
.dialog.wide { width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 40px); }
.dialog::backdrop { background: rgba(10, 15, 25, .45); }
.dialog h2 { margin: 0 0 10px; font-size: 20px; }
.dlg-head { display: flex; justify-content: space-between; align-items: center; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#askFields { display: grid; gap: 10px; }
.welcome-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tpl-card { border: 2px solid var(--line); border-radius: 10px; background: var(--panel-2); padding: 0; cursor: pointer; text-align: left; overflow: hidden; display: flex; flex-direction: column; }
.tpl-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.tpl-card.active { border-color: var(--primary); }
.tpl-thumb { position: relative; height: 290px; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.tpl-thumb iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.tpl-info { padding: 9px 11px 11px; }
.tpl-info b { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.tpl-info small { color: var(--muted); display: block; margin-top: 3px; line-height: 1.35; }
.ats { white-space: nowrap; font-size: 13px; font-weight: 600; padding: 1px 7px; border-radius: 9px; border: 1px solid currentColor; }
.ats.Best { color: var(--ok); } .ats.Good { color: var(--primary); } .ats.Fair { color: var(--warn); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--text); color: var(--panel); padding: 9px 16px; border-radius: 8px; box-shadow: var(--shadow); z-index: 100; max-width: min(560px, calc(100vw - 32px)); }

/* Narrow screens: stack panes */
@media (max-width: 1180px) {
  .app { grid-template-columns: 200px 1fr; grid-template-rows: 1fr 1fr; }
  .preview { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .app { display: flex; flex-direction: column; overflow: auto; }
  .library { max-height: 220px; }
  .editor { min-height: 520px; }
  .preview { min-height: 600px; }
  .grid2, .stats { grid-template-columns: 1fr 1fr; }
}

/* ATS indicators */
/* The template's ATS rating, on the template button under its name */
.tpl-btn { padding-top: 3px; padding-bottom: 3px; }
.tpl-txt { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.ats-chip { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.ats-chip:empty { display: none; }
.ats-chip.Best { color: var(--ok); }
.ats-chip.Good { color: var(--primary); }
.ats-chip.Fair { color: var(--warn); }
.tpl-card.not-ats { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.tpl-card.not-ats.active { border-color: var(--primary); }
.ats.Fair { background: var(--warn); color: var(--panel); border-color: var(--warn); }

/* Page breaks & menu extras */
.block.page-break { border-style: dashed; border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, transparent); }
.block.page-break .block-head { color: var(--danger); }
.opts label.check { display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-weight: 600; }
.opts label.check input { margin-top: 3px; }
.opts label.check small { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }
.menu-sep { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }

/* Role ordering */
.order-note { font-size: 13px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.order-note::before { content: "↓"; color: var(--ok); font-weight: 700; }
.order-note.manual::before { content: "✋"; font-size: 12px; }
.order-note .btn { color: var(--primary); }

/* Formatting toolbar + formatted text fields */
.fmt-bar { display: flex; align-items: center; gap: 4px; padding: 6px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); flex-wrap: wrap; }
.fmt-btn { min-width: 32px; height: 30px; border: 1px solid var(--line-strong); background: var(--panel); border-radius: 6px; cursor: pointer; font-size: 15px; }
.fmt-btn.wide { padding: 0 10px; font-size: 14px; }
.fmt-btn:hover { border-color: var(--primary); }
.fmt-btn.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.fmt-hint { color: var(--muted); font-size: 13px; margin-left: 8px; }
.rich { min-height: 38px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 7px 9px; background: var(--panel); line-height: 1.5; outline: none; cursor: text; overflow-wrap: anywhere; }
.rich:focus { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.rich.multi { min-height: 60px; }
.rich.bullets > div { display: list-item; list-style: disc; margin-left: 1.3em; padding-left: 2px; margin-bottom: 3px; }
.rich.bullets > div::marker { color: var(--primary); }
.rich.is-empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; position: absolute; }
.rich.is-empty { position: relative; }
.rich.bullets.is-empty::before { left: 2.2em; }
.rich a { color: var(--primary); text-decoration: underline; }
.rich b, .rich strong { font-weight: 700; }

/* Date pickers */
.date-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.date-group { display: flex; align-items: center; gap: 4px; }
.date-group small { color: var(--muted); font-size: 13px; margin-right: 2px; }
.date-row select { border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 6px; background: var(--panel); }
.date-row select:disabled { opacity: .45; }
.date-sep { color: var(--muted); padding-bottom: 6px; }
.date-present { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; padding-bottom: 6px; cursor: pointer; }
.date-warn { color: var(--danger); font-size: 13px; }
.date-warn:empty { display: none; }

/* New-resume starters & section tips */
.new-fields { margin-bottom: 4px; }
.starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; max-height: 52vh; overflow: auto; padding: 2px; }
.starter-card { text-align: left; border: 2px solid var(--line); background: var(--panel-2); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.starter-card:hover { border-color: var(--line-strong); }
.starter-card.active { border-color: var(--primary); background: var(--primary-soft); }
.starter-card b { font-size: 15px; }
.starter-card small { color: var(--muted); line-height: 1.35; }
.starter-tpl { font-size: 12px; color: var(--primary); margin-top: auto; }
.section-tip { margin: 0; font-size: 13px; color: var(--muted); background: var(--panel-2); border-left: 3px solid var(--primary); padding: 5px 9px; border-radius: 0 6px 6px 0; }

/* Template gallery: pin / docked mode */
.dlg-head-actions { display: flex; gap: 6px; align-items: center; }
.pin-btn .pin-icon { display: inline-block; transform: rotate(45deg); transition: transform .15s; filter: grayscale(1); opacity: .7; }
.pin-btn.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.pin-btn.on .pin-icon { transform: rotate(0); filter: none; opacity: 1; }
#gallery.docked { position: fixed; inset: auto; bottom: 0; margin: 0; max-width: none; max-height: none; height: auto; border-radius: 12px 0 0 0; z-index: 50; overflow: auto; box-shadow: -2px 0 0 var(--line), var(--shadow); }
#gallery.docked .hint { display: none; }
#gallery.docked .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
#gallery.docked .tpl-thumb { height: auto; aspect-ratio: 8.5 / 9; }

/* Job match & ATS insights */
.score-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 6px; }
.score-card { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--panel-2); }
.score-card > div:last-child { display: grid; gap: 2px; }
.score-card small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.ring { --p: 0; --c: var(--muted); flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--panel-2) 78%, transparent 79% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); }
.ring b { font-size: 21px; line-height: 1; }
.ring small { font-size: 11px; }
.ring.good { --c: var(--ok); } .ring.ok { --c: var(--warn); } .ring.low { --c: var(--danger); }
.suggestions { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.suggestions li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: var(--panel); }
.suggestions li > div { display: grid; gap: 6px; justify-items: start; }
.gain { flex: none; font-weight: 700; font-size: 13px; color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent); border-radius: 10px; padding: 1px 7px; margin-top: 1px; }
.reqs, .ats-checks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 5px; }
.reqs li { padding: 6px 10px 6px 30px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); position: relative; display: grid; }
.reqs li::before { position: absolute; left: 10px; top: 6px; font-weight: 700; }
.reqs li.ok::before { content: "✓"; color: var(--ok); } .reqs li.no::before { content: "✗"; color: var(--danger); } .reqs li.unk::before { content: "?"; color: var(--muted); }
.reqs small, .ats-checks small { color: var(--muted); display: block; }
.ats-checks li { display: flex; gap: 10px; padding: 6px 10px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); }
.ats-checks .pts { flex: none; min-width: 44px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ats-checks li.ok .pts { color: var(--ok); } .ats-checks li.part .pts { color: var(--warn); } .ats-checks li.no .pts { color: var(--danger); }
.kw-group { margin-bottom: 8px; } .kw-group > small { color: var(--muted); font-weight: 600; display: block; margin-bottom: 4px; }
.chip.exact { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); }
.chip.synonym, .chip.partial { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); }
.chip.synonym { border-style: dashed; }
.chip.missing { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--danger); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Version + help */
.app-version { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 4px; }
.help-dlg { width: min(1180px, calc(100vw - 32px)); height: calc(100vh - 40px); max-height: none; display: flex; flex-direction: column; padding: 14px 16px 16px; }
.help-dlg:not([open]) { display: none; }
.help-dlg iframe { flex: 1; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); margin-top: 8px; }
a.btn { text-decoration: none; color: inherit; }

/* Gallery: header (Pin / Close) stays put; only the template grid scrolls. */
#gallery[open] { display: flex; flex-direction: column; overflow: hidden; }
#gallery > .dlg-head, #gallery > .hint { flex: none; }
#gallery .gallery-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 8px 2px; grid-auto-rows: max-content; align-content: start; }
#gallery.docked[open] { overflow: hidden; }

/* ======================================================================
   Mobile layout (html.mobile, set by app.js for phones).
   One full-screen view at a time, switched with the bottom bar.
   ====================================================================== */
.m-only, .mnav { display: none; }
.danger-text { color: var(--danger); }

html.mobile .m-only { display: revert; }
html.mobile details.m-only { display: inline-block; }
html.mobile .d-only, html.mobile .lbl, html.mobile .fmt-hint { display: none !important; }
html.mobile body { height: 100vh; height: 100dvh; }

/* Views */
html.mobile .app { display: block; position: relative; flex: 1; min-height: 0; overflow: hidden; }
html.mobile .app > .library, html.mobile .app > .editor, html.mobile .app > .preview { display: none; height: 100%; max-height: none; min-height: 0; border: 0; }
html.mobile[data-mview="library"] .app > .library,
html.mobile[data-mview="edit"] .app > .editor,
html.mobile[data-mview="preview"] .app > .preview { display: flex; flex-direction: column; }

/* Bottom bar */
html.mobile .mnav { display: grid; grid-template-columns: repeat(3, 1fr); flex: none; background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.mnav button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.mnav button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mnav button.active { color: var(--primary); }
.mnav button.active::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); }
.mnav-badge { position: absolute; top: 4px; left: calc(50% + 8px); font-style: normal; font-size: 10px; line-height: 15px; min-width: 15px; padding: 0 4px; border-radius: 8px; background: var(--badge); color: #fff; }

/* Top bar & document bar */
html.mobile .topbar { padding: 6px 10px; }
html.mobile .brand { font-size: 16px; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; white-space: nowrap; line-height: 1.15; }
html.mobile .brand .logo { grid-row: span 2; width: 28px; height: 28px; }
/* The version, small under the name; tap it for What's new */
html.mobile .app-version { margin: 0; font-size: 11px; }
html.mobile .app-version .ver-date { display: none; }
/* Top bar icons about 20% larger on phones; the theme symbol (a text character) is drawn bigger to match the others */
html.mobile .topbar-right > .btn.small, html.mobile .topbar-right > details > summary.btn.small { font-size: 18px; padding: 4px 6px; }
html.mobile #themeIcon { font-size: 1.35em; line-height: 0.8; }
html.mobile .topbar-right { gap: 2px; }
html.mobile .save-status { font-size: 12px; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.mobile #storageBtn { max-width: 120px; overflow: hidden; white-space: nowrap; }
html.mobile .doc-bar { padding: 8px 12px; }
html.mobile .doc-actions { gap: 6px; }
html.mobile .doc-actions .btn { min-width: 40px; justify-content: center; font-size: 16px; }

/* Touch-sized controls */
html.mobile .btn { min-height: 40px; }
html.mobile .btn.small { min-height: 36px; }
html.mobile .btn.icon { min-height: 34px; min-width: 34px; justify-content: center; font-size: 13px; }
html.mobile .fmt-btn { min-width: 40px; height: 38px; }
html.mobile .field input, html.mobile .field select, html.mobile .rich, html.mobile .date-row select, html.mobile .lib-head input { font-size: 16px; } /* 16px stops iOS zooming on focus */
html.mobile .lib-item { padding: 12px 14px; }
html.mobile .app > .library { overflow-y: auto; } /* the whole Resumes screen scrolls, not a strip under Getting started */
html.mobile .lib-list { overflow: visible; flex: none; }
html.mobile .lib-actions .btn { min-height: 42px; }

/* Editor */
html.mobile .tabs { overflow-x: auto; padding: 6px 6px 0; scrollbar-width: none; }
html.mobile .tab { white-space: nowrap; padding: 10px; }
html.mobile .fmt-bar { padding: 6px 12px; }
html.mobile .pane { padding: 12px 12px 28px; }
html.mobile .grid2, html.mobile .score-row { grid-template-columns: 1fr; }
html.mobile .stats { grid-template-columns: repeat(2, 1fr); }
html.mobile .card-head { flex-wrap: wrap; }
html.mobile .card-head .title-input { min-width: 0; flex: 1 1 60%; }
html.mobile .order-note { order: 5; flex-basis: 100%; padding-left: 6px; }
html.mobile .date-row { gap: 6px; }
html.mobile .md-text { min-height: 60vh; font-size: 14px; }

/* Preview */
html.mobile .pv-bar { gap: 6px; padding: 6px 8px; }
html.mobile .pv-bar .spacer { display: none; }
html.mobile #exportMenu .menu-body, html.mobile #optMenu .menu-body { position: fixed; top: auto; bottom: calc(64px + env(safe-area-inset-bottom)); left: 8px; right: 8px; width: auto; max-height: 70dvh; overflow: auto; }

/* Dialogs & menus */
html.mobile .dialog { width: calc(100vw - 16px); max-width: none; padding: 16px; }
html.mobile .dialog.wide { max-height: calc(100dvh - 16px); }
html.mobile #newDlg[open] { display: flex; flex-direction: column; }
html.mobile #newForm { display: flex; flex-direction: column; min-height: 0; flex: 1; }
html.mobile .starter-grid { grid-template-columns: 1fr; max-height: 42dvh; }
html.mobile #gallery .hint { display: none; }
html.mobile #gallery .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
html.mobile .tpl-thumb { height: auto; aspect-ratio: 8.5 / 9; }
html.mobile .tpl-info b { flex-direction: column; align-items: flex-start; }
html.mobile .tpl-info small { display: none; }
html.mobile .help-dlg { height: calc(100dvh - 16px); padding: 10px; }
html.mobile .menu-body { max-width: calc(100vw - 24px); }
html.mobile #toolbox .menu-body { position: fixed; top: 54px; left: 8px; right: 8px; width: auto; max-width: none; max-height: calc(100dvh - 140px); }
html.mobile .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* Mobile: slide between views when a bottom-bar button is tapped */
@keyframes slideFromRight { from { transform: translateX(28%); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes slideFromLeft { from { transform: translateX(-28%); opacity: .35; } to { transform: none; opacity: 1; } }
html.mobile .slide-next { animation: slideFromRight .22s ease-out; }
html.mobile .slide-prev { animation: slideFromLeft .22s ease-out; }
@media (prefers-reduced-motion: reduce) { html.mobile .slide-next, html.mobile .slide-prev { animation: none; } }

/* Double-buffered preview: the next version renders out of sight, then swaps in. */
.pv-wrap { position: relative; }
.pv-wrap iframe.pv-back { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }

/* 1.4: titles within a role, add-section dialog, cover letters, style options */
.block.position { border-style: solid; border-color: var(--line); background: color-mix(in srgb, var(--primary) 4%, transparent); }
.starter-card.used { opacity: .6; }
.sec-custom { display: flex; gap: 8px; margin-top: 12px; }
.sec-custom input { flex: 1; border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 9px; background: var(--panel); }
.lib-letter { color: var(--primary); }
.opts label.check.disabled { opacity: .55; }

/* ---- Import window ---- */
.imp-dlg { width: min(1240px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: none; flex-direction: column; }
.imp-dlg[open] { display: flex; }
.imp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 6px 0 14px; flex-wrap: wrap; }
.imp-body { overflow: auto; }
.imp-body p { margin: 6px 0 10px; }
.imp-drop { border: 2px dashed var(--line-strong); border-radius: 12px; padding: 28px; text-align: center; display: grid; gap: 10px; justify-items: center; background: var(--panel-2); }
.imp-drop.over { border-color: var(--primary); background: var(--primary-soft); }
.imp-drop small { color: var(--muted); max-width: 520px; }
.imp-reco { display: grid; gap: 2px; border-left: 4px solid var(--ok); background: var(--panel-2); padding: 8px 12px; border-radius: 0 8px 8px 0; margin-bottom: 8px; }
.imp-reco span { color: var(--muted); font-size: 14px; }
.imp-steps { margin: 8px 0 12px; padding-left: 22px; display: grid; gap: 6px; }
.imp-steps kbd { font: 13px Consolas, monospace; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--panel-2); }
.imp-alt { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.imp-alt > summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.imp-paste { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px; background: var(--panel); font: 14px/1.45 Consolas, ui-monospace, monospace; resize: vertical; }
.imp-paste-wrap { display: grid; gap: 8px; }
.imp-row { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.imp-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); }
.imp-inline select { border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 6px; background: var(--panel); }
.imp-loading { display: grid; justify-items: center; gap: 12px; padding: 40px; }
.imp-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: impspin .8s linear infinite; }
@keyframes impspin { to { transform: rotate(360deg); } }
.imp-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; min-height: 0; flex: 1; overflow: hidden; }
.imp-left, .imp-right { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.imp-pane-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.imp-pane-head select { border: 1px solid var(--line-strong); border-radius: 6px; padding: 3px 6px; background: var(--panel); font-size: 13px; }
.imp-lines { list-style: none; margin: 0; padding: 6px; overflow: auto; font-size: 13px; }
.imp-lines li { display: grid; grid-template-columns: 62px 1fr auto; gap: 8px; align-items: baseline; padding: 2px 6px; border-left: 3px solid transparent; border-radius: 0 4px 4px 0; }
.imp-lines .imp-tag { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.imp-lines .imp-text { overflow-wrap: anywhere; }
.imp-lines .k-name, .imp-lines .k-headline, .imp-lines .k-contact { border-left-color: #8b5cf6; }
.imp-lines .k-heading { border-left-color: var(--primary); font-weight: 700; }
.imp-lines .k-role, .imp-lines .k-date { border-left-color: var(--ok); }
.imp-lines .k-bullet, .imp-lines .k-text, .imp-lines .k-skill, .imp-lines .k-item { border-left-color: var(--line-strong); }
.imp-lines .k-note { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.imp-lines .k-drop { color: var(--muted); }
.imp-lines .k-drop .imp-text { text-decoration: line-through; opacity: .7; }
.imp-lines.hide-drop .k-drop { display: none; }
.imp-outline { overflow: auto; padding: 10px 12px 16px; display: grid; gap: 10px; align-content: start; }
.imp-outline .card { margin: 0; }
.imp-flags { margin: 0; padding-left: 20px; color: var(--warn); font-size: 14px; display: grid; gap: 3px; }
.imp-ok { color: var(--ok); margin: 0; font-size: 14px; }
.imp-sec .card-body { gap: 8px; }
.imp-entry { border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: grid; gap: 6px; background: var(--panel); }
.imp-entry.flagged { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn) inset; }
.imp-entry-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.imp-entry-foot small { color: var(--muted); margin-right: auto; }
.imp-titles { display: grid; gap: 4px; }
.imp-titles > div { display: flex; gap: 6px; align-items: center; }
.imp-titles input { flex: 1; border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 6px; background: var(--panel); }
.imp-titles small { color: var(--muted); white-space: nowrap; font-size: 12px; }
.imp-outline textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; background: var(--panel); resize: vertical; font: inherit; font-size: 14px; }
.imp-foot { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 12px; }
.imp-foot input, .imp-foot select { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; background: var(--panel); }
.imp-foot-btns { display: flex; gap: 8px; }
html.mobile .imp-review { grid-template-columns: 1fr; overflow: auto; }
html.mobile .imp-left { max-height: 40dvh; }
html.mobile .imp-foot { grid-template-columns: 1fr; }

/* A role that just moved after a date change: brief highlight so the eye can follow it. */
details.entry.just-moved { animation: entry-moved 1.8s ease-out; }
@keyframes entry-moved {
  0%, 35% { background: var(--primary-soft); border-color: var(--primary); }
  100% { background: var(--entry-bg); }
}

/* Storage location window */
.store-path { display: flex; gap: 6px; }
.store-path input { flex: 1; min-width: 0; }
.store-files summary { cursor: pointer; color: var(--muted); }
.store-files ul { max-height: 180px; overflow: auto; margin: 6px 0; padding-left: 20px; }

/* Resizable divider between editor and preview (desktop only) */
.splitter { position: absolute; top: 0; right: -5px; width: 10px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
.splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background .15s; }
.splitter:hover::after, .splitter:focus-visible::after, body.resizing .splitter::after { background: var(--primary); }
.splitter:focus-visible { outline: none; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe { pointer-events: none; }
@media (max-width: 1180px) { .splitter { display: none; } }
html.mobile .splitter { display: none; }

/* Drag to reorder */
.grip { cursor: grab; color: var(--muted); padding: 0 4px 0 0; font-size: 15px; line-height: 1; user-select: none; opacity: .55; }
.grip:hover { opacity: 1; color: var(--primary); }
.grip:active { cursor: grabbing; }
html.mobile .grip { display: none; }
.dragging { opacity: .45; }
.drop-before { box-shadow: 0 -3px 0 0 var(--primary) !important; }
.drop-after { box-shadow: 0 3px 0 0 var(--primary) !important; }
.expand-all { font-size: 13px; padding: 2px 8px; color: var(--muted); white-space: nowrap; }

/* Fit to fewer pages, and page counts in the gallery */
.fit-btn { font-size: 13px; border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.tpl-pages { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.tpl-pages.over { color: var(--warn); }

/* Library note for browser storage */
.today { margin: 0 12px 8px; }
.today-box { border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); background: color-mix(in srgb, var(--primary) 6%, var(--panel)); border-radius: 8px; padding: 6px 10px; max-height: 42vh; overflow: auto; }
.today-box > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; }
.today-box > summary::-webkit-details-marker { display: none; }
.today-box > summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.today-box:not([open]) > summary::after { content: "▸"; }
.today-box ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.today-box li { display: grid; grid-template-columns: 20px 1fr; gap: 4px; font-size: 13px; line-height: 1.35; }
.today-box li > div { display: grid; gap: 2px; min-width: 0; }
.today-box .today-app { display: block; max-width: 100%; text-align: left; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-box small { color: var(--muted); }
.today-box small em { color: var(--warn); font-style: normal; }
.today-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.today-thanks small, .today-offer small { color: var(--warn); }
.today-box .today-more { margin-top: 6px; font-size: 13px; }
.lib-local { margin: 0 12px 8px; padding: 6px 8px; font-size: 13px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }

/* History, Compare, Send to phone */
.tool-dlg { width: min(1100px, 96vw); }
.tool-body { display: grid; gap: 10px; max-height: 78vh; overflow: auto; }
.history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.history-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); flex-wrap: wrap; }
.hist-when small { display: block; color: var(--muted); }
.hist-actions { display: flex; gap: 6px; }
.empty-note { color: var(--muted); }
.compare-pick select { max-width: 520px; }
.diff-sum { margin: 0; font-weight: 600; }
.diff { border: 1px solid var(--line); border-radius: 7px; overflow: clip; font-size: 14px; }
.diff-row { display: grid; grid-template-columns: 1fr 1fr; }
.diff-row > div { padding: 3px 8px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.diff-row > div + div { border-left: 1px solid var(--line); }
.diff-head > div { font-weight: 700; background: var(--panel-2); border-top: 0; }
/* Column headers stay visible while scrolling a long comparison. */
.diff-head { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--line), 0 2px 6px rgba(20, 30, 45, .08); }
.diff-row.head > div { font-weight: 700; }
.diff-row.del > div:first-child, .diff-row.change > div:first-child { background: color-mix(in srgb, var(--danger) 13%, transparent); }
.diff-row.add > div:last-child, .diff-row.change > div:last-child { background: color-mix(in srgb, var(--ok) 15%, transparent); }
.diff-row .empty { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--line) 60%, transparent) 6px 7px); }
.diff-row mark { background: color-mix(in srgb, var(--warn) 35%, transparent); color: inherit; border-radius: 2px; }
.diff.only-changes .diff-row.far { display: none; }
.diff-toggle { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.send-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.send-qr svg { width: min(300px, 70vw); height: auto; border-radius: 6px; }
.send-qr small { color: var(--muted); }

/* ATS check */
.ats-check { display: grid; gap: 8px; }
.ats-check > .btn { justify-self: start; }
.ats-stale { color: var(--warn); font-weight: 600; margin: 0; }
.ats-results.stale { opacity: .5; }
.ats-format { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; display: grid; gap: 6px; }
.ats-format.ok > b { color: var(--ok); }
.ats-format.no > b { color: var(--danger); }
.pdf-check { display: grid; gap: 8px; justify-items: start; }
.pdf-check > * { justify-self: stretch; }
.pdf-check > .btn { justify-self: start; }
.pdf-verdict { margin: 0; }
.score-verdict { margin: 4px 0 8px; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-2, var(--panel)); }
.score-verdict.pays { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
.score-verdict.same, .score-verdict.reverse { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.pdf-verdict.ok b { color: var(--ok); }
.pdf-verdict.no b { color: var(--danger); }
.ats-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ats-table th, .ats-table td { text-align: left; padding: 3px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.ats-table tr.no td { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.ok-note { color: var(--ok); margin: 0; }
.issues li.info { color: var(--muted); }

/* Touch: pinch zooms the preview image itself (handled in app.js), not the page */
@media (pointer: coarse) {
  #pvScroll { touch-action: pan-x pan-y; }
  #pvScroll iframe { pointer-events: none; }
}
html.mobile #pvScroll { touch-action: pan-x pan-y; }
html.mobile #pvScroll iframe { pointer-events: none; }

/* The text each writing check refers to */
.issue-items { margin: 4px 0 2px; padding-left: 18px; display: grid; gap: 3px; }
.issue-items li { font-size: 14px; color: var(--muted); list-style: disc; padding: 0; background: none; border: 0; }
/* Writing-check items link to the text they quote */
.issue-link { all: unset; cursor: pointer; color: var(--primary); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent); text-underline-offset: 2px; }
.issue-link:hover, .issue-link:focus-visible { text-decoration-color: var(--primary); }
.issue-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
/* The bullet or paragraph a writing check pointed to */
.find-hit { animation: find-hit 3.2s ease-out; border-radius: 4px; }
@keyframes find-hit {
  0%, 60% { background: color-mix(in srgb, var(--warn) 35%, transparent); box-shadow: 0 0 0 2px var(--warn); }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}

/* Error log */
.err-btn { color: var(--badge); font-weight: 700; }
.toast { display: flex; align-items: center; gap: 12px; }
.toast-action { all: unset; cursor: pointer; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.err-list { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.err-list li { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); }
.err-head small { display: block; color: var(--muted); }
.err-list pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; margin: 6px 0 0; color: var(--muted); }

/* Reconnect refused: point to choosing the folder again */
.warn-note { color: var(--warn) !important; font-weight: 600; }
#wFolder.pulse { animation: pulse-ring 1.6s ease-out 3; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

/* Job match: what the score means, how it works, advice, and words not counted */
.match-band { margin: 4px 0 8px; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-2); font-weight: 600; }
.match-band.strong { border-color: color-mix(in srgb, var(--ok) 55%, transparent); color: var(--ok); }
.match-band.fair { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); }
.match-band.low { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); }
.match-how { margin: 0 0 10px; }
.match-how summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.match-how ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); font-size: 14px; }
.advice { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.chip.skipped { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.not-counted .hint { margin: 2px 0 6px; }

/* Job description label with Clear; bullet before/after */
.job-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.job-label small { flex-basis: 100%; }
.job-label #jobClear { font-size: 13px; padding: 1px 8px; margin-left: auto; }
.weave-before { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; background: var(--panel-2); }
.weave-before small { color: var(--muted); font-weight: 600; }
.weave-before p { margin: 4px 0 0; }
.weave-after { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px; background: var(--panel); font: inherit; }

/* ---------------------------------------------------------------- 1.8: job-search tools */
.muted { color: var(--muted); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
html.mobile .grid3 { grid-template-columns: 1fr; }
.linkish { all: unset; cursor: pointer; font-weight: 600; color: var(--primary); }
.linkish:hover { text-decoration: underline; }
.copy-btn.done { border-color: var(--ok); color: var(--ok); }
.count { color: var(--muted); font-size: 13px; }
.count.over { color: var(--danger); font-weight: 600; }

/* Copy for application forms */
.kit { display: grid; gap: 8px; }
.kit-style { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.kit-style .check { display: inline-flex; gap: 4px; align-items: center; }
.kit-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); padding: 6px 10px; }
.kit-card > summary { cursor: pointer; padding: 4px 0; }
.kit-card > summary small { color: var(--muted); margin-left: 8px; }
.kv-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line); }
.kv-label { font-size: 14px; color: var(--muted); font-weight: 600; }
.kv-value { overflow-wrap: anywhere; cursor: copy; }
.kv-value.static { cursor: default; color: var(--muted); }
.kv-value small { display: block; color: var(--muted); font-size: 12px; }
.kit-text { display: grid; gap: 4px; padding: 6px 0; border-top: 1px solid var(--line); }
.kit-text-head { display: flex; gap: 10px; align-items: center; }
.kit-text-head .count { margin-left: auto; }
.kit-text pre, .kit-card pre { white-space: pre-wrap; font: inherit; font-size: 14px; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; max-height: 220px; overflow: auto; }
.kit-text p { margin: 0; font-size: 14px; }
.kit-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0 2px; }
.kit-plain { width: 100%; font: 13px/1.45 Consolas, ui-monospace, monospace; border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; background: var(--panel); }
.kit-skills { font-size: 14px; margin: 4px 0; }
html.mobile .kv-row { grid-template-columns: 1fr auto; }
html.mobile .kv-label { grid-column: 1 / -1; }

/* Interview prep */
.prep-pitch, .prep-general, .prep-ask { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.prep-general small { display: block; color: var(--muted); }
.prep-list { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.prep-list > li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel-2); }
.prep-list > li.gap { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.prep-q { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.prep-req { font-size: 12px; color: var(--warn); white-space: nowrap; }
.prep-tip { margin: 4px 0; font-size: 14px; color: var(--muted); }
.prep-ev { margin: 2px 0 4px; padding-left: 18px; font-size: 14px; }
.prep-ev small { color: var(--muted); margin-right: 6px; }
.star { margin-top: 6px; }
.star > summary { cursor: pointer; color: var(--primary); font-size: 14px; font-weight: 600; }
.star .field { margin-top: 6px; }
.chips small { color: var(--muted); align-self: center; }

/* Achievement library */
.ach-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ach-filters input[type=search] { flex: 1; min-width: 200px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; background: var(--panel); }
.ach-filters .check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.tag-btn { cursor: pointer; background: var(--panel); }
.tag-btn.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.ach-list { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.ach-list > li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel-2); }
.ach-list > li.here { opacity: .75; }
.ach-text { margin: 0 0 4px; }
.ach-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ach-meta small { color: var(--muted); margin-right: 4px; }
.ach-meta .chip { font-size: 12px; padding: 0 7px; }
.ach-alt summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.ach-alt ul { margin: 4px 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.ach-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.ach-actions select { max-width: 320px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 3px 6px; background: var(--panel); font-size: 14px; }
.ach-actions .ok-note { font-size: 14px; }

/* LinkedIn */
.li-heads { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.li-heads li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; background: var(--panel-2); }
html.mobile .li-heads li { grid-template-columns: 1fr auto; }
html.mobile .li-heads li > span:first-child { grid-column: 1 / -1; }
.tool-body > textarea, .li-check textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; background: var(--panel); line-height: 1.45; }
.li-check { display: grid; gap: 6px; }

/* Follow-up notes */
.note-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.note-kinds .starter-card { padding: 8px 10px; }

/* Job match: tracking, prep and achievements for this posting */
.job-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }

/* Bullet coach */
.coach-sum { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.coach-sum small { color: var(--muted); }
.coach-bar { display: flex; width: 220px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); }
.coach-bar .strong { background: var(--ok); }
.coach-bar .ok { background: var(--warn); }
.coach-bar .weak { background: var(--danger); }
.coach-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.coach-list > li { border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 6px; padding: 7px 10px; background: var(--panel-2); }
.coach-list > li.weak { border-left-color: var(--danger); }
.coach-list > li.ok { border-left-color: var(--warn); }
.coach-list > li.strong { border-left-color: var(--ok); }
.coach-head { display: flex; gap: 8px; align-items: center; }
.coach-head small { color: var(--muted); }
.coach-grade { font-size: 12px; font-weight: 700; padding: 0 7px; border-radius: 9px; border: 1px solid currentColor; }
.coach-grade.weak { color: var(--danger); }
.coach-grade.ok { color: var(--warn); }
.coach-grade.strong { color: var(--ok); }
.coach-text { display: block; text-align: left; margin: 4px 0; color: var(--text) !important; text-decoration: none !important; }
.coach-text:hover { color: var(--primary) !important; text-decoration: underline !important; }
.coach-tips { margin: 2px 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.coach-verbs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.coach-verbs small { color: var(--muted); }
.coach-ai { margin-top: 6px; }
/* Review: each check at a glance, jumping to its section */
.rv-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.rv-card { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--panel); }
.rv-card:hover { border-color: var(--primary); }
.rv-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.rv-card b { font-size: 22px; line-height: 1.2; }
.rv-card small { color: var(--muted); }
.rv-card.good b { color: var(--ok); }
.rv-card.fair b { color: var(--warn); }
.rv-card.low b { color: var(--danger); }
#reviewOut [id^="rv-"] { scroll-margin-top: 8px; }
/* Ask an AI */
.ai-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-prompt, .ai-paste, .ai-option { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px; background: var(--panel); color: var(--text); font: inherit; }
.ai-prompt { font-size: 13px; margin-top: 6px; }
.ai-see > summary { cursor: pointer; color: var(--primary); font-size: 14px; }
.ai-back { display: grid; gap: 8px; justify-items: start; }
.ai-status:empty { display: none; }
.ai-options { display: grid; gap: 10px; }
.ai-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 6px; justify-items: start; background: var(--panel-2); }
.ai-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; }
.ai-warn { color: var(--danger); }
.ai-ok { color: var(--ok); }
.verb-chip { cursor: pointer; background: var(--panel); }
.verb-chip:hover { border-color: var(--primary); color: var(--primary); }

/* Recruiter's 6-second view */
.scan-btn.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.scan-panel { border-bottom: 1px solid var(--line); background: var(--panel); padding: 8px 14px; max-height: 38%; overflow: auto; flex: none; }
.scan-head { display: flex; justify-content: space-between; align-items: center; }
.scan-panel .hint { margin: 4px 0; font-size: 14px; }
.scan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 14px; }
.scan-list li { padding-left: 20px; position: relative; }
.scan-list li::before { position: absolute; left: 0; font-weight: 700; }
.scan-list li.ok::before { content: "✓"; color: var(--ok); }
.scan-list li.warn::before { content: "!"; color: var(--warn); left: 4px; }

/* Applications (tracker) */
.apps-btn .badge { margin-left: 4px; }
/* Uses most of a large screen: up to 1800px wide, with a margin on each side. */
.dialog.apps-dlg { width: min(1800px, calc(100vw - 48px)); max-width: none; height: calc(100vh - 40px); flex-direction: column; gap: 8px; }
.apps-dlg[open] { display: flex; }
.apps-dlg > :not(.dlg-head) { min-height: 0; }
.apps-dlg .dlg-head .save-status { font-size: 13px; }
.apps-stats { margin: 0; color: var(--muted); font-size: 14px; }
.apps-due { border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); border-radius: 8px; padding: 8px 12px; }
.apps-due .due-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apps-due .due-title { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; }
.apps-due .due-title::before { content: "▾"; color: var(--muted); width: 1em; transition: transform .15s; }
.apps-due.shut .due-title::before { transform: rotate(-90deg); }
.apps-due .due-title:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.apps-due .due-bar-acts { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.apps-due .postpone .menu-body { min-width: 190px; }
.apps-due.shut { padding-top: 4px; padding-bottom: 4px; }
.apps-due.shut ul { display: none; }
.apps-due .due-late { font-size: 12px; color: var(--danger); }
.apps-due ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.apps-due li { line-height: 1.6; }
.apps-due li.overdue > span:first-of-type { color: var(--danger); }
.apps-due .due-acts { margin-left: 8px; display: inline-flex; gap: 4px; vertical-align: middle; }
.apps-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.apps-tools input { flex: 0 1 320px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; background: var(--panel); }
.apps-board { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); align-content: stretch; gap: 10px; overflow: auto; padding-bottom: 4px; }
.apps-col { background: var(--section); border: 1px solid var(--section-line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.apps-col.drop { outline: 2px dashed var(--primary); outline-offset: -3px; }
.apps-col h3 { margin: 0; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.apps-cards { display: grid; gap: 6px; align-content: start; overflow: auto; }
.app-card { text-align: left; background: var(--entry-bg); border: 1px solid var(--entry-line); border-radius: 8px; padding: 7px 9px; cursor: pointer; display: grid; gap: 1px; box-shadow: var(--entry-shadow); }
.app-card:hover { border-color: var(--primary); }
.app-card.dragging { opacity: .4; }
.app-card b { font-size: 15px; }
.app-card span { font-size: 14px; }
.app-card small { color: var(--muted); font-size: 12px; }
.app-card .app-due { color: var(--warn); font-weight: 600; }
.app-card .app-due.overdue { color: var(--danger); }
.app-card .app-next { color: var(--primary); }
.app-card.due { border-color: var(--warn); }
.col-closed .app-card { opacity: .75; }
.apps-empty { max-width: 640px; }
.apps-empty ul { padding-left: 20px; display: grid; gap: 4px; }
/* Sections keep their full height and the window scrolls (they clip to their rounded corners,
   which would otherwise let the grid squeeze them to fit). */
.app-detail { overflow: auto; display: grid; grid-auto-rows: max-content; gap: 12px; align-content: start; padding-right: 4px; }
.app-status { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.app-status .field { min-width: 200px; }
.app-history { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--muted); align-self: center; }
.app-history li { display: inline-flex; align-items: center; gap: 2px; }
.app-history b { color: var(--text); font-weight: 600; }
.app-detail .store-path { display: flex; gap: 6px; }
.app-detail .store-path input { flex: 1; min-width: 0; }
.app-detail .field > input, .app-detail textarea, .app-detail .store-path input { border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; background: var(--panel); width: 100%; }
.sent-box { display: grid; gap: 6px; border: 1px solid var(--entry-line); border-radius: 8px; padding: 8px 10px; background: var(--entry-bg); justify-items: start; }
.sent-box > small { color: var(--muted); }
.sent-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; width: 100%; }
.sent-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sent-frame { width: 100%; height: 72vh; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); }
.contacts { display: grid; gap: 6px; justify-items: start; }
.contact-row { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr 1fr auto auto; gap: 6px; width: 100%; align-items: center; }
.contact-row input { border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 8px; background: var(--panel); min-width: 0; }
.app-job .btn { margin-top: 6px; }
.app-danger { justify-content: flex-end; }
html.mobile .apps-dlg { width: calc(100vw - 8px); height: calc(100dvh - 8px); max-height: none; padding: 12px; }
html.mobile .apps-board { display: flex; flex-direction: column; overflow: auto; }
html.mobile .apps-col { min-height: 0; flex: none; }
html.mobile .contact-row { grid-template-columns: 1fr 1fr; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cal-menu .menu-body { min-width: 280px; }
.bm-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.bm-steps .bookmarklet { margin-left: 6px; cursor: grab; }
/* "▸ Example" under a suggestion */
.ex { margin-top: 4px; font-size: 13.5px; }
.ex > summary { cursor: pointer; color: var(--primary); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.ex > summary::-webkit-details-marker { display: none; }
.ex > summary::before { content: "▸"; display: inline-block; transition: transform 0.15s; }
.ex[open] > summary::before { transform: rotate(90deg); }
.ex-body { margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--primary); background: var(--panel-2); border-radius: 0 6px 6px 0; display: grid; gap: 6px; color: var(--text); font-weight: 400; }
.ex-body small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ex-before .ex-text { color: var(--muted); }
.ex-after small { color: var(--ok); }
.ex-text { white-space: pre-line; }
.ex-note { margin: 0; color: var(--muted); font-size: 13px; }
.bm-alt { margin-top: 8px; font-size: 14px; }
.bm-alt summary { cursor: pointer; color: var(--primary); }
.bm-alt p { margin: 6px 0 0; }
.bm-status { margin: 14px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--panel-2); color: var(--muted); font-size: 14px; }
.bm-status.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); font-weight: 600; }
.bm-status.old { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.li-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 40vh; overflow: auto; }
.li-jobs li { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; background: var(--panel-2); }
.li-jobs li.dup { opacity: .65; }
.li-jobs .check { display: flex; gap: 8px; align-items: flex-start; }
.li-jobs .check input { margin-top: 4px; }
.li-jobs small { display: block; color: var(--muted); }
.tool-body > .field select { border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; background: var(--panel); }
.paste-note { border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 15px; }
.paste-note p { margin: 0 0 4px; }
.paste-note ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* Grouped sections in the application windows (like the editor's section cards) */
.app-sec { background: var(--section); border: 1px solid var(--section-line); border-radius: 10px; overflow: hidden; }
.app-sec > h3, .app-sec > summary { margin: 0; padding: 7px 12px; background: var(--section-head); border-bottom: 1px solid var(--section-line); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
details.app-sec > summary { cursor: pointer; list-style: none; }
details.app-sec > summary::-webkit-details-marker { display: none; }
details.app-sec > summary::before { content: "▸"; display: inline-block; margin-right: 6px; transition: transform .15s; }
details.app-sec[open] > summary::before { transform: rotate(90deg); }
details.app-sec:not([open]) > summary { border-bottom: 0; }
details.app-sec > :not(summary) { margin: 10px 12px; }
details.app-sec > textarea { width: calc(100% - 24px); }
.app-sec-body { padding: 10px 12px; display: grid; gap: 10px; }
.app-sec .field > input, .app-sec .field > select, .app-sec textarea, .app-sec .store-path input, .app-sec .contact-row input { background: var(--entry-field); border: 1px solid var(--entry-line); border-radius: 6px; padding: 6px 8px; }
.app-sec .field > span { color: var(--text); }
.app-hist-wrap { display: grid; gap: 2px; align-self: center; }
.app-sec .welcome-actions { margin: 0; }
.req { color: var(--danger); font-weight: 700; }
.req-note { margin-right: auto; align-self: center; color: var(--muted); }
.new-app-dlg { width: min(760px, calc(100vw - 32px)); }
.new-app-form { display: grid; gap: 12px; }
.new-app-form .dlg-foot { margin-top: 4px; }
.new-app-form .store-path { display: flex; gap: 6px; }
.new-app-form .store-path input { flex: 1; min-width: 0; }
.fetch-status { border-radius: 6px; padding: 7px 10px; font-size: 14px; border: 1px solid var(--line); background: var(--entry-bg); }
.fetch-status.ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); color: var(--text); }
.fetch-status.ok b { color: var(--ok); }
.fetch-status.warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.fetch-status.warn b { color: var(--warn); }
.fetch-status.busy { color: var(--muted); }
.app-sec input.filled { background: color-mix(in srgb, var(--ok) 12%, var(--entry-field)); border-color: color-mix(in srgb, var(--ok) 55%, var(--entry-line)); }
html.mobile .new-app-dlg { width: calc(100vw - 8px); max-height: calc(100dvh - 8px); }
/* Phones: link and date rows wrap their buttons instead of running off the edge. */
.app-sec .field { min-width: 0; }
html.mobile .app-sec .store-path { flex-wrap: wrap; }
html.mobile .app-sec .store-path > input { flex: 1 1 100%; }

/* ---------------------------------------------------------------- 1.9: insights, offers, contacts, tailor, practice */
.apps-tools select { border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 8px; background: var(--panel); max-width: 220px; }
.apps-tools select.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.apps-tools .check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.apps-views { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.apps-where { display: block; }
.apps-due li.ghost > span:first-of-type { color: var(--muted); }
.ins-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.bars { display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 48px; gap: 10px; align-items: center; font-size: 14px; }
.bar-track { height: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 7px; }
.bar-row b { text-align: right; }
.weeks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 140px; align-items: end; }
.week { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.week-bar { width: 70%; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 2px; }
.week small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ins-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ins-table th, .ins-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ins-table th { color: var(--muted); font-weight: 600; }
.ins-table td small { color: var(--muted); }
.rate { font-weight: 700; }
.rate.good { color: var(--ok); }
.rate.ok { color: var(--warn); }
.rate.low { color: var(--danger); }
.kw-map tr.miss td:first-child { font-weight: 600; }
.kw-n { display: inline-block; width: 70px; height: 8px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); vertical-align: middle; overflow: hidden; }
.kw-n span { display: block; height: 100%; background: var(--primary); }
.miss-note { color: var(--danger); font-weight: 600; }
.offer-wrap { overflow-x: auto; }
.offers th small { display: block; font-weight: 400; color: var(--muted); }
.offers td.best { background: color-mix(in srgb, var(--ok) 14%, transparent); font-weight: 700; }
.offer-total { margin: 4px 0; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.people > li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel-2); display: grid; gap: 4px; }
.people > li.due { border-color: var(--warn); }
.person-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.person-head small { color: var(--muted); }
.person-dates, .contact-dates { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.contact-dates { grid-column: 1 / -1; }
.inline-field { display: inline-flex; gap: 6px; align-items: center; }
.inline-field span { color: var(--muted); font-size: 13px; }
.inline-field input { border: 1px solid var(--line-strong); border-radius: 6px; padding: 3px 6px; background: var(--panel); }
.tailor-list { display: grid; gap: 8px; }
.tailor-list .li-jobs { max-height: 36vh; }
.sync-ver .li-jobs { max-height: none; }
.sync-ver del { display: block; color: var(--danger); text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.sync-ver ins { display: block; color: var(--ok); text-decoration: none; }
.prep-research pre { white-space: pre-wrap; font: inherit; font-size: 14px; margin: 4px 0; }
.prep-doc { display: grid; gap: 8px; }
.prep-text { width: 100%; min-height: 9em; resize: vertical; font: inherit; font-size: 14px; line-height: 1.45; }
.prep-doc-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.prep-files-title { margin: 6px 0 0; font-size: 14px; }
.prep-drop { border: 1px dashed var(--line-strong); border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; }
.prep-drop.over { border-color: var(--primary); background: var(--primary-soft); }
.prep-drop-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.prep-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.prep-files:empty { display: none; }
.prep-file { display: flex; gap: 10px; align-items: center; min-width: 0; }
.prep-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.prep-file small { white-space: nowrap; }
.prep-file-acts { margin-left: auto; display: flex; gap: 2px; }
.prep-own > .prep-doc { margin-top: 6px; }
.practice { display: grid; gap: 10px; }
.practice-top { display: flex; justify-content: space-between; align-items: center; }
.practice-q { font-size: 22px; font-weight: 600; line-height: 1.35; margin: 4px 0; }
.clock { font: 600 22px/1 ui-monospace, Consolas, monospace; color: var(--muted); }
.clock.running { color: var(--primary); }
.clock.long { color: var(--warn); }
.practice audio { width: 100%; }
.practice-notes > summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.practice-notes dl { margin: 6px 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; }
.practice-notes dt { font-weight: 700; }
.practice-notes dd { margin: 0; }
.practice-nav { justify-content: space-between; }
html.mobile .bar-row { grid-template-columns: 90px 1fr 40px; }
html.mobile .week small { display: none; }
html.mobile .apps-views { margin-left: 0; }
/* Phones: the folder button gives way (with "…") so the top bar never runs off the screen. */
html.mobile .topbar-right { min-width: 0; }
html.mobile #storageBtn { flex: none; }
.app-version[role=button] { cursor: pointer; }
.app-version[role=button]:hover { color: var(--primary); text-decoration: underline; }
.whats-new ul { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 4px; }
.whats-new h3 small { font-weight: 400; color: var(--muted); }

/* Notes inside section header bars: full-strength text so they stay readable on the tinted bar. */
.card-head { --muted: color-mix(in srgb, var(--text) 80%, var(--section-head)); }

/* A role's buttons (move up/down, remove) overlay the right end of its header. */
.entry-wrap { position: relative; min-width: 0; }
.entry-wrap > details.entry > summary { padding-right: 96px; }
.entry-actions { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 4px; }
details.entry[open] + .entry-actions { right: 8px; }
.entry-wrap.dragging, .entry-wrap.dragging > details.entry { opacity: .5; }

/* Answer & story bank */
.bank-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.bank-top select { max-width: 100%; }
.bank-tabs { margin-bottom: 10px; }
.bank { display: grid; gap: 10px; }
.bank-card .field { margin-top: 6px; }
.bank-filled { margin: 4px 0 0; padding: 8px 10px; border-left: 3px solid var(--primary); background: var(--panel-2); white-space: pre-wrap; font-size: 13px; }
.bank-filled::before { content: "As it will be copied: "; color: var(--muted); }
.bank-why { color: var(--ok); }
.star-bank { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }

/* Reviewer feedback: the reviewer's page, and comments in Job match & review */
body.reviewing > :not(#reviewMode):not(dialog):not(.toast) { display: none !important; }
.review-mode { max-width: 860px; margin: 0 auto; padding: 16px 16px 48px; display: grid; gap: 12px; }
.rv-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; position: sticky; top: 0; background: var(--bg); padding: 8px 0; z-index: 2; border-bottom: 1px solid var(--line); }
.rv-top h1 { margin: 0; font-size: 22px; }
.rv-top .hint { margin: 4px 0 0; }
.rv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-note { margin: 0; padding: 10px 12px; border-left: 3px solid var(--primary); background: var(--panel-2); border-radius: 0 6px 6px 0; }
.rv-name { max-width: 360px; }
.rv-doc { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: grid; gap: 2px; }
.rv-doc h2 { margin: 0; }
.rv-doc > p { margin: 0 0 8px; }
.rv-heading { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.rv-line { border-radius: 6px; padding: 2px 4px; }
.rv-line.has { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.rv-overall { padding: 8px; border: 1px dashed var(--line-strong); margin-bottom: 6px; display: grid; gap: 6px; }
.rv-text { all: unset; cursor: pointer; display: block; line-height: 1.45; padding: 3px 4px; border-radius: 4px; }
.rv-text:hover, .rv-text:focus-visible { background: var(--primary-soft); outline: none; }
.rv-role > .rv-text { font-weight: 600; margin-top: 8px; }
.rv-li > .rv-text { padding-left: 18px; text-indent: -12px; }
.rv-comment textarea { width: 100%; box-sizing: border-box; margin: 4px 0 6px; }
.rv-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-frame { width: 100%; height: 70vh; border: 1px solid var(--line); background: #fff; }
.fb-section { border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); border-radius: 8px; padding: 4px 12px 10px; margin-bottom: 12px; }
.fb-section h3 { display: flex; align-items: center; gap: 8px; }
.fb-list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; }
.fb-list li { border-left: 3px solid var(--warn); padding: 2px 0 2px 10px; }
.fb-list li.resolved { border-left-color: var(--ok); opacity: .7; }
.fb-list p { margin: 2px 0; white-space: pre-wrap; }
.fb-anchor { text-align: left; }
.fb-link { display: grid; gap: 8px; }

/* ---- Finding your way (guide.js, tour.js) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Can't be used yet: grayed out; clicking says why */
.is-off, .is-off:hover { opacity: .42; filter: grayscale(1); cursor: not-allowed !important; box-shadow: none !important; }
.menu-item.is-off b, .menu-item.is-off small { color: var(--muted); }
/* New and Import, until there's a resume: green outline that pulses a few times, then stays */
.attn { outline: 2px solid var(--ok); outline-offset: 2px; animation: attn-ring 1.6s ease-out 4; }
@keyframes attn-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 65%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .attn { animation: none; } .start-list.flash { animation: none; } }
/* First run */
.welcome-dlg { max-width: 640px; }
.w-step { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); }
.w-lead { font-size: 15px; }
.start-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 12px 0; }
.start-card { display: grid; gap: 4px; align-content: start; text-align: left; padding: 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; }
.start-card:hover, .start-card:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
.start-card.primary { border: 2px solid var(--ok); }
.start-card b { font-size: 15px; }
.start-card small { color: var(--muted); line-height: 1.4; }
.start-icon { font-size: 24px; }
.start-empty { max-width: 640px; margin: 24px auto; }
.start-empty h2 { margin: 0 0 4px; }
/* Getting started checklist */
.start-list { margin: 8px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.start-list.flash { animation: attn-ring 1.2s ease-out 2; }
.start-head { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.start-head small { font-variant-numeric: tabular-nums; }
.start-head .start-tour { margin-left: auto; }
.start-bar { height: 4px; border-radius: 2px; background: var(--line); margin: 6px 0; overflow: hidden; }
.start-bar i { display: block; height: 100%; background: var(--ok); transition: width .3s; }
.start-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.start-steps li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.start-steps li.done .start-title { color: var(--muted); text-decoration: line-through; }
.start-steps li.next { font-weight: 600; }
.start-steps li small { display: block; font-weight: 400; color: var(--muted); }
.start-text { flex: 1; min-width: 0; }
.start-tick { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 11px; color: #fff; }
.start-steps li.done .start-tick { background: var(--ok); border-color: var(--ok); }
.start-steps li.next .start-tick { border-color: var(--ok); }
.start-all { margin: 4px 0 0; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Tour */
.tour-dim { position: fixed; inset: 0; z-index: 9997; background: rgba(0, 0, 0, .5); pointer-events: none; }
.tour-hole { position: fixed; z-index: 9998; border-radius: 8px; pointer-events: none; outline: 3px solid var(--ok); transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; }
.tour-hole.none { left: 50%; top: 50%; width: 0; height: 0; outline: none; }
.tour-pop { position: fixed; z-index: 9999; padding: 14px 16px; border-radius: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.tour-pop h3 { margin: 2px 0 6px; font-size: 16px; }
.tour-pop p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.tour-foot { display: flex; gap: 6px; align-items: center; }
.tour-foot .spacer { flex: 1; }
@media (prefers-reduced-motion: reduce) { .tour-hole { transition: none; } }
/* Browser advice about folders (browsers.js) */
.browser-help { font-size: 14px; color: var(--text); }
.browser-help p { margin: 0 0 6px; }
.browser-help ol, .browser-help ul { margin: 4px 0 6px; padding-left: 20px; display: grid; gap: 4px; }
.browser-help .store-path { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.browser-help code { overflow-wrap: anywhere; }
.browser-alt { color: var(--muted); }
/* Backups (backup.js) */
.bk-pw { margin: 6px 0 0 26px; }
.bk-warn { font-size: 13px; margin: 4px 0 0; }
.bk-plan { display: grid; gap: 10px; }
.bk-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.bk-modes { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.bk-group { border: 1px solid var(--line); border-radius: 8px; }
.bk-group > summary { cursor: pointer; padding: 8px 10px; font-weight: 600; }
.bk-group ul { list-style: none; margin: 0; padding: 0 10px 8px; display: grid; gap: 2px; }
.bk-item { display: flex; align-items: center; gap: 8px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 4px; }
.bk-item .check { flex: 1; min-width: 0; }
.bk-item small { display: block; color: var(--muted); }
.bk-st { flex: none; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-strong); white-space: nowrap; }
.bk-new { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.bk-backup { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.bk-here { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.bk-changed { color: var(--muted); }
.bk-same { color: var(--muted); }
.tool-body > label.check, .bk-modes label.check, .bk-item label.check { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.tool-body > label.check small, .bk-modes label.check small { display: block; color: var(--muted); font-size: 13px; }
.tool-body > label.check input, .bk-modes input, .bk-item input { margin-top: 3px; flex: none; }
/* Send to phone with several codes, and the phone's scanner (qrscan.js) */
.send-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; margin: 8px 0 12px; }
.send-step { display: grid; gap: 4px; justify-items: center; text-align: center; }
.send-step small { color: var(--muted); }
.send-qr.small svg { width: min(150px, 40vw); }
.qr-cycle svg { width: min(320px, 70vw); height: auto; border-radius: 6px; display: block; }
.qr-cycle-foot { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 4px; }
.qr-part { font-variant-numeric: tabular-nums; color: var(--muted); }
.qr-cam { position: relative; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; max-height: 55vh; }
.qr-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0 4px; }
.qr-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); }
.qr-dots i.on { background: var(--ok); border-color: var(--ok); }
.qr-msg { text-align: center; margin: 4px 0; }
.imp-scan { display: grid; gap: 6px; justify-items: start; }
@media (max-width: 640px) { .send-steps { grid-template-columns: 1fr; } }

/* The old address (dpadula.com): CV Workroom has moved (moved.js) */
.moved-banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--primary-soft); color: var(--text); border-bottom: 1px solid var(--line-strong); font-size: 14px; }
.moved-steps { padding-left: 22px; }
.moved-steps li { margin-bottom: 10px; }
.moved-steps .welcome-actions { margin: 8px 0 0; }