/* ============================================================
   AMBER — the style types ("skins"), 2026-10-21
   A skin is a set of token values and a few component rules. The
   pages are written against tokens only, so changing the look is
   changing this file. A page opts in with data-skin on <html>; /ui/skin.js
   sets it (default "claude"; ?skin=light to compare; remembered per browser).

   Types:
     light   — Apple-like (2026-10-17): the base values in amber.css. No block here.
     claude  — Claude's own interface. Matthew's rule: "when Claude refines
               the UX, we refine the UX." Every value below is read from
               claude.ai's design system (its --cds-* variables), light mode,
               probed 2026-10-21. To refresh: open claude.ai, run in the console
                 const cs=getComputedStyle(document.documentElement);
                 ['surface-0','surface-1','surface-2','text-primary','text-secondary','text-muted','border','border-strong',
                  'clay','clay-emphasized','text-success','text-warning','text-danger','text-accent','role-accent-fill',
                  'radius','radius--sm','radius--lg','font-size-body','leading-body','font-size-body--lg','font-size-caption',
                  'font-size-footnote','font-size-heading','font-size-title','leading-title','font-size-prose','shadow-sm','shadow-popover']
                  .map(k=>k+': '+cs.getPropertyValue('--cds-'+k).trim()).join('\n')
               and carry the differences into the block below; the probe's
               results that day are kept beside each token.
   ============================================================ */

html[data-skin="claude"]{
  /* surfaces · surface-0 #f9f9f7 (sidebar) · surface-1 #fcfcfb (page) · surface-2 #fff (panels) */
  --bg:#fcfcfb;--rail:#f9f9f7;--surface:#ffffff;
  /* neutral chips: text at 5 %, hover 10 % (bg-neutral, bg-neutral-hover) */
  --surface-2:rgba(11,11,11,.05);--hover:rgba(11,11,11,.10);
  /* borders: hairline 10 %, strong 20 % */
  --line:rgba(11,11,11,.10);--dash:rgba(11,11,11,.20);
  /* type · primary #0b0b0b · secondary #52514e · muted #898781 */
  --text:#0b0b0b;--muted:#52514e;--faint:#898781;
  /* the brand accent: clay #d97757, emphasised #c6613f */
  --accent:#d97757;--accent-strong:#c6613f;--sage:#c6613f;
  /* status · success #009300 (green-450) · warning #b77700 (yellow-400) · danger #d03b3b (red-450) · accent blue #2a78d6 */
  --ok:#009300;--warn:#b77700;--hot:#d03b3b;--link:#2a78d6;--now:#d03b3b;
  --mk-green:#009300;--mk-blue:#2a78d6;--mk-red:#d03b3b;
  --on-fill:#ffffff;--today-wash:rgba(11,11,11,.025);
  /* the calendar's colours: Claude's tints (text-tint-*) for the feed's kinds and the per-calendar palette */
  --cal-work:#c6613f;--cal-personal:#184f95;--cal-restricted:#4a3aa7;--cal-reference:#6d6b67;
  --cal-1:#2a78d6;--cal-2:#d97757;--cal-3:#009300;--cal-4:#7161e0;--cal-5:#d03b3b;--cal-6:#0f7e5c;--cal-7:#c04873;--cal-8:#945d00;--cal-9:#6d6b67;
  /* radii · radius 8px · sm 7px · lg 10px · composer 14px */
  --r:12px;--r-sm:8px;
  /* shadows (shadow-sm, shadow-md, shadow-popover) */
  --shadow-sm:0 1px 2px rgba(11,11,11,.06),0 2px 8px rgba(11,11,11,.08);
  --shadow-md:0 2px 4px rgba(11,11,11,.07),0 6px 16px rgba(11,11,11,.08);
  --shadow-pop:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);
  /* fonts: Claude ships Anthropic Sans/Serif and falls back to the system; we use its fallbacks */
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Anthropic Serif",Georgia,"Times New Roman",Times,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  /* the type scale · caption 12/17 · footnote 13/17 · body 14/20 · body-lg 15/22 · heading 15/20 (lg 16/24) · title 22/28 · prose 16/24 */
  --fs-caption:12px;--lh-caption:17px;--fs-footnote:13px;--lh-footnote:17px;
  --fs-body:14px;--lh-body:20px;--fs-body-lg:15px;--lh-body-lg:22px;
  --fs-heading:15px;--lh-heading:20px;--fs-heading-lg:16px;--lh-heading-lg:24px;
  --fs-title:22px;--lh-title:28px;--fs-prose:16px;--lh-prose:24px;
  /* weights · regular 400 · medium 500 · semibold 580 (we round to 600) */
  --w-regular:400;--w-medium:500;--w-semibold:600;--w-bold:600;
  /* the workspace shell's own names (app.html) */
  --juniper:#fcfcfb;--juniper-soft:rgba(11,11,11,.06);--paper:#ffffff;--ink:#0b0b0b;--concrete:#52514e;
  --display:var(--sans);--label:var(--sans);--body:var(--sans);
  --mbar:rgba(252,252,251,.92);
}

/* ---- the common ground: body text at Claude's body size ---- */
html[data-skin="claude"] body{font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);font-weight:var(--w-regular);letter-spacing:0}
html[data-skin="claude"] button,html[data-skin="claude"] input,html[data-skin="claude"] select,html[data-skin="claude"] textarea{font-family:inherit}
html[data-skin="claude"] b,html[data-skin="claude"] strong{font-weight:var(--w-semibold)}

