/* Brutus Writing Room — layer on top of the v2 design system (2026-09-20).
   Dark first, pink is the only accent, never green. The three correction
   colours are the only other hues on the page: amber, sky, violet. */

:root{
  --serif:Georgia,"Iowan Old Style","Charter","Palatino Linotype",serif;
  --hl-grammar:#f2b84b;
  --hl-tense:#38bdf8;
  --hl-flow:#a78bfa;
  --wr-side-w:360px;
  --wr-chapters-w:240px;
  --wr-tabbar-h:60px;
}
html[data-theme="light"]{
  --hl-grammar:#c98a1a;
  --hl-tense:#0284c7;
  --hl-flow:#7c5cd6;
}

/* Several rules below set `display`, which would otherwise beat the user-agent
   `[hidden]{display:none}`. Everything the script hides must stay hidden. */
[hidden]{display:none!important}

/* ---------- Page shell ---------- */
/* book.html turns the normal centred container into a full-height workspace. */
html.writer-page body{overflow-x:hidden}
html.writer-page main.container{max-width:none;padding:0;margin:0}
html.writer-page .footer{display:none}
html.writer-page .flashes{margin:12px 16px}

.wr{
  display:grid;
  grid-template-columns:var(--wr-chapters-w) minmax(0,1fr) var(--wr-side-w);
  height:calc(100dvh - var(--header-h));
  min-height:520px;
  background:var(--bg);
}
.wr-col{display:flex;flex-direction:column;min-width:0;min-height:0}
.wr-chapters{border-right:1px solid var(--line);background:var(--bg-2)}
.wr-side{border-left:1px solid var(--line);background:var(--bg-2)}
.wr-editor{background:var(--bg);min-width:0}

.wr-col-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.wr-col-head h2{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.wr-scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;min-height:0}

/* ---------- Chapter column ---------- */
.wr-chapter-list{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:4px}
.wr-chapter{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px;
  border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;
}
.wr-chapter:hover{background:var(--surface-2)}
.wr-chapter.is-current{background:var(--accent-soft);border-color:var(--accent-line)}
.wr-chapter-open{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;
  background:transparent;border:0;color:var(--text);text-align:left;
  padding:10px 4px 10px 12px;min-height:52px;font-weight:500;font-size:.95rem;width:100%;
}
.wr-chapter-open:hover{filter:none}
.wr-chapter.is-current .wr-chapter-open{color:var(--accent)}
.wr-chapter-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;line-height:1.3}
.wr-chapter-meta{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:500;color:var(--text-3)}
.wr-dots{display:inline-flex;align-items:center;gap:4px}
.wr-dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--text-3));flex:0 0 auto}
.wr-dot[data-kind="grammar"]{--c:var(--hl-grammar)}
.wr-dot[data-kind="tense"]{--c:var(--hl-tense)}
.wr-dot[data-kind="flow"]{--c:var(--hl-flow)}
.wr-dot[data-kind="ideas"]{--c:var(--accent)}
.wr-chapter-tools{display:flex;flex-direction:column;gap:0;padding-right:4px}
.wr-chapter-tools button{
  width:34px;min-height:26px;padding:0;border:0;background:transparent;color:var(--text-3);border-radius:6px;
}
.wr-chapter-tools button:hover{background:var(--surface-3);color:var(--text);filter:none}
.wr-chapter-tools .icon{width:15px;height:15px}
.wr-chapter-more{display:flex;gap:4px;padding:0 8px 10px 12px}
.wr-chapter.is-current .wr-chapter-more{display:flex}
.wr-chapter-more button{min-height:32px;padding:0 10px;font-size:.8rem;background:var(--surface-2);border-color:var(--line);color:var(--text-2)}
.wr-chapter-more button:hover{background:var(--surface-3);color:var(--text);filter:none}
.wr-chapter-more button.danger{background:transparent;border-color:transparent;color:var(--text-3)}
.wr-chapter-more button.danger:hover{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}
.wr-col-foot{flex:0 0 auto;padding:10px 12px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}

