/* The resume editor (js/resume-editor.js), its menus (js/doc-menu.js) and the master page's
   actions (js/master-editor.js). ONE stylesheet for both products: the hosted index.html links
   it, and the local tool serves this same file (tool/server.js SHARED_STATIC), with the fonts
   beside it at fonts/. Every state is a class; nothing sets an inline style. Each product sets
   --re-sticky-top to the height of its own sticky top bar, so the bar parks right under it.
   Fixed colours on the sheet: it is white paper.

   The Docs-style layout (2026-10-05): one bar across the page (document name and save status,
   the tool pill, the product's buttons), then the main column (the grey desk with Letter
   sheets) and, when the product docks one, a panel on the right. Zoom is a class on the main
   column, which is the size container: --re-w is the sheet width, and the sheets and
   any redline pages shown in the view slot all take it. */

/* Carlito: the metric-compatible open twin of Calibri (SIL OFL, fonts/Carlito-OFL.txt), so the
   editor and every export preview break lines alike everywhere, not only where Calibri is. */
@font-face { font-family: "Carlito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/carlito-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/carlito-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/carlito-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/carlito-700-italic.woff2") format("woff2"); }

.re {
  --re-ui: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif);
  --re-doc: Carlito, Calibri, "Helvetica Neue", Arial, sans-serif;
  --re-bar-h: 49px;
  margin: 0 0 20px;
}

