/* ─── Skip link — keyboard users jump past the nav to the main content.
   Off-screen until focused (WCAG 2.4.1 Bypass Blocks). Loaded by all three rooms. ─── */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 2000;
  padding: 10px 16px;
  background: var(--p-nav-bg, #26352D);
  color: var(--p-nav-ink, #EDEAE0);
  border: 1px solid var(--p-nav-edge, #C2A05A);
  border-radius: 6px;
  font: 600 14px/1.2 ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--p-nav-ink, #EDEAE0);
  outline-offset: 2px;
}

/* Self-hosted webfonts — bundled so they load offline and never call Google Fonts. */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/EBGaramond-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/EBGaramond-500i.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/EBGaramond-400.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/EBGaramond-500.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/EBGaramond-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/InterTight-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/InterTight-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/InterTight-600.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-500.woff2') format('woff2');
}

/* ─── Peribolos design tokens ─────────────────────────────────────────
 *
 * Forest & Linen (default) — warm linen canvas, forest sidebar,
 * forest-green accent, gold lift.
 * EB Garamond display · Inter Tight body · JetBrains Mono mono.
 *
 * The default scheme (no data-palette attribute; "vellum" key) applies
 * across all rooms — Office, Workshop, Library. Four alternate palettes
 * (slate / olive / indigo / plum) override on body[data-palette="..."].
 *
 * Light mode is primary (daytime use). Dark mode (.dark on body)
 * shifts colour only — type / spacing / radii unchanged.
 *
 * ──────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surfaces (Forest & Linen — default scheme, all rooms) ───── */
  --p-page:              #F5EDD8;  /* Warm parchment — main canvas (matches the Workshop) */
  --p-panel:             #FBF5E8;  /* Warm cream — cards, lifted surfaces */
  --p-panel-sunk:        #DED7C7;  /* Warm linen sunk — sidebars (darker than page) */
  --p-panel-sunk-edge:   rgba(35, 32, 26, 0.18);
  --p-panel-sunk-ink:    #23201A;
  --p-panel-alt:         #26352D;  /* Forest — full dark sidebar */
  --p-panel-alt-ink:     #EDEAE0;  /* Linen on forest */
  --p-panel-alt-mute:    #AEBBAC;
  --p-panel-alt-faint:   #76897A;
  --p-panel-alt-edge:    rgba(237, 234, 224, 0.094);
  --p-panel-alt-hover:   rgba(237, 234, 224, 0.031);
  --p-panel-edge:        rgba(35, 32, 26, 0.08);
  --p-panel-edge-strong: rgba(35, 32, 26, 0.13);

  /* Top nav band — forest, with a gold rule below */
  --p-nav-bg:            #26352D;
  --p-nav-edge:          #C2A05A;
  --p-nav-ink:           #EDEAE0;
  --p-nav-muted:         #AAB6AB;
  --p-nav-faint:         #7E897F;

  /* ─── Ink ───────────────────────────────────────────── */
  --p-ink:        #23201A;
  --p-ink-soft:   #4B463C;
  --p-muted:      #8C8474;
  --p-faint:      #A89D87;

  /* ─── Accent (forest green + gold lift) ─────────────── */
  --p-accent:      #2E5141;       /* Forest green */
  --p-accent-soft: rgba(46, 81, 65, 0.08);
  --p-accent-lift: #C2A05A;       /* Gold — used on forest sidebar */

  /* ─── Status ────────────────────────────────────────── */
  --p-unsaved: #A6442B;
  --p-ok:      #5A6B4A;

  /* ─── Type ──────────────────────────────────────────── */
  --p-font-display: 'EB Garamond', 'Garamond Premier Pro', Garamond, Georgia, serif;
  --p-font-body:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --p-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── Type scale (px) ───────────────────────────────── */
  --p-fs-hero:    36px;   --p-lh-hero: 1.15;
  --p-fs-title:   24px;   --p-lh-title: 1.2;
  --p-fs-body-lg: 17px;   --p-lh-body-lg: 1.55;
  --p-fs-body:    15px;   --p-lh-body: 1.6;
  --p-fs-meta:    12px;   --p-lh-meta: 1.4;
  --p-fs-caption: 11px;   --p-lh-caption: 1.4;
  --p-fs-mono:    11px;   --p-lh-mono: 1.4;

  /* ─── Spacing scale (px) ────────────────────────────── */
  --p-s-1: 4px;
  --p-s-2: 8px;
  --p-s-3: 12px;
  --p-s-4: 16px;
  --p-s-5: 20px;
  --p-s-6: 24px;
  --p-s-7: 32px;
  --p-s-8: 40px;
  --p-s-9: 56px;
  --p-s-10: 72px;

  /* ─── Radius scale (px) ─────────────────────────────── */
  --p-r-xs:     2px;   /* hairline insets, chips */
  --p-r-sm:     4px;   /* inputs, small controls, scrollbar thumbs */
  --p-r-md:     6px;   /* buttons, list rows */
  --p-r-lg:     8px;   /* cards, panels */
  --p-r-xl:     10px;  /* large cards, stat tiles */
  --p-r-2xl:    14px;  /* hero surfaces */
  --p-r-pill:   999px; /* pills, badges */
  --p-r-circle: 50%;   /* avatars, dots */
}

