/* ---------- Night Desk design system ----------
   Every color, type size, radius and shadow in this file comes from these
   tokens (test/70-style-tokens.test.js enforces it). Each theme (View →
   Theme, see theme-helpers.js) is one token block: the bare :root is the
   default theme, Night Desk; :root[data-theme="<id>"] blocks redefine every
   color token for the others. The OS light/dark setting is not used.
   See docs/superpowers/specs/2026-09-28-night-desk-design-system-design.md
   and docs/superpowers/specs/2026-09-28-themes-menu-design.md. */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('assets/fonts/hanken-grotesk-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* Type */
  --font-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-manuscript: 'iA Writer Quattro', Charter, Georgia, 'Times New Roman', serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 15px;
  --text-xl: 20px;
  --text-2xl: 28px;
  --text-manuscript: 19px;

  /* Shape */
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Layout */
  --activity-width: 0px;

  /* Color: Night Desk (default theme; graphite + copper) */
  --desk: #1D1D1D;
  --page: #161616;
  --surface: #252525;
  --raised: #2C2C2C;
  --hover: color-mix(in srgb, var(--text) 8%, transparent);
  --sel: #2A2A2A;
  --line: #333333;
  --line-soft: #262626;
  --text: #E6E4E0;
  --text-2: #A9A6A1;
  --text-3: #77746F;
  --accent: #E08B5A;
  --accent-ink: #1C0F07;
  --accent-soft: rgba(224, 139, 90, 0.14);
  --ins: #F07D8C;
  --suggestion-comment-bg: rgba(224, 176, 90, 0.22);
  --del: #77746F;
  --danger: #F2857D;
  --ok: #6CC08E;
  --data-empty: #252525;
  --data-outline: #6CC0A8;
  --hit: rgba(224, 139, 90, 0.22);
  --hit-active: rgba(224, 139, 90, 0.45);
  --scrim: rgba(0, 0, 0, 0.55);
  --day-0: #7c4a12;
  --day-1: #2e5c30;
  --day-2: #1f4e79;
  --day-3: #6a2d43;
  --day-4: #4a3670;
  --day-5: #6b6318;
  --day-6: #1c5a63;
  --avatar-1: #8a6a1f;
  --avatar-2: #1f6b8f;
  --avatar-3: #7a4f8a;
  --avatar-4: #3f7a4a;
  --avatar-5: #9a4a3a;
  --avatar-ink: #FFFFFF;

  /* Elevation */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 24px 64px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent);
}

/* Day Desk: light, warm paper + lamp amber. */
:root[data-theme="day-desk"] {
  color-scheme: light;
  --desk: #EEECE7;
  --page: #F6F5F2;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --hover: color-mix(in srgb, var(--text) 6%, transparent);
  --sel: #E6E3DC;
  --line: #DEDBD4;
  --line-soft: #E7E5DF;
  --text: #1E1F21;
  --text-2: #5B5A57;
  --text-3: #8A8883;
  --accent: #9A6412;
  --accent-ink: #FFFFFF;
  --accent-soft: #F3E6CF;
  --ins: #B63A26;
  --suggestion-comment-bg: #F6E3B4;
  --del: #8A8883;
  --danger: #B3261E;
  --ok: #2F7D4F;
  --data-empty: #E6E3DC;
  --data-outline: #2F7D6B;
  --hit: #F6E3BD;
  --hit-active: #E9C57F;
  --scrim: rgba(30, 31, 33, 0.32);
  --day-0: #ffe0b2;
  --day-1: #c8e6c9;
  --day-2: #bbdefb;
  --day-3: #f8bbd0;
  --day-4: #d1c4e9;
  --day-5: #fff9c4;
  --day-6: #b2ebf2;
  --avatar-1: #8a6a1f;
  --avatar-2: #1f6b8f;
  --avatar-3: #7a4f8a;
  --avatar-4: #3f7a4a;
  --avatar-5: #9a4a3a;
  --avatar-ink: #FFFFFF;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 30px rgba(30, 31, 33, 0.12);
  --shadow-2: 0 20px 60px rgba(30, 31, 33, 0.18);
  --focus-ring: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent);
}

/* Moss: dark, green-grey + sage. */
:root[data-theme="moss"] {
  color-scheme: dark;
  --desk: #1B1D19;
  --page: #141612;
  --surface: #232620;
  --raised: #2A2E27;
  --hover: color-mix(in srgb, var(--text) 8%, transparent);
  --sel: #282B25;
  --line: #343830;
  --line-soft: #232621;
  --text: #E4E5DC;
  --text-2: #A6A99C;
  --text-3: #74786C;
  --accent: #A8C59A;
  --accent-ink: #111A0D;
  --accent-soft: rgba(168, 197, 154, 0.14);
  --ins: #F2856F;
  --suggestion-comment-bg: rgba(222, 190, 110, 0.22);
  --del: #74786C;
  --danger: #F2857D;
  --ok: #6CC08E;
  --data-empty: #232620;
  --data-outline: #6CC0A8;
  --hit: rgba(168, 197, 154, 0.22);
  --hit-active: rgba(168, 197, 154, 0.45);
  --scrim: rgba(0, 0, 0, 0.55);
  --day-0: #7c4a12;
  --day-1: #2e5c30;
  --day-2: #1f4e79;
  --day-3: #6a2d43;
  --day-4: #4a3670;
  --day-5: #6b6318;
  --day-6: #1c5a63;
  --avatar-1: #8a6a1f;
  --avatar-2: #1f6b8f;
  --avatar-3: #7a4f8a;
  --avatar-4: #3f7a4a;
  --avatar-5: #9a4a3a;
  --avatar-ink: #FFFFFF;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 24px 64px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent);
}

/* Classic: light, the pre-Night Desk palette (cream paper, beige rails,
   muted gold), value for value from the old --studio-* tokens. */
:root[data-theme="classic"] {
  color-scheme: light;
  --desk: #F3F0E8;
  --page: #FDFCF9;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --hover: color-mix(in srgb, var(--text) 6%, transparent);
  --sel: #E7E1D4;
  --line: #DDD6C8;
  --line-soft: #EBE6DA;
  --text: #2B2B2B;
  --text-2: #6B6558;
  --text-3: #8A8478;
  --accent: #8A6A1F;
  --accent-ink: #FFFFFF;
  --accent-soft: #F1E7CF;
  --ins: #A13B3B;
  --suggestion-comment-bg: #F3E2B0;
  --del: #8A8478;
  --danger: #A13B3B;
  --ok: #2F7D4F;
  --data-empty: #ECE9E2;
  --data-outline: #1F8F6B;
  --hit: #F6E7C4;
  --hit-active: #E6C77E;
  --scrim: rgba(43, 43, 43, 0.32);
  --day-0: #ffe0b2;
  --day-1: #c8e6c9;
  --day-2: #bbdefb;
  --day-3: #f8bbd0;
  --day-4: #d1c4e9;
  --day-5: #fff9c4;
  --day-6: #b2ebf2;
  --avatar-1: #8a6a1f;
  --avatar-2: #1f6b8f;
  --avatar-3: #7a4f8a;
  --avatar-4: #3f7a4a;
  --avatar-5: #9a4a3a;
  --avatar-ink: #FFFFFF;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 30px rgba(43, 43, 43, 0.12);
  --shadow-2: 0 20px 60px rgba(43, 43, 43, 0.18);
  --focus-ring: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent);
}

/* Classic Dark: the pre-Night Desk dark mode (warm charcoal, honey gold). */
:root[data-theme="classic-dark"] {
  color-scheme: dark;
  --desk: #262624;
  --page: #1E1E1E;
  --surface: #2C2B29;
  --raised: #2F2E2B;
  --hover: color-mix(in srgb, var(--text) 8%, transparent);
  --sel: #33322F;
  --line: #3A3A38;
  --line-soft: #302F2D;
  --text: #DDDDDD;
  --text-2: #BBBBBB;
  --text-3: #888888;
  --accent: #D9AE3E;
  --accent-ink: #1E1A0E;
  --accent-soft: rgba(217, 174, 62, 0.14);
  --ins: #E48A8A;
  --suggestion-comment-bg: rgba(217, 174, 62, 0.24);
  --del: #888888;
  --danger: #D97B7B;
  --ok: #6CC08E;
  --data-empty: #33322F;
  --data-outline: #35D6A4;
  --hit: rgba(217, 174, 62, 0.22);
  --hit-active: rgba(217, 174, 62, 0.45);
  --scrim: rgba(0, 0, 0, 0.55);
  --day-0: #7c4a12;
  --day-1: #2e5c30;
  --day-2: #1f4e79;
  --day-3: #6a2d43;
  --day-4: #4a3670;
  --day-5: #6b6318;
  --day-6: #1c5a63;
  --avatar-1: #8a6a1f;
  --avatar-2: #1f6b8f;
  --avatar-3: #7a4f8a;
  --avatar-4: #3f7a4a;
  --avatar-5: #9a4a3a;
  --avatar-ink: #FFFFFF;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 24px 64px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent);
}

* {
  box-sizing: border-box;
}

button, input, textarea, select {
  font-family: inherit;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  background: var(--desk);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

#app {
  position: relative;
  display: flex;
  height: 100%;
}

#main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--desk);
}

/* Panel buttons: Cast at the toolbar's left end, Outline and Sessions at its
   right end (see docs/superpowers/specs/2026-09-29-toolbar-panel-buttons-design.md). */
.activity-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

#activity-right {
  margin-left: auto;
}

/* Toolbar > Format: headings, lists, scene break, underline, alignment. */
#format-dropdown {
  position: relative;
}

#format-menu {
  min-width: 220px;
  box-shadow: var(--shadow-2);
}

#format-menu .format-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