/* ---- the Amber bar (menu.js + amber.css): sans at body size, hairlines, the rail's ground ---- */
html[data-skin="claude"] .a-top{background:var(--bg);box-shadow:none;border-bottom:1px solid var(--line)}
html[data-skin="claude"] .a-row2{background:var(--bg)}
html[data-skin="claude"] .a-tab{font-size:var(--fs-body);font-weight:var(--w-medium)}
html[data-skin="claude"] .a-agents .a-tab{border-radius:var(--r-sm) var(--r-sm) 0 0}
html[data-skin="claude"] .a-agents .a-tab.on{background:var(--surface);color:var(--text);border-color:var(--line)}
html[data-skin="claude"] .a-agents .a-tab.on::after{background:var(--surface)}
html[data-skin="claude"] .a-tools .a-tab{font-size:var(--fs-body);font-weight:var(--w-medium)}
html[data-skin="claude"] .a-tools .a-tab.on{border-bottom-color:var(--text);font-weight:var(--w-semibold)}
html[data-skin="claude"] .a-tools .a-here{font-weight:var(--w-semibold);font-size:var(--fs-body)}
html[data-skin="claude"] .a-tools .a-here small{font-size:var(--fs-footnote)}
html[data-skin="claude"] .a-pop{box-shadow:var(--shadow-pop);border:1px solid var(--line);border-radius:var(--r)}
html[data-skin="claude"] .a-btn{border-radius:var(--r-sm);font-size:var(--fs-body);font-weight:var(--w-medium);padding:9px 14px}
html[data-skin="claude"] .a-btn.primary{background:var(--text);color:var(--on-fill)}
html[data-skin="claude"] .a-input,html[data-skin="claude"] .a-select{border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-body-lg);padding:9px 12px;background:var(--surface)}
html[data-skin="claude"] .a-input:focus,html[data-skin="claude"] .a-select:focus{border-color:var(--dash);box-shadow:0 0 0 3px rgba(11,11,11,.06)}
html[data-skin="claude"] .a-label{font-size:var(--fs-caption);font-weight:var(--w-medium)}
html[data-skin="claude"] .a-pill{font-size:var(--fs-caption);font-weight:var(--w-medium);border-radius:var(--r-sm)}
html[data-skin="claude"] .a-card{border:1px solid var(--line);box-shadow:var(--shadow-sm)}

/* ---- the workspace strip (app.html) ---- */
html[data-skin="claude"] .a-strip{background:var(--bg);border-bottom-color:var(--line)}
html[data-skin="claude"] .a-strip .st{font-weight:var(--w-medium);font-size:var(--fs-footnote);border-radius:var(--r-sm) var(--r-sm) 0 0}
html[data-skin="claude"] .a-strip .st.on{background:var(--surface);border-color:var(--line)}
html[data-skin="claude"] .a-strip .st.on::after{background:var(--surface)}
html[data-skin="claude"] .pmenu{box-shadow:var(--shadow-pop);border-radius:0 0 var(--r) var(--r)}
html[data-skin="claude"] .pmenu .pm-h{font-weight:var(--w-medium)}
html[data-skin="claude"] .pmenu .pm-i{font-weight:var(--w-regular);font-size:var(--fs-body)}

