/* Write85 - Carbon Neon (Light / Pine)
   ----------------------------------------------------------------------------
   A light "engineered console" theme: clean white surfaces, a faint blueprint
   grid, tight corners, monospace utility type for labels/meta, and a single
   deep pine-green accent. Drop-in replacement for the previous Soft Depth CSS;
   every selector name is preserved so no page markup changes are required.

   The whole palette is driven by the :root tokens below. Because both this file
   and the inline nav styles in app.php read these variables, recoloring here
   cascades to the dropdown navigation automatically.
   ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* Core ink + surfaces */
  --ink:#10141a;
  --ink-soft:#33393f;
  --paper:#f3f5f3;       /* app background (with grid overlay) */
  --paper-2:#ffffff;     /* cards, panels, raised surfaces */
  --paper-3:#f5f8f4;     /* insets, hovers, wells */
  --line:#c4ccc2;        /* primary borders - darker so sections read clearly */
  --line-2:#d2d9cf;      /* hairline / inner borders */

  /* Pine accent system */
  --accent:#1f7a4d;
  --accent-hover:#1a6b43;
  --accent-soft:rgba(31,122,77,.10);
  --accent-tint:rgba(31,122,77,.09);
  --accent-line:rgba(31,122,77,.30);
  --accent-glow:rgba(31,122,77,.16);

  --muted:#6a7177;       /* darker so placeholders/meta stay legible */
  --ok:#1f7d4f;
  --err:#b23b3b;
  --warn:#b35a1f;        /* training meter at 90%+ (approaching the ceiling) */

  /* Blueprint grid overlay color */
  --grid:rgba(30,50,25,.045);

  /* Shadows - lighter and cooler than the old warm set */
  --shadow-sm:0 1px 2px rgba(20,40,25,.05);
  --shadow:0 4px 18px rgba(20,40,25,.06);
  --shadow-pop:0 10px 34px rgba(20,40,25,.13);

  /* Tighter, more engineered radii */
  --radius:10px;
  --radius-sm:7px;

  /* Type roles */
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Faint blueprint grid - reads as texture, not noise */
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 38px,var(--grid) 38px,var(--grid) 39px),
    repeating-linear-gradient(90deg,transparent,transparent 38px,var(--grid) 38px,var(--grid) 39px);
}
h1,h2,h3{font-family:var(--sans);font-weight:800;letter-spacing:-.02em}
h2{font-size:1.6rem;margin:0 0 .25rem}
h3{font-size:1.12rem;margin:0 0 .5rem;font-weight:700}
.hint{color:var(--muted);font-size:.9rem;line-height:1.6;margin:.25rem 0 1rem}

/* ---- Login ---- */
.login-body{display:flex;align-items:center;justify-content:center;padding:2rem;min-height:100vh}
.login-card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-pop);padding:2.5rem;width:100%;max-width:390px;position:relative;overflow:hidden
}
/* Pine top-edge bar - the card's high-tech signature */
.login-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-line) 70%,transparent)
}
.brand{text-align:center;margin-bottom:1.5rem}
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:13px;
  background:var(--accent);color:#fff;font-weight:800;
  font-size:1.15rem;letter-spacing:-.01em;
  box-shadow:0 6px 18px var(--accent-glow)
}
.brand-mark.sm{width:34px;height:34px;font-size:.85rem;border-radius:9px}
.brand h1{margin:.6rem 0 0;font-size:1.7rem;font-weight:800}
.brand h1.wordmark{font-size:1.9rem}
.tagline{color:var(--muted);margin:.25rem 0 0;font-size:.78rem;font-family:var(--mono);
  letter-spacing:.14em;text-transform:uppercase}