#format-menu .format-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-3);
}

#format-menu .format-item:hover svg {
  color: var(--text);
}

#format-menu .format-item span {
  flex: 1;
}

#format-menu kbd {
  margin-left: 16px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
}

.format-menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}

/* Status bar > Highlight (writing by day/week/month); opens upward. */
#highlight-dropdown {
  position: relative;
  margin-left: 12px;
}

/* Keeps Highlight beside the counts; the right group takes the slack. */
#statusbar-right {
  margin-left: auto;
}

#highlight-menu-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  padding: 2px 8px;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
}

#highlight-menu-btn:hover {
  color: var(--text);
  background: var(--hover);
}

#highlight-menu-btn.active {
  color: var(--accent);
}

#highlight-menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.activity-btn {
  appearance: none;
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

#toolbar .activity-btn {
  padding: 0;
}

.activity-btn.hidden {
  display: none;
}

.activity-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}

.activity-btn:hover {
  background: var(--hover);
  color: var(--text);
}

.activity-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

#toolbar .activity-btn[aria-pressed="true"] {
  background: var(--sel);
  color: var(--text);
}


/* New posts, likes, or comments on the Sessions feed since it was last seen. */
.activity-btn.has-unread::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

#sidebar {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--desk);
  transition: width 0.2s ease;
}

#sidebar.open {
  width: var(--sidebar-width, 220px);
}

#entity-panel {
  width: var(--sidebar-width, 220px);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font-size: var(--text-md);
}

.entity-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 10px 8px 14px;
}

.entity-panel-cast {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-3);
}

/* The type filter (Board/List's neighbor here in outline mode aside) is a
   set-once-and-forget control, so its tabs render into a menu the funnel
   button in the search row toggles, instead of a permanent row of pills. */
.entity-panel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 10px;
}

.entity-panel-tabs.hidden {
  display: none;
}

.entity-panel-tab {
  appearance: none;
  font-family: inherit;
  font-size: var(--text-xs);
  padding: 4px 9px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.entity-panel-tab.active {
  background: var(--sel);
  color: var(--text);
}

.entity-panel-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 10px 10px;
}

.entity-panel-search {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text);
}

.entity-panel-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.entity-panel-filter-btn {
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.entity-panel-filter-btn:hover {
  background: var(--hover);
}

/* A dot marks an active (non-"All") type filter so the icon needs no label
   to say whether it's doing anything right now. */
.entity-panel-filter-btn.active::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.entity-panel-new-btn {
  appearance: none;
  font-family: inherit;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: 1;
}

.entity-panel-new-btn:hover {
  background: var(--hover);
}

.entity-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px 12px;
}

.entity-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-radius: var(--r);
  cursor: pointer;
}

.entity-panel-row:hover {
  background: var(--hover);
}

.entity-panel-row.selected {
  background: var(--sel);
}

.entity-panel-row-type {
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--text-3);
}

.entity-panel-empty {
  padding: 16px;
  color: var(--text-3);
  font-size: var(--text-sm);
}

.entity-panel-outline-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 10px 10px;
}

.outline-scope-toggle {
  display: flex;
  background: var(--sel);
  border: 0;
  border-radius: var(--r);
  padding: 2px;
}

.outline-view-btn,
.outline-scope-btn,
.outline-unfinished-btn {
  appearance: none;
  font-family: inherit;
  font-size: var(--text-xs);
  padding: 4px 9px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

/* Plain icon buttons, not a segmented tab pair — Board/List is a mode
   switch a writer glances at, not a choice between two labeled options. */
.outline-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--sel);
  border: 0;
  border-radius: var(--r);
  padding: 2px;
}

.outline-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: var(--r-sm);
}

.outline-view-btn:hover {
  background: var(--hover);
}

/* Visually hidden, but still readable by textContent lookups (and screen
   readers) — keeps "Board"/"List" as the button's accessible name. */
.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;
}

.outline-view-btn.active {
  background: var(--accent);
  color: var(--accent-ink);
}

.outline-scope-btn.active {
  background: var(--accent);
  color: var(--accent-ink);
}

.outline-unfinished-btn {
  border: 0;
  border-radius: var(--r);
}

.outline-unfinished-btn.active {
  background: var(--sel);
  color: var(--text);
}

.entity-panel-row-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--text-3);
}

.entity-panel-board {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.entity-panel-board-card {
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: none;
  padding: 10px;
}

.entity-panel-board-card.selected {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.entity-panel-board-card-name {
  font-weight: 600;
  margin-bottom: 6px;
  cursor: pointer;
}

.entity-panel-board-arc {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  font-size: var(--text-sm);
  border-top: 1px solid var(--line);
}

.entity-panel-board-arc:first-child {
  border-top: none;
}

.entity-panel-board-arc-text::before {
  content: '•';
  margin-right: 6px;
  color: var(--text-3);
}

.entity-panel-board-arc.done {
  color: var(--text-3);
  text-decoration: line-through;
}

.entity-panel-board-arc-text {
  flex: 1;
  min-width: 0;
}

.entity-panel-board-tag {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: var(--sel);
  color: var(--text-2);
  white-space: nowrap;
}

.entity-panel-board-arc[draggable='true'] {
  cursor: grab;
}

.entity-panel-board-arc.dragging {
  opacity: 0.5;
}

.entity-panel-board-unlink {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  background: transparent;
  padding: 0 2px;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
}

.entity-panel-board-unlink:hover {
  color: var(--text);
}

.entity-panel-board-arc-empty {
  color: var(--text-3);
  font-size: var(--text-sm);
}

.entity-desk-card .entity-panel-arc-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0;
}

.entity-desk-card .entity-panel-arc-item input[type="checkbox"] {
  margin-top: 6px;
}

.entity-desk-card .entity-panel-arc-item textarea {
  flex: 1 1 60px;
  min-width: 0;
  min-height: unset;
  max-height: 160px;
  overflow-y: auto;
  resize: none;
  field-sizing: content;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: inherit;
  line-height: 1.4;
  padding: 4px 7px;
}

.entity-desk-card .entity-panel-arc-item.done textarea {
  color: var(--text-3);
  text-decoration: line-through;
}

.entity-panel-arc-remove {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: var(--text-md);
  line-height: 1;
}

.entity-panel-arc-add {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}

.entity-panel-arc-add textarea {
  flex: 1 1 60px;
  min-width: 0;
  min-height: unset;
  max-height: 160px;
  overflow-y: auto;
  resize: none;
  field-sizing: content;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: inherit;
  line-height: 1.4;
  padding: 4px 7px;
}

.entity-panel-arc-add-btn {
  flex: none;
  font-size: var(--text-lg);
}

.entity-panel-delete-btn {
  color: var(--danger);
}

.entity-panel-error {
  color: var(--danger);
  font-size: var(--text-sm);
}

#right-sidebar {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--desk);
  transition: width 0.2s ease;
  display: flex;
  flex-direction: column;
}

#right-sidebar.open {
  width: var(--right-sidebar-width, 420px);
}

#right-sidebar-placeholder {
  padding: 22px 18px;
  width: 240px;
  font-size: var(--text-md);
  color: var(--text-3);
}

#right-sidebar-placeholder.hidden {
  display: none;
}

#app.sidebar-resizing #sidebar,
#app.sidebar-resizing #sidebar-resize,
#app.sidebar-resizing #entity-desk {
  transition: none;
}

/* Floats over the manuscript rather than pushing it — #main's width is
   never affected by the desk opening, resizing, or closing. */
#entity-desk {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--activity-width);
  width: var(--desk-width, 420px);
  display: flex;
  background: var(--raised);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  z-index: 15;
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, left 0.2s ease;
}

#app:has(#sidebar.open) #entity-desk {
  left: calc(var(--activity-width) + var(--sidebar-width, 220px));
}

#entity-desk.desk-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  #entity-desk {
    transition: left 0.2s ease;
  }
}

#entity-desk-content {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.entity-desk-header {
  padding: 28px 22px 22px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}

.entity-desk-type-label {
  margin-bottom: 10px;
  color: var(--text-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
}

.entity-desk-name {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-manuscript);
  font-size: var(--text-2xl);
  line-height: 1.15;
}

.entity-desk-name:focus,
.entity-desk-card input:focus,
.entity-desk-card textarea:focus,
.entity-desk-card select:focus {
  outline: none;
}

.entity-desk-type {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--text-sm);
}

.entity-desk-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  flex-direction: column;
  gap: 20px;
  padding: 22px;
}

.entity-desk-section-label {
  margin-bottom: 8px;
  color: var(--text-3);
  font-size: var(--text-sm);
  font-weight: 600;
}

.entity-desk-section-label--toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.entity-desk-section-label--toggle:hover {
  color: var(--text);
}

.entity-desk-section-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
}

.entity-desk-section-label--toggle[data-collapsed="true"] .entity-desk-section-chevron {
  transform: rotate(-90deg);
}

.entity-desk-card {
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: none;
}

.entity-desk-card input[type="text"],
.entity-desk-card textarea,
.entity-desk-card select {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-md);
}

.entity-desk-card textarea {
  min-height: 64px;
  max-height: 400px;
  overflow-y: auto;
  resize: none;
  field-sizing: content;
  font-family: var(--font-manuscript);
  line-height: 1.55;
}

.entity-mentions-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  padding-bottom: 4px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
}

.entity-mention-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 8px 10px;
  background: var(--surface);
  color: var(--text-3);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: 0 1px 0 var(--line-soft);
}

.entity-mention-row {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--r);
  background: transparent;
  color: var(--text);
  text-align: left;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.5;
  cursor: pointer;
}

.entity-mention-row:hover {
  background: var(--hover);
}

.entity-mention-context {
  color: var(--text-2);
}