/* ---- the dashboard ---- */
/* the page title and the day: Claude's serif, light, at display size */
html[data-skin="claude"] header h1{font-family:var(--serif);font-size:32px;font-weight:var(--w-regular);letter-spacing:-.01em;line-height:1.15}
html[data-skin="claude"] header .asof{font-size:var(--fs-footnote);line-height:var(--lh-footnote);margin-top:6px}
html[data-skin="claude"] header .asof::before{box-shadow:0 0 0 4px rgba(0,147,0,.14)}
html[data-skin="claude"] header .search{border:1px solid var(--line);border-radius:10px;padding:9px 12px;box-shadow:none;background:var(--surface)}
html[data-skin="claude"] header .search input{font-size:var(--fs-body-lg)}
html[data-skin="claude"] section.today h2{font-family:var(--serif);font-size:26px;font-weight:var(--w-regular);letter-spacing:-.01em;line-height:1.15}
/* section headings: heading-lg, semibold; the notes beside them: footnote */
html[data-skin="claude"] .sec{margin:36px 0 12px}
html[data-skin="claude"] .sec h2{font-size:var(--fs-heading-lg);line-height:var(--lh-heading-lg);font-weight:var(--w-semibold);letter-spacing:0}
html[data-skin="claude"] .sec .note{font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
html[data-skin="claude"] .sec .src{font-size:var(--fs-caption);font-weight:var(--w-medium);border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);padding:5px 10px}
html[data-skin="claude"] .cal-head h2{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:var(--w-semibold);letter-spacing:0}
html[data-skin="claude"] .triage .th h3,html[data-skin="claude"] .card .nm{font-size:var(--fs-heading);line-height:var(--lh-heading);font-weight:var(--w-semibold)}
html[data-skin="claude"] .triage .th h3 small{font-size:var(--fs-caption);font-weight:var(--w-regular)}
/* panels: white, a hairline, Claude's small shadow */
html[data-skin="claude"] .card,html[data-skin="claude"] .stat,html[data-skin="claude"] .spad,html[data-skin="claude"] .sched,html[data-skin="claude"] .triage,html[data-skin="claude"] .addp,html[data-skin="claude"] .ptable{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
html[data-skin="claude"] .card.unmade{background:transparent;border:1.5px dashed var(--dash);box-shadow:none}
html[data-skin="claude"] .stat .k{font-size:var(--fs-footnote);font-weight:var(--w-medium)}
html[data-skin="claude"] .stat .v{font-size:34px;font-weight:var(--w-semibold);letter-spacing:-.02em}
html[data-skin="claude"] .stat .s,html[data-skin="claude"] .card .role{font-size:var(--fs-footnote)}
/* rows and their meta */
html[data-skin="claude"] .triage .tr b,html[data-skin="claude"] .tdi b,html[data-skin="claude"] .ptable td{font-size:var(--fs-body);font-weight:var(--w-medium)}
html[data-skin="claude"] .ptable td.nm{font-size:var(--fs-body-lg);font-weight:var(--w-semibold)}
html[data-skin="claude"] .ptable td.nm small,html[data-skin="claude"] .triage .tr .meta,html[data-skin="claude"] .tdi .meta,html[data-skin="claude"] .triage .note,html[data-skin="claude"] .td-note,html[data-skin="claude"] .cal-health,html[data-skin="claude"] .spad .with .s{font-size:var(--fs-caption);line-height:var(--lh-caption)}
html[data-skin="claude"] .ptable th,html[data-skin="claude"] .td-lab,html[data-skin="claude"] .tda,html[data-skin="claude"] .addp .asep,html[data-skin="claude"] .spad .with .ag{font-size:11px;font-weight:var(--w-medium);letter-spacing:.06em}
html[data-skin="claude"] .td-sub,html[data-skin="claude"] .spad .with li,html[data-skin="claude"] .wk-list .wke,html[data-skin="claude"] .td-allday .ev{font-size:var(--fs-body)}
/* controls: 8px corners, medium weight, body size — Claude's buttons are rounded rectangles, not pills */
html[data-skin="claude"] .ghost,html[data-skin="claude"] .triage .th .x,html[data-skin="claude"] .triage .tr .go,html[data-skin="claude"] .spad .with .back,html[data-skin="claude"] .cal-nav button{border-radius:var(--r-sm);font-size:var(--fs-footnote);font-weight:var(--w-medium);border:1px solid var(--line);background:var(--surface);color:var(--text)}
html[data-skin="claude"] .ghost:hover,html[data-skin="claude"] .triage .th .x:hover,html[data-skin="claude"] .triage .tr .go:hover,html[data-skin="claude"] .spad .with .back:hover,html[data-skin="claude"] .cal-nav button:hover{background:var(--surface-2)}
html[data-skin="claude"] .btn-primary,html[data-skin="claude"] .addp .go,html[data-skin="claude"] .spad .jot button,html[data-skin="claude"] .ing .foot button.go{background:var(--text);color:var(--on-fill);border-radius:var(--r-sm);font-size:var(--fs-body);font-weight:var(--w-medium);padding:9px 14px}
html[data-skin="claude"] .addp input,html[data-skin="claude"] .addp select,html[data-skin="claude"] .ing .hand select{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-body-lg);padding:8px 10px}
html[data-skin="claude"] .addp input:focus,html[data-skin="claude"] .addp select:focus,html[data-skin="claude"] .ing .hand select:focus{border-color:var(--dash);box-shadow:0 0 0 3px rgba(11,11,11,.06)}
html[data-skin="claude"] .addp label{font-size:var(--fs-caption);font-weight:var(--w-medium)}
html[data-skin="claude"] .spad .jot input{font-size:var(--fs-body-lg)}
html[data-skin="claude"] .spad details.roll>summary,html[data-skin="claude"] .spad .arch summary,html[data-skin="claude"] .spad .with summary{font-size:var(--fs-footnote);font-weight:var(--w-medium)}
html[data-skin="claude"] .seg{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);padding:2px}
html[data-skin="claude"] .seg button{font:var(--w-medium) var(--fs-footnote) var(--sans);border-radius:6px;padding:5px 12px}
html[data-skin="claude"] .seg button.on{background:var(--text);color:var(--on-fill);box-shadow:none}
html[data-skin="claude"] button.stat[aria-expanded=true]{box-shadow:inset 0 0 0 1.5px var(--text)}
/* the week strip and the day pills: black for the chosen day, clay for today */
html[data-skin="claude"] .tdd{border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}
html[data-skin="claude"] .tdd .wd,html[data-skin="claude"] .cal-strip button .w{font-size:10.5px;font-weight:var(--w-medium)}
html[data-skin="claude"] .tdd .dn{font-size:var(--fs-body-lg);font-weight:var(--w-semibold)}
html[data-skin="claude"] .tdd .ct{font-weight:var(--w-semibold);color:var(--accent-strong)}
html[data-skin="claude"] .tdd.now{box-shadow:none;border-color:var(--accent)}
html[data-skin="claude"] .tdd.on,html[data-skin="claude"] .tdd.on:hover{background:var(--text);color:var(--on-fill);border-color:var(--text)}
html[data-skin="claude"] .tdd.on .wd,html[data-skin="claude"] .tdd.on .ct{color:var(--on-fill);opacity:.8}
html[data-skin="claude"] .cal-strip button .n{font-size:var(--fs-body-lg);font-weight:var(--w-semibold)}
/* the calendar: today in clay, hairline columns, quiet event blocks */
html[data-skin="claude"] .cal-days .dh{font-size:var(--fs-caption);font-weight:var(--w-medium)}
html[data-skin="claude"] .cal-days .dh b{font-size:var(--fs-body-lg);font-weight:var(--w-semibold)}
html[data-skin="claude"] .cal-grid .ev,html[data-skin="claude"] .day-grid .ev{border-radius:6px}
html[data-skin="claude"] .cal-grid .ev b,html[data-skin="claude"] .day-grid .ev b,html[data-skin="claude"] .wk-list .wke .tt b{font-weight:var(--w-semibold)}
html[data-skin="claude"] .cal-allday .pill,html[data-skin="claude"] .day-allday .pill{font-weight:var(--w-medium);border-radius:6px}
html[data-skin="claude"] .ev .chip{font-weight:var(--w-medium);border-radius:6px}
html[data-skin="claude"] .ev .join{font-weight:var(--w-medium);border-radius:6px}
html[data-skin="claude"] .ev .bd{font-weight:var(--w-semibold)}
html[data-skin="claude"] .wk-list .wkh{font-size:var(--fs-caption);font-weight:var(--w-medium)}
html[data-skin="claude"] .wk-list .wkh b{font-size:var(--fs-body-lg);font-weight:var(--w-semibold)}
/* the weather: the number lighter, the labels at caption size */
html[data-skin="claude"] .wx-now .t{font-weight:var(--w-medium);letter-spacing:-.025em}
html[data-skin="claude"] .wx-right b{font-size:20px;font-weight:var(--w-semibold)}
html[data-skin="claude"] .wx-right span,html[data-skin="claude"] .wx-stats,html[data-skin="claude"] .wx-sel,html[data-skin="claude"] .wx-day .hl,html[data-skin="claude"] .wx-day .hl small{font-size:var(--fs-footnote)}
html[data-skin="claude"] .wx-day .d,html[data-skin="claude"] .wx-hour .t{font-size:var(--fs-body);font-weight:var(--w-semibold)}
html[data-skin="claude"] .wx-day{border-radius:var(--r-sm)}
html[data-skin="claude"] .wx-day.on,html[data-skin="claude"] .wx-hour.now{background:var(--surface-2)}
html[data-skin="claude"] .wx-curve text{font:var(--w-medium) 11px var(--sans)}
html[data-skin="claude"] .wx-hour .h{font-size:11px;font-weight:var(--w-medium)}
html[data-skin="claude"] .wx-hour{border-radius:var(--r-sm)}
/* the gold update bar keeps Amber's own colour; everything else here is Claude's */