/* ─── Dark mode ──────────────────────────────────────────────────────
 * Activate by adding .dark to <body>. Persisted via localStorage in
 * the existing day/night toggle. No prefers-color-scheme auto-switch
 * — the practitioner chooses.
 * ──────────────────────────────────────────────────────────────────── */

body.dark {
  --p-page:              #1A1A18;  /* Bitumen */
  --p-panel:             #23231F;  /* Soot */
  --p-panel-alt:         #1F1F1D;
  --p-panel-alt-ink:     #EFEAE0;
  --p-panel-alt-mute:    #A89D87;
  --p-panel-alt-faint:   #7A6F5C;
  --p-panel-alt-edge:    rgba(239, 234, 224, 0.094);
  --p-panel-alt-hover:   rgba(239, 234, 224, 0.031);
  --p-panel-edge:        rgba(239, 234, 224, 0.094);
  --p-panel-edge-strong: rgba(239, 234, 224, 0.156);

  --p-ink:        #EFEAE0;  /* Vellum on dark */
  --p-ink-soft:   #C9C2B3;  /* Mull */
  --p-muted:      #7A6F5C;
  --p-faint:      #5C5448;

  --p-accent:      #8FB39C;  /* Forest lifted (sage) — default dark accent */
  --p-accent-soft: rgba(143, 179, 156, 0.12);
  --p-accent-lift: #D9B871;

  --p-unsaved: #C25B41;
  --p-ok:      #8FA47B;
}

/* ─── Dark mode per palette ──────────────────────────────────────────
 * Each variant gets its own night surface so the palette character
 * carries through after a dark toggle. body.dark[data-palette="..."]
 * overrides the base body.dark block above.
 * ──────────────────────────────────────────────────────────────────── */

body.dark[data-palette="slate"] {
  --p-page:              #14161A;
  --p-panel:             #1C1F23;
  --p-panel-alt:         #0E1013;
  --p-panel-alt-ink:     #ECEAE3;
  --p-panel-alt-mute:    #8E948F;
  --p-panel-alt-faint:   #5E6364;
  --p-panel-alt-edge:    rgba(236, 234, 227, 0.10);
  --p-panel-alt-hover:   rgba(236, 234, 227, 0.035);
  --p-panel-edge:        rgba(236, 234, 227, 0.10);
  --p-panel-edge-strong: rgba(236, 234, 227, 0.16);
  --p-ink:        #ECEAE3;
  --p-ink-soft:   #BFBDB5;
  --p-muted:      #7E8285;
  --p-faint:      #565A5C;
  --p-accent:      #6FB1BD;
  --p-accent-soft: rgba(111, 177, 189, 0.12);
  --p-accent-lift: #C99A66;
}

body.dark[data-palette="olive"] {
  --p-page:              #1A1812;
  --p-panel:             #221F18;
  --p-panel-alt:         #14110B;
  --p-panel-alt-ink:     #F1EBD7;
  --p-panel-alt-mute:    #A39A7E;
  --p-panel-alt-faint:   #6F6650;
  --p-panel-alt-edge:    rgba(241, 235, 215, 0.10);
  --p-panel-alt-hover:   rgba(241, 235, 215, 0.035);
  --p-panel-edge:        rgba(241, 235, 215, 0.10);
  --p-panel-edge-strong: rgba(241, 235, 215, 0.16);
  --p-ink:        #F1EBD7;
  --p-ink-soft:   #C9C0A4;
  --p-muted:      #8A8267;
  --p-faint:      #605836;
  --p-accent:      #97A874;
  --p-accent-soft: rgba(151, 168, 116, 0.12);
  --p-accent-lift: #DDB867;
}