.entity-mention-match {
  font-weight: 600;
  color: var(--text);
  background: var(--hit);
}

.entity-desk-footer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--desk);
}

.entity-desk-footer-spacer {
  flex: 1;
}

.entity-desk-footer button {
  appearance: none;
  padding: 8px 10px;
  border: none;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
}

.entity-desk-footer button:not(.entity-desk-save):hover {
  background: var(--hover);
}

.entity-desk-footer .entity-desk-save {
  padding: 8px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  transition: background 0.15s ease, color 0.15s ease;
}

.entity-desk-footer .entity-desk-save--saved {
  background: transparent;
  color: var(--ok);
}

.entity-desk-footer .entity-panel-delete-btn {
  color: var(--danger);
}

#entity-desk-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  z-index: 1;
}

#entity-desk-handle:hover {
  background: var(--hover);
}

#app.sidebar-resizing #right-sidebar,
#app.sidebar-resizing #right-sidebar-resize {
  transition: none;
}

/* Full-height resize seam on the panel's inner edge (only while open). */
#right-sidebar-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--activity-width) + var(--right-sidebar-width, 420px));
  width: 11px;
  transform: translateX(50%);
  cursor: ew-resize;
  z-index: 9;
  display: none;
}

#right-sidebar-resize::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: transparent;
  transition: width 0.12s ease, background 0.12s ease;
}

#right-sidebar-resize:hover::after {
  width: 2px;
  background: var(--text-3);
}

#app:has(#right-sidebar.open) #right-sidebar-resize {
  display: block;
}

/* Full-height resize seam on the Cast panel's inner edge (only while open). */
#sidebar-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--activity-width) + var(--sidebar-width, 220px));
  width: 11px;
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 9;
  display: none;
}

#sidebar-resize::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: transparent;
  transition: width 0.12s ease, background 0.12s ease;
}

#sidebar-resize:hover::after {
  width: 2px;
  background: var(--text-3);
}

#app:has(#sidebar.open) #sidebar-resize {
  display: block;
}

#toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--desk);
}

/* The book and chapter menus' rows keep their own styles (below), not the
   toolbar's. :where() keeps this at #toolbar button's specificity (an ID
   inside :not() would count), so #toolbar .activity-btn still wins. */
#toolbar button:where(:not(#book-switcher-menu button, #chapter-switcher-menu button)) {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r);
  padding: 4px 10px;
  font-size: var(--text-md);
  cursor: pointer;
  color: var(--text-2);
}

#toolbar button:where(:not(#book-switcher-menu button, #chapter-switcher-menu button)):hover {
  background: var(--hover);
  color: var(--text);
}

#toolbar button.active {
  background: var(--sel);
  color: var(--text);
}

#toolbar button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

#toolbar .divider {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 6px;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 130px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: var(--shadow-1);
}

.dropdown-menu.hidden {
  display: none;
}

.dropdown-item {
  appearance: none;
  font-family: inherit;
  border: none;
  background: transparent;
  text-align: left;
  border-radius: var(--r);
  padding: 6px 10px;
  font-size: var(--text-md);
  cursor: pointer;
  color: var(--text-2);
}

.dropdown-item:hover {
  background: var(--hover);
}

.dropdown-item.active {
  background: var(--sel);
  font-weight: 600;
}

.dropdown-item[data-mode="none"] {
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--r) var(--r) 0 0;
}

#selection-menu {
  min-width: 170px;
  max-width: 260px;
}

#selection-menu-top,
#selection-menu-rewrite-results {
  display: flex;
  flex-direction: column;
}

#selection-menu-top.hidden,
#selection-menu-rewrite-results.hidden,
#selection-rewrite-btn.hidden,
#selection-editor-btn.hidden,
#selection-line-edit-btn.hidden {
  display: none;
}

#selection-menu .dropdown-item:disabled {
  color: var(--text-3);
  cursor: default;
  background: transparent;
}

#selection-menu-back-btn {
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-3);
  font-weight: 600;
}

#rewrite-results-list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
}

.rewrite-item {
  appearance: none;
  font-family: inherit;
  border: none;
  background: transparent;
  text-align: left;
  border-radius: var(--r-sm);
  padding: 6px 9px;
  font-size: var(--text-md);
  line-height: 1.4;
  cursor: pointer;
  color: var(--text-2);
}

.rewrite-item:hover,
.rewrite-item:focus-visible {
  background: var(--hover);
}

.rewrite-empty,
.rewrite-loading {
  padding: 8px 9px;
  font-size: var(--text-sm);
  color: var(--text-3);
}

.rewrite-error {
  padding: 8px 9px;
  font-size: var(--text-sm);
  color: var(--danger);
}

.rewrite-error button {
  appearance: none;
  font-family: inherit;
  border: none;
  background: transparent;
  color: var(--danger);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
}

#editor-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* The manuscript is a sheet on the desk: rounded top corners, square
     bottom meeting the status bar. overflow stays visible: the entity
     popover, selection menu and find bar are absolutely positioned
     children and must not be clipped near the page edges. */
  margin-top: 8px;
  background: var(--page);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

#chapter-rail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 14px;
  z-index: 15;
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 0.25s ease;
}

#chapter-rail.visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #chapter-rail {
    transition: none;
  }
}

.chapter-rail-track {
  position: absolute;
  inset: 8px 0;
  pointer-events: auto;
}

.chapter-tick {
  position: absolute;
  right: 4px;
  transform: translateY(-50%);
  height: 2px;
  border: 0;
  padding: 0;
  border-radius: var(--r-sm);
  background: var(--line);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.12s, background 0.12s, width 0.12s;
}

/* Invisible, larger click/hover target so the thin bar is easy to hit
   without fattening the visible line. */
.chapter-tick::before {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -9px;
  right: -3px;
}

.chapter-tick.lv1 {
  width: 12px;
  height: 3px;
  opacity: 0.7;
}

.chapter-tick.lv2 {
  width: 8px;
}

.chapter-tick:hover {
  opacity: 1;
  background: var(--text-3);
}

.chapter-tick.current {
  background: var(--accent);
  opacity: 1;
  width: 13px;
}

.chapter-rail-flag {
  position: absolute;
  right: 20px;
  transform: translateY(-50%);
  max-width: 260px;
  padding: 4px 9px;
  border-radius: var(--r);
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: var(--text-sm);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-1);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.chapter-rail-flag-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.chapter-rail-flag-count {
  flex: 0 0 auto;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.chapter-rail-flag.hidden {
  display: none;
}

.chapter-rail-thumb {
  position: absolute;
  right: 3px;
  width: 5px;
  min-height: 24px;
  border-radius: var(--r-sm);
  background: var(--line);
  cursor: grab;
  pointer-events: auto;
}

.chapter-rail-thumb:hover {
  background: var(--text-3);
}

#find-bar {
  position: absolute;
  top: 12px;
  right: 20px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: var(--shadow-1);
}

#find-bar.hidden {
  display: none;
}

#find-main-row,
#find-replace-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Lines the Replace field up under the Find field (past the toggle). */
#find-replace-row {
  padding-left: 28px;
}

#find-replace-row.hidden {
  display: none;
}

#find-replace-input {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-size: var(--text-md);
  width: 160px;
  outline: none;
  background: var(--surface);
  color: var(--text);
}

#find-replace-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

#find-replace-toggle {
  transition: transform 0.12s ease;
}

#find-replace-toggle[aria-expanded="true"] {
  transform: rotate(90deg);
}

#find-bar .find-text-btn {
  width: auto;
  padding: 0 8px;
  font-size: var(--text-sm);
  border-color: var(--line);
}

#find-bar .find-option-btn {
  width: auto;
  min-width: 22px;
  padding: 0 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-3);
}

#find-bar .find-option-btn[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

/* "Also in" — the project's other books with matches. */
#find-other-books {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  max-width: 330px;
  padding-left: 28px;
  font-size: var(--text-xs);
  color: var(--text-3);
}

#find-other-books.hidden {
  display: none;
}

#find-bar .find-book-btn {
  width: auto;
  height: auto;
  padding: 2px 8px;
  font-size: var(--text-xs);
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

#find-bar .find-text-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

#find-input {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-size: var(--text-md);
  width: 160px;
  outline: none;
  background: var(--surface);
  color: var(--text);
}

#find-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

#find-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--text-3);
  min-width: 52px;
  text-align: center;
}

#find-bar button {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-sm);
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  color: var(--text-2);
}

#find-bar button:hover {
  background: var(--hover);
  border-color: var(--line);
}

.search-hit {
  background: var(--hit);
  color: inherit;
  border-radius: var(--r-sm);
}

.search-hit-active {
  background: var(--hit-active);
}

.mention-flash {
  background: var(--hit-active);
  color: inherit;
  border-radius: var(--r-sm);
}

.written-on-highlight {
  border-radius: var(--r-sm);
}

.written-on-day-0 { background-color: var(--day-0); }
.written-on-day-1 { background-color: var(--day-1); }
.written-on-day-2 { background-color: var(--day-2); }
.written-on-day-3 { background-color: var(--day-3); }
.written-on-day-4 { background-color: var(--day-4); }
.written-on-day-5 { background-color: var(--day-5); }
.written-on-day-6 { background-color: var(--day-6); }

#day-labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.day-label {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  color: var(--text);
}

.entity-mention {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 4px;
  cursor: pointer;
}

#entity-popover,
#outline-entity-popover {
  position: absolute;
  z-index: 40;
  max-width: 240px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--raised);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.4;
  box-shadow: var(--shadow-1);
  pointer-events: none;
}

#entity-popover.hidden,
#outline-entity-popover.hidden {
  display: none;
}

.entity-popover-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.entity-popover-image {
  display: block;
  max-width: 100%;
  max-height: 100px;
  border-radius: var(--r-sm);
  margin-bottom: 4px;
}

