/* ViralRank: the gold system. Shared tokens, the four Looks, base rules and components.
   Spec: docs/PLAN-HUB-LOOK-2026-10-06.md. The values come from the approved mockups in docs/design/gold-look-2026-10-06
   (Main.dc.html, helmet block, lines 16 to 70 for the tokens and the Look blocks). Near-black surfaces, soft glows,
   frosted bars, Geist. Gold (#ffcc33) marks only what you press or what needs you: primary buttons, the needs-you count
   and dots, the glow behind a needs-you card, and the brain's one needs-you node. Never a selected chip, tab or menu
   item, a heading or a score, in any Look. The Look (the second colour) carries information instead: selected chips and
   tabs, the brain, agent accents, charts and info glows.

   Loaded before each page's own <style>, so a page rule of equal weight wins. index.html maps its legacy token names
   (--bg, --surface, --text, ...) onto the tokens below, which is how every page follows the system at once. Dark is the
   default; a saved vr-theme of "light" is the only thing that switches it. A Look is html[data-look=violet|pink|blue];
   no attribute (or "gold") is the gold Look. */

/* ---------- tokens that do not change with the theme ---------- */

:root{
  --gold:#ffcc33; --gold-ink:#1d1503;
  --glow:1;   /* how strong every glow is: 1 is the mockups, 0 turns them off */
  --dot-working:#4fbf86; --dot-needs:#ffcc33; --dot-idle:#9a958c; --dot-off:#5b5852;
  --agent-hermes:#6b8fd6; --agent-claude:#d9825f; --agent-codex:#4fae8c; --agent-openclaw:#c46a6a;
  --ui:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* The Studio Wall names that old page rules still read, each pointed at its gold twin. Home and Usage (home.css)
     and the legacy index.html rules use them until their page is restyled. */
  --chalk:var(--ink); --chalk-2:var(--ink-2); --chalk-3:var(--ink-2);
  --field:var(--inset);
  --paper:var(--card); --paper-2:var(--inset); --paper-line:var(--card-line);
  --active:var(--sel-bg); --active-ink:var(--sel-ink);
  --shadow:var(--shadow-card);
}

/* ---------- dark: the default, also when a page forgets its data-theme ---------- */

:root,
html[data-theme=dark]{
  --page:#0d0d10; --panel:#16161a; --inset:#111114; --line:#26252b;
  --ink:#f1eff4; --ink-2:#97949e; --ink-3:#6e6b75;   /* ink, muted (--ink-2) and quiet (--ink-3, decoration only) */
  --card:#18181c; --card-line:#2a2930; --inset-line:#222127; --row-line:#1f1e24;
  --raise:#222127;                                    /* a hover or third surface */
  --rail-hi:#111114;                                  /* top of the side menu gradient */
  --nav-ink:#a9a6b1; --body-ink:#dcd9e2;
  --hover:rgba(255,255,255,.045);
  --btn-ink:#e6e3ea; --btn-line:#34333a; --btn-line-hi:#4a4951; --btn-hover:rgba(255,255,255,.04);
  --ctl-bg:#131316; --ctl-line:#26252b; --ctl-ink:#b9b6c1; --ctl-hover-bg:#1b1b20; --ctl-hover-line:#36353d;
  --chip-bg:#141417; --chip-line:#2c2b32; --chip-text:#cfccd6; --chip-line-hi:#3d3c44;
  --track:#232228;
  --frost-bg:rgba(26,25,35,.77); --frost-line:rgba(255,255,255,.17);
  --talk-bg:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); --talk-line:rgba(255,255,255,.1);
  --shadow-panel:inset 0 1px 0 rgba(255,255,255,.03),0 24px 48px -32px rgba(0,0,0,.8);
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -36px rgba(0,0,0,.9);
  --shadow-pop:0 16px 50px rgba(0,0,0,.45);
  --scrim:rgba(10,11,13,.5);
  --scroll-thumb:#34333a;
  --stamp:#ff7a59; --stamp-rgb:255,122,89;            /* the risky-action stamps: send, spend, delete */
  --focus-ring:var(--gold);
  --ok-ink:#8fdcb4; --ok-rgb:79,191,134;               /* a status that is good (LIVE, On): its text, and its line as an rgb */
  color-scheme:dark;
}

/* ---------- the gold Look, dark (the default): neutral info accents, a warm white-gold brain ----------
   One deliberate difference from Main.dc.html: the mockup tints the selected state gold (--sel-bg, --sel-ink). The plan
   and the spec forbid gold on any selected chip, tab or menu item, so in this Look the selected state is the neutral
   --acc tone, the same one the selected chips use.

   The four Look cards on Account (.swatch, index.html) preview their own Look on a screen that is always dark, as
   Account.dc.html draws them. They are named in the same rule as their Look below, in the dark blocks only: one source
   for the colours, so a card cannot drift from the page it previews, and a light page still shows dark previews. */

