/* ==========================================================================
   KOAN Design Client Room
   1. Tokens      — the only place raw values are written
   2. Base        — elements
   3. Components  — shared building blocks
   4. Screens     — each screen, built only from tokens and components
   Breakpoints (media queries cannot read custom properties):
     768px  — single column → wider layout
     1040px — left rail for wayfinding beside the content
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Colour by role, not by mood.
     Indigo marks what you can act on and the one surface that leads each page;
     vermilion is the brand's signature and appears once; everything else is neutral. */
  --color-bg: #f6f5f1;
  --color-surface: #ffffff;
  --color-surface-subtle: #eeece6;
  --color-text: #1b1b20;
  --color-text-secondary: #5c5b63;   /* 6.4:1 on --color-bg */
  --color-text-muted: #8d8b93;       /* disabled only */
  --color-border: #e3e0d9;
  --color-border-strong: #8e8b85;    /* 3.4:1 — controls */
  --color-brand: #243c70;            /* 藍 — 10:1 on white */
  --color-brand-hover: #1a2d57;
  --color-brand-subtle: #e9edf6;
  --color-on-brand: #ffffff;
  /* The leading surface (next session): a white card; indigo stays for actions. */
  --color-panel: #ffffff;
  --color-on-panel: #1b1b20;
  --color-on-panel-secondary: #5c5b63;
  --color-on-panel-border: #8e8b85;
  --color-on-panel-hover: #eeece6;
  --color-panel-action: #243c70;
  --color-on-panel-action: #ffffff;
  --color-accent: #c4432f;           /* 朱 — the signature */
  --color-danger: #b3261e;
  --color-danger-subtle: #fbeceb;
  --color-success: #2f7d5b;
  --color-focus: #243c70;

  /* Space: 4px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Vertical rhythm: one token per relationship, on every page. */
  /* Always: section > group > inside a group. */
  --rhythm-section: var(--space-7);
  --rhythm-group: var(--space-6);
  --rhythm-heading: var(--space-4);
  --rhythm-paragraph: var(--space-4);

  /* Type */
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: clamp(28px, 5vw, 36px);
  --text-hero: clamp(30px, 4vw, 40px);       /* the public landing's one line */
  --text-display: clamp(34px, 4vw, 44px);    /* the signature date: set, not shouted */
  --text-title: clamp(24px, 2.6vw, 28px);    /* the next session's title, in the date's voice */
  --leading-tight: 1.25;
  --leading-heading: 1.4;
  --leading-ui: 1.6;
  --leading-body: 1.7;
  --leading-reading: 1.9;                    /* exception: long Japanese reading text */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --tracking-heading: .04em;
  --tracking-label: .06em;

  /* Shape */
  --border-width: 1px;
  --border-width-strong: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgb(27 27 32 / .05), 0 0 0 1px rgb(27 27 32 / .04);
  /* The one raised surface on a page: the next session. */
  --shadow-lift: 0 1px 2px rgb(27 27 32 / .04), 0 16px 32px -20px rgb(27 27 32 / .22);

  /* Sizes */
  --control-height: 48px;
  --control-height-sm: 40px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --tile-size: 40px;
  --header-height: 64px;
  --bullet-size: 6px;
  --panel-max: 440px;
  --button-wide: 280px;

  /* Layout */
  --container-max: 1080px;
  --content-max: 680px;              /* about 40 Japanese characters */
  --admin-max: 900px;
  --gutter: var(--space-5);

  /* Motion: state changes only. */
  --duration: 200ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --press-offset: 1px;
  --nudge-offset: 2px;

  /* Icons — Lucide (ISC licence). */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  --icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E");
  --icon-calendar-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M16 19h6'/%3E%3Cpath d='M19 16v6'/%3E%3C/svg%3E");
  --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  --icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
  --icon-circle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  --icon-file-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
  --icon-presentation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h20'/%3E%3Cpath d='M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3'/%3E%3Cpath d='m7 21 5-5 5 5'/%3E%3C/svg%3E");
  --icon-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E");
  --icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
  --icon-notebook-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h4'/%3E%3Cpath d='M2 10h4'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M2 18h4'/%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M9.5 8h5'/%3E%3Cpath d='M9.5 12H16'/%3E%3Cpath d='M9.5 16H14'/%3E%3C/svg%3E");
  --icon-messages-square: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1'/%3E%3C/svg%3E");
  --icon-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z'/%3E%3C/svg%3E");
  --icon-flask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2'/%3E%3Cpath d='M6.453 15h11.094'/%3E%3Cpath d='M8.5 2h7'/%3E%3C/svg%3E");
  --icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
  --icon-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121318;
    --color-surface: #1f2027;
    --color-surface-subtle: #25262e;
    --color-text: #ececef;
    --color-text-secondary: #a8a8b2;
    --color-text-muted: #6f6f79;
    --color-border: #2e2f38;
    --color-border-strong: #6c6c78;
    --color-brand: #9bb2ec;
    --color-brand-hover: #b5c6f2;
    --color-brand-subtle: #222b42;
    --color-on-brand: #0f1424;
    --color-panel: #1f2027;
    --color-on-panel: #ececef;
    --color-on-panel-secondary: #a8a8b2;
    --color-on-panel-border: #6c6c78;
    --color-on-panel-hover: #25262e;
    --color-panel-action: #9bb2ec;
    --color-on-panel-action: #0f1424;
    --color-accent: #f08068;
    --color-danger: #f2a39b;
    --color-danger-subtle: #3a1d1b;
    --color-success: #7cc7a2;
    --color-focus: #9bb2ec;
    --shadow-sm: 0 0 0 1px rgb(255 255 255 / .06);
    --shadow-lift: 0 0 0 1px rgb(255 255 255 / .1), 0 16px 32px -16px rgb(0 0 0 / .7);
  }
}

@media (min-width: 768px) {
  :root {
    --rhythm-section: var(--space-8);
    --gutter: var(--space-6);
  }
}