.entity-popover-arc {
  margin-top: 4px;
  opacity: 0.8;
  color: var(--text-2);
  font-size: var(--text-xs);
}

#scroll-bottom-btn {
  appearance: none;
  position: absolute;
  right: 24px;
  bottom: 20px;
  z-index: 20;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--raised);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-1);
}

#scroll-bottom-btn:hover {
  background: var(--hover);
  color: var(--text);
}

#scroll-bottom-btn.hidden {
  display: none;
}

#editor {
  position: relative;
  flex: 1;
  overflow-y: scroll;
  overscroll-behavior: contain;
  padding: 60px max(40px, calc(50% - 450px)) 40vh;
  font-family: var(--font-manuscript);
  font-size: var(--text-manuscript);
  line-height: 1.7;
  color: var(--text);
  outline: none;
  width: 100%;
  scrollbar-width: none;
}

#editor.hidden {
  display: none;
}

#mode-toggle {
  display: none;
}

#outline-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: var(--right-sidebar-width, 420px);
  padding: 14px;
  box-sizing: border-box;
  gap: 12px;
  background: var(--desk);
}

#outline-panel.hidden {
  display: none;
}

#sessions-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: var(--right-sidebar-width, 420px);
  overflow-y: auto;
  padding: 14px;
  box-sizing: border-box;
  background: var(--desk);
}

#sessions-panel.hidden {
  display: none;
}

#sessions-panel-header {
  flex-shrink: 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#sessions-panel-user {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

#sessions-panel-user.hidden {
  display: none;
}

/* Log out is rarely used, so it lives in a small menu behind the
   username rather than as a standing button in the header. */
#sessions-user-menu-btn {
  appearance: none;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: var(--r);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

#sessions-user-menu-btn:hover,
#sessions-user-menu-btn[aria-expanded='true'] {
  background: var(--hover);
  color: var(--text);
}

#sessions-user-menu-btn svg {
  flex-shrink: 0;
}

#sessions-panel-username {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sessions-user-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 120px;
  padding: 4px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

#sessions-user-menu.hidden {
  display: none;
}

#sessions-logout-btn {
  appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
}

#sessions-logout-btn:hover {
  background: var(--hover);
}

#sessions-share-btn.hidden {
  display: none;
}

#sessions-panel-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#sessions-panel-title {
  font-family: var(--font-manuscript);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text);
}

#sessions-share-btn {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r);
  padding: 7px 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  flex-shrink: 0;
  transition: opacity 0.12s ease;
}

#sessions-share-btn:hover {
  opacity: 0.88;
}

#sessions-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#sessions-feed.hidden {
  display: none;
}

#sessions-not-configured {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 14px;
}

#sessions-not-configured.hidden {
  display: none;
}

#sessions-auth-card {
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 14px;
}

#sessions-auth-title {
  margin: 0;
  font-family: var(--font-manuscript);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text);
}

#sessions-auth-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#sessions-auth-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-md);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

#sessions-auth-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

#sessions-auth-form input.hidden {
  display: none;
}

#sessions-auth-error {
  color: var(--danger);
  font-size: var(--text-sm);
  text-align: left;
}

#sessions-auth-notice {
  color: var(--text-2);
  font-size: var(--text-sm);
  text-align: left;
}

#sessions-auth-submit-btn {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r);
  padding: 9px 12px;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--text-md);
  cursor: pointer;
  transition: opacity 0.12s ease;
}

#sessions-auth-submit-btn:hover {
  opacity: 0.88;
}

#sessions-auth-submit-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

#sessions-auth-toggle-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
}

#sessions-auth-toggle-btn span {
  color: var(--text-2);
  font-weight: 600;
  text-decoration: underline;
}

#sessions-auth-toggle-btn:hover span {
  color: var(--text);
}

/* Session post cards (the "Cards" layout from the sessions feed
   explorations): avatar + author + big word total, a prose/outline split
   bar, description, excerpt as a quote, and a like/comment action row. */
.sessions-feed-item {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: none;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sessions-feed-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sessions-feed-item-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--avatar-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.sessions-feed-item-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.sessions-feed-item-author {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* What's new on this card since the feed was last seen ("New", "+1 like"). */
.sessions-feed-item-new-badge {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  vertical-align: 1px;
  color: var(--accent-ink);
  background: var(--accent);
}
.sessions-feed-item-meta {
  font-size: var(--text-xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sessions-feed-item-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.sessions-feed-item-total-num {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.sessions-feed-item-total-unit {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-3);
}

.sessions-feed-item-split {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sessions-feed-item-split:empty {
  display: none;
}

.sessions-feed-item-bar {
  display: flex;
  height: 4px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--data-empty);
}

.sessions-feed-item-bar-prose {
  background: var(--accent);
}

.sessions-feed-item-bar-outline {
  background: var(--data-outline);
}

.sessions-feed-item-legend {
  display: flex;
  gap: 12px;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

.sessions-feed-item-legend-prose,
.sessions-feed-item-legend-outline {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sessions-feed-item-legend-prose::before,
.sessions-feed-item-legend-outline::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.sessions-feed-item-legend-prose::before {
  background: var(--accent);
}

.sessions-feed-item-legend-outline::before {
  background: var(--data-outline);
}

.sessions-feed-item-description {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--text);
}

.sessions-feed-item-excerpt {
  position: relative;
  margin: 0;
  padding: 10px 12px 10px 28px;
  background: var(--desk);
  border-radius: var(--r);
  font-family: var(--font-manuscript);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre-wrap;
}

.sessions-feed-item-excerpt::before {
  content: '\201C';
  position: absolute;
  left: 9px;
  top: 2px;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--accent);
}

.sessions-feed-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  border-top: 1px solid var(--line-soft);
  padding-top: 4px;
  margin: 0 -6px;
}

.sessions-feed-item-like-btn,
.sessions-feed-item-comments-toggle,
.sessions-feed-item-delete-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: var(--r);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.sessions-feed-item-like-btn:hover,
.sessions-feed-item-comments-toggle:hover {
  background: var(--hover);
  color: var(--text);
}

.sessions-feed-item-like-btn.liked {
  color: var(--danger);
}

.sessions-feed-item-like-btn.liked svg path {
  fill: currentColor;
}

.sessions-feed-item-like-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.sessions-feed-item-delete-btn {
  margin-left: auto;
  opacity: 0;
}

.sessions-feed-item:hover .sessions-feed-item-delete-btn,
.sessions-feed-item-delete-btn:focus-visible {
  opacity: 1;
}

.sessions-feed-item-delete-btn:hover {
  color: var(--danger);
  background: var(--hover);
}

.sessions-feed-item-comments {
  margin: 0 0 8px;
  padding-left: 10px;
  border-left: 1px dashed var(--line);
}

.sessions-feed-item-comments.hidden {
  display: none;
}

.sessions-feed-item-comment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.sessions-feed-item-comment {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--text-sm);
}

.sessions-feed-item-comment.pending {
  opacity: 0.6;
}

.sessions-feed-item-comment-body {
  color: var(--text);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.sessions-feed-item-comment-time {
  font-size: var(--text-xs);
  color: var(--text-3);
  flex-shrink: 0;
}

.sessions-feed-item-comment-delete {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font-size: var(--text-md);
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}

.sessions-feed-item-comment-delete:hover {
  color: var(--danger);
}

.sessions-feed-item-comment-form {
  display: flex;
  gap: 6px;
}

.sessions-feed-item-comment-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
}

.sessions-feed-item-comment-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.sessions-feed-item-comment-add-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--hover);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
}

.sessions-feed-item-comment-add-btn:hover {
  background: var(--sel);
}

#sessions-feed-empty {
  font-size: var(--text-md);
  color: var(--text-3);
  padding: 4px 2px;
}

/* Compose drawer: pinned to the right edge instead of centered, full
   height. Reuses .modal/.modal-backdrop's dimming/positioning base —
   this modifier only changes where the panel sits and how tall it is.
   Compounded onto .modal (".modal.modal-drawer") so these overrides win
   regardless of the two rules' order in the stylesheet — this block sits
   above the generic .modal rule defined later in this file. */
.modal.modal-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 92vw);
  height: 100%;
  max-height: none;
  border-radius: 0;
  box-shadow: var(--shadow-2);
}

/* Compounded onto .modal, same reasoning as .modal.modal-drawer above:
   this rule sits earlier in the file than the generic .modal rule it
   needs to override (padding: 0 vs .modal's padding: 20px). */
.modal.sessions-compose-modal {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.sessions-compose-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px dashed var(--line);
  flex-shrink: 0;
}

#sessions-compose-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 4px;
}

.sessions-compose-header h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.sessions-compose-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 4px;
}

#sessions-compose-deltas {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
  margin-bottom: 16px;
}

#sessions-compose-deltas td {
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
}

#sessions-compose-deltas td:first-child {
  color: var(--text-3);
}

#sessions-compose-deltas td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

#sessions-compose-description {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  resize: vertical;
  font-family: inherit;
  font-size: var(--text-md);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  margin-bottom: 16px;
}

#sessions-compose-description:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

#sessions-compose-excerpt-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 6px;
}

#sessions-compose-excerpt-preview {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r);
  font-family: var(--font-manuscript);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  min-height: 140px;
  max-height: 55vh;
  overflow-y: auto;
  cursor: text;
}

#sessions-compose-excerpt-preview.hidden {
  display: none;
}

#sessions-compose-excerpt-preview:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 1px;
}

/* The picked range is rendered as a real, persistent mark — not native
   text selection — specifically so it survives focus moving elsewhere
   (e.g. clicking into the description field to type a title). Native
   ::selection styling was tried first and dropped: a browser's own
   selection is tied to document focus/the global Selection object, so it
   visually (and in older builds, functionally) cleared the moment focus
   left this box — see the design doc's revision note. */
