/* workspace.css -- the batch workspace's own chrome (W4): the top bar, the page strip and the
 * panes. The grid editor inside it is styled by grid_editor_view.css, scoped under .ge, so the
 * two cannot style each other.
 *
 * D1: this file used to carry a COOL BLUE-GREY Tailwind palette (#1b1d22 page, #1d4ed8 active
 * tab, #15803d green primary) while every screen either side of it was warm. The pilot's own
 * path is /book (warm) -> grid check (cool) -> review (warm), which read as two products. Every
 * colour here is now a token from tokens.css, and the titles have the serif they never had.
 *
 * D4: the states are told apart by whether the PILOT IS STOPPED, not by whether something is
 * bad. A side not found and a page still to do are --check (orange: look at this); a save that
 * did not happen is --red. The strip used to shout #f87171/#b91c1c for a side the fit simply
 * did not find, which is a thing to look at, not a failure.
 */
html,body{margin:0;height:100%;font:var(--t-help)/1.4 var(--sans);background:var(--bg);color:var(--text);overflow:hidden}
#ws{display:flex;flex-direction:column;height:100%}

#wtop{display:flex;align-items:center;gap:12px;padding:var(--barpad);background:var(--stagebg);border-bottom:1px solid var(--border);flex:none}
#wtop a{color:var(--accent);text-decoration:none}
#wtop a:hover{text-decoration:underline}
#wbook{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
#wtabs{display:flex;gap:4px}
#wtabs button,#wskip,#wempty button{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:var(--r-ctl);padding:5px 12px;cursor:pointer;font:inherit}
#wtabs button:hover,#wskip:hover,#wempty button:hover{background:var(--panel2);border-color:var(--text)}
#wtabs button.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
/* THE COUNT BADGE CARRIES ITS OWN INK. It had a background and no `color`, so it took
   whatever the tab gave it -- and the ACTIVE tab is `#wtabs button.on`, which sets
   `color: var(--bg)`. Near-black text on a near-black badge: Logan's "the Grids count
   badge is black". It reads on both tabs now because it brings both halves. */
.n{display:inline-block;min-width:16px;padding:0 5px;border-radius:8px;background:var(--stagebg);color:var(--text);font-size:var(--t-label);text-align:center}
.n:empty{display:none}
#wnote{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wnote.bad{color:var(--check)}