/* ============================================================
   2026-10-21 (evening) — every Amber page wears the type, not only the
   dashboard and the shell: the whiteboard, vendors, People, Reports, the
   project and building dashboards, the sign-in and "your places". Matthew:
   "all amber screens to look and feel like claude." The pages were first
   rewritten against tokens (their own names now point at the house tokens),
   so the block above moves every colour; the rules below carry Claude's type
   scale, corners and panels onto each page's components. Agents in their
   frames stay as they are; the gold update bar stays Amber's.
   ============================================================ */

/* ---- tints the pages name for status chips (defaults for the dark base live in amber.css) ---- */
html[data-skin="claude"]{--ok-tint:rgba(0,147,0,.10);--warn-tint:rgba(183,119,0,.12);--hot-tint:rgba(208,59,59,.10);--sage-tint:rgba(217,119,87,.08)}
/* ---- every field on every page (from the parallel pass of 2026-10-21, fee401f): hairline, 8px corners, Claude's focus ring ---- */
html[data-skin="claude"] input:not([type=checkbox]):not([type=radio]),html[data-skin="claude"] select,html[data-skin="claude"] textarea{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm)}
html[data-skin="claude"] input:focus,html[data-skin="claude"] select:focus,html[data-skin="claude"] textarea:focus{outline:0;border-color:var(--dash);box-shadow:0 0 0 3px rgba(11,11,11,.06)}
html[data-skin="claude"] ::placeholder{color:var(--faint)}
html[data-skin="claude"] .toast{box-shadow:var(--shadow-pop)}

/* ---- the house rail and phone bar (amber.css) on a light ground ---- */
html[data-skin="claude"] .a-mbar{background:rgba(252,252,251,.92)}
html[data-skin="claude"] .a-side .grp{font-size:var(--fs-caption);letter-spacing:.04em;text-transform:none;font-weight:var(--w-medium);color:var(--faint)}
html[data-skin="claude"] .a-row .tx{font-size:var(--fs-body);font-weight:var(--w-medium)}
html[data-skin="claude"] .a-row .badge{color:var(--on-fill);font-weight:var(--w-semibold)}
html[data-skin="claude"] .a-side .foot b{font-size:var(--fs-body)} html[data-skin="claude"] .a-side .foot span{font-size:var(--fs-footnote)}
html[data-skin="claude"] .a-pill{border-radius:var(--r-sm)}
html[data-skin="claude"] .a-pill.ok{background:var(--ok-tint)} html[data-skin="claude"] .a-pill.warn{background:var(--warn-tint)} html[data-skin="claude"] .a-pill.hot{background:var(--hot-tint)}
html[data-skin="claude"] .a-btn{background:var(--surface);border:1px solid var(--line)}
html[data-skin="claude"] .a-btn:hover{background:var(--surface-2)}
html[data-skin="claude"] .a-btn.primary{border-color:var(--text)}

