privateboard 0.1.2 → 0.1.4

package/public/report/spines/boardroom-dark.css

@@ -29,6 +29,22 @@
      action / nq question / etc. — never as a decorative fill. */
   --em: #C9A46B;
   --em-deep: #B58950;
+
+  /* Cross-spine token aliases · the unified design system in
+     report.html references --ink/--ink-soft/etc. (which a16z /
+     anthropic / etc. spines use). Boardroom-dark's native names
+     are --text / --text-soft / --line — alias them so unified
+     selectors resolve correctly. */
+  --ink: var(--text);
+  --ink-soft: var(--text-soft);
+  --ink-mid: var(--text-soft);
+  --ink-faint: var(--text-faint);
+  --ink-muted: var(--text-faint);
+  --paper: var(--bg);
+  --paper-soft: var(--panel-2);
+  --rule: var(--line-bright);
+  --rule-soft: var(--line);
+  --warn: var(--red);
   /* Sans + serif both carry explicit CJK fallbacks so Chinese body
      text doesn't drop characters when "Human Sans"/"Inter"/Charter
      load but lack CJK glyphs. Songti SC / STSong sit at the deep end
@@ -49,9 +65,15 @@
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Source Han Sans CN", "Songti SC",
                 system-ui, sans-serif;
+  /* Serif spine still serif for Latin headlines, but Chinese glyphs
+     fall through to PingFang SC first (sans) — user preference is
+     that Chinese reads in PingFang globally. Songti / Source Han
+     Serif sit deep as last-resort fallbacks. */
   --serif: "Charter", "Source Serif Pro", "Iowan Old Style",
