@font-face { font-family: Figtree; src: url('/static/figtree.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
:root {
  --kirigami-700:#2b5579; --kirigami-600:#346a95; --kirigami-500:#4d8cb9; --kirigami-400:#69a0c7; --kirigami-300:#9dc1dc; --kirigami-200:#cbddec; --kirigami-100:#e4edf5; --kirigami-50:#f3f8fb;
  --neu-950:#22272b; --neu-900:#3b4145; --neu-600:#576067; --neu-500:#656f75; --neu-400:#7d8b92; --neu-300:#abb2b5; --neu-200:#c7ced3; --neu-100:#e7ebee; --neu-50:#f3f6f7; --neu-0:#fff;
  --purple:#8e7cba; --purple-bg:#e4e3f1; --purple-ink:#63508e;
  --tree:#59a88f; --tree-bg:#c6e6da; --tree-ink:#2a6152;
  --beach:#ebaa07; --beach-bg:#fdf4e3; --beach-ink:#7a5c1f;
  --coral:#eb755e; --coral-bg:#fdeae7; --coral-ink:#9c2b1a;
  --bg:var(--neu-0); --fg:var(--neu-950); --muted:var(--neu-500); --line:var(--neu-100); --accent:var(--kirigami-600); --warn:var(--beach-ink);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, sans-serif; }
header.top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
header.top a { color: var(--fg); text-decoration: none; }
header.top .brand { font-weight: 600; }
header.top nav { display: flex; gap: 12px; flex: 1; }
.badges { display: flex; gap: 8px; }
.badge { font-size: 12px; letter-spacing: .04em; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.badge-mode-real, .badge-admin { color: var(--warn); border-color: var(--warn); }
main { padding: 16px; max-width: 72rem; margin: 0 auto; }
button, input { font: inherit; }
button { padding: 6px 14px; border: 1px solid var(--accent); background: var(--accent); color: var(--bg); border-radius: 6px; cursor: pointer; }
button.secondary { background: transparent; color: var(--accent); }
dialog { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); }
.error { color: var(--warn); }
main { max-width: 96rem; }
.workspace { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 3fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .workspace { grid-template-columns: 1fr; } }
.col { min-width: 0; }
textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--fg); }
textarea:disabled { opacity: .6; }
select, input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--fg); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.small { padding: 2px 8px; font-size: 13px; }
.answer { padding: 10px 0; border-top: 1px solid var(--line); }
.answer h4 { margin: 0 0 4px; }
.answer .question, .explanation p { white-space: pre-line; }
.answer-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 14px; color: var(--muted); }
.answer-meta .guidance { flex-basis: 100%; margin: 0; display: flex; flex-direction: column; }
.phase { font-weight: 600; color: var(--fg); }
.locked-note { color: var(--warn); }
.answer-actions { display: flex; gap: 8px; margin-top: 6px; }
.instance { margin: 12px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.instance-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.instance-head h3 { margin: 0; }
.instance-actions { display: flex; gap: 6px; }
.group .group { margin-left: 8px; }
.article section { border-left: 3px solid var(--line); padding-left: 10px; margin: 8px 0; }
.article .warning { color: var(--warn); font-size: 14px; }
.pieces ul { list-style: none; padding: 0; }
.pieces li { padding: 2px 0; }
.stack { display: flex; flex-direction: column; gap: 8px; max-width: 28rem; }
table.projects { border-collapse: collapse; margin-bottom: 24px; }
table.projects th, table.projects td { text-align: left; padding: 4px 16px 4px 0; border-bottom: 1px solid var(--line); }
details.variables { margin-bottom: 12px; }
.saved { color: var(--accent); }
.article .failure, .pieces .failure { color: var(--warn); font-size: 14px; }
.is-new { animation: kw-new 2.5s ease-out; }
@keyframes kw-new { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } to { background: transparent; } }
.bar .orders { margin-bottom: 12px; }
.bar .working { color: var(--accent); font-weight: 600; }
.choices { list-style: none; padding: 0; }
.choices li { margin: 6px 0; }
.feedback-area { margin-top: 6px; font-size: 14px; }
.feedback-note { color: var(--muted); margin-left: 8px; }
.feedback-items { list-style: none; padding: 0; margin: 8px 0 0; }
.feedback-item { border-left: 3px solid var(--line); padding-left: 10px; margin: 8px 0; }
.feedback-item p, .feedback-item h5 { margin: 2px 0; }
.feedback-item .relevance { font-weight: 600; }
.feedback-item .category { color: var(--muted); }
.feedback-item .feedback-close { float: right; border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; }
.feedback-item .feedback-close:hover { color: var(--fg); }
.feedback-closed { margin-left: 0; }
.bar .working::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 6px; animation: kw-pulse 1.2s ease-in-out infinite; }
@keyframes kw-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.documents { margin-bottom: 12px; }
.documents .note { color: var(--muted); }
.sources table { border-collapse: collapse; font-size: 14px; }
.sources th, .sources td { text-align: left; padding: 2px 10px 2px 0; border-bottom: 1px solid var(--line); }
.found-text { white-space: pre-line; }
.found-panel { margin: 8px 0; padding: 6px 10px; border-left: 3px solid var(--accent); }
.found-panel h4 { margin: 0 0 4px; }
.found { padding: 6px 0; border-top: 1px dashed var(--line); }
.found .selector { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.found-inside { margin-left: 12px; }
.found-answers { margin: 4px 0; padding-left: 18px; font-size: 14px; }
.details-button { letter-spacing: .1em; }
.details-host:empty { display: none; }
dl.details { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 4px 0; padding: 6px 10px; border: 1px dashed var(--line); font-size: 13px; }
dl.details dt { color: var(--muted); }
dl.details dd { margin: 0; overflow-wrap: anywhere; }
dl.details ul { margin: 0; padding-left: 16px; }
table.admin-table { border-collapse: collapse; margin-bottom: 16px; font-size: 14px; }
table.admin-table th, table.admin-table td { text-align: left; padding: 3px 12px 3px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
#admin-costs { overflow-x: auto; }
.admin-list { padding-left: 18px; }

/* Browser v2: a reading surface and an equally sized working surface. */
html, body { height:100%; }
body { font-family:Figtree, system-ui, sans-serif; background:var(--neu-50); }
[hidden] { display:none !important; }
a { color:var(--kirigami-600); text-underline-offset:3px; }
button, input, select, textarea { font-family:inherit; }
button { font-weight:600; font-size:.875rem; padding:8px 14px; border-radius:8px; transition:background .12s, border-color .12s; }
button:hover:not(:disabled) { background:var(--kirigami-700); }
button.secondary { background:var(--neu-0); color:var(--kirigami-600); border-color:var(--neu-200); }
button.secondary:hover:not(:disabled) { background:var(--kirigami-50); border-color:var(--kirigami-300); }
button.small { padding:6px 10px; font-size:.8125rem; }
button:disabled { opacity:.46; }
:focus-visible { outline:3px solid var(--kirigami-300); outline-offset:3px; }
header.top { height:60px; flex-wrap:nowrap; padding:0 24px; gap:24px; background:var(--neu-0); }
.brand { display:flex; gap:10px; align-items:center; white-space:nowrap; letter-spacing:-.04em; font-size:1.12rem; }
.brand span { font-weight:750; }
.brand b { font-weight:450; }
.brand-mark { width:28px; height:28px; fill:var(--kirigami-600); }
.brand-mark path+path { fill:none; stroke:var(--kirigami-300); stroke-width:2; }
.project-title { display:flex; flex-direction:column; gap:0; padding-left:22px; border-left:1px solid var(--line); min-width:0; font-size:.875rem; font-weight:600; }
.project-title>span { max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-title small { font-size:.72rem; font-weight:450; color:var(--muted); }
.header-nav { margin-right:auto; }
.badges { gap:6px; margin-left:auto; flex-shrink:0; }
.badge { font-size:.65rem; padding:3px 7px; border-color:var(--neu-200); white-space:nowrap; }
.badge-mode { font-weight:700; }
.badge-mode-fake { color:var(--kirigami-700); background:var(--kirigami-50); border-color:var(--kirigami-200); }
.badge-mode-real { color:var(--beach-ink); background:var(--beach-bg); border-color:var(--beach); }
.badge-admin { color:var(--purple-ink); border-color:var(--purple-bg); background:var(--purple-bg); }
.app-body { max-width:1000px; padding:40px; }
.workspace-page { overflow:hidden; }
.workspace-page .app-body { max-width:none; margin:0; padding:0; height:calc(100dvh - 60px); }
/* D88: the paper's index (the rail) on the left, the questions next to it, the article on the right. The
   article keeps half of the room the closed rail leaves, so opening the index takes its room from the panel,
   never from the text (as in the report's reading layout). */
.workspace { --rail-closed:56px; --rail:var(--rail-closed); display:grid; grid-template-columns:var(--rail) minmax(0,1fr) minmax(0,1fr); gap:0; align-items:stretch; height:100%; }  /* D90: 50/50 beside the index */
.workspace > .rail { grid-column:1; grid-row:1; }
.workspace > .work-panel { grid-column:2; grid-row:1; }
.workspace > .reading-panel { grid-column:3; grid-row:1; }
.reading-panel,.work-panel { display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; }
.reading-panel { background:var(--neu-0); }
.toolbar { height:56px; display:flex; align-items:stretch; justify-content:space-between; gap:12px; flex-shrink:0; padding:0 24px; border-bottom:1px solid var(--neu-200); }
.toolbar-actions { display:flex; align-items:center; gap:8px; }
.view-tabs { display:flex; gap:22px; }
.view-tabs button { border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--neu-500); padding:0; font-size:.875rem; }
.view-tabs button.on { color:var(--kirigami-700); border-bottom-color:var(--kirigami-600); }
.view-tabs button:hover:not(:disabled) { background:transparent; color:var(--kirigami-600); }
.toolbar button { white-space:nowrap; }
.reading-scroll { overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; flex:1; }
.work-panel { background:var(--neu-50); }
.reading-panel { border-left:1px solid var(--neu-200); }
.panel-tabs { display:flex; align-items:stretch; height:56px; flex-shrink:0; gap:22px; padding:0 28px; border-bottom:1px solid var(--neu-200); background:var(--neu-0); }
.panel-tabs button { border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--neu-500); padding:0; font-size:.875rem; }
.panel-tabs button.on { color:var(--kirigami-700); border-bottom-color:var(--kirigami-600); }
.panel-tabs button:hover:not(:disabled) { background:transparent; color:var(--kirigami-600); }
.tab-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; font-size:.68rem; border-radius:6px; background:var(--neu-100); padding:0 5px; margin-left:3px; }
.tab-count:empty { display:none; }
.panel-scroll { flex:1; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:22px 26px 64px; }
.answer-section { margin-bottom:24px; }
.section-heading { display:flex; align-items:center; gap:10px; font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:var(--neu-500); margin:6px 0 12px; font-weight:650; }
.section-heading:after { content:""; flex:1; height:1px; background:var(--neu-200); }
.answer { background:var(--neu-0); border:1px solid var(--neu-100); padding:18px; border-radius:12px; margin:0 0 12px; box-shadow:0 2px 3px color-mix(in srgb,var(--neu-950) 2%,transparent); scroll-margin:18px; }
.answer h4 { font-size:.975rem; font-weight:650; line-height:1.4; margin:0 0 5px; letter-spacing:-.012em; }
.answer .breadcrumb { font-size:.71rem; color:var(--muted); margin:0 0 10px; }
.answer .expected { color:var(--muted); margin:4px 0 8px; line-height:1.45; }
.explanation { font-size:.8rem; color:var(--muted); margin:4px 0 10px; }
summary { cursor:pointer; }
.explanation summary { display:inline; color:var(--kirigami-600); }
.explanation summary:before { content:"+ "; }
.explanation[open] summary:before { content:"− "; }
.explanation p { margin:8px 0; }
textarea { display:block; background:var(--neu-0); border:1px solid var(--neu-200); border-radius:8px; padding:11px 12px; min-height:96px; max-height:320px; line-height:1.6; font-size:.9rem; resize:vertical; transition:border-color .15s; }
textarea:focus { outline:2px solid var(--kirigami-200); outline-offset:0; border-color:var(--kirigami-400); }
textarea:disabled { background:var(--neu-50); opacity:.8; }
.answer-meta { font-size:.72rem; gap:5px 10px; margin-top:8px; }
.phase { color:var(--neu-500); font-weight:500; }
.phase[data-phase="sent"] { color:var(--tree-ink); }
.phase[data-phase="changed"] { color:var(--beach-ink); }
.answer-meta .guidance { display:block; font-size:.72rem; line-height:1.5; }
.guidance .helps { display:none; }
.answer-actions { align-items:center; gap:8px; margin-top:12px; }
.answer-actions .feedback { margin-left:auto; }
.answer .feedback-area { font-size:.75rem; margin-top:10px; }
.feedback-note { display:inline-block; margin:2px 0; font-size:.72rem; }
.answer .feedback-area>button { font-size:.8rem; padding:5px 10px; }
.answer .feedback-area>button+span { margin-left:8px; }
.note { color:var(--kirigami-700); }
.error,.failure { color:var(--coral-ink); }
.answer-meta .note { display:block; flex-basis:100%; background:var(--kirigami-50); border-radius:6px; padding:8px 10px; }
.instance { padding:0; border:0; margin:24px 0; }
.instance .instance { padding-left:12px; border-left:2px solid var(--kirigami-200); }
.instance-head { margin-bottom:12px; }
.instance-head h3 { font-size:.95rem; }
.instance-actions button { font-size:.68rem; padding:4px 7px; }
.group .group { margin-left:0; }
.found { border:1px dashed var(--kirigami-300); background:var(--kirigami-50); border-radius:9px; padding:12px; margin-top:14px; }
.found-panel>h4 { color:var(--kirigami-700); font-size:.82rem; margin:0 0 6px; }
.found-answers,.found-text { font-size:.84rem; line-height:1.6; }
.selector { font-size:.8rem; }
.selector { gap:8px; }
.selector select { max-width:100%; }
.found-panel { margin:0 0 18px; }
.project-options { margin-top:24px; padding:16px 0; border-top:1px solid var(--neu-200); color:var(--muted); font-size:.8rem; }
.project-provenance { font-size:.72rem; }
.article { padding:32px 38px 80px; max-width:790px; margin:0 auto; }
.article-text { line-height:1.8; font-size:1.02rem; overflow-wrap:break-word; }
.article-text h1 { display:none; }
.article-text h2 { font-size:1.22rem; font-weight:700; margin:30px 0 14px; padding-bottom:9px; border-bottom:1px solid var(--line); letter-spacing:-.02em; }
.article-text h2:first-of-type { margin-top:0; }
.article-text h3 { font-size:1rem; margin-top:25px; }
.article-text p { margin:0 0 15px; }
.article section { border-left:3px solid transparent; padding-left:12px; margin:10px 0 10px -15px; }
.article section.is-new { border-color:var(--kirigami-300); }
.article .piece-empty { font-size:.86rem; font-style:normal; color:var(--neu-500); line-height:1.65; padding:10px 12px; background:var(--neu-50); border-radius:8px; margin:10px 0; }
.piece-empty .empty-label { display:block; font-weight:600; color:var(--neu-600); }
.piece-empty .missing-instances { display:block; margin-top:4px; }
.piece-empty a { text-decoration:none; border-bottom:1px dotted var(--kirigami-300); }
.pieces { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); font-size:.8rem; }
.pieces summary { color:var(--kirigami-600); font-weight:600; }
.pieces li { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line); scroll-margin:16px; }
.piece-label { font-weight:600; }
.piece-status { color:var(--muted); }
.pieces .details-host { flex-basis:100%; }
.article-progress { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px; }
.article-progress span { font-size:.7rem; border:1px solid var(--line); border-radius:6px; padding:3px 7px; color:var(--muted); }
.panel-lead { font-size:.85rem; color:var(--muted); margin:0 0 20px; }
.empty-state { background:var(--neu-0); border:1px solid var(--line); border-radius:12px; padding:32px 24px; text-align:center; color:var(--muted); }
.empty-state h3 { font-size:1rem; color:var(--neu-900); margin:0 0 8px; }
.empty-state p { font-size:.85rem; line-height:1.6; margin:0; }
.feedback-group { margin-bottom:24px; }
.feedback-group h3 { font-size:.86rem; line-height:1.5; margin:0 0 10px; }
.feedback-items { margin:0; }
.feedback-item { position:relative; padding:15px 16px; background:var(--neu-0); border:1px solid var(--line); border-left:3px solid var(--kirigami-300); border-radius:9px; margin:10px 0; font-size:.84rem; line-height:1.6; }
.feedback-item[data-tone="high"] { border-left-color:var(--coral); }
.feedback-item[data-tone="medium"] { border-left-color:var(--beach); }
.feedback-item[data-tone="low"] { border-left-color:var(--tree); }
.feedback-item .relevance { font-size:.7rem; font-weight:600; color:var(--kirigami-700); }
.feedback-item[data-tone="high"] .relevance { color:var(--coral-ink); }
.feedback-item[data-tone="medium"] .relevance { color:var(--beach-ink); }
.feedback-item .category { font-size:.7rem; margin-left:4px; }
.feedback-item h5 { font-size:.93rem; margin:6px 22px 7px 0; }
.feedback-item .problem,.feedback-item .solution { margin:6px 0; }
.feedback-item .solution { color:var(--neu-600); }
.feedback-item .feedback-close { position:absolute; right:8px; top:7px; float:none; background:transparent; border:0; color:var(--neu-400); font-size:20px; width:28px; height:28px; padding:0; }
.feedback-item .feedback-close:hover { background:var(--neu-50); color:var(--neu-950); }
.answer-link { font-size:.75rem; text-decoration:none; font-weight:600; }
.bar h3 { font-size:.9rem; margin:4px 0 14px; }
.suggestions { list-style:none; padding:0; counter-reset:steps; margin:0 0 30px; }
.suggestions li { counter-increment:steps; position:relative; padding:16px 16px 16px 46px; background:var(--neu-0); border:1px solid var(--line); border-radius:10px; margin-bottom:10px; font-size:.9rem; }
.suggestions li:before { content:counter(steps,decimal-leading-zero); position:absolute; left:14px; top:17px; font-size:.7rem; color:var(--kirigami-500); font-weight:650; }
.suggestions a { text-decoration:none; font-weight:600; }
.suggestions small { display:block; color:var(--muted); font-size:.73rem; margin-top:6px; }
.progress { list-style:none; padding:18px; background:var(--neu-0); border:1px solid var(--line); border-radius:10px; }
.progress li { font-size:.8rem; margin:0 0 14px; }
.progress li:last-child { margin:0; }
.progress .progress-label { display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; }
progress { appearance:none; display:block; border:0; height:5px; width:100%; border-radius:10px; background:var(--neu-100); overflow:hidden; }
progress::-webkit-progress-bar { background:var(--neu-100); }
progress::-webkit-progress-value { background:var(--kirigami-500); border-radius:10px; }
progress::-moz-progress-bar { background:var(--kirigami-500); }
.documents-page { padding:30px 34px; }
.documents-page h2 { font-size:1.2rem; margin:0 0 5px; letter-spacing:-.025em; }
.documents-page>.panel-lead { margin-bottom:24px; }
.sources { margin-top:25px; font-size:.85rem; }
.sources-list { font-size:.75rem; table-layout:fixed; width:100%; }
.sources-list th,.sources-list td { overflow-wrap:anywhere; vertical-align:top; padding:10px 6px; }
.sources-list th { color:var(--muted); font-weight:500; }
.sources-list th:first-child { width:42%; }
.activity { display:flex; align-items:center; gap:8px; font-size:.75rem; color:var(--muted); margin-left:auto; white-space:nowrap; }
.activity-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--neu-300); flex-shrink:0; }
.activity[data-state="writing"] .activity-dot,.activity[data-state="reading"] .activity-dot,.activity[data-state="asking"] .activity-dot { background:var(--kirigami-500); animation:kw-pulse 1.3s ease-in-out infinite; }
.activity[data-state="asking"] .activity-dot { background:var(--purple); }
.activity[data-state="error"] .activity-dot { background:var(--coral); }
.activity[data-state="waiting"] .activity-dot { background:transparent; border:2px solid var(--beach); width:10px; height:10px; }
@keyframes kw-pulse { 50% { opacity:.3; } }
.connection-status { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:var(--beach-bg); color:var(--beach-ink); padding:10px 18px; border:1px solid var(--beach); border-radius:10px; font-size:.85rem; z-index:50; }
.kw-target { outline:2px solid var(--kirigami-300); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mobile-switch { display:none; }
dialog { max-width:min(600px,calc(100vw - 32px)); max-height:85dvh; padding:28px; border-radius:14px; box-shadow:0 20px 80px color-mix(in srgb,var(--neu-950) 15%,transparent); }
dialog::backdrop { background:color-mix(in srgb,var(--neu-950) 25%,transparent); backdrop-filter:blur(2px); }
dialog h2 { margin:0 0 12px; font-size:1.2rem; }
dialog p { font-size:.9rem; }
input,select { border-color:var(--neu-200); max-width:100%; }
.variable { display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin:12px 0; }
.variable label { flex:1; min-width:0; }
.variable input { width:100%; }
@media (min-width:901px) and (max-width:1200px) {
  header.top { padding:0 16px; gap:14px; }
  .badge-encryption { display:none; }
  .article { padding:28px 26px 60px; }
  .panel-scroll { padding:18px; }
}
@media (max-width:900px) {
  header.top { height:56px; padding:0 14px; gap:12px; }
  .brand { font-size:.95rem; }
  .brand-mark { width:24px; height:24px; }
  .brand b,.project-title small,.badge-encryption,.badge-admin,.activity-label { display:none; }
  .project-title { border:0; padding:0; font-size:.75rem; }
  .project-title>span { max-width:110px; }
  .badges { margin-left:0; }
  .activity { gap:4px; }
  .workspace-page .app-body { height:calc(100dvh - 56px); }
  .mobile-switch { height:44px; display:flex; background:var(--neu-0); border-bottom:1px solid var(--line); }
  .mobile-switch button { flex:1; background:transparent; border:0; border-radius:0; color:var(--muted); font-size:.8rem; }
  .mobile-switch button.on { color:var(--kirigami-700); background:var(--kirigami-50); box-shadow:inset 0 -2px var(--kirigami-500); }
  .workspace { --rail-closed:44px; height:calc(100% - 44px); grid-template-columns:44px minmax(0,1fr); }
  .workspace > .work-panel,.workspace > .reading-panel { grid-column:2; }
  .workspace[data-mobile="answers"] .reading-panel { display:none; }
  .workspace[data-mobile="reading"] .work-panel { display:none; }
  .work-panel,.reading-panel { border:0; }
  .panel-tabs { padding:0 16px; gap:18px; }
  .panel-tabs button { font-size:.79rem; }
  .panel-scroll { padding:16px 12px 40px; }
  .answer { padding:14px; }
  .toolbar { height:auto; flex-wrap:wrap; row-gap:0; padding:0 12px; }
  .view-tabs { gap:16px; min-height:44px; }
  .view-tabs button { font-size:.79rem; }
  .toolbar-actions { padding:8px 0; margin-left:auto; }
  .toolbar-actions button { font-size:.72rem; }
  .article { padding:24px 20px 50px; }
  .documents-page { padding:24px 18px; }
  .sources-list th:last-child,.sources-list td:last-child { display:none; }
  .app-body { padding:24px 18px; }
  table.projects { width:100%; font-size:.8rem; overflow-wrap:anywhere; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

.answer-actions .feedback-area { flex:1; margin:0; }
.answer-actions .generate { flex-shrink:0; }
.answer-actions { flex-wrap:wrap; }
.generation-notice:empty { display:none; }

.feedback-summary { display:block; font-size:.72rem; margin-top:5px; text-decoration:none; }
.article-actions-link { display:block; padding:10px 12px; background:var(--kirigami-50); border-radius:8px; margin:0 0 24px; font-size:.8rem; text-decoration:none; }
.document-status { padding:12px 26px; background:var(--kirigami-50); border-bottom:1px solid var(--line); font-size:.85rem; }
.document-status p { margin:0 0 4px; font-weight:600; }
.document-status small { display:block; color:var(--muted); font-size:.75rem; }
.document-status-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.document-status-actions button { font-size:.75rem; padding:6px 10px; }
@media (max-width:900px) { .document-status { padding:12px 16px; } }

/* D78: the overview of a section's repeated parts, the editor's parts that open and close, the actions menu and
   the question after a change of structure. The state is a symbol (✓ / ○), never only a colour. */
.overview { margin: 8px 0 16px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.overview > summary { cursor: pointer; font-weight: 600; }
.overview-scroll { overflow-x: auto; }
.overview-table { border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.overview-table th, .overview-table td { padding: 2px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.overview-table thead th { font-weight: 600; color: var(--muted); vertical-align: bottom; }
.overview-table tbody th { text-align: left; font-weight: 500; white-space: nowrap; }
.overview-table tr[data-depth="1"] th[scope=row] { padding-left: 20px; }
.overview-table tr[data-depth="2"] th[scope=row] { padding-left: 36px; }
.overview-table tr[data-depth="3"] th[scope=row] { padding-left: 52px; }
.overview-table a { text-decoration: none; display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; }
.overview-table a.done { color: var(--tree-ink); }
.overview-table a.missing { color: var(--beach-ink); }
.overview-table a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.overview-proposals { margin: 6px 0 0; font-size: 14px; }
details.instance > summary.instance-head { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; list-style: none; }
details.instance > summary.instance-head::before { content: "▸"; color: var(--muted); }
details.instance[open] > summary.instance-head::before { content: "▾"; }
details.instance > summary::-webkit-details-marker { display: none; }
.instance-summary { flex: 1 1 12em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.instance-status { font-size: 14px; color: var(--muted); }
details.menu > summary { list-style: none; cursor: pointer; padding: 2px 10px; border: 1px solid var(--line); border-radius: 6px; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-items { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 6px; padding: 8px; background: var(--neu-50); border: 1px solid var(--line); border-radius: 8px; }
/* In the flow, not floating: a floating menu would sit under the other half of the page. */
.move-form { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.move-form input[type=number] { width: 5em; }
.adds { display: flex; flex-wrap: wrap; gap: 8px; }
.structure-notice { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--beach); background: var(--beach-bg); color: var(--beach-ink); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.structure-notice p, .structure-mark p { margin: 0; flex: 1 1 14em; }
.structure-mark { margin: 6px 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
/* The figures area of the right panel (D80): the figures and their subfigures as tabs. */
.repeat-area { margin: 8px 0 16px; }
.area-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.area-tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.area-tabs [role=tab] { background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 6px 10px; font-size: .85rem; }
.area-tabs [role=tab][aria-selected=true] { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.area-tabs [role=tab]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.area-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.area-actions .add, .area-bar .add { margin: 0; }
a.button { display: inline-block; padding: 4px 10px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); text-decoration: none; font-size: .8rem; }
.area-panel { margin: 0; }
.area-panel[hidden] { display: none; }
.area-sub { margin-top: 18px; padding-top: 6px; border-top: 1px dashed var(--line); }
.area-sub .instance-head h4 { margin: 0; font-size: .9rem; }
.parent-choice select { font: inherit; font-size: .8rem; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--accent); max-width: 18rem; }
/* The full view "Figures" (D80): over the whole page, its own scroll; the same boxes as the panel. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.area-view { position: fixed; inset: 12px; z-index: 50; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(34,39,43,.25); display: flex; flex-direction: column; }
.fv-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.fv-head h2 { margin: 0; font-weight: 400; font-size: 1.6rem; text-align: center; }
.fv-tabs { display: flex; gap: 4px; }
.fv-tabs a { padding: 6px 12px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.fv-tabs a[aria-current=page] { color: var(--fg); border-bottom-color: var(--accent); }
.fv-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.fv-close { font-size: 1.8rem; line-height: 1; color: var(--muted); text-decoration: none; padding: 0 6px; }
.fv-close:focus-visible, .fv-tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fv-body { overflow: auto; padding: 12px 20px 20px; flex: 1; }
@media (max-width: 900px) { .area-view { inset: 0; border-radius: 0; } }

/* The Grid of the figures (Vânia's prints, D83; polished, D84): a quiet line per result, a card per figure
   (its name, its result, its finding), its subfigures as rows with their three answers. Every row has the same
   columns: grip, name, answers, menu. A cell is one line that opens while it is written; its state is a
   coloured edge (draft: to send; sent); Send lives inside the box and turns blue when there is something to
   send. Dragging is animated by sortable.min.js. */
.fv-body:has(> .fg-grid) { scroll-padding-top: 96px; scroll-padding-bottom: 24px; }
.fg-grid { --fg-cols: 18px 104px minmax(0, 1fr) 30px; --fg-pad: 10px 16px 10px 10px; --ease: cubic-bezier(.2, .7, .2, 1);
  display: flex; flex-direction: column; gap: 26px; padding-bottom: 6px; }
.fg-head, .fg-row { display: grid; grid-template-columns: var(--fg-cols); column-gap: 12px; align-items: start; }
.fg-cells { display: grid; gap: 10px; min-width: 0; }
.fg-own-cells { grid-template-columns: repeat(var(--fg-own), minmax(0, 1fr)); }
.fg-sub-cells, .fg-head-cols { grid-template-columns: repeat(var(--fg-subs), minmax(0, 1fr)); }

/* the column titles stay on top while the Grid scrolls */
.fg-head { position: sticky; top: -12px; z-index: 6; margin: 0 0 -10px; padding: 12px 17px 12px 11px;
  background: color-mix(in srgb, var(--neu-0) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--neu-100); }
.fg-head { grid-template-columns: 18px 104px repeat(var(--fg-subs), minmax(0, 1fr)) 30px; }
.fg-col { display: flex; flex-direction: column; gap: 3px; padding-left: 13px; min-width: 0; }
.fg-col b { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kirigami-700); }
.fg-col small { font-size: .78rem; line-height: 1.35; color: var(--neu-500); }

/* a result: a quiet line with its name; its figures under it */
.fg-result-head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding-left: 4px;
  font-size: .78rem; font-weight: 650; color: var(--neu-600); letter-spacing: .01em; }
.fg-result-head::after { content: ""; flex: 1; height: 1px; background: var(--neu-100); }
.fg-figlist { display: flex; flex-direction: column; gap: 14px; min-height: 16px; }

/* a figure: a card */
.fg-figure { position: relative; background: var(--neu-0); border: 1px solid var(--neu-100); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(34, 39, 43, .04), 0 6px 18px -12px rgba(34, 39, 43, .14);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
.fg-figure:hover { border-color: var(--neu-200); box-shadow: 0 1px 2px rgba(34, 39, 43, .05), 0 10px 26px -14px rgba(34, 39, 43, .22); }
.fg-row { padding: var(--fg-pad); }
.fg-own { padding-top: 14px; padding-bottom: 12px; border-radius: 14px 14px 0 0; }
.fg-sublist { position: relative; min-height: 6px; padding-bottom: 2px; }
.fg-sub { border-top: 1px solid var(--neu-100); transition: background .15s; }
.fg-sub:hover { background: color-mix(in srgb, var(--kirigami-50) 45%, transparent); }
.fg-sub:last-child { border-radius: 0 0 14px 14px; }

/* the grip */
.fg-handle { all: unset; box-sizing: border-box; width: 18px; height: 36px; display: grid; place-items: center; border-radius: 6px;
  color: var(--neu-300); cursor: grab; transition: color .15s, background .15s; touch-action: none; }
.fg-handle svg { width: 10px; height: 16px; fill: currentColor; }
.fg-row:hover > .fg-handle { color: var(--neu-500); }
.fg-handle:hover { color: var(--kirigami-600); background: var(--kirigami-50); }
.fg-handle:focus-visible { outline: 2px solid var(--kirigami-400); outline-offset: 1px; color: var(--kirigami-600); }
/* On a touch screen the grip is a target of at least 40 x 40 px (review A13, D103): an invisible margin around it
   takes the touch; the grip looks the same. */
@media (pointer: coarse) {
  .fg-handle { position: relative; }
  .fg-handle::before { content: ""; position: absolute; inset: -5px -11px; }
}

/* the name: "Figure 1" with its result under it; a subfigure's "1a" as a badge */
.fg-id { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding-top: 7px; }
.fg-own .fg-num { font-size: .95rem; font-weight: 700; color: var(--neu-950); letter-spacing: -.01em; line-height: 22px; }
.fg-sub .fg-id { padding-top: 6px; }
.fg-sub .fg-num { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 24px; padding: 0 9px;
  border-radius: 999px; background: var(--kirigami-50); color: var(--kirigami-700); font-size: .8rem; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.fg-id .parent-choice { margin: 0; max-width: 100%; }
.fg-id .parent-choice select { max-width: 100%; padding: 2px 20px 2px 8px; font-size: .74rem; font-weight: 600; color: var(--kirigami-700);
  background: var(--kirigami-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23346a95' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 7px center / 8px 5px;
  border: 1px solid transparent; border-radius: 999px; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis;
  transition: border-color .15s, background-color .15s; }
.fg-id .parent-choice select:hover { border-color: var(--kirigami-200); }
.fg-id .parent-choice select:focus-visible { outline: 2px solid var(--kirigami-300); outline-offset: 1px; }

/* the menu "…": a quiet button, its items open as a small card */
.fg-tools { display: flex; justify-content: flex-end; padding-top: 4px; }
.fg-tools .instance-actions { position: relative; }
.fg-tools details.menu > summary { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px;
  color: var(--neu-400); font-weight: 700; letter-spacing: .05em; transition: background .15s, color .15s; }
.fg-tools details.menu > summary:hover, .fg-tools details.menu[open] > summary { background: var(--neu-50); color: var(--neu-900); }
.fg-tools .menu-items { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: max-content; max-width: 340px; margin: 0;
  background: var(--neu-0); border: 1px solid var(--neu-100); border-radius: 12px; padding: 10px;
  box-shadow: 0 16px 40px -16px rgba(34, 39, 43, .35); }

.fg-tools .menu-items { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; padding: 6px; min-width: 240px; }
.fg-tools .menu-items > button, .fg-tools .menu-items > button.secondary { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0;
  border-radius: 8px; background: none; color: var(--neu-900); font-size: .84rem; font-weight: 550; }
.fg-tools .menu-items > button:hover:not(:disabled) { background: var(--neu-50); color: var(--neu-950); }
.fg-tools .menu-items > button[id^="remove-"] { color: var(--coral-ink); }
.fg-tools .menu-items > button[id^="remove-"]:hover:not(:disabled) { background: var(--coral-bg); }
.fg-tools .menu-items > button[id^="remove-"] { order: 9; margin-top: 4px; border-top: 1px solid var(--neu-100); border-radius: 0 0 8px 8px; }
.fg-tools .move-form { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 8px 10px; border-top: 1px solid var(--neu-100); font-size: .8rem; color: var(--neu-600); }
.fg-tools .move-form label { flex: 1; }
.fg-tools .move-form input, .fg-tools .move-form select { width: auto; max-width: 9rem; padding: 4px 6px; font-size: .8rem; border: 1px solid var(--neu-200); border-radius: 7px; }
.fg-tools .move-form input[type="number"] { width: 56px; }
.fg-tools .move-form button { padding: 4px 10px; font-size: .78rem; border-radius: 7px; }
/* a cell */
.answer.cell-answer { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.cell-caption { margin: 0 0 5px 2px; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kirigami-700); }
.cell-field { position: relative; }
.fg-grid textarea.cell-box { display: block; width: 100%; height: 36px; min-height: 36px; max-height: none; margin: 0; resize: none; overflow: hidden;
  white-space: nowrap; padding: 7px 40px 7px 13px; font-size: .875rem; line-height: 20px; color: var(--neu-950);
  background: var(--neu-50); border: 1px solid transparent; border-radius: 10px; outline: none;
  transition: background .15s, border-color .15s, box-shadow .2s var(--ease), height .2s var(--ease); }
.fg-grid textarea.cell-box::placeholder { color: var(--neu-400); }
.fg-grid textarea.cell-box:hover { background: color-mix(in srgb, var(--neu-100) 70%, var(--neu-50)); }
.fg-grid textarea.cell-box:focus { white-space: pre-wrap; overflow: auto; background: var(--neu-0); border-color: var(--kirigami-300);
  box-shadow: 0 0 0 3px var(--kirigami-100), 0 10px 28px -16px rgba(34, 39, 43, .35); }
.fg-grid textarea.cell-box.is-clipped:not(:focus) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 84px), transparent calc(100% - 40px));
  mask-image: linear-gradient(to right, #000 calc(100% - 84px), transparent calc(100% - 40px)); }
.fg-grid textarea.cell-box:disabled { opacity: .6; }
.cell-state { position: absolute; left: 0; top: 9px; width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: transparent; pointer-events: none;
  transition: background .2s; }
.cell-answer:is([data-phase="draft"], [data-phase="changed"], .is-dirty) .cell-state { background: var(--beach); }
.cell-answer[data-phase="sent"]:not(.is-dirty) .cell-state { background: var(--tree); }
.cell-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; }
.fg-grid .cell-actions button { all: unset; box-sizing: border-box; height: 28px; min-width: 28px; padding: 0 7px; display: inline-flex; align-items: center;
  justify-content: center; gap: 5px; border-radius: 7px; color: var(--neu-400); font-size: .75rem; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s, padding .2s var(--ease); }
.fg-grid .cell-actions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fg-grid .cell-actions button:hover:not(:disabled) { background: var(--kirigami-100); color: var(--kirigami-700); }
.fg-grid .cell-actions button:focus-visible { outline: 2px solid var(--kirigami-400); outline-offset: 1px; }
.fg-grid .cell-actions button:disabled { opacity: .4; cursor: default; }
.fg-grid .cell-actions .cell-copy:disabled { display: none; }
.cell-send-text { display: none; }
.cell-answer:is([data-phase="draft"], [data-phase="changed"], .is-dirty) .cell-send { background: var(--kirigami-100); color: var(--kirigami-700); padding: 0 10px 0 8px; }
.cell-field:focus-within .cell-send { background: var(--kirigami-600) !important; color: var(--neu-0) !important; }
.fg-grid .cell-answer:is([data-phase="draft"], [data-phase="changed"], .is-dirty) .cell-send:hover:not(:disabled) { background: var(--kirigami-600); color: var(--neu-0); }
.cell-answer:is([data-phase="draft"], [data-phase="changed"], .is-dirty) .cell-send-text { display: inline; }
.cell-answer:is([data-phase="draft"], [data-phase="changed"], .is-dirty) textarea.cell-box { padding-right: 84px; }
.cell-field:has(.cell-copy:not(:disabled)) textarea.cell-box { padding-right: 70px; }
.cell-answer .answer-meta { margin: 0; font-size: .72rem; color: var(--neu-500); }
.cell-answer .answer-meta > :not(:empty) { display: inline-block; margin: 4px 8px 0 2px; }
.cell-answer .answer-meta .phase, .cell-answer .answer-meta .guidance { display: none; }

/* add a subfigure, add a figure */
.fg-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 16px 14px calc(10px + 18px + 12px + 104px + 12px); }
.fg-add .add { margin: 0; }
.fg-grid .fg-add-button, .fg-actions .fg-add-figure { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; color: var(--kirigami-600); font-weight: 650; border: 1px dashed var(--neu-200); transition: background .15s, border-color .15s, color .15s; }
.fg-grid .fg-add-button { height: 30px; padding: 0 12px; border-radius: 9px; font-size: .8rem; }
.fg-actions { display: flex; gap: 10px; margin-top: 16px; }
.fg-actions form { flex: 1; margin: 0; }
.fg-actions .fg-add-figure { width: 100%; height: 48px; border-radius: 14px; font-size: .875rem; }
.fg-grid .fg-add-button:hover, .fg-actions .fg-add-figure:hover { background: var(--kirigami-50); border-color: var(--kirigami-300); color: var(--kirigami-700); }
.fg-grid .fg-add-button:focus-visible, .fg-actions .fg-add-figure:focus-visible { outline: 2px solid var(--kirigami-400); outline-offset: 2px; }

/* notices in a row sit under its answers */
.fg-note, .fg-row > .structure-notice, .fg-row > .structure-mark { grid-column: 3 / -1; margin: 8px 0 0; border-radius: 8px; }

/* dragging (sortable.min.js): the place it will land is an empty dashed slot; the card follows the hand */
.fg-ghost { background: var(--kirigami-50) !important; border-color: var(--kirigami-300) !important; box-shadow: none !important;
  outline: 1.5px dashed var(--kirigami-300); outline-offset: -1.5px; }
.fg-ghost > * { visibility: hidden; }
.fg-drag { opacity: .97 !important; background: var(--neu-0) !important; border-radius: 14px; transform: rotate(.6deg);
  box-shadow: 0 24px 48px -16px rgba(34, 39, 43, .4), 0 0 0 1px var(--kirigami-200) !important; pointer-events: none; }
.fg-sub.fg-drag { border-radius: 12px; }
body.fg-dragging, body.fg-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
body.fg-dragging .fg-figure:hover { box-shadow: 0 1px 2px rgba(34, 39, 43, .04), 0 6px 18px -12px rgba(34, 39, 43, .14); }

@media (prefers-reduced-motion: reduce) {
  .fg-grid *, .fg-drag { transition: none !important; }
  .fg-drag { transform: none; }
}
@media (max-width: 900px) {
  .fg-head { display: none; }
  .fg-row { grid-template-columns: 18px minmax(0, 1fr) 30px; row-gap: 8px; }
  .fg-id { grid-column: 2; grid-row: 1; flex-direction: row; align-items: center; padding-top: 4px; }
  .fg-handle { grid-row: 1; height: 30px; }
  .fg-tools { grid-column: 3; grid-row: 1; }
  .fg-cells { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .fg-add { padding-left: 16px; }
}

/* The Editor of the figures (Vânia's prints, D85): the figures as tabs on top, a figure's own questions,
   its subfigures as tabs, one at a time: the questions as numbered steps and, beside them, what the article
   says of that subfigure now. "Next: 1b" leads on. */
.fe { --ease: cubic-bezier(.2, .7, .2, 1); max-width: 1320px; margin: 0 auto; }
.fe-bar { position: sticky; top: -12px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 18px; padding: 12px 0; background: color-mix(in srgb, var(--neu-0) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--neu-100); }
.fe-bar-actions { display: flex; gap: 8px; }
.fe .add { margin: 0; }

/* tabs as pills; each says how far its questions are */
.fe .fe-tabs, .fe .fe-subtabs { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
.fe .area-tabs [role=tab] { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--neu-100);
  border-radius: 999px; background: var(--neu-0); color: var(--neu-600); font-size: .85rem; font-weight: 600;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.fe .area-tabs [role=tab]::after { content: attr(data-done) "/" attr(data-total); font-size: .7rem; font-weight: 700; color: var(--neu-400);
  font-variant-numeric: tabular-nums; }
.fe .area-tabs [role=tab][data-total="0"]::after { content: none; }
.fe .area-tabs [role=tab]:hover { border-color: var(--kirigami-200); color: var(--kirigami-700); background: var(--kirigami-50); }
.fe .area-tabs [role=tab][aria-selected=true] { background: var(--kirigami-600); border-color: var(--kirigami-600); color: var(--neu-0);
  box-shadow: 0 6px 16px -10px rgba(43, 85, 121, .7); }
.fe .area-tabs [role=tab][aria-selected=true]::after { color: color-mix(in srgb, var(--neu-0) 75%, transparent); }
.fe .area-tabs [role=tab]:focus-visible { outline: 2px solid var(--kirigami-400); outline-offset: 2px; }
.fe .fe-subtabs [role=tab] { height: 30px; padding: 0 12px; font-size: .8rem; }

/* light dashed add buttons */
.fe .fe-add { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; cursor: pointer;
  border: 1px dashed var(--neu-200); border-radius: 999px; color: var(--kirigami-600); font-size: .8rem; font-weight: 650;
  white-space: nowrap; transition: background .15s, border-color .15s; }
.fe .fe-add:hover { background: var(--kirigami-50); border-color: var(--kirigami-300); }
.fe .fe-add:focus-visible { outline: 2px solid var(--kirigami-400); outline-offset: 2px; }

/* a figure */
.fe-figure { animation: fe-in .25s var(--ease); }
@keyframes fe-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fe-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 16px; }
.fe-title { min-width: 0; }
.fe-kicker { margin: 0 0 2px; font-size: .74rem; font-weight: 650; color: var(--kirigami-600); letter-spacing: .02em; }
.fe-head h3 { margin: 0; font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; color: var(--neu-950); line-height: 1.2; }
.fe-progress { margin: 4px 0 0; font-size: .75rem; color: var(--neu-500); }
.fe-head-tools { display: flex; align-items: center; gap: 8px; }
.fe-head-tools .instance-actions { position: relative; }
.fe-head-tools details.menu > summary { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid var(--neu-100);
  border-radius: 9px; color: var(--neu-500); font-weight: 700; }
.fe-head-tools details.menu > summary:hover, .fe-head-tools details.menu[open] > summary { background: var(--neu-50); color: var(--neu-900); }
.fe-head-tools .menu-items { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: max-content; min-width: 240px; margin: 0;
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; padding: 6px; background: var(--neu-0);
  border: 1px solid var(--neu-100); border-radius: 12px; box-shadow: 0 16px 40px -16px rgba(34, 39, 43, .35); }
.fe-head-tools .menu-items > button, .fe-head-tools .menu-items > button.secondary { display: block; width: 100%; text-align: left; padding: 8px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--neu-900); font-size: .84rem; font-weight: 550; }
.fe-head-tools .menu-items > button:hover:not(:disabled) { background: var(--neu-50); }
.fe-head-tools .menu-items > button[id^="remove-"] { order: 9; color: var(--coral-ink); border-top: 1px solid var(--neu-100); border-radius: 0 0 8px 8px; margin-top: 4px; }
.fe-head-tools .move-form { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 8px 10px; border-top: 1px solid var(--neu-100); font-size: .8rem; color: var(--neu-600); }
.fe-head-tools .move-form label { flex: 1; }
.fe-head-tools .move-form input, .fe-head-tools .move-form select { max-width: 9rem; padding: 4px 6px; font-size: .8rem; border: 1px solid var(--neu-200); border-radius: 7px; }
.fe-head-tools .move-form input[type="number"] { width: 56px; }
.fe-head-tools .move-form button { padding: 4px 10px; font-size: .78rem; border-radius: 7px; }
.fe .instance .instance { padding-left: 0; border-left: 0; }
.fe-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.fe-meta .parent-choice { margin: 0; }
.fe-meta .fe-progress { margin: 0; }
.fe-meta .parent-choice select { padding: 5px 26px 5px 12px; font-size: .78rem; font-weight: 650; color: var(--kirigami-700);
  background: var(--kirigami-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23346a95' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center / 8px 5px;
  border: 1px solid transparent; border-radius: 999px; appearance: none; -webkit-appearance: none; cursor: pointer; }

/* the questions: quiet cards with the question as a heading */
.fe .answer { border: 1px solid var(--neu-100); border-radius: 14px; padding: 18px 20px; margin: 0 0 12px; background: var(--neu-0);
  box-shadow: 0 1px 2px rgba(34, 39, 43, .04); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.fe .answer:focus-within { border-color: var(--kirigami-200); box-shadow: 0 0 0 3px var(--kirigami-50), 0 10px 28px -18px rgba(34, 39, 43, .3); }
.fe .answer h4 { font-size: 1.05rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--neu-950); margin: 0 0 4px; }
.fe .answer .breadcrumb { display: none; }
.fe .answer .expected { margin: 0 0 6px; font-size: .8rem; }
.fe .answer textarea { min-height: 96px; border-radius: 10px; background: var(--neu-50); border-color: transparent; font-size: .92rem; line-height: 1.6;
  transition: background .15s, border-color .15s, box-shadow .15s; }
.fe .answer textarea:hover { background: color-mix(in srgb, var(--neu-100) 60%, var(--neu-50)); }
.fe .answer textarea:focus { background: var(--neu-0); border-color: var(--kirigami-300); outline: none; box-shadow: 0 0 0 3px var(--kirigami-100); }
.fe .answer .answer-meta .guidance { display: none; }
.fe-own .answer:last-child { margin-bottom: 0; }

/* the subfigures */
.fe-subs { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--neu-100); }
.fe-subbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.fe-sub { animation: fe-in .25s var(--ease); }
.fe-sub-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 24px; align-items: start; }
.fe-subhead { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.fe-subhead h4 { margin: 0; }
.fe-subhead .fe-progress { margin: 0; flex: 1; }
.fe-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--kirigami-50); color: var(--kirigami-700); font-size: .95rem; font-weight: 750; font-variant-numeric: tabular-nums; }

/* the questions of a subfigure as numbered steps on a line */
.fe-steps { list-style: none; margin: 0; padding: 0; counter-reset: fe-step; }
.fe-step { position: relative; padding-left: 44px; counter-increment: fe-step; }
.fe-step::before { content: counter(fe-step); position: absolute; left: 0; top: 16px; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--neu-0); border: 1.5px solid var(--neu-200); color: var(--neu-500); font-size: .8rem; font-weight: 750;
  z-index: 1; transition: background .2s, border-color .2s, color .2s; }
.fe-step:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 48px; bottom: -12px; width: 1.5px; background: var(--neu-100); }
.fe-step[data-phase="draft"]::before, .fe-step[data-phase="changed"]::before { border-color: var(--beach); color: var(--beach-ink); background: var(--beach-bg); }
.fe-step[data-phase="sent"]::before { content: "✓"; border-color: var(--tree); background: var(--tree); color: var(--neu-0); }
.fe-step:focus-within::before { border-color: var(--kirigami-500); color: var(--kirigami-700); }

/* back and next */
.fe-next { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 6px 44px; }
.fe .fe-next button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; cursor: pointer;
  border-radius: 999px; font-size: .875rem; font-weight: 650; transition: background .15s, color .15s, box-shadow .15s, transform .15s var(--ease); }
.fe .fe-next .fe-back { color: var(--neu-600); }
.fe .fe-next .fe-back:hover { background: var(--neu-50); color: var(--neu-900); }
.fe .fe-next .fe-forward { margin-left: auto; background: var(--kirigami-600); color: var(--neu-0); box-shadow: 0 8px 20px -12px rgba(43, 85, 121, .8); }
.fe .fe-next .fe-forward:hover { background: var(--kirigami-700); transform: translateX(2px); }
.fe .fe-next button:focus-visible { outline: 2px solid var(--kirigami-400); outline-offset: 2px; }

/* what the article says of the subfigure */
.fe-text { position: sticky; top: 64px; max-height: calc(100vh - 180px); overflow: auto; padding: 18px 20px; border-radius: 14px;
  background: linear-gradient(180deg, var(--kirigami-50), color-mix(in srgb, var(--kirigami-50) 40%, var(--neu-0)));
  border: 1px solid var(--kirigami-100); }
.fe-text h5 { margin: 0; font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--kirigami-700); }
.fe-text-note { margin: 4px 0 14px; font-size: .75rem; color: var(--neu-500); line-height: 1.4; }
.fe-piece + .fe-piece { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kirigami-100); }
.fe-piece-label { margin: 0 0 4px; font-size: .72rem; font-weight: 700; text-transform: capitalize; color: var(--neu-600); }
.fe-piece-status { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--beach-bg); color: var(--beach-ink); font-size: .66rem; text-transform: none; }
.fe-piece-text { margin: 0; font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-size: .95rem; line-height: 1.6; color: var(--neu-950);
  white-space: pre-line; overflow-wrap: anywhere; }