@media (max-width: 767px) {
  :root { --gutter: var(--space-4); }
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-5); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: var(--border-width-strong) solid var(--color-focus); outline-offset: var(--border-width-strong); border-radius: var(--radius-sm); }
img { max-width: 100%; height: auto; }
p { margin: 0; }
/* Short text marked by app.js breaks only between phrases; body text breaks by character with strict kinsoku. */
body { line-break: strict; }
.is-phrased { word-break: keep-all; overflow-wrap: anywhere; }
::selection { background: var(--color-brand-subtle); }
/* Standard screen-reader-only utility; its 1px values are not design values. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Headings break between phrases, never inside a word. */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-feature-settings: "palt";
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.nowrap { white-space: nowrap; }
h3 { font-family: var(--font-sans); font-size: var(--text-base); }

/* 3. Components ------------------------------------------------------------ */

/* Icons — Lucide glyphs drawn as masks so they take the current text colour.
   An element names its glyph with --glyph; its pseudo-element draws it.
   Trailing glyphs say where a link goes; leading glyphs name an action or a kind. */
.icon-chevron { --glyph: var(--icon-chevron); }
.icon-external { --glyph: var(--icon-external); }
.icon-download { --glyph: var(--icon-download); }
.icon-video { --glyph: var(--icon-video); }
.icon-calendar-plus { --glyph: var(--icon-calendar-plus); }
.icon-circle-check { --glyph: var(--icon-circle-check); }
.icon-calendar { --glyph: var(--icon-calendar); }
.icon-folder { --glyph: var(--icon-folder); }
.icon-link { --glyph: var(--icon-link); }
.icon-file-text { --glyph: var(--icon-file-text); }
.icon-presentation { --glyph: var(--icon-presentation); }
.icon-receipt { --glyph: var(--icon-receipt); }
.icon-file { --glyph: var(--icon-file); }
.icon-chevron::after, .icon-external::after, .icon-download::after,
.button[class*="icon-"]::before, .empty[class*="icon-"]::before, .doc-type::before {
  content: "";
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}
.icon-chevron::after, .button[class*="icon-"]::before, .empty[class*="icon-"]::before, .doc-type::before { width: var(--icon-md); height: var(--icon-md); }

/* Buttons perform an action: primary (one per screen), secondary, danger. */
.button {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-label);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.button:hover { border-color: var(--color-text); }
.button:active { transform: translateY(var(--press-offset)); }
.button:disabled, .button[aria-disabled="true"] { border-color: var(--color-border); background: transparent; color: var(--color-text-muted); cursor: not-allowed; transform: none; }
.button.primary { border-color: var(--color-brand); background: var(--color-brand); color: var(--color-on-brand); }
.button.primary:hover { border-color: var(--color-brand-hover); background: var(--color-brand-hover); }
.button.primary:disabled { border-color: var(--color-border); background: var(--color-border); color: var(--color-text-secondary); }
.button.danger { border-color: var(--color-danger); color: var(--color-danger); }
.button.danger:hover { background: var(--color-danger-subtle); }
.button.full { width: 100%; }
.button.small { min-height: var(--control-height-sm); padding: var(--space-2) var(--space-4); }
.button[aria-busy="true"]::after { content: ""; width: var(--space-3); height: var(--space-3); border: var(--border-width) solid currentColor; border-right-color: transparent; border-radius: 50%; animation: turn .7s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

/* Text links go somewhere; they are indigo so they read as interactive.
   The trailing glyph says where: → another page · ↓ this page · ↗ outside · ← back. */
.text-link {
  color: var(--color-brand);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: var(--space-1);
  transition: color var(--duration) var(--ease), text-decoration-color var(--duration) var(--ease);
}
.text-link:hover { color: var(--color-brand-hover); text-decoration-color: currentColor; }
/* The glyph rides on a no-break space, so it never wraps away from the last word. */
.text-link { --glyph: var(--icon-arrow); }
.text-link.is-external { --glyph: var(--icon-external); }
.text-link.is-jump { --glyph: var(--icon-arrow-down); }
.text-link.is-back { --glyph: var(--icon-arrow-left); }
.text-link.is-top { --glyph: var(--icon-arrow-up); }
.text-link::after, .text-link.is-back::before {
  content: "\00a0";
  padding-left: var(--icon-sm);
  background: currentColor;
  -webkit-mask: var(--glyph) right center / var(--icon-sm) no-repeat;
  mask: var(--glyph) right center / var(--icon-sm) no-repeat;
  transition: -webkit-mask-position var(--duration) var(--ease), mask-position var(--duration) var(--ease);
}
.text-link.is-back::after { content: none; }
/* A leading glyph names what is behind the link: this session's notes, its transcript, its materials. */
.text-link.lead-notes { --lead-glyph: var(--icon-notebook-text); }
.text-link.lead-transcript { --lead-glyph: var(--icon-messages-square); }
.text-link.lead-materials { --lead-glyph: var(--icon-folder); }
.text-link[class*="lead-"]::before {
  content: "\00a0";
  margin-right: var(--space-1);
  padding-right: var(--icon-sm);
  background: currentColor;
  -webkit-mask: var(--lead-glyph) left center / var(--icon-sm) no-repeat;
  mask: var(--lead-glyph) left center / var(--icon-sm) no-repeat;
}
.text-link[class*="lead-"]::before { background: var(--color-text-secondary); }
.text-link.is-back::before { margin-right: var(--space-1); padding: 0 var(--icon-sm) 0 0; -webkit-mask-position: left center; mask-position: left center; }
/* A small delight with meaning: on hover the glyph leans the way the link goes. */
.text-link:hover::after { -webkit-mask-position: calc(100% + var(--nudge-offset)) center; mask-position: calc(100% + var(--nudge-offset)) center; }
.text-link.is-external:hover::after { -webkit-mask-position: calc(100% + var(--nudge-offset)) calc(50% - var(--nudge-offset)); mask-position: calc(100% + var(--nudge-offset)) calc(50% - var(--nudge-offset)); }
.text-link.is-top:hover::after { -webkit-mask-position: right calc(50% - var(--nudge-offset)); mask-position: right calc(50% - var(--nudge-offset)); }
.text-link.is-jump:hover::after { -webkit-mask-position: right calc(50% + var(--nudge-offset)); mask-position: right calc(50% + var(--nudge-offset)); }
.text-link.is-back:hover::before { -webkit-mask-position: calc(var(--nudge-offset) * -1) center; mask-position: calc(var(--nudge-offset) * -1) center; }
.link-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }

/* Fields */
input, textarea, select {
  width: 100%;
  min-height: var(--control-height);
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
textarea { resize: vertical; line-height: var(--leading-body); }
.admin-form textarea { field-sizing: content; min-height: 6lh; max-height: 70vh; }
input:hover, textarea:hover, select:hover { border-color: var(--color-text-secondary); }
input:focus, textarea:focus, select:focus { border-color: var(--color-brand); outline: none; box-shadow: 0 0 0 var(--space-1) var(--color-brand-subtle); }
.file-picker { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.file-name { color: var(--color-text-secondary); font-weight: var(--weight-regular); overflow-wrap: anywhere; }
.file-field:focus-within .button { outline: var(--border-width-strong) solid var(--color-focus); outline-offset: var(--border-width-strong); }
input[type="file"] { padding: var(--space-2); }
input[type="file"]::file-selector-button { margin-right: var(--space-3); padding: var(--space-2) var(--space-4); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
input:disabled, textarea:disabled, select:disabled { border-color: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; }
.login-form > label, .admin-form label { color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.form-help { color: var(--color-text-secondary); font-size: var(--text-sm); }
.admin-form label .form-help { display: block; margin-top: var(--space-2); font-weight: var(--weight-regular); }
.form-error { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-danger-subtle); color: var(--color-danger); font-size: var(--text-sm); }

.section-count { margin-left: var(--space-2); color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-regular); letter-spacing: 0; white-space: nowrap; }
.empty { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-ui); }
.empty[class*="icon-"] { display: flex; align-items: center; gap: var(--space-2); }

/* Card: a white surface that groups one set of things. */
.card { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }

/* Lists live in a card; rows are divided by an inset hairline (line role ②). */
.list { display: grid; margin: 0; padding: 0; list-style: none; }
.list > li { position: relative; }
.list > li + li::before { content: ""; position: absolute; top: 0; left: var(--space-5); right: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.list-row { display: grid; align-items: start; column-gap: var(--space-4); padding: var(--space-4) var(--space-5); text-decoration: none; }
.list > li:first-child > .list-row, .list > .list-row:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.list > li:last-child > .list-row, .list > .list-row:last-child { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
a.list-row { transition: background-color var(--duration) var(--ease); }
a.list-row:hover { background: var(--color-brand-subtle); }
.row-body { display: grid; gap: var(--space-1); min-width: 0; }
.row-title { font-weight: var(--weight-bold); line-height: var(--leading-ui); word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: pretty; }
.meta-date { white-space: nowrap; }
.row-meta > span + .meta-date::before { content: " · "; }
.row-meta { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-ui); overflow-wrap: anywhere; }
.row-summary { display: -webkit-box; overflow: hidden; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-ui); -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.row-icon { display: inline-flex; align-self: center; color: var(--color-text-muted); transition: transform var(--duration) var(--ease), color var(--duration) var(--ease); }
.row-action { display: inline-flex; align-items: center; gap: var(--space-1); align-self: center; color: var(--color-brand); font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: nowrap; }
.row-action::after { transition: transform var(--duration) var(--ease); }
/* On narrow screens the glyph alone carries the action; the label stays for screen readers. */
.row-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.list-row:hover .row-icon { color: var(--color-brand); transform: translateX(var(--nudge-offset)); }
a.list-row:hover .row-action.icon-external::after { transform: translate(var(--nudge-offset), calc(var(--nudge-offset) * -1)); }
a.list-row:hover .row-action.icon-download::after { transform: translateY(var(--nudge-offset)); }

/* To-do row: a quiet ordinal — nothing that looks like a checkbox that cannot be pressed. */
.list:has(.action-row) { counter-reset: action; }
.action-row { grid-template-columns: var(--icon-lg) minmax(0, 1fr); counter-increment: action; }
.action-check { color: var(--color-text-secondary); font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--leading-tight); }
.action-check::before { content: counter(action); }
.action-row.is-done .row-title { color: var(--color-text-secondary); text-decoration: line-through; }

/* Session row: date, title, chevron. */
.session-row { grid-template-columns: minmax(0, 1fr) var(--icon-md); grid-template-areas: "date icon" "body icon"; row-gap: var(--space-1); }
.row-date { grid-area: date; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-ui); }
.session-row .row-body { grid-area: body; }
/* The running number in Mincho, in its own column: a record that accumulates. */
.session-row .row-title { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); }
.row-no { color: var(--color-text-secondary); font-family: var(--font-serif); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; }
.row-no b { font-weight: inherit; }
.session-row .row-icon { grid-area: icon; }


/* Document row: a kind tile, title and details, and the action. */
.document-row { grid-template-columns: var(--tile-size) minmax(0, 1fr) auto; }
.document-row .row-action { align-self: start; /* optical: centre on the title's first line */ padding-top: var(--space-1); }
.doc-type { display: grid; place-items: center; width: var(--tile-size); height: var(--tile-size); border-radius: var(--radius-sm); background: var(--color-surface-subtle); color: var(--color-text-secondary); }

/* Status badge */
.status { display: inline-flex; align-items: center; min-height: var(--space-5); padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-subtle); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1; }
.status.planned { background: var(--color-brand-subtle); color: var(--color-brand); }

/* Breadcrumbs (admin) */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-5); color: var(--color-text-secondary); font-size: var(--text-sm); }
.breadcrumbs a { text-underline-offset: var(--space-1); }
.breadcrumbs a:hover { color: var(--color-text); }