#sessions-compose-excerpt-preview mark {
  background: var(--hit);
  color: inherit;
  border-radius: var(--r-sm);
  padding: 0 1px;
}

#sessions-compose-excerpt-empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-3);
  font-style: italic;
}

#sessions-compose-excerpt-empty.hidden {
  display: none;
}

.sessions-compose-excerpt-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  min-height: 16px;
}

#sessions-compose-clear-excerpt-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#sessions-compose-clear-excerpt-btn:hover {
  color: var(--text);
}

#sessions-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px dashed var(--line);
  flex-shrink: 0;
}

#sessions-compose-cancel-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 7px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
}

#sessions-compose-cancel-btn:hover {
  background: var(--hover);
}

#sessions-compose-post-btn {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r);
  padding: 7px 16px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: opacity 0.12s ease;
}

#sessions-compose-post-btn:hover {
  opacity: 0.88;
}

/* Same header as the Sessions panel: serif title, mono count, controls right. */
#outline-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}

#outline-panel-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#outline-panel-title {
  font-family: var(--font-manuscript);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text);
}

.outline-switcher {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.outline-switcher-title,
.outline-switcher-more {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-size: var(--text-md);
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
}

.outline-switcher-title {
  min-width: 0;
  max-width: 180px;
  text-align: left;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outline-switcher-more {
  flex-shrink: 0;
  padding: 4px 10px;
}

.outline-switcher-list,
.outline-switcher-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 100%;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.outline-switcher-list.hidden,
.outline-switcher-menu.hidden {
  display: none;
}

.outline-switcher-menu {
  left: auto;
  right: 0;
  min-width: 140px;
}

.outline-switcher-option,
.outline-switcher-menu button {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 10px;
  font-size: var(--text-md);
  cursor: pointer;
  color: var(--text-2);
  font-family: inherit;
}

.outline-switcher-option.active,
.outline-switcher-option:hover,
.outline-switcher-menu button:hover {
  background: var(--sel);
}

.outline-switcher-new {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--r);
}

#outline-editor.hidden,
#outline-empty.hidden {
  display: none;
}

#outline-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 18px;
  text-align: center;
  background: var(--surface);
  border-radius: var(--r-lg);
  color: var(--text-2);
}

#outline-empty p {
  margin: 0;
  font-size: var(--text-md);
}

#outline-empty-create {
  appearance: none;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--r);
  padding: 6px 12px;
  font-size: var(--text-md);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

#outline-empty-create:hover {
  opacity: 0.9;
}

/* A card on the desk (the lighter surface Sessions posts use), not a second
   manuscript page: headings are quiet labels, body text steps back to text-2. */
#outline-editor {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 18px 40vh;
  font-family: var(--font-manuscript);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text-2);
  outline: none;
  width: 100%;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-sizing: border-box;
}

#outline-editor h1 {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0.9em 0 0.4em;
}

#outline-editor h2 {
  font-size: 1.15em;
  color: var(--text);
  margin: 1.1em 0 0.25em;
}

#outline-editor h3 {
  font-size: 1.05em;
  color: var(--text);
  margin: 0.9em 0 0.25em;
}

#outline-editor > :first-child {
  margin-top: 0;
}

#outline-editor p {
  margin: 0;
}

#statusbar-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  margin: -4px -8px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}

#statusbar-left:hover,
#statusbar-left:focus-visible {
  color: var(--text);
  outline: none;
  border-color: var(--line);
  background: var(--hover);
}

#writing-pace {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: inherit;
}

#writing-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* id-level so it beats the id-level base rule above (.hidden alone would lose) */
#writing-streak.hidden { display: none; }
#writing-streak .streak-flame {
  width: 12px;
  height: 12px;
  fill: var(--accent);
  flex-shrink: 0;
}
#writing-streak .streak-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); }
#writing-streak .streak-cap { color: var(--accent); }

#savestate.save-failed {
  color: var(--danger);
  font-weight: 600;
  cursor: help;
}

#wordcount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: inherit;
}

.modal.analytics-modal {
  width: min(760px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.analytics-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}

.analytics-modal-header h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.modal-close {
  appearance: none;
  border: none;
  background: transparent;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

.modal-close:hover {
  background: var(--hover);
  color: var(--text);
}

.analytics-modal-body {
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.analytics-card {
  border: 0;
  border-radius: var(--r-lg);
  padding: 16px 20px;
  background: var(--surface);
  box-shadow: none;
}

.analytics-card h3 {
  margin: 0 0 12px;
  font-size: var(--text-sm);
  color: var(--text-3);
  font-weight: 600;
}

.analytics-goal-card {
  padding: 18px 20px;
}

.analytics-goal-figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.analytics-goal-total {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
}

.analytics-goal-of {
  font-size: var(--text-md);
  color: var(--text-3);
}

.analytics-goal-pill {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

.analytics-goal-pill.hidden {
  display: none;
}

.analytics-goal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.analytics-goal-row label {
  font-size: var(--text-md);
  color: var(--text-2);
}

.analytics-goal-row input {
  /* Layout only — border/padding/background/color come from the shared
     .modal input rule (light + dark variants) below, so this doesn't need
     its own (theme-unaware) copies of those values. */
  flex: 1;
  min-width: 0;
  font-family: inherit;
}

.analytics-goal-row button {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: var(--text-md);
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  white-space: nowrap;
}

.analytics-goal-row button:hover {
  background: var(--sel);
}

.analytics-progress-track {
  height: 10px;
  border-radius: var(--r-sm);
  background: var(--sel);
  overflow: hidden;
}

.analytics-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: var(--r-sm);
  transition: width 0.2s ease;
}

.analytics-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.analytics-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--desk);
}

.analytics-stat-pair {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.analytics-stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.analytics-stat-value.prose { color: var(--accent); }
.analytics-stat-value.outline { color: var(--data-outline); }

.analytics-stat-tag {
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  color: var(--text-3);
}

.analytics-stat-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--text-3);
}

.analytics-stat-avg {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.analytics-projection-lead {
  margin: 0 0 12px;
  font-size: var(--text-md);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Two aligned rows: label · input · result. */
.analytics-projection-grid {
  display: grid;
  /* Fixed middle column: the pace note changes length, the results don't move. */
  grid-template-columns: auto 330px 1fr;
  align-items: center;
  gap: 10px 12px;
}

.analytics-projection-grid label {
  font-size: var(--text-md);
  color: var(--text-2);
}

.analytics-projection-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--text-3);
  white-space: nowrap;
}

.analytics-projection-field input[type="number"] {
  width: 72px;
}

.analytics-pace-note {
  font-size: var(--text-xs);
  color: var(--text-3);
}

.analytics-pace-note::before {
  content: '\00b7';
  margin-right: 8px;
}

.analytics-pace-note:empty {
  display: none;
}

.analytics-pace-reset {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.analytics-projection-field input[type="date"] {
  width: 180px;
}

.analytics-projection-output {
  margin: 0;
  font-size: var(--text-md);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* --- Calendar heatmap --- */
.analytics-heat-wrap {
  overflow-x: auto;
  padding-bottom: 4px;
}

.analytics-heat-months {
  display: flex;
  gap: 3px;
  color: var(--text-3);
  font-size: var(--text-xs);
  margin-bottom: 4px;
  padding-left: 20px;
}

.analytics-heat-grid-area {
  display: flex;
  gap: 8px;
}

.analytics-heat-daylabels {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  gap: 3px;
  color: var(--text-3);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.analytics-heat-cols {
  display: flex;
  gap: 3px;
}

.analytics-heat-col {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  gap: 3px;
}

.analytics-heat-cell {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: var(--r-sm);
  background: var(--data-empty);
}

.analytics-heat-cell.future {
  background: transparent;
}

/* Green corner marks a day that also had outline words (incl. outline-only
   days, where the manuscript cell is empty). */
.analytics-heat-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  background: var(--data-outline);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  border-top-right-radius: var(--r-sm);
}

.analytics-heat-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: var(--text-xs);
  margin-top: 12px;
}

.analytics-heat-legend .analytics-heat-cell {
  width: 11px;
  height: 11px;
}

.analytics-heat-legend .analytics-heat-cell[data-level="0"] { background: var(--data-empty); }
.analytics-heat-legend .analytics-heat-cell[data-level="1"] { background: color-mix(in srgb, var(--accent) 25%, var(--data-empty)); }
.analytics-heat-legend .analytics-heat-cell[data-level="2"] { background: color-mix(in srgb, var(--accent) 50%, var(--data-empty)); }
.analytics-heat-legend .analytics-heat-cell[data-level="3"] { background: color-mix(in srgb, var(--accent) 75%, var(--data-empty)); }
.analytics-heat-legend .analytics-heat-cell[data-level="4"] { background: var(--accent); }

.analytics-heat-tip {
  position: fixed;
  pointer-events: none;
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: var(--text-xs);
  padding: 5px 8px;
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  transform: translate(-50%, -130%);
  white-space: nowrap;
  z-index: 200;
}

.analytics-heat-tip.hidden {
  display: none;
}

#outline-editor .outline-drop-section {
  border-radius: var(--r-sm);
  background: var(--sel);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.outline-plan-arcs {
  margin: 4px 0 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.outline-plan-arc {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--sel);
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
}

.outline-plan-arc.done {
  opacity: 0.65;
}

.outline-plan-arc.done .outline-plan-arc-text {
  text-decoration: line-through;
}

#outline-switcher {
  display: none;
}

#outline-select {
  display: none;
}

#editor::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#editor h1 {
  font-size: 1.8em;
  margin: 0.6em 0 0.3em;
}