/* ---------- Editor column ---------- */
.wr-editor-head{
  flex:0 0 auto;padding:10px 18px 10px;border-bottom:1px solid var(--line);
  background:var(--bg);display:flex;flex-direction:column;gap:8px;
}
.wr-title-row{display:flex;align-items:center;gap:10px;min-width:0}
.wr-title{
  flex:1 1 auto;min-width:0;width:auto;
  font-family:var(--serif);font-size:1.22rem;font-weight:600;color:var(--text);
  background:transparent;border:1px solid transparent;border-radius:var(--radius-xs);
  padding:6px 8px;min-height:40px;
}
.wr-title:hover{border-color:var(--line)}
.wr-title:focus{background:var(--bg-2);border-color:var(--accent);box-shadow:var(--focus)}
.wr-toolrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.wr-counts{font-size:.82rem;color:var(--text-3);white-space:nowrap}
.wr-tools{display:flex;flex-wrap:wrap;gap:6px}
.wr-tools .btn-secondary,.wr-tools button,.wr-tools .button-link,.wr-tools summary{min-height:36px;padding:0 11px;font-size:.85rem}
.wr-export{position:relative}
.wr-export > summary{
  list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-sm);font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);
}
.wr-export > summary::-webkit-details-marker{display:none}
.wr-export > summary:hover{background:var(--surface-3)}
.wr-export[open] > summary{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.wr-export-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:200px;
  display:flex;flex-direction:column;gap:6px;padding:8px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);box-shadow:var(--shadow-2);
}
.wr-export-menu a{justify-content:flex-start;width:100%}
.wr-export-menu a span{display:inline}

/* Status pill */
.wr-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text-3);
}
.wr-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.wr-pill[data-state="saving"]{color:var(--warm);background:var(--warm-soft);border-color:var(--warm-line)}
.wr-pill[data-state="dirty"]{color:var(--warm);background:var(--warm-soft);border-color:var(--warm-line)}
.wr-pill[data-state="offline"]{color:var(--danger);background:var(--danger-soft);border-color:var(--danger-line)}
.wr-pill[data-state="saved"]{color:var(--text-3)}

/* Banners (conflict, recovered draft) */
.wr-banners{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:0 18px}
.wr-banners:empty{display:none}
.wr-banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;
  padding:11px 14px;border-radius:var(--radius-sm);font-size:.9rem;
  background:var(--warm-soft);border:1px solid var(--warm-line);color:var(--text);
}
.wr-banner .icon{color:var(--warm)}
.wr-banner-actions{display:flex;gap:6px;margin-left:auto}
.wr-banner button{min-height:32px;padding:0 11px;font-size:.83rem}

/* Manuscript surface */
.wr-paper{padding:26px 18px 45vh;min-height:100%}
.wr-page{
  position:relative;max-width:72ch;margin:0 auto;
  font-family:var(--serif);font-size:17px;line-height:1.7;
}
/* The manuscript (2026-09-22): a real document, one <div> per line of the
   chapter, so it can carry bold, italics, fonts, sizes and alignment. Normal
   text is the serif at 17 px, which the toolbar and Word both call 12 pt. */
.wr-doc{
  --wr-fs:17px;
  position:relative;display:block;min-height:60vh;outline:none;
  font-family:var(--serif);font-size:var(--wr-fs);line-height:1.7;font-weight:400;color:var(--text);
  white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;tab-size:4;
  caret-color:var(--accent);
}
.wr-doc:focus,.wr-doc:focus-visible{outline:none;box-shadow:none}
.wr-doc > div{margin:0;padding:0}
.wr-doc > div[data-a="center"]{text-align:center}
.wr-doc > div[data-a="right"]{text-align:right}
.wr-doc > div[data-a="justify"]{text-align:justify}
.wr-doc ::selection{background:var(--accent-soft)}
.wr-doc [data-b]{font-weight:700}
.wr-doc [data-i]{font-style:italic}
.wr-doc [data-u]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.wr-doc.is-empty::before{
  content:attr(data-placeholder);position:absolute;left:0;top:0;right:0;
  color:var(--text-3);pointer-events:none;
}
/* The fonts, each with fall-backs that exist on her phone and her PC. */
.wr-doc [data-font="times"],.wr-fmt-menu [data-font="times"],#fmt-font-label[data-font="times"]{font-family:"Times New Roman",Times,"Liberation Serif",serif}
.wr-doc [data-font="garamond"],.wr-fmt-menu [data-font="garamond"],#fmt-font-label[data-font="garamond"]{font-family:Garamond,"EB Garamond","Adobe Garamond Pro","Palatino Linotype",Palatino,serif}
.wr-doc [data-font="palatino"],.wr-fmt-menu [data-font="palatino"],#fmt-font-label[data-font="palatino"]{font-family:"Palatino Linotype",Palatino,"Book Antiqua",serif}
.wr-doc [data-font="baskerville"],.wr-fmt-menu [data-font="baskerville"],#fmt-font-label[data-font="baskerville"]{font-family:Baskerville,"Baskerville Old Face","Libre Baskerville",Georgia,serif}
.wr-doc [data-font="arial"],.wr-fmt-menu [data-font="arial"],#fmt-font-label[data-font="arial"]{font-family:Arial,Helvetica,sans-serif}
.wr-doc [data-font="verdana"],.wr-fmt-menu [data-font="verdana"],#fmt-font-label[data-font="verdana"]{font-family:Verdana,Geneva,sans-serif}
.wr-doc [data-font="courier"],.wr-fmt-menu [data-font="courier"],#fmt-font-label[data-font="courier"]{font-family:"Courier New",Courier,monospace}
/* Point sizes, scaled so 12 pt is her normal 17 px. */
.wr-doc [data-size="8"]{font-size:calc(var(--wr-fs) * 8 / 12)}
.wr-doc [data-size="9"]{font-size:calc(var(--wr-fs) * 9 / 12)}
.wr-doc [data-size="10"]{font-size:calc(var(--wr-fs) * 10 / 12)}
.wr-doc [data-size="11"]{font-size:calc(var(--wr-fs) * 11 / 12)}
.wr-doc [data-size="14"]{font-size:calc(var(--wr-fs) * 14 / 12)}
.wr-doc [data-size="16"]{font-size:calc(var(--wr-fs) * 16 / 12)}
.wr-doc [data-size="18"]{font-size:calc(var(--wr-fs) * 18 / 12)}
.wr-doc [data-size="20"]{font-size:calc(var(--wr-fs) * 20 / 12)}
.wr-doc [data-size="24"]{font-size:calc(var(--wr-fs) * 24 / 12)}
.wr-doc [data-size="28"]{font-size:calc(var(--wr-fs) * 28 / 12)}
.wr-doc [data-size="36"]{font-size:calc(var(--wr-fs) * 36 / 12)}
.wr-doc [data-size="48"]{font-size:calc(var(--wr-fs) * 48 / 12)}

