/* ---------------------------------------------------------------------------
   Chrome dark, paper white.
   Everything around the page is deliberately low-contrast so the sheet is the
   brightest thing on screen — you are looking at paper, not at an app.
   --------------------------------------------------------------------------- */

:root{
  --bg:#131218;
  --panel:#1a1922;
  --panel-2:#21202b;
  --line:#2d2b38;
  --line-soft:#26242f;
  --ink:#eceaf3;
  --dim:#9b96ab;
  --dimmer:#6d687d;
  /* Bright enough to read as a mark on the dark ground, and cool enough to
     sit against the warm brown of the desk rather than fight it. Anything
     printed *on* the accent has to be dark: white on this is unreadable. */
  --accent:#2ec4b6;
  --accent-soft:rgba(46,196,182,.16);
  --accent-line:rgba(46,196,182,.55);
  --accent-edge:rgba(46,196,182,.35);
  --on-accent:#06231f;
  --paper:#fff;
  /* Comments are amber on purpose, and stay amber whatever the accent is.
     "There is a note here" and "this is the one you are on" have to look
     like different things, not two strengths of the same thing. */
  --note:rgba(240,183,43,.30);
  --note-strong:rgba(240,183,43,.70);
  --note-rule:rgba(214,142,0,.65);

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.42);
  /* The interface uses the platform's own UI font. Inter was shipped for this
     before; a webfont used only by the chrome is downloaded by every reader
     before they can read their own document. */
  --ui:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rail-w:274px;
  --notes-w:274px;
  --topbar-h:56px;
  --toolbar-h:48px;
}

*{ box-sizing:border-box; }

/* Several things here are laid out with `display`, which quietly beats the
   `hidden` attribute. Saying so once is cheaper than remembering it. */
[hidden]{ display:none !important; }

html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.5 var(--ui);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

button,input,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
::selection{ background:var(--accent-soft); }

.app{ display:flex; flex-direction:column; height:100vh; }

/* --- top bar ------------------------------------------------------------- */

.topbar{
  height:var(--topbar-h);
  flex:0 0 auto;
  display:flex; align-items:center; gap:14px;
  padding:0 14px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  position:relative; z-index:30;
}
.brand{
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:12px; color:var(--accent);
  padding:0 12px 0 0; border-right:1px solid var(--line);
  flex:0 0 auto;
}
.doc-title{
  background:transparent; border:1px solid transparent; border-radius:6px;
  padding:5px 8px; min-width:180px; max-width:280px; font-weight:500;
}
.doc-title:hover{ border-color:var(--line); }
.doc-title:focus{ outline:none; border-color:var(--accent); background:var(--bg); }

.tabs{ display:flex; gap:2px; margin-left:auto; background:var(--bg);
       padding:3px; border-radius:8px; border:1px solid var(--line-soft); }
.tabs button{
  padding:5px 15px; border-radius:6px; color:var(--dim); font-weight:500;
  transition:background .12s, color .12s;
}
.tabs button:hover{ color:var(--ink); }
.tabs button.is-on{ background:var(--panel-2); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.3); }

.stats{ margin-left:auto; color:var(--dimmer); font-size:13.5px;
        font-variant-numeric:tabular-nums; white-space:nowrap; }
.stats b{ color:var(--dim); font-weight:600; }

.btn{
  padding:6px 13px; border-radius:7px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--ink); font-weight:500;
  flex:0 0 auto; white-space:nowrap;
  transition:border-color .12s, background .12s;
}
.btn:hover{ border-color:var(--dimmer); }
.btn.primary{ background:var(--accent); border-color:var(--accent);
              color:var(--on-accent); font-weight:600; }
.btn.primary:hover{ filter:brightness(1.08); }
.btn:disabled{ opacity:.45; cursor:default; }
.btn.action{
  display:block; width:100%; text-align:left;
  padding:8px 11px; font-size:13.5px; font-weight:500;
}
.btn.action.danger{ color:var(--accent); border-color:var(--accent-edge); }
.btn.action.danger:hover{ background:var(--accent-soft); border-color:var(--accent); }

/* --- layout -------------------------------------------------------------- */

main{ flex:1; min-height:0; position:relative; }
/* Hidden views stay laid out. The PDF is measured off the live editor, so
   the galley must keep its geometry even while you are on another tab. */
.view{
  position:absolute; inset:0; display:flex;
  visibility:hidden; pointer-events:none; z-index:0;
}
.view.is-on{ visibility:visible; pointer-events:auto; z-index:1; }

.rail{
  width:var(--rail-w); flex:0 0 var(--rail-w);
  background:var(--panel); border-right:1px solid var(--line);
  overflow-y:auto; overscroll-behavior:contain;
}
.rail.right{ border-right:0; border-left:1px solid var(--line); }

/* The notes rail is the one people want wider — a comment is somebody else's
   sentence quoted back at you, and a column that fits four words of it is a
   column you read down rather than across. */