#editor h2 {
  font-size: 1.4em;
  margin: 0.6em 0 0.3em;
}

#editor p {
  margin: 0;
}

/* A scene break (Tiptap's horizontal rule: the toolbar's \2042, or ***
   / --- typed on an empty line) reads as a centered * * *, the way it
   prints, not as a ruled line. */
#editor hr {
  border: none;
  margin: 1em 0;
  text-align: center;
  color: var(--text-2);
  cursor: default;
}

#editor hr::after {
  content: '*\2003*\2003*';
}

#editor hr.ProseMirror-selectednode {
  outline: none;
  color: var(--accent);
}

#editor ul,
#editor ol,
#outline-editor ul,
#outline-editor ol {
  padding-left: 1em;
  margin: 0;
}

#editor li ul,
#editor li ol,
#outline-editor li ul,
#outline-editor li ol {
  padding-left: 1.75em;
}

#editor li p,
#outline-editor li p {
  margin: 0;
}

#editor.is-empty::before {
  content: 'Start writing…';
  color: var(--text-3);
  pointer-events: none;
  position: absolute;
}

#statusbar {
  display: flex;
  justify-content: space-between;
  padding: 6px 16px;
  font-size: var(--text-sm);
  color: var(--text-2);
  background: var(--desk);
}

/* Focus mode */
body.focus-mode #toolbar,
body.focus-mode #statusbar {
  display: none;
}

body.focus-mode #editor {
  padding-top: 12vh;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
}

.modal-backdrop.hidden {
  display: none;
}

.modal {
  width: 320px;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

.modal h2 {
  margin: 0 0 12px;
  font-size: var(--text-lg);
}

.modal label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.modal input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--text-md);
  color: var(--text);
}

.modal input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* Settings → AI model (ai-models.js), styled like the key inputs. */
.modal select {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 28px 6px 8px; /* room for the native arrow */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--text);
}

.modal select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.modal input + label,
.modal select + label,
.settings-note + label {
  margin-top: 12px;
}

.settings-note {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: var(--text-xs);
}

.settings-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.settings-link::after {
  content: ' \2197';
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.modal-actions button {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: var(--text-md);
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
}

.modal-actions button:hover {
  background: var(--hover);
}

.modal-actions button:last-child {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
}

.modal-actions button:last-child:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--text));
}

/* This codebase scopes `.hidden` per-element rather than using one global
   utility class (see e.g. `#find-bar.hidden`) — match that pattern here. */
#focus-duration-stepper.hidden,
#focus-start-stop-btn.hidden,
#focus-running-indicator.hidden,
#focus-error.hidden,
#focus-controls.hidden,
#focus-settings-section.hidden {
  display: none;
}

#statusbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

#focus-controls {
  display: flex;
  align-items: center;
  position: relative;
}

#focus-duration-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
  max-width: 0;
  margin-right: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: max-width 0.25s ease, margin-right 0.25s ease, opacity 0.2s ease;
}

/* Hovering the button counts as hovering the container, so this stays
   expanded while the pointer moves off the button onto the stepper itself.
   margin-right (not a container `gap`) makes the space collapse along with
   the width instead of leaving a gap-shaped gap when hidden. */
#focus-controls:hover #focus-duration-stepper {
  max-width: 100px;
  margin-right: 4px;
  opacity: 1;
  pointer-events: auto;
}

#focus-minutes-decrement,
#focus-minutes-increment {
  appearance: none;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-size: var(--text-lg);
  font-weight: 400;
  color: color-mix(in srgb, var(--text-2) 55%, transparent);
  cursor: pointer;
  background: transparent;
  transition: background-color 0.12s ease, color 0.12s ease;
}

#focus-minutes-decrement:hover,
#focus-minutes-increment:hover {
  background: var(--hover);
  color: var(--text);
}

#focus-minutes-value {
  min-width: 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
}

#focus-error {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 220px;
  font-size: var(--text-sm);
  color: var(--danger);
  text-align: right;
}

#focus-app-error {
  font-size: var(--text-sm);
  color: var(--danger);
  margin-top: 8px;
}

#focus-app-error.hidden {
  display: none;
}

.settings-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.settings-section h3 {
  margin: 0 0 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-3);
}

.focus-immediate-note {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-bottom: 8px;
}

#focus-app-search {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--text-md);
  color: var(--text);
}

#focus-app-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

#focus-app-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: 10px;
}

.focus-app-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: var(--text-md);
}

/* Overrides the generic `.modal input { width: 100%; ... }` rule (meant for
   the API key text field), which otherwise stretches this checkbox to fill
   the row and leaves no space for .focus-app-name. `.modal input` is a
   class+type selector (specificity 0,1,1); `.focus-app-row` bumps this to
   0,2,0 so it reliably wins regardless of source order. */
.focus-app-row .focus-app-checkbox {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
}

.focus-app-row:not(:last-child) {
  border-bottom: 1px solid var(--line-soft);
}

.focus-app-row:hover {
  background: var(--hover);
}

.focus-favorite-btn {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: var(--text-md);
  padding: 0;
  width: 16px;
}

.focus-favorite-btn.favorited {
  color: var(--accent);
}

.focus-app-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#focus-start-stop-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: var(--r);
  padding: 2px 10px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  color: var(--accent-ink);
  background: var(--accent);
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

#focus-start-stop-btn svg {
  flex: 0 0 auto;
}

#focus-start-stop-btn:hover {
  opacity: 0.9;
}

#focus-start-stop-btn.armed {
  color: var(--text);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.focus-app-checkbox:disabled,
.focus-favorite-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#focus-running-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  color: var(--accent);
  background: var(--accent-soft);
}

.focus-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
  animation: focus-pulse 1.6s ease-in-out infinite;
}

#focus-countdown {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--text-sm);
  color: inherit;
}

@keyframes focus-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.entity-quick-search-modal {
  width: 480px;
  max-width: 90vw;
  padding: 0;
  overflow: hidden;
  align-self: flex-start;
  margin-top: 14vh;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

#entity-quick-search-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-lg);
  background: var(--raised);
  color: var(--text);
}

#entity-quick-search-input:focus {
  outline: none;
}

#entity-quick-search-results {
  max-height: 50vh;
  overflow-y: auto;
}

.entity-quick-search-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 16px;
  cursor: pointer;
  color: var(--text);
}

.entity-quick-search-row.active,
.entity-quick-search-row:hover {
  background: var(--sel);
}

.entity-quick-search-row-name {
  font-size: var(--text-md);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-quick-search-row-type {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-3);
}

.entity-quick-search-empty {
  padding: 16px;
  font-size: var(--text-md);
  color: var(--text-2);
}

/* In-app auto-update card (shown when a new version has downloaded). */
.update-toast {
  position: fixed;
  right: 20px;
  bottom: 44px;
  z-index: 1000;
  width: 320px;
  max-width: calc(100vw - 40px);
  padding: 16px;
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  font-size: var(--text-md);
  animation: update-toast-in 0.22s ease-out;
}

.update-toast.hidden {
  display: none;
}

@keyframes update-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.update-toast-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.update-toast-icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--accent);
}

.update-toast-title {
  font-size: var(--text-lg);
  font-weight: 600;
}

.update-toast-note {
  margin-top: 3px;
  color: var(--text-2);
  line-height: 1.45;
}

.update-toast-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.update-toast-restart {
  padding: 6px 14px;
  border: none;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
}

.update-toast-restart:hover {
  filter: brightness(1.08);
}

.update-toast-restart:disabled {
  opacity: 0.6;
  cursor: default;
}

.update-toast-dismiss {
  padding: 6px 10px;
  border: none;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-2);
  font-size: var(--text-md);
  font-weight: 500;
  cursor: pointer;
}

.update-toast-dismiss:hover {
  background: var(--hover);
  color: var(--text);
}

/* Shown from first paint, purely via HTML/CSS, before renderer.js has
   finished loading and running — the editor/entity-panel/outline-mode setup
   in that bundle can take a couple of seconds, and until it completes
   nothing on the page (including the project picker underneath) actually
   has its click handlers attached yet. Removed by the very last line of
   renderer.js, once everything is truly wired up. */
#app-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--desk);
}

#app-loading.hidden {
  display: none;
}

#app-auth {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--desk);
}

#app-auth.hidden {
  display: none;
}

#app-auth-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(320px, calc(100% - 48px));
  background: var(--raised);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

#app-auth .project-launch-word {
  margin: 0 0 22px;
}

#app-auth #sessions-auth-card {
  width: 100%;
  max-width: none;
  padding: 28px 26px 22px;
}

#app-auth #sessions-auth-title {
  font-size: var(--text-xl);
  margin-bottom: 2px;
}

#app-auth #sessions-auth-form input {
  background: var(--desk);
}

#app-auth-back-btn {
  appearance: none;
  margin-top: 18px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-family: inherit;
  font-size: var(--text-md);
  cursor: pointer;
  padding: 0;
}

#app-auth-back-btn.hidden {
  display: none;
}

#sessions-signed-out {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

#sessions-signed-out-text {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.4;
  color: var(--text-3);
}

#sessions-sign-in-btn {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r);
  padding: 8px 14px;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--text-md);
  cursor: pointer;
}

.app-loading-word {
  font-family: var(--font-manuscript);
  font-size: var(--text-2xl);
  color: var(--text);
  margin: 0 0 4px;
}

.app-loading-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: app-loading-spin 0.7s linear infinite;
}

.app-loading-status {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .app-loading-spinner {
    animation: none;
    border-top-color: var(--line);
  }
}

@keyframes app-loading-spin {
  to { transform: rotate(360deg); }
}