/* Page layout. Every client page shares one structure:
   left rail = wayfinding (section titles, back link, contents), right = content. */
.layout-block { display: grid; gap: var(--rhythm-heading); padding-top: var(--rhythm-section); }
/* To-dos belong to the next session: they sit close to the panel. */
.layout-block.is-attached { padding-top: var(--space-7); }
.layout-rail, .layout-body { min-width: 0; }
.page-top { padding-top: var(--space-6); }
.page-nav { display: grid; align-content: start; gap: var(--space-5); font-size: var(--text-sm); }
.page-toc { display: none; }
.page-toc-title { margin-bottom: var(--space-2); color: var(--color-text-secondary); font-weight: var(--weight-bold); }
.page-toc ol { display: grid; margin: 0; padding: 0; list-style: none; }
.page-toc a { display: grid; padding: var(--space-2) var(--space-3); margin-inline: calc(var(--space-3) * -1); border-radius: var(--radius-sm); color: var(--color-text-secondary); line-height: var(--leading-ui); text-decoration: none; transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.page-toc a:hover { background: var(--color-surface-subtle); color: var(--color-text); }
/* Where the reader is now. */
.page-toc a[aria-current] { background: var(--color-surface-subtle); color: var(--color-text); }
.page-toc small { font-size: var(--text-sm); }
/* Phones: the same contents, folded under one line. */
.page-hero + .page-toc-compact, .guide-hero + .page-toc-compact { margin-top: var(--rhythm-group); }
.page-toc-compact { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.page-toc-compact summary, .transcript-materials summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--control-height); padding-inline: var(--space-4); cursor: pointer; font-weight: var(--weight-bold); list-style: none; }
.page-toc-compact summary::-webkit-details-marker, .transcript-materials summary::-webkit-details-marker { display: none; }
.page-toc-compact summary::after, .transcript-materials summary::after { content: ""; width: var(--icon-md); height: var(--icon-md); background: var(--color-text-secondary); -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat; transform: rotate(90deg); transition: transform var(--duration) var(--ease); }
.page-toc-compact[open] summary::after, .transcript-materials[open] summary::after { transform: rotate(-90deg); }
.page-toc-compact ol { display: grid; margin: 0; padding: 0 var(--space-4) var(--space-3); list-style: none; }
.page-toc-compact a { display: grid; padding-block: var(--space-2); color: var(--color-text-secondary); text-decoration: none; }
.page-toc-compact small { font-size: var(--text-sm); }
.page-toc-compact .is-sub a { padding-left: var(--space-4); font-size: var(--text-sm); }
.page-toc .is-sub a { padding-block: var(--space-1); padding-left: var(--space-5); font-size: var(--text-sm); }
.block-footnote { margin-top: var(--space-5); font-size: var(--text-sm); }
.page-footnote { padding-top: var(--rhythm-section); font-size: var(--text-sm); }
/* A quiet link: a footnote, not a destination competing with the content. */
.text-link.is-quiet { color: var(--color-text-secondary); font-weight: var(--weight-regular); }
.text-link.is-quiet:hover { color: var(--color-text); }

/* Detail page header */
.page-hero { display: grid; justify-items: start; gap: var(--space-4); }
.page-hero h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
.page-hero + .archive, .page-hero + .card, .page-hero + .empty { margin-top: var(--space-6); }
.year-links { margin-top: var(--space-1); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--color-text-secondary); font-size: var(--text-sm); }
.hero-lead { color: var(--color-text-secondary); text-wrap: pretty; }
.page-hero .event-actions { display: grid; justify-self: stretch; margin-top: var(--space-2); }

/* 4. Screens --------------------------------------------------------------- */

/* Client shell: brand and logout only. Not sticky, so it needs no rule. */
.portal-shell { min-height: 100svh; }
.portal-main { width: min(var(--container-max), 100% - 2 * var(--gutter)); margin-inline: auto; padding-bottom: var(--space-8); }
.client-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: min(var(--container-max), 100% - 2 * var(--gutter)); min-height: var(--header-height); margin-inline: auto; }
.client-brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); font-family: var(--font-serif); font-size: var(--text-base); letter-spacing: var(--tracking-heading); text-decoration: none; }
.client-brand span { display: none; color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: 0; }
.client-logout { margin: 0; }
.client-logout button { min-height: var(--control-height-sm); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: var(--text-sm); transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.client-logout button:hover { background: var(--color-surface-subtle); color: var(--color-text); }

/* Home: one page that answers "what now?" — next, to-dos, last time, archive, materials. */
.greeting { padding-top: var(--space-4); color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-regular); letter-spacing: 0; }

/* The next session: the one surface that leads the page.
   Date on the left quarter, matching the page rail; content and actions on the right. */