.fe-piece[data-status^="outdated"] .fe-piece-text { color: var(--neu-600); }
.fe-piece-none { margin: 0; font-size: .8rem; color: var(--neu-400); font-style: italic; }

@media (prefers-reduced-motion: reduce) { .fe-figure, .fe-sub { animation: none; } .fe .fe-next .fe-forward:hover { transform: none; } }
@media (max-width: 1000px) {
  .fe-sub-grid { grid-template-columns: 1fr; }
  .fe-text { position: static; max-height: none; }
  .fe-head { flex-direction: column; align-items: flex-start; }
  .fe-bar { align-items: flex-start; }
  .fe-step { padding-left: 38px; }
  .fe-next { margin-left: 38px; }
  /* the figure's "…" now sits at the left of its head: its menu opens towards the right (review A6, D103) */
  .fe-head-tools .menu-items { right: auto; left: 0; }
}
/* a menu is never wider than the screen; app.js shifts it back inside when it would pass an edge (A6) */
.fe-head-tools .menu-items, .fg-tools .menu-items { max-width: min(340px, calc(100vw - 16px)); }

/* D87: the type scale and the call-to-action buttons, reusable everywhere (the "new CTA buttons" of the
   Analysis reports list), and the projects dashboard. */
:root {
  --raspberry-700:#8f3655; --raspberry-600:#a9446a; --raspberry-bg:#f7e6ec; --raspberry-ink:#86304f;
  --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.875rem; --text-md:1rem; --text-lg:1.25rem; --text-xl:1.625rem;
}
.cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; min-width:140px; padding:10px 26px;
  border-radius:10px; border:3px solid transparent; font-size:var(--text-md); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  line-height:1; cursor:pointer; transition:background .12s, border-color .12s, color .12s, box-shadow .12s; }