body.dark[data-palette="indigo"] {
  --p-page:              #11141C;
  --p-panel:             #181C26;
  --p-panel-alt:         #0B0E18;
  --p-panel-alt-ink:     #E6E8F0;
  --p-panel-alt-mute:    #939AAE;
  --p-panel-alt-faint:   #61687A;
  --p-panel-alt-edge:    rgba(230, 232, 240, 0.10);
  --p-panel-alt-hover:   rgba(230, 232, 240, 0.035);
  --p-panel-edge:        rgba(230, 232, 240, 0.10);
  --p-panel-edge-strong: rgba(230, 232, 240, 0.16);
  --p-ink:        #E6E8F0;
  --p-ink-soft:   #BCC0CC;
  --p-muted:      #7E849A;
  --p-faint:      #555A6E;
  --p-accent:      #8FA0CB;
  --p-accent-soft: rgba(143, 160, 203, 0.13);
  --p-accent-lift: #D08660;
}

body.dark[data-palette="plum"] {
  --p-page:              #1A1220;
  --p-panel:             #221829;
  --p-panel-alt:         #110A18;
  --p-panel-alt-ink:     #F2E6EA;
  --p-panel-alt-mute:    #A892B0;
  --p-panel-alt-faint:   #6E5C78;
  --p-panel-alt-edge:    rgba(242, 230, 234, 0.10);
  --p-panel-alt-hover:   rgba(242, 230, 234, 0.035);
  --p-panel-edge:        rgba(242, 230, 234, 0.10);
  --p-panel-edge-strong: rgba(242, 230, 234, 0.16);
  --p-ink:        #F2E6EA;
  --p-ink-soft:   #C9B4C0;
  --p-muted:      #8C7090;
  --p-faint:      #5C4868;
  --p-accent:      #B097C7;
  --p-accent-soft: rgba(176, 151, 199, 0.13);
  --p-accent-lift: #D8A795;
}

/* ─── Palette variants (light mode only) ────────────────────────────
 * Activate via body[data-palette="slate" | "olive" | "indigo"].
 * Default (no attribute, or "vellum") keeps the Forest & Linen
 * palette defined in :root above. Dark mode (.dark) still overrides
 * on top of any palette.
 * ──────────────────────────────────────────────────────────────────── */

/* Slate & Bone — bone canvas tinted toward charcoal, deep charcoal
 * sidebar, deep teal accent, bronze lift. Clinical-modern. */
body[data-palette="slate"] {
  --p-page:              #B9BCC3;  /* Charcoal light */
  --p-panel:             #ECEAE3;
  --p-panel-sunk:        #93989B;
  --p-panel-sunk-edge:   rgba(20, 22, 24, 0.18);
  --p-panel-sunk-ink:    #161819;
  --p-panel-alt:         #181A1E;
  --p-panel-alt-ink:     #F2EFE6;
  --p-panel-alt-mute:    #B6BAB4;
  --p-panel-alt-faint:   #777A75;
  --p-panel-alt-edge:    rgba(242, 239, 230, 0.094);
  --p-panel-alt-hover:   rgba(242, 239, 230, 0.031);
  --p-panel-edge:        rgba(20, 22, 24, 0.10);
  --p-panel-edge-strong: rgba(20, 22, 24, 0.16);

  --p-nav-bg:            #181A1E;
  --p-nav-edge:          #B08350;
  --p-nav-ink:           #F2EFE6;
  --p-nav-muted:         #A4A8A4;
  --p-nav-faint:         #6E7270;

  --p-ink:        #161819;
  --p-ink-soft:   #2F3235;
  --p-muted:      #6B7074;
  --p-faint:      #9DA1A2;

  --p-accent:      #234B52;
  --p-accent-soft: rgba(35, 75, 82, 0.08);
  --p-accent-lift: #B0834F;
}

/* Olive Library — muted walnut canvas, cream panels, deep walnut
 * sidebar, deep olive accent, brass lift. Reading-room feel. */