.next-panel { display: grid; gap: var(--space-4); margin-top: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-panel); box-shadow: var(--shadow-lift); color: var(--color-on-panel); }
.next-date { display: grid; align-content: start; justify-items: start; gap: var(--space-2); }
.next-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); }
/* Signature: vermilion marks time — how soon the next session is. */
.next-countdown { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-on-panel-hover); letter-spacing: 0; }
.next-countdown::before { content: ""; width: var(--bullet-size); height: var(--bullet-size); border-radius: 50%; background: var(--color-accent); }
.date-mark { display: inline-flex; align-items: baseline; font-family: var(--font-serif); font-feature-settings: "palt"; line-height: 1; white-space: nowrap; }
.dm-num { font-size: var(--text-display); font-variant-numeric: proportional-nums; letter-spacing: -.02em; }
.dm-unit { margin-inline: .08em .2em; font-size: var(--text-base); }
.dm-unit:last-child { margin-right: 0; }
.next-meta { color: var(--color-on-panel-secondary); font-size: var(--text-sm); }
.next-date .next-meta { color: var(--color-on-panel); font-size: var(--text-base); }
/* On the day, the date gives way to the word itself, and joining grows. */
.today-mark { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-serif); font-size: var(--text-display); line-height: 1; }
.today-mark::after { content: ""; width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--color-accent); }
.is-ended .today-mark::after { content: none; }
.next-panel.is-today .button.primary { min-width: min(100%, var(--button-wide)); min-height: var(--space-8); padding-inline: var(--space-6); font-size: var(--text-base); }
.next-ended { color: var(--color-on-panel-secondary); }
.next-main { display: grid; align-content: start; justify-items: start; gap: var(--space-3); }
.next-panel h2 { color: var(--color-on-panel); font-size: var(--text-title); font-weight: var(--weight-regular); line-height: var(--leading-tight); }
.next-lead { display: none; max-width: var(--content-max); color: var(--color-on-panel-secondary); text-wrap: pretty; }
.next-panel .event-actions { display: grid; justify-self: stretch; margin-top: var(--space-2); }
.next-panel .button { border-color: var(--color-on-panel-border); background: transparent; color: var(--color-on-panel); }
.next-panel .button:hover { border-color: var(--color-on-panel); background: var(--color-on-panel-hover); }
.next-panel .button.primary { border-color: var(--color-panel-action); background: var(--color-panel-action); color: var(--color-on-panel-action); }
.next-panel .button.primary:hover { border-color: var(--color-panel-action); background: var(--color-panel-action); opacity: .9; }
.next-panel .text-link { color: var(--color-brand); }
.next-actions { display: grid; justify-self: stretch; gap: var(--space-4); }
.next-panel .link-row { margin-top: var(--space-1); }
.event-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* No next session yet: a quiet line, so last time can lead instead. */
.next-quiet { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-surface-subtle); color: var(--color-text-secondary); font-size: var(--text-sm); }
.next-quiet-title { color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: var(--tracking-label); }

/* Last time: the latest record, read in place. */
.recap { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-5); }
.recap-meta { color: var(--color-text-secondary); font-size: var(--text-sm); }
.recap-title { font-weight: var(--weight-bold); line-height: var(--leading-ui); }
.recap-excerpt { display: -webkit-box; overflow: hidden; max-width: var(--content-max); margin-top: var(--space-2); line-height: var(--leading-reading); line-break: strict; text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.recap .link-row { margin-top: var(--space-3); }

/* Archive: one card per year. */
.archive { display: grid; }
.archive-label { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); margin-bottom: var(--space-2); color: var(--color-text); cursor: pointer; list-style: none; }
.archive-label::-webkit-details-marker { display: none; }
.archive-label h2 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-bold); letter-spacing: 0; }
.archive-count { color: var(--color-text-secondary); font-size: var(--text-sm); }
.archive-label::after { content: ""; width: var(--icon-md); height: var(--icon-md); margin-left: auto; background: var(--color-text-secondary); -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat; transform: rotate(90deg); transition: transform var(--duration) var(--ease); }
.archive-year[open] > .archive-label::after { transform: rotate(-90deg); }
.archive-year:not([open]) > .archive-label { margin-bottom: 0; }
.archive-year { scroll-margin-top: var(--space-5); }
.archive-label { position: sticky; top: 0; z-index: 1; padding-block: var(--space-2); background: var(--color-bg); }
.archive-year + .archive-year { margin-top: var(--rhythm-group); }

/* Login: the paper, a name and one field. */
.login-shell { min-height: 100svh; display: grid; grid-template-rows: var(--header-height) 1fr; width: min(var(--container-max), 100% - 2 * var(--gutter)); margin-inline: auto; padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); }
.login-shell.admin-login { grid-template-rows: 1fr; padding-top: max(var(--space-6), env(safe-area-inset-top)); }
.login-brand { align-self: center; font-family: var(--font-serif); letter-spacing: var(--tracking-heading); }
.login-panel { display: grid; align-self: center; gap: var(--space-6); width: min(100%, var(--panel-max)); margin-inline: auto; }
.login-copy { display: grid; gap: var(--space-3); }
.login-copy h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
/* Keep the client's name whole; it wraps inside only if longer than the line. */
.phrase { display: inline-block; max-width: 100%; }
.login-copy p { color: var(--color-text-secondary); }
.login-form { display: grid; gap: var(--space-2); }
.login-form .password-field input { margin-top: 0; }
.login-form .button { margin-top: var(--space-4); }
.password-field { position: relative; }
.password-field input { padding-right: calc(var(--space-8) + var(--space-2)); }
.reveal { position: absolute; right: var(--space-1); top: calc(var(--space-2) + var(--space-1)); min-width: var(--space-8); min-height: var(--control-height-sm); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-brand); cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-bold); transition: background-color var(--duration) var(--ease); }
.reveal:hover { background: var(--color-brand-subtle); }
.quiet-note { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* Public landing page: the Client Room's parts, given room to breathe.
*/
.service-hero { display: grid; max-width: var(--content-max); padding-top: var(--space-7); }
.hero-copy { display: grid; justify-items: start; gap: var(--space-5); }
.service-hero h1 { font-size: var(--text-hero); font-weight: var(--weight-regular); line-height: var(--leading-heading); }
.hero-text { max-width: 30em; font-size: var(--text-md); line-height: var(--leading-body); text-wrap: pretty; }

.service-band { display: grid; gap: var(--space-5); padding-top: calc(var(--space-8) + var(--space-5)); }
.service-band > h2 { font-size: var(--text-xl); }
.topics, .steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.topic { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.topic h3, .step h3 { font-size: var(--text-base); font-weight: var(--weight-bold); }
.topic p, .step p { color: var(--color-text-secondary); text-wrap: pretty; }
.topic-icon { display: grid; place-items: center; width: var(--tile-size); height: var(--tile-size); border-radius: var(--radius-sm); background: var(--color-surface-subtle); color: var(--color-text); }
.topic-icon::before { content: ""; width: var(--icon-md); height: var(--icon-md); background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.icon-compass { --glyph: var(--icon-compass); }
.icon-flask { --glyph: var(--icon-flask); }
.icon-refresh { --glyph: var(--icon-refresh); }
.service-note { color: var(--color-text-secondary); font-size: var(--text-sm); }
/* The steps hand the work over: from walking alongside to walking alone.
   Neutral tones only — the circles are not controls or a progress state. */
.steps { position: relative; }
/* Phones: a vertical line runs from each circle down to the next one. */
.step:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--tile-size) / 2); top: var(--tile-size); bottom: calc(var(--space-4) * -1); width: var(--border-width); background: var(--color-border-strong); }
.step { position: relative; display: grid; align-content: start; gap: var(--space-2); padding-left: calc(var(--tile-size) + var(--space-4)); }
.step-no { position: absolute; z-index: 1; left: 0; top: 0; display: grid; place-items: center; width: var(--tile-size); height: var(--tile-size); border: var(--border-width) solid var(--color-border-strong); border-radius: 50%; background: var(--color-text); color: var(--color-bg); font-family: var(--font-serif); font-size: var(--text-lg); }
.step:nth-child(2) .step-no { background: var(--color-surface-subtle); color: var(--color-text); }
.step:nth-child(3) .step-no { background: var(--color-bg); color: var(--color-text); }
.step-tag { color: var(--color-text-secondary); font-size: var(--text-sm); letter-spacing: var(--tracking-label); }
.steps-scale { display: none; }
.service-footer { display: grid; gap: var(--space-2); width: min(var(--container-max), 100% - 2 * var(--gutter)); margin-inline: auto; margin-top: var(--space-8); padding-block: var(--space-6) max(var(--space-7), env(safe-area-inset-bottom)); border-top: var(--border-width) solid var(--color-border); color: var(--color-text-secondary); font-size: var(--text-sm); }