/* Project picker — a full-bleed "opening scene" rather than a small dialog,
   since opening/creating a project is a rare, deliberate action, not a quick
   interruption. Deliberately not `.modal-backdrop`/`.modal` (those stay
   reserved for genuinely transient dialogs like settings/quick-search). */
#project-picker {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12vh;
  background: var(--desk);
}

#project-picker.hidden {
  display: none;
}

.project-launch-view.hidden {
  display: none;
}

.project-launch-word {
  font-family: var(--font-manuscript);
  font-size: var(--text-2xl);
  color: var(--text);
  margin: 0 0 4px;
}

.project-launch-prompt {
  font-size: var(--text-md);
  color: var(--text-3);
  margin: 0 0 28px;
}

.project-launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 150px);
  justify-content: center;
  gap: 12px;
  max-width: 640px;
  margin-bottom: 12px;
}

.project-picker-recent-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 150px;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
}

.project-picker-recent-item:hover {
  background: var(--hover);
}

.project-picker-recent-name {
  font-family: var(--font-manuscript);
  font-size: var(--text-md);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.project-picker-recent-when {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.project-launch-tiles {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.project-launch-tile {
  appearance: none;
  font-family: inherit;
  width: 150px;
  height: 64px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: none;
  color: var(--text-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.project-launch-tile:hover {
  background: var(--hover);
}

.project-launch-back {
  flex: none;
  margin-top: 28px;
}

.project-launch-back.hidden {
  display: none;
}

.project-launch-form {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.project-launch-form label {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-bottom: -4px;
}

.project-launch-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-md);
}

.project-launch-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.project-launch-kind {
  display: flex;
  gap: 8px;
}

.project-launch-kind button {
  appearance: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.project-launch-kind button:hover {
  background: var(--hover);
}

.project-launch-kind button[aria-checked="true"] {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.project-launch-kind-name {
  font-family: var(--font-manuscript);
  font-size: var(--text-md);
  color: var(--text);
}

.project-launch-kind-hint {
  font-size: var(--text-xs);
  color: var(--text-3);
}

.project-launch-books {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.project-launch-books.hidden {
  display: none;
}

.project-launch-book-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-launch-book-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-launch-book-remove {
  appearance: none;
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-3);
  font-size: var(--text-md);
  cursor: pointer;
}

.project-launch-book-remove.hidden {
  visibility: hidden;
}

.project-launch-book-remove:hover {
  background: var(--hover);
  color: var(--text);
}

.project-launch-add-book {
  appearance: none;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.project-launch-add-book:hover {
  color: var(--text);
}

.project-launch-location-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-launch-location-row .pill-btn {
  flex: none;
  padding: 6px 12px;
}

.project-launch-location {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.project-launch-preview {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--text-3);
}

.project-launch-preview span {
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.project-launch-preview.hidden {
  display: none;
}

.pill-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.project-launch-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.pill-btn {
  appearance: none;
  font-family: inherit;
  font-size: var(--text-sm);
  padding: 8px 16px;
  border-radius: var(--r);
  cursor: pointer;
  flex: 1;
}

.pill-btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}

.pill-btn.primary:hover {
  opacity: 0.9;
}

.pill-btn.secondary {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--line);
}

.pill-btn.secondary:hover {
  background: var(--hover);
}

/* Book switcher — a single-row dropdown showing the open book, rather than a
   pill row that echoed (and was easily mistaken for) the cast panel's own
   type-filter tabs just below it. */
#book-switcher {
  position: relative;
  min-width: 0;
}

#book-switcher.hidden {
  display: none;
}

/* Lives in the toolbar so the open book is always named on screen. */
#toolbar .book-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  color: var(--text);
  font-weight: 600;
}

#book-switcher-current-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-dropdown-chev {
  font-size: var(--text-xs);
  color: var(--text-3);
  flex-shrink: 0;
}

#book-switcher-menu {
  width: 300px;
  box-shadow: var(--shadow-2);
}

/* The chapter you're in, beside the book title; opens every chapter. */
#chapter-switcher {
  position: relative;
  min-width: 0;
}

#chapter-switcher.hidden {
  display: none;
}

#chapter-switcher-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
}

#chapter-switcher-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-switcher-sep {
  color: var(--text-3);
}

#chapter-switcher-menu {
  width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2);
}

.chapter-menu-row {
  appearance: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: var(--r);
  background: transparent;
  font-family: inherit;
  font-size: var(--text-md);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.chapter-menu-row:hover {
  background: var(--hover);
}

.chapter-menu-row.lv2 {
  padding-left: 24px;
  color: var(--text-2);
}

.chapter-menu-row.current {
  background: var(--sel);
}

.chapter-menu-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-menu-words {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--text-3);
}

#book-switcher-list {
  display: flex;
  flex-direction: column;
}

.book-switcher-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--r);
}

.book-switcher-row.active {
  background: var(--sel);
}

.book-switcher-row-main {
  appearance: none;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: inherit;
  text-align: left;
  padding: 6px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r);
}

.book-switcher-row-main:hover {
  background: var(--hover);
}

.book-switcher-rename-input {
  flex: 1;
  min-width: 0;
  margin: 2px 0;
  padding: 4px 8px;
  font-family: inherit;
  font-size: var(--text-md);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  box-shadow: var(--focus-ring);
  outline: none;
}

.book-switcher-row-title {
  font-size: var(--text-md);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-switcher-row-words {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--text-3);
  flex-shrink: 0;
}

/* The kebab only shows up on hover (or while its own menu is open) so a
   project with several books doesn't show a permanent row of reorder/delete
   buttons next to every title. */
.book-switcher-row-kebab {
  appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  visibility: hidden;
}

.book-switcher-row:hover .book-switcher-row-kebab,
.book-switcher-row.menu-open .book-switcher-row-kebab {
  visibility: visible;
}

.book-switcher-row-kebab:hover {
  background: var(--hover);
  color: var(--text);
}

.book-switcher-row-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 4px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: var(--shadow-1);
}

.book-switcher-row-menu button {
  appearance: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-sm);
  padding: 6px 9px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.book-switcher-row-menu button:hover {
  background: var(--hover);
}

.book-switcher-row-menu button:disabled {
  color: var(--text-3);
  opacity: 0.5;
  cursor: default;
}

.book-switcher-row-menu button:disabled:hover {
  background: transparent;
}

.book-switcher-row-menu button.danger {
  color: var(--danger);
}

.book-switcher-new {
  width: 100%;
  color: var(--text-3);
}

/* --- AI copyeditor suggestions --- */
#editor del[data-suggestion-id] {
  text-decoration: line-through;
  color: var(--del);
  text-decoration-color: var(--del);
}

#editor ins[data-suggestion-id] {
  text-decoration: none;
  color: var(--ins);
}

/* Editor comments: the writer's own text, highlighted, never restyled. */
#editor mark[data-suggestion-id] {
  background: var(--suggestion-comment-bg);
  color: inherit;
  border-radius: var(--r-sm);
}

/* The current tracked change is a soft tint. ProseMirror renders a
   decoration as one element per text node it crosses (split wherever a mark
   or a character-name underline starts), so anything with edges or rounded
   corners breaks into a row of boxes; a plain background joins up. */
#editor .suggestion-current-edit {
  background: var(--accent-soft);
}

/* The current comment: one box around it, every part drawing top and bottom
   edges, only the first the left and only the last the right. */
#editor .suggestion-current-comment {
  border-top: 1.5px solid var(--ins);
  border-bottom: 1.5px solid var(--ins);
  padding: 1px 0;
}

#editor .suggestion-current-comment.suggestion-start {
  border-left: 1.5px solid var(--ins);
  padding-left: 2px;
  border-top-left-radius: var(--r-sm);
  border-bottom-left-radius: var(--r-sm);
}

#editor .suggestion-current-comment.suggestion-end {
  border-right: 1.5px solid var(--ins);
  padding-right: 2px;
  border-top-right-radius: var(--r-sm);
  border-bottom-right-radius: var(--r-sm);
}

#suggestion-bar {
  position: fixed;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  /* left: 50% alone would cap the shrink-to-fit width at half the window,
     squeezing a comment's note into a narrow column. */
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: var(--shadow-1);
  font-size: var(--text-md);
  color: var(--text);
}

#suggestion-bar.hidden,
#suggestion-status.hidden,
#suggestion-review.hidden {
  display: none;
}

#suggestion-review {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#suggestion-bar button {
  appearance: none;
  font-family: inherit;
  font-size: var(--text-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

#suggestion-bar button:hover {
  background: var(--hover);
}

#suggestion-bar #suggestion-accept {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}

#suggestion-bar #suggestion-dismiss {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}

#suggestion-bar button.hidden {
  display: none;
}

#suggestion-count {
  min-width: 52px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* Wide enough for a typical reason on one line; longer ones (or a narrow
   window) wrap to a second line rather than being cut off. */
#suggestion-reason {
  flex: 0 1 auto;
  min-width: 120px;
  max-width: 420px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
  color: var(--text-2);
  font-style: italic;
}

/* A comment's note (up to ~25 words plus its label) gets more room than an
   edit's short reason, so it reads in full without the tooltip. */
#suggestion-reason.suggestion-note {
  max-width: 520px;
  -webkit-line-clamp: 4;
}

.suggestion-sep {
  color: var(--text-3);
}

#suggestion-bar .suggestion-link {
  border-color: transparent;
  background: transparent;
  color: var(--text-2);
  padding: 3px 4px;
}


/* Ask panel (ask-panel.js) */
#ask-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: var(--right-sidebar-width, 420px);
  padding: 14px;
  box-sizing: border-box;
  background: var(--desk);
  color: var(--text);
  font-family: var(--font-ui);
}

#ask-panel.hidden {
  display: none;
}

#ask-panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#ask-thread-btn {
  appearance: none;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  cursor: pointer;
}