/* ---- page heads shared by vendors, Reports, the project and the building: the serif title, a footnote under it ---- */
html[data-skin="claude"] header .sub,html[data-skin="claude"] .pagehead p{font-size:var(--fs-footnote);line-height:var(--lh-footnote);margin-top:6px}
html[data-skin="claude"] header .crumb{font-size:var(--fs-footnote);font-weight:var(--w-medium)}
html[data-skin="claude"] .pagehead h1{font-family:var(--serif);font-size:32px;font-weight:var(--w-regular);letter-spacing:-.01em;line-height:1.15}
html[data-skin="claude"] .pill{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-caption);font-weight:var(--w-medium);padding:5px 10px}
html[data-skin="claude"] .opens a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-footnote);font-weight:var(--w-medium);padding:8px 12px}
html[data-skin="claude"] .opens a:hover{background:var(--surface-2)}
html[data-skin="claude"] .tag{border-radius:var(--r-sm);font-size:var(--fs-caption);font-weight:var(--w-medium)}
html[data-skin="claude"] .card h3{font-size:var(--fs-heading);line-height:var(--lh-heading);font-weight:var(--w-semibold)}
html[data-skin="claude"] .card .ch,html[data-skin="claude"] .card .said,html[data-skin="claude"] .card .empty,html[data-skin="claude"] .card .none{font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
html[data-skin="claude"] .facts{font-size:var(--fs-body)}
html[data-skin="claude"] .facts dt{font-weight:var(--w-regular)}
html[data-skin="claude"] .stat{border-top:1px solid var(--line)} /* the coloured top edge becomes the hairline; the colour moves into the number's label */
html[data-skin="claude"] .stat.gold .k{color:var(--warn)} html[data-skin="claude"] .stat.terra .k{color:var(--hot)} html[data-skin="claude"] .stat.moss .k{color:var(--ok)}
html[data-skin="claude"] .stat .v.small{font-size:20px}
html[data-skin="claude"] .bars,html[data-skin="claude"] .visit,html[data-skin="claude"] .rep,html[data-skin="claude"] .wl,html[data-skin="claude"] .cal,html[data-skin="claude"] .gantt,html[data-skin="claude"] .plist,html[data-skin="claude"] .composer,html[data-skin="claude"] .amber-vendors .av-list,html[data-skin="claude"] .modal,html[data-skin="claude"] .pcard{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
html[data-skin="claude"] .bars .bl,html[data-skin="claude"] .line b,html[data-skin="claude"] .visit .b{font-size:var(--fs-body);font-weight:var(--w-medium)}
html[data-skin="claude"] .bars .bn,html[data-skin="claude"] .line .r,html[data-skin="claude"] .line small,html[data-skin="claude"] .bars .key,html[data-skin="claude"] .visit .b small,html[data-skin="claude"] .none,html[data-skin="claude"] .note{font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
html[data-skin="claude"] .visit .h,html[data-skin="claude"] .band h3{font-size:11px;font-weight:var(--w-medium);letter-spacing:.06em}
html[data-skin="claude"] .bars .bar{height:6px}
html[data-skin="claude"] .gone h2{font-family:var(--serif);font-weight:var(--w-regular)}
html[data-skin="claude"] .ptable tr{box-shadow:none}

/* ---- Reports (weekly.html) ---- */
html[data-skin="claude"] .rep{padding:20px 22px}
html[data-skin="claude"] .rep h2{font-size:var(--fs-heading-lg);line-height:var(--lh-heading-lg);font-weight:var(--w-semibold)}
html[data-skin="claude"] .rep h2 span{font-size:var(--fs-caption);font-weight:var(--w-regular)}
html[data-skin="claude"] .rep .strap{font-size:var(--fs-footnote)}
html[data-skin="claude"] .cell{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm)}
html[data-skin="claude"] .cell .k,html[data-skin="claude"] .cell .n,html[data-skin="claude"] .cell .d{font-size:var(--fs-caption)}
html[data-skin="claude"] .cell .v{font-size:22px;font-weight:var(--w-semibold)}

/* ---- the vendor book (vendors.css, on the page and inside any host) ---- */
html[data-skin="claude"] .amber-vendors{font-size:var(--fs-body);line-height:var(--lh-body)}
html[data-skin="claude"] .amber-vendors .av-title{font-size:var(--fs-heading-lg);line-height:var(--lh-heading-lg);font-weight:var(--w-semibold)}
html[data-skin="claude"] .amber-vendors .av-title small{font-size:var(--fs-footnote)}
html[data-skin="claude"] .amber-vendors .av-q,html[data-skin="claude"] .amber-vendors .av-add input,html[data-skin="claude"] .amber-vendors .av-f input,html[data-skin="claude"] .amber-vendors .av-f select,html[data-skin="claude"] .amber-vendors .av-f textarea{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-body-lg);padding:9px 12px}
html[data-skin="claude"] .amber-vendors .av-q:focus,html[data-skin="claude"] .amber-vendors .av-add input:focus,html[data-skin="claude"] .amber-vendors .av-f input:focus,html[data-skin="claude"] .amber-vendors .av-f select:focus,html[data-skin="claude"] .amber-vendors .av-f textarea:focus{border-color:var(--dash);box-shadow:0 0 0 3px rgba(11,11,11,.06)}
html[data-skin="claude"] .amber-vendors .av-btn{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-footnote);font-weight:var(--w-medium);padding:8px 12px}
html[data-skin="claude"] .amber-vendors .av-btn:hover{background:var(--surface-2)}
html[data-skin="claude"] .amber-vendors .av-btn.go{background:var(--text);color:var(--on-fill);border-color:var(--text)}
html[data-skin="claude"] .amber-vendors .av-list{border-radius:var(--r)}
html[data-skin="claude"] .amber-vendors .av-r:hover{background:var(--surface-2)}
html[data-skin="claude"] .amber-vendors .av-row.on{background:var(--bg)}
html[data-skin="claude"] .amber-vendors .av-nm{font-size:var(--fs-body-lg);font-weight:var(--w-semibold)}
html[data-skin="claude"] .amber-vendors .av-nm em{font-size:10.5px;letter-spacing:.04em}
html[data-skin="claude"] .amber-vendors .av-nm small,html[data-skin="claude"] .amber-vendors .av-meta,html[data-skin="claude"] .amber-vendors .av-none,html[data-skin="claude"] .amber-vendors .av-check,html[data-skin="claude"] .amber-vendors .av-err{font-size:var(--fs-footnote)}
html[data-skin="claude"] .amber-vendors .av-lab{font-size:var(--fs-caption);letter-spacing:.04em;text-transform:none;font-weight:var(--w-medium)}
html[data-skin="claude"] .amber-vendors .av-f span{font-size:var(--fs-caption);font-weight:var(--w-medium)}
html[data-skin="claude"] .amber-vendors .av-chip{background:var(--surface-2);border-radius:var(--r-sm);font-size:var(--fs-footnote);font-weight:var(--w-medium);padding:5px 6px 5px 10px}