/* ------------------------------------------------------------- the sticky bar */
.re-bar {
  position: sticky; top: var(--re-sticky-top, 0px); z-index: 8;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  box-sizing: border-box; min-height: var(--re-bar-h); padding: 6px 16px;
  background: var(--panel, #fffdf8); border-bottom: 1px solid var(--line, #e6e1d6);
  font-family: var(--re-ui); font-size: var(--t-sm, 15px); color: var(--ink, #211c16);
}
.re-bar-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
.re-bar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.re-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 3px 10px; border-radius: var(--r-pill, 999px); background: var(--panel-2, #f1ede3); }
.re-group { display: flex; align-items: center; gap: 2px; }
/* The page count: neutral ink, never a warning colour (page length is no documented rejection). */
.re-pages { color: var(--ink-dim, #6b6256); font-size: var(--t-xs, 13px); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The save status with the page count under it: one narrow column, so the count adds no width. */
.re-meta { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.re-group + .re-group { margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line-strong, #cfc8b9); }
.re .re-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; min-width: 32px; min-height: 32px; margin: 0; padding: 0;
  border: 0; border-radius: var(--r-control, 8px); background: transparent; color: var(--ink, #211c16);
  box-shadow: none; font: inherit; line-height: 1; cursor: pointer;
}
.re .re-btn:not(:disabled):hover { background: var(--hover, rgba(33, 28, 22, 0.06)); }
.re .re-btn[aria-pressed="true"] { background: var(--accent-soft, #e8eff2); color: var(--accent-strong, #173f55); }
.re .re-btn:disabled { opacity: 0.38; cursor: default; }
.re .re-btn:focus-visible { outline: 2px solid var(--accent, #20536e); outline-offset: 1px; }
.re-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.re-icon circle { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------- menus (js/doc-menu.js) */
.dm { position: relative; display: inline-flex; align-items: stretch; font-family: var(--re-ui, system-ui, sans-serif); font-size: var(--t-sm, 15px); }
.dm .dm-trigger, .dm .dm-main {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 0 8px 0 10px;
  border: 1px solid transparent; border-radius: var(--r-control, 8px); background: transparent; color: var(--ink, #211c16);
  box-shadow: none; font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.dm .dm-trigger:hover, .dm .dm-main:hover { background: var(--hover, rgba(33, 28, 22, 0.06)); }
.dm .dm-trigger:focus-visible, .dm .dm-main:focus-visible { outline: 2px solid var(--accent, #20536e); outline-offset: 1px; }
.dm-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.dm.dm-open .dm-trigger { background: var(--hover-strong, rgba(33, 28, 22, 0.1)); }
/* The page's main button: a filled accent pill; split, the caret is its own part. */
.dm .dm-primary { min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--accent, #20536e); color: var(--on-accent, #f7f4ec); font-weight: 500; }
.dm .dm-primary:hover { background: var(--accent-strong, #173f55); }
.dm .dm-primary .dm-caret { border-top-color: var(--on-accent, #f7f4ec); }
.dm-split .dm-main.dm-primary { border-radius: 999px 0 0 999px; padding: 0 14px 0 16px; }
.dm-split .dm-trigger.dm-primary { border-radius: 0 999px 999px 0; padding: 0 12px 0 10px;
  border-left: 1px solid rgba(247, 244, 236, 0.35); }
.dm-split .dm-trigger.dm-caret-only:not(.dm-primary) { padding: 0 8px; }
.dm-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; padding: 6px;
  background: var(--panel, #fffdf8); border: 1px solid var(--line, #e6e1d6); border-radius: var(--r-control, 8px); box-shadow: var(--shadow-pop, 0 8px 24px rgba(33, 28, 22, 0.14), 0 2px 6px rgba(33, 28, 22, 0.08));
}
.re-tools .dm-menu { right: auto; left: 0; min-width: 140px; }
.dm-menu[hidden] { display: none; }
.dm-menu .dm-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 0 12px;
  border: 0; border-radius: var(--r-control, 8px); background: transparent; color: var(--ink, #211c16); box-shadow: none;
  font: inherit; font-size: var(--t-sm, 15px); font-weight: 500; text-align: left; cursor: pointer;
}
.dm-menu .dm-item:hover { background: var(--panel-2, #f1ede3); }
.dm-menu .dm-item:focus-visible { outline: 2px solid var(--accent, #20536e); outline-offset: -2px; background: var(--panel-2, #f1ede3); }
.dm-menu .dm-item[aria-disabled="true"] { color: var(--ink-dim, #6b6256); cursor: default; }
.dm-menu .dm-item[aria-checked="true"] { font-weight: 700; color: var(--accent-strong, #173f55); }
.dm-hint { color: var(--ink-dim, #6b6256); font-size: var(--t-xs, 13px); font-weight: 400; }
.dm-note { margin: 0; padding: 8px 12px; color: var(--ink-dim, #6b6256); font-size: var(--t-xs, 13px); line-height: 1.4; max-width: 300px; }
.dm-sep { height: 0; margin: 4px 0; border-top: 1px solid var(--line, #e6e1d6); }

/* ------------------------------------------------------------- the workspace */
.re-body { display: block; }
.re-body.re-has-aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.re-aside {
  position: sticky; top: calc(var(--re-sticky-top, 0px) + var(--re-bar-h));
  max-height: calc(100vh - var(--re-sticky-top, 0px) - var(--re-bar-h)); overflow: auto;
}
.re-main { container-type: inline-size; min-width: 0; background: var(--desk, #f1ede3); }
/* The sheet width at each zoom, read by the page and the view slot's pages.
   100cqw is the main column's width: these are used only by its direct descendants that are
   not containers themselves. */
.re-main.re-z-fit { --re-w: min(100cqw - 48px, 30cm); }
.re-main.re-z-75 { --re-w: 6.375in; }
.re-main.re-z-100 { --re-w: 8.5in; }
.re-main.re-z-125 { --re-w: 10.625in; }
.re-main.re-z-150 { --re-w: 12.75in; }

/* The desk: grey, scrolls sideways inside the main column (never the page) when zoomed past it. */
.re-desk, .re-view { overflow-x: auto; padding: 18px 24px 40px; }
.re-desk[hidden], .re-view[hidden] { display: none; }
/* Tab indents on the page; the way out shows above it while it has focus (resume-editor.js).
   Its line is always kept (visibility, not display): showing or hiding it must move nothing,
   or a click from the page onto a bar button lands after the bar moved (measured 2026-10-06 on
   the job page, one mode: focus leaving the page shrank the desk 28px and the click fell on the
   section, not the button). */
.re-tab-hint { visibility: hidden; margin: 0 auto 8px; max-width: 8.5in; font-size: var(--t-xs, 13px); color: var(--ink-dim, #6b6256); }
.re-desk:focus-within > .re-tab-hint { visibility: visible; }

/* The page: the ONE contenteditable, as wide as a sheet, and the container its sheets size
   from. The grey gaps between sheets are the desk showing through. */
.re-page {
  container-type: inline-size; box-sizing: border-box; width: var(--re-w, 8.5in); margin: 0 auto;
  outline: none; white-space: pre-wrap; overflow-wrap: break-word; caret-color: var(--accent, #20536e);
}
.re-sheet {
  --in: calc(100cqw / 8.5); --pt: calc(var(--in) / 72);
  position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 8.5 / 11;
  padding: calc(0.7 * var(--in)) calc(0.75 * var(--in));
  background: #ffffff; color: #1a1a1a;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  font-family: var(--re-doc); font-size: calc(10 * var(--pt)); line-height: 1.3;
  cursor: text;
}
.re-sheet + .re-sheet { margin-top: 14px; }
.re-page:focus .re-sheet { box-shadow: 0 0 0 2px rgba(32, 83, 110, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); }
/* "1 of 2" at the foot of each sheet: generated content, never in the editable text. */
.re-sheet::after {
  content: attr(data-page) " of " attr(data-pages);
  position: absolute; right: calc(0.75 * var(--in)); bottom: calc(0.3 * var(--in));
  font: calc(8 * var(--pt)) var(--re-ui); color: var(--ink-dim, #6b6256); pointer-events: none; user-select: none;
}

/* The lines, sized as the PDF prints them (app.css .resume-preview, which the Changes view
   and Print or save as PDF both use), in pt at the sheet's scale, so a resume breaks onto the
   same pages in Editing, in Changes and on paper. The editor's lines are flat blocks where the
   PDF nests bullets in a list, so the list's own margins live on the lines around it (they
   collapse to the same gaps). No margin here may depend on where a line sits (no
   :first-child, no "after a bullet"): pagination measures each line once, anywhere, and a
   height that changed with its sheet could make the plan flip back and forth. */
.re-page strong { font-weight: 700; }
.re-page em { font-style: italic; }
.re-block { margin: 0; min-height: 1.3em; scroll-margin-top: calc(var(--re-sticky-top, 0px) + var(--re-bar-h, 48px) + 12px); }
.re-title { font-size: calc(24 * var(--pt)); font-weight: 700; line-height: 1.1; min-height: 1.1em; letter-spacing: -0.01em;
  color: #1f3d5c; margin: 0; }
.re-title + .re-para { font-size: calc(9.5 * var(--pt)); color: #333333; margin: calc(3 * var(--pt)) 0 calc(4 * var(--pt)); }
.re-section { font-size: calc(12 * var(--pt)); font-weight: 700; letter-spacing: 0.02em; color: #1f3d5c;
  margin: calc(11 * var(--pt)) 0 calc(4 * var(--pt)); padding-bottom: calc(2 * var(--pt));
  border-bottom: calc(0.75 * var(--pt)) solid #b9c4d0; }
.re-role { margin: calc(7 * var(--pt)) 0 calc(1 * var(--pt)); color: #1a1a1a; }
.re-role .re-company { font-weight: 700; color: #111111; font-size: calc(10.5 * var(--pt)); }
.re-role .re-role { color: #222222; }
.re-role .re-sep { color: #b3b3b3; }
.re-role .re-dates { color: #666666; font-size: calc(9.5 * var(--pt)); }
.re-para { margin: 0 0 calc(4 * var(--pt)); }
/* The tailored resume's read-only header (2026-10-07): the name and contact line every export
   prints from the profile (core/render.mjs IS.h1 and IS.contact), drawn at the top of the first
   sheet outside the editable text, with a quiet Edit in Profile link on the name's row. */
.re-header { margin: 0 0 calc(6 * var(--pt)); cursor: default; user-select: none; }
.re-hdr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.re-hdr-name { font-size: calc(22 * var(--pt)); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: #1f3d5c;
  margin: 0 0 calc(1 * var(--pt)); overflow-wrap: anywhere; }
.re-hdr-contact { font-size: calc(9.5 * var(--pt)); color: #333333; overflow-wrap: anywhere; }
.re-hdr-edit { flex: none; font: 12px var(--re-ui); color: var(--accent, #20536e); text-decoration: underline; cursor: pointer; }
.re-hdr-edit:focus-visible { outline: 2px solid var(--accent, #20536e); outline-offset: 2px; border-radius: 2px; }
@media print { .re-hdr-edit { display: none; } }
.re-join { margin-top: calc(-4 * var(--pt)); }
.re-summary { font-style: italic; color: #333333; margin-bottom: calc(2 * var(--pt)); }
.re-context { font-style: italic; font-size: calc(9.5 * var(--pt)); color: #4a4a4a; margin-bottom: calc(2 * var(--pt)); }
/* A name set in italic inside an italic line reads upright, as it prints. */
.re-summary em, .re-context em { font-style: normal; }
.re-bullet { display: list-item; list-style: disc outside; margin: 0 0 calc(1.5 * var(--pt)) calc(14 * var(--pt));
  padding-left: calc(2 * var(--pt)); line-height: 1.28; min-height: 1.28em; color: #333333; }

/* ------------------------------------------------------------- the view slot
   A product's own pages shown in the editor's place (the job page's redline, built by
   views/paper.js inside a .resume-preview.resume-paper container): the same width rule. Their
   insides size from that container (100cqw / 8.5), so the container takes the sheet width and
   gives up its own grey and padding; the main column's desk shows instead. */
.re-main .re-view .resume-paper {
  box-sizing: content-box; width: var(--re-w); max-width: none; margin: 0 auto; padding: 0;
  background: none; border-radius: 0;
}
.re-main .re-view .resume-paper .sheet + .sheet { margin-top: 14px; }
.re-main .re-view .resume-paper .sheet {
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

/* ------------------------------------------------------------- one-line mode */
.re-is-single .re-main { background: none; container-type: normal; }
.re-is-single .re-desk { padding: 0; overflow: visible; }
.re-is-single .re-page { width: auto; container-type: normal; }
.re-is-single .re-sheet { --pt: 1.333px; aspect-ratio: auto; padding: 6px 8px; box-shadow: none;
  border: 1px solid var(--line-strong, #cfc8b9); border-radius: var(--r-control, 8px); font-size: var(--t-sm, 15px); }
.re-is-single .re-sheet::after { content: none; }
.re-single .re-bullet { margin-left: 0; display: block; }
/* A dragged example over a bullet (the opt-in drop, 2026-10-19): a line above or below it where
   it would be added, or the whole bullet marked where it would swap. Classes only, no layout
   change (box-shadow, never border or margin). */
.re-block.re-drop-before { box-shadow: 0 -2px 0 0 var(--accent, #20536e); }
.re-block.re-drop-after { box-shadow: 0 2px 0 0 var(--accent, #20536e); }
.re-block.re-drop-on { background: var(--accent-soft, #e8eff2); box-shadow: 0 0 0 2px var(--accent, #20536e); border-radius: var(--r-control, 8px); }

/* ------------------------------------------------------------- the placeholder
   Before a job is tailored (hosted views/resume-placeholder.js, local resumePlaceholderHtml):
   the editor drawn but inert. The bar is greyed and takes no pointer, the sheet is one Letter
   page with skeleton lines and a sentence, nothing is editable. Phones get the sheet alone. */
.re-ph .re-bar { position: static; }
.re-ph .re-tools { opacity: 0.45; }
.re-ph .re-btn { cursor: default; pointer-events: none; }
.re-ph .re-sheet { display: flex; flex-direction: column; cursor: default; }
.re-ph .re-sheet::after { content: none; }
.re-ph-lines { display: flex; flex-direction: column; }
.re-ph-line { display: block; height: calc(7 * var(--pt)); margin: 0 0 calc(7 * var(--pt));
  border-radius: calc(2 * var(--pt)); background: var(--panel-2, #f1ede3); }
.re-ph-line.is-name { width: 40%; height: calc(16 * var(--pt)); background: var(--line, #e6e1d6); }
.re-ph-line.is-contact { width: 62%; margin-bottom: calc(16 * var(--pt)); }
.re-ph-line.is-head { width: 22%; height: calc(9 * var(--pt)); margin-top: calc(8 * var(--pt)); background: var(--line, #e6e1d6); }
.re-ph-line.is-full { width: 100%; }
.re-ph-line.is-long { width: 88%; }
.re-ph-line.is-mid { width: 72%; }
.re-ph-line.is-short { width: 54%; }
.re-ph-note { margin: calc(36 * var(--pt)) 0 0; padding: 0 calc(0.25 * var(--in)); text-align: center; font-family: var(--re-ui); }
.re-ph-text { margin: 0; color: var(--ink-dim, #6b6256); font-size: max(calc(13 * var(--pt)), 15px); line-height: 1.4; }
.re-ph-step { margin: 6px 0 0; color: var(--ink-dim, #6b6256); font-size: max(calc(11 * var(--pt)), 13px); }
.re-ph-step:empty { display: none; }
/* A tailor run (views/resume-placeholder.js RUNNING_LINES, 2026-10-21): the words and a slim bar
   that runs back and forth lead the sheet, and the resume's lines are typed in one after another
   down the page: each grows from its left edge (a scaleX transform), stays, and is typed again
   when the wave comes round, 6s for the 24 lines, so the page always reads as being written.
   Reduced motion: every line drawn and still, the bar full width and still. */
.re-ph.is-running .re-ph-note { margin: 0 0 calc(24 * var(--pt)); }
.re-ph-bar { position: relative; display: block; width: min(60%, 260px); height: 4px; margin: 10px auto 0; overflow: hidden;
  border-radius: 999px; background: var(--accent-soft, #e8eff2); }
.re-ph-bar-fill { position: absolute; top: 0; left: 0; width: 40%; height: 100%; border-radius: inherit;
  background: var(--accent, #20536e); transform: translateX(-100%); animation: re-ph-slide 1.4s ease-in-out infinite; }
@keyframes re-ph-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.re-ph-line.is-role { width: 66%; height: calc(8 * var(--pt)); margin-top: calc(6 * var(--pt)); background: var(--line, #e6e1d6); }
.re-ph-line.is-bullet { margin-left: calc(14 * var(--pt)); max-width: calc(100% - 14 * var(--pt)); }
.re-ph.is-running .re-ph-line { transform-origin: left center; transform: scaleX(0);
  animation: re-ph-type 6s linear infinite backwards; }
@keyframes re-ph-type { 0% { transform: scaleX(0); } 5% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
.re-ph.is-running .re-ph-line:nth-child(1) { animation-delay: 0.00s; }
.re-ph.is-running .re-ph-line:nth-child(2) { animation-delay: 0.25s; }
.re-ph.is-running .re-ph-line:nth-child(3) { animation-delay: 0.50s; }
.re-ph.is-running .re-ph-line:nth-child(4) { animation-delay: 0.75s; }
.re-ph.is-running .re-ph-line:nth-child(5) { animation-delay: 1.00s; }
.re-ph.is-running .re-ph-line:nth-child(6) { animation-delay: 1.25s; }
.re-ph.is-running .re-ph-line:nth-child(7) { animation-delay: 1.50s; }
.re-ph.is-running .re-ph-line:nth-child(8) { animation-delay: 1.75s; }
.re-ph.is-running .re-ph-line:nth-child(9) { animation-delay: 2.00s; }
.re-ph.is-running .re-ph-line:nth-child(10) { animation-delay: 2.25s; }
.re-ph.is-running .re-ph-line:nth-child(11) { animation-delay: 2.50s; }
.re-ph.is-running .re-ph-line:nth-child(12) { animation-delay: 2.75s; }
.re-ph.is-running .re-ph-line:nth-child(13) { animation-delay: 3.00s; }
.re-ph.is-running .re-ph-line:nth-child(14) { animation-delay: 3.25s; }
.re-ph.is-running .re-ph-line:nth-child(15) { animation-delay: 3.50s; }
.re-ph.is-running .re-ph-line:nth-child(16) { animation-delay: 3.75s; }
.re-ph.is-running .re-ph-line:nth-child(17) { animation-delay: 4.00s; }
.re-ph.is-running .re-ph-line:nth-child(18) { animation-delay: 4.25s; }
.re-ph.is-running .re-ph-line:nth-child(19) { animation-delay: 4.50s; }
.re-ph.is-running .re-ph-line:nth-child(20) { animation-delay: 4.75s; }
.re-ph.is-running .re-ph-line:nth-child(21) { animation-delay: 5.00s; }
.re-ph.is-running .re-ph-line:nth-child(22) { animation-delay: 5.25s; }
.re-ph.is-running .re-ph-line:nth-child(23) { animation-delay: 5.50s; }
.re-ph.is-running .re-ph-line:nth-child(24) { animation-delay: 5.75s; }
@media (prefers-reduced-motion: reduce) {
  .re-ph.is-running .re-ph-line { animation: none; transform: none; }
  .re-ph-bar-fill { width: 100%; transform: none; animation: none; }
}
@media (max-width: 767px) { .re-ph .re-bar { display: none; } }

/* ------------------------------------------------------------- the pages' status and actions */
.re-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.re-status { color: var(--ink-dim, #6b6256); font-size: var(--t-xs, 13px); white-space: nowrap; }
.re-status.is-dirty, .re-status.is-saving { color: var(--risk-ink, #8f5f07); }
.re-status.is-error { color: var(--danger-strong, #8f1e18); font-weight: 600; }
.re-error { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--danger, #b3261e);
  border-left-width: 5px; border-radius: var(--r-control, 8px); background: var(--danger-soft, #fdecea); color: var(--danger-strong, #8f1e18); }
.re-error[hidden] { display: none; }

@media (max-width: 640px) {
  /* On a phone the bar wraps to two or three rows; pinned, it would cover too much of the
     page (the hosted top bar unpins at this width for the same reason). The type never draws under 13px so it can still be read and edited. */
  .re-bar { position: static; padding: 4px 8px; }
  .re-bar-end { margin-left: 0; }
  .re-main.re-z-fit { --re-w: calc(100cqw - 16px); }
  .re-desk, .re-view { padding: 8px 8px 24px; }
  .re-sheet { --pt: max(calc(var(--in) / 72), 1.3px); }
  .re-aside { position: static; max-height: none; }
}
@media print {
  .re-bar, .re-aside { display: none; }
  .re-main, .re-desk { padding: 0; background: none; }
  .re-sheet { box-shadow: none; }
  .re-sheet::after { content: none; }
}

/* ================================================================ margin cards
   js/margin-cards.js: Docs-style cards beside the line they are about. Positions come only
   from classes (the CSP forbids style writes): rl-yk-<k> sets --mc-y0 to k*1000px, rl-y-<n>
   --mc-y1 to n*100px, rl-yo-<m> --mc-y2 to m*4px, and .mc-card sums them into top (0 to
   39996px). mc-hk-<k> plus mc-h-<n> (k*1000 + n*100px) is the layer's min height, so the
   margin column, and the section around it, is always as tall as its lowest card. */
.mc-layer { position: relative; box-sizing: border-box; min-height: calc(var(--mc-h1, 0px) + var(--mc-h2, 0px)); font-family: var(--re-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif); font-size: var(--t-xs, 13px); color: var(--ink, #211c16); }
.mc-top { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.mc-top:empty { display: none; }
.mc-card {
  position: absolute; left: 12px; width: calc(100% - 24px); box-sizing: border-box;
  top: calc(var(--mc-y0, 0px) + var(--mc-y1, 0px) + var(--mc-y2, 0px));
  padding: 12px 14px; background: var(--panel, #fffdf8); border: 1px solid var(--line, #e6e1d6); border-radius: var(--r-card, 12px);
  line-height: 1.45; transition: top var(--dur-base, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform var(--dur-base, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.mc-top > .mc-card { position: static; left: auto; width: auto; }
.mc-card.is-active {
  transform: translateX(-16px); z-index: 2;
  border-color: var(--accent, #20536e); box-shadow: 0 0 0 1px var(--accent, #20536e), var(--shadow-card, 0 1px 2px rgba(33, 28, 22, 0.06), 0 8px 24px rgba(33, 28, 22, 0.08));
}
.mc-top > .mc-card.is-active { transform: none; }
/* Collapsed cards (mountMargin collapse, the job page): every card but the selected one shows
   its head line only (kind and reason; a suggestion also keeps the words he asked for). The
   rest is hidden whole, never cut mid-line. Focus inside a card (each card is a tab stop), an
   open Edit box, a confirm form or an error opens it again, so nothing he is working in is
   ever hidden from him. */
.mc-collapse .mc-card { cursor: pointer; }
.mc-collapse .mc-card.is-active, .mc-collapse .mc-card:focus-within { cursor: auto; }
.mc-collapse .mc-card:focus-visible { outline: 2px solid var(--accent, #20536e); outline-offset: 2px; }
.mc-collapse .mc-card:not(.is-active):not(:focus-within):not(:has(.is-editing, .claim-confirm, [role="alert"])) > .rl-card:has(> .rl-card-head, > .rl-group-head) > :not(.rl-card-head):not(.rl-group-head):not(.rl-card-label) { display: none; }
.mc-collapse .mc-card:not(.is-active):not(:focus-within) > .rl-card > .rl-card-head { margin-bottom: 0; }
/* Entering and leaving (the review split, 2026-10-16). mc-enter: the cards of the first paint
   after the review opens fade in and rise 6px, one after another (mc-enter-<i>, 40ms apart, 4
   slots); later paints add no class, so nothing moves on Previous or Next. No keyframes:
   @starting-style gives the first frame. The delay is on opacity and transform only, so a card
   the first layout moves is already in place when it shows. is-leaving: a decided card fades
   and lifts 6px before the repaint (views/review-view.js leaveWait) and takes no clicks. Transform
   and opacity only; the active card keeps its 16px step out. */
.mc-card.mc-enter { transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1), top .15s ease; }
@starting-style {
  .mc-card.mc-enter { opacity: 0; transform: translateY(6px); }
  .mc-card.mc-enter.is-active { opacity: 0; transform: translate(-16px, 6px); }
  .mc-top > .mc-card.mc-enter.is-active { opacity: 0; transform: translateY(6px); }
}
.mc-card.mc-enter-0 { transition-delay: 0ms, 0ms, 0ms; }
.mc-card.mc-enter-1 { transition-delay: 40ms, 40ms, 0ms; }
.mc-card.mc-enter-2 { transition-delay: 80ms, 80ms, 0ms; }
.mc-card.mc-enter-3 { transition-delay: 120ms, 120ms, 0ms; }
.mc-card.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; }
.mc-card.is-leaving.is-active { transform: translate(-16px, -6px); }
.mc-top > .mc-card.is-leaving.is-active { transform: translateY(-6px); }
/* Reduced motion: no movement and no stagger (opacity only; the hosted app's app-flow.css turns
   every transition off as well). */
@media (prefers-reduced-motion: reduce) {
  .mc-card { transition: none; }
  .mc-card.mc-enter { transition-delay: 0ms; }
  .mc-card.mc-enter, .mc-card.is-leaving { transition-property: opacity; }
  @starting-style {
    .mc-card.mc-enter { transform: none; }
    .mc-card.mc-enter.is-active { transform: translateX(-16px); }
    .mc-top > .mc-card.mc-enter.is-active { transform: none; }
  }
  .mc-card.is-leaving { transform: none; }
  .mc-card.is-leaving.is-active { transform: translateX(-16px); }
  .mc-top > .mc-card.is-leaving.is-active { transform: none; }
}
.rl-yk-0 { --mc-y0: 0px; }
.rl-yk-1 { --mc-y0: 1000px; }
.rl-yk-2 { --mc-y0: 2000px; }
.rl-yk-3 { --mc-y0: 3000px; }
.rl-yk-4 { --mc-y0: 4000px; }
.rl-yk-5 { --mc-y0: 5000px; }
.rl-yk-6 { --mc-y0: 6000px; }
.rl-yk-7 { --mc-y0: 7000px; }
.rl-yk-8 { --mc-y0: 8000px; }
.rl-yk-9 { --mc-y0: 9000px; }
.rl-yk-10 { --mc-y0: 10000px; }
.rl-yk-11 { --mc-y0: 11000px; }
.rl-yk-12 { --mc-y0: 12000px; }
.rl-yk-13 { --mc-y0: 13000px; }
.rl-yk-14 { --mc-y0: 14000px; }
.rl-yk-15 { --mc-y0: 15000px; }
.rl-yk-16 { --mc-y0: 16000px; }
.rl-yk-17 { --mc-y0: 17000px; }
.rl-yk-18 { --mc-y0: 18000px; }
.rl-yk-19 { --mc-y0: 19000px; }
.rl-yk-20 { --mc-y0: 20000px; }
.rl-yk-21 { --mc-y0: 21000px; }
.rl-yk-22 { --mc-y0: 22000px; }
.rl-yk-23 { --mc-y0: 23000px; }
.rl-yk-24 { --mc-y0: 24000px; }
.rl-yk-25 { --mc-y0: 25000px; }
.rl-yk-26 { --mc-y0: 26000px; }
.rl-yk-27 { --mc-y0: 27000px; }
.rl-yk-28 { --mc-y0: 28000px; }
.rl-yk-29 { --mc-y0: 29000px; }
.rl-yk-30 { --mc-y0: 30000px; }
.rl-yk-31 { --mc-y0: 31000px; }
.rl-yk-32 { --mc-y0: 32000px; }
.rl-yk-33 { --mc-y0: 33000px; }
.rl-yk-34 { --mc-y0: 34000px; }
.rl-yk-35 { --mc-y0: 35000px; }
.rl-yk-36 { --mc-y0: 36000px; }
.rl-yk-37 { --mc-y0: 37000px; }
.rl-yk-38 { --mc-y0: 38000px; }
.rl-yk-39 { --mc-y0: 39000px; }
.rl-y-0 { --mc-y1: 0px; }
.rl-y-1 { --mc-y1: 100px; }
.rl-y-2 { --mc-y1: 200px; }
.rl-y-3 { --mc-y1: 300px; }
.rl-y-4 { --mc-y1: 400px; }
.rl-y-5 { --mc-y1: 500px; }
.rl-y-6 { --mc-y1: 600px; }
.rl-y-7 { --mc-y1: 700px; }
.rl-y-8 { --mc-y1: 800px; }
.rl-y-9 { --mc-y1: 900px; }
.rl-yo-0 { --mc-y2: 0px; }
.rl-yo-1 { --mc-y2: 4px; }
.rl-yo-2 { --mc-y2: 8px; }
.rl-yo-3 { --mc-y2: 12px; }
.rl-yo-4 { --mc-y2: 16px; }
.rl-yo-5 { --mc-y2: 20px; }
.rl-yo-6 { --mc-y2: 24px; }
.rl-yo-7 { --mc-y2: 28px; }
.rl-yo-8 { --mc-y2: 32px; }
.rl-yo-9 { --mc-y2: 36px; }
.rl-yo-10 { --mc-y2: 40px; }
.rl-yo-11 { --mc-y2: 44px; }
.rl-yo-12 { --mc-y2: 48px; }
.rl-yo-13 { --mc-y2: 52px; }
.rl-yo-14 { --mc-y2: 56px; }
.rl-yo-15 { --mc-y2: 60px; }
.rl-yo-16 { --mc-y2: 64px; }
.rl-yo-17 { --mc-y2: 68px; }
.rl-yo-18 { --mc-y2: 72px; }
.rl-yo-19 { --mc-y2: 76px; }
.rl-yo-20 { --mc-y2: 80px; }
.rl-yo-21 { --mc-y2: 84px; }
.rl-yo-22 { --mc-y2: 88px; }
.rl-yo-23 { --mc-y2: 92px; }
.rl-yo-24 { --mc-y2: 96px; }
.mc-hk-0 { --mc-h1: 0px; }
.mc-hk-1 { --mc-h1: 1000px; }
.mc-hk-2 { --mc-h1: 2000px; }
.mc-hk-3 { --mc-h1: 3000px; }
.mc-hk-4 { --mc-h1: 4000px; }
.mc-hk-5 { --mc-h1: 5000px; }
.mc-hk-6 { --mc-h1: 6000px; }
.mc-hk-7 { --mc-h1: 7000px; }
.mc-hk-8 { --mc-h1: 8000px; }
.mc-hk-9 { --mc-h1: 9000px; }
.mc-hk-10 { --mc-h1: 10000px; }
.mc-hk-11 { --mc-h1: 11000px; }
.mc-hk-12 { --mc-h1: 12000px; }
.mc-hk-13 { --mc-h1: 13000px; }
.mc-hk-14 { --mc-h1: 14000px; }
.mc-hk-15 { --mc-h1: 15000px; }
.mc-hk-16 { --mc-h1: 16000px; }
.mc-hk-17 { --mc-h1: 17000px; }
.mc-hk-18 { --mc-h1: 18000px; }
.mc-hk-19 { --mc-h1: 19000px; }
.mc-hk-20 { --mc-h1: 20000px; }
.mc-hk-21 { --mc-h1: 21000px; }
.mc-hk-22 { --mc-h1: 22000px; }
.mc-hk-23 { --mc-h1: 23000px; }
.mc-hk-24 { --mc-h1: 24000px; }
.mc-hk-25 { --mc-h1: 25000px; }
.mc-hk-26 { --mc-h1: 26000px; }
.mc-hk-27 { --mc-h1: 27000px; }
.mc-hk-28 { --mc-h1: 28000px; }
.mc-hk-29 { --mc-h1: 29000px; }
.mc-hk-30 { --mc-h1: 30000px; }
.mc-hk-31 { --mc-h1: 31000px; }
.mc-hk-32 { --mc-h1: 32000px; }
.mc-hk-33 { --mc-h1: 33000px; }
.mc-hk-34 { --mc-h1: 34000px; }
.mc-hk-35 { --mc-h1: 35000px; }
.mc-hk-36 { --mc-h1: 36000px; }
.mc-hk-37 { --mc-h1: 37000px; }
.mc-hk-38 { --mc-h1: 38000px; }
.mc-hk-39 { --mc-h1: 39000px; }
.mc-h-0 { --mc-h2: 0px; }
.mc-h-1 { --mc-h2: 100px; }
.mc-h-2 { --mc-h2: 200px; }
.mc-h-3 { --mc-h2: 300px; }
.mc-h-4 { --mc-h2: 400px; }
.mc-h-5 { --mc-h2: 500px; }
.mc-h-6 { --mc-h2: 600px; }
.mc-h-7 { --mc-h2: 700px; }
.mc-h-8 { --mc-h2: 800px; }
.mc-h-9 { --mc-h2: 900px; }
/* ================================================================ end margin cards */

/* ---- Tailoring again (2026-10-20, views/job-resume.js resumeSection, owner: "if you rerun, the
   resume section should have a loading animation or something"). While a run is going on a job
   that already has a resume, an indeterminate bar runs across the top of the section (a transform
   only), one line says what is happening, and the resume below is dimmed; the frame is inert in
   the markup, so nothing can be typed or pressed and the editor does not save. Reduced motion: the
   bar stands still, full width. */
#resume .rerun-progress { position: relative; height: 4px; margin: 0 0 10px; overflow: hidden; border-radius: 999px;
  background: var(--accent-soft, #e8eff2); }
#resume .rerun-progress-bar { position: absolute; top: 0; left: 0; width: 40%; height: 100%; border-radius: inherit;
  background: var(--accent, #20536e); transform: translateX(-100%); animation: aa-rerun-slide 1.4s ease-in-out infinite; }
@keyframes aa-rerun-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
#resume .rerun-line { margin: 0 0 12px; font-size: var(--t-sm, 15px); color: var(--ink-dim, #6b6256); }
#resume .review.is-rerunning { opacity: 0.45; cursor: progress; user-select: none; }
@media (prefers-reduced-motion: reduce) {
  #resume .rerun-progress-bar { width: 100%; transform: none; animation: none; }
}