form label{display:block;margin:.9rem 0;font-size:.72rem;color:var(--ink-soft);
  font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
input,textarea,select.oneline{
  width:100%;font:inherit;color:var(--ink);background:var(--paper-3);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .85rem;margin-top:.3rem;
  transition:border-color .15s, box-shadow .15s
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus,select.oneline:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
select.oneline{width:auto;cursor:pointer}
.oneline{margin:.5rem 0}
.oneline-label{display:block;font-size:.92rem;color:var(--ink-soft)}
.oneline-label .oneline{margin-top:.25rem;width:100%}
.oneline-label textarea{margin-top:.25rem;width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-2);font-family:inherit;font-size:.95rem;resize:vertical}
textarea{resize:vertical}

button{cursor:pointer;font:inherit;font-family:var(--mono);letter-spacing:.01em;border:none;border-radius:var(--radius-sm);padding:.5rem .95rem;font-size:.82rem;font-weight:600;transition:background .15s, border-color .15s, transform .12s, box-shadow .15s}
.btn-primary{background:var(--accent);color:#fff;width:auto;margin-top:.6rem}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary{background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--line);margin-top:.6rem}
.btn-secondary:hover{background:var(--paper-3);color:var(--ink);border-color:var(--accent-line)}
button:disabled{opacity:.5;cursor:wait}

.alert{padding:.6rem .85rem;border-radius:var(--radius-sm);font-size:.9rem;margin-bottom:1rem}
.alert.error{background:#f7e2dc;color:var(--err);border:1px solid #e6b8a9}

/* ---- App chrome ---- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:.85rem 1.5rem;background:var(--paper-2);border-bottom:1px solid var(--line)
}
.topbar-left{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.1rem;letter-spacing:-.01em}
.topbar-right{display:flex;align-items:center;gap:1rem;font-size:.82rem;font-family:var(--mono)}
.who{color:var(--muted)}
.link{color:var(--accent);text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}

/* Nav (segmented bar + dropdown groups share these tokens) */
.tabs{
  display:flex;gap:.25rem;align-items:center;flex-wrap:wrap;
  max-width:1100px;margin:1.1rem auto 0;padding:.4rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)
}
.tab{
  background:none;border:none;border-radius:7px;
  padding:.55rem .85rem;color:var(--ink-soft);font-weight:600;font-size:.82rem;
  font-family:var(--mono);letter-spacing:.01em;
  transition:background .15s,color .15s
}
.tab:hover{color:var(--ink);background:var(--paper-3)}
.tab.active{color:#fff;background:var(--accent)}

.wrap{max-width:1100px;margin:0 auto;padding:1.8rem 1.5rem 4rem}
.panel{display:none}
.panel.active{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Keep generated written output at a comfortable reading measure */
.output .body{max-width:72ch}
.output .body.md{max-width:72ch}

.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.2rem;box-shadow:var(--shadow);position:relative}
/* Pine left-edge bar - the card signature carried from the mockup */
.card::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),transparent)
}
.check{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;color:var(--ink-soft);margin:.6rem 0;cursor:pointer}
.check input{margin:0;accent-color:var(--accent);width:18px;height:18px}
.research-box{display:flex;flex-direction:column;gap:.2rem;margin:.5rem 0}
.filebtn{display:inline-block;background:var(--paper-3);border:1px dashed var(--line);border-radius:8px;padding:.5rem .85rem;cursor:pointer;font-size:.82rem;font-family:var(--mono);letter-spacing:.02em;width:max-content;margin:.4rem 0;transition:border-color .15s,color .15s}
.filebtn:hover{border-color:var(--accent);color:var(--accent)}
.file-note{font-size:.8rem;color:var(--muted)}

.questions{white-space:pre-wrap;background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem;margin:.8rem 0;font-size:.95rem}
.questions:empty{display:none}

.output{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;margin-top:1rem;min-height:1px;font-size:.97rem;box-shadow:var(--shadow)}
.output:empty{display:none}
.output.small{font-size:.88rem}
.output .copybar{display:flex;justify-content:flex-end;gap:.4rem;margin-bottom:.6rem}
.output .copybar button{background:var(--paper-3);color:var(--ink-soft);border:1px solid var(--line);padding:.4rem .8rem;font-size:.76rem;font-weight:600;font-family:var(--mono);letter-spacing:.02em;border-radius:6px}
.output .copybar button:hover{border-color:var(--accent);color:var(--accent)}
.output .body{white-space:pre-wrap}
.output .body.md{white-space:normal}