/* The three correction colours, painted with the CSS Custom Highlight API
   (ranges over her text, never elements inside it). Same amber / sky / violet
   as --hl-*; literal values because a highlight cannot rely on var(). */
::highlight(wr-grammar){background-color:rgba(242,184,75,.22);text-decoration:underline 2px #f2b84b;text-underline-offset:.24em}
::highlight(wr-tense){background-color:rgba(56,189,248,.22);text-decoration:underline 2px #38bdf8;text-underline-offset:.24em}
::highlight(wr-flow){background-color:rgba(167,139,250,.22);text-decoration:underline 2px #a78bfa;text-underline-offset:.24em}
::highlight(wr-pulse-grammar){background-color:rgba(242,184,75,.55)}
::highlight(wr-pulse-tense){background-color:rgba(56,189,248,.55)}
::highlight(wr-pulse-flow){background-color:rgba(167,139,250,.55)}
html[data-theme="light"] ::highlight(wr-grammar){background-color:rgba(201,138,26,.20);text-decoration-color:#c98a1a}
html[data-theme="light"] ::highlight(wr-tense){background-color:rgba(2,132,199,.16);text-decoration-color:#0284c7}
html[data-theme="light"] ::highlight(wr-flow){background-color:rgba(124,92,214,.16);text-decoration-color:#7c5cd6}
html[data-theme="light"] ::highlight(wr-pulse-grammar){background-color:rgba(201,138,26,.45)}
html[data-theme="light"] ::highlight(wr-pulse-tense){background-color:rgba(2,132,199,.38)}
html[data-theme="light"] ::highlight(wr-pulse-flow){background-color:rgba(124,92,214,.38)}

/* ---------- Formatting bar ---------- */
.wr-fmtbar{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:0 -6px;min-width:0}
.wr-fmt-group{display:flex;align-items:center;gap:2px;padding:0 6px;position:relative;flex:0 0 auto}
.wr-fmt-group + .wr-fmt-group::before{
  content:"";position:absolute;left:-1px;top:7px;bottom:7px;width:1px;background:var(--line);
}
.wr-fmt-btn{
  min-height:34px;height:34px;min-width:34px;padding:0 7px;gap:4px;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-xs);
  color:var(--text-2);font-weight:600;font-size:.86rem;touch-action:manipulation;
}
.wr-fmt-btn:hover{background:var(--surface-2);color:var(--text);filter:none}
.wr-fmt-btn:active{transform:none}
.wr-fmt-btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.wr-fmt-btn:disabled{opacity:.35;background:transparent;cursor:default}
.wr-fmt-btn .icon{width:17px;height:17px}
.wr-fmt-pick{justify-content:space-between;background:var(--surface-2);border-color:var(--line);color:var(--text);font-weight:500}
.wr-fmt-pick[aria-expanded="true"]{border-color:var(--accent-line);background:var(--accent-soft)}
.wr-fmt-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wr-fmt-pick .icon{width:14px;height:14px;color:var(--text-3)}
.wr-fmt-font{width:156px}
.wr-fmt-font span{font-family:var(--serif);font-size:.95rem}
.wr-fmt-size{width:62px}
.wr-fmt-menu{
  position:fixed;z-index:150;min-width:132px;max-height:340px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:1px;padding:6px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);box-shadow:var(--shadow-2);
}
.wr-fmt-menu[hidden]{display:none}
.wr-fmt-menu button{
  justify-content:flex-start;min-height:36px;padding:0 12px;flex:0 0 auto;
  background:transparent;border:0;border-radius:var(--radius-xs);
  color:var(--text);font-weight:500;font-size:1rem;text-align:left;touch-action:manipulation;
}
.wr-fmt-menu button:hover,.wr-fmt-menu button:focus-visible{background:var(--surface-2);filter:none}
.wr-fmt-menu button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.wr-fmt-menu .is-default{font-family:var(--serif)}

/* ---------- Popover on a mark ---------- */
.hl-pop{
  position:fixed;z-index:140;width:min(330px,92vw);
  max-height:calc(var(--wr-vvh,100dvh) - 16px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:var(--shadow-2);padding:12px 13px 11px;
  display:flex;flex-direction:column;gap:9px;
}
.hl-pop[hidden]{display:none}
.hl-pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hl-pop-head .icon-btn{width:30px;height:30px}
.hl-pop-msg{font-size:.92rem;line-height:1.45;color:var(--text)}
.hl-pop-sugg{
  font-size:.9rem;line-height:1.45;color:var(--text-2);font-family:var(--serif);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-xs);padding:8px 10px;
}
.hl-pop-sugg b{color:var(--text);font-weight:600}
.hl-pop-actions{display:flex;flex-wrap:wrap;gap:6px}
.hl-pop-actions button{min-height:36px;padding:0 12px;font-size:.85rem}

/* ---------- Brutus panel ---------- */
.wr-tabs{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;
  padding:8px;border-bottom:1px solid var(--line);
}
.wr-tabs button{
  min-height:40px;padding:0 6px;font-size:.85rem;border-radius:var(--radius-xs);
  background:transparent;border:1px solid transparent;color:var(--text-3);gap:5px;
}
.wr-tabs button:hover{background:var(--surface-2);color:var(--text);filter:none}
.wr-tabs button[aria-selected="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.wr-tabcount{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;font-size:.72rem;font-weight:700;
  background:var(--surface-3);color:var(--text-2);
}
.wr-tabs button[aria-selected="true"] .wr-tabcount{background:var(--accent);color:var(--accent-ink)}
.wr-tabpanels{flex:1 1 auto;min-height:0;display:flex}
.wr-tabpanel{flex:1 1 auto;min-height:0;display:none;flex-direction:column}
.wr-tabpanel.is-active{display:flex}

.wr-panel-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding:10px 12px;border-bottom:1px solid var(--line);
}
.wr-panel-head .wr-reading{font-size:.84rem;color:var(--text-3);display:inline-flex;align-items:center;gap:6px}
.wr-panel-head .wr-reading.is-busy{color:var(--accent)}
.wr-panel-head button{min-height:34px;padding:0 11px;font-size:.83rem}
.wr-legend{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.wr-legend button{
  min-height:32px;padding:0 10px;border-radius:999px;font-size:.79rem;font-weight:600;gap:6px;
  background:transparent;border:1px solid var(--line-2);color:var(--text-3);
}
.wr-legend button:hover{filter:none;border-color:var(--c);color:var(--text)}
.wr-legend button::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.wr-legend button[aria-pressed="true"]{
  color:var(--c);border-color:color-mix(in srgb,var(--c) 55%,transparent);
  background:color-mix(in srgb,var(--c) 16%,transparent);
}
.wr-legend button[data-kind="grammar"]{--c:var(--hl-grammar)}
.wr-legend button[data-kind="tense"]{--c:var(--hl-tense)}
.wr-legend button[data-kind="flow"]{--c:var(--hl-flow)}

.wr-cards{display:flex;flex-direction:column;gap:8px;padding:10px 12px 18px}
.fx-card{
  display:flex;flex-direction:column;gap:7px;text-align:left;width:100%;
  padding:12px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c,var(--line-2));
  cursor:pointer;transition:border-color .12s ease,background .12s ease;
}
.fx-card:hover{background:var(--surface-2);border-color:var(--line-2);border-left-color:var(--c,var(--line-2))}
.fx-card.is-selected{border-color:var(--accent-line);background:var(--accent-soft)}
.fx-card[data-kind="grammar"]{--c:var(--hl-grammar)}
.fx-card[data-kind="tense"]{--c:var(--hl-tense)}
.fx-card[data-kind="flow"]{--c:var(--hl-flow)}
.fx-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fx-chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 42%,transparent);
}
.fx-pos{font-size:.76rem;color:var(--text-3);white-space:nowrap}
.fx-quote{
  margin:0;font-family:var(--serif);font-size:.95rem;line-height:1.45;color:var(--text);
  border-left:2px solid var(--line-2);padding-left:10px;overflow-wrap:anywhere;
}
.fx-msg{font-size:.88rem;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
.fx-why{font-size:.85rem;line-height:1.45;color:var(--text-3);overflow-wrap:anywhere}
.fx-actions{display:flex;flex-wrap:wrap;gap:6px;padding-top:2px}
.fx-actions button{min-height:34px;padding:0 11px;font-size:.82rem}
.wr-empty{
  margin:14px 12px;padding:20px 16px;text-align:center;font-size:.9rem;color:var(--text-2);
  border:1px dashed var(--line-2);border-radius:var(--radius-sm);background:var(--surface-2);
}
.wr-empty strong{display:block;color:var(--text);margin-bottom:4px}

/* ---------- Chat ---------- */
.chat-log{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:12px;display:flex;flex-direction:column;gap:10px}
.chat-msg{display:flex;flex-direction:column;gap:4px;max-width:100%}
.chat-who{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.chat-bubble{
  padding:10px 12px;border-radius:var(--radius-sm);font-size:.92rem;line-height:1.55;
  background:var(--surface);border:1px solid var(--line);color:var(--text);overflow-wrap:anywhere;
}
.chat-msg[data-role="user"] .chat-bubble{background:var(--accent-soft);border-color:var(--accent-line)}
.chat-msg[data-role="user"] .chat-who{color:var(--accent)}
.chat-bubble p{margin:0 0 .6em}
.chat-bubble p:last-child{margin-bottom:0}
.chat-bubble ul{margin:.2em 0 .6em;padding-left:1.15em}
.chat-bubble li{margin:.15em 0}
.chat-bubble blockquote{
  margin:.3em 0;padding:2px 0 2px 10px;border-left:2px solid var(--accent-line);
  color:var(--text-2);font-family:var(--serif);
}
.chat-bubble strong{font-weight:700}
.chat-tool{font-size:.78rem;color:var(--text-3);font-style:italic}
.chat-caret::after{content:"▍";color:var(--accent);animation:wr-blink 1s steps(2) infinite}
@keyframes wr-blink{50%{opacity:0}}
.chat-composer{flex:0 0 auto;border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.chat-context{font-size:.78rem;color:var(--text-3);display:flex;align-items:center;gap:6px}
.chat-context .icon{width:13px;height:13px}
.chat-quick{display:flex;flex-wrap:wrap;gap:6px}
.chat-quick button{min-height:32px;padding:0 10px;font-size:.8rem;background:transparent;border-color:var(--line-2);color:var(--text-2)}
.chat-quick button:hover{background:var(--surface-2);color:var(--text);filter:none}
.chat-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.chat-input-row textarea{min-height:44px;max-height:180px;resize:none;font-size:16px;line-height:1.45;padding:11px 12px}
.chat-input-row button{min-height:44px;padding:0 14px}
.chat-input-row button[data-mode="stop"]{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}

/* ---------- Status strip ---------- */
.wr-statusstrip{
  flex:0 0 auto;border-top:1px solid var(--line);background:var(--bg-2);
  padding:9px 12px 11px;display:flex;flex-direction:column;gap:7px;font-size:.78rem;color:var(--text-3);
}
.wr-status-row{display:flex;align-items:center;gap:7px;line-height:1.35}
.wr-status-row .icon{width:13px;height:13px;flex:0 0 auto}
.wr-live{width:8px;height:8px;border-radius:50%;background:var(--text-3);flex:0 0 auto}
.wr-live[data-on="yes"]{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.wr-live[data-on="rest"]{background:var(--warm);box-shadow:0 0 0 3px var(--warm-soft)}
.wr-live[data-on="no"]{background:var(--danger)}
.wr-usage{display:flex;flex-direction:column;gap:4px}
.wr-usage-bar{height:4px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.wr-usage-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s ease}
.wr-usage-label{display:flex;justify-content:space-between;gap:8px}

/* ---------- Toast ---------- */
.wr-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:160;
  display:flex;align-items:center;gap:9px;max-width:min(92vw,460px);
  padding:11px 16px;border-radius:999px;font-size:.88rem;font-weight:500;
  background:var(--surface);border:1px solid var(--accent-line);color:var(--text);box-shadow:var(--shadow-2);
  opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none;
}
.wr-toast.is-on{opacity:1;transform:translateX(-50%) translateY(-4px)}
.wr-toast .icon{color:var(--accent)}
.wr-toast[data-tone="bad"]{border-color:var(--danger-line)}
.wr-toast[data-tone="bad"] .icon{color:var(--danger)}

/* ---------- Dialogs (history, import) ---------- */
dialog.wr-dialog{
  width:min(560px,94vw);max-height:84vh;padding:0;border:1px solid var(--line-2);
  border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow-2);
}
dialog.wr-dialog::backdrop{background:rgba(6,9,14,.62)}
.wr-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 10px}
.wr-dialog-body{padding:0 18px 18px;overflow-y:auto;max-height:64vh;display:flex;flex-direction:column;gap:12px}
.wr-dialog-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:0 18px 18px}
.wr-rev-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wr-rev{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);
}
.wr-rev .wr-rev-main{flex:1 1 auto;min-width:0}
.wr-rev strong{font-size:.92rem;font-weight:600}
.wr-rev small{display:block}
.wr-rev button{min-height:32px;padding:0 10px;font-size:.82rem}
.wr-rev-preview{
  white-space:pre-wrap;font-family:var(--serif);font-size:.95rem;line-height:1.6;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;max-height:34vh;overflow:auto;
}
.wr-radio-row{display:flex;flex-direction:column;gap:8px}
.wr-radio{
  display:flex;align-items:flex-start;gap:10px;padding:11px 12px;cursor:pointer;
  border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);
}
.wr-radio input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--accent)}
.wr-radio span{font-size:.92rem}
.wr-radio small{display:block;color:var(--text-3)}
.wr-warn{
  display:flex;gap:9px;padding:11px 13px;border-radius:var(--radius-sm);font-size:.87rem;line-height:1.45;
  background:var(--danger-soft);border:1px solid var(--danger-line);color:var(--text);
}
.wr-warn .icon{color:var(--danger);flex:0 0 auto}