/* Reading pages: the content column keeps a book measure. */
.session-detail, .transcript-article, .guide { max-width: var(--content-max); line-break: strict; }
.reading-section { padding-top: var(--rhythm-section); }
/* Heading steps on reading pages: section 24px Mincho > topic 18px bold > body 16px. */
.reading-section h2, .transcript-section-head h2, .guide-service h2 { font-size: var(--text-xl); }
.reading-section h2 { margin-bottom: var(--rhythm-heading); }
.reading-section p { margin-bottom: var(--rhythm-paragraph); line-height: var(--leading-reading); text-wrap: pretty; }
.reading-section p:last-child { margin-bottom: 0; }
/* Reading text flows on the page; cards are only for lists of separate things. */
.point-summary { font-size: var(--text-base); }
.point-summary p { line-height: var(--leading-reading); }
/* Groups are separated by clearly more space than anything inside a group. */
.note-block { margin-top: var(--rhythm-group); }
.reading-section h2 + .note-block { margin-top: 0; }
.note-block h3 { margin-bottom: var(--space-3); color: var(--color-text); font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-ui); letter-spacing: 0; scroll-margin-top: var(--space-5); }
.note-block ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.note-block li { position: relative; padding-left: var(--space-5); line-height: var(--leading-reading); text-wrap: pretty; }
/* The dot sits on the centre of the first line of reading text. */
.note-block li::before { content: ""; position: absolute; left: var(--space-2); top: calc(var(--leading-reading) * .5em - var(--bullet-size) / 2); width: var(--bullet-size); height: var(--bullet-size); border-radius: 50%; background: var(--color-text-secondary); }