/* the strip: one tile per page in book order */
#wstrip{display:flex;gap:6px;overflow-x:auto;padding:var(--barpad);background:var(--panel);border-bottom:1px solid var(--border);flex:none;min-height:88px;box-sizing:border-box}
.tile{flex:none;width:96px;cursor:pointer;border:2px solid transparent;border-radius:var(--r-ctl);padding:3px;background:var(--panel2);position:relative;box-sizing:border-box}
.tile:hover{border-color:var(--border)}
.tile.cur{border-color:var(--accent);background:var(--accentbg)}
.tile .th{width:100%;height:50px;background:var(--stagebg) center/cover no-repeat;border-radius:3px}
.tile .lb{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:3px;font-size:var(--t-label)}
.tile .pg{color:var(--muted);font-family:var(--mono)}
.tile .sd{display:flex;gap:2px}
.tile .sd span{display:inline-block;width:15px;height:15px;line-height:15px;text-align:center;border-radius:3px;font-size:10px;font-weight:bold;cursor:pointer;color:var(--bg)}
.tile .sd .ok{background:var(--ok)}
.tile .sd .todo{background:var(--check)}
.tile .sd .nf{background:var(--check)}
/* D7: white is selection, and this is the one place in this file that means it. */
.tile .sd .cur{outline:2px solid var(--sel-outline);box-shadow:0 0 0 3px var(--sel-glow)}
.tile .st{display:block;font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a page whose read FAILED is stopped, so this one stays red (D4). */
.tile .st.failed{color:var(--red)}
.tile .nfm{position:absolute;top:5px;right:5px;background:var(--check);color:var(--bg);font-size:10px;font-weight:bold;border-radius:8px;padding:0 5px}

#wbody{flex:1;position:relative;min-height:0}
#wloading{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--text2);font-size:15px;letter-spacing:.2px}
#wloading[hidden]{display:none}
#wtoast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:min(560px,calc(100vw - 32px));background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:var(--r-ctl);padding:10px 16px;font-size:var(--t-body);box-shadow:0 4px 18px rgba(0,0,0,.4)}
#wtoast[hidden]{display:none}
#pane-grid,#pane-review{position:absolute;inset:0}
#pane-grid[hidden],#pane-review[hidden],#wempty[hidden]{display:none}
#wempty{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:15px;text-align:center;padding:20px}
#wempty .sub{color:var(--muted);font-size:var(--t-help)}

/* the Review tab: a bar over the review page's frame */
#pane-review{display:flex;flex-direction:column}
#rbar{display:flex;align-items:center;gap:12px;padding:var(--barpad);background:var(--panel);border-bottom:1px solid var(--border);flex:none}
#rbar[hidden],#rframe[hidden],#rempty[hidden],#rundo[hidden],#rretry[hidden]{display:none}
#rtitle{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rstate{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rstate.ok{color:var(--ok)}
#rstate.bad{color:var(--red)}
/* :not(.primary) -- A BAR'S GENERIC PAINT MUST NOT FIGHT A SHARED COMPONENT dropped
   into it. `#rbar button` is (1,0,1) and `button.primary` is (0,1,1), so without this
   the bar would repaint the standard primary as an ordinary bar button. Same lesson as
   `.ge button { width: 100% }` squashing the phone note's close button. */
#rbar button:not(.primary){background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:var(--r-ctl);padding:5px 12px;cursor:pointer;font:inherit}
#rbar button:not(.primary):hover:enabled{background:var(--panel2);border-color:var(--text)}
/* the one primary on this screen: cream on dark, like every other primary in the app. */
/* THE SHARED .primary CARRIES THE COLOUR NOW (class in workspace.html). What is left
   here is the one thing the bar genuinely says about it: it is the weightier control
   in the row. The three !important declarations existed only to out-shout
   `#rbar button` above, which no longer claims it. */
#rnext{font-weight:600}
#rnext:disabled{opacity:.45;cursor:default}
/* F2: a dark chrome must not embed a near-white iframe (audit item 28). */
#rframe{flex:1;width:100%;border:0;background:var(--bg);min-height:0}
#rempty{overflow:auto;padding:16px 24px}
#rempty h2{margin:0 0 4px;font-family:var(--serif);font-size:var(--t-sect);color:var(--text)}
#rempty .sub{color:var(--muted);margin:0 0 12px}
.tile .st.done{color:var(--ok)}
.rrow{display:flex;align-items:center;gap:12px;padding:8px 10px;border-bottom:1px solid var(--border);max-width:720px}
.rrow .pg{width:36px;color:var(--muted);font-family:var(--mono)}
.rrow .fn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .rs{width:170px;color:var(--muted)}
.rrow a{color:var(--accent)}
.rrow .off{color:var(--dim)}
/* the embedded grid editor's own way back: the workspace has its own */
.ge #backbook { display: none; }
#rbar #rlist{margin-left:auto;color:var(--muted);font-size:12px;text-decoration:none;white-space:nowrap}
#rbar #rlist:hover{color:var(--text);text-decoration:underline}

/* ==========================================================================================
 * #31 -- the workspace chrome on a phone. The top bar's status truncated to "No book chosen -
 * op..." at 375px and the tabs were squeezed against it; the page strip's tiles and the review
 * bar were built for a desktop row. Nothing here moves above 760px.
 * ========================================================================================== */
@media (max-width: 760px) {
  #wtop { flex-wrap: wrap; row-gap: 4px; padding: 8px 12px; }
  #wbook { max-width: 100%; flex: 1 1 100%; order: -1; }
  /* the note gets its own line rather than competing with the tabs for the last 40px */
  #wnote { flex: 1 1 100%; white-space: normal; }
  #wtabs { flex: 1 1 auto; }
  #wtabs button { flex: 1 1 auto; }
  #wstrip { min-height: 72px; padding: 6px 12px; }
  .tile { width: 76px; }
  .tile .th { height: 38px; }
  #rbar { flex-wrap: wrap; row-gap: 6px; }
  #rtitle { flex: 1 1 100%; }
  #rstate { flex: 1 1 100%; }
  #rnext { margin-left: auto; }
  #rempty { padding: 12px 16px; }
  .rrow { flex-wrap: wrap; row-gap: 2px; }
  .rrow .rs { width: auto; flex: 1 1 100%; }
}

  /* A CHANGE-TEMPLATE RE-READ, WHILE IT RUNS (Logan, 2026-11-12). The dot is the point as much
     as the count is: his complaint was that it looked frozen, and a number that only changes
     every few seconds cannot say "working" on its own.
     `.reread[hidden]` is NOT optional -- an author `display: flex` beats the UA sheet's
     `[hidden] { display: none }`, so without it the banner would never go away. */
  .reread { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; font-size: 14px;
            border: 1px solid var(--border); background: var(--panel); color: var(--text);
            display: flex; align-items: center; gap: 10px; }
  .reread[hidden] { display: none; }
  .reread::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
                    background: var(--accent); animation: rereadpulse 1.2s ease-in-out infinite; }
  @keyframes rereadpulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
  @media (prefers-reduced-motion: reduce) { .reread::before { animation: none; } }