#ask-thread-btn:hover {
  background: var(--hover);
}

#ask-thread-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

#ask-thread-menu {
  position: absolute;
  top: 48px;
  left: 14px;
  right: 14px;
  z-index: 5;
  max-height: 50%;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--raised);
  box-shadow: var(--shadow-2);
}

#ask-thread-menu.hidden {
  display: none;
}

.ask-thread-item {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--r-sm);
}

.ask-thread-item.active,
.ask-thread-item:hover {
  background: var(--hover);
}

.ask-thread-item-title {
  appearance: none;
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--text-sm);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.ask-thread-delete {
  appearance: none;
  flex-shrink: 0;
  padding: 4px 8px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  font-size: var(--text-xs);
  cursor: pointer;
}

.ask-thread-delete:hover,
.ask-thread-delete.armed {
  color: var(--danger);
}

.ask-thread-empty {
  padding: 8px;
  color: var(--text-3);
  font-size: var(--text-sm);
}

#ask-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 8px;
}

.ask-msg {
  font-size: var(--text-md);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#ask-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.ask-empty-lead {
  margin: 0 0 4px;
  color: var(--text-2);
  font-size: var(--text-md);
  line-height: 1.5;
}

.ask-example {
  appearance: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 8px 10px;
  cursor: pointer;
}

.ask-example:hover {
  color: var(--text);
  background: var(--hover);
}

.ask-msg-user {
  align-self: flex-end;
  max-width: 85%;
  padding: 8px 10px;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  color: var(--text);
}

.ask-msg-assistant {
  color: var(--text);
}

.ask-ref {
  appearance: none;
  padding: 0 1px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: var(--text-xs);
  vertical-align: super;
  cursor: pointer;
}

.ask-citations {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 8px;
  white-space: normal;
}

.ask-chip {
  appearance: none;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--text-xs);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.ask-chip:hover {
  background: var(--hover);
  color: var(--text);
}

.ask-chip-note {
  padding-left: 8px;
  color: var(--danger);
  font-size: var(--text-xs);
}

.ask-steps {
  margin: 0;
  padding-left: 18px;
  color: var(--text-3);
  font-size: var(--text-xs);
}

.ask-step {
  margin: 2px 0;
}

.ask-step-thinking {
  list-style: none;
  margin-left: -18px;
  font-style: italic;
}

.ask-steps-summary {
  margin-top: 6px;
  color: var(--text-3);
  font-size: var(--text-xs);
}

#ask-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  padding: 6px 8px;
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--text-sm);
}

#ask-status.hidden {
  display: none;
}

#ask-form {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

#ask-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--page);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-md);
}

#ask-input:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

#ask-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#ask-hint {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
  font-size: var(--text-xs);
}

/* .pill-btn stretches (flex: 1) for modal button rows; here they size to
   their label. The stylesheet has no global .hidden, so each button that
   toggles needs its own rule. */
#ask-new-btn,
#ask-form-actions .pill-btn,
#ask-settings-btn {
  flex: none;
  padding: 4px 12px;
}

#ask-stop-btn.hidden,
#ask-send-btn.hidden {
  display: none;
}

.ask-thread-cost {
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-3);
  font-size: var(--text-xs);
}

/* Report a problem (report-modal.js). */
.modal.report-modal {
  width: 560px;
  max-width: calc(100vw - 32px);
}

.report-help {
  margin: 0 0 12px;
  color: var(--text-3);
  font-size: var(--text-sm);
}

#report-text {
  display: block;
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  resize: vertical;
}

.report-status {
  min-height: 1.4em;
  margin: 8px 0 0;
  color: var(--text-3);
  font-size: var(--text-sm);
}

/* Settings → Use AI features (renderer.js applyAiEnabled). */
.settings-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.modal .settings-toggle input {
  width: auto;
  margin: 0;
  padding: 0;
}

.settings-toggle + .settings-note {
  margin-bottom: 16px;
}

.settings-ai-fields.hidden {
  display: none;
}

/* ---------- First-run spotlight tour (onboarding-tour.js) ---------- */
#tour {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

#tour.hidden,
.tour-back.hidden {
  display: none;
}

/* The lit-up control: its huge shadow is the dimmed rest of the window. */
.tour-hole {
  position: fixed;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 9999px var(--scrim);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease;
}

.tour-card {
  position: fixed;
  width: 340px;
  padding: 18px 18px 14px;
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  font-family: var(--font-ui);
}

.tour-step {
  margin-bottom: 6px;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.tour-title {
  margin: 0 0 6px;
  font-size: var(--text-lg);
  font-weight: 600;
}

.tour-body {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--text-2);
}

.tour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.tour-spacer {
  flex: 1;
}

.tour-dots {
  display: flex;
  gap: 5px;
}

.tour-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}

.tour-dots i.on {
  background: var(--accent);
}

.tour-skip,
.tour-back,
.tour-next {
  white-space: nowrap;
}

.tour-skip {
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: var(--text-sm);
  cursor: pointer;
}

.tour-skip:hover {
  color: var(--text-2);
}

.tour-back,
.tour-next {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--text-md);
  cursor: pointer;
}

.tour-back {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
}

.tour-next {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.tour-next:hover {
  filter: brightness(1.08);
}

/* Account button: the toolbar's right end. An avatar with the signed-in
   initial (a person icon when signed out) that opens Settings, Show tour and
   Sign out. */
#account {
  position: relative;
  display: flex;
  margin-left: 8px;
}

#toolbar #account-btn {
  appearance: none;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease;
}

#toolbar #account-btn:hover,
#toolbar #account-btn[aria-expanded='true'] {
  background: var(--accent);
  color: var(--accent-ink);
}

#toolbar #account-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

#toolbar #account-btn svg {
  display: none;
  width: 14px;
  height: 14px;
}

#toolbar #account-btn.signed-out svg {
  display: block;
}

#toolbar #account-btn.signed-out #account-initial {
  display: none;
}

#account-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 220px;
  padding: 4px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

#account-menu.hidden {
  display: none;
}

#account-menu-name {
  padding: 8px 10px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--line);
}

#account-menu button {
  appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
}

#account-menu button:hover {
  background: var(--hover);
}

#account-menu kbd {
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--text-3);
}

/* Settings: a two-column window. The left column picks a pane (AI, Focus);
   Cancel and Save sit under the panes. */
.settings-modal {
  width: 720px;
  max-width: 92vw;
  padding: 0;
  display: grid;
  grid-template-columns: 170px 1fr;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

#settings-nav {
  grid-row: 1 / span 2;
  padding: 20px 10px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

#settings-nav h2 {
  margin: 0;
  padding: 0 10px 14px;
  font-size: var(--text-md);
}

#settings-nav button {
  appearance: none;
  display: block;
  width: 100%;
  margin-bottom: 2px;
  padding: 7px 10px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
}

#settings-nav button:hover {
  background: var(--hover);
}

#settings-nav button[aria-selected='true'] {
  background: var(--sel);
  color: var(--text);
  font-weight: 600;
}

#settings-nav button.hidden {
  display: none;
}

.settings-panes {
  padding: 22px 24px 0;
  min-height: 430px;
  max-height: 70vh;
  overflow: auto;
}

.settings-pane.hidden {
  display: none;
}

.settings-pane > h3 {
  margin: 0 0 14px;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
}

.settings-modal .modal-actions {
  margin: 0;
  padding: 16px 24px 20px;
}

.settings-pane .settings-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.settings-pane .settings-section > h3 {
  display: none;
}

/* ---------- One-time unlock (license-ui.js, copy in license-helpers.js) ----------
   The upgrade card is shared by the Focus popup, the Sessions panel, the
   Settings Focus pane and the Analytics teaser. */
.upgrade-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.upgrade-card.hidden {
  display: none;
}

.upgrade-card .upgrade-title {
  margin: 0;
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: 600;
}

.upgrade-body {
  margin: 0;
}

.upgrade-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  align-self: stretch;
}

.upgrade-actions .upgrade-link {
  margin-right: auto;
}

/* The card embedded in a panel (Sessions, Settings Focus, Analytics) is a
   raised block of its own; the modal's card already sits on the modal. */
#sessions-locked,
#focus-locked-card,
#analytics-locked-card {
  gap: 12px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

#sessions-locked {
  margin: 16px;
}

#focus-locked-card {
  margin-bottom: 20px;
}

#focus-settings-section > [inert] {
  opacity: 0.45;
}

.upgrade-link {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

.modal.upgrade-modal {
  width: 440px;
  padding: 24px;
}

.modal.license-modal {
  width: 420px;
  padding: 24px;
}

.license-modal h2 {
  margin: 0 0 6px;
}

#license-error {
  margin-top: 8px;
  color: var(--text);
  font-size: var(--text-sm);
}

#license-error.hidden {
  display: none;
}

.license-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.license-actions .settings-link {
  margin-right: auto;
}

.account-menu-status {
  padding: 6px 10px;
  font-size: var(--text-xs);
  color: var(--text-3);
}

/* Writing Analytics with an expired trial (analytics-mode.js): the total stays
   sharp; the rest is blurred behind the upgrade card. */
.analytics-modal.is-locked .analytics-goal-of,
.analytics-modal.is-locked .analytics-goal-pill,
.analytics-modal.is-locked .analytics-progress-track,
.analytics-modal.is-locked .analytics-goal-row,
.analytics-modal.is-locked .analytics-stat-grid,
.analytics-modal.is-locked .analytics-card:not(.analytics-goal-card) {
  filter: blur(8px);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

.upgrade-actions .pill-btn {
  flex: none;
  width: auto;
  min-width: 96px;
}

.license-modal .settings-note {
  margin-bottom: 12px;
}

#account-menu button.hidden {
  display: none;
}