body[data-palette="olive"] {
  --p-page:              #CCC0A5;  /* Walnut light */
  --p-panel:             #F1EBD7;
  --p-panel-sunk:        #909C7E;
  --p-panel-sunk-edge:   rgba(38, 33, 22, 0.20);
  --p-panel-sunk-ink:    #261E12;
  --p-panel-alt:         #2C2318;
  --p-panel-alt-ink:     #F4F0E1;
  --p-panel-alt-mute:    #C2BB9F;
  --p-panel-alt-faint:   #837C66;
  --p-panel-alt-edge:    rgba(244, 240, 225, 0.094);
  --p-panel-alt-hover:   rgba(244, 240, 225, 0.035);
  --p-panel-edge:        rgba(38, 33, 22, 0.10);
  --p-panel-edge-strong: rgba(38, 33, 22, 0.16);

  --p-nav-bg:            #2C2318;
  --p-nav-edge:          #C5A14E;
  --p-nav-ink:           #F4F0E1;
  --p-nav-muted:         #B7AE92;
  --p-nav-faint:         #847B65;

  --p-ink:        #261E12;
  --p-ink-soft:   #4A4232;
  --p-muted:      #7E7858;
  --p-faint:      #A89E80;

  --p-accent:      #7A8B5C;
  --p-accent-soft: rgba(122, 139, 92, 0.08);
  --p-accent-lift: #C5A14E;

  --p-unsaved: #A35234;
  --p-ok:      #6B7C4E;
}

/* Indigo Night — muted indigo canvas, lifted paper panels, very
 * deep indigo sidebar, indigo accent, copper lift. */
body[data-palette="indigo"] {
  --p-page:              #B6BDD2;  /* Indigo light */
  --p-panel:             #E6E8F0;
  --p-panel-sunk:        #8A93A6;
  --p-panel-sunk-edge:   rgba(22, 26, 38, 0.20);
  --p-panel-sunk-ink:    #161A26;
  --p-panel-alt:         #1B2235;
  --p-panel-alt-ink:     #E9EBF0;
  --p-panel-alt-mute:    #B4BCCE;
  --p-panel-alt-faint:   #7A8298;
  --p-panel-alt-edge:    rgba(233, 235, 240, 0.094);
  --p-panel-alt-hover:   rgba(233, 235, 240, 0.031);
  --p-panel-edge:        rgba(22, 26, 38, 0.10);
  --p-panel-edge-strong: rgba(22, 26, 38, 0.16);

  --p-nav-bg:            #1B2235;
  --p-nav-edge:          #B5734A;
  --p-nav-ink:           #E9EBF0;
  --p-nav-muted:         #A2A9BB;
  --p-nav-faint:         #6E7689;

  --p-ink:        #161A26;
  --p-ink-soft:   #2F354A;
  --p-muted:      #6E748A;
  --p-faint:      #9CA2B5;

  --p-accent:      #3A4670;
  --p-accent-soft: rgba(58, 70, 112, 0.09);
  --p-accent-lift: #B5734A;
}

/* Plum — deep plum-indigo sidebar, muted dusty pink canvas, soft
 * rose-gold lift. Warm, slightly perfumed; reading-chair register. */
body[data-palette="plum"] {
  --p-page:              #D8D4DC;  /* Plum light — near-neutral grey with purple undertone */
  --p-panel:             #F4F2F6;
  --p-panel-sunk:        #9A7E89;
  --p-panel-sunk-edge:   rgba(36, 22, 38, 0.20);
  --p-panel-sunk-ink:    #1F1224;
  --p-panel-alt:         #2C1F3F;
  --p-panel-alt-ink:     #F2E6EA;
  --p-panel-alt-mute:    #C8B6CC;
  --p-panel-alt-faint:   #8A7892;
  --p-panel-alt-edge:    rgba(242, 230, 234, 0.10);
  --p-panel-alt-hover:   rgba(242, 230, 234, 0.035);
  --p-panel-edge:        rgba(36, 22, 38, 0.10);
  --p-panel-edge-strong: rgba(36, 22, 38, 0.16);

  --p-nav-bg:            #2C1F3F;
  --p-nav-edge:          #C8927F;
  --p-nav-ink:           #F2E6EA;
  --p-nav-muted:         #B8A5BC;
  --p-nav-faint:         #80708A;

  --p-ink:        #1F1224;
  --p-ink-soft:   #3D2C44;
  --p-muted:      #7A6175;
  --p-faint:      #A48EA0;

  --p-accent:      #5C4070;
  --p-accent-soft: rgba(92, 64, 112, 0.10);
  --p-accent-lift: #C8927F;

  --p-unsaved: #A24E5C;
  --p-ok:      #7E8A6E;
}