.tlist{display:flex;flex-direction:column;gap:.5rem}
.titem{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.75rem .95rem;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--paper-3)}
.titem .meta{font-size:.76rem;color:var(--muted);font-family:var(--mono)}
.titem.off{opacity:.5}
.titem .acts{display:flex;gap:.4rem}
.titem .acts button{padding:.35rem .7rem;font-size:.76rem;font-family:var(--mono)}
/* Training v2 (Ingestion Stage 4a): document card, intakes, pills. */
.doc-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.doc-actions button[disabled]{opacity:.55;cursor:not-allowed}
.doc-progress{margin:.4rem 0 .2rem;display:flex;align-items:center;gap:.4rem}
.doc-viewer{width:100%;margin-top:.6rem;padding:.7rem;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--paper-3)}
.doc-viewer pre{margin:0;max-height:420px;overflow:auto;white-space:pre-wrap;font-size:.8rem;line-height:1.45}
.doc-viewer textarea{width:100%;min-height:360px;font-family:var(--mono);font-size:.8rem;line-height:1.45}
.doc-viewer .acts{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.intake-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.4rem 0}
.intake-row input.oneline{flex:1 1 260px;max-width:420px}
.intake-note{margin:.4rem 0 0}
.pill.default{background:var(--accent-tint);color:var(--accent);border-color:var(--accent-line)}
.pill.cls{text-transform:none;letter-spacing:.02em}
/* Training v2, Stage 4b: questions card and websites list. */
.qa-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.qa-track{height:8px;border-radius:6px;background:var(--paper-3);overflow:hidden;margin:.3rem 0 .8rem;border:1px solid var(--line-2)}
.qa-fill{height:100%;background:var(--muted);transition:width .25s ease}
.qa-q{font-size:1rem;line-height:1.5;margin:.2rem 0 .5rem}
.qa-why{margin:.2rem 0 .6rem}
.qa-why summary{cursor:pointer;font-size:.82rem;color:var(--muted)}
.qa-why p{margin:.35rem 0 0;font-size:.86rem}
.qa-facts-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:.4rem 0 .2rem}
.qa-facts div{font-size:.84rem;line-height:1.45;padding:.1rem 0;color:var(--ink)}
.qa-answer{width:100%;margin-top:.5rem}
.qa-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem;align-items:center}
.qa-line{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.qa-skipped .titem{align-items:flex-start}
.domains-list{margin:.2rem 0 .4rem}
.domains-list .titem{padding:.45rem .8rem}
.domains-list .domain{font-family:var(--mono);font-size:.84rem;word-break:break-all}
.pill{font-size:.66rem;padding:.16rem .55rem;border-radius:4px;background:var(--paper-3);color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono);border:1px solid var(--line)}
.pill.on{background:var(--accent-tint);color:var(--accent);border-color:var(--accent-line)}

.useradd{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem}
.useradd .oneline{margin:0;width:auto;flex:1;min-width:140px}

.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:.4rem}
.spin.spin-dark{border:2px solid var(--accent-line);border-top-color:var(--accent)}
@keyframes sp{to{transform:rotate(360deg)}}
.msg-ok{color:var(--ok)}
.msg-err{color:var(--err)}

/* ---- Write85 wordmark + edition label ---- */
.wordmark{font-weight:800;font-size:1.3rem;letter-spacing:-.03em;color:var(--ink);line-height:1}
.wordmark-num{color:var(--accent)}
.edition{
  margin-left:.7rem;padding-left:.7rem;border-left:1px solid var(--line);
  color:var(--muted);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--mono)
}
@media (max-width:560px){
  .edition{display:none}
}

/* ---- Responsive ---- */
@media (max-width:1140px){
  .wrap,.tabs{max-width:none;margin-left:1rem;margin-right:1rem}
}
@media (max-width:700px){
  .topbar{padding:.7rem 1rem;flex-wrap:wrap;gap:.4rem}
  .tabs{margin:.8rem 1rem 0;gap:.15rem;padding:.35rem}
  .tab{padding:.5rem .7rem;font-size:.8rem}
  .menu-trigger{padding:.5rem .75rem;font-size:.8rem}
  .wrap{padding:1.2rem 1rem 3rem}
  h2{font-size:1.4rem}
  .card{padding:1.15rem}
  .chat-msg{max-width:90%}
  .output .body,.output .body.md{max-width:100%}
  /* Clarifying question cards on phones (2026-09-25): full-width container
     and cards, and the bottom row stacks: the Use link on one line, the
     remember checkbox label on the next, wrapping its text as needed. */
  .questions{padding:.75rem}
  .qcards,.qcard{width:100%;max-width:100%;min-width:0}
  .qcard-answer{width:100%;max-width:100%;min-width:0}
  .qcard-row{flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:.4rem .6rem}
  form .qcard .qcard-remember,.qcard .qcard-remember{flex:1 1 100%;margin:0;white-space:normal;align-items:flex-start;line-height:1.35}
  form .qcard .qcard-remember input,.qcard .qcard-remember input{margin-top:.15rem}
}
@media (max-width:420px){
  .topbar-right{font-size:.78rem;gap:.6rem}
  .wordmark{font-size:1.15rem}
}

/* Respect reduced-motion preferences - but keep the loading spinner spinning,
   since it's functional progress feedback, not decorative motion. */