/* Transcript: speech bubbles — the advisor on the left, the client on the right in indigo tint. */
.transcript-materials { margin-top: var(--rhythm-group); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.page-toc-compact + .transcript-materials { margin-top: var(--space-2); }
.page-hero + .transcript-materials { margin-top: var(--rhythm-group); }
.transcript-materials > .card { border: 0; border-top: var(--border-width) solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.transcript-section { padding-top: var(--rhythm-section); }
.transcript-section-head { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.transcript-section-head p { color: var(--color-text-secondary); font-size: var(--text-sm); }
.dialogue { display: grid; width: min(88%, var(--content-max)); grid-template-columns: minmax(0, 1fr); gap: var(--space-2); align-items: end; margin-top: var(--space-5); }
.dialogue.is-continued { margin-top: var(--space-1); }
.dialogue.speaker-host { margin-right: auto; }
.dialogue.speaker-client { margin-left: auto; }
/* Side, tint and the legend say who is speaking; no avatars. */
.dialogue .speaker { display: none; }
.dialogue.speaker-client .speaker { order: 2; }
.dialogue .speaker { place-items: center; width: var(--space-6); height: var(--space-6); border-radius: 50%; background: var(--color-surface-subtle); color: var(--color-text-secondary); font-family: var(--font-serif); font-size: var(--text-sm); }
.dialogue.is-continued .speaker { visibility: hidden; }
.dialogue.speaker-client .speaker { background: var(--color-brand); color: var(--color-on-brand); }
.utterance { display: grid; gap: var(--space-1); min-width: 0; }
.speaker-name { margin-inline: var(--space-1); color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-ui); overflow-wrap: anywhere; }
.bubble { width: fit-content; max-width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); line-height: var(--leading-body); text-wrap: pretty; }
.speaker-host .bubble { border-bottom-left-radius: var(--radius-xs); }
.speaker-client .utterance { justify-items: end; }
.speaker-client .bubble { border-bottom-right-radius: var(--radius-xs); background: var(--color-brand-subtle); box-shadow: none; }
.transcript-note { margin-block: var(--space-5); color: var(--color-text-secondary); font-size: var(--text-sm); text-align: center; }
.transcript-footer .link-row { margin-bottom: var(--space-5); }
.page-end { padding-top: var(--rhythm-section); }
.transcript-footer { padding-top: var(--rhythm-section); color: var(--color-text-secondary); font-size: var(--text-sm); }

/* Guides */
.guide-hero { display: grid; gap: var(--space-4); }
.guide-hero h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
.guide-hero > p { color: var(--color-text-secondary); }
.guide-hero > p.guide-help { font-size: var(--text-sm); }
.guide-service { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); gap: var(--space-4); padding-top: var(--rhythm-section); }
.guide-service > div { min-width: 0; }
.guide-service h3 { margin-top: var(--rhythm-group); font-weight: var(--weight-bold); }
.guide-number { color: var(--color-text-secondary); font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--leading-heading); }
.guide-service ol { margin-block: var(--space-4); padding-left: var(--space-5); }
.guide-service li { margin-block: var(--space-2); padding-left: var(--space-1); text-wrap: pretty; }
.guide-service li::marker { color: var(--color-text-secondary); font-weight: var(--weight-bold); }
.guide-service p { margin-top: var(--space-3); line-height: var(--leading-reading); text-wrap: pretty; }
.guide-service img { display: block; width: 100%; margin-block: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.guide-help { margin-top: var(--space-4); font-size: var(--text-sm); }
/* Links inside reading text: indigo, underlined. */
.guide-external-link, .guide p a:not(.text-link) { color: var(--color-brand); font-weight: var(--weight-bold); text-decoration-thickness: var(--border-width); text-underline-offset: var(--space-1); }
.guide-finish { display: grid; gap: var(--space-3); margin-top: var(--rhythm-section); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.guide-hero + .guide-finish { margin-top: var(--space-6); }
.guide-finish h3 { margin-top: var(--space-2); }
.notion-prompt { position: relative; margin-block: var(--space-4); padding: var(--space-4); padding-top: calc(var(--control-height-sm) + var(--space-3)); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.notion-prompt::before { content: "依頼文"; position: absolute; top: var(--space-3); left: var(--space-4); color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.copy-button { position: absolute; top: var(--space-2); right: var(--space-2); font-family: var(--font-sans); white-space: nowrap; }
.copy-button::before { content: ""; width: var(--icon-sm); height: var(--icon-sm); background: currentColor; -webkit-mask: var(--icon-copy) center / contain no-repeat; mask: var(--icon-copy) center / contain no-repeat; }
.notion-guide dt { margin-top: var(--rhythm-group); font-weight: var(--weight-bold); }
.notion-guide dd { margin: var(--space-2) 0 0; line-height: var(--leading-reading); }
.notion-guide .terms { margin: 0; }
.notion-guide .terms dt { margin-top: var(--space-3); font-weight: var(--weight-medium); }
.notion-guide .terms dt:first-child { margin-top: 0; }
.guide-finish h2 { font-size: var(--text-xl); }
.guide-finish h3, .guide-service h3, .notion-guide .guide-service dt { font-size: var(--text-md); font-weight: var(--weight-bold); }
.notion-guide .terms dd { margin-top: 0; color: var(--color-text-secondary); }

/* Admin */
.admin-shell { min-height: 100svh; }
.admin-utility { display: flex; justify-content: flex-end; width: min(var(--admin-max), 100% - 2 * var(--gutter)); margin-inline: auto; padding-top: var(--space-3); }
.logout-link { min-height: var(--control-height-sm); border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: var(--text-sm); }
.logout-link:hover { color: var(--color-text); }
.admin-main { width: min(var(--admin-max), 100% - 2 * var(--gutter)); margin-inline: auto; padding: var(--space-5) 0 var(--space-8); }
.admin-title .button { flex: none; white-space: nowrap; }
.breadcrumbs > * + *::before { content: "／"; display: inline-block; margin-right: var(--space-2); color: var(--color-text-muted); text-decoration: none; pointer-events: none; }
.admin-title { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-block: var(--space-5) var(--space-6); }
.admin-badge { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-surface-subtle); color: var(--color-text-secondary); font-size: var(--text-sm); }
.admin-section { margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.admin-section h2 { margin-bottom: var(--space-5); }
.admin-client-list { display: grid; }
.admin-client-row + .admin-client-row { border-top: var(--border-width) solid var(--color-border); }
.admin-row-action { flex: none; color: var(--color-brand); font-weight: var(--weight-bold); white-space: nowrap; }
.admin-row-action::after { content: "\00a0"; padding-left: var(--icon-sm); background: currentColor; -webkit-mask: var(--icon-arrow) right center / var(--icon-sm) no-repeat; mask: var(--icon-arrow) right center / var(--icon-sm) no-repeat; }
.admin-client-row { display: flex; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-4); text-decoration: none; }
.admin-client-row:hover strong { color: var(--color-brand); }
.admin-client-row strong, .admin-doc-row strong, .admin-doc-edit strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.admin-client-row small, .admin-doc-row small, .admin-doc-edit small { display: block; color: var(--color-text-secondary); font-size: var(--text-sm); }
.admin-client-row > span:last-child { align-self: center; color: var(--color-brand); font-size: var(--text-sm); }
.admin-form { display: grid; gap: var(--space-4); }
.admin-form > .button { justify-self: start; }
.field-grid { display: grid; gap: var(--space-4); }
.check-label { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); }
.check-label input { width: auto; min-height: auto; margin: 0; accent-color: var(--color-brand); }
.transcript-fields { display: grid; gap: var(--space-4); margin: var(--space-5) 0 0; padding: var(--space-5) 0 0; border: 0; border-top: var(--border-width) solid var(--color-border); }
.transcript-fields legend { float: left; width: 100%; margin-bottom: var(--space-4); padding: 0; font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; padding-block: var(--space-3) max(var(--space-3), env(safe-area-inset-bottom)); border-top: var(--border-width) solid var(--color-border); background: var(--color-surface); }
.create-panel { margin-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.create-panel summary { display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.create-panel summary::-webkit-details-marker { display: none; }
.create-panel summary::before { content: ""; width: var(--icon-md); height: var(--icon-md); background: currentColor; -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat; transition: transform var(--duration) var(--ease); }
.create-panel[open] summary::before { transform: rotate(90deg); }
.create-panel summary { min-height: var(--control-height); padding-top: var(--space-3); color: var(--color-brand); cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.create-panel .admin-form { padding-top: var(--space-3); }
.admin-doc-list { display: grid; }
.admin-doc-row { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.admin-doc-row a { align-self: center; color: var(--color-brand); font-size: var(--text-sm); }
/* Admin rows wrap onto two lines instead of scrolling sideways.
   "保存" comes first in the DOM so Enter in a field saves the row. */
.admin-action-row:last-child, .admin-doc-row:last-child, .admin-doc-edit:last-child { border-bottom: 0; }
.admin-action-row, .admin-doc-edit { display: grid; gap: var(--space-2); align-items: center; padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.admin-action-row input, .admin-action-row select, .admin-doc-edit input, .admin-doc-edit select { min-height: var(--control-height-sm); margin: 0; padding: var(--space-2); font-size: var(--text-sm); }
.admin-action-row button, .admin-doc-edit button { min-height: var(--control-height-sm); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; font-size: var(--text-sm); transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.admin-action-row button:hover, .admin-doc-edit button:hover { border-color: var(--color-text); }
.admin-action-row button:disabled { border-color: var(--color-border); background: transparent; color: var(--color-text-muted); cursor: not-allowed; }
.admin-action-row .danger-button { border-color: var(--color-danger); color: var(--color-danger); }
.admin-action-row .danger-button:hover { background: var(--color-danger-subtle); }
.admin-action-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--control-height) var(--control-height);
  grid-template-areas: "body body body body" "owner owner status status" "visibility visibility up down" "save save delete delete";
}
.admin-action-row .field-body { grid-area: body; }
.admin-action-row .field-owner { grid-area: owner; }
.admin-action-row .field-status { grid-area: status; }
.admin-action-row .field-visibility { grid-area: visibility; }
.admin-action-row .save-button { grid-area: save; }
.admin-action-row .up { grid-area: up; }
.admin-action-row .down { grid-area: down; }
.admin-action-row .danger-button { grid-area: delete; }
.admin-doc-edit { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info info" "url url" "visibility visibility" "save view"; }
.admin-doc-edit .doc-info { grid-area: info; }
.admin-doc-edit input { grid-area: url; }
.admin-doc-edit select { grid-area: visibility; }
.admin-doc-edit button { grid-area: save; }
.admin-doc-edit a { grid-area: view; padding: 0 var(--space-2); color: var(--color-brand); font-size: var(--text-sm); }

.simple-page { display: grid; justify-items: start; gap: var(--space-4); width: min(var(--content-max), 100% - 2 * var(--gutter)); margin: 15vh auto; }
.simple-page h1 { font-size: var(--text-2xl); }
.simple-page p { color: var(--color-text-secondary); }

@media (min-width: 768px) {
  .greeting { padding-top: var(--space-5); }
  .client-brand span { display: inline; }
  .next-lead { display: block; }
  .next-panel .event-actions, .page-hero .event-actions { display: flex; justify-self: start; }
  .dialogue { width: min(86%, var(--content-max)); }
  .session-row { grid-template-columns: minmax(0, 11em) minmax(0, 1fr) var(--icon-md); grid-template-areas: "date body icon"; }
  .session-row.is-compact { grid-template-columns: 7.5em minmax(0, 1fr) var(--icon-md); }
  /* optical: the 14px date sits on the 16px title's first line */
  .session-row .row-date { padding-top: 2px; }
  .guide-service { grid-template-columns: var(--space-8) minmax(0, 1fr); gap: var(--space-5); }
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .session-time-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .admin-section { padding: var(--space-6); }
  .inline-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .admin-action-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 7em) minmax(0, 7em) var(--control-height-sm) var(--control-height-sm) minmax(0, 4em) minmax(0, 4em);
    grid-template-areas: "body body body body body body body" "owner status visibility up down save delete";
  }
  .admin-doc-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 8em) minmax(0, 4em) auto; grid-template-areas: "info info info info" "url visibility save view"; }
}

@media (min-width: 1040px) {
  .service-hero { padding-top: calc(var(--space-8) + var(--space-5)); }
  .topics, .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .step:not(:last-child)::after { content: none; }
  .steps::before { content: ""; position: absolute; background: var(--color-border-strong); left: calc(var(--tile-size) / 2); right: 0; top: calc(var(--tile-size) / 2); bottom: auto; width: auto; height: var(--border-width); }
  .step { padding-left: 0; padding-top: calc(var(--tile-size) + var(--space-4)); }
  .step-tag { display: none; }
  .steps-scale { display: flex; justify-content: space-between; margin-bottom: calc(var(--space-2) - var(--space-5)); color: var(--color-text-secondary); font-size: var(--text-sm); letter-spacing: var(--tracking-label); }
  .next-panel { grid-template-columns: minmax(max-content, 1fr) minmax(0, 3fr); column-gap: var(--space-7); padding: var(--space-6) var(--space-7); }
  .next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-2); }
  .next-actions .event-actions { margin-top: 0; }
  .next-actions .link-row { margin-top: 0; }

  .layout-block { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--space-7); align-items: start; }
  .layout-rail { padding-top: var(--space-1); }
  /* The scroll box reaches past the text so hover and current-section fills are not clipped. */
  .page-nav { position: sticky; top: var(--space-6); max-height: calc(100vh - var(--space-8)); margin-left: calc(var(--space-3) * -1); padding-left: var(--space-3); overflow-y: auto; }
  .page-toc { display: block; }
  .page-toc-compact { display: none; }
  .page-toc-compact + .transcript-materials { margin-top: var(--rhythm-group); }
  .year-links { display: none; }
}

/* Phones: give reading text more of the narrow width. */
@media (max-width: 767px) {
  .list-row { padding: var(--space-4); }
  .list > li + li::before { left: var(--space-4); right: var(--space-4); }
  .recap, .next-panel { padding: var(--space-4); }
  .guide-service { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .session-row .row-title { display: block; }
  .row-no { margin-right: var(--space-2); }
  .row-no:empty { display: none; }
  .admin-title { flex-direction: column; align-items: flex-start; }
  .row-meta > .meta-date { display: block; }
  .row-meta > span + .meta-date::before { content: none; }
}

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