.cta svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; flex-shrink:0; }
.cta-primary { background:var(--kirigami-600); border-color:var(--kirigami-600); color:var(--neu-0); }
.cta-primary:hover:not(:disabled) { background:var(--kirigami-700); border-color:var(--kirigami-700); }
.cta-secondary { background:var(--neu-0); border-color:var(--kirigami-600); color:var(--kirigami-600);
  box-shadow:0 0 0 2px var(--neu-0), 0 0 0 4px var(--kirigami-200); }
.cta-secondary:hover:not(:disabled) { background:var(--kirigami-50); border-color:var(--kirigami-700); color:var(--kirigami-700); }
.cta-danger { background:var(--raspberry-600); border-color:var(--raspberry-600); color:var(--neu-0); }
.cta-danger:hover:not(:disabled) { background:var(--raspberry-700); border-color:var(--raspberry-700); }
.cta-small { min-height:40px; min-width:0; padding:8px 18px; font-size:var(--text-sm); border-width:2px; }
.dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:16px; margin-top:24px; }
.cta-dialog { width:min(560px, calc(100vw - 32px)); padding:32px; border:0; }
.cta-dialog h2, .cta-dialog h3 { margin:0 0 14px; font-size:var(--text-xl); font-weight:700; letter-spacing:-.01em; }
.cta-dialog p { font-size:var(--text-md); line-height:1.6; color:var(--neu-600); }
.cta-dialog p strong { color:var(--neu-950); }
.dialog-form { display:flex; flex-direction:column; gap:6px; }
.dialog-form label { margin-top:10px; font-size:var(--text-sm); font-weight:600; color:var(--neu-900); }
.dialog-form input[type=text], .dialog-form select { min-height:46px; padding:10px 14px; font-size:var(--text-md); border:1px solid var(--neu-200);
  border-radius:8px; background:var(--neu-0); width:100%; }