:root,
html[data-look=gold],
.swatch[data-look=gold]{
  --sel-bg:rgba(255,255,255,.07); --sel-ink:#f1eff4;
  --acc-rgb:230,227,234; --acc-soft:rgba(255,255,255,.07); --acc-line:rgba(255,255,255,.24); --acc-ink:#f1eff4; --acc-fill:#d6d3dc;
  --info-rgb:255,236,210; --info-a:.05;
  --win-rgb:255,236,210; --win-a:.05; --win-num:#f1eff4;
  --brain-rgb:255,228,176; --brain-line:#fff1d4; --brain-fold:#ffe6b8; --brain-node:#fffaf0; --brain-spark:#ffffff; --need-node:#ffcc33;
  --meter:linear-gradient(90deg,#8a8693,#e4e0ea);
  --chip-ink:#f1eff4;                                 /* text on a dark scrim over a picture: the same in both themes */
  --cmd:#bdb9c4; --cmd-rgb:189,185,196;
  --num-ink:#d6d3dc; --num-ring:rgba(255,255,255,.16);
  --streak-ink:#dcd9e2; --streak-line:rgba(255,255,255,.16); --streak-bg:rgba(255,255,255,.03);
  --code-s:#efe3c4;
  --orb:radial-gradient(circle at 34% 30%,#fffaf0 0%,#ffe6b8 32%,#c9a35e 66%,#3a2e18 100%); --orb-glow:rgba(255,228,176,.45);
}

html[data-look=violet],
.swatch[data-look=violet]{
  --sel-bg:rgba(167,139,250,.14); --sel-ink:#c9b8ff;
  --acc-rgb:167,139,250; --acc-soft:rgba(167,139,250,.14); --acc-line:rgba(167,139,250,.5); --acc-ink:#d9cdff; --acc-fill:#a78bfa;
  --info-rgb:167,139,250; --info-a:.11;
  --win-rgb:61,220,151; --win-a:.10; --win-num:#3ddc97;
  --brain-rgb:167,139,250; --brain-line:#d2c6ff; --brain-fold:#b9a7ff; --brain-node:#f4f0ff; --brain-spark:#ffffff;
  --meter:linear-gradient(90deg,#7c5ff0,#c4b5fd);
  --chip-ink:#dcd2ff;
  --cmd:#b08cff; --cmd-rgb:176,140,255;
  --num-ink:#cdbfff; --num-ring:rgba(167,139,250,.45);
  --streak-ink:#3ddc97; --streak-line:rgba(61,220,151,.35); --streak-bg:rgba(61,220,151,.06);
  --code-s:#ddd4fb;
  --orb:radial-gradient(circle at 34% 30%,#f6f2ff 0%,#c4b5fd 30%,#7c5ff0 64%,#1f1640 100%); --orb-glow:rgba(167,139,250,.55);
}

html[data-look=pink],
.swatch[data-look=pink]{
  --sel-bg:rgba(243,134,161,.13); --sel-ink:#f9b3c5;
  --acc-rgb:243,134,161; --acc-soft:rgba(243,134,161,.13); --acc-line:rgba(243,134,161,.5); --acc-ink:#fcc9d6; --acc-fill:#f386a1;
  --info-rgb:243,134,161; --info-a:.10;
  --win-rgb:61,220,151; --win-a:.10; --win-num:#3ddc97;
  --brain-rgb:243,134,161; --brain-line:#ffd2dd; --brain-fold:#f7a8bc; --brain-node:#fff2f5; --brain-spark:#ffffff;
  --meter:linear-gradient(90deg,#d9587d,#f9b3c5);
  --chip-ink:#fcc9d6;
  --cmd:#bdb9c4; --cmd-rgb:189,185,196;
  --num-ink:#f9b3c5; --num-ring:rgba(243,134,161,.45);
  --streak-ink:#3ddc97; --streak-line:rgba(61,220,151,.35); --streak-bg:rgba(61,220,151,.06);
  --code-s:#f7d9e1;
  --orb:radial-gradient(circle at 34% 30%,#fff3f6 0%,#f9b3c5 30%,#d9587d 64%,#3a1420 100%); --orb-glow:rgba(243,134,161,.55);
}

html[data-look=blue],
.swatch[data-look=blue]{
  --sel-bg:rgba(124,167,255,.14); --sel-ink:#b3cbff;
  --acc-rgb:124,167,255; --acc-soft:rgba(124,167,255,.14); --acc-line:rgba(124,167,255,.5); --acc-ink:#c9dbff; --acc-fill:#7ca7ff;
  --info-rgb:124,167,255; --info-a:.11;
  --win-rgb:61,220,151; --win-a:.10; --win-num:#3ddc97;
  --brain-rgb:124,167,255; --brain-line:#d2e1ff; --brain-fold:#a5c2ff; --brain-node:#f3f7ff; --brain-spark:#ffffff;
  --meter:linear-gradient(90deg,#4f7ff0,#b3cbff);
  --chip-ink:#c9dbff;
  --cmd:#9dbcff; --cmd-rgb:124,167,255;
  --num-ink:#b3cbff; --num-ring:rgba(124,167,255,.45);
  --streak-ink:#3ddc97; --streak-line:rgba(61,220,151,.35); --streak-bg:rgba(61,220,151,.06);
  --code-s:#d8e4fb;
  --orb:radial-gradient(circle at 34% 30%,#f3f7ff 0%,#b3cbff 30%,#4f7ff0 64%,#101c3a 100%); --orb-glow:rgba(124,167,255,.55);
}

/* ---------- light ----------
   Surfaces: page #f4f3f6, panels and cards #ffffff, insets #f7f6f9, borders #e4e2e8, ink #19181d, muted #5f5c66, quiet
   #6e6b75 (5.2:1 on white, so even the quiet tone can carry small text here). Gold buttons are unchanged.
   The mockups are dark only, so every second-colour text token is darkened until it reads 4.5:1 on the light panel
   (#ffffff), the light inset (#f7f6f9), the light page (#f4f3f6) and the Look's own tint over each of them. The values
   below were chosen with a margin; test_ui.py re-checks every one of them against the surfaces, in both themes.
     violet  #a78bfa  ->  #5d41c8   6.87:1 on #ffffff
     pink    #f386a1  ->  #b42a55   6.17:1
     blue    #7ca7ff  ->  #2859c9   6.25:1
     green   #3ddc97  ->  #17704a   6.08:1  (wins and streaks in the three coloured Looks)
     stamp   #ff7a59  ->  #ae3719   6.25:1  (send, spend, delete)
     gold Look neutral ink  #19181d 17.65:1, muted #5f5c66 6.54:1.
   The brain keeps its hue but goes deeper, so its lines stay visible (3:1 or more) on the light page. Overlay text on
   a dark scrim (--chip-ink) and code colours (--code-s) are the same in both themes. */

html[data-theme=light]{
  --page:#f4f3f6; --panel:#ffffff; --inset:#f7f6f9; --line:#e4e2e8;
  --ink:#19181d; --ink-2:#5f5c66; --ink-3:#6e6b75;
  --card:#ffffff; --card-line:#dedce4; --inset-line:#e9e7ee; --row-line:#ecebf0;
  --raise:#ecebf0;
  --rail-hi:#fbfafc;
  --nav-ink:#4f4c58; --body-ink:#2c2a33;
  --hover:rgba(25,24,29,.05);
  --btn-ink:#19181d; --btn-line:#cfccd6; --btn-line-hi:#a9a6b1; --btn-hover:rgba(25,24,29,.04);
  --ctl-bg:#ffffff; --ctl-line:#dcdae2; --ctl-ink:#5f5c66; --ctl-hover-bg:#f1f0f4; --ctl-hover-line:#c9c6d0;
  --chip-bg:#ffffff; --chip-line:#dcdae2; --chip-text:#3f3d46; --chip-line-hi:#bdbac6;
  --track:#e4e2e8;
  --frost-bg:rgba(255,255,255,.78); --frost-line:rgba(25,24,29,.12);
  --talk-bg:linear-gradient(180deg,rgba(25,24,29,.045),rgba(25,24,29,.015)); --talk-line:rgba(25,24,29,.12);
  --shadow-panel:0 1px 2px rgba(25,24,29,.04),0 18px 40px -28px rgba(25,24,29,.2);
  --shadow-card:0 1px 2px rgba(25,24,29,.05),0 22px 44px -30px rgba(25,24,29,.24);
  --shadow-pop:0 16px 50px rgba(25,24,29,.2);
  --scrim:rgba(25,24,29,.4);
  --scroll-thumb:#cfccd6;
  --stamp:#ae3719; --stamp-rgb:174,55,25;
  --focus-ring:#9a6f00;   /* a deeper gold: #ffcc33 is 1.5:1 on white, this is 4.5:1 */
  --ok-ink:#17704a; --ok-rgb:23,112,74;               /* 6.08:1 on white, 5.65:1 on the inset, 5.5:1 on the page */
  color-scheme:light;

  /* the gold Look, light */
  --sel-bg:rgba(25,24,29,.07); --sel-ink:#19181d;
  --acc-rgb:25,24,29; --acc-soft:rgba(25,24,29,.06); --acc-line:rgba(25,24,29,.22); --acc-ink:#19181d; --acc-fill:#5f5c66;
  --info-rgb:90,84,110; --info-a:.06;
  --win-rgb:90,84,110; --win-a:.06; --win-num:#19181d;
  --brain-rgb:176,128,40; --brain-line:#8a6a2a; --brain-fold:#a07c35; --brain-node:#6b5220; --brain-spark:#3d2f12;
  --meter:linear-gradient(90deg,#7b7784,#3a3842);
  --cmd:#5f5c66; --cmd-rgb:95,92,102;
  --num-ink:#3f3d46; --num-ring:rgba(25,24,29,.2);
  --streak-ink:#3f3d46; --streak-line:rgba(25,24,29,.18); --streak-bg:rgba(25,24,29,.04);
}

html[data-theme=light][data-look=violet]{
  --sel-bg:rgba(93,65,200,.10); --sel-ink:#5d41c8;
  --acc-rgb:93,65,200; --acc-soft:rgba(93,65,200,.08); --acc-line:rgba(93,65,200,.4); --acc-ink:#5d41c8; --acc-fill:#6347d0;
  --info-rgb:93,65,200; --info-a:.07;
  --win-rgb:23,112,74; --win-a:.07; --win-num:#17704a;
  --brain-rgb:93,65,200; --brain-line:#6d52d8; --brain-fold:#8b72ec; --brain-node:#4a30a8; --brain-spark:#2f1d78;
  --meter:linear-gradient(90deg,#7357e6,#5d41c8);
  --cmd:#5d41c8; --cmd-rgb:93,65,200;
  --num-ink:#5d41c8; --num-ring:rgba(93,65,200,.4);
  --streak-ink:#17704a; --streak-line:rgba(23,112,74,.35); --streak-bg:rgba(23,112,74,.06);
}

html[data-theme=light][data-look=pink]{
  --sel-bg:rgba(180,42,85,.09); --sel-ink:#b42a55;
  --acc-rgb:180,42,85; --acc-soft:rgba(180,42,85,.07); --acc-line:rgba(180,42,85,.4); --acc-ink:#b42a55; --acc-fill:#c23a63;
  --info-rgb:180,42,85; --info-a:.06;
  --win-rgb:23,112,74; --win-a:.07; --win-num:#17704a;
  --brain-rgb:180,42,85; --brain-line:#c8466d; --brain-fold:#d4627f; --brain-node:#8f1f45; --brain-spark:#5e0f2c;
  --meter:linear-gradient(90deg,#d0486f,#b42a55);
  --cmd:#5f5c66; --cmd-rgb:95,92,102;
  --num-ink:#b42a55; --num-ring:rgba(180,42,85,.4);
  --streak-ink:#17704a; --streak-line:rgba(23,112,74,.35); --streak-bg:rgba(23,112,74,.06);
}

html[data-theme=light][data-look=blue]{
  --sel-bg:rgba(40,89,201,.10); --sel-ink:#2859c9;
  --acc-rgb:40,89,201; --acc-soft:rgba(40,89,201,.08); --acc-line:rgba(40,89,201,.4); --acc-ink:#2859c9; --acc-fill:#2f64d6;
  --info-rgb:40,89,201; --info-a:.07;
  --win-rgb:23,112,74; --win-a:.07; --win-num:#17704a;
  --brain-rgb:40,89,201; --brain-line:#4a76e0; --brain-fold:#6b90e8; --brain-node:#1c47a8; --brain-spark:#102a6e;
  --meter:linear-gradient(90deg,#3b72e6,#2859c9);
  --cmd:#2859c9; --cmd-rgb:40,89,201;
  --num-ink:#2859c9; --num-ring:rgba(40,89,201,.4);
  --streak-ink:#17704a; --streak-line:rgba(23,112,74,.35); --streak-bg:rgba(23,112,74,.06);
}

/* ---------- base ---------- */

html{scrollbar-color:var(--scroll-thumb) var(--page)}
/* The page: its colour, and the Look's soft glow at the top (the root of Main.dc.html). A background picture, so it cannot make the
   page scroll sideways; set in pixels from the top so a long page keeps the same glow as a short one. */
body{
  margin:0;color:var(--ink);font:14px/1.5 var(--ui);-webkit-font-smoothing:antialiased;
  background:radial-gradient(1000px 640px at 62% -72px,rgba(var(--brain-rgb),calc(.06 * var(--glow))),rgba(var(--brain-rgb),0) 70%) no-repeat,var(--page);
}
::selection{background:var(--gold);color:var(--gold-ink)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px}
input[type=checkbox],input[type=radio]{accent-color:var(--acc-fill)}
::placeholder{color:var(--ink-2)}
.tnum,.mono,td,th{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}

/* ---------- surfaces ---------- */

/* panel: a section of a page */
.panel{
  position:relative;border-radius:18px;border:1px solid var(--line);background-color:var(--panel);color:var(--ink);
  box-shadow:var(--shadow-panel);
}

/* a glow behind a surface. Gold means it needs you; info is the Look's colour; ok is the wins tint (green in the coloured Looks) */
.glow-gold,
.paper.pinned{
  background-image:radial-gradient(120% 100% at 0% 0%,rgba(255,204,51,calc(.12 * var(--glow))),rgba(255,204,51,0) 60%);
}
.glow-info{
  background-image:radial-gradient(120% 100% at 0% 0%,rgba(var(--info-rgb),calc(var(--info-a) * var(--glow))),rgba(var(--info-rgb),0) 60%);
}
.glow-ok{
  background-image:radial-gradient(120% 100% at 0% 0%,rgba(var(--win-rgb),calc(var(--win-a) * var(--glow))),rgba(var(--win-rgb),0) 60%);
}

/* card: a thing you read or act on. The old .paper is the same surface. Other parts of the app already have a .card of their
   own, so they are left out: the Feed's post tiles (inside .grid or the post dialog), the Board's cards (#view-kanban), the
   hub flag, the sign-in box and the share packs. test_ui.py lists every producer of class="card" and fails on a new one
   that is neither excluded here nor meant to take this component. :where() keeps the rule at the weight of a bare class,
   so any page rule still wins. */
.paper,
.card:where(:not(.grid .card,#postdlg .card,#view-kanban .card,.hub-flag,.wrap > .card,#sh-packs .card)){
  position:relative;border-radius:16px;border:1px solid var(--card-line);background-color:var(--card);color:var(--ink);
  box-shadow:var(--shadow-card);
}
.card:where(:not(.grid .card,#postdlg .card,#view-kanban .card,.hub-flag,.wrap > .card,#sh-packs .card)){
  z-index:1;display:flex;flex-direction:column;gap:14px;padding:22px;
}
.paper{padding:22px}
/* inner fields on a sheet */
.paper :where(input:not([type=checkbox]):not([type=radio]),textarea){
  background:var(--inset);color:var(--ink);border:1px solid var(--inset-line);border-radius:12px;
}
.paper :where(select){background-color:var(--inset);color:var(--ink);border:1px solid var(--inset-line)}
.paper :where(input,textarea)::placeholder{color:var(--ink-2)}
/* a sheet that holds a ledger: tight at the top, scrolls sideways on a narrow screen */
.paper.ledger-wrap{padding:6px 8px 12px;overflow-x:auto}

/* frost: a bar or a floating control over the page. It blurs what is behind it */
.frost{
  background:var(--frost-bg);border:1px solid var(--frost-line);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-pop);
}

/* eyebrow: the small heading of a zone. The old label tape is the same text */
.eyebrow,
.tape{
  display:block;margin:0;max-width:100%;
  font:600 10px/1.4 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
}

/* ---------- stamp: names the risky action on a card ---------- */

.stamp{
  --st:var(--stamp-rgb);
  display:inline-flex;align-items:center;flex:none;white-space:nowrap;height:22px;padding:0 9px;border-radius:99px;
  border:1px solid rgba(var(--st),.5);background-color:rgba(var(--st),.07);color:rgb(var(--st));
  font:600 10px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
}
.stamp.send,.stamp.spend,.stamp.delete{--st:var(--stamp-rgb)}
.stamp.command{--st:var(--cmd-rgb);border-color:rgba(var(--st),.45);background-color:rgba(var(--st),.06)}
/* an empty stamp says its own word */
.stamp.send:empty::before{content:"SEND"}
.stamp.spend:empty::before{content:"SPEND"}
.stamp.delete:empty::before{content:"DELETE"}
.stamp.command:empty::before{content:"COMMAND"}

/* ---------- buttons ---------- */

.btn-gold,.btn-quiet{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;border-radius:10px;
  font-family:var(--ui);font-size:14px;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:filter .15s,transform .15s,background-color .15s,border-color .15s;
}
.btn-gold{
  border:0;background-color:var(--gold);background-image:linear-gradient(180deg,#ffd864 0%,#ffcc33 100%);color:var(--gold-ink);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 0 rgba(0,0,0,.4),0 10px 28px -12px rgba(255,204,51,calc(.7 * var(--glow)));
}
.btn-gold:hover{filter:brightness(1.06)}
.btn-gold:active{transform:translateY(1px)}
.btn-quiet{border:1px solid var(--btn-line);background:transparent;color:var(--btn-ink);font-weight:500;padding:0 20px}
.btn-quiet:hover{background:var(--btn-hover);border-color:var(--btn-line-hi)}
.btn-gold:disabled,.btn-quiet:disabled,.btn-gold[aria-disabled=true],.btn-quiet[aria-disabled=true]{
  opacity:.5;cursor:default;filter:none;transform:none;
}

/* ---------- chip: a filter you can switch on. Not the old collection tag, which is a span ---------- */

.chip:not(span){
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;
  border:1px solid var(--chip-line);border-radius:99px;background:var(--chip-bg);color:var(--chip-text);
  font:500 13px/1.2 var(--ui);white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s;
}
.chip:not(span):not([aria-pressed=true]):hover{border-color:var(--chip-line-hi);color:var(--ink)}
/* switched on: the Look's tint, never gold */
.chip[aria-pressed=true]{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-ink)}

/* ---------- ledger: a table inside a panel or a sheet ---------- */

.ledger{width:100%;border-collapse:collapse;color:var(--body-ink);font-size:13.5px;font-variant-numeric:tabular-nums}
.ledger th{
  padding:0 16px 10px;text-align:left;white-space:nowrap;
  font:600 10px/1.4 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:1px solid var(--line);
}
.ledger td{padding:14px 16px;vertical-align:middle;border-bottom:1px solid var(--row-line)}
.ledger tbody tr:last-child td{border-bottom:0}
.ledger tbody tr:hover td{background-color:var(--hover)}

/* ---------- meter: how much of a plan or a cap is used. The old confidence meter holds <i>, this one holds a <span> ---------- */

.meter:has(> span){
  display:block;height:6px;border-radius:99px;overflow:hidden;background:var(--track);
}
.meter > span{display:block;height:100%;width:var(--pct,0%);border-radius:99px;background:var(--meter)}
.meter.hot > span{background:linear-gradient(90deg,#ff7a59,#ffb08f)}

/* ---------- print: a post thumbnail on a rounded tile; its score is a frosted pill ---------- */

.print{
  position:relative;display:block;overflow:hidden;border-radius:12px;background:var(--inset);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 22px 40px -24px rgba(0,0,0,.9);
  transition:transform .25s ease;
}
html[data-theme=light] .print{box-shadow:inset 0 0 0 1px rgba(25,24,29,.08),0 22px 40px -24px rgba(25,24,29,.35)}
a:hover > .print{transform:translateY(-3px)}
.print img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover}
/* the score reads on its own dark pill in both themes, on the page or on a picture */
.print-score{
  display:inline-block;padding:3px 9px;border-radius:99px;
  font:500 12px/1.3 var(--mono);font-variant-numeric:tabular-nums;color:var(--chip-ink);
  background:rgba(26,25,35,.9);border:1px solid rgba(255,255,255,.19);
}
.print .print-score{
  position:absolute;left:8px;bottom:8px;background:rgba(26,25,35,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

/* ---------- index card: a Board card. Its label is a coloured bar: style="--label:#c084fc" ---------- */

.index-card{
  position:relative;display:flex;flex-direction:column;gap:10px;padding:12px 12px 11px;
  border-radius:12px;border:1px solid var(--card-line);background-color:var(--card);color:var(--ink);box-shadow:var(--shadow-card);
  transition:transform .15s,border-color .15s;
}
.index-card:hover{border-color:var(--chip-line-hi);transform:translateY(-1px)}
.index-card::before{
  content:"";display:block;width:26px;height:4px;border-radius:99px;background:var(--label,var(--ink-3));
}
.index-card h3{margin:0;font-size:13.5px;font-weight:500;line-height:1.35}
.index-card.done{opacity:.62}
.index-card.done h3{color:var(--ink-2);text-decoration:line-through}

/* ---------- slate: a Content video card, with the 11 step track ---------- */

.slate{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:22px 32px;padding:24px 26px;
  border-radius:18px;border:1px solid var(--line);background-color:var(--panel);color:var(--ink);box-shadow:var(--shadow-panel);
}
.slate-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:0 0 136px}
.slate-num{margin:0;font:600 50px/.95 var(--ui);letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--ink)}
.slate-key{font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.slate-key strong{color:var(--ink);font-weight:600;letter-spacing:.04em}
.slate-body{display:flex;flex-direction:column;gap:14px;flex:1 1 440px;min-width:0}
.slate-track{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}
.slate-track > *{display:block;height:6px;border-radius:99px;background:var(--line)}
.slate-track > .done,.slate-track > .d{background:var(--acc-fill)}
.slate-track > .working{background:var(--dot-working)}
.slate-track > .needs,.slate-track > .n{
  background:rgba(var(--acc-rgb),.3);
  box-shadow:0 0 0 1px rgba(var(--acc-rgb),.8),0 0 12px rgba(var(--acc-rgb),calc(.5 * var(--glow)));
}

/* ---------- agent disc and status dot ---------- */

.agent-disc{
  --disc:34px;position:relative;flex:none;display:grid;place-items:center;
  width:var(--disc);height:var(--disc);border-radius:50%;
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--agent,var(--ink-3)) 45%,transparent),color-mix(in srgb,var(--agent,var(--ink-3)) 14%,transparent) 72%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--agent,var(--ink-3)) 55%,transparent);
  color:color-mix(in srgb,var(--agent,var(--ink-3)) 40%,#fff);
  font:600 calc(var(--disc) * .38)/1 var(--ui);
}
html[data-theme=light] .agent-disc{color:color-mix(in srgb,var(--agent,var(--ink-3)) 55%,#000)}
.agent-disc[data-agent=hermes]{--agent:var(--agent-hermes)}
.agent-disc[data-agent=claude]{--agent:var(--agent-claude)}
.agent-disc[data-agent=codex]{--agent:var(--agent-codex)}
.agent-disc[data-agent=openclaw]{--agent:var(--agent-openclaw)}
.agent-disc.off{opacity:.45}

.dot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--dot-idle)}
.dot.working{background:var(--dot-working);box-shadow:0 0 8px rgba(79,191,134,calc(.6 * var(--glow)))}
.dot.needs{background:var(--dot-needs);box-shadow:0 0 8px rgba(255,204,51,calc(.6 * var(--glow)))}
.dot.idle{background:var(--dot-idle)}
.dot.off{background:var(--dot-off)}

/* ---------- empty: an honest empty state, never a made-up number ---------- */

.empty{
  grid-column:1/-1;padding:48px 22px;text-align:center;
  color:var(--ink-2);border:1px dashed var(--line);border-radius:14px;
}
.empty b{display:block;margin-bottom:6px;color:var(--ink);font:600 18px/1.3 var(--display);letter-spacing:-.02em}
.empty > div{margin-top:14px}

/* ---------- shell: the rail, the header and the phone bar (Main.dc.html and Phone.dc.html) ---------- */

.shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}
.defs{position:absolute;width:0;height:0;overflow:hidden}   /* holds the one gradient the brand marks point at */

/* the rail: the brand and the three groups scroll if the screen is short; the Talk button and the account row stay put */
.side{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;
  background-color:var(--page);background-image:linear-gradient(180deg,var(--rail-hi) 0%,var(--page) 70%);
  border-right:1px solid var(--row-line);padding:0 14px 18px;
}
.side .brand{display:flex;align-items:center;flex:none;height:66px;padding:0 8px}
.brandlink{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;
  font:600 17px/1 var(--ui);letter-spacing:-.025em;
}
.brandlink svg{width:26px;height:26px}
.side .navs{
  flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:18px;margin:0 -4px;padding:4px 4px 2px;
  /* a soft edge on the side that has more menu behind it, and none at either end (the covers scroll with the list and hide it) */
  background:
    linear-gradient(var(--rail-hi),var(--rail-hi)) top/100% 14px no-repeat local,
    linear-gradient(var(--page),var(--page)) bottom/100% 14px no-repeat local,
    radial-gradient(farthest-side at 50% 0,color-mix(in srgb,var(--ink) 9%,transparent),transparent) top/100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,color-mix(in srgb,var(--ink) 9%,transparent),transparent) bottom/100% 12px no-repeat scroll;
}
.side .grp{display:flex;flex-direction:column}
.side .grp[hidden]{display:none}
.side .gl{padding:0 14px 6px;font:600 10px/1.4 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
/* a menu item is 44px to press and 40px painted: the clear 2px borders keep the tint off the edges, as in the mockup */
.side a[data-page]{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;
  border-top:2px solid transparent;border-bottom:2px solid transparent;background-clip:padding-box;border-radius:12px;
  color:var(--nav-ink);font:500 14px/1.3 var(--ui);text-decoration:none;
  transition:background-color .15s,color .15s;
}
.side a[data-page] svg{font-size:18px;stroke-width:1.6}
.side a[data-page]:hover{background-color:var(--hover);color:var(--ink)}
/* the page you are on is the Look's tint. Never gold: gold is for what you can press or what needs you */
.side a.on,.side a.on:hover{background-color:var(--active);color:var(--active-ink);font-weight:600}

/* the number on a link: what needs you. Gold, because it asks for a click */
.nav-count{
  flex:none;margin-left:auto;display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--gold);color:var(--gold-ink);font:700 11.5px/20px var(--ui);text-align:center;font-variant-numeric:tabular-nums;
  box-shadow:0 0 14px rgba(255,204,51,calc(.35 * var(--glow)));
}
.nav-count[hidden]{display:none}

/* the stat line ends the scrolling part; the foot (Talk to your agents, and who you are) never scrolls away */
.stat{padding:0 14px;color:var(--ink-2);font:500 11px/1.5 var(--mono);letter-spacing:-.02em}
.stat b{color:var(--ink);font-weight:600}
.side .foot{display:flex;flex-direction:column;gap:12px;flex:none}
.side .talk{
  display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:0 14px 0 12px;border-radius:14px;
  border:1px solid var(--talk-line);background:var(--talk-bg);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  font:500 13.5px/1.3 var(--ui);text-align:left;cursor:pointer;transition:background-color .15s,border-color .15s;
}
html[data-theme=light] .side .talk{box-shadow:none}
.side .talk:hover{border-color:var(--chip-line-hi)}
.side .talk[hidden]{display:none}
.side .talk .tl{flex:1;min-width:0}
.side .talk svg{font-size:16px;stroke-width:1.6;color:var(--ink-2)}
/* the orb: the Look's own colour, breathing. Reduced motion stops it with everything else (the block at the end) */
.orb-mini{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--orb);
  box-shadow:0 0 14px var(--orb-glow),inset 0 1px 1px rgba(255,255,255,.4);animation:vr-breathe 5s ease-in-out infinite;
}
@keyframes vr-breathe{
  0%,100%{opacity:.72;transform:scale(.96)}
  50%{opacity:1;transform:scale(1.04)}
}
.side a.acct{padding:0 12px 0 6px;gap:10px}
.side a.acct:not(.on){color:var(--ink)}   /* the selected row keeps --active-ink, set by .side a.on */
.side .av{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(145deg,#3d3b46,#232229);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  color:#f1eff4;font:600 12px/1 var(--ui);
}
html[data-theme=light] .side .av{background:linear-gradient(145deg,#e9e7ee,#d8d5df);box-shadow:inset 0 0 0 1px rgba(25,24,29,.1);color:#19181d}
.side .av:empty{display:none}
.side .nm{flex:1;min-width:0;overflow-wrap:anywhere}   /* a long handle wraps; it never widens the rail */
.side a.acct svg{color:var(--ink-2)}
.side a.on.acct svg{color:inherit}

/* the header: where you are, then the buttons. The Feed's filters sit under it in the same sticky header */
.content > header{
  background:color-mix(in srgb,var(--page) 88%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--row-line);
}
.bar{display:flex;align-items:center;gap:12px 16px;min-height:66px;padding:0 34px;max-width:1640px;margin:0 auto}
.bar .hbrand{display:none;justify-content:center;width:44px;margin:0 -6px 0 -10px}   /* the brand the rail carries on a wide screen */
.bar .hbrand svg{width:24px;height:24px}
.crumb{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2)}
.crumb [hidden]{display:none}
.crumb-grp{white-space:nowrap}
.crumb-sep{width:14px;height:14px;color:var(--ink-3);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.crumb h2{margin:0;min-width:0;overflow-wrap:anywhere;font:600 15px/1.3 var(--ui);letter-spacing:-.01em;color:var(--ink)}
.crumb-sub{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.crumb-sub::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.bar .iconbtn{
  width:44px;height:44px;border-radius:12px;border:1px solid var(--ctl-line);
  background:var(--ctl-bg);color:var(--ctl-ink);font-size:18px;
}
.bar .iconbtn svg{stroke-width:1.6}
.bar .iconbtn:hover{color:var(--ink);border-color:var(--ctl-hover-line);background:var(--ctl-hover-bg)}
.bar .menubtn{display:none;font-size:20px}

.scrim{display:none}

/* the phone bar: four quick links. Only on a phone, and only for the member who has the Hub */
.phonebar{display:none}

/* narrow screens: the rail is a drawer that the menu button opens and the scrim closes, and the header carries the brand */
@media (max-width:900px){
  .shell{display:block}
  .side{
    position:fixed;top:0;left:0;bottom:0;height:auto;width:min(300px,86vw);z-index:50;
    transform:translateX(-102%);visibility:hidden;transition:transform .22s ease,visibility .22s;box-shadow:var(--shadow-pop);
  }
  body.nav-open .side{transform:none;visibility:visible}
  body.nav-open .scrim{display:block;position:fixed;inset:0;z-index:45;background:var(--scrim)}
  .bar{padding:0 16px}
  .bar .hbrand{display:inline-flex}
  .bar .menubtn{display:grid}
}

/* ---------- phone: under 760px, and every target is 44px or more ---------- */

@media (max-width:759px){
  body{background:radial-gradient(460px 380px at 82% 50px,rgba(var(--brain-rgb),calc(.08 * var(--glow))),rgba(var(--brain-rgb),0) 70%) no-repeat,var(--page)}
  .chip:not(span){min-height:44px}
  .paper.ledger-wrap{padding:6px 14px 12px}
  .slate{padding:20px 18px}

  /* the rail becomes the top bar: the brand mark and the page name on the left, the theme and menu buttons on the right */
  .bar{min-height:64px;gap:10px}
  .crumb-grp,.crumb-sep,.crumb-sub{display:none}
  .crumb h2{font-size:17px}
  .side a[data-page]{min-height:44px}   /* the drawer is the way to 12 of the 16 pages on a phone */
  .has-quick main{padding-bottom:112px}   /* the last of a page scrolls up clear of the bottom bar */
  .phonebar:not([hidden]){
    position:fixed;left:12px;right:12px;bottom:16px;z-index:40;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;
    background:var(--frost-bg);border:1px solid var(--frost-line);border-radius:22px;padding:6px;
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-pop);
  }
  .phonebar a{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:56px;padding:6px 0;border-radius:16px;
    color:var(--nav-ink);text-decoration:none;font:500 11px/1.2 var(--ui);letter-spacing:.01em;
  }
  .phonebar a svg{font-size:22px;stroke-width:1.6}
  .phonebar a.on{background:var(--sel-bg);color:var(--sel-ink);font-weight:600}
  .phonebar .nav-count{position:absolute;top:3px;right:22%;margin:0;min-width:0;height:auto;padding:0 6px;font:700 11px/1.5 var(--ui)}
}

/* ---------- reduced motion: every animation and transition stops ---------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}