/* ---------- Phone: sheets + bottom toolbar ---------- */
.wr-tabbar{display:none}
.wr-sheet-backdrop{display:none}
.sheet-grip{display:none}
.wr-sheet-close{display:none}

@media (max-width:900px){
  .wr{display:block;height:auto;min-height:0}
  .wr-editor{min-height:calc(100dvh - var(--header-h))}
  .wr-editor-head{position:sticky;top:var(--header-h);z-index:30;padding:8px 12px}
  .wr-title{font-size:1.1rem}
  .wr-banners{padding:0 12px}
  .wr-scroll{overflow-y:visible;min-height:0}
  .wr-paper{padding:18px 14px 34vh}
  .wr-page{max-width:none}
  /* The formatting bar is one row that scrolls sideways on a phone, never the page. */
  .wr-fmtbar{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -12px;padding:0 6px}
  .wr-fmtbar::-webkit-scrollbar{display:none}
  .wr-fmt-btn{min-height:38px;height:38px;min-width:38px}
  .wr-fmt-font{width:128px}
  /* Keyboard up: the formatting bar docks on top of the keyboard, where the
     bottom toolbar was (it leaves in that state), and the head drops the
     History / Export / Import / Memory row, so her text keeps the screen. */
  html.wr-kb-up .wr-tools{display:none}
  html.wr-kb-up .wr-fmtbar{
    position:fixed;left:0;right:0;bottom:var(--wr-kb,0px);z-index:121;margin:0;padding:5px 6px;
    background:var(--bg-2);border-top:1px solid var(--line);box-shadow:0 -8px 20px rgba(5,8,13,.22);
  }

  .sheet-grip{
    display:block;width:42px;height:4px;border-radius:999px;background:var(--line-2);
    margin:9px auto 3px;flex:0 0 auto;
  }
  .wr-sheet-close{display:inline-flex}
  /* `--wr-vvh` / `--wr-kb` come from writer.js reading window.visualViewport:
     how tall the page really looks and how much of it the software keyboard has
     taken. A sheet measured in dvh alone opens underneath an iOS keyboard. */
  .wr-chapters,.wr-side{
    position:fixed;left:0;right:0;bottom:var(--wr-kb,0px);z-index:130;
    height:auto;max-height:min(82dvh,calc(var(--wr-vvh,82dvh) - 12px));
    border:1px solid var(--line);border-bottom:0;
    border-radius:18px 18px 0 0;background:var(--bg-2);box-shadow:var(--shadow-2);
    transform:translateY(102%);transition:transform .22s ease;
    overflow:hidden;overscroll-behavior:contain;
    visibility:hidden;
  }
  .wr-chapters.is-open,.wr-side.is-open{transform:translateY(0);visibility:visible}
  /* The sheet's own height is the budget; everything inside gives way to the one
     thing she came for — the list, or the box she types into. Fixed dvh caps
     here used to push the chat composer out through the bottom of the sheet on a
     small phone once the keyboard had taken two thirds of the screen. */
  .wr-side .wr-tabpanels{min-height:0}
  .wr-side .chat-log{max-height:none;min-height:0}
  .wr-side .wr-scroll,.wr-chapters .wr-scroll{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}
  /* Keyboard up on a small phone there is barely 230 px left: the status strip,
     the grip and the two quick buttons stand down so the log and the composer
     both fit. */
  html.wr-kb-up .wr-side .wr-statusstrip,
  html.wr-kb-up .wr-side .sheet-grip,
  html.wr-kb-up .wr-chapters .sheet-grip,
  html.wr-kb-up .wr-side .chat-quick,
  html.wr-kb-up .wr-side .chat-context{display:none}

  .wr-sheet-backdrop{
    display:block;position:fixed;inset:0;z-index:125;background:rgba(5,8,13,.55);
    opacity:0;transition:opacity .2s ease;
  }
  .wr-sheet-backdrop[hidden]{display:none}
  .wr-sheet-backdrop.is-on{opacity:1}

  .wr-tabbar{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    height:calc(var(--wr-tabbar-h) + env(safe-area-inset-bottom,0px));
    padding:0 4px env(safe-area-inset-bottom,0px);
    background:var(--bg-2);border-top:1px solid var(--line);
  }
  .wr-tabbar button{
    flex-direction:column;gap:2px;min-height:0;height:var(--wr-tabbar-h);padding:0 2px;
    background:transparent;border:0;color:var(--text-3);font-size:.7rem;font-weight:600;border-radius:0;
  }
  .wr-tabbar button:hover{filter:none}
  .wr-tabbar button .icon{width:20px;height:20px}
  .wr-tabbar button[aria-expanded="true"]{color:var(--accent)}
  .wr-tabbar .wr-tabcount{min-width:17px;height:17px;font-size:.66rem;padding:0 4px}
  html.writer-page .wr{padding-bottom:calc(var(--wr-tabbar-h) + env(safe-area-inset-bottom,0px))}
  .wr-toast{bottom:calc(var(--wr-kb,0px) + var(--wr-tabbar-h) + 18px)}
  .wr-tabbar{transition:transform .18s ease}
  /* Keyboard up: the toolbar would either float in the middle of the screen or
     hide under the keys, and either way it is covering her line. It leaves. */
  html.wr-kb-up .wr-tabbar{transform:translateY(100%);pointer-events:none}
  html.wr-kb-up .wr-toast{bottom:calc(var(--wr-kb,0px) + 70px)}
}
@media (max-width:420px){
  .wr-tools .btn-secondary span,.wr-tools button span,.wr-tools .button-link span,.wr-tools summary span{display:none}
  .wr-tools .btn-secondary,.wr-tools button,.wr-tools .button-link,.wr-tools summary{padding:0 12px}
  .wr-export-menu a span{display:inline}
}