.dialog-form input[type=text]:focus, .dialog-form select:focus { border-color:var(--kirigami-500); }
.dialog-form small { font-size:var(--text-xs); color:var(--muted); }

.dashboard { max-width:960px; margin:0 auto; }
.dash-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin:8px 0 22px; }
.dash-head h1 { margin:0; font-size:var(--text-xl); font-weight:750; letter-spacing:-.02em; }
.dash-tools { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.dash-search { position:relative; display:flex; align-items:center; }
.dash-search svg { position:absolute; left:12px; width:17px; height:17px; fill:none; stroke:var(--neu-500); stroke-width:1.8; stroke-linecap:round; pointer-events:none; }
.dash-search input { width:min(260px, 100%); min-height:40px; padding:8px 12px 8px 38px; font-size:var(--text-sm); border:1px solid var(--neu-200); border-radius:8px; background:var(--neu-0); }
.dash-search input:focus { border-color:var(--kirigami-500); }
.dash-card { background:var(--neu-0); border:1px solid var(--neu-100); border-radius:14px; box-shadow:0 1px 2px rgba(34,39,43,.04), 0 10px 28px -18px rgba(34,39,43,.18); overflow:hidden; }
.dash-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.dash-table th { padding:16px 12px; font-size:var(--text-2xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--neu-600);
  text-align:left; background:var(--neu-50); border-bottom:1px solid var(--neu-100); }
.dash-table th:first-child, .dash-table td:first-child { padding-left:22px; }
.dash-table .col-status { width:150px; }
.dash-table .col-date { width:140px; }
.dash-table .col-open { width:52px; padding-right:14px; }
.dash-table th .sort { display:inline-flex; align-items:center; gap:4px; padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; border-radius:4px; }
.dash-table th .sort:hover { background:none; color:var(--kirigami-700); }
.dash-table th .sort svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; opacity:.35; transition:transform .15s; }
.dash-table th[aria-sort=descending] .sort svg, .dash-table th[aria-sort=ascending] .sort svg { opacity:1; }
.dash-table th[aria-sort=ascending] .sort svg { transform:rotate(180deg); }
.dash-table td { padding:14px 12px; border-bottom:1px solid var(--neu-100); vertical-align:middle; font-size:var(--text-sm); }
.dash-table tbody tr:last-child td { border-bottom:0; }
.dash-table tbody tr[data-href] { cursor:pointer; transition:background .12s; }
.dash-table tbody tr[data-href]:hover, .dash-table tbody tr[data-href]:focus-within { background:var(--kirigami-50); }
.dash-table tbody tr[data-href]:hover td:first-child { box-shadow:inset 3px 0 var(--kirigami-300); }
.paper { display:flex; align-items:center; gap:14px; min-width:0; }
.paper-icon { width:28px; height:28px; flex-shrink:0; fill:var(--neu-300); }
.paper-icon path+path { fill:none; stroke:var(--neu-0); stroke-width:1.6; opacity:.7; }
.status-answering .paper-icon { fill:var(--raspberry-600); }
.status-drafting .paper-icon { fill:var(--tree); }
.status-writing .paper-icon { fill:var(--kirigami-400); }
.status-written .paper-icon { fill:var(--kirigami-600); }
.paper-text { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.paper-title { display:block; max-width:100%; padding:2px 6px; margin:-2px -6px; border:1px solid transparent; border-radius:5px; font-size:var(--text-md); font-weight:600;
  color:var(--neu-950); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:text; outline:none; }
.paper-title:empty::before { content:attr(data-placeholder); color:var(--neu-500); font-weight:500; }
.paper-title:hover { border-color:var(--neu-200); background:var(--neu-0); }
.paper-title:focus { border-color:var(--kirigami-400); background:var(--neu-0); box-shadow:0 0 0 3px var(--kirigami-100); white-space:normal; overflow-wrap:anywhere; text-overflow:clip; }
.paper-title.saved-flash { animation:kw-new 1.6s ease-out; }
.paper-meta { font-size:var(--text-xs); color:var(--neu-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:var(--text-xs); font-weight:600; white-space:nowrap; line-height:1.4; }
.pill-new { background:var(--neu-100); color:var(--neu-600); }
.pill-answering { background:var(--raspberry-bg); color:var(--raspberry-ink); }
.pill-drafting { background:var(--tree-bg); color:var(--tree-ink); }
.pill-writing { background:var(--kirigami-100); color:var(--kirigami-700); }
.pill-writing::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--kirigami-500); animation:kw-pulse 1.4s ease-in-out infinite; }
.pill-written { background:var(--kirigami-600); color:var(--neu-0); }
@keyframes kw-pulse { 50% { opacity:.25; } }
.col-date time, .col-date .muted { color:var(--neu-600); font-variant-numeric:tabular-nums; }
.row-open { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; color:var(--neu-400); }
.row-open svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.row-open:hover, tr[data-href]:hover .row-open { color:var(--kirigami-600); background:var(--kirigami-100); }
.paper-title-static { font-weight:600; }
.dash-no-match { margin:0; padding:22px; text-align:center; font-size:var(--text-sm); color:var(--muted); }
.dash-empty { display:flex; flex-direction:column; align-items:center; gap:2px; padding:48px 24px; text-align:center; }
.dash-empty .paper-icon { width:40px; height:40px; margin-bottom:10px; }
.dash-empty p { margin:0; font-size:var(--text-sm); color:var(--neu-600); }
.dash-empty strong { font-size:var(--text-md); color:var(--neu-950); }
@media (max-width: 640px) {
  .dash-head { margin-top:0; }
  .dash-tools, .dash-search, .dash-search input { width:100%; }
  .dash-tools .cta { width:100%; }
  .dash-table, .dash-table tbody { display:block; }
  .dash-table thead { display:none; }
  .dash-table tbody tr { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"paper open" "meta open"; align-items:center;
    padding:14px 10px 14px 16px; border-bottom:1px solid var(--neu-100); column-gap:8px; row-gap:8px; }
  .dash-table tbody tr:last-child { border-bottom:0; }
  .dash-table td { display:block; padding:0; border:0; width:auto !important; }
  .dash-table td.col-paper { grid-area:paper; padding-left:0; }
  .dash-table td.col-status { grid-area:meta; padding-left:42px; display:flex; }
  .dash-table td.col-date { grid-area:meta; justify-self:end; }
  .dash-table td.col-open { grid-area:open; }
  .dash-table tr.project-error { display:block; }
  .cta-dialog { padding:24px 20px; }
  .dialog-actions { justify-content:stretch; }
  .dialog-actions .cta { flex:1; min-width:0; }
}
.dash-status { margin:10px 4px 0; font-size:var(--text-xs); color:var(--warn); }
.dash-status:empty { display:none; }