/* ---- People (admin.html) ---- */
html[data-skin="claude"] body{font-size:var(--fs-body)}
html[data-skin="claude"] #main h2,html[data-skin="claude"] main>h2{font-size:var(--fs-heading-lg);line-height:var(--lh-heading-lg);font-weight:var(--w-semibold);margin:32px 0 10px}
html[data-skin="claude"] .hint{font-size:var(--fs-footnote)}
html[data-skin="claude"] .card{border-radius:var(--r)}
html[data-skin="claude"] th{font-size:11px;font-weight:var(--w-medium);letter-spacing:.06em;padding:12px 14px 8px}
html[data-skin="claude"] td{font-size:var(--fs-body);padding:12px 14px}
html[data-skin="claude"] .t-main{font-weight:var(--w-medium)}
html[data-skin="claude"] .t-sub,html[data-skin="claude"] .seen,html[data-skin="claude"] .topbar .count,html[data-skin="claude"] .trail,html[data-skin="claude"] .kv{font-size:var(--fs-footnote)}
html[data-skin="claude"] .pill.ok{background:var(--surface-2);color:var(--muted)} html[data-skin="claude"] .pill.solid{background:var(--ok-tint);color:var(--ok)} html[data-skin="claude"] .pill.hot{background:var(--hot-tint);color:var(--hot)} html[data-skin="claude"] .pill.off{background:transparent;border:1px solid var(--line)}
html[data-skin="claude"] button{border-radius:var(--r-sm);font-size:var(--fs-footnote);font-weight:var(--w-medium)}
html[data-skin="claude"] main button,html[data-skin="claude"] .pcard button,html[data-skin="claude"] .modal button{background:var(--surface);border:1px solid var(--line);color:var(--text)}
html[data-skin="claude"] main button:hover,html[data-skin="claude"] .pcard button:hover{background:var(--surface-2)}
html[data-skin="claude"] button.solid,html[data-skin="claude"] main button.solid,html[data-skin="claude"] .pcard button.solid,html[data-skin="claude"] .modal button.solid{background:var(--text);color:var(--on-fill);border-color:var(--text)}
html[data-skin="claude"] .addbar,html[data-skin="claude"] .addform{background:var(--bg)}
html[data-skin="claude"] .addbar label,html[data-skin="claude"] .addform label,html[data-skin="claude"] .fgrid label{font-size:var(--fs-caption);font-weight:var(--w-medium)}
html[data-skin="claude"] .addbar select,html[data-skin="claude"] .addbar input,html[data-skin="claude"] .addform select,html[data-skin="claude"] .addform input,html[data-skin="claude"] .fgrid input,html[data-skin="claude"] .fgrid select,html[data-skin="claude"] .gform select,html[data-skin="claude"] .gform input,html[data-skin="claude"] .topbar input.search{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-body-lg);padding:8px 10px}
html[data-skin="claude"] .addbar select:focus,html[data-skin="claude"] .addbar input:focus,html[data-skin="claude"] .addform select:focus,html[data-skin="claude"] .addform input:focus,html[data-skin="claude"] .fgrid input:focus,html[data-skin="claude"] .fgrid select:focus,html[data-skin="claude"] .topbar input.search:focus{border-color:var(--dash);box-shadow:0 0 0 3px rgba(11,11,11,.06)}
html[data-skin="claude"] .topbar input.search{padding:9px 12px}
html[data-skin="claude"] tr.p:hover td{background:var(--surface-2)}
html[data-skin="claude"] tr.p.on td{background:var(--bg)}
html[data-skin="claude"] .chip,html[data-skin="claude"] .gchip{background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-sm);font-size:var(--fs-caption);font-weight:var(--w-medium)}
html[data-skin="claude"] .gchip button{border-radius:6px;font-size:11px}
html[data-skin="claude"] .pcard{box-shadow:var(--shadow-pop)}
html[data-skin="claude"] .pcard .ph h3{font-family:var(--serif);font-size:26px;font-weight:var(--w-regular);letter-spacing:-.01em}
html[data-skin="claude"] .pcard .ph .sub{font-size:var(--fs-footnote)}
html[data-skin="claude"] .pcard h4{font-size:var(--fs-caption);letter-spacing:.04em;text-transform:none;font-weight:var(--w-medium);color:var(--muted)}
html[data-skin="claude"] .pcard .stat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:none;border-top:1px solid var(--line)}
html[data-skin="claude"] .pcard .stat b{font-size:18px;font-weight:var(--w-semibold)} html[data-skin="claude"] .pcard .stat span{font-size:var(--fs-caption)}
html[data-skin="claude"] .spark i{background:var(--accent)} html[data-skin="claude"] .spark i.z{background:var(--surface-2)}
html[data-skin="claude"] .modal{border-radius:var(--r);box-shadow:var(--shadow-pop)}
html[data-skin="claude"] .modal h3{font-size:var(--fs-heading-lg);font-weight:var(--w-semibold)} html[data-skin="claude"] .modal p{font-size:var(--fs-body)}
html[data-skin="claude"] .overlay,html[data-skin="claude"] .scrim{background:rgba(11,11,11,.32)}
html[data-skin="claude"] .temp{background:var(--bg);border:1px dashed var(--dash);font-family:var(--mono)}
html[data-skin="claude"] .toast{background:var(--text);color:var(--on-fill);border-radius:var(--r-sm);font-size:var(--fs-footnote);box-shadow:var(--shadow-pop)}
html[data-skin="claude"] .locked b{font-family:var(--serif);font-weight:var(--w-regular);font-size:24px}