/* ---------- Welcome / progress card ----------
   Shown once at the start of a writing session and any time she taps the word
   counter. Centred over the editor on desktop, a bottom sheet on phones. */
.wr-counts{
  font-size:.82rem;color:var(--text-3);white-space:nowrap;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-xs);
  padding:4px 8px;min-height:32px;height:auto;font-weight:500;letter-spacing:normal;
  display:inline-flex;align-items:center;cursor:pointer;text-align:left;
}
.wr-counts:hover{background:var(--surface-2);border-color:var(--line);color:var(--text-2);filter:none}
.wr-counts:active{transform:none}
.wr-counts:focus-visible{box-shadow:var(--focus);border-color:var(--accent-line);color:var(--text-2)}

.wr-welcome{position:fixed;inset:0;z-index:170;display:flex;align-items:center;justify-content:center;padding:20px;cursor:pointer}
.wr-welcome[hidden]{display:none}
.wr-welcome-veil{
  position:absolute;inset:0;background:rgba(6,9,14,.66);cursor:pointer;
  opacity:0;transition:opacity .3s ease;
}
.wr-welcome.is-on .wr-welcome-veil{opacity:1}
html[data-theme="light"] .wr-welcome-veil{background:rgba(15,23,34,.4)}

.wr-welcome-card{
  position:relative;width:min(460px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;
  padding:28px 26px 24px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-2);
  text-align:center;opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity .3s ease,transform .3s ease;
}
.wr-welcome.is-on .wr-welcome-card{opacity:1;transform:none}
.wr-welcome-card:focus{outline:none}
.wr-welcome-card:focus-visible{box-shadow:var(--shadow-2),var(--focus)}
.wr-welcome-close{position:absolute;top:8px;right:8px}

