/* Rook design system v1, October 29, 2026.
   The soft left-menu look Paul chose on October 28, taken from the Lab's Market
   dashboard. The frame and every restyled page use these --rk-* tokens and rk-*
   classes; docs/design-system.md describes them. Pages that have not had their
   own Phase 3 step yet keep their older styles inside this frame. */

/* Fonts for the older page styles, moved here from shell.css. */
:root{--ui:"Sora",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--ink3:#5b7190}

:root{
  --rk-bg:#05080b;--rk-bg2:#0a1014;--rk-panel:#0c1419;--rk-panel2:#101c22;--rk-sidebar:#0e171f;
  --rk-line:#203540;--rk-line-soft:#16262d;--rk-sidebar-line:#25313b;
  --rk-ink:#e6f1f3;--rk-text:#d8ece6;--rk-soft:#a9bec9;--rk-muted:#78909f;
  --rk-mint:#2fe0ab;--rk-mint-dim:#1a7a60;--rk-aqua:#8ed5e0;--rk-gold:#e2bd87;--rk-violet:#c1b8e8;
  --rk-amber:#ffbe57;--rk-red:#ff6064;--rk-glow:rgba(47,224,171,.09);
  --rk-hover:#17242e;--rk-current-bg:#17362f;--rk-current-line:#2c5d4e;--rk-current-ink:#c2f5df;
  --rk-radius:14px;--rk-radius-sm:10px;--rk-nav-width:248px;
  --rk-font:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rk-num:"IBM Plex Mono",ui-monospace,monospace;
}

/* Frame: left menu on wide screens, a top bar with a menu button on phones. */
.rk-shell{display:grid;grid-template-columns:var(--rk-nav-width) minmax(0,1fr);min-height:100vh;background:var(--rk-bg)}
.rk-nav{position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;display:flex;flex-direction:column;padding:22px 16px 18px;background:var(--rk-sidebar);border-right:1px solid var(--rk-sidebar-line);font-family:var(--rk-font);z-index:30}
/* app.css still styles every nav element for the old top tabs; keep this menu clear of it. */
.rk-nav nav{order:0;width:auto;align-self:auto}
.rk-brand{display:flex;align-items:center;gap:11px;padding:0 10px 20px;color:#eff9f4;text-decoration:none;font:650 20px/1.2 var(--rk-font);letter-spacing:.09em}
.rk-brand img{width:36px;height:36px;object-fit:contain;flex:none}
.rk-brand small{display:block;margin-top:2px;font-size:10px;font-weight:400;letter-spacing:.03em;color:#93a9b4}
.rk-nav-label{margin:6px 12px 12px;font-size:9.5px;line-height:1.4;text-transform:uppercase;letter-spacing:.14em;color:var(--rk-muted)}
.rk-menu{display:grid;gap:6px;margin-bottom:14px}
.rk-menu a{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 12px;border:1px solid transparent;border-radius:var(--rk-radius-sm);color:#a9bac5;font-family:var(--rk-font);letter-spacing:normal;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.rk-menu a:hover{background:var(--rk-hover);border-color:transparent;color:#e7f7f2}
.rk-menu a[aria-current]{background:var(--rk-current-bg);border-color:var(--rk-current-line);color:var(--rk-current-ink)}
.rk-menu svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rk-menu span{font-size:13px;font-weight:600;line-height:1.25}
.rk-menu small{display:block;margin-top:3px;font-size:10px;font-weight:400;line-height:1.3;opacity:.72}
.rk-later{display:grid;gap:2px}
.rk-later a{display:block;padding:6px 12px;border:0;border-radius:8px;color:#a4bac6;font:12px/1.5 var(--rk-font);letter-spacing:normal;text-decoration:none}
.rk-later a:hover,.rk-later a[aria-current]{background:var(--rk-hover);color:#e7f7f2}
.rk-nav-foot{margin-top:auto;padding:18px 10px 0;display:grid;gap:10px;font-size:11.5px}
.rk-nav-foot a,.rk-nav-foot button{justify-self:start;min-height:0;padding:0;border:0;background:none;color:#a4bac6;font:inherit;line-height:1.5;text-decoration:none;cursor:pointer}
.rk-nav-foot a:hover,.rk-nav-foot button:hover{color:var(--rk-mint)}
.rk-nav-foot form{display:block;margin:0;padding:0}
.rk-nav-legal{color:#7f95a2}
.rk-nav-foot .rk-nav-legal a{display:inline}
.rk-nav-note{font-size:9.5px;color:#6f8998;letter-spacing:.1em;text-transform:uppercase}
/* Short screens (a tablet held sideways, a small laptop): the menu tightens so it fits without scrolling. */
@media (min-width:901px) and (max-height:880px){.rk-nav{padding:14px 14px 12px}.rk-brand{padding-bottom:12px}.rk-nav-label{margin:2px 12px 8px}.rk-menu{gap:2px;margin-bottom:8px}.rk-menu a{min-height:44px;padding:6px 12px}.rk-later a{padding:3px 12px}.rk-nav-foot{padding-top:10px;gap:5px}}
.rk-main{min-width:0;display:flex;flex-direction:column}
.rk-main>main{flex:1;width:100%;box-sizing:border-box}
footer.rk-footer{display:block;padding:14px 28px;border-top:1px solid var(--rk-line-soft);color:var(--rk-muted);font:11px/1.5 var(--rk-font);letter-spacing:.06em}
.rk-topbar,.rk-scrim{display:none}
.rk-nav a:focus-visible,.rk-nav button:focus-visible,.rk-topbar a:focus-visible,.rk-menu-button:focus-visible{outline:2px solid var(--rk-mint);outline-offset:2px}

@media (max-width:900px){
  .rk-shell{display:block}
  .rk-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:25;padding:10px 16px;background:var(--rk-sidebar);border-bottom:1px solid var(--rk-sidebar-line)}
  .rk-topbar .rk-brand{padding:0;font-size:17px}
  .rk-topbar .rk-brand img{width:30px;height:30px}
  .rk-menu-button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--rk-line);border-radius:999px;background:transparent;color:var(--rk-ink);font:600 13px var(--rk-font);cursor:pointer}
  .rk-menu-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
  .rk-nav{position:fixed;top:0;bottom:0;left:0;width:min(86vw,320px);height:auto;transform:translateX(-102%);visibility:hidden;transition:transform .2s ease,visibility .2s;box-shadow:0 0 40px #000c}
  .rk-menu-open .rk-nav{transform:none;visibility:visible}
  .rk-menu-open .rk-scrim{display:block;position:fixed;inset:0;z-index:28;width:100%;padding:0;border:0;background:#000b}
  footer.rk-footer{padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){.rk-nav{transition:none}}

/* Copied tools (Market dashboard, Headlines, Charts) fill the whole area beside the menu. */
.rk-shell .rk-main>main:has(> .rk-tool){max-width:none;min-height:0;padding:0}
body:has(.rk-tool) footer.rk-footer{display:none}
/* The guide fills the width beside the menu, with the same margins as the other pages. */
.guide-sheet{width:auto;max-width:none;margin:34px clamp(16px,3vw,40px) 48px}
.rk-tool{height:100vh;height:100dvh}
.rk-tool-frame{display:block;width:100%;height:100%;border:0;background:var(--rk-bg)}
@media (max-width:900px){.rk-tool{height:calc(100vh - 61px);height:calc(100dvh - 61px)}}
/* A headed tool: the MVP page heading, then the tool filling the rest of the screen. */
.rk-tool--headed{display:flex;flex-direction:column}
.rk-tool-head{margin:0;padding:30px clamp(16px,3vw,40px) 14px;font-family:var(--rk-font)}
.rk-tool--headed .rk-tool-frame{flex:1;min-height:0;height:auto}
@media (max-width:760px){.rk-tool-head{padding:18px 16px 8px}.rk-tool-head p:not(.rk-eyebrow){display:none}}

/* Page building blocks for restyled pages. */
.rk-page{padding:34px clamp(16px,3vw,40px) 48px;font-family:var(--rk-font);color:var(--rk-text)}
.rk-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
.rk-page-head h1{margin:0;font:600 26px/1.2 var(--rk-font);color:var(--rk-ink)}
.rk-page-head p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--rk-soft)}
.rk-page-head .rk-eyebrow{margin:0 0 8px;font-size:10.5px;color:var(--rk-mint)}
.rk-eyebrow{margin:0 0 8px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rk-mint)}
.rk-card{padding:20px 22px;border:1px solid var(--rk-line);border-radius:var(--rk-radius);background:linear-gradient(160deg,var(--rk-panel2),var(--rk-panel))}
.rk-card p{margin:0;font-size:14px;line-height:1.6;color:var(--rk-soft)}
.rk-num{font-family:var(--rk-num);font-variant-numeric:tabular-nums}

/* Sections, grids and cards. */
.rk-section{margin-top:34px}
.rk-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;margin:0 0 14px;flex-wrap:wrap}
.rk-section-head h2{margin:0;font:600 19px/1.3 var(--rk-font);color:var(--rk-ink)}
.rk-section-head a,.rk-card .rk-more{font:500 12.5px var(--rk-font);color:var(--rk-aqua);text-decoration:none}
.rk-section-head a:hover,.rk-link-card:hover .rk-more{color:var(--rk-mint)}
.rk-grid{display:grid;gap:14px}
.rk-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rk-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rk-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rk-card h3{margin:0 0 8px;font:600 18px/1.3 var(--rk-font);color:var(--rk-ink)}
.rk-card p+p{margin-top:8px}
.rk-card .rk-eyebrow{margin:0 0 8px;font-size:10.5px;line-height:1.5;color:var(--rk-soft)}
.rk-card--stocks{border-color:#24515a;background:linear-gradient(160deg,#10262c,#0b1519)}
.rk-card--bitcoin{border-color:#5a4826;background:linear-gradient(160deg,#241d12,#13110c)}
.rk-card--bitcoin .rk-eyebrow{color:var(--rk-gold)}
.rk-note{margin:10px 0 0;font:12px/1.5 var(--rk-font);color:var(--rk-muted)}
.rk-card .rk-note{font-size:12px;color:var(--rk-muted)}
.rk-notice{margin:0 0 16px;padding:12px 16px;border:1px solid #5a4826;border-radius:var(--rk-radius-sm);background:#1b160e;color:var(--rk-gold);font:13px/1.5 var(--rk-font)}
.rk-chip{display:inline-flex;align-items:center;padding:2px 9px;border:1px solid var(--rk-line);border-radius:999px;font:600 10.5px/1.6 var(--rk-font);color:var(--rk-soft)}
.rk-details{margin-top:12px}
.rk-details summary{cursor:pointer;font:600 12px var(--rk-font);color:var(--rk-aqua)}
.rk-details p,.rk-details li{font-size:12.5px;line-height:1.6;color:var(--rk-soft)}
.rk-details ul{margin:8px 0 0;padding-left:18px}
.rk-card .rk-score-value{margin:2px 0 8px;font:600 34px/1.1 var(--rk-num);color:var(--rk-ink)}
.rk-card .rk-score-value small{margin-left:6px;font:400 13px var(--rk-font);color:var(--rk-muted)}
.rk-state.is-up{color:var(--rk-mint)}
.rk-state.is-down{color:var(--rk-red)}
.rk-link-card{display:block;text-decoration:none;transition:border-color .15s}
.rk-link-card:hover{border-color:var(--rk-mint-dim)}
.rk-brief p{color:var(--rk-text)}
.rk-stories{display:grid;gap:12px;margin-top:14px}
.rk-story{padding:18px 20px;border:1px solid var(--rk-line-soft);border-radius:var(--rk-radius);background:var(--rk-panel)}
.rk-story h3{margin:8px 0 6px;font:600 16px/1.35 var(--rk-font);color:var(--rk-ink)}
.rk-story p{margin:0;font:13px/1.6 var(--rk-font);color:var(--rk-soft)}
.rk-story .rk-story-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--rk-muted)}
.rk-story a{display:inline-block;margin:10px 14px 0 0;font:500 12px var(--rk-font);color:var(--rk-aqua);text-decoration:none}
@media (max-width:1200px){.rk-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.rk-grid-2,.rk-grid-3,.rk-grid-4{grid-template-columns:1fr}.rk-page-head h1{font-size:24px}}

/* Signed-out pages (sign-in, invitation, legal) and Invitations keep their layout but use the Rook colors. */
body:not(:has(.rk-shell)){--accent:var(--rk-mint);--bg:var(--rk-bg);--bg2:var(--rk-bg2);--panel:var(--rk-panel);--panel2:var(--rk-panel2);--line:var(--rk-line);--ink:var(--rk-ink);--ink2:var(--rk-soft);--ink3:var(--rk-muted);--hover:#6ff0c8;background:var(--rk-bg)}
.topbar .brand-mark{width:30px;height:30px;object-fit:contain}
/* Invitations (owner only) keeps its layout but uses the Rook colors. */
body[data-page=invitations]{--accent:var(--rk-mint);--bg:var(--rk-bg);--bg2:var(--rk-bg2);--panel:var(--rk-panel);--panel2:var(--rk-panel2);--line:var(--rk-line);--ink:var(--rk-ink);--ink2:var(--rk-soft);--ink3:var(--rk-muted);--hover:#6ff0c8}

/* Legal pages (templates/legal.html) and their links. */
.rk-legal{max-width:860px}
.rk-legal section{margin-top:26px}
.rk-legal h2{margin:0 0 8px;font:600 17px/1.35 var(--rk-font);color:var(--rk-ink)}
.rk-legal p,.rk-legal li{font:14px/1.7 var(--rk-font);color:var(--rk-soft)}
.rk-legal ul{margin:0;padding-left:20px;display:grid;gap:6px}
.rk-legal b{font-weight:600;color:var(--rk-text)}
.rk-legal a,footer.rk-footer a,footer .legal-links a,.auth-card .agree a{color:var(--rk-aqua);text-decoration:none}
.rk-legal a:hover,footer.rk-footer a:hover,footer .legal-links a:hover,.auth-card .agree a:hover{color:var(--rk-mint)}
.rk-legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.rk-legal-nav a{padding:6px 12px;border:1px solid var(--rk-line);border-radius:999px;font:500 12px var(--rk-font);letter-spacing:normal;color:var(--rk-soft)}
.rk-legal-nav a[aria-current]{border-color:var(--rk-current-line);background:var(--rk-current-bg);color:var(--rk-current-ink)}
.auth-card label.agree{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:14px;line-height:1.5}
.auth-card label.agree input{width:auto;margin:3px 0 0;flex:none}