/* ---- the whiteboard: sentence case where the board shouted, quiet hairlines, 8px controls ---- */
html[data-skin="claude"] .topline h2{font-family:var(--serif);font-weight:var(--w-regular);font-size:clamp(22px,2.6vh,28px);letter-spacing:-.01em}
html[data-skin="claude"] .topline .range{font-size:var(--fs-footnote);letter-spacing:0}
html[data-skin="claude"] .chip{border-radius:var(--r-sm);font-size:var(--fs-footnote);border:1px solid var(--line);border-left:3px solid var(--cc,var(--juniper))}
html[data-skin="claude"] .chip b{font-weight:var(--w-semibold);font-size:var(--fs-body-lg)}
html[data-skin="claude"] .chip span{font-size:10.5px;letter-spacing:.04em;font-weight:var(--w-medium)}
html[data-skin="claude"] .tabs{border-radius:var(--r-sm);background:var(--surface);padding:2px;gap:2px}
html[data-skin="claude"] .tabs button{font-size:var(--fs-footnote);letter-spacing:0;text-transform:none;font-weight:var(--w-medium);border-radius:6px;min-height:28px;padding:4px 12px}
html[data-skin="claude"] .tabs button.on{background:var(--text);color:var(--on-fill)}
html[data-skin="claude"] .lbl,html[data-skin="claude"] .wl h4,html[data-skin="claude"] .plist h4,html[data-skin="claude"] .cal-top .t,html[data-skin="claude"] .g-top .t,html[data-skin="claude"] .filterbar .flab,html[data-skin="claude"] .g-note,html[data-skin="claude"] .newlist,html[data-skin="claude"] .wl-new input{letter-spacing:0;text-transform:none;font-weight:var(--w-medium);font-size:var(--fs-footnote)}
html[data-skin="claude"] .wl h4{color:var(--text);font-weight:var(--w-semibold)}
html[data-skin="claude"] .plist h4{text-decoration:none;color:var(--hl,var(--mk-blue));font-weight:var(--w-semibold)}
html[data-skin="claude"] .plist h4 .src{font-size:var(--fs-caption);letter-spacing:0;text-transform:none;font-weight:var(--w-regular)}
html[data-skin="claude"] .wl,html[data-skin="claude"] .cal,html[data-skin="claude"] .gantt,html[data-skin="claude"] .plist,html[data-skin="claude"] .composer,html[data-skin="claude"] .wl-new,html[data-skin="claude"] .newlist{border-radius:var(--r)}
html[data-skin="claude"] .wl.pile{background:var(--bg);border:1px dashed var(--dash);box-shadow:none}
html[data-skin="claude"] .wl-new{border:1px dashed var(--dash)}
html[data-skin="claude"] .wl-new input::placeholder{font-size:var(--fs-footnote)}
html[data-skin="claude"] .wc{background:var(--bg);border-radius:var(--r-sm);font-size:var(--fs-body);line-height:var(--lh-body)}
html[data-skin="claude"] .wl.pile .wc{background:var(--surface)}
html[data-skin="claude"] .wc .s,html[data-skin="claude"] .wl .none,html[data-skin="claude"] .wl-new .hint{font-size:var(--fs-caption)}
html[data-skin="claude"] .wk-seg{border-radius:var(--r-sm);background:var(--surface)}
html[data-skin="claude"] .wk-seg button{font-size:var(--fs-caption);letter-spacing:0;text-transform:none;font-weight:var(--w-medium);padding:4px 10px}
html[data-skin="claude"] .wk-seg button.on{background:var(--text);color:var(--on-fill)}
html[data-skin="claude"] .filterbar select,html[data-skin="claude"] .g-top select,html[data-skin="claude"] .composer input,html[data-skin="claude"] .composer select{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-footnote);letter-spacing:0;text-transform:none;font-weight:var(--w-regular)}
html[data-skin="claude"] .composer input,html[data-skin="claude"] .composer select{font-size:var(--fs-body-lg)}
html[data-skin="claude"] .filterbar select:focus,html[data-skin="claude"] .g-top select:focus,html[data-skin="claude"] .composer input:focus,html[data-skin="claude"] .composer select:focus{border-color:var(--dash);box-shadow:0 0 0 3px rgba(11,11,11,.06)}
html[data-skin="claude"] .filterbar .fnote{font-style:normal;font-size:var(--fs-footnote)}
html[data-skin="claude"] .legend,html[data-skin="claude"] .g-key{font-size:var(--fs-caption)}
html[data-skin="claude"] .cal-head div{font-size:11px;letter-spacing:.06em;font-weight:var(--w-medium)}
html[data-skin="claude"] .day .n{border-width:1px;font-weight:var(--w-semibold)}
html[data-skin="claude"] .day.today{background:var(--today-wash)}
html[data-skin="claude"] .day.today .n{border-color:var(--accent);color:var(--accent-strong)}
html[data-skin="claude"] .evt{letter-spacing:0;font-weight:var(--w-medium)}
html[data-skin="claude"] .evt .who{letter-spacing:.04em}
html[data-skin="claude"] .cash{letter-spacing:0;border-radius:6px}
html[data-skin="claude"] .g-line.now{background:var(--now)}
html[data-skin="claude"] .g-bar{border-radius:3px}
html[data-skin="claude"] .g-lab{font-size:var(--fs-footnote)}
html[data-skin="claude"] .g-mo,html[data-skin="claude"] .g-who,html[data-skin="claude"] .item .own,html[data-skin="claude"] .item .due,html[data-skin="claude"] .more{letter-spacing:.02em}
html[data-skin="claude"] .item{font-size:var(--fs-body)}
html[data-skin="claude"] .item .own{border-radius:4px}
html[data-skin="claude"] .quickadd input{font-size:var(--fs-footnote)}
html[data-skin="claude"] .tracker th{letter-spacing:.04em;font-weight:var(--w-medium)}
html[data-skin="claude"] .tracker td{letter-spacing:0}
html[data-skin="claude"] .newlist{border:1px dashed var(--dash)}
html[data-skin="claude"] .composer .btn-solid{background:var(--text);color:var(--on-fill);border-radius:var(--r-sm);font-size:var(--fs-footnote);font-weight:var(--w-medium)}
html[data-skin="claude"] .composer .c-note{font-size:var(--fs-caption)}
html[data-skin="claude"] .fab{background:var(--text);color:var(--on-fill);box-shadow:var(--shadow-pop)}
html[data-skin="claude"] .composer.open{box-shadow:var(--shadow-pop)}