.wr-welcome-kicker{
  margin:0 0 2px;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);
}

.wr-welcome-numberwrap{position:relative;padding:8px 0 2px}
.wr-welcome-glow{
  position:absolute;left:50%;top:50%;width:260px;height:130px;margin:-65px 0 0 -130px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-soft),transparent 72%);
  opacity:0;
}
.wr-welcome.is-on .wr-welcome-glow{animation:wr-breathe 2.4s ease-in-out 1 forwards}
@keyframes wr-breathe{
  0%{opacity:0;transform:scale(.7)}
  45%{opacity:1;transform:scale(1.06)}
  100%{opacity:.45;transform:scale(1)}
}
.wr-welcome-number{
  position:relative;margin:0;font-family:var(--serif);font-weight:600;line-height:1.05;
  font-size:clamp(2.7rem,12vw,3.6rem);color:var(--accent);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.01em;
}
.wr-welcome-number small{
  display:block;margin-top:6px;font-family:var(--font);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}

.wr-welcome-delta{margin:12px 0 0;font-size:.94rem;color:var(--text-2)}
.wr-welcome-delta b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

.wr-welcome-bar{
  margin:16px 0 8px;height:7px;border-radius:999px;overflow:hidden;
  background:var(--surface-3);border:1px solid var(--line);
}
.wr-welcome-bar i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  transition:width 1.1s cubic-bezier(.22,.8,.3,1);
}
.wr-welcome-next{margin:0;font-size:.9rem;color:var(--text-2)}
.wr-welcome-next b{color:var(--text);font-weight:600}
.wr-welcome-past,.wr-welcome-story{margin:8px 0 0;font-size:.86rem;color:var(--text-3)}
.wr-welcome-past b,.wr-welcome-story b{color:var(--text-2);font-weight:600}

