mattrguerra.comHouston area
Matt Guerra
  1. 01AI & Automation
  2. 02Photography
  3. 03Design
  4. 04About
  5. 05Notes
  6. 06Contact
Back to the systems

mattrguerra/meridian-ops-boardmainPrivate on GitHub, published here in full

theme.ts

TypeScript60.4 KB1058 lines

apps/dashboard/src/theme.ts

  1. /**
  2. * The board's entire visual system: tokens, both palettes, every component.
  3. *
  4. * Source health is not in the hue system. Hue means exactly one category
  5. * everywhere (orange is Bitrix task, magenta is waiting on client), so a hue
  6. * cannot also mean "stale" or "failed". Data-integrity state is ink plus
  7. * texture (dot, ring, fine hatch, coarse hatch). Deltas avoid green/red for
  8. * the same reason.
  9. *
  10. * Two palettes, one markup. Everything user-visible reads custom properties;
  11. * `:root[data-theme="dark"]` swaps the values. The dark ramp is a derived
  12. * palette (the brand has no dark version). Two things genuinely break on a
  13. * dark ground and both are handled, not ignored:
  14. * the four-colour rule's ink segment inverts to #eef2f5 (the same substitution
  15. * the brand makes with its reversed logo), and the not-tracked hatch inverts so
  16. * absence stays quieter than measurement: light gray on dark reads as the
  17. * loudest thing on the row, which would make "not tracked" the biggest number.
  18. *
  19. * Print forces the light ramp regardless of theme: paper is light.
  20. */
  22. import { FONT_FACES } from './fonts.js'
  24. /**
  25. * Colour handles for inline styles. These are var() references, not hex.
  26. * Markup that writes `style="background:${C.blue}"` stays theme-aware for
  27. * free; hex here would pin every call site to the light ramp.
  28. */
  29. export const C = {
  30. ink: 'var(--strong)',
  31. blue: 'var(--hue-ours)',
  32. blueDeep: 'var(--hue-todo)',
  33. magenta: 'var(--hue-waiting)',
  34. magentaDark: 'var(--hue-waiting-dark)',
  35. yellow: 'var(--hue-tracker)',
  36. orange: 'var(--hue-task)',
  37. orangeDark: 'var(--hue-task-dark)',
  38. green: 'var(--hue-vendor)',
  39. gray: 'var(--meridian-gray-400)',
  40. grayText: 'var(--text-muted)',
  41. border: 'var(--border-default)',
  42. wash: 'var(--wash)',
  43. } as const
  45. /**
  46. * Work classes keep fixed colors across every surface. Identity, not severity:
  47. * "at vendor" is not worse than "our move", it is a different kind of thing.
  48. */
  49. export const CLASS_COLOR: Record<string, string> = {
  50. ours: C.blue,
  51. client: C.magenta,
  52. waiting: C.magenta,
  53. vendor: C.green,
  54. parked: C.gray,
  55. terminal: C.gray,
  56. }
  58. /** The hatch used wherever a number is absent rather than zero. */
  59. export const UNTRACKED_FILL = 'var(--hatch)'
  61. export const THEME_CSS = `
  62. ${FONT_FACES}
  64. /* ---- tokens --------------------------------------------------------------- */
  65. :root{
  66. /* THE BODY FACE SITS BETWEEN THE DISPLAY FACE AND GEORGIA. The display face
  67. has no em dash, en dash, ellipsis or arrow (not a subsetting choice, the
  68. glyphs are absent from the font), so every "Name: heading" mark this
  69. board draws in it was falling through to Georgia, a serif next to a
  70. condensed display face. Inter carries all of them, so a gap now falls back
  71. to something that belongs here. Georgia stays last as the real-glyph
  72. floor: a fallback miss must never be tofu. */
  73. --font-display:"Anton","Inter",Georgia,serif;
  74. --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  75. --font-mono:ui-monospace,Menlo,Consolas,monospace;
  77. /* Raw brand hues, light ramp. */
  78. --meridian-ink:#0f141d; --meridian-white:#fff;
  79. --meridian-gray-700:#333; --meridian-gray-400:#bdb9c7; --meridian-gray-200:#d7d7d7; --meridian-gray-050:#f5f5f5;
  80. --meridian-blue-050:#f3f6f7; --meridian-blue-100:#d3e2e4;
  82. /* Semantic surfaces and text. The dark block below swaps ONLY these. */
  83. --surface-page:#f3f6f7;
  84. --surface-card:#fff;
  85. --surface-card2:#fbfbfc;
  86. --wash:#f3f6f7;
  87. --slab:#0f141d; /* emphasis bands: drill head, My Day header, footers */
  88. --on-slab:#fff;
  89. --on-slab-dim:#bdb9c7;
  90. --slab-line:#333;
  91. --text-body:#0f141d;
  92. --text-2:#333;
  93. /* 6.3:1 on white, NOT #777181, which is the bare 4.5:1 floor. */
  94. --text-muted:#655f70;
  95. --border-default:#d7d7d7;
  96. --hairline:#ececec;
  97. --strong:#0f141d; /* elev-1 borders, dashed knowledge boundaries, health ink */
  98. --track:#f1f1ef; --tick:#dcdcd8;
  99. --hover-row:#f3f6f7;
  100. --delta-bg:#eef2f5;
  102. /* Hue = category, one meaning each, stated in the on-page legend. */
  103. --hue-ours:#1f7a8c; --hue-ours-dark:#175f6d;
  104. --hue-waiting:#c8325f; --hue-waiting-dark:#9c2449;
  105. --hue-vendor:#70bf4a;
  106. --hue-task:#f99d22; --hue-task-dark:#e18408;
  107. --hue-todo:#175f6d;
  108. --hue-tracker:#f2c94c; --hue-tracker-dark:#b8942a;
  110. /* NOT A CATEGORY HUE, AND DELIBERATELY OUTSIDE THE HUE SYSTEM. Every hue
  111. above means exactly one category (see the note at the top of this file);
  112. this one means "read this before you send mail from someone else's
  113. mailbox" and is used by the compose caveats only. Sam asked for it bright
  114. and large, 2026-09-08, so that whoever sends from a shared mailbox cannot
  115. miss what the board does NOT carry: the Cc, and attachments. 5.9:1 on the
  116. light card. If it ever starts appearing on data, it has become a category
  117. hue and this comment is a lie. */
  118. --caveat:#c40d0d;
  120. /* The signature motif. Never a solid line. */
  121. --meridian-rule:linear-gradient(90deg,#0f141d 0 25%,#1f7a8c 25% 50%,#f2c94c 50% 75%,#c8325f 75%);
  123. /* Textures: "do not read this as a quantity". */
  124. --hatch:repeating-linear-gradient(45deg,#bdb9c7 0 6px,#e6e4ea 6px 12px);
  125. --hatch-ink:repeating-linear-gradient(45deg,#0f141d 0 5px,#fff 5px 10px);
  126. --hatch-fine:repeating-linear-gradient(45deg,#0f141d 0 2px,#fff 2px 4px);
  127. --hatch-ghost:repeating-linear-gradient(45deg,rgba(200,50,95,.32) 0 5px,transparent 5px 10px);
  129. --radius-md:8px; --radius-sm:5px;
  130. --border-rule:2px;
  131. --shadow-menu:0 2px 20px -7px rgba(0,0,0,.2); /* overlays only */
  132. --sticky-tabs:52px;
  134. /* Motion: expressive on load, quiet after. Steady state is 200ms. */
  135. --state:200ms ease;
  136. --transition-default:color var(--state),background-color var(--state),border-color var(--state);
  138. color-scheme:light;
  139. }
  141. /*
  142. * Dark, derived. Every value is a stated derivation from the light ramp:
  143. * see the handoff's ratio table. Hue lifts keep the hue angle so the legend
  144. * still reads as the legend; --hue-todo is fill-only on dark (4.2:1), so
  145. * anything writing to-do TEXT uses --text-body there.
  146. */
  147. :root[data-theme="dark"]{
  148. --surface-page:#0e161c;
  149. --surface-card:#1b262f;
  150. --surface-card2:#18222a; /* read/zebra rows sit BELOW the card on dark */
  151. --wash:#232f3a;
  152. --slab:#2b3a46; --on-slab:#eef2f5; --on-slab-dim:#a8b4c0; --slab-line:#3d4c58;
  153. --text-body:#eef2f5; /* not pure #fff; it haloes at 13px */
  154. --text-2:#cdd5dc;
  155. --text-muted:#a3aeb8; /* 6.8:1, beating the light theme's 6.3:1 */
  156. --border-default:#2f3b45;
  157. --hairline:#232e37;
  158. --strong:#eef2f5;
  159. --track:#232f3a; --tick:#3a444f;
  160. --hover-row:#232f3a;
  161. --delta-bg:#232f3a;
  162. --meridian-gray-050:#18222a; --meridian-gray-400:#5c6874; --meridian-gray-700:#cdd5dc;
  163. --meridian-blue-050:#232f3a;
  165. --hue-ours:#4fb3c2;
  166. --hue-waiting:#f06a8d;
  167. --hue-vendor:#8fd968;
  168. --hue-task:#ffb24d;
  169. --hue-todo:#3799a8;
  170. /* tracker yellow is the one hue needing no lift: 11.8:1 on the dark card */
  171. /* #c40d0d is 2.9:1 on the dark card: unreadable, not merely dimmer. Lifted
  172. to the same hue angle at 5.6:1. */
  173. --caveat:#ff6a5e;
  175. /* The rule's ink segment, and only the ink segment, inverts, the same
  176. substitution the brand makes with its reversed logo. */
  177. --meridian-rule:linear-gradient(90deg,#eef2f5 0 25%,#1f7a8c 25% 50%,#f2c94c 50% 75%,#c8325f 75%);
  179. /* Absence must stay QUIETER than measurement. */
  180. --hatch:repeating-linear-gradient(45deg,#3a444f 0 6px,#243039 6px 12px);
  181. --hatch-ink:repeating-linear-gradient(45deg,#eef2f5 0 5px,#2f3b45 5px 10px);
  182. --hatch-fine:repeating-linear-gradient(45deg,#eef2f5 0 2px,#2f3b45 2px 4px);
  183. --hatch-ghost:repeating-linear-gradient(45deg,rgba(240,106,141,.34) 0 5px,transparent 5px 10px);
  185. color-scheme:dark;
  186. }
  188. /* ---- reset / page ---------------------------------------------------------- */
  189. *{box-sizing:border-box}
  190. html{scroll-behavior:smooth}
  191. body{
  192. margin:0;background:var(--surface-page);color:var(--text-body);
  193. font-family:var(--font-body);font-size:14.5px;line-height:1.55;
  194. -webkit-font-smoothing:antialiased;
  195. }
  196. h1,h2,h3,h4{font-weight:normal;margin:0}
  197. h1,h2.display{font-family:var(--font-display)}
  198. b,strong{font-weight:600}
  199. a{color:var(--hue-ours);text-decoration:none;transition:color var(--state)}
  200. a:hover{color:var(--hue-ours-dark)}
  201. :focus-visible{outline:2px solid var(--hue-ours);outline-offset:2px;border-radius:var(--radius-sm)}
  202. code{font-family:var(--font-mono);font-size:.92em}
  204. /* ---- type scale (eleven steps, ~1.2, anchored on 14.5) --------------------- */
  205. .t-micro{font-size:10px;line-height:1.3;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
  206. .t-meta{font-size:11.5px;line-height:1.6}
  207. .t-small{font-size:13px;line-height:1.5}
  208. .t-lede{font-size:17px;line-height:1.5}
  209. .t-h3{font-size:20px;line-height:1.3;font-weight:600}
  210. .t-h2{font-family:var(--font-display);font-size:27px;line-height:1.15;font-weight:normal}
  211. .t-stat{font-family:var(--font-display);font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
  212. .t-hero{font-family:var(--font-display);font-size:76px;line-height:.88;font-variant-numeric:tabular-nums}
  214. /* ---- motion ----------------------------------------------------------------- */
  215. @keyframes rule-wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  216. @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  217. @keyframes bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  218. .rise{animation:rise 360ms ease both;animation-delay:calc(min(var(--i,0),8) * 50ms)}
  219. /* Numbers never animate. A stat counting up through 0 reads as zero. */
  221. /* ---- the 4-colour rule ------------------------------------------------------ */
  222. .rule{height:var(--border-rule);background:var(--meridian-rule);
  223. animation:rule-wipe 500ms ease both;transform-origin:left}
  225. /* ---- shell ------------------------------------------------------------------ */
  226. .page{max-width:1220px;margin:0 auto;padding:0 20px 64px}
  227. .page-rule{height:3px;background:var(--meridian-rule)}
  228. .masthead{padding:18px 0 0}
  229. /* TWO COLUMNS, ENFORCED. The first ship let the title block take its full
  230. 70ch max-width, so 699 + 520 + gap outgrew the 1180px container by 63px and
  231. the source pills wrapped BELOW the title: a header twice as tall as it
  232. needed to be, for nothing. The title column now shrinks (flex:1, min-width:0)
  233. and the pill column is fixed; they share a row at any desktop width. */
  234. .masthead .top{flex-wrap:nowrap}
  235. .masthead .mast-left{flex:1 1 0;min-width:0}
  236. .masthead .mast-right{flex:0 0 auto}
  237. .eyebrow{
  238. font-family:var(--font-display);font-size:10px;letter-spacing:.5em;
  239. text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;
  240. }
  241. .masthead h1{font-size:40px;line-height:1.05;text-transform:uppercase;color:var(--text-body)}
  242. .masthead .lede{margin:6px 0 0;font-size:14.5px;color:var(--text-2);max-width:64ch}
  243. .mast-right{max-width:520px;text-align:right}
  245. /* ---- source health: ink + texture, never a category hue -------------------- */
  246. .sources{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  247. .pill{
  248. display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:4px 9px;
  249. border:1px solid var(--border-default);border-radius:var(--radius-sm);
  250. color:var(--text-body);background:var(--surface-card);white-space:nowrap;
  251. }
  252. .pill i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
  253. .pill.live i{background:var(--strong)}
  254. .pill.read i{background:transparent;border:2px solid var(--strong);width:8px;height:8px}
  255. .pill.stale{border-color:var(--strong);background:var(--surface-card2)}
  256. .pill.stale i{background:var(--hatch-fine);border:1px solid var(--strong);border-radius:2px}
  257. .pill.failed{border-color:var(--strong)}
  258. .pill.failed i{background:var(--hatch-ink);border-radius:2px;width:12px}
  259. .pill .err{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}
  260. .synced{font-size:11.5px;color:var(--text-muted);text-align:right;margin-top:8px}
  262. /* ---- tabs -------------------------------------------------------------------- */
  263. .tabs{display:flex;gap:2px;flex-wrap:wrap;margin:22px 0 0;border-bottom:1px solid var(--border-default);
  264. position:sticky;top:0;z-index:30;background:var(--surface-page)}
  265. .tab{
  266. position:relative;padding:12px 16px;font-size:14px;color:var(--text-body);
  267. background:none;border:0;font-family:inherit;cursor:pointer;
  268. }
  269. .tab::after{
  270. content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--border-rule);
  271. background:var(--meridian-rule);transform:scaleX(0);transform-origin:left;
  272. transition:transform 500ms ease;
  273. }
  274. .tab:hover::after,.tab[aria-selected="true"]::after,.tab[aria-current="page"]::after{transform:scaleX(1)}
  275. .tab[aria-selected="true"],.tab[aria-current="page"]{font-weight:600}
  276. a.tab{display:inline-block;color:var(--text-body)}
  277. a.tab:hover{color:var(--text-body)}
  278. .surface[hidden]{display:none}
  280. /* ---- cards -------------------------------------------------------------------- */
  281. .card{
  282. background:var(--surface-card);border:1px solid var(--border-default);
  283. border-radius:var(--radius-md);overflow:hidden;
  284. }
  285. .card-pad{padding:18px 22px}
  286. .section{margin-top:26px}
  287. .section-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
  288. .section-head h2{font-family:var(--font-display);font-size:27px;line-height:1.15;color:var(--text-body)}
  289. .section-head .hint{font-size:12px;color:var(--text-muted)}
  290. .note{font-size:11.5px;color:var(--text-muted);line-height:1.6;margin:0}
  291. .note.wide{max-width:82ch}
  293. /* ---- "Check this": ink edge, one row per note ------------------------------- */
  294. .caveat{
  295. background:var(--surface-card);border:1px solid var(--border-default);
  296. border-left:3px solid var(--strong);border-radius:0 var(--radius-md) var(--radius-md) 0;
  297. padding:12px 16px;font-size:13px;line-height:1.55;color:var(--text-body);
  298. }
  299. .caveat b{color:var(--text-body)}
  300. .caveat.down{border-left-color:var(--strong)}
  301. .caveat-band{background:var(--surface-card);border:1px solid var(--border-default);
  302. border-left:3px solid var(--strong);border-radius:0 var(--radius-md) var(--radius-md) 0;overflow:hidden}
  303. .caveat-head{display:flex;gap:12px;align-items:center;padding:12px 18px}
  304. .caveat-chip{background:var(--slab);color:var(--on-slab);font-size:10px;font-weight:600;
  305. letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:3px;white-space:nowrap}
  306. .caveat-row{display:grid;grid-template-columns:158px 1fr;gap:18px;padding:11px 18px;
  307. border-top:1px solid var(--hairline);font-size:13px}
  308. .caveat-row .src{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  309. color:var(--text-muted);padding-top:2px}
  311. /* ---- headline tiles ------------------------------------------------------------ */
  312. .tiles{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:12px;align-items:stretch}
  313. .tile{
  314. text-align:left;font-family:inherit;background:var(--surface-card);
  315. border:1px solid var(--border-default);border-radius:var(--radius-md);
  316. padding:0;color:var(--text-body);transition:var(--transition-default);
  317. display:flex;flex-direction:column;overflow:hidden;
  318. }
  319. button.tile{cursor:pointer}
  320. .tile-body{padding:18px 22px 0;flex:1}
  321. .tile-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;
  322. border-top:1px solid var(--hairline);padding:12px 22px;font-size:12.5px;min-height:40px}
  323. .tile-label{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  324. color:var(--text-muted);margin-bottom:8px}
  325. .tile-value{font-family:var(--font-display);font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
  326. .tile-note{font-size:11.5px;color:var(--text-muted);margin-top:8px;line-height:1.6}
  327. .tile[aria-expanded="true"]{border-color:var(--strong)}
  328. button.tile:hover{border-color:var(--hue-ours)}
  329. .tile.hero{background:var(--slab);border-color:var(--slab);color:var(--on-slab)}
  330. .tile.hero .tile-label,.tile.hero .tile-note{color:var(--on-slab-dim)}
  331. .tile.hero .tile-foot{border-top-color:var(--slab-line);color:var(--on-slab)}
  332. .tile.hero .tile-value{font-size:76px;line-height:.88}
  333. button.tile.hero:hover{background:#000}
  334. :root[data-theme="dark"] button.tile.hero:hover{background:#1f2c36}
  335. .tile.accent{border-color:var(--hue-waiting)}
  336. button.tile.accent:hover{background:var(--wash)}
  337. .delta{display:inline-block;font-size:11px;padding:2px 8px;border-radius:3px;
  338. background:var(--delta-bg);color:var(--text-body);border:1px solid var(--border-default);
  339. font-variant-numeric:tabular-nums}
  340. .tile.hero .delta{background:transparent;color:var(--on-slab);border-color:var(--text-muted)}
  341. .answer-chip{display:inline-block;background:var(--hue-waiting);color:#fff;font-size:10px;
  342. font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:3px 8px;border-radius:3px}
  343. .zero-chip{display:inline-block;border:1px solid var(--strong);color:var(--text-body);font-size:10px;
  344. font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:3px 8px;border-radius:3px}
  346. /* ---- context strip: deliberately demoted ------------------------------------- */
  347. .ctx{display:grid;grid-template-columns:auto 1fr 1fr;background:var(--surface-card);
  348. border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;margin-top:12px}
  349. .ctx-key{background:var(--wash);border-right:1px solid var(--border-default);max-width:200px;
  350. padding:16px 20px;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  351. color:var(--text-muted);line-height:1.8}
  352. .ctx-cell{padding:16px 20px;display:flex;gap:16px;align-items:baseline}
  353. .ctx-cell .n{font-family:var(--font-display);font-size:34px;color:var(--text-muted);font-variant-numeric:tabular-nums}
  354. .ctx-cell .t{font-size:13px;font-weight:600}
  355. .ctx-cell .s{font-size:12px;color:var(--text-muted);line-height:1.55;margin-top:2px}
  357. /* ---- meeting topics ------------------------------------------------------------- */
  358. /* Buttons named after topics, each opening its own panel. The panel is hidden
  359. with the hidden ATTRIBUTE, so (as the inbox search learned the hard way on
  360. 2026-09-04) any rule here that sets display needs the [hidden] line below to
  361. beat it, because the user-agent default loses to every author rule.
  362. No backticks in this comment: THEME_CSS is a template literal and one would
  363. end the stylesheet mid-file. That is the second time in one day. */
  364. .topic-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 2px}
  365. .topic-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  366. font-family:inherit;font-size:12.5px;padding:7px 12px;border:1px solid var(--border-default);
  367. border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-body)}
  368. .topic-btn:hover{border-color:var(--hue-waiting);color:var(--hue-waiting)}
  369. .topic-btn[aria-expanded="true"]{border-color:var(--strong);background:var(--wash);font-weight:600}
  370. .topic-btn .n{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--text-muted);
  371. background:var(--meridian-gray-050);border-radius:10px;padding:1px 7px}
  372. .topic-btn[aria-expanded="true"] .n{color:var(--text-body)}
  373. .topic-panel{margin-top:12px;border:1px solid var(--strong);border-radius:var(--radius-md);
  374. overflow:hidden;background:var(--surface-card)}
  375. .topic-panel[hidden]{display:none}
  376. .topic-head{display:flex;align-items:center;gap:12px;padding:11px 16px;
  377. background:var(--slab);color:var(--on-slab)}
  378. .topic-head .n{font-family:var(--font-display);font-size:20px}
  379. .topic-head .t{font-size:13.5px;font-weight:600}
  380. .topic-head .m{font-size:11.5px;color:var(--on-slab-dim);flex:1}
  381. .topic-head button{cursor:pointer;font-family:inherit;font-size:11px;padding:3px 10px;
  382. border:1px solid var(--on-slab-dim);border-radius:var(--radius-sm);
  383. background:transparent;color:var(--on-slab)}
  384. .topic-body{padding:0 16px}
  385. @media (max-width:720px){
  386. .topic-row{flex-direction:column;align-items:stretch}
  387. .topic-btn{justify-content:space-between;min-height:38px}
  388. }
  390. /* ---- drill-down ----------------------------------------------------------------- */
  391. .drill{margin-top:14px;border:1px solid var(--strong);border-radius:var(--radius-md);
  392. overflow:hidden;background:var(--surface-card)}
  393. .drill-head{
  394. display:flex;align-items:center;gap:12px;
  395. padding:13px 18px;background:var(--slab);color:var(--on-slab);
  396. }
  397. .drill-head .n{font-family:var(--font-display);font-size:22px}
  398. .drill-head .t{font-size:13.5px;font-weight:600}
  399. .drill-head .m{font-size:11.5px;color:var(--on-slab-dim);flex:1}
  400. .drill-body{padding:0 0 0}
  401. .drill-row{
  402. display:grid;grid-template-columns:3px 100px 1fr 148px 52px;gap:0 14px;align-items:center;
  403. padding:9px 18px 9px 0;border-top:1px solid var(--hairline);font-size:13px;
  404. }
  405. .drill-row:hover{background:var(--hover-row)}
  406. .drill-row .bar{align-self:stretch}
  407. .drill-row .id{font-family:var(--font-mono);font-size:12px;color:var(--hue-ours)}
  408. .drill-row .who{color:var(--text-muted);font-size:12px}
  409. .drill-row .age{text-align:right;font-variant-numeric:tabular-nums}
  410. .drill-note{padding:8px 18px 6px;font-size:11.5px;color:var(--text-muted)}
  411. .withheld{background:var(--wash);border-top:1px solid var(--border-default);
  412. display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:12px 18px;font-size:12.5px}
  413. .withheld .n{font-family:var(--font-display);font-size:30px;font-variant-numeric:tabular-nums}
  415. /* Buttons, per the system: 5px radius, no shadow, darken on hover. */
  416. .btn{
  417. font-family:inherit;font-size:12px;padding:6px 12px;border-radius:var(--radius-sm);
  418. border:1px solid transparent;cursor:pointer;box-shadow:none;
  419. transition:var(--transition-default);
  420. }
  421. .btn-secondary{background:var(--hue-tracker);color:#000}
  422. .btn-secondary:hover{background:var(--hue-tracker-dark)}
  423. .btn-outline{background:transparent;border-color:var(--hue-ours);color:var(--hue-ours)}
  424. .btn-outline:hover{background:var(--hue-ours);color:#fff}
  425. .btn-outline[aria-pressed="true"]{background:var(--hue-ours);color:#fff}
  427. /* ---- bars (simple, for stage rows and briefing board sizes) ------------------- */
  428. .bar-track{height:16px;border-radius:4px;background:var(--track);overflow:hidden}
  429. .bar-fill{height:100%;border-radius:0 4px 4px 0;min-width:2px;
  430. animation:bar-grow 560ms ease 200ms both;transform-origin:left}
  431. .stage-row{display:grid;grid-template-columns:150px 1fr 34px;gap:10px;align-items:center;margin-bottom:7px}
  432. .stage-row .n{font-size:12px;color:var(--text-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  433. .stage-row .c{font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
  435. /* ---- workload: the bar is a measurement ---------------------------------------- */
  436. .ruler{display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);
  437. font-variant-numeric:tabular-nums;padding:0 0 4px}
  438. .measure{display:flex;height:22px;border-radius:4px;overflow:hidden;background:var(--track);
  439. background-image:repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 20%)}
  440. .measure .seg{height:100%;animation:bar-grow 560ms ease 200ms both;transform-origin:left}
  441. .measure .ghost{background:var(--hatch-ghost);border-left:2px solid var(--strong);
  442. animation:bar-grow 560ms ease 200ms both;transform-origin:left}
  443. .measure .rest{flex:1;background:var(--hatch);border-left:2px dashed var(--strong);
  444. position:relative;animation:bar-grow 560ms ease 200ms both;transform-origin:left}
  445. .measure .rest .lbl{position:absolute;inset:0;display:flex;align-items:center;padding:0 8px;
  446. font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#0f141d}
  447. .measure .rest .lbl span{background:rgba(255,255,255,.82);padding:1px 6px;border-radius:2px}
  448. :root[data-theme="dark"] .measure .rest .lbl span{background:rgba(14,22,28,.82);color:#eef2f5}
  449. .person{display:grid;grid-template-columns:210px 1fr 118px;gap:20px;align-items:center;
  450. padding:13px 22px;border-top:1px solid var(--hairline)}
  451. .person-id{display:flex;gap:10px;align-items:center}
  452. .avatar{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--slab);color:var(--on-slab);
  453. font-family:var(--font-display);font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}
  454. .person-name{font-size:14px;font-weight:600;color:var(--text-body)}
  455. .person-role{font-size:11px;color:var(--text-muted)}
  456. .person-detail{font-size:12px;color:var(--text-2);margin-top:6px}
  457. .person-aside{color:var(--text-muted)}
  458. .person-note{font-size:11.5px;color:var(--text-muted);margin-top:5px;max-width:78ch;
  459. border-left:2px solid var(--border-default);padding-left:10px}
  460. .person-load{text-align:right}
  461. .person-load .v{font-family:var(--font-display);font-size:28px;font-variant-numeric:tabular-nums;color:var(--text-body)}
  462. .person-load .k{font-size:10px;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase}
  463. .untracked{display:inline-block;font-size:11px;font-weight:600;color:var(--text-body);
  464. background:var(--hatch);padding:2px 8px;border-radius:3px}
  466. /* ---- generic rows ---------------------------------------------------------------- */
  467. .rows{width:100%}
  468. .row-head{
  469. display:grid;gap:10px;padding:8px 0;font-size:10px;font-weight:600;letter-spacing:.16em;
  470. text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--meridian-gray-400);
  471. }
  472. .row{display:grid;gap:10px;padding:9px 0;border-bottom:1px solid var(--hairline);font-size:13px;align-items:center}
  473. .row:last-child{border-bottom:none}
  474. .lead-cols{grid-template-columns:52px 150px 1fr}
  475. .num{font-variant-numeric:tabular-nums}
  477. /* ---- briefing ---------------------------------------------------------------------- */
  478. .brief{max-width:760px}
  479. .brief .kicker{font-size:17px;line-height:1.5;margin:0 0 18px;text-wrap:pretty}
  480. .brief h3{
  481. font-size:10px;font-weight:600;margin:0 0 8px;color:var(--hue-ours);
  482. text-transform:uppercase;letter-spacing:.16em;
  483. }
  484. .brief p{font-size:14.5px;line-height:1.7;margin:0 0 20px;text-wrap:pretty}
  485. .brief .quiet{color:var(--text-muted)}
  486. .blind{
  487. border:1px solid var(--border-default);border-left:3px solid var(--strong);
  488. border-radius:0 var(--radius-md) var(--radius-md) 0;padding:14px 18px;margin-bottom:22px;
  489. background:var(--surface-card2);
  490. }
  491. .blind h3{color:var(--text-body)}
  492. .blind p{font-size:14px;line-height:1.6;margin:0}
  493. /* Deltas: direction by arrow and words only. Green/red collided with at-vendor
  494. and waiting-on-client: the same hue crime the pills committed. */
  495. .delta.down,.delta.up,.delta.flat{color:var(--text-body)}
  496. .seg-control{display:inline-flex;border:1px solid var(--border-default);border-radius:var(--radius-sm);overflow:hidden}
  497. .seg-control button{font-family:inherit;font-size:12px;padding:7px 14px;border:0;background:var(--surface-card);
  498. color:var(--text-body);cursor:pointer;transition:var(--transition-default)}
  499. .seg-control button[aria-pressed="true"]{background:var(--slab);color:var(--on-slab)}
  500. details.brief-inline{border:1px solid var(--border-default);border-radius:var(--radius-md);
  501. background:var(--surface-card);margin:16px 0 14px;overflow:hidden}
  502. details.brief-inline>summary{cursor:pointer;padding:12px 18px;font-size:13px;font-weight:600;
  503. display:flex;gap:10px;align-items:baseline}
  504. details.brief-inline>summary .hint{font-weight:400;font-size:11.5px;color:var(--text-muted)}
  505. details.brief-inline .body{padding:2px 18px 16px;font-size:14px;line-height:1.7;max-width:76ch}
  507. /* ---- feed --------------------------------------------------------------------------- */
  508. .feed-row{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--hairline)}
  509. .feed-row:last-child{border-bottom:none}
  510. .badge{
  511. display:inline-block;font-size:10px;padding:3px 8px;border-radius:3px;
  512. font-weight:600;letter-spacing:.02em;
  513. }
  514. .badge.primary{background:var(--hue-ours);color:#fff}
  515. .badge.accent{background:var(--hue-waiting);color:#fff}
  516. .badge.dark{background:var(--slab);color:var(--on-slab)}
  517. .badge.hot{background:var(--hue-task);color:#0f141d}
  518. .feed-time{font-size:11px;color:var(--text-muted);margin-top:6px}
  519. .feed-text{font-size:14px;line-height:1.5}
  520. .feed-why{font-size:11.5px;color:var(--text-muted);margin-top:4px}
  522. /* ---- data health ----------------------------------------------------------------------- */
  523. .source-row{display:grid;grid-template-columns:16px 190px 1fr 130px;gap:16px;align-items:start;
  524. padding:15px 0;border-bottom:1px solid var(--hairline)}
  525. .source-row:last-child{border-bottom:none}
  526. .health{width:11px;height:11px;margin-top:4px;border-radius:50%}
  527. .health.live{background:var(--strong)}
  528. .health.read{background:transparent;border:2px solid var(--strong)}
  529. .health.stale{background:var(--hatch-fine);border:1px solid var(--strong);border-radius:2px}
  530. .health.failed{background:var(--hatch-ink);border-radius:2px}
  531. .source-name{font-size:14px;font-weight:600;color:var(--text-body)}
  532. .source-covers{font-size:11.5px;color:var(--text-muted)}
  533. .source-note{font-size:12.5px;color:var(--text-2);line-height:1.6}
  534. .source-note .err{font-family:var(--font-mono);font-size:11.5px;background:var(--meridian-gray-050);
  535. padding:1px 5px;border-radius:3px}
  536. .source-status{text-align:right;font-size:11.5px;font-weight:600;color:var(--text-body)}
  537. .matrix{border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}
  538. .matrix-head{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;background:var(--slab);color:var(--on-slab);font-size:11px;padding:9px 16px}
  539. .matrix-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;padding:11px 16px;border-top:1px solid var(--hairline);font-size:13px;align-items:center}
  540. .cell-covered i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--strong);margin-right:6px}
  541. .cell-untracked{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  542. background:var(--hatch);color:#0f141d;padding:2px 7px;border-radius:3px}
  543. :root[data-theme="dark"] .cell-untracked{color:#eef2f5}
  544. .blindspots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  545. .blindspot{border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}
  546. .blindspot .strip{height:3px;background:var(--hatch)}
  547. .blindspot h3{font-size:13px;font-weight:600;color:var(--text-body);margin:12px 15px 4px}
  548. .blindspot p{font-size:12px;color:var(--text-muted);line-height:1.55;margin:0 15px 13px}
  550. /* ---- my day -------------------------------------------------------------------------------- */
  551. .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
  552. .chip{font-size:11px;padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-default)}
  553. .chip.solid{background:var(--slab);color:var(--on-slab);border-color:var(--slab)}
  554. .chip.quiet{color:var(--text-muted);background:var(--surface-card2)}
  555. .chip.hatch{background:var(--hatch);color:#0f141d;font-weight:600}
  556. :root[data-theme="dark"] .chip.hatch{color:#eef2f5}
  557. .first3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
  558. .first3 .f{border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;
  559. background:var(--surface-card)}
  560. .first3 .f .strip{height:3px}
  561. .first3 .f .in{padding:12px 14px}
  562. .first3 .kchip{display:inline-block;color:#fff;font-size:10px;font-weight:600;letter-spacing:.16em;
  563. text-transform:uppercase;padding:3px 8px;border-radius:3px}
  564. .first3 .age{float:right;font-family:var(--font-display);font-size:20px;font-variant-numeric:tabular-nums}
  565. .first3 .id{font-family:var(--font-mono);font-size:11.5px;color:var(--hue-ours);margin-top:8px}
  566. .first3 .what{font-size:15px;font-weight:600;margin-top:2px;line-height:1.4}
  567. .first3 .why{font-size:12.5px;color:var(--text-2);margin-top:4px;line-height:1.5}
  568. .kind{border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;margin-bottom:12px}
  569. .kind-head{display:flex;gap:8px;align-items:center;background:var(--surface-card2);
  570. padding:8px 18px;font-size:13px;font-weight:600;border-bottom:1px solid var(--hairline)}
  571. .kind-head .swatch{width:11px;height:11px;border-radius:3px}
  572. .kind-head .c{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text-muted);font-weight:400}
  573. .work-row{display:grid;grid-template-columns:1fr 62px;gap:12px;align-items:start;padding:11px 18px;border-top:1px solid var(--hairline)}
  574. .work-row:first-of-type{border-top:0}
  575. .work-what{font-size:14.5px;color:var(--text-body)}
  576. .work-meta{font-size:11.5px;color:var(--text-muted);margin-top:3px}
  577. .work-age{text-align:right;font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-2)}
  578. .work-age .late{display:block;font-size:9.5px;font-weight:600;letter-spacing:.12em;
  579. text-transform:uppercase;color:var(--hue-waiting)}
  580. .myday-head{background:var(--slab);color:var(--on-slab);padding:24px 28px 22px;
  581. display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
  582. .myday-head .who h1{font-family:var(--font-display);font-size:34px;color:var(--on-slab)}
  583. .myday-head .cover{font-size:12.5px;color:var(--on-slab-dim);margin-top:4px}
  584. .myday-nums{display:flex;align-items:baseline}
  585. .myday-nums .b{text-align:right}
  586. .myday-nums .b+.b{border-left:1px solid var(--slab-line);padding-left:28px;margin-left:28px}
  587. .myday-nums .v{font-family:var(--font-display);font-size:56px;line-height:1;font-variant-numeric:tabular-nums}
  588. .myday-nums .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-slab-dim)}
  589. .picker{font-family:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-card)}
  591. /* ---- footer ------------------------------------------------------------------------------- */
  592. .howto{background:var(--slab);color:var(--on-slab-dim);padding:20px 24px;font-size:12px;line-height:1.7;border-radius:0 0 var(--radius-md) var(--radius-md)}
  593. .howto b{color:var(--on-slab)}
  594. .howto code{font-family:var(--font-mono);font-size:11px;color:var(--on-slab)}
  596. .empty{color:var(--text-muted);font-size:13px;margin:0}
  598. /* ---- theme control ---------------------------------------------------------------------------- */
  599. /* Sync now: same visual weight as the theme control beside it. It is an
  600. action, not a status, so it must not read as louder than the numbers. */
  601. .sync-ctl{display:inline-flex;border:1px solid var(--border-default);border-radius:var(--radius-sm);
  602. overflow:hidden;margin-left:10px;vertical-align:middle}
  603. .sync-ctl button{font-family:inherit;font-size:10.5px;padding:4px 9px;border:0;
  604. background:var(--surface-card);color:var(--text-muted);cursor:pointer}
  605. .sync-ctl button:hover{color:var(--text-body)}
  606. .sync-ctl button[disabled]{cursor:default;opacity:.55}
  607. .sync-state{margin-left:10px;padding:2px 8px;border-radius:3px;background:var(--wash);
  608. color:var(--text-body);font-weight:600}
  609. .theme-ctl{display:inline-flex;gap:0;border:1px solid var(--border-default);border-radius:var(--radius-sm);overflow:hidden;margin-left:10px;vertical-align:middle}
  610. .theme-ctl button{font-family:inherit;font-size:10.5px;padding:4px 9px;border:0;background:var(--surface-card);color:var(--text-muted);cursor:pointer}
  611. .theme-ctl button[aria-pressed="true"]{background:var(--slab);color:var(--on-slab)}
  613. /* ---- orientation legend ------------------------------------------------------------------------ */
  614. .legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12px}
  615. .legend .swatch{display:inline-block;width:12px;height:12px;border-radius:3px;
  616. margin-right:5px;vertical-align:-1px;border:1px solid rgba(0,0,0,.1)}
  617. :root[data-theme="dark"] .legend .swatch{border-color:rgba(255,255,255,.14)}
  618. .legend-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px 20px;font-size:12px;margin-top:10px}
  620. /* ---- accessibility ------------------------------------------------------------------------------ */
  621. .skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;
  622. background:var(--slab);color:var(--on-slab);border-radius:0 0 var(--radius-sm) 0}
  623. .skip-link:focus{left:0}
  624. .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  625. clip:rect(0,0,0,0);white-space:nowrap;border:0}
  627. /* ---- responsive --------------------------------------------------------------------------------- */
  628. @media (max-width:1024px){
  629. .tiles{grid-template-columns:1fr 1fr}
  630. .blindspots{grid-template-columns:1fr}
  631. .two-up{grid-template-columns:1fr !important}
  632. .legend-grid{grid-template-columns:1fr 1fr}
  633. .first3{grid-template-columns:1fr}
  634. }
  635. @media (max-width:900px){
  636. .masthead .top{flex-wrap:wrap}
  637. }
  638. @media (max-width:768px){
  639. .page{padding:0 14px 48px}
  640. .top{flex-direction:column;align-items:flex-start !important}
  641. .sources{justify-content:flex-start}
  642. .synced{text-align:left}
  643. .mast-right{text-align:left;max-width:none}
  644. .stage-row{grid-template-columns:110px 1fr 30px}
  645. .drill-row{grid-template-columns:3px 80px 1fr 56px}
  646. .drill-row .who{display:none}
  647. .row.lead-cols{grid-template-columns:44px 1fr}
  648. .row.lead-cols .stage{display:none}
  649. .source-row{grid-template-columns:16px 1fr;gap:10px}
  650. .source-note,.source-status{grid-column:2}
  651. .source-status{text-align:left}
  652. .matrix-head{display:none}
  653. .matrix-row{grid-template-columns:1fr 1fr;gap:4px 10px}
  654. .feed-row{grid-template-columns:1fr}
  655. .ctx{grid-template-columns:1fr}
  656. .ctx-key{max-width:none;border-right:0;border-bottom:1px solid var(--border-default)}
  657. .myday-nums .v{font-size:40px}
  658. }
  659. @media (max-width:720px){
  660. .page{padding:0 12px 48px}
  661. .masthead h1{font-size:26px}
  662. .sources{justify-content:flex-start;margin-top:10px}
  663. .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
  664. .tab{white-space:nowrap;min-height:44px}
  665. /* Name and load stay on one line so the number keeps its subject; the bar
  666. drops to a full-width second row rather than being squeezed to noise. */
  667. .person{grid-template-columns:1fr 72px;gap:4px 8px;padding:13px 14px}
  668. .person-load{grid-column:2;grid-row:1}
  669. .person-bar{grid-column:1 / -1;grid-row:2}
  670. .legend-grid{grid-template-columns:1fr}
  671. }
  672. @media (max-width:375px){
  673. .tiles{grid-template-columns:1fr 1fr}
  674. .tile-value{font-size:34px}
  675. /* The hero does NOT shrink like the others. If it does, the one number that
  676. matters stops being the one number that matters. */
  677. .tile.hero{grid-column:1 / -1}
  678. .tile.hero .tile-value{font-size:56px}
  679. }
  681. @media print{
  682. /* Paper is light, whatever the screen theme was. */
  683. :root,:root[data-theme="dark"]{
  684. --surface-page:#fff;--surface-card:#fff;--surface-card2:#fbfbfc;--wash:#f3f6f7;
  685. --slab:#0f141d;--on-slab:#fff;--on-slab-dim:#bdb9c7;--slab-line:#333;
  686. --text-body:#0f141d;--text-2:#333;--text-muted:#655f70;
  687. --border-default:#d7d7d7;--hairline:#ececec;--strong:#0f141d;
  688. --track:#f1f1ef;--tick:#dcdcd8;
  689. --hue-ours:#1f7a8c;--hue-waiting:#c8325f;--hue-vendor:#70bf4a;
  690. --hue-task:#f99d22;--hue-todo:#175f6d;--hue-tracker:#f2c94c;
  691. --meridian-rule:linear-gradient(90deg,#0f141d 0 25%,#1f7a8c 25% 50%,#f2c94c 50% 75%,#c8325f 75%);
  692. --hatch:repeating-linear-gradient(45deg,#bdb9c7 0 6px,#e6e4ea 6px 12px);
  693. --hatch-ink:repeating-linear-gradient(45deg,#0f141d 0 5px,#fff 5px 10px);
  694. }
  695. body{background:#fff}
  696. .tabs,.btn,.theme-ctl,.sync-ctl{display:none}
  697. .surface[hidden]{display:block !important}
  698. .card{break-inside:avoid}
  699. }
  701. @media (prefers-reduced-motion:reduce){
  702. *{animation-duration:1ms !important;animation-delay:0ms !important;transition-duration:0ms !important}
  703. html{scroll-behavior:auto}
  704. }
  705. `
  707. export const QUEUE_CSS = `
  708. /* Onboarding (2026-09-14). A DOCUMENT, not a data surface: measured line
  709. length, real paragraph rhythm, and none of the hue system, no colour here
  710. means a category, because nothing here is a category. The tag chip borrows
  711. the board's chip shape so it does not read as a new vocabulary. */
  712. .ob-title{font-family:var(--font-display);font-size:17px;margin:0;color:var(--text-body)}
  713. .ob-intro{font-size:13px;line-height:1.65;color:var(--meridian-gray-700);margin:0 0 10px;max-width:78ch}
  714. /* Collapsible days and topics (2026-09-16). Native <details>, so there is no
  715. script and no state to lose: it folds with the keyboard, it survives a
  716. file:// open of dashboard.html, and print shows whatever is open. The marker
  717. is drawn here because the platform default differs per browser and this is a
  718. document, where a row of inconsistent triangles reads as a bug. */
  719. .ob-day{border-bottom:1px solid var(--border-default)}
  720. .ob-day:last-of-type{border-bottom:0}
  721. .ob-day-sum,.ob-topic-sum{display:flex;align-items:baseline;gap:10px;cursor:pointer;
  722. list-style:none;user-select:none}
  723. .ob-day-sum::-webkit-details-marker,.ob-topic-sum::-webkit-details-marker{display:none}
  724. .ob-day-sum::before,.ob-topic-sum::before{content:"";flex:none;align-self:center;
  725. width:0;height:0;border-left:5px solid var(--text-muted);
  726. border-top:4px solid transparent;border-bottom:4px solid transparent;
  727. transition:transform .12s ease}
  728. .ob-day[open]>.ob-day-sum::before,.ob-topic[open]>.ob-topic-sum::before{transform:rotate(90deg)}
  729. .ob-day-sum{padding:15px 0 14px;flex-wrap:wrap}
  730. .ob-day-sum:hover .ob-day-title{text-decoration:underline;text-underline-offset:3px}
  731. .ob-day-eyebrow{font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  732. color:var(--text-muted);white-space:nowrap}
  733. .ob-day-title{font-family:var(--font-display);font-size:18px;color:var(--text-body)}
  734. .ob-day-body{padding:0 0 10px 15px}
  735. .ob-rec{margin:0 0 12px;font-size:12px;display:flex;gap:16px;flex-wrap:wrap}
  736. .ob-rec a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--border-default)}
  737. .ob-rec a:hover{color:var(--text-body);border-bottom-color:var(--text-body)}
  738. .ob-topic{border-top:1px solid var(--hairline)}
  739. .ob-topic:first-of-type{border-top:0}
  740. .ob-topic-sum{padding:9px 0}
  741. .ob-topic-sum:hover .ob-title{text-decoration:underline;text-underline-offset:3px}
  742. /* The count a folded heading owes the reader: how many points are inside it,
  743. taken off the very items rendered below and nothing else (rule 9 in docs/ARCHITECTURE.md). */
  744. .ob-count{margin-left:auto;font-size:10px;font-variant-numeric:tabular-nums;color:var(--text-muted);
  745. white-space:nowrap}
  746. .ob-topic-body{padding:0 0 12px 15px}
  747. .ob-topic-body>.ob-intro:first-child{margin-top:-2px}
  748. /* The master list (2026-09-16). Deliberately NOT collapsible: it is the part
  749. you come back to mid-task. */
  750. .ob-resources{border-top:2px solid var(--border-default);margin-top:6px;padding:18px 0 4px}
  751. .ob-res-head{font-family:var(--font-display);font-size:18px;margin:0 0 4px;color:var(--text-body)}
  752. .ob-res-group{margin-top:14px}
  753. .ob-res-title{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  754. color:var(--text-muted);margin:0 0 4px}
  755. .ob-list{margin:0;padding-left:18px;max-width:78ch}
  756. .ob-list li{font-size:13px;line-height:1.65;color:var(--text-body);margin-bottom:5px}
  757. .ob-row{display:grid;grid-template-columns:minmax(130px,230px) 1fr;gap:10px 18px;
  758. padding:7px 0;border-top:1px solid var(--hairline);align-items:baseline}
  759. .ob-row:first-of-type{border-top:0}
  760. .ob-label{font-size:13px;font-weight:600;color:var(--text-body)}
  761. .ob-detail{font-size:13px;line-height:1.6;color:var(--meridian-gray-700);max-width:70ch}
  762. .ob-tag{display:inline-block;margin-left:8px;font-size:9.5px;font-weight:600;letter-spacing:.09em;
  763. text-transform:uppercase;border:1px solid var(--border-default);color:var(--text-muted);
  764. padding:1px 6px;border-radius:3px;white-space:nowrap;vertical-align:1px}
  765. @media (max-width:640px){.ob-row{grid-template-columns:1fr;gap:2px}}
  766. /* The end-of-day note (2026-09-15). Same document voice as the onboarding
  767. material it sits above, with no hue system, because none of this is a category.
  768. The only colour is on the two states a reader scans for: written, and not. */
  769. .ci-card{margin-bottom:18px}
  770. .ci-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;
  771. padding:22px 28px 16px;border-bottom:1px solid var(--border-default)}
  772. .ci-title{font-family:var(--font-display);font-size:22px;color:var(--text-body);margin:0}
  773. .ci-body{padding:14px 28px 24px}
  774. .ci-intro{font-size:13px;line-height:1.65;color:var(--meridian-gray-700);margin:0 0 12px;max-width:78ch}
  775. .ci-sub{font-family:var(--font-display);font-size:15px;margin:20px 0 8px;color:var(--text-body)}
  776. .ci-chip{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.09em;
  777. text-transform:uppercase;border:1px solid var(--border-default);color:var(--text-muted);
  778. padding:2px 7px;border-radius:3px;white-space:nowrap}
  779. .ci-chip.ci-done{border-color:var(--hue-ours);color:var(--hue-ours)}
  780. .ci-chip.ci-due{border-color:var(--hue-waiting);color:var(--hue-waiting-dark)}
  781. .ci-banner{font-size:12.5px;line-height:1.6;margin:0 0 12px;padding:9px 12px;max-width:78ch;
  782. border:1px solid var(--border-default);border-left:3px solid var(--border-default);
  783. border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--surface-card)}
  784. .ci-banner.ci-good{border-left-color:var(--hue-ours)}
  785. .ci-banner.ci-bad{border-left-color:var(--hue-waiting)}
  786. .ci-empty{font-size:13px;line-height:1.65;color:var(--text-muted);margin:8px 0;max-width:78ch}
  787. .ci-form-wrap{margin:4px 0 8px}
  788. .ci-summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-body);
  789. padding:6px 0;list-style:revert}
  790. .ci-form{margin-top:8px;max-width:78ch}
  791. .ci-field{margin-bottom:12px}
  792. .ci-q{display:block;font-size:13px;font-weight:600;color:var(--text-body);margin-bottom:5px}
  793. .ci-input{width:100%;padding:9px 11px;font-family:inherit;font-size:13px;line-height:1.55;
  794. color:var(--text-body);background:var(--surface-page);border:1px solid var(--border-default);
  795. border-radius:var(--radius-sm);resize:vertical}
  796. .ci-input:focus{outline:2px solid var(--hue-ours);outline-offset:1px}
  797. .ci-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
  798. .ci-save{cursor:pointer;font-size:12px;font-weight:600;padding:7px 16px;
  799. border:1px solid var(--hue-ours);border-radius:var(--radius-sm);
  800. background:var(--hue-ours);color:#fff}
  801. .ci-hint{font-size:11px;color:var(--text-muted);max-width:52ch;line-height:1.5}
  802. .ci-note{padding:12px 0;border-top:1px solid var(--hairline)}
  803. .ci-note:first-of-type{border-top:0}
  804. .ci-note-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
  805. .ci-day{font-size:13px;font-weight:600;color:var(--text-body)}
  806. .ci-when{font-size:11px;color:var(--text-muted)}
  807. .ci-none .ci-when{font-style:italic}
  808. .ci-a{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:6px 18px;padding:4px 0;
  809. align-items:baseline}
  810. .ci-a-label{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text-muted)}
  811. .ci-answer{margin:0;font-size:13px;line-height:1.65;color:var(--text-body);
  812. white-space:pre-wrap;word-break:break-word;max-width:70ch}
  813. .ci-answer.ci-blank{color:var(--text-muted);font-style:italic}
  814. .ci-prior{margin-top:8px}
  815. .ci-prior summary{cursor:pointer;font-size:11.5px;color:var(--text-muted);list-style:revert}
  816. .ci-old{opacity:.78;padding-left:12px;border-left:2px solid var(--hairline);border-top:0}
  817. .ci-mine{margin-top:18px;border-top:1px solid var(--border-default);padding-top:6px}
  818. @media (max-width:640px){.ci-a{grid-template-columns:1fr;gap:2px}}
  819. .queue-group{margin:18px 0 0}
  820. .queue-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  821. font-size:17px;font-weight:600;margin:0 0 8px;padding-bottom:6px;
  822. border-bottom:1px solid var(--border-default)}
  823. .queue-sub{font-weight:400;font-size:12.5px;color:var(--text-muted)}
  824. .queue-aging-count{margin-left:auto;font-size:11px;font-weight:600;color:var(--hue-waiting-dark);
  825. border:1px solid var(--hue-waiting);border-radius:3px;padding:2px 8px}
  826. .queue-unassigned .queue-head{color:var(--hue-waiting)}
  827. .unassigned-notice{background:var(--surface-card);border:1px solid var(--border-default);
  828. border-left:3px solid var(--hue-waiting);border-radius:0 var(--radius-md) var(--radius-md) 0;
  829. display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:14px 18px;
  830. font-size:13px;line-height:1.6;margin-top:12px}
  831. .unassigned-notice .n{font-family:var(--font-display);font-size:34px;color:var(--hue-waiting);
  832. font-variant-numeric:tabular-nums}
  833. /* User notes on orders and tasks, injected at serve time, decorated by script.
  834. The button reads quiet until a note exists; a row with context should be the
  835. one that catches the eye. */
  836. .note-btn{cursor:pointer;font-size:10.5px;font-weight:600;padding:2px 8px;margin-top:4px;
  837. border:1px solid var(--border-default);border-radius:3px;background:var(--surface-card);
  838. color:var(--text-muted);white-space:nowrap}
  839. .note-btn:hover{border-color:var(--hue-ours);color:var(--hue-ours)}
  840. .note-btn.has-note{border-color:var(--hue-ours);color:var(--hue-ours)}
  841. .note-panel{background:var(--surface-card);border:1px solid var(--border-default);
  842. border-left:3px solid var(--hue-ours);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  843. padding:12px 14px;margin:6px 0;font-size:13px;line-height:1.55}
  844. .note-row td{padding:0 0 8px;border-bottom:0}
  845. .note-text{margin:0;white-space:pre-wrap;word-break:break-word}
  846. .note-by{margin:6px 0 0;font-size:11px;color:var(--text-muted)}
  847. .note-panel textarea{width:100%;margin-top:10px;padding:8px 10px;
  848. font-family:inherit;font-size:13px;line-height:1.5;
  849. color:var(--text-body);background:var(--surface-page);border:1px solid var(--border-default);
  850. border-radius:var(--radius-sm);resize:vertical}
  851. .note-bar{display:flex;align-items:center;gap:10px;margin-top:8px}
  852. .note-hint{font-size:11px;color:var(--text-muted)}
  853. .queue-table{width:100%;border-collapse:collapse;font-size:13px}
  854. .queue-table caption{text-align:left}
  855. .queue-table th[scope=col]{text-align:left;font-size:10px;letter-spacing:.16em;
  856. text-transform:uppercase;color:var(--text-muted);font-weight:600;
  857. padding:8px 10px 8px 0;border-bottom:1px solid var(--border-default);
  858. position:sticky;top:var(--sticky-tabs,52px);background:var(--surface-card);z-index:2}
  859. .queue-table td,.queue-table th[scope=row]{padding:11px 10px 11px 0;
  860. border-bottom:1px solid var(--hairline);vertical-align:top;text-align:left}
  861. .queue-table tbody tr:hover{background:var(--hover-row)}
  862. .queue-table th[scope=row]{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;
  863. font-family:var(--font-mono);font-size:12px;color:var(--hue-ours)}
  864. .queue-table tr.aging th[scope=row]{color:var(--hue-waiting)}
  865. /* The age system: number, then a bar over a 60-day field with a hairline at 30,
  866. so 54d and 5d differ before either number is read. */
  867. .age-cell{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
  868. .age-cell .d{font-family:var(--font-display);font-size:17px}
  869. .age-cell .u{font-size:11px}
  870. .age-track{height:3px;border-radius:2px;background:var(--track);margin-top:4px;position:relative;
  871. background-image:linear-gradient(90deg,transparent 0 49%,var(--meridian-gray-400) 49% 51%,transparent 51%)}
  872. .age-track i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--text-muted)}
  873. tr.aging .age-track i{background:var(--hue-waiting)}
  874. .aging-flag{display:inline-block;margin-top:4px;padding:1px 5px;border-radius:3px;
  875. font-size:9.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;
  876. border:1px solid var(--hue-waiting);color:var(--hue-waiting-dark)}
  877. .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;
  878. vertical-align:baseline}
  879. .class-bar{display:inline-block;width:3px;align-self:stretch}
  880. .ordnum{font-variant-numeric:tabular-nums}
  881. @media (max-width:640px){
  882. .queue-table thead{display:none}
  883. .queue-table tr{display:block;padding:8px 0;border-bottom:1px solid var(--border-default)}
  884. .queue-table td,.queue-table th[scope=row]{display:block;border:0;padding:1px 0}
  885. .queue-table td::before{content:attr(data-label);display:inline-block;min-width:74px;
  886. color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
  887. .age-track{max-width:120px}
  888. }
  889. @media print{
  890. .queue-group{break-inside:avoid}
  891. .aging-flag{border:1px solid currentColor}
  892. }
  893. /* The private list, 2026-09-23. BOARD-ONLY, so it belongs in this sheet and not
  894. in THEME_CSS or EXPORT_CSS: the card is stamped into the pre-rendered board
  895. page and reaches no Worker-served route. The block below the EXPORT_CSS
  896. header records the deploy where rules went into the wrong sheet and the page
  897. shipped unstyled while verifying fine locally.
  899. NO --hue-* ANYWHERE. A hue means a category on this board, and a private list
  900. is not one. The only colour is on the state a reader scans for, which here is
  901. overdue: the same --hue-waiting the card already uses for work past a gate,
  902. so "late" looks the same whoever noticed it. */
  903. .own-wrap{border-top:1px solid var(--border-default);padding-top:16px;margin-top:4px}
  904. .own-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
  905. .own-title{font-size:13px;font-weight:600;color:var(--text-body)}
  906. .own-chip{font-size:11px;letter-spacing:.04em;border:1px solid var(--border-default);
  907. color:var(--text-muted);padding:1px 8px;border-radius:10px;white-space:nowrap}
  908. .own-chip-due{border-color:var(--hue-waiting);color:var(--hue-waiting)}
  909. .own-chip-dark{border-style:dashed}
  910. .own-sub{font-size:12px;color:var(--text-muted);margin:6px 0 12px;max-width:62ch;line-height:1.5}
  911. .own-banner{font-size:12px;line-height:1.55;margin:0 0 10px;padding:8px 12px;
  912. border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-body)}
  913. .own-good{border-left:3px solid var(--text-body)}
  914. .own-bad{border-left:3px solid var(--hue-waiting)}
  915. .own-empty{font-size:12px;color:var(--text-muted);line-height:1.55;margin:0 0 12px;max-width:62ch}
  916. .own-group{margin-bottom:12px}
  917. .own-group-head{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  918. color:var(--text-muted);margin-bottom:4px}
  919. .own-group-n{color:var(--text-muted);opacity:.8}
  920. .own-rows{list-style:none;margin:0;padding:0}
  921. .own-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  922. padding:7px 0;border-bottom:1px solid var(--hairline)}
  923. .own-row:last-child{border-bottom:0}
  924. .own-row-main{min-width:0;flex:1}
  925. .own-text{margin:0;font-size:13px;line-height:1.45;color:var(--text-body);
  926. overflow-wrap:anywhere}
  927. .own-row-done .own-text{color:var(--text-muted);text-decoration:line-through}
  928. .own-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:2px;
  929. font-size:11px;color:var(--text-muted)}
  930. .own-when-overdue{color:var(--hue-waiting);font-weight:600}
  931. .own-when-today{color:var(--text-body);font-weight:600}
  932. .own-nodate{opacity:.75}
  933. .own-link,.own-pri,.own-edited{border:1px solid var(--border-default);border-radius:3px;
  934. padding:0 5px;font-size:10px;letter-spacing:.03em;white-space:nowrap}
  935. .own-pri-high{border-color:var(--hue-waiting);color:var(--hue-waiting)}
  936. .own-row-acts{display:flex;gap:6px;align-items:flex-start;flex-shrink:0}
  937. .own-btn{font:inherit;font-size:11px;cursor:pointer;background:none;list-style:none;
  938. border:1px solid var(--border-default);border-radius:var(--radius-sm);
  939. padding:3px 10px;color:var(--text-body);white-space:nowrap}
  940. .own-btn::-webkit-details-marker{display:none}
  941. .own-btn-quiet{color:var(--text-muted)}
  942. .own-btn-go{font-weight:600}
  943. .own-act{display:inline}
  944. .own-add,.own-done{margin-top:10px}
  945. .own-add>summary,.own-done>summary{display:inline-block}
  946. .own-form{margin-top:10px;padding:12px;border:1px solid var(--border-default);
  947. border-radius:var(--radius-sm)}
  948. .own-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  949. color:var(--text-muted);margin-bottom:3px}
  950. .own-opt{text-transform:none;letter-spacing:0;opacity:.7}
  951. .own-input,.own-date,.own-select,.own-text-in{font:inherit;font-size:13px;width:100%;
  952. color:var(--text-body);background:var(--surface-card);
  953. border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:6px 8px}
  954. .own-input{resize:vertical}
  955. .own-form-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
  956. .own-field{flex:1 1 150px;min-width:0}
  957. .own-form-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
  958. .own-hint{font-size:11px;color:var(--text-muted);margin:6px 0 0;line-height:1.5}
  959. .own-hint-warn{color:var(--hue-waiting)}
  960. .own-reconcile{font-size:11px;color:var(--text-muted);line-height:1.55;margin:10px 0 0;
  961. max-width:70ch}
  962. .own-foot{font-size:10px;color:var(--text-muted);opacity:.75;margin:12px 0 0}
  963. @media (max-width:640px){
  964. .own-row{flex-direction:column;gap:6px}
  965. .own-row-acts{width:100%}
  966. .own-form-row{flex-direction:column}
  967. }
  968. `
  970. /**
  971. * The training export's own sheet, and that is the point. The export is served
  972. * by the Worker, whose shell loads THEME_CSS + INBOX_CSS + EXPORT_CSS; QUEUE_CSS
  973. * goes only into the pre-rendered board. A rule placed in QUEUE_CSS would look
  974. * right in any harness that loads both and ship unstyled.
  975. *
  976. * `.ob-intro` is repeated from QUEUE_CSS deliberately: the two sheets are never
  977. * loaded together, so this is not a duplicate at runtime.
  978. */
  979. export const EXPORT_CSS = `
  980. .ob-intro{font-size:13px;line-height:1.65;color:var(--meridian-gray-700);margin:0 0 10px;max-width:78ch}
  981. .ob-wins{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 0 10px}
  982. .ob-win-label{font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  983. color:var(--text-muted);margin-right:4px}
  984. .ob-win{font-size:12px;font-variant-numeric:tabular-nums;text-decoration:none;color:var(--text-2);
  985. border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:3px 10px;
  986. transition:var(--transition-default)}
  987. .ob-win:hover{border-color:var(--text-body);color:var(--text-body)}
  988. .ob-win.on{background:var(--slab);border-color:var(--slab);color:var(--on-slab)}
  989. .ob-export{width:100%;box-sizing:border-box;font:12px/1.6 var(--font-mono);
  990. color:var(--text-body);background:var(--surface-card2);border:1px solid var(--border-default);
  991. border-radius:var(--radius-sm);padding:12px 14px;resize:vertical}
  992. .ob-copy{font:inherit;font-size:12px;cursor:pointer;color:var(--text-2);
  993. background:var(--surface-card);border:1px solid var(--border-default);
  994. border-radius:var(--radius-sm);padding:2px 10px;transition:var(--transition-default)}
  995. .ob-copy:hover{border-color:var(--text-body);color:var(--text-body)}
  997. /* The recap document (2026-09-17). Its own "rc-" vocabulary rather than the
  998. tab's "ob-" one: that surface is built on <details>, and a printed document
  999. does not fold. Type weight, italics, whitespace and BORDERS carry every
  1000. separation here; see the print block below for why no fill does. */
  1001. .rc-shell{background:var(--surface-card);border:1px solid var(--border-default);
  1002. border-radius:var(--radius-md);padding:0 28px 24px}
  1003. .rc-controls{padding:18px 0 4px}
  1004. .rc-hint{font-size:11px;color:var(--text-muted);margin-left:2px}
  1005. .rc-doc{padding:8px 0 4px}
  1006. .rc-title{font-family:var(--font-display);font-size:26px;color:var(--text-body);margin:0 0 4px}
  1007. .rc-sub{font-size:12px;line-height:1.55;color:var(--text-muted);margin:0 0 18px;max-width:78ch}
  1008. .rc-day{padding:14px 0 2px;border-top:1px solid var(--hairline)}
  1009. .rc-day:first-of-type{border-top:0;padding-top:4px}
  1010. .rc-day-head{font-family:var(--font-display);font-size:19px;color:var(--text-body);margin:0 0 8px}
  1011. .rc-session{font-size:14px;font-style:italic;font-weight:400;color:var(--text-2);
  1012. margin:12px 0 4px}
  1013. .rc-points{margin:0 0 8px;padding-left:18px;max-width:78ch}
  1014. .rc-points li{font-size:13px;line-height:1.6;color:var(--text-body);margin-bottom:5px}
  1015. .rc-acc{font-size:13px;line-height:1.6;color:var(--text-body);margin:8px 0 0;max-width:78ch}
  1016. .rc-acc b{font-weight:600}
  1017. .rc-acc-none{color:var(--text-muted)}
  1018. .rc-note{font-size:11.5px;line-height:1.55;color:var(--text-muted);margin:6px 0 0;max-width:78ch}
  1019. .rc-none{font-size:13px;line-height:1.6;color:var(--text-muted);margin:0 0 8px;max-width:78ch}
  1020. .rc-coverage{font-size:12px;line-height:1.6;color:var(--text-muted);max-width:78ch;
  1021. margin:18px 0 0;padding-top:12px;border-top:1px solid var(--border-default)}
  1023. /* PRINT. This is the feature
  1024. (No backticks anywhere in this comment: the sheet is a TypeScript
  1025. template literal, and one would end it mid-stylesheet.) The deliverable is a PDF, and ⌘P is how it is
  1026. made. THEME_CSS's own print block already forces the light ramp and hides
  1027. ".tabs"; this adds the page box and the document's own pagination.
  1029. @page CANNOT BE SCOPED TO A SELECTOR: it is document-level by spec. Living
  1030. in EXPORT_CSS it therefore also applies to the Inbox, which is this sheet's
  1031. only other consumer (an improvement there, not a regression), and reaches
  1032. "dashboard.html" not at all, since that page loads THEME_CSS + QUEUE_CSS.
  1034. NO "print-color-adjust:exact", DELIBERATELY. Browsers default to not printing
  1035. backgrounds, so a document that needs fills to be legible is a document that
  1036. prints wrong for most people the first time. Forcing them would also override
  1037. the reader's own print settings to produce a heavy page nobody asked for.
  1038. Borders print; fills do not; everything here separates with a border.
  1040. "break-after:avoid" on the headings rather than "break-inside:avoid" on the
  1041. days: a heading stranded at the foot of a sheet is the failure that happens,
  1042. and a day too tall for a page is the failure "break-inside:avoid" CREATES. */
  1043. @page{size:letter;margin:0.75in}
  1044. @media print{
  1045. .masthead,.page-rule,.rc-noprint{display:none !important}
  1046. .page{padding:0;max-width:none}
  1047. .rc-shell{background:none;border:0;padding:0;margin:0;box-shadow:none;break-inside:auto}
  1048. .rc-doc{max-width:none;break-inside:auto}
  1049. .rc-title{font-size:18pt}
  1050. .rc-sub{font-size:10pt}
  1051. .rc-day-head{font-size:13pt}
  1052. .rc-session{font-size:11pt}
  1053. .rc-points li,.rc-acc,.rc-none,.rc-note{font-size:10.5pt;orphans:2;widows:2}
  1054. .rc-day-head,.rc-session{break-after:avoid}
  1055. .rc-points li,.rc-acc{break-inside:avoid}
  1056. .rc-coverage{font-size:9pt}
  1057. }
  1058. `