@media (prefers-reduced-motion:reduce){
  *:not(.spin){animation-duration:.001ms!important;transition-duration:.001ms!important}
  .spin{animation:sp .7s linear infinite!important}
}

/* Clarifying-questions button always sits on its own line */
button.askq{display:block;margin-top:.6rem}

/* Sales Email deliverability/spam check panel */
.spam-check{margin-top:1rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-2)}
.spam-check .sc-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;font-size:.98rem}
.spam-check .sc-verdict{display:inline-block;padding:.15rem .6rem;border-radius:4px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono)}
.spam-check .sc-green{background:var(--accent-tint);color:var(--accent)}
.spam-check .sc-yellow{background:#fbecca;color:#7a5818}
.spam-check .sc-red{background:#f4d3cc;color:#7a2419}
.spam-check .sc-list{margin:.4rem 0 .8rem 0;padding:0;list-style:none}
.spam-check .sc-list li{padding:.3rem 0;font-size:.92rem;line-height:1.45;color:var(--ink)}
.spam-check .sc-list li.sc-high{color:#7a2419}
.spam-check .sc-list li.sc-med{color:#6e4f12}
.spam-check .sc-clean{font-size:.92rem;color:var(--ink-soft);margin:.4rem 0 .8rem 0}
.spam-check .sc-actions{margin-top:.4rem}
.spam-check .sc-note{font-size:.85rem;margin-top:.55rem;color:var(--ink-soft)}
/* ---- Image direction chips (v10) ---- */
.img-chip {
  display: inline-block;
  margin: .15rem .25rem .15rem 0;
  padding: .28rem .65rem;
  font-family: var(--mono, monospace);
  font-size: .68rem;
  border: 1px solid var(--line, #d2d9cf);
  border-radius: 999px;
  background: var(--paper-2, #fffdf8);
  color: var(--ink, #222);
  cursor: pointer;
}
.img-chip:hover { border-color: var(--accent, #1f7a4d); }
.img-chip.chip-on {
  background: var(--accent, #1f7a4d);
  border-color: var(--accent, #1f7a4d);
  color: #fff;
}

/* Training guide modal (first-run popups on the Training tab) */
.tip-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: flex-start; justify-content: center;
  padding: 4vh 1rem; overflow-y: auto;
  background: rgba(16, 20, 26, .45);
}
.tip-overlay.show { display: flex; }
.tip-card {
  position: relative; width: 100%; max-width: 640px; max-height: 88vh;
  margin: auto 0; overflow-y: auto;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 1.4rem 1.5rem 1.1rem;
}
.tip-card .tip-title {
  margin: 0 2rem .95rem 0;
  color: var(--accent); font-size: 1.15rem; font-weight: 700;
}
.tip-body { font-size: .95rem; line-height: 1.55; }
.tip-body h4 {
  margin: 1.1rem 0 .35rem;
  color: var(--accent); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.tip-body p { margin: .5rem 0; line-height: 1.55; color: var(--ink-soft); }
/* Default guidance delete dialog (Training v2, Stage 4d) reuses the tip modal. */
.gd-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.gd-actions .gd-delete { color: var(--err); border-color: var(--err); }
.gd-restore-line { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.tip-body ul { margin: .4rem 0 .6rem 1.2rem; padding: 0; }
.tip-body li { margin: .25rem 0; }
.tip-body li::marker { color: var(--accent); }
.tip-body strong { color: var(--ink); font-weight: 600; }
.tip-close {
  position: absolute; top: .55rem; right: .6rem; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: none; padding: 0;
  color: var(--muted); font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: color .15s, background .15s;
}
.tip-close:hover { color: var(--accent); background: var(--paper-3); }
.tip-dontshow {
  display: inline-block; margin: .9rem 0 0; padding: .4rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font-size: .85rem;
  text-decoration: none; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tip-dontshow:hover { color: var(--accent); border-color: var(--accent); }
/* The ? that opens a guide: same visual language as the .help-tip marker. */
.tip-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; margin-left: .45rem;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper-2); color: var(--ink);
  font-size: .72rem; font-weight: 700; line-height: 1;
  font-family: var(--sans); cursor: pointer; vertical-align: middle;
}
.tip-q:hover { border-color: var(--accent); color: var(--accent); }
details.acc > summary .tip-q { margin-left: auto; flex: 0 0 auto; }

/* ---- Training meter (sticky, always visible while adding training) ----
   Sits first in the Training panel and is excluded from the accordion, so the
   word count cannot be collapsed out of view. There is no fixed site header,
   so top:0 is the correct offset. */
.card.meter-sticky {
  position: sticky; top: 0; z-index: 20;
  padding: 1.1rem 1.5rem;
}
.card.meter-sticky .hint { margin-bottom: .7rem; }
/* State tinting on the whole card, so a problem is visible at a glance. */
.card.meter-sticky.meter-warn  { border-color: var(--warn); }
.card.meter-sticky.meter-over  { border-color: var(--err); }
.card.meter-sticky.meter-over::before { background: var(--err); }
.card.meter-sticky.meter-warn::before { background: var(--warn); }

.tm-head { font-weight: 700; margin-bottom: .35rem; }
.tm-track {
  height: 10px; border-radius: 6px; background: var(--paper-3);
  overflow: hidden; margin: .25rem 0 .6rem; border: 1px solid var(--line-2);
}
.tm-fill { height: 100%; background: var(--accent); transition: width .25s ease; }
.meter-warn .tm-fill { background: var(--warn); }
.meter-over .tm-fill { background: var(--err); }
.tm-msg { font-weight: 600; margin-bottom: .5rem; font-size: .84rem; line-height: 1.5; }
.meter-warn .tm-msg { color: var(--warn); }
.meter-over .tm-msg { color: var(--err); }
/* The scroll-to-files link inside the over-limit message. */
.tm-jump {
  color: inherit; font-weight: 700; text-decoration: underline;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit;
}
.tm-breakdown { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }

/* ---- Per-file upload progress ---- */
.up-prog { margin-top: .7rem; }
.up-row { margin-bottom: .5rem; }
.up-name {
  font-size: .78rem; font-family: var(--mono); color: var(--muted);
  display: flex; justify-content: space-between; gap: .8rem;
  margin-bottom: .25rem; word-break: break-all;
}
.up-track {
  height: 6px; border-radius: 4px; background: var(--paper-3);
  overflow: hidden; border: 1px solid var(--line-2);
}
.up-fill { height: 100%; background: var(--accent); transition: width .2s linear; }
.up-row.done .up-fill { background: var(--ok); }
.up-row.fail .up-fill { background: var(--err); }
.up-row.fail .up-name { color: var(--err); }

/* Placeholder markers in rendered output (2026-09-07). CONFIRM is the
   stronger yellow: a fact in training that is not confirmed. ADD and NEEDED
   share the lighter yellow: something the writer must supply. */
mark.w85-mark-confirm { background: #ffe680; }
mark.w85-mark-add { background: #fff3a3; }

/* ---- Training v2 guided flow (Ingestion Stage 4f, design 17.12) ---- */
#train-pen { display: none; }
.stepper { list-style: none; display: flex; gap: .8rem; padding: 0; margin: 0 0 1rem; flex-wrap: wrap; }
.stepper li { flex: 1 1 180px; padding: .6rem .8rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--paper-3); font-size: .9rem; color: var(--muted); }
.stepper li .step-num { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.stepper li.current { color: var(--ink); font-weight: 700; border-color: var(--accent); }
.stepper li.done { color: var(--accent); cursor: pointer; }
.stepper li.done .step-num::before { content: "\2713  "; }
.stepper li.later { opacity: .55; }
.step-panel { margin-top: .4rem; }
.intake-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.intake-grid > .card { margin: 0; }
@media (max-width: 900px) { .intake-grid { grid-template-columns: 1fr; } }
.tally { font-weight: 700; margin: .9rem 0 .2rem; color: var(--ink); }
.step-panel .doc-actions { align-items: center; }
.step-more { margin-top: 1rem; }
.step-more summary { cursor: pointer; font-weight: 600; }
.review-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } }
.review-doc .doc-viewer pre { max-height: 60vh; }
.review-actions { margin-top: 1rem; align-items: center; }
.review-actions .hint { flex: 1 1 260px; margin: 0; }
.doc-meter { font-size: .86rem; margin: 0 0 .5rem; color: var(--muted); }
.doc-meter.over { color: var(--warn); font-weight: 700; }
.more-card { padding: 0; }
.more-card > summary { cursor: pointer; padding: .9rem 1rem; display: flex; align-items: center; gap: .5rem; font-weight: 700; list-style: none; }
.more-card > summary::-webkit-details-marker { display: none; }
.more-card[open] > summary .acc-caret { transform: rotate(90deg); }
.more-body { padding: 0 1rem 1rem; }
.sub-card { border-top: 1px solid var(--line-2); padding: .6rem 0; }
.sub-card > summary { cursor: pointer; font-weight: 600; }
.sub-card[open] > summary { margin-bottom: .5rem; }
.t-change { font-size: .76rem; font-family: var(--mono); padding: .3rem .4rem; border: 1px solid var(--line-2); border-radius: 6px; background: var(--paper-2); color: var(--ink); }

/* ---- Stage 4g: folded reader, Show sources, compact add cards ---- */
.doc-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; align-items: center; }
.doc-tools .doc-src { margin: 0; font-size: .8rem; }
.doc-viewer pre.folded { max-height: 32em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent); mask-image: linear-gradient(to bottom, #000 85%, transparent); }
.doc-unfold { display: inline-block; margin: .4rem 0 .2rem; font-size: .86rem; font-weight: 600; }
.intake.compact { padding: .6rem .95rem; }
.intake.compact:not(.open) > :not(.compact-head) { display: none; }
.intake.compact.open > .compact-head { margin-bottom: .6rem; }
.compact-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.compact-head .compact-title { font-weight: 700; }
.compact-head .compact-status { flex: 1 1 auto; }
.compact-head .compact-toggle { padding: .35rem .7rem; font-size: .76rem; font-family: var(--mono); }

/* ---- Scheduled update band, amber Update now, toast (2026-09-09) ---- */
.doc-band { background: #fff4d6; color: var(--ink); border: 1px solid #e6c46a; border-radius: var(--radius-sm); padding: .6rem .8rem; margin: 0 0 .7rem; font-size: .9rem; line-height: 1.45; }
.btn-amber, .btn-secondary.btn-amber { background: #f5c451; color: var(--ink); border-color: #d9a73a; font-weight: 700; }
.btn-amber:hover, .btn-secondary.btn-amber:hover { background: #f0b52e; color: var(--ink); }
.w85-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 300; background: var(--ink); color: #fff; padding: .6rem .9rem; border-radius: var(--radius-sm); font-size: .88rem; box-shadow: var(--shadow-pop); opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.w85-toast.show { opacity: 1; transform: translateY(0); }
/* Clarifying question cards (2026-09-13): one card per question on every writing panel. */
/* Phone fix (2026-09-25): the container, cards and answer box carry explicit
   width 100% plus min-width 0 so a long nowrap child can never widen a card
   past the panel; the bottom row wraps and the remember label wraps its text. */
.qcards { display: flex; flex-direction: column; gap: .55rem; margin: .4rem 0 .6rem; width: 100%; max-width: 100%; min-width: 0; }
.qcard { border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--paper-3); padding: .6rem .75rem; width: 100%; max-width: 100%; min-width: 0; }
.qcard-head { display: flex; align-items: flex-start; gap: .55rem; }
.qcard-num { flex: 0 0 auto; font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; margin-top: .1rem; }
.qcard-q { flex: 1 1 auto; font-weight: 600; line-height: 1.4; }
.qcard-answer { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin-top: .45rem; }
.qcard-why { margin: .3rem 0 0; font-size: .8rem; font-style: italic; color: var(--muted); line-height: 1.4; }
/* Two-column row under the answer box (2026-09-13): "Use suggested answer" on the
   left, the remember checkbox on the right. The selectors carry form and .qcard
   so they outrank the global "form label" block rule at the top of this file. */
.qcard-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .35rem .6rem; margin-top: .35rem; min-width: 0; }
.qcard .qcard-use { flex: 0 0 auto; background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: .8rem; color: var(--accent); text-decoration: underline; cursor: pointer; }
.qcard .qcard-use:hover { text-decoration: none; }
form .qcard .qcard-remember, .qcard .qcard-remember { display: inline-flex; width: auto; justify-content: flex-start; align-items: center; gap: 6px; margin: 0 0 0 auto; padding: 0; background: none; font-size: .8rem; color: var(--ink-soft); cursor: pointer; white-space: normal; min-width: 0; }
form .qcard .qcard-remember input, .qcard .qcard-remember input { flex: 0 0 auto; width: auto; margin: 0; }
.qcard .qcard-remember span { display: inline; }
/* Suggested by your team (Training tab) */
.qa-suggested { margin-top: .9rem; border-top: 1px solid var(--line-2); padding-top: .7rem; }
.qa-suggested h4 { margin: 0 0 .45rem; font-size: .92rem; }
.qa-suggested .titem { align-items: flex-start; }
.qa-sugg-a { margin-top: .2rem; }
.qa-sugg-who { display: block; margin-top: .2rem; }