.rail.is-notes{ width:var(--notes-w); flex:0 0 var(--notes-w); }
.rail-grip{
  flex:0 0 5px; cursor:col-resize; position:relative; z-index:2;
  background:transparent;
}
.rail-grip::after{
  content:''; position:absolute; inset:0 2px;
  background:var(--accent-line); opacity:0; transition:opacity .12s;
}
.rail-grip:hover::after, .rail-grip.is-dragging::after{ opacity:1; }
body.is-dragging-rail{ cursor:col-resize; user-select:none; }
.rail::-webkit-scrollbar, .canvas::-webkit-scrollbar, .grid-wrap::-webkit-scrollbar{ width:11px; height:11px; }
.rail::-webkit-scrollbar-thumb, .canvas::-webkit-scrollbar-thumb, .grid-wrap::-webkit-scrollbar-thumb{
  background:#34313f; border-radius:8px; border:3px solid transparent; background-clip:padding-box;
}
.canvas::-webkit-scrollbar-thumb{ background:#2a2833; background-clip:padding-box; }

.rail-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 14px 8px; font-size:11.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--dimmer);
}
.rail-head button{ color:var(--dim); font-size:16px; line-height:1; padding:2px 5px; border-radius:5px; }
.rail-head button:hover{ background:var(--panel-2); color:var(--ink); }