/* ─── Type families on the document ─────────────────────────────────
 * Existing dashboard CSS variables (--font-body etc) will be aliased
 * to Peribolos in the per-room CSS during the re-skin phases. Here
 * we just expose the families as utilities.
 * ──────────────────────────────────────────────────────────────────── */

.p-display { font-family: var(--p-font-display); font-weight: 500; letter-spacing: 0.005em; }
.p-body    { font-family: var(--p-font-body); }
.p-mono    { font-family: var(--p-font-mono); letter-spacing: 0.04em; }

.p-hero    { font-family: var(--p-font-display); font-weight: 500; font-size: var(--p-fs-hero); line-height: var(--p-lh-hero); }
.p-title   { font-family: var(--p-font-display); font-weight: 500; font-size: var(--p-fs-title); line-height: var(--p-lh-title); }
.p-bodylg  { font-family: var(--p-font-body); font-size: var(--p-fs-body-lg); line-height: var(--p-lh-body-lg); }
.p-textbody{ font-family: var(--p-font-body); font-size: var(--p-fs-body); line-height: var(--p-lh-body); }
.p-meta    { font-family: var(--p-font-body); font-size: var(--p-fs-meta); line-height: var(--p-lh-meta); font-weight: 500; }
.p-caption { font-family: var(--p-font-body); font-size: var(--p-fs-caption); line-height: var(--p-lh-caption); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.p-monoSm  { font-family: var(--p-font-mono); font-size: var(--p-fs-mono); line-height: var(--p-lh-mono); }

/* ─── Top nav (Office / Workshop / Library switcher) ───────────────── */

.p-nav {
  display: flex;
  align-items: center;
  gap: var(--p-s-1);
  padding: 0 var(--p-s-4);
  height: 56px;
  flex-shrink: 0;
  background: var(--p-nav-bg);
  border-bottom: 2px solid var(--p-nav-edge);
  box-shadow: 0 1px 0 rgba(31,31,28,0.04);
}

.p-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--p-s-4) 0 0;
  margin-right: var(--p-s-3);
  border-right: 1px solid rgba(236, 239, 235, 0.12);
  height: 100%;
  text-decoration: none;
  color: var(--p-nav-ink);
}
.p-nav-brand:hover { opacity: 0.9; }
.p-nav-brand:visited { color: var(--p-nav-ink); }