/* ---- the sign-in and "your places": Claude's serif for the one word, hairline fields, a black button ---- */
html[data-skin="claude"] h1.wordmark,html[data-skin="claude"] .card>h1{font-family:var(--wordmark,"PP Pangaia",Georgia,serif)}
html[data-skin="claude"] main .card .sub,html[data-skin="claude"] main .card .foot,html[data-skin="claude"] .notice,html[data-skin="claude"] .err,html[data-skin="claude"] .links button{font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
html[data-skin="claude"] .lbl{font-size:var(--fs-caption);letter-spacing:.02em;text-transform:none;font-weight:var(--w-medium)}
html[data-skin="claude"] main .card input{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-body-lg);padding:10px 12px}
html[data-skin="claude"] main .card input:focus{border-color:var(--dash);box-shadow:0 0 0 3px rgba(11,11,11,.06)}
html[data-skin="claude"] main .card input:-webkit-autofill{-webkit-text-fill-color:var(--text);box-shadow:0 0 0 1000px var(--surface) inset}
html[data-skin="claude"] button.primary{background:var(--text);color:var(--on-fill);border-radius:var(--r-sm);font-size:var(--fs-body);font-weight:var(--w-medium);letter-spacing:0}
html[data-skin="claude"] button.secondary{border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-body);font-weight:var(--w-medium)}
html[data-skin="claude"] button.secondary:hover{border-color:var(--dash);background:var(--surface-2)}
html[data-skin="claude"] a.place{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-sm)}
html[data-skin="claude"] a.place:hover{border-color:var(--dash)}
html[data-skin="claude"] a.place b{font-size:var(--fs-body);font-weight:var(--w-medium)} html[data-skin="claude"] a.place span{font-size:var(--fs-caption)}
html[data-skin="claude"] .mark{border-radius:6px}