.wr-welcome-line{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:var(--text);
}

/* Four dots: three quick, a pause, a fourth. */
.wr-taps{display:flex;justify-content:center;gap:7px;margin-top:16px}
.wr-taps i{width:5px;height:5px;border-radius:50%;background:var(--line-2);opacity:.55}
.wr-welcome.is-on .wr-taps i{animation:wr-tap 2.8s ease-in-out infinite}
.wr-welcome.is-on .wr-taps i:nth-child(2){animation-delay:.26s}
.wr-welcome.is-on .wr-taps i:nth-child(3){animation-delay:.52s}
.wr-welcome.is-on .wr-taps i:nth-child(4){animation-delay:1.5s;background:var(--accent-line)}
@keyframes wr-tap{
  0%,100%{opacity:.35;transform:scale(1)}
  4%{opacity:1;transform:scale(1.7)}
  16%{opacity:.35;transform:scale(1)}
}

@media (max-width:900px){
  .wr-welcome{align-items:flex-end;padding:0}
  .wr-welcome-card{
    width:100%;max-width:none;max-height:min(88dvh,calc(var(--wr-vvh,88dvh) - 12px));
    border-radius:18px 18px 0 0;border-bottom:0;
    padding:10px 20px calc(26px + env(safe-area-inset-bottom,0px));
    transform:translateY(16px);
  }
  .wr-welcome-close{top:6px;right:6px}
  .wr-welcome-kicker{margin-top:6px}
}