.stage{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* --- toolbar ------------------------------------------------------------- */

.toolbar{
  height:var(--toolbar-h); flex:0 0 auto;
  display:flex; align-items:center; gap:4px; padding:0 12px;
  background:var(--panel); border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none;
}
.toolbar::-webkit-scrollbar{ display:none; }
.tsep{ width:1px; height:20px; background:var(--line); margin:0 6px; flex:0 0 auto; }

.tbtn{
  min-width:32px; height:32px; padding:0 9px; border-radius:6px;
  color:var(--dim); display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; flex:0 0 auto;
}
.tbtn:hover{ background:var(--panel-2); color:var(--ink); }
.tbtn.is-on{ background:var(--accent-soft); color:var(--accent); }
.tbtn.b{ font-weight:700; }
.tbtn.i{ font-style:italic; font-family:Georgia, serif; }
.tbtn.u{ text-decoration:underline; }
.tbtn svg{ width:15px; height:15px; flex:0 0 auto; }
.tbtn > span{ margin-left:6px; font-size:13px; }
#toggle-notes{ padding:0 10px; }

select.tsel, input.tnum{
  height:32px; background:var(--bg); border:1px solid var(--line);
  border-radius:6px; padding:0 8px; color:var(--ink); flex:0 0 auto;
}
select.tsel:focus, input.tnum:focus{ outline:none; border-color:var(--accent); }
input.tnum{ width:64px; text-align:right; font-variant-numeric:tabular-nums; }

.spacer{ flex:1; }

/* --- the editor canvas --------------------------------------------------- */

.canvas{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:34px 0 200px;
  background:
    radial-gradient(120% 80% at 50% 0%, #1b1a22 0%, var(--bg) 60%);
  /* Safe, so a paper zoomed wider than the canvas scrolls from its left
     edge instead of losing that edge behind the rail. */
  display:flex; flex-direction:column; align-items:safe center;
}

.paper-box{ flex:0 0 auto; }
.paper{
  position:relative;
  background:var(--paper);
  box-shadow:var(--shadow);
  border-radius:2px;
  transform-origin:top left;
}
.paper .wd-flow{ position:relative; z-index:2; }

/* Seams: where one half page ends and the next begins. */
.seams{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.wd-seam{
  position:absolute; left:0; right:0; height:0;
  border-top:1px dashed var(--accent-line);
}
.wd-seam::after{
  content:''; position:absolute; left:0; right:0; top:-9px; height:9px;
  background:linear-gradient(to bottom, rgba(0,0,0,.055), rgba(0,0,0,0));
}
.wd-seam.is-end{ border-top-style:dotted; border-top-color:rgba(0,0,0,.22); }
.wd-seam-label{
  position:absolute; right:calc(100% + 10px); top:-8px;
  font:600 9.5px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); white-space:nowrap;
}
.wd-seam.is-end .wd-seam-label{ color:var(--dimmer); }

.wd-section{ outline:none; }
/* Writing that has just come over from the drafting room, said once. */
.wd-section.is-arrived{ animation:arrived 1.6s ease-out; }
@keyframes arrived{
  0%, 40%{ background:var(--note); }
  100%{ background:rgba(240,183,43,0); }
}
.wd-section:focus-visible{ outline:none; }

.wd-flow figure{ position:relative; cursor:pointer; }
.wd-flow figure.is-selected{ outline:2px solid var(--accent); outline-offset:3px; }
.wd-flow figure img{ background:#f2f2f4; }

/* A forced break, drawn as a rule through the middle of its gap. */
.wd-flow .wd-break::before{
  content:''; position:absolute; left:0; right:0; top:50%;
  border-top:1px dashed rgba(0,0,0,.17);
}
.wd-flow .wd-break::after{
  content:'page break';
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--paper); padding:0 8px;
  font:600 8.5px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase;
  color:#bfbaca; pointer-events:none;
}
/* Not on the previews or the printed sheet: a page break is a thing the
   editor tells you about, not a thing that appears on the paper. The gap
   itself has to stay, because the page offsets are measured through it. */
.wd-flow-clone .wd-break::before,
.wd-flow-clone .wd-break::after{ display:none; }

/* --- figure popover ------------------------------------------------------ */

.figbar{
  position:absolute; z-index:40; display:none;
  background:var(--panel-2); border:1px solid var(--line); border-radius:9px;
  padding:7px 9px; gap:8px; align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.figbar.is-on{ display:flex; }
.figbar input[type=range]{ width:96px; accent-color:var(--accent); }
.figbar .val{ width:38px; text-align:right; color:var(--dim);
              font-variant-numeric:tabular-nums; font-size:13px; }

/* --- settings rail ------------------------------------------------------- */

.group{ border-bottom:1px solid var(--line-soft); }
.group > summary{
  list-style:none; cursor:pointer; padding:11px 13px;
  font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--dimmer); display:flex; align-items:center; gap:7px;
}
.group > summary::-webkit-details-marker{ display:none; }
.group > summary::before{
  content:''; width:5px; height:5px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(-45deg) translate(-1px,-1px);
  transition:transform .15s;
}
.group[open] > summary::before{ transform:rotate(45deg) translate(-1px,-1px); }
.group > summary:hover{ color:var(--dim); }
.group-body{ padding:2px 13px 14px; display:flex; flex-direction:column; gap:9px; }

.field{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.field > label{ color:var(--dim); font-size:13.5px; flex:1; min-width:0; }
.field select, .field input[type=text], .field input[type=number]{
  background:var(--bg); border:1px solid var(--line); border-radius:6px;
  height:30px; padding:0 8px; min-width:0;
}
.field select{ flex:0 0 136px; }
.field input[type=number]{ flex:0 0 68px; text-align:right;
                           font-variant-numeric:tabular-nums; }
.field input:focus, .field select:focus{ outline:none; border-color:var(--accent); }
.field input[type=checkbox]{ accent-color:var(--accent); width:15px; height:15px; }

.quad{ display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
.quad .field{ flex-direction:column; align-items:stretch; gap:3px; }
.quad .field > label{ font-size:11.5px; color:var(--dimmer);
                      letter-spacing:.04em; text-transform:uppercase; }
.quad .field input{ flex:1 1 auto; width:100%; }

.seg{ display:flex; background:var(--bg); border:1px solid var(--line);
      border-radius:7px; padding:2px; gap:2px; }
/* Horizontal padding, not just vertical: in a rail the buttons are stretched
   by `flex:1` and look fine on their own, but in a toolbar the group is only
   as wide as its labels and they end up shoulder to shoulder. */
.seg button{
  flex:1; padding:5px 12px; border-radius:5px;
  color:var(--dim); font-size:13.5px; white-space:nowrap;
}
.seg button.is-on{ background:var(--panel-2); color:var(--ink); }

.field.stack{ flex-direction:column; align-items:stretch; gap:5px; }
.field.stack > label{ flex:0 0 auto; }

.hint{ color:var(--dimmer); font-size:13.5px; line-height:1.5; }
.hint code{ font-family:'Courier Prime', ui-monospace, monospace;
            background:var(--bg); padding:1px 4px; border-radius:3px; }

/* --- section list -------------------------------------------------------- */

.sections{ padding:0 8px 20px; display:flex; flex-direction:column; gap:4px; }
.sec{
  border:1px solid var(--line-soft); border-radius:8px; background:var(--panel-2);
  padding:8px 9px; cursor:grab; transition:border-color .12s, transform .12s;
}
.sec:hover{ border-color:var(--line); }
.sec.is-active{ border-color:var(--accent); }
.sec.is-dragging{ opacity:.35; }
.sec.is-over{ border-color:var(--accent); border-style:dashed; }
.sec-top{ display:flex; align-items:center; gap:7px; }
.sec-grip{ color:var(--dimmer); font-size:12px; letter-spacing:-2px; cursor:grab; }
.sec-name{
  flex:1; background:transparent; border:0; padding:1px 2px; font-weight:500;
  border-radius:4px; min-width:0;
}
.sec-name:focus{ outline:none; background:var(--bg); }
.sec-del{ color:var(--dimmer); font-size:14px; padding:0 3px; border-radius:4px; opacity:0; }
.sec:hover .sec-del{ opacity:1; }
.sec-del:hover{ color:var(--accent); }
.sec-meta{ display:flex; align-items:center; gap:8px; margin-top:6px;
           color:var(--dimmer); font-size:12.5px; }
.sec-meta label{ display:flex; align-items:center; gap:4px; cursor:pointer; }
.sec-meta input{ accent-color:var(--accent); width:13px; height:13px; }
.sec-pages{ margin-left:auto; font-variant-numeric:tabular-nums; }

/* --- page previews ------------------------------------------------------- */

/* The gutter is held open whether or not the scrollbar is there yet, so the
   width the zoom is measured against is the width the pages actually get. */
.grid-wrap{ flex:1; min-width:0; overflow-y:auto; scrollbar-gutter:stable;
            padding:26px 30px 120px; }

.wd-page{
  position:relative; background:var(--paper); overflow:hidden;
  box-shadow:var(--shadow); border-radius:1px;
}
.wd-page.is-blank::after{
  content:'blank'; position:absolute; inset:0; display:grid; place-items:center;
  color:#cfcbd8; font:600 10px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase;
}
.wd-page-window{ position:absolute; overflow:hidden; }
.wd-page-window .wd-flow{ position:absolute; }
.wd-folio{ position:absolute; color:#000; line-height:normal; white-space:nowrap; }
.wd-page-tag{
  position:absolute; top:5px; left:6px; z-index:5;
  font:700 9px/1 var(--ui); color:#c3bfcd;
  background:rgba(255,255,255,.9); padding:2px 4px; border-radius:3px;
}
.wd-scaled{ position:relative; overflow:hidden; }

.pgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
        gap:22px 18px; align-items:start; }
.wd-cell{ display:flex; flex-direction:column; align-items:center; gap:6px;
          position:relative; user-select:none; cursor:grab; }
.wd-cell-cap{ font-size:12px; color:var(--dimmer); letter-spacing:.05em;
             font-variant-numeric:tabular-nums; }

/* The pages of a selected section. A page stands for its section. */
.wd-cell .wd-scaled{ outline:0 solid transparent; outline-offset:4px;
                     transition:outline-color .12s; }
.wd-cell.is-picked .wd-scaled{ outline:2px solid var(--accent); }
.wd-cell.is-picked .wd-cell-cap{ color:var(--accent); }
.wd-cell.is-dragging{ opacity:.35; }

/* Where dragged sections will land: a line in the gap beside the page. */
.wd-cell.is-drop-before::before, .wd-cell.is-drop-after::before{
  content:''; position:absolute; top:0; bottom:22px; width:3px;
  background:var(--accent); border-radius:2px; pointer-events:none;
}
.wd-cell.is-drop-before::before{ left:-10px; }
.wd-cell.is-drop-after::before{ right:-10px; }

/* Facing pages, for a booklet in Print & fold. The two halves abut at the
   fold; the outside of a cover is empty room so the cover keeps its side. */
.wd-spread{ display:flex; align-items:flex-start; }
.wd-spread .wd-cell .wd-page{ border-radius:0; }
.wd-spread .wd-cell.is-right .wd-page{ box-shadow:var(--shadow), inset 1px 0 0 rgba(0,0,0,.14); }
.wd-spread .wd-cell.is-left .wd-page{ box-shadow:var(--shadow), inset -1px 0 0 rgba(0,0,0,.14); }
.wd-spread .wd-cell.is-drop-before::before{ left:-2px; }
.wd-spread .wd-cell.is-drop-after::before{ right:-2px; }
.wd-void{ flex:0 0 auto; }

/* --- sheets -------------------------------------------------------------- */

.sheets{ display:flex; flex-direction:column; gap:34px; align-items:flex-start; }
.wd-sheet-group{ display:flex; flex-direction:column; gap:9px; }
.wd-sheet-head{ display:flex; align-items:baseline; gap:12px; color:var(--dim); font-size:13.5px; }
.wd-sheet-head b{ color:var(--ink); }
.wd-sheet-pages{ color:var(--dimmer); font-family:'Courier Prime', monospace; font-size:12.5px; }
.wd-sheet-wrap{ display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.wd-sheet{ position:relative; display:flex; background:var(--paper);
          box-shadow:var(--shadow); overflow:hidden; }
.wd-sheet-half{ box-shadow:none; border-radius:0; }
.wd-fold{ position:absolute; left:50%; top:0; bottom:0; width:0;
         border-left:1px dashed rgba(0,0,0,.22); }

/* --- print pane ---------------------------------------------------------- */

.print-side{ width:290px; flex:0 0 290px; background:var(--panel);
             border-right:1px solid var(--line); overflow-y:auto; padding-bottom:30px; }
.export-box{ padding:13px; display:flex; flex-direction:column; gap:10px; }
.export-box .btn{ width:100%; padding:9px; font-weight:600; }
.status{ color:var(--dim); font-size:13.5px; min-height:18px; }
.status.err{ color:var(--accent); }

.summary{ padding:0 13px 14px; }
.summary dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:13.5px; }
.summary dt{ color:var(--dimmer); }
.summary dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums; }

.order-map{
  font-family:'Courier Prime', ui-monospace, monospace; font-size:11px;
  line-height:1.7; color:var(--dim); background:var(--bg);
  border:1px solid var(--line-soft); border-radius:8px; padding:9px 11px;
  white-space:pre; overflow-x:auto; margin:0 13px;
}

/* --- misc ---------------------------------------------------------------- */

.empty{ color:var(--dimmer); padding:30px; text-align:center; font-size:13.5px; }

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
  background:var(--panel-2); border:1px solid var(--line); border-radius:9px;
  padding:9px 15px; box-shadow:0 12px 34px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:80;
  max-width:min(560px, 84vw);
}
.toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err{ border-color:var(--accent); }

.zoom{ display:flex; align-items:center; gap:7px; color:var(--dim); font-size:13px; }
.zoom input{ width:96px; accent-color:var(--accent); }

/* --- stages along the top ------------------------------------------------ */

.tabs button{ display:flex; align-items:center; gap:7px; }
.tnum{
  display:grid; place-items:center; width:17px; height:17px; border-radius:50%;
  font:600 10px/1 var(--ui); color:var(--dimmer);
  border:1px solid var(--line); background:var(--bg);
}
.tabs button.is-on .tnum{ border-color:var(--accent); color:var(--accent); }
.tbadge{
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  display:grid; place-items:center; background:var(--accent); color:var(--on-accent);
  font:700 10.5px/1 var(--ui); font-variant-numeric:tabular-nums;
}
.tbadge.is-quiet{ background:var(--dimmer); min-width:8px; height:8px; padding:0;
                  font-size:0; align-self:center; }
.tabs button.is-on .tbadge.is-quiet{ background:var(--accent); }
.tlabel{ font-size:14px; font-weight:600; margin-right:8px; }
.seg.vertical{ flex-direction:column; }
.seg.vertical button{ text-align:left; padding:6px 8px; }

.banner{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:11px 16px; font-size:14px; color:var(--dim);
  background:linear-gradient(90deg, var(--accent-soft), transparent 70%);
  border-bottom:1px solid var(--line);
}
.banner b{ color:var(--ink); }
.banner .btn{ margin-left:auto; flex:0 0 auto; }

/* A rail that folds flat against the edge of the stage. The width goes to
   zero rather than the rail going display:none, so it slides rather than
   blinking, and what is inside it keeps its scroll position. */
.rail.is-folded{
  width:0; flex:0 0 0; overflow:hidden; border-right-width:0;
}
.rail-fold{
  position:relative; flex:0 0 19px; align-self:stretch; z-index:3;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:0; border-right:1px solid var(--line);
  color:var(--dim); cursor:pointer; padding:0;
  /* The rail's own right border would double up with this one. */
  margin-left:-1px;
}
/* A chip behind the arrow. On a strip this narrow an arrow on its own reads
   as a mark in the seam rather than as something to press. */
.rail-fold::before{
  content:''; position:absolute; left:2px; right:2px; top:50%;
  height:34px; margin-top:-17px;
  background:var(--panel-2); border:1px solid var(--accent-edge);
  border-radius:3px;
}
.rail-fold:hover{ color:var(--accent); }
.rail-fold:hover::before{
  background:var(--accent-soft); border-color:var(--accent-edge);
}
.rail-fold:focus-visible::before{ border-color:var(--accent); }
.rail-fold:focus-visible{ outline:none; }
.rail-fold-arrow{
  position:relative; z-index:1;
  width:7px; height:7px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translate(-1px,-1px);
}
/* Pointing the way it will move: out to the stage when open, back to the
   edge when folded. */
.rail-fold[aria-expanded="true"] .rail-fold-arrow{
  transform:rotate(135deg) translate(-1px,-1px);
}

/* The filter sits at the head of the list it filters. */
.rail-filter{ padding:0 13px 11px; border-bottom:1px solid var(--line-soft); }
.rail-filter .seg{ width:100%; }

/* Who the notes get signed by, stated rather than asked: the field itself is
   on the desk, because the answer is the same for every document. */
.signing{ font-size:13px; line-height:1.5; color:var(--dim); }
.signing b{ color:var(--ink); font-weight:600; }
.signing.is-unset b{ color:var(--dim); font-weight:400; font-style:italic; }

/* A part of the application that is honestly not finished. Said plainly and
   above the panel it applies to, so it is read before anything is clicked. */
.wip{
  display:flex; gap:9px; margin:0 13px 4px; padding:10px 12px;
  border:1px solid rgba(255,196,84,.28); border-radius:3px;
  background:rgba(255,196,84,.06);
  font-size:12.5px; line-height:1.5; color:#c9b48c;
}
.wip-mark{ flex:0 0 auto; font-size:14px; line-height:1.35; }

/* Reading somebody else's draft: the stages that would change it are gone. */
.reader-only{ display:none; }
body.is-reviewing .reader-only{ display:block; }
body.is-reviewing .rail-head.reader-only{ display:flex; }
body.is-reviewing .owner-only,
body.is-reviewing .tabs button[data-view="draft"],
body.is-reviewing .tabs button[data-view="format"],
body.is-reviewing .tabs button[data-view="save"],
body.is-reviewing #edit-toolbar,
body.is-reviewing .rail.left .sec-del,
body.is-reviewing .sec-meta{ display:none; }
body.is-reviewing .doc-title{ pointer-events:none; }
body.is-reviewing .sec{ cursor:pointer; }

/* --- draft --------------------------------------------------------------- */
/* Not paper yet. The drafting room is dark on purpose: what happens here is
   getting words out of your head, and a page you can see the shape of invites
   you to start fussing with the shape. */

.draft-stage{ position:relative; }

/* The one line of instruction the room needs, on its own line — in the
   toolbar it fought the buttons for room and folded them in half. */
.draft-note{
  flex:0 0 auto; padding:10px 16px;
  font-size:13.5px; line-height:1.45; color:var(--dim);
  background:var(--panel); border-bottom:1px solid var(--line);
}

.draft-canvas{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  position:relative; padding:8vh 0 44vh;
  display:flex; flex-direction:column; align-items:center;
  background:radial-gradient(120% 70% at 50% 0%, #191821 0%, #0f0e14 70%);
  scrollbar-width:none;
}
.draft-canvas::-webkit-scrollbar{ display:none; }
.draft-canvas.is-focusmode{
  /* `--fade-end` is where full contrast begins, measured from the top of the
     box, and it is set from the position of the line being typed rather than
     from a fixed fraction of the window. It is 0 until there is something
     behind you, which is when this whole rule does nothing at all. */
  --fade-end:0px;
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.16) 0, #000 var(--fade-end), #000 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.16) 0, #000 var(--fade-end), #000 100%);
}

.draft-column{
  width:min(660px, 88vw);
  font-family:'Courier Prime', ui-monospace, Menlo, monospace;
  font-size:18px; line-height:1.8; color:#c7c2d5;
  transition:transform .06s;
}
.draft-column.is-nudged{ animation:refuse .22s ease-in-out; }
@keyframes refuse{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-3px); }
  75%{ transform:translateX(3px); }
}