.p-nav-wordmark {
  font-family: var(--p-font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.005em;
  color: var(--p-nav-ink);            /* light on dark petrol */
  line-height: 1;
}

.p-nav-tab {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;
  height: 100%;
  padding: 0 var(--p-s-4);
  font-family: var(--p-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--p-nav-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.p-nav-tab:visited { color: var(--p-nav-muted); }
.p-nav-tab:hover {
  color: var(--p-nav-ink);
  background: rgba(217, 184, 113, 0.12);   /* gold tint */
}
.p-nav-tab.active {
  color: var(--p-nav-ink);
  border-bottom-color: var(--p-accent-lift);  /* gold */
  background: rgba(217, 184, 113, 0.18);
}
.p-nav-tab.active:visited { color: var(--p-nav-ink); }

/* Italic Garamond verb subtitle next to each tab label */
.p-nav-tab .verb {
  font-family: var(--p-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--p-nav-muted);
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.p-nav-tab:hover .verb,
.p-nav-tab.active .verb { color: var(--p-nav-ink); }
.p-nav-spacer { flex: 1; }

/* ─── Keyboard focus (global) ─────────────────────────────────────────
 * One visible focus ring for keyboard users, every room and palette.
 * :focus-visible (not :focus) shows on keyboard nav, not mouse click.
 * Low specificity via :where() so a component with its own focus
 * indicator still wins. --p-accent inverts light<->dark per palette,
 * so the ring reads on the light page in day mode and the dark page
 * in night mode. */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
}
/* Dark top-nav band: gold edge so the ring reads against petrol/charcoal. */
.p-nav :where(a, button, [role="button"]):focus-visible {
  outline-color: var(--p-nav-edge);
}

/* ─── Semantic headings used as titles ────────────────────────────────
 * Section titles render as <h2 class="card-title"> / hero as
 * <h1 class="empty-title"> for a real document outline. The classes
 * already set font + bottom margin; only the UA top margin needs
 * zeroing so the conversion is pixel-identical. */
h1.card-title, h2.card-title, h3.card-title { margin-top: 0; }
h1.empty-title, h2.empty-title { margin: 0; }

/* Visually-hidden, screen-reader-only. For page <h1>s that give a
 * document outline without a visible title. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Room icon next to each room label */
.p-nav-tab .room-icon,
.room-switch .room-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  align-self: center;
  color: currentColor;
  opacity: 0.65;
  transition: opacity 0.15s, color 0.15s;
}
.p-nav-tab:hover .room-icon,
.p-nav-tab.active .room-icon,
.room-switch:hover .room-icon,
.room-switch.active .room-icon { opacity: 1; }
.p-nav-tab.active .room-icon,
.room-switch.active .room-icon { color: var(--p-accent-lift); }

/* Centered group of room tabs in the top nav */
.p-nav-rooms,
.room-rooms {
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: 100%;
}

/* ─── Scrollbars (palette-aware) ─────────────────────────────────────
 * Light by default (off the page tone). On dark surfaces (sidebars,
 * context column, top nav) the thumb uses the alt-edge / alt-faint
 * tokens so it reads against the palette instead of a default white.
 * ──────────────────────────────────────────────────────────────────── */

* { scrollbar-width: thin; scrollbar-color: var(--p-panel-edge-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--p-panel-edge-strong);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--p-faint); background-clip: padding-box; }

/* Dark surfaces — thumb in alt-edge so it shows on the deep ground */
.sidebar, .sidebar *,
.context-col, .context-col *,
.compose, .compose *,
.p-nav, .p-nav * {
  scrollbar-color: var(--p-panel-alt-edge) transparent;
}
.sidebar::-webkit-scrollbar-thumb,
.sidebar *::-webkit-scrollbar-thumb,
.context-col::-webkit-scrollbar-thumb,
.context-col *::-webkit-scrollbar-thumb,
.compose::-webkit-scrollbar-thumb,
.compose *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  background-clip: padding-box;
}
.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar *::-webkit-scrollbar-thumb:hover,
.context-col::-webkit-scrollbar-thumb:hover,
.context-col *::-webkit-scrollbar-thumb:hover,
.compose::-webkit-scrollbar-thumb:hover,
.compose *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
  background-clip: padding-box;
}

/* ─── Palette picker (shared across rooms) ──────────────────────────── */
.palette-picker {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  border-left: 1px solid rgba(236, 239, 235, 0.16);
  margin-left: 4px; height: 28px;
}
.palette-swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s;
  flex-shrink: 0;
}
.palette-swatch:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.28);
}
.palette-swatch.active {
  border-color: var(--p-nav-edge);
  box-shadow: 0 0 0 2px var(--p-nav-edge), 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* Two-tone preview: header colour (left 60%) + page colour (right 40%) */
.palette-swatch.v-vellum { background: linear-gradient(to right, #26352D 0 60%, #F4F0E8 60% 100%); }
.palette-swatch.v-slate  { background: linear-gradient(to right, #181A1E 0 60%, #B7BBC0 60% 100%); }
.palette-swatch.v-olive  { background: linear-gradient(to right, #2C2318 0 60%, #C9BFA4 60% 100%); }
.palette-swatch.v-indigo { background: linear-gradient(to right, #1B2235 0 60%, #B5BCCB 60% 100%); }
.palette-swatch.v-plum   { background: linear-gradient(to right, #2C1F3F 0 60%, #D2B9C1 60% 100%); }


/* Newsreader + Instrument Serif (dashboard's own type) — self-hosted. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/InstrumentSerif-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/InstrumentSerif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Newsreader-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/Newsreader-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Newsreader-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Newsreader-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Newsreader-600.woff2') format('woff2');
}