/* ---------- /book/memory ---------- */
.wr-mem-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
@media (max-width:980px){.wr-mem-grid{grid-template-columns:1fr}}
.wr-note-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wr-note{
  display:flex;flex-direction:column;gap:8px;padding:12px 14px;
  border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);
}
.wr-note.is-off{opacity:.6;border-style:dashed}
.wr-note-text{font-size:.94rem;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.wr-note-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.78rem;color:var(--text-3)}
.wr-note-actions{display:flex;flex-wrap:wrap;gap:6px}
.wr-note-actions button{min-height:34px;padding:0 11px;font-size:.82rem}
.wr-note textarea{font-size:16px;min-height:84px}
.wr-doc textarea{font-family:var(--serif);font-size:16px;line-height:1.6;min-height:300px}
.wr-saved-note{font-size:.82rem;color:var(--text-3)}
.wr-toggle{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:500;cursor:pointer}
.wr-toggle input{width:22px;height:22px;flex:0 0 auto}

@media (prefers-reduced-motion:reduce){
  .wr-chapters,.wr-side,.wr-toast,.wr-usage-bar i{transition:none!important}
  mark.hl.is-pulse{animation:none!important}
  .chat-caret::after{animation:none!important}
  .wr-welcome-veil,.wr-welcome-card,.wr-welcome-bar i{transition:none!important}
  .wr-welcome.is-on .wr-welcome-glow,.wr-welcome.is-on .wr-taps i{animation:none!important}
  .wr-welcome-glow{opacity:.45}
}