.dline{ white-space:pre-wrap; word-break:break-word; min-height:1.85em; }

/* The line being typed, brought forward. The fade behind you says how far you
   have come; this says where you are. Without it the sentence you are
   actually writing is the same weight as the one you finished a minute ago. */
.dline.is-current{ color:#fff; }
.dline.is-current .mk{ color:#8b83a6; }

/* A blank line is a paragraph break, not a line of nothing, so it does not
   need a whole line's height — except the last one, which is holding a caret. */
.dline.is-blank{ min-height:.85em; }
.dline.is-blank.is-current{ min-height:1.85em; }

.dline.is-h{ font-weight:700; color:#fff; }
.dline.is-h1{ font-size:20px; line-height:1.5; margin:.9em 0 .2em; }
.dline.is-h2{ font-size:17px; line-height:1.55; margin:.8em 0 .15em; }
.dline.is-h3{ font-size:15px; margin:.7em 0 .1em; }
.dline.is-li{ padding-left:1.4em; text-indent:-1.4em; }
.dline.is-quote{ color:#b6b0c6; font-style:italic; }
.dline .mk{ color:#5b5570; font-style:normal; }
.dline b{ color:#fff; }
.dline em{ color:#e8e3f2; }

.dcaret{
  display:inline-block; width:.62em; height:1.05em; vertical-align:-.2em;
  background:var(--accent); margin-left:1px;
  animation:blink 1.06s steps(1) infinite;
}
@keyframes blink{ 0%,55%{ opacity:1 } 56%,100%{ opacity:0 } }

/* The real text field: present for the operating system, absent to the eye.
   One pixel at the foot of the stage rather than a sheet laid over the text.
   Focus does not care how big a field is, and every click is caught by the
   canvas and handed here anyway.

   It sits outside the canvas on purpose. A browser scrolls the focused field
   into view on every keystroke, and inside the canvas this field resolved to a
   fixed offset near the top of the scrollable area, so on a draft longer than
   one screen every keystroke scrolled back up to it and undid the pin. Out
   here the only scroll container above it is the page, and the page does not
   scroll. */
.draft-input{
  position:absolute; left:0; bottom:0; width:1px; height:1px;
  border:0; padding:0; margin:0; resize:none; background:transparent;
  color:transparent; caret-color:transparent; opacity:0;
  font:inherit; outline:none;
}

.draft-refusal{
  position:absolute; left:0; top:0; max-width:min(430px, 70vw);
  padding:9px 14px; border-radius:9px;
  background:var(--panel-2); border:1px solid var(--accent);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  font:500 15px/1.4 var(--ui); color:var(--ink);
  pointer-events:none; z-index:20;
  opacity:0; transform:translateY(-4px);
  transition:opacity .16s, transform .16s;
}
.draft-refusal.is-on{ opacity:1; transform:translateY(0); }

.draft-meter{
  display:flex; align-items:center; gap:12px; margin-right:10px;
  font-size:13.5px; color:var(--dim); font-variant-numeric:tabular-nums;
}
.draft-meter b{ color:var(--ink); font-weight:600; }
.draft-bar{ width:80px; height:4px; border-radius:2px; background:var(--line); overflow:hidden; }
.draft-bar i{ display:block; height:100%; background:var(--accent); }

.keys{ padding:0 13px 24px; display:grid; grid-template-columns:auto 1fr;
       gap:7px 12px; font-size:13.5px; color:var(--dim); align-items:baseline; }
.keys kbd{
  font:600 12px/1.6 var(--ui); color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  padding:1px 5px; white-space:nowrap;
}
.keys span{ color:var(--dimmer); }

/* --- comment marks over the text ----------------------------------------- */

.marks{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.wd-mark{
  position:absolute; pointer-events:none;
  background:var(--note);
  box-shadow:inset 0 -1.5px 0 var(--note-rule);
  border-radius:2px;
}
.wd-mark.is-active{ background:rgba(46,196,182,.34);
                    box-shadow:inset 0 -1.5px 0 var(--accent); }

.popbar{
  position:absolute; z-index:50; display:none;
  background:var(--panel-2); border:1px solid var(--line); border-radius:9px;
  padding:5px; box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.popbar.is-on{ display:block; }

/* --- comment threads ----------------------------------------------------- */

.thread-list{ display:flex; flex-direction:column; gap:11px;
              max-width:660px; padding-bottom:60px; }
.thread-list.is-compact{ padding:8px 10px 40px; gap:8px; max-width:none; }

.thread{
  border:1px solid var(--line-soft); border-radius:10px; background:var(--panel-2);
  padding:11px 12px; transition:border-color .12s;
}
.thread:hover{ border-color:var(--line); }
.thread.is-active{ border-color:var(--accent); }
.thread.is-resolved{ opacity:.5; }
.thread.is-orphaned{ border-style:dashed; }

.thread-quote{
  border-left:2px solid var(--note-strong); padding:1px 0 1px 9px;
  color:var(--dim); font-size:13.5px; line-height:1.5; margin-bottom:9px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.thread.is-orphaned .thread-quote{ border-left-color:var(--dimmer);
                                   text-decoration:line-through; }
.thread-note{ font-size:14px; line-height:1.55; white-space:pre-wrap; }
.thread-by{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px;
            font-size:12.5px; color:var(--dimmer); }
.thread-by b{ color:var(--dim); font-weight:600; }
.thread-lost{ font-size:12.5px; color:var(--accent); margin-top:7px; }

.thread-actions{ display:flex; gap:6px; margin-top:9px; }
.thread-actions button{
  font-size:13px; color:var(--dim); padding:4px 9px; border-radius:6px;
  border:1px solid var(--line-soft);
}
.thread-actions button:hover{ border-color:var(--dimmer); color:var(--ink); }
.thread-actions .go{ margin-left:auto; }

.reply{ margin:8px 0 0 12px; padding-left:9px; border-left:1px solid var(--line);
        font-size:13.5px; line-height:1.55; }

.reply-box, .paste-box, .text-input{
  width:100%; background:var(--bg); border:1px solid var(--line);
  border-radius:7px; padding:7px 9px; resize:vertical;
  font:14px/1.55 var(--ui); color:var(--ink);
}
.text-input{ resize:none; }
.reply-box:focus, .paste-box:focus, .text-input:focus{
  outline:none; border-color:var(--accent);
}
.reply-box{ margin-top:8px; }

.tiny-toggle{ display:flex; align-items:center; gap:5px; text-transform:none;
              letter-spacing:0; font-weight:500; font-size:12px; cursor:pointer; }
.tiny-toggle input{ accent-color:var(--accent); width:13px; height:13px; }

/* --- link dialog --------------------------------------------------------- */

.sheetbox{
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  color:var(--ink); padding:18px; max-width:560px; width:min(560px, 90vw);
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.sheetbox::backdrop{ background:rgba(9,8,13,.62); }
.sheetbox h3{ margin:0 0 6px; font-size:16px; }
.sheetbox p{ margin:0 0 12px; }
.sheetbox textarea{
  width:100%; background:var(--bg); border:1px solid var(--line);
  border-radius:7px; padding:8px 10px; resize:vertical; color:var(--dim);
  font:12.5px/1.6 'Courier Prime', ui-monospace, monospace; word-break:break-all;
}
.sheetbox .row{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.sheetbox .btn{ padding:8px 15px; }
.sheetbox .btn.primary.danger{ background:var(--accent); border-color:var(--accent); }
.ask-body{ color:var(--dim); font-size:14px; line-height:1.55; }
#ask-input{ margin-top:4px; }

/* --- narrow ------------------------------------------------------------- */

@media (max-width:1280px){ :root{ --rail-w:238px; } }
@media (max-width:980px){ .rail.right{ display:none; } }

/* --- screens this does not fit on ---------------------------------------- */
/*
   Both dimensions are tested, because a phone held sideways is wide and
   short. The width that matters is the paper's: a US Letter page is 816px
   before either rail is drawn, so there is no arrangement of this interface
   that works below about nine hundred.
*/

.too-small{ display:none; }

@media (max-width:900px), (max-height:500px){
  .app, .figbar, .popbar, .toast{ display:none !important; }

  .too-small{
    display:grid; place-items:center;
    position:fixed; inset:0; z-index:200; padding:32px; text-align:center;
    background:radial-gradient(120% 80% at 50% 0%, #1b1a22 0%, var(--bg) 60%);
  }
  .too-small .brand{
    border-right:0; padding-right:0; margin-bottom:16px; font-size:13px;
  }
  .too-small p{
    margin:0; max-width:20em;
    font-size:17px; line-height:1.6; color:var(--dim);
  }
}

/* --- the desk ------------------------------------------------------------ */
/*
   Everywhere else in this application the chrome is dark so the paper is the
   brightest thing on screen. The desk keeps that and takes it a step further:
   a warm, worn surface with the grain running across it, and the documents
   lying on it as sheets of paper. Nothing here is a row in a list.
*/

.desk{
  position:fixed; inset:0; z-index:150; overflow-y:auto; overscroll-behavior:contain;
  background:
    /* the lamp */
    radial-gradient(80% 55% at 50% -8%, rgba(255,232,196,.10), rgba(255,232,196,0) 70%),
    /* the grain */
    repeating-linear-gradient(96deg,
      rgba(255,255,255,.014) 0 2px, rgba(0,0,0,.020) 2px 5px),
    /* the wood */
    linear-gradient(168deg, #2a2119 0%, #211a14 42%, #17120e 100%);
}
.desk::after{
  content:''; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 50% 40%, rgba(0,0,0,0), rgba(0,0,0,.45));
}

.desk-sheet{ max-width:1180px; margin:0 auto; padding:56px 40px 120px; position:relative; z-index:1; }

.desk-head{ display:flex; align-items:flex-end; gap:24px; margin-bottom:44px; }
.desk-head h1{
  margin:0; font-size:15px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#6fd8cb;
}
/* The name in the heading is the field. It is underlined so it reads as
   something you can type in, rather than as part of the title. */
.desk-name{
  display:inline-block; min-width:1.2em; padding:0 1px;
  border-bottom:1px dashed rgba(111,216,203,.42);
  color:inherit; font:inherit; letter-spacing:inherit; outline:none;
  cursor:text; white-space:pre; caret-color:#6fd8cb;
}
.desk-name:hover{ border-bottom-color:#6fd8cb; background:rgba(111,216,203,.07); }
.desk-name:focus{
  border-bottom:1px solid #6fd8cb; background:rgba(111,216,203,.10);
}
.desk-name:empty::before{
  content:attr(data-placeholder); color:rgba(111,216,203,.45);
}

.desk-sub{ margin:7px 0 0; font-size:13.5px; color:#9d9285; }
.desk-actions{ margin-left:auto; display:flex; gap:9px; flex:0 0 auto; }
.desk .btn{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.desk .btn:hover{ border-color:rgba(255,255,255,.28); }
.desk .btn.primary{ background:var(--accent); border-color:var(--accent); }

/* --- the folder ---------------------------------------------------------- */
/*
   On the desk rather than inside the Save stage. Where the work is kept is a
   fact about the shelf, not about any one document, and a reader who only
   meets the question at the end of a piece has been unprotected for the whole
   length of it.
*/

.desk-folder{
  display:flex; align-items:center; gap:22px;
  margin:-20px 0 40px; padding:14px 17px;
  border:1px solid rgba(255,255,255,.09); border-radius:3px;
  background:rgba(255,255,255,.028);
}
.desk-folder.is-on{ border-color:var(--accent-edge); background:rgba(46,196,182,.07); }
/* Not the small-caps treatment the pile labels get: these say a sentence,
   and one of them says a folder name, which has to read the way it is
   spelled on disk rather than shouted. */
.desk-folder strong{
  display:block; font-size:13.5px; font-weight:700; color:#cbbfae;
}
.desk-folder.is-on strong{ color:#6fd8cb; }
.desk-folder-note{
  display:block; margin-top:5px; max-width:74ch;
  font-size:13px; line-height:1.5; color:#9d9285;
}
.desk-folder-actions{ margin-left:auto; display:flex; gap:9px; flex:0 0 auto; }

/* --- piles --------------------------------------------------------------- */

.pile{ margin-bottom:40px; }
.pile-label{
  display:flex; align-items:center; gap:11px; margin:0 0 15px;
  font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:#8d7f6d;
}
/* A rule that runs off toward the edge of the desk, like a tray divider,
   with the count parked at the far end of it. */
.pile-label .rule{
  flex:1; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
}
.pile-count{ color:#6d6153; font-weight:600; letter-spacing:.04em; }

.pile-sheets{ display:flex; flex-wrap:wrap; gap:22px; }

/* --- a document, as a sheet of paper ------------------------------------- */

.sheet-card{
  position:relative; width:212px; min-height:258px;
  display:flex; flex-direction:column;
  background:#fbfaf7; color:#17140f; border-radius:2px;
  padding:20px 19px 14px; cursor:pointer; text-align:left;
  box-shadow:
    0 1px 1px rgba(0,0,0,.32),
    0 12px 26px rgba(0,0,0,.40);
  transition:transform .16s ease, box-shadow .16s ease;
}
/* Paper does not land square. The angle is derived from the document's id, so
   a given sheet always lies the same way round. */
.sheet-card{ transform:rotate(var(--tilt, 0deg)); }
.sheet-card:hover{
  transform:rotate(0deg) translateY(-4px);
  box-shadow:0 2px 2px rgba(0,0,0,.3), 0 20px 40px rgba(0,0,0,.5);
}
.sheet-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.sheet-title{
  margin:0 0 9px; font-family:'Lora', Georgia, serif;
  font-size:16px; line-height:1.25; font-weight:700; color:#17140f;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sheet-peek{
  flex:1; margin:0; font-family:'Karla', system-ui, sans-serif;
  font-size:12.5px; line-height:1.5; color:#4c463c;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}
.sheet-peek.is-empty{ font-style:italic; color:#9a9184; }

.sheet-foot{
  margin-top:12px; padding-top:9px; border-top:1px solid rgba(0,0,0,.09);
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:#7d7466; font-variant-numeric:tabular-nums;
}
.sheet-foot .dot{ opacity:.5; }

.sheet-menu{
  position:absolute; top:8px; right:8px; display:flex; gap:2px;
  opacity:0; transition:opacity .14s;
}
.sheet-card:hover .sheet-menu, .sheet-card:focus-within .sheet-menu{ opacity:1; }
.sheet-menu button, .sheet-menu select{
  border:0; background:rgba(0,0,0,.06); color:#4c463c; border-radius:5px;
  font:500 11px/1 var(--ui); padding:5px 7px; cursor:pointer;
}
.sheet-menu button:hover{ background:rgba(0,0,0,.13); color:#000; }
.sheet-menu .del:hover{ background:var(--accent); color:var(--on-accent); }

/* A fresh sheet, waiting. */
.sheet-card.is-new{
  background:rgba(255,255,255,.035); color:#b6a894;
  border:1px dashed rgba(255,255,255,.18); box-shadow:none;
  align-items:center; justify-content:center; text-align:center;
}
.sheet-card.is-new:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.38); box-shadow:none; }
.sheet-card.is-new span{ font-size:13.5px; }

.desk-empty{ color:#a2937f; font-size:14px; max-width:34em; line-height:1.6; }

/* The status control in the top bar. */
.status-pick{
  background:transparent; border:1px solid var(--line); border-radius:6px;
  height:30px; padding:0 6px; color:var(--dim); font-size:12.5px; max-width:160px;
}
.status-pick:hover{ border-color:var(--dimmer); color:var(--ink); }
.status-pick:focus{ outline:none; border-color:var(--accent); }

.brand{ font:inherit; cursor:pointer; }
.brand:hover{ color:#6fd8cb; }
/* Nothing behind the desk should be reachable while it is open. */
body.is-desk .app{ pointer-events:none; }

/* --- coming up ----------------------------------------------------------- */
/*
   Boot has several things to do before the interface means anything: read the
   library, work out whether you were at the desk or in a document, switch to
   the stage you were on, load every typeface, and break the pages against
   those faces. Each of those moves something. Rather than let you watch them
   happen one after another, nothing is shown until they have all finished.

   `visibility`, not `display`, on the application underneath: the galley has
   to be laid out from the first frame, because the fonts are measured against
   it and one wrong metric moves every page break in the document.

   A timer takes this down regardless of what boot manages, so a failure on
   the way up cannot leave a permanently blank screen behind.
*/
body.is-booting .app{ visibility:hidden; }

.booting{
  position:fixed; inset:0; z-index:300;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  background:radial-gradient(120% 80% at 50% 0%, #1b1a22 0%, var(--bg) 60%);
  transition:opacity .28s ease;
}
body:not(.is-booting) .booting{
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .28s ease, visibility 0s .28s;
}
.booting .brand{ border-right:0; padding:0; font-size:13px; }
.booting-bar{
  width:132px; height:2px; border-radius:2px;
  background:var(--line); overflow:hidden;
}
.booting-bar i{
  display:block; width:40%; height:100%; border-radius:2px;
  background:var(--accent);
  animation:booting-slide 1.15s ease-in-out infinite;
}
@keyframes booting-slide{
  0%{ transform:translateX(-105%); }
  100%{ transform:translateX(255%); }
}
/* A screen too small for the application is told so directly, not made to
   watch it load first. */
@media (max-width:900px), (max-height:500px){ .booting{ display:none; } }