/* The paper's index (D88), drawn as the section rail of the report's reading layout (report-detail.reading.scss):
   closed, a narrow rail of icons whose names show on hover and focus; open, a compact list, one line per section
   with its count at the end of the line, and the repetitions (results, arguments) below their section. The line
   in view is blue; a repetition in view is light blue. Wide screens dock the open index; narrower ones lay it
   over the panel. */
.rail { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:8px; min-height:0; padding:8px 6px; border-right:1px solid var(--neu-200); background:var(--neu-0); }
.rail .rail-back,.rail .rail-toggle,.rail .rail-admin { align-self:center; display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--neu-600); }
.rail .rail-back:hover,.rail .rail-toggle:hover,.rail .rail-admin:hover { background:var(--neu-100); color:var(--neu-900); }
.rail .rail-back svg,.rail .rail-admin svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linejoin:round; stroke-linecap:round; }
.rail .rail-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
.rail .rail-admin { margin-top:auto; }
.rail-toggle-text { display:none; }
.rail :focus-visible { outline:2px solid var(--kirigami-600); outline-offset:1px; }
.paper-index { min-height:0; }
.paper-index .nav-list,.paper-index .subnav-list { list-style:none; margin:0; padding:0; }
.paper-index .nav-list { display:flex; flex-direction:column; gap:2px; }
.paper-index .nav-item { position:relative; display:grid; grid-template-columns:1fr; align-items:center; }
.paper-index .nav-row,.paper-index .subnav-row { display:flex; align-items:center; gap:8px; width:100%; border:0; border-radius:6px; background:transparent; color:var(--neu-900); font:inherit; font-weight:500; text-align:left; cursor:pointer; transition:background .12s ease,color .12s ease; }
.paper-index .nav-row { position:relative; justify-content:center; padding:8px; font-size:.875rem; }
.paper-index .nav-row:hover,.paper-index .subnav-row:hover { background:var(--kirigami-50); }
.paper-index .nav-icon { flex-shrink:0; display:inline-grid; place-items:center; width:22px; height:22px; border:1.5px solid currentColor; border-radius:6px; color:var(--neu-600); font-size:.68rem; font-weight:700; line-height:1; letter-spacing:0; }
/* Closed: the name is a tooltip on hover and on keyboard focus; it stays the button's name for screen readers. */
.paper-index .nav-name { position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%); z-index:60; padding:4px 8px; border-radius:4px; background:var(--neu-950); color:var(--neu-0); font-size:.8125rem; font-weight:500; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 80ms ease; }
.paper-index .nav-row:hover .nav-name,.paper-index .nav-row:focus-visible .nav-name { opacity:1; }
.paper-index .nav-count { font-weight:400; }
.paper-index .nav-count-short { display:none; }
.paper-index .nav-flag { display:none; flex-shrink:0; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--coral); }
.paper-index .nav-chevron,.paper-index .subnav-list { display:none; }
.paper-index .nav-item.active > .nav-row,.paper-index .nav-item.has-active:not(.expanded) > .nav-row,.workspace:not(.index-open) .paper-index .nav-item.has-active > .nav-row { background:var(--kirigami-600); color:var(--neu-0); font-weight:400; }
.paper-index .nav-item.active > .nav-row .nav-icon,.paper-index .nav-item.has-active:not(.expanded) > .nav-row .nav-icon,.workspace:not(.index-open) .paper-index .nav-item.has-active > .nav-row .nav-icon { color:var(--neu-0); }
/* Open: a compact index. */
.workspace.index-open .rail { padding:8px 6px; }
.workspace.index-open .rail .rail-back,.workspace.index-open .rail .rail-toggle { align-self:flex-start; }
.workspace.index-open .paper-index { flex:1; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.workspace.index-open .paper-index .nav-list { gap:0; }
.workspace.index-open .paper-index .nav-item { grid-template-columns:minmax(0,1fr) auto; }
.workspace.index-open .paper-index .nav-row { justify-content:flex-start; padding:5px 8px; }
.workspace.index-open .paper-index .nav-icon { width:18px; height:18px; font-size:.6rem; border-radius:5px; }
.workspace.index-open .paper-index .nav-name { position:static; z-index:auto; transform:none; flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; padding:0; background:none; color:inherit; font-size:inherit; font-weight:inherit; opacity:1; pointer-events:auto; }
.workspace.index-open .paper-index .nav-label,.workspace.index-open .paper-index .subnav-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace.index-open .paper-index .nav-count-long { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.workspace.index-open .paper-index .nav-count-short { display:inline; margin-left:auto; font-variant-numeric:tabular-nums; }
.workspace.index-open .paper-index .nav-count { color:var(--neu-600); font-size:.8125rem; }
.workspace.index-open .paper-index .nav-item.active > .nav-row .nav-count,.workspace.index-open .paper-index .nav-item.has-active:not(.expanded) > .nav-row .nav-count { color:inherit; opacity:.85; }
.workspace.index-open .paper-index .nav-flag { display:inline-block; }
.workspace.index-open .paper-index .nav-chevron { display:inline-grid; place-items:center; width:24px; height:24px; margin-left:-2px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--neu-600); cursor:pointer; transition:transform .18s ease; }
.workspace.index-open .paper-index .nav-chevron:hover { background:var(--neu-100); }
.workspace.index-open .paper-index .nav-chevron svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.workspace.index-open .paper-index .nav-item.expanded > .nav-chevron { transform:rotate(180deg); }
.workspace.index-open .paper-index .nav-item.expanded > .subnav-list { display:block; grid-column:1 / -1; margin:0 0 4px; }
.workspace.index-open .paper-index .subnav-row { padding:4px 8px 4px 34px; font-size:.8125rem; }
.workspace.index-open .paper-index .subnav-name { flex:1; }
.workspace.index-open .paper-index .subnav-row .nav-count { margin-left:auto; font-variant-numeric:tabular-nums; }
.workspace.index-open .paper-index .subnav-item.active > .subnav-row { background:var(--kirigami-100); color:var(--kirigami-700); font-weight:600; }
.workspace.index-open .paper-index .subnav-item.active > .subnav-row .nav-count { color:inherit; }
/* Wide screens: the open index is a column of its own, taken from the panel. */
@media (min-width:1201px) { .workspace.index-open { --rail:200px; } }
/* Narrower screens: the open index lies over the panel, the text does not move. */
@media (max-width:1200px) {
  .workspace.index-open > .rail { z-index:45; width:min(240px, calc(100vw - 32px)); box-shadow:0 12px 40px color-mix(in srgb,var(--neu-950) 18%,transparent); }
}
@media (max-width:900px) {
  .rail { padding:8px 3px; gap:6px; }
  .rail .rail-back,.rail .rail-toggle,.rail .rail-admin { width:34px; height:34px; }
  .paper-index .nav-row { padding:6px; }
  .workspace.index-open .paper-index .nav-row,.workspace.index-open .paper-index .subnav-row { min-height:40px; }
}
/* The places a line of the index brings into view keep a little air above them. */
.article-text [data-index] { scroll-margin-top:16px; }
.answer-section { scroll-margin-top:12px; }
@media (prefers-reduced-motion:reduce) { .paper-index .nav-name,.paper-index .nav-chevron { transition:none; } }

/* D86: one signal for a box with changes not sent yet, whoever made them (the Reverse or the author): the box is
   tinted with the colour of "to send" (the Grid's edge, the Editor's step), in the answer cards, the Grid and the
   Editor alike, hovered or focused. `is-dirty` (app.js) tints it at the first keystroke, before the save lands. */
.answer:is([data-phase="draft"], [data-phase="changed"], .is-dirty) textarea[id^="draft-"]:not(:disabled),
.fg-grid .cell-answer:is([data-phase="draft"], [data-phase="changed"], .is-dirty) textarea.cell-box:not(:disabled),
.fe .answer:is([data-phase="draft"], [data-phase="changed"], .is-dirty) textarea:not(:disabled) {
  background: var(--beach-bg); border-color: color-mix(in srgb, var(--beach) 40%, transparent);
}
.answer-meta .filled-from { color: var(--beach-ink); font-size: .72rem; }
.answer-meta .filled-from::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--beach); vertical-align: 1px; }
.proposals-waiting { margin: 8px 0; }
.proposal-waiting { display: block; margin: 4px 0; font-size: .75rem; color: var(--muted); }