-           "Georgia", "Songti SC", "STSong", "Source Han Serif CN",
-           "Noto Serif CJK SC", "PingFang SC", serif;
+           "Georgia",
+           "PingFang SC", "PingFang TC", "Hiragino Sans GB",
+           "Source Han Sans CN", "Noto Sans CJK SC",
+           "Songti SC", "STSong", serif;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -82,7 +104,7 @@ html, body {
    the right. Reads like a journal masthead. */
 .top-rule {
   background: var(--bg);
-  border-bottom: 0.5px solid var(--line-bright);
+  border-bottom: 1px solid var(--line-bright);
   padding: 18px 32px;
   display: flex;
   justify-content: space-between;
@@ -198,14 +220,14 @@ html, body {
   grid-template-columns: repeat(4, 1fr);
   gap: 28px;
   padding-top: 24px;
-  border-top: 0.5px solid var(--line-bright);
+  border-top: 1px solid var(--line-bright);
 }
 @media (max-width: 720px) {
   .cover-byline { grid-template-columns: repeat(2, 1fr); gap: 20px; }
 }
 .byline-block .label {
   font-family: var(--mono);
-  font-size: 9.5px;
+  font-size: 10px;
   letter-spacing: 0.28em;
   text-transform: uppercase;
   color: var(--text-faint);
@@ -213,7 +235,7 @@ html, body {
   margin-bottom: 8px;
 }
 .byline-block .value {
-  font-size: 13.5px;
+  font-size: 14px;
   color: var(--text);
   font-weight: 500;
   line-height: 1.45;
@@ -223,7 +245,7 @@ html, body {
   width: 22px; height: 22px;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
-  border: 0.5px solid var(--line-strong);
+  border: 1px solid var(--line-strong);
   background: var(--bg);
   margin-left: -6px;
 }
@@ -232,7 +254,7 @@ html, body {
 .cover-versions {
   margin-top: 22px;
   padding-top: 22px;
-  border-top: 0.5px solid var(--line-bright);
+  border-top: 1px solid var(--line-bright);
   display: flex;
   align-items: center;
   gap: 12px;
@@ -240,7 +262,7 @@ html, body {
 }
 .cover-versions-label {
   font-family: var(--mono);
-  font-size: 9.5px;
+  font-size: 10px;
   letter-spacing: 0.28em;
   text-transform: uppercase;
   color: var(--text-faint);
@@ -251,7 +273,7 @@ html, body {
   align-items: center;
   gap: 8px;
   padding: 5px 10px;
-  border: 0.5px solid var(--line-bright);
+  border: 1px solid var(--line-bright);
   color: var(--text-soft);
   text-decoration: none;
   font-family: var(--mono);
@@ -307,7 +329,7 @@ html, body {
   text-transform: uppercase;
   margin: 64px 0 14px;
   padding-bottom: 12px;
-  border-bottom: 0.5px solid var(--line-bright);
+  border-bottom: 1px solid var(--line-bright);
 }
 .body h2 {
   font-size: 34px;
@@ -348,32 +370,29 @@ html, body {
 .body em { color: var(--em-deep); font-style: italic; }
 .body code {
   background: var(--panel-2);
-  border: 0.5px solid var(--line-bright);
+  border: 1px solid var(--line-bright);
   padding: 1px 7px;
   font-family: "SF Mono", Menlo, Consolas, monospace;
-  font-size: 11.5px;
+  font-size: 12px;
   color: var(--text);
   letter-spacing: 0.02em;
 }
 .body code.badge-confidence-high   { color: var(--lime); border-color: var(--lime-dim); }
 .body code.badge-confidence-medium { color: #C99826; border-color: rgba(201, 152, 38, 0.35); }
 .body code.badge-confidence-low    { color: #C85A5A; border-color: rgba(200, 90, 90, 0.35); }
-.body code.badge-priority-p0 {
-  background: var(--lime);
-  color: var(--bg);
-  border-color: var(--lime);
-  font-weight: 700;
-  letter-spacing: 0.12em;
-}
-.body code.badge-priority-p1 { background: var(--panel-3); color: var(--text); font-weight: 700; }
-.body code.badge-priority-p2 { color: var(--text-soft); }
+/* Priority badges · typographic only (no fill, no border) · the
+   shared base in report.html locks down padding / background / border
+   with !important. Spine only encodes priority via colour + weight. */
+.body code.badge-priority-p0 { color: var(--lime); }
+.body code.badge-priority-p1 { color: var(--text); }
+.body code.badge-priority-p2 { color: var(--text-faint); }
 
 .body blockquote {
   padding: 8px 0 8px 28px;
   margin: 22px 0;
   color: var(--text-soft);
   font-style: italic;
-  font-size: 16.5px;
+  font-size: 17px;
   line-height: 1.6;
   position: relative;
 }
@@ -397,21 +416,21 @@ html, body {
   background: transparent;
   margin: 0 0 56px;
   padding: 36px 0 32px;
-  border-top: 1.5px solid var(--text);
-  border-bottom: 0.5px solid var(--line-bright);
+  border-top: 2px solid var(--text);
+  border-bottom: 1px solid var(--line-bright);
   position: relative;
 }
 .body section.section-bottom-line::before {
   content: "";
   position: absolute;
-  top: -1.5px;
+  top: -2px;
   left: 0;
   width: 56px;
-  height: 1.5px;
+  height: 2px;
   background: var(--lime);
 }
 .body h2.section-bottom-line {
-  font-size: 10.5px;
+  font-size: 11px;
   color: var(--text-faint);
   text-transform: uppercase;
   letter-spacing: 0.28em;
@@ -449,7 +468,7 @@ html, body {
 
 /* Thesis · anchor substitute. Pull-statement treatment, no panel. */
 .body h2.section-thesis {
-  font-size: 10.5px;
+  font-size: 11px;
   color: var(--text-faint);
   text-transform: uppercase;
   letter-spacing: 0.22em;
@@ -473,7 +492,7 @@ html, body {
 }
 .body section.section-thesis p:first-child em { color: var(--text); font-style: italic; font-family: var(--serif); }
 .body section.section-thesis p:not(:first-child) {
-  font-size: 14.5px;
+  font-size: 15px;
   line-height: 1.65;
   color: var(--text-soft);
 }
@@ -489,7 +508,7 @@ html, body {
 }
 .body section.section-working-hypothesis p {
   font-family: var(--serif);
-  font-size: 17.5px;
+  font-size: 18px;
   line-height: 1.72;
   color: var(--text);
   font-weight: 400;
@@ -567,10 +586,10 @@ html, body {
   counter-increment: bigidea;
   position: relative;
   padding: 18px 0 18px 72px;
-  border-top: 0.5px solid var(--line-bright);
+  border-top: 1px solid var(--line-bright);
   line-height: 1.6;
 }
-.body section.section-big-ideas ol > li:last-child { border-bottom: 0.5px solid var(--line-bright); }
+.body section.section-big-ideas ol > li:last-child { border-bottom: 1px solid var(--line-bright); }
 .body section.section-big-ideas ol > li::before {
   content: counter(bigidea);
   position: absolute;
@@ -583,7 +602,7 @@ html, body {
   font-size: 32px;
   line-height: 1;
 }
-.body section.section-big-ideas ol > li p { margin: 6px 0; font-size: 14.5px; }
+.body section.section-big-ideas ol > li p { margin: 6px 0; font-size: 15px; }
 .body section.section-big-ideas ol > li p:first-child strong {
   font-family: var(--serif);
   font-size: 22px;
@@ -598,11 +617,11 @@ html, body {
   background: transparent;
   padding: 14px 0 14px 0;
   font-style: normal;
-  font-size: 14.5px;
+  font-size: 15px;
   color: var(--text-soft);
   margin: 18px 0;
-  border-top: 0.5px solid var(--line-bright);
-  border-bottom: 0.5px solid var(--line-bright);
+  border-top: 1px solid var(--line-bright);
+  border-bottom: 1px solid var(--line-bright);
 }
 .body section.section-convergence blockquote::before { display: none; }
 .body section.section-convergence blockquote strong { color: var(--text); }
@@ -612,7 +631,7 @@ html, body {
 
 .body section.section-planning-assumption {
   background: var(--panel-2);
-  border: 0.5px solid var(--line-bright);
+  border: 1px solid var(--line-bright);
   padding: 22px 28px;
   margin: 18px 0 28px;
   position: relative;
@@ -620,10 +639,10 @@ html, body {
 .body section.section-planning-assumption::before {
   content: "";
   position: absolute;
-  top: -0.5px;
+  top: -1px;
   left: 0;
   width: 48px;
-  height: 1.5px;
+  height: 2px;
   background: var(--accent);
 }
 .body section.section-planning-assumption blockquote {
@@ -733,7 +752,7 @@ html, body {
   align-items: baseline;
   gap: 6px 12px;
   margin: 0 0 14px;
-  font-size: 12.5px;
+  font-size: 13px;
   line-height: 1.6;
   color: var(--text);
 }
@@ -745,7 +764,7 @@ html, body {
 }
 .rec-meta-label {
   font-family: var(--mono);
-  font-size: 9.5px;
+  font-size: 10px;
   color: var(--text-faint);
   letter-spacing: 0.28em;
   text-transform: uppercase;
@@ -779,7 +798,7 @@ html, body {
   flex: 0 0 auto;
   font-family: var(--mono);
   font-style: normal;
-  font-size: 9.5px;
+  font-size: 10px;
   color: var(--text-faint);
   letter-spacing: 0.28em;
   text-transform: uppercase;
@@ -804,9 +823,9 @@ html, body {
   padding: 22px 0 22px 64px;
   margin: 0;
   line-height: 1.6;
-  border-top: 0.5px solid var(--line-bright);
+  border-top: 1px solid var(--line-bright);
 }
-.body section.section-the-bet ol > li:last-child { border-bottom: 0.5px solid var(--line-bright); }
+.body section.section-the-bet ol > li:last-child { border-bottom: 1px solid var(--line-bright); }
 .body section.section-the-bet ol > li::before {
   content: counter(rec, decimal-leading-zero);
   position: absolute; top: 24px; left: 0;
@@ -816,20 +835,20 @@ html, body {
   font-size: 22px;
   line-height: 1;
 }
-.body section.section-the-bet ol > li p { margin: 6px 0; font-size: 14.5px; }
-.body section.section-the-bet ol > li p:first-child strong { font-size: 16.5px; color: var(--text); }
+.body section.section-the-bet ol > li p { margin: 6px 0; font-size: 15px; }
+.body section.section-the-bet ol > li p:first-child strong { font-size: 17px; color: var(--text); }
 .body section.section-the-bet > blockquote {
   margin-top: 24px;
   background: rgba(181, 112, 106, 0.06);
   padding: 14px 20px;
-  border-top: 1.5px solid var(--red);
+  border-top: 2px solid var(--red);
   font-style: normal;
 }
 
 /* Why Now · single-callout treatment. */
 .body section.section-why-now {
   background: var(--panel-2);
-  border: 0.5px solid var(--line-bright);
+  border: 1px solid var(--line-bright);
   padding: 24px 28px;
   margin: 22px 0 32px;
   position: relative;
@@ -837,13 +856,13 @@ html, body {
 .body section.section-why-now::before {
   content: "";
   position: absolute;
-  top: -0.5px;
+  top: -1px;
   left: 0;
   width: 56px;
-  height: 1.5px;
+  height: 2px;
   background: var(--accent);
 }
-.body section.section-why-now p { font-size: 14.5px; line-height: 1.65; }
+.body section.section-why-now p { font-size: 15px; line-height: 1.65; }
 .body section.section-why-now p:first-child { color: var(--text); font-weight: 500; }
 
 /* Two Paths · 2-column comparison block. */
@@ -862,7 +881,7 @@ html, body {
 }
 .body section.section-two-paths .path .path-tag {
   font-family: var(--mono);
-  font-size: 9.5px;
+  font-size: 10px;
   letter-spacing: 0.28em;
   text-transform: uppercase;
   color: var(--text-faint);
@@ -870,7 +889,7 @@ html, body {
   margin-bottom: 8px;
 }
 .body section.section-two-paths .path h3 { font-size: 16px; margin: 0 0 10px; }
-.body section.section-two-paths .path p { font-size: 13.5px; color: var(--text-soft); margin: 6px 0; }
+.body section.section-two-paths .path p { font-size: 14px; color: var(--text-soft); margin: 6px 0; }
 
 .body section.section-pre-mortem table.md-table { margin: 18px 0; }
 
@@ -965,7 +984,7 @@ html, body {
   text-transform: uppercase;
   letter-spacing: 0.22em;
   font-weight: 700;
-  border-top: 0.5px solid var(--line-bright);
+  border-top: 1px solid var(--line-bright);
 }
 .body section.section-methodology { color: var(--text-soft); font-size: 12px; line-height: 1.55; }
 .body section.section-methodology p { margin: 8px 0; }
@@ -973,20 +992,20 @@ html, body {
 .body section.section-methodology strong {
   color: var(--text);
   font-family: var(--mono);
-  font-size: 11.5px;
+  font-size: 12px;
 }
 
 .body table.md-table {
   width: 100%;
   border-collapse: collapse;
   margin: 22px 0 24px;
-  font-size: 13.5px;
-  border-top: 1.5px solid var(--text);
+  font-size: 14px;
+  border-top: 2px solid var(--text);
 }
 .body table.md-table th,
 .body table.md-table td {
   padding: 12px 14px;
-  border-bottom: 0.5px solid var(--line-bright);
+  border-bottom: 1px solid var(--line-bright);
   text-align: left;
   vertical-align: top;
   line-height: 1.55;
@@ -996,10 +1015,10 @@ html, body {
   color: var(--text-faint);
   font-family: var(--mono);
   font-weight: 700;
-  font-size: 10px;
+  font-size: 12px;
   letter-spacing: 0.16em;
   text-transform: uppercase;
-  border-bottom: 0.5px solid var(--line-strong);
+  border-bottom: 1px solid var(--line-strong);
   padding: 10px 14px;
 }
 .body table.md-table td:first-child {
@@ -1011,7 +1030,7 @@ html, body {
 
 .body pre.codeblock {
   background: var(--panel-2);
-  border: 0.5px solid var(--line-bright);
+  border: 1px solid var(--line-bright);
   padding: 12px 14px;
   margin: 14px 0;
   overflow-x: auto;
@@ -1026,8 +1045,8 @@ html, body {
    each chart already reads as the caption; this is its frame. */
 .body pre.mermaid {
   background: var(--panel-2);
-  border-top: 1.5px solid var(--text);
-  border-bottom: 0.5px solid var(--line-bright);
+  border-top: 2px solid var(--text);
+  border-bottom: 1px solid var(--line-bright);
   padding: 28px 24px 24px;
   margin: 22px 0 28px;
   text-align: center;
@@ -1060,7 +1079,7 @@ html, body {
 .foot-rule {
   margin: 56px 32px 0;
   padding: 18px 0;
-  border-top: 0.5px solid var(--line-bright);
+  border-top: 1px solid var(--line-bright);
   text-align: center;
   font-family: var(--mono);
   font-size: 10px;
@@ -1082,17 +1101,56 @@ html, body {
 
 /* ─── Metric strip · per-spine treatment ─────────────────────────
    Inherits the spine-agnostic baseline in public/report.html's inline
-   <style>; this block tweaks surface, accent + typography to match
-   the spine's voice. No `border-left`, no parallel borders against
-   adjacent .chapter-num / section h2. */
+   <style> (Swiss-editorial layout: big thin numerals top, mute mono
+   label bottom, hairline grid, no card surfaces). This block only
+   re-skins palette tokens — the layout is constant across spines. */
 .body .metric-strip-intro { color: var(--text-soft); }
-.body .metric-card {
-  background: var(--panel-2);
-  border-color: var(--line-bright);
-}
 .body .metric-value { color: var(--text); }
 .body .metric-card[data-trend="up"]   .metric-value { color: var(--em); }
 .body .metric-card[data-trend="down"] .metric-value { color: var(--red); }
 .body .metric-trend[data-trend="up"]   { color: var(--em); }
 .body .metric-trend[data-trend="down"] { color: var(--red); }
 .body .metric-label { color: var(--accent); }
+
+/* ─── Path comparison · per-spine treatment ──────────────────────
+   Inherits spine-agnostic baseline. boardroom-dark uses lime / red
+   on the cool charcoal panels — sharp without competing with the
+   prose. */
+.body .path-comparison .path { background: var(--panel-2); border-color: var(--line-bright); }
+.body .path-comparison .path-weak   { border-top-color: var(--red); }
+.body .path-comparison .path-strong { border-top-color: var(--em); }
+.body .path-comparison .path-weak   .path-tag { color: var(--red); }
+.body .path-comparison .path-strong .path-tag { color: var(--em); }
+.body .path-comparison .path-name { color: var(--text); }
+.body .path-comparison .path li { color: var(--text-soft); border-color: var(--line); }
+.body .path-comparison .path-weak   li::before { background: var(--red); }
+.body .path-comparison .path-strong li::before { background: var(--em); }
+.body .path-comparison-implication { color: var(--text-soft); }
+
+/* ─── Views-compared · per-spine · boardroom-dark ──────────────
+   Hairline frame · accent stripe on TOP (per project rule).
+   Alignment uses `--em` (gold); divergence uses `--red`. */
+.body .vc-section-label { color: var(--em); border-color: var(--line-bright); }
+.body .views-compared-alignment .vc-card {
+  border-color: var(--line-bright);
+  border-top-color: var(--em);
+}
+.body .vc-card-headline { color: var(--text); }
+.body .vc-chip { color: var(--text-soft); border-color: var(--line-bright); }
+.body .vc-card-note { color: var(--text-soft); }
+.body .vc-fork { border-color: var(--line-bright); border-top-color: var(--red); }
+.body .vc-fork-hinge { color: var(--text); }
+.body .vc-side { border-color: var(--line); }
+.body .vc-side-label { color: var(--red); }
+.body .vc-side-stance { color: var(--text-soft); }
+.body .vc-fork-resolution { color: var(--text-soft); border-top-color: var(--line); }
+.body .vc-resolution-label { color: var(--text-faint); }
+.body .vc-row-name { color: var(--text); }
+.body .vc-row-stance { color: var(--em); }
+.body .vc-row-position { color: var(--text-soft); }
+.body .vc-row-quote { color: var(--text); }
+.body .views-compared-synthesis {
+  border-color: var(--line-bright);
+  border-top-color: var(--text-faint);
+}
+.body .vc-synthesis-body { color: var(--text); }