/* D90: the feedback of an answer under the answer, once asked: the Feedback button stays in the row of actions;
   the result takes a line of its own below them. */
.answer .answer-actions > .feedback-area { display:contents; }
.answer .answer-actions .inline-feedback { order:99; flex-basis:100%; }
.answer .inline-feedback:empty { display:none; }
.answer .inline-feedback { margin-top:6px; padding:10px 14px 12px; border-radius:10px; background:var(--neu-50); border:1px solid var(--neu-100); }
.answer .inline-feedback.is-hidden { display:none; }
.answer .inline-feedback .feedback-items { margin:0; }
.answer .inline-feedback .feedback-item { background:var(--neu-0); }

/* D91: an answer full screen. The card itself becomes a large sheet over the page (its ids and protections stay);
   the button in its top right corner opens and closes it; Escape closes it. */
.answer { position:relative; }
.answer > h4 { padding-right:40px; }
.answer-expand { all:unset; box-sizing:border-box; position:absolute; top:12px; right:12px; width:30px; height:30px; display:grid; place-items:center;
  border-radius:8px; color:var(--neu-400); cursor:pointer; transition:background .15s, color .15s; }
.answer-expand svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.answer-expand .icon-collapse { display:none; }
.answer-expand:hover { background:var(--kirigami-50); color:var(--kirigami-700); }
.answer-expand:focus-visible { outline:2px solid var(--kirigami-400); outline-offset:1px; color:var(--kirigami-700); }
.answer.is-focus { position:fixed; z-index:80; top:28px; bottom:28px; left:50%; width:min(1040px, calc(100vw - 48px)); transform:translateX(-50%);
  margin:0; display:flex; flex-direction:column; overflow:auto; padding:32px 40px; border-radius:16px; border-color:var(--neu-100);
  box-shadow:0 0 0 100vmax rgba(34,39,43,.42), 0 30px 80px -20px rgba(34,39,43,.5); animation:answer-focus-in .22s cubic-bezier(.2,.7,.2,1); }
@keyframes answer-focus-in { from { opacity:0; transform:translateX(-50%) scale(.98); } to { opacity:1; transform:translateX(-50%); } }
.answer.is-focus .answer-expand { top:18px; right:18px; }
.answer.is-focus .answer-expand .icon-expand { display:none; }
.answer.is-focus .answer-expand .icon-collapse { display:block; }
.answer.is-focus > h4 { font-size:1.35rem; line-height:1.35; letter-spacing:-.015em; margin-bottom:6px; }
.answer.is-focus textarea[id^="draft-"] { flex:1 1 auto; height:auto !important; min-height:40vh; max-height:none; font-size:1rem; line-height:1.75; padding:18px 20px; resize:none; }
.answer.is-focus .answer-actions { position:sticky; bottom:-32px; margin:12px -40px -32px; padding:14px 40px 18px; background:var(--neu-0); border-top:1px solid var(--neu-100); }
body.answer-focus-open { overflow:hidden; }
@media (prefers-reduced-motion: reduce) { .answer.is-focus { animation:none; } }
@media (max-width:700px) { .answer.is-focus { top:0; bottom:0; width:100vw; border-radius:0; padding:24px 18px; } .answer.is-focus .answer-actions { margin:12px -18px -24px; padding:12px 18px 16px; bottom:-24px; } }

/* D92: the feedback under an answer closes (×) and shows again ("Show feedback" next to its button) */
.inline-feedback-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 4px; }
.inline-feedback-head span { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--kirigami-700); }
.feedback-hide { all:unset; box-sizing:border-box; width:26px; height:26px; display:grid; place-items:center; border-radius:7px; color:var(--neu-500); cursor:pointer; }
.feedback-hide svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.feedback-hide:hover { background:var(--neu-100); color:var(--neu-900); }
.feedback-hide:focus-visible, .feedback-show:focus-visible { outline:2px solid var(--kirigami-400); outline-offset:1px; }
.answer .feedback-show { all:unset; box-sizing:border-box; padding:5px 10px; border-radius:8px; font-size:.78rem; font-weight:650; color:var(--kirigami-600); cursor:pointer; }
.answer .feedback-show:hover { background:var(--kirigami-50); }

/* D93: the sections a question contributes to, as tags in the Kirigami palette (colour by the section's place
   in the document, never by its name) */
.section-tags { display:flex; flex-wrap:wrap; gap:5px; margin:4px 0 10px; }
.section-tag { display:inline-flex; align-items:center; height:20px; padding:0 9px; border-radius:999px; font-size:.68rem; font-weight:650;
  letter-spacing:.01em; background:var(--kirigami-50); color:var(--kirigami-700); border:1px solid var(--kirigami-100); }
.section-tag[data-tone="1"] { background:var(--tree-bg); color:var(--tree-ink); border-color:color-mix(in srgb, var(--tree) 30%, transparent); }
.section-tag[data-tone="2"] { background:var(--purple-bg); color:var(--purple-ink); border-color:color-mix(in srgb, var(--purple) 30%, transparent); }
.section-tag[data-tone="3"] { background:var(--beach-bg); color:var(--beach-ink); border-color:color-mix(in srgb, var(--beach) 30%, transparent); }
.section-tag[data-tone="4"] { background:var(--coral-bg); color:var(--coral-ink); border-color:color-mix(in srgb, var(--coral) 30%, transparent); }
.section-tag[data-tone="5"] { background:var(--neu-50); color:var(--neu-600); border-color:var(--neu-200); }
.answer-section { margin-bottom:0; position:relative; }  /* D93: one flow of cards; relative keeps the hidden name inside the panel scroll */

/* D96: "How to answer this question?" opens and closes with the standard disclosure chevron; its text is
   Markdown (headings, bold, lists), set small inside the card */
.explanation summary { display:inline-flex; align-items:center; gap:6px; list-style:none; cursor:pointer; color:var(--kirigami-600); font-weight:600; }
.explanation summary::-webkit-details-marker { display:none; }
.explanation summary:before { content:""; width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg); transition:transform .15s; margin:0 3px 0 1px; }
.explanation[open] summary:before { content:""; transform:rotate(45deg); }
.explanation summary:focus-visible { outline:2px solid var(--kirigami-400); outline-offset:2px; border-radius:4px; }
.explanation-body { margin:10px 0 4px; padding:12px 16px; border-radius:10px; background:var(--neu-50); color:var(--neu-900); font-size:.84rem; line-height:1.55; }
.explanation-body h1, .explanation-body h2, .explanation-body h3 { font-size:.9rem; margin:14px 0 6px; color:var(--kirigami-700); }
.explanation-body h4, .explanation-body h5, .explanation-body h6 { font-size:.84rem; margin:10px 0 4px; font-weight:650; }
.explanation-body > :first-child { margin-top:0; }
.explanation-body p { margin:6px 0; white-space:normal; }
.explanation-body ul, .explanation-body ol { margin:4px 0 8px; padding-left:20px; }
.explanation-body li { margin:2px 0; }

/* D97: on the project page the top bar carries the right half's views and actions; the mode badges stay on
   the projects and admin pages; the activity only shows while something happens */
.workspace-page header.top { gap:20px; }
.workspace-page .top-tabs { align-self:stretch; display:flex; gap:22px; }  /* D98: on the right, over the article */
.workspace-page .top-tabs button { height:100%; }
.workspace-page .activity { margin-left:auto; }
.workspace-page .activity[data-state="idle"] { display:none; }
.workspace-page .activity[data-state="idle"] + .top-tabs { margin-left:auto; }
.workspace-page .top-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.workspace-page .top-actions button { white-space:nowrap; }
@media (max-width:900px) {
  .workspace-page header.top { height:auto; flex-wrap:wrap; padding:8px 16px; row-gap:6px; }
  .workspace-page .top-tabs { order:5; flex-basis:100%; margin-left:0 !important; height:36px; overflow-x:auto; }
}
/* D97: the page is the top bar plus the rest, whatever the bar's height (one row, or two on a phone) */
body.workspace-page { height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
body.workspace-page > header.top { flex-shrink:0; }
body.workspace-page > .app-body { flex:1; min-height:0; height:auto; }