/*
 * Hand-written app shell styles (Propshaft, no Tailwind). Aiming for a calm,
 * Typora-like writing feel: generous whitespace, one accent color, subtle
 * borders, system fonts, light + dark via prefers-color-scheme.
 *
 * Editor-specific styles for the Phase 2 TipTap surface live in editor.css
 * (owned by another agent) — keep this file to shell/chrome only.
 */

/* ---------------------------------------------------------------------------
   Two voices

   brainlog is a *log* -- a text file -- and its whole thesis is that the markdown
   you type is the truth while everything else is a view of it. The type system
   says so out loud:

     Your side   -- the writing surface -- is proportional, quiet, and gets out of
                    the way. It is prose.
     The machine's side -- ALL chrome -- is monospace, because every noun in this
                    app's vocabulary is literally file syntax: `- [ ]`, `@due()`,
                    `@assigned()`, page names, line numbers.

   So the chrome speaks the language of the file, and the page speaks yours.
   --------------------------------------------------------------------------- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --radius: 6px;
  --radius-lg: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---------------------------------------------------------------------
     One scale

     The shell had grown twenty-one different font sizes, including 10px,
     11.5px and 12.5px -- sizes nobody chose, that arrived one screen at a
     time. These nine steps are the whole vocabulary now, and every size in
     this file is one of them. Two neighbouring things can still differ; they
     can no longer differ by half a pixel for no reason.

     The steps are close together at the small end on purpose: this is a dense
     chrome (rail, sidebar, board cards, task rows) where 12 and 13 do
     genuinely different jobs, and far apart at the top where headings need
     to actually feel like headings.
     --------------------------------------------------------------------- */
  --text-2xs: 11px;   /* chips, badges, the board's markdown markers */
  --text-xs: 12px;    /* meta: due dates, assignees, counts */
  --text-sm: 13px;    /* the chrome's default */
  --text-md: 14px;    /* buttons, menu items, task rows */
  --text-base: 15px;  /* body copy in panels and prose-ish chrome */
  --text-lg: 17px;    /* small headings, folder name */
  --text-xl: 21px;    /* section headings */
  --text-2xl: 26px;   /* page headings */
  --text-3xl: 30px;   /* the page title, and the landing hero */
}

/* ---------------------------------------------------------------------------
   Palette

   Warm, paper-like, and deliberately NOT neutral grey: a writing app should feel
   like paper and ink, not like a dashboard. The three panes are separated by
   real (if subtle) tonal steps -- rail darkest, sidebar mid, page lightest -- so
   the surface you write on is always the brightest thing on screen.

   The editor consumes these same tokens (see editor.css), so the chrome and the
   writing surface can never drift apart the way they did when each owned its own
   palette: a cool blue-black shell around a warm charcoal editor, both reading
   as flat black.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }
}

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Blue-black: the colour pens actually write in. The old green was arbitrary --
     chosen because it looked calm, not because it meant anything here. */
  --accent: #2c5d78;
  --accent-soft: rgba(44, 93, 120, 0.1);
  --accent-contrast: #ffffff;

  /* Paper, then desk. A grey-warm stock, deliberately not the cream that every
     "calm writing app" reaches for. */
  --bg: #f8f7f3;
  --bg-sidebar: #f0eee8;
  --bg-rail: #e8e6df;
  --bg-raised: #fefefd;
  /* Highlighter. Used for exactly one thing: search hits. Marginalia, not decor. */
  --marker: #f2e5a4;
  --bg-hover: rgba(38, 36, 31, 0.05);
  --bg-active: var(--accent-soft);

  --text: #23231f;
  --text-muted: #6a675f;
  --text-faint: #74716a; /* 4.5:1 on paper -- #9b968b was 2.75 and failed */;

  --border: #ddd9d0;
  --border-strong: #cbc5b9;

  --danger: #b4453a;

  --shadow: 0 1px 2px rgb(38 36 31 / 6%);
  --shadow-lg: 0 8px 28px rgb(38 36 31 / 12%);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --accent: #8fc0da;
  --accent-soft: rgba(143, 192, 218, 0.14);
  --accent-contrast: #14232c;
  --marker: #6b5f2c;

  /* Layered, warm, never #000: pure black on an OLED reads as a hole in the page
     and gives the panes nothing to separate against. */
  --bg: #1f1f1d;
  --bg-sidebar: #1a1a19;
  --bg-rail: #151514;
  --bg-raised: #272725;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: var(--accent-soft);

  --text: #e9e5dd;
  --text-muted: #a29d93;
  --text-faint: #8b867d; /* 4.6:1 on the dark page -- #736f68 was 3.30 */;

  --border: #33322e;
  --border-strong: #46443f;

  --danger: #e0776b;

  --shadow: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-lg: 0 10px 30px rgb(0 0 0 / 45%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --accent: #8fc0da;
    --accent-soft: rgba(143, 192, 218, 0.14);
    --accent-contrast: #14232c;
    --marker: #6b5f2c;

    --bg: #1f1f1d;
    --bg-sidebar: #1a1a19;
    --bg-rail: #151514;
    --bg-raised: #272725;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-active: var(--accent-soft);

    --text: #e9e5dd;
    --text-muted: #a29d93;
    --text-faint: #8b867d; /* 4.6:1 on the dark page -- #736f68 was 3.30 */;

    --border: #33322e;
    --border-strong: #46443f;

    --danger: #e0776b;

    --shadow: 0 1px 2px rgb(0 0 0 / 30%);
    --shadow-lg: 0 10px 30px rgb(0 0 0 / 45%);
  }
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* ---------------------------------------------------------------- shell */

/* The subscription elements for live navigation updates sit inside the rail
   and the sidebar, both of which are flex columns. A custom element is an
   inline box by default, which would make them flex items. */
turbo-cable-stream-source {
  display: none;
}

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.folder-rail {
  width: 220px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--bg-rail);
  border-right: 1px solid var(--border);
  padding: var(--space-4) var(--space-2);
}

.folder-rail h1 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 var(--space-2) var(--space-3);
}

.folder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.folder-list-item a {
  display: block;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-list-item a:hover {
  background: var(--bg-hover);
}

.folder-list-item.active a {
  background: var(--bg-active);
  color: var(--accent);
}

turbo-frame#main_pane {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.sidebar {
  width: 280px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
}

.sidebar-header .title-edit {
  font-size: var(--text-base);
  font-weight: 600;
}

.sidebar-actions {
  display: flex;
  gap: var(--space-1);
}

.section-list {
  flex: 1;
  padding: var(--space-2) var(--space-2) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section {
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
}

.section-header .title-edit {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.section-actions {
  display: flex;
  gap: 2px;
}

/* The delete "×" on a page row: revealed on hover or keyboard focus where a
   pointer can hover, always shown where it cannot -- a phone has no hover, and
   an invisible control there is an unreachable one. (The hover rule used to
   stand alone, with no resting state to reveal FROM, so the × was simply on.) */
@media (hover: hover) {
  .page-actions {
    opacity: 0;
    transition: opacity 0.1s ease;
  }

  .page-row:hover .page-actions,
  .page-row:focus-within .page-actions {
    opacity: 1;
  }
}

/* "+" is the primary, always-visible action (see sections/_section); only
   the "⋯" overflow fades in on hover, same as it always did. */
.section-actions .more-menu {
  opacity: 0;
  transition: opacity 0.1s ease;
}

.section:hover .section-actions .more-menu,
.section-actions .more-menu:focus-within,
.section-actions .more-menu[open] {
  opacity: 1;
}

.page-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 4px;
}

.page-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius);
  cursor: grab;
}

.page-row:hover {
  background: var(--bg-hover);
}

.page-row.active {
  background: var(--bg-active);
}

.page-row.active .page-link {
  color: var(--accent);
  font-weight: 600;
}

.page-row.dragging {
  opacity: 0.4;
}

.page-link {
  flex: 1;
  display: block;
  padding: var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-actions {
  padding-right: var(--space-2);
}

.new-item-form {
  padding: var(--space-2);
}

.new-item-form input {
  width: 100%;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-2);
  background: transparent;
}

.new-item-form input:focus {
  outline: none;
  border-color: var(--accent);
  border-style: solid;
}

/* The "+ New folder" / "+ New section" trigger reveal-form_controller shows
   before the input -- full width, left-aligned, so it reads as a row rather
   than a stray pill button. */
.new-item-trigger {
  width: 100%;
  text-align: left;
}

/* min-height:0 is load-bearing. Without it a flex child refuses to shrink below its
   content, so a long page could not scroll -- .app-shell's overflow:hidden simply
   clipped it and the rest of the note was unreachable. */
turbo-frame#content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.content-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6) 0;
}

.save-status {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.save-status[data-state="saving"] {
  color: var(--text-muted);
}

.save-status[data-state="error"] {
  color: var(--danger);
}

.collaborators {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.5rem;
  color: var(--text-faint);
  font-size: var(--text-xs);
}

.collaborator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted);
}

.collaborator::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--collaborator-color);
  content: "";
}

.page-title-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: var(--text-3xl);
  font-weight: 700;
  font-family: var(--font-serif);
  padding: var(--space-5) var(--space-6) var(--space-2);
  outline: none;
}

.page-title-input::placeholder {
  color: var(--text-faint);
}

.page-body-input {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  padding: 0 var(--space-6) var(--space-6);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.7;
  /* Matches the editor: a note uses the width it is given (see editor.css). */
}

/* ------------------------------------------------------------ elements */

.icon-button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius);
  width: 24px;
  height: 24px;
  line-height: 1;
  cursor: pointer;
}

.icon-button:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.icon-button.danger:hover {
  color: var(--danger);
}

/* One box, two fills.

   These two used to disagree about everything except the corner radius: the
   filled one was 8px/16px with no border, the outlined one 4px/12px with one.
   Sat next to each other -- which is exactly where they live, on the pricing
   card and in every dialog -- they were visibly different sizes, and the pair
   read as a mistake rather than a choice. Now the box is identical (the filled
   one carries a transparent border so it measures the same) and the only thing
   that differs is what a button is FOR: filled is the one action being
   recommended, outlined is the alternative beside it. */
.primary-button,
.ghost-button {
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

.ghost-button {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-muted);
}

.ghost-button:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.ghost-button.danger:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.primary-button {
  background: var(--accent);
  color: var(--accent-contrast);
}

.primary-button:hover {
  filter: brightness(1.05);
}

/* Both take the same focus ring, offset so it reads around the box rather than
   inside a filled one. */
.primary-button:focus-visible,
.ghost-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* .primary-button/.ghost-button were button/input styles; the marketing pages
   are the first place they dress a plain <a> (a link to sign-in, not a form
   submit), so give the anchor case its own box and drop the underline. */
a.primary-button,
a.ghost-button {
  display: inline-block;
  text-decoration: none;
}

.title-edit {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.title-edit .title-label {
  cursor: text;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-edit .title-label:hover {
  background: var(--bg-hover);
}

.title-edit form {
  width: 100%;
}

.title-edit input[type="text"] {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  background: var(--bg);
  outline: none;
}

/* -------------------------------------------------------------- empty */

.empty-state {
  margin: auto;
  max-width: 340px;
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-6);
}

.empty-state h2 {
  color: var(--text);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.empty-state p {
  margin: 0 0 var(--space-4);
}

.empty-hint {
  color: var(--text-faint);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  margin: 0;
}

/* ------------------------------------------------------- view switcher */

.view-tab,
.filter-tab {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.view-tab:hover,
.filter-tab:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.section-view-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 var(--space-1);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.section-view-link:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* ------------------------------------------------------------ task views */

.task-view {
  padding: var(--space-5) var(--space-6) var(--space-6);
  overflow-y: auto;
}

.task-view-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.task-view-header h1 {
  font-size: var(--text-xl);
  margin: 0;
}

.task-filters {
  display: flex;
  gap: 2px;
}

.filter-tab.active {
  background: var(--bg-active);
  color: var(--accent);
}

/* The board's density control (S/M/L) -- see board_size_controller.js. Same
   segmented-control shape as .task-filters/.filter-tab, on <button> instead
   of links since it doesn't navigate. */
.board-size-control {
  display: flex;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}

.board-size-button {
  min-width: 24px;
  padding: var(--space-1) var(--space-2);
  border-radius: calc(var(--radius) - 2px);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
}

.board-size-button:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.board-size-button.active {
  background: var(--bg-active);
  color: var(--accent);
}

.task-page-group {
  margin-bottom: var(--space-5);
}

.task-page-group h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

.due-group {
  margin-bottom: var(--space-5);
}

.due-group h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

.board-count {
  font-weight: 400;
  color: var(--text-faint);
}

.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.task-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
}

.task-row + .task-row {
  border-top: 1px solid var(--border);
}

.task-checkbox {
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.task-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-due,
.task-assignee,
.task-state {
  flex: none;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.task-due.overdue {
  color: var(--danger);
  font-weight: 600;
}

.task-row.overdue {
  background: color-mix(in srgb, var(--danger) 6%, var(--bg));
}

.task-state {
  min-width: 44px;
  text-align: right;
  text-transform: capitalize;
}

/* ------------------------------------------------------------- board */

.board-columns {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  /* A horizontal scroller, not a wrap: a page's own heading-board can have any
     number of columns, and the L density can make 3+ wider than the pane. */
  overflow-x: auto;
}

.board-column {
  /* --board-column-width/--board-card-scale are set by board_size_controller.js
     on #task-view-body (see task_views/_board.html.erb); unset, a column still
     flexes to fill the row exactly as before. */
  flex: 1 1 var(--board-column-width, 0);
  min-width: var(--board-column-width, 0);
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.board-column h3 {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

.board-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 24px;
}

.board-card {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: calc(var(--space-2) * var(--board-card-scale, 1)) calc(var(--space-3) * var(--board-card-scale, 1));
  cursor: grab;
}

.board-card.dragging {
  opacity: 0.4;
}

.board-card-text {
  font-size: calc(var(--text-md) * var(--board-card-scale, 1));
  margin-bottom: var(--space-1);
}

.board-card-meta {
  display: flex;
  gap: var(--space-2);
  font-size: calc(var(--text-xs) * var(--board-card-scale, 1));
  color: var(--text-muted);
}

.board-card-meta .task-due.overdue {
  color: var(--danger);
}

.board-card-page {
  margin-top: var(--space-1);
  font-size: var(--text-2xs);
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------- search */

.search-form {
  padding: var(--space-1) var(--space-2) var(--space-3);
}

.search-input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  background: var(--bg);
}

.search-form-large {
  padding: 0;
  max-width: 480px;
  margin-bottom: var(--space-5);
}

.search-form-large .search-input {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
}

.search-pane {
  padding: var(--space-6);
  overflow-y: auto;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
}

.search-results li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.search-breadcrumb {
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin: 2px 0;
}

.search-snippet {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.search-snippet mark {
  background: var(--bg-active);
  color: var(--accent);
  border-radius: 2px;
}

/* --------------------------------------------------------------- misc */

.flash {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 10;
  font-size: var(--text-md);
}

.flash.alert {
  color: var(--danger);
  border-color: var(--danger);
}

.trash-list {
  list-style: none;
  margin: 0;
  padding: var(--space-6);
  max-width: 640px;
}

.trash-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.trash-meta {
  color: var(--text-faint);
  font-size: var(--text-sm);
}

/* The global Trash groups folders/sections/pages; each group reuses
   .trash-list, so the page container carries the padding instead. */
.trash-page {
  padding: var(--space-6);
  max-width: 640px;
}

.trash-page .trash-list {
  padding: 0 0 var(--space-4);
}

.trash-group-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin: var(--space-4) 0 var(--space-2);
}

.trash-actions {
  display: flex;
  gap: var(--space-2);
  flex: none;
}

/* ---------------------------------------------------------- auth pages */

/* The wordmark doubles as the way back to the landing page -- every auth
   screen can be arrived at cold from an email link, and a dead-end page with
   no exit reads as broken. It keeps looking like a wordmark, not a link. */
.auth-page h1 a {
  color: inherit;
  text-decoration: none;
}

.auth-page h1 a:hover {
  color: var(--accent);
}

.auth-hint {
  color: var(--text-muted);
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
}

.auth-page {
  max-width: 360px;
  margin: 15vh auto;
  padding: 0 var(--space-4);
}

/* :not([type="submit"]) is load-bearing. This selector outranks .primary-button, so
   without it the Sign in button was painted as a plain text field and its label
   disappeared into the background. */
.auth-page input:not([type="submit"]) {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
}

.auth-page input[type="submit"] {
  width: 100%;
  margin-bottom: var(--space-3);
}

.auth-page .field-hint {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: -var(--space-2) 0 var(--space-4);
}

/* --------------------------------------------------------- share / invite */

.share-control {
  position: relative;
}

.share-control summary {
  list-style: none;
  cursor: pointer;
}

.share-control summary::-webkit-details-marker {
  display: none;
}

.share-control[open] summary {
  background: var(--bg-hover);
  color: var(--text);
}

.share-panel-frame {
  display: block;
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 5;
  width: 340px;
}

.share-panel {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: var(--space-3);
}

.share-panel-new-link {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.share-panel-new-link p {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.copy-field {
  display: flex;
  gap: var(--space-1);
}

.copy-field input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-sidebar);
  font-size: var(--text-xs);
}

.share-link-list,
.invitation-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.share-link-row,
.invitation-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
}

.share-link-url,
.invitation-email {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.share-link-state,
.invitation-state {
  flex: none;
  color: var(--text-faint);
}

.share-link-state.active,
.invitation-state.active {
  color: var(--accent);
}

/* A word-button sized for the 12px link row -- .icon-button's fixed 24px
   square fits a glyph, not the word "Revoke". */
.share-link-revoke {
  flex: none;
  padding: 2px var(--space-2);
  font-size: var(--text-2xs);
}

.share-link-form,
.invite-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.share-link-form label,
.invite-form label {
  color: var(--text-muted);
}

.share-link-form input[type="date"],
.invite-form input[type="email"] {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  background: var(--bg);
  flex: 1;
  min-width: 0;
}

.invite-control {
  padding: 0 var(--space-2);
}

/* ---------------------------------------------------------- public page */

.public-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.public-page-header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
  font-size: var(--text-sm);
}

.public-page h1.public-page-title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-5);
}

.public-section-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.public-section-list li {
  border-top: 1px solid var(--border);
}

.public-section-list li:first-child {
  border-top: none;
}

.public-section-list a {
  display: block;
  padding: var(--space-3) var(--space-4);
}

.public-section-list a:hover {
  background: var(--bg-hover);
}

.public-not-found {
  max-width: 420px;
  margin: 20vh auto;
  text-align: center;
  color: var(--text-muted);
  padding: 0 var(--space-4);
}

.markdown-content {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.75;
}

.markdown-content > :first-child {
  margin-top: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
  font-weight: 700;
  line-height: 1.3;
  margin: var(--space-5) 0 var(--space-2);
}

.markdown-content h1 { font-size: var(--text-2xl); }
.markdown-content h2 { font-size: var(--text-xl); }
.markdown-content h3 { font-size: var(--text-lg); }

.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content blockquote,
.markdown-content pre,
.markdown-content table {
  margin: 0 0 var(--space-4);
}

.markdown-content a {
  color: var(--accent);
  text-decoration: underline;
}

.markdown-content blockquote {
  margin-left: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted);
}

.markdown-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--bg-sidebar);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.markdown-content pre {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  overflow-x: auto;
}

.markdown-content pre code {
  background: none;
  padding: 0;
}

.markdown-content li[data-task-list-item] {
  list-style: none;
}

.markdown-content ul:has(input[type="checkbox"]) {
  padding-left: var(--space-4);
}

.markdown-content input[type="checkbox"] {
  margin-right: var(--space-2);
}

.markdown-content table {
  border-collapse: collapse;
  width: 100%;
}

.markdown-content th,
.markdown-content td {
  border: 1px solid var(--border);
  padding: var(--space-1) var(--space-2);
  text-align: left;
}

.markdown-content th {
  background: var(--bg-sidebar);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Overflow menus

   The sidebar is 280px. Folder headers wanted four word-buttons and section
   headers wanted six controls, which overflowed the column and put a horizontal
   scrollbar under the whole pane. Secondary actions now collapse behind a "⋯"
   disclosure, reusing the same <details> pattern as the share/invite panels.
   --------------------------------------------------------------------------- */
.overflow-menu {
  position: relative;
}

.overflow-menu > summary {
  list-style: none;
  cursor: pointer;
}

.overflow-menu > summary::-webkit-details-marker {
  display: none;
}

.overflow-menu[open] > summary {
  background: var(--bg-hover);
  color: var(--text);
}

.overflow-menu__items {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 184px;
  padding: var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.overflow-menu__items form {
  margin: 0;
}

.menu-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

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

.menu-item.danger {
  color: var(--danger);
}

/* The share panel is itself a <details>; inside a menu it must read as one more
   row, not as a boxed button sitting among plain rows. */
.overflow-menu__items .share-control > summary {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  background: transparent;
  font-size: var(--text-sm);
  text-align: left;
}

.overflow-menu__items .share-control > summary:hover {
  background: var(--bg-hover);
}

/* Nothing in the sidebar may push the pane sideways. */
.sidebar,
.section-list {
  min-width: 0;
  overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   Depth and warmth

   The three panes now step tonally (rail -> sidebar -> page), so instead of one
   flat black field the eye can tell where it is. Cards and menus lift off the
   surface with a real shadow rather than relying on a 1px border alone.
   --------------------------------------------------------------------------- */
.folder-rail {
  display: flex;
  flex-direction: column;
}

.rail-footer {
  margin-top: auto;
  padding: var(--space-3) var(--space-2) var(--space-2);
}

.theme-toggle {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: var(--border);
  color: var(--text);
  background: var(--bg-hover);
}

/* Cards read as paper on a desk, not as outlined rectangles. */
.board-card,
.task-row,
.page-row {
  background: var(--bg-raised);
}

.board-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.board-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.overflow-menu__items,
.share-panel-frame {
  box-shadow: var(--shadow-lg);
}

/* The page you are writing on is the brightest surface on screen. */
.content-pane {
  background: var(--bg);
}

/* An active page/folder should read as selected, not as a blue slab. */
.folder-list-item.active > a,
.page-row.active {
  color: var(--text);
  background: var(--bg-active);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* ------------------------------------------------------------------ account */

.rail-link {
  display: block;
  width: 100%;
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
}

.rail-link:hover {
  border-color: var(--border);
  color: var(--text);
  background: var(--bg-hover);
}

.rail-footer form {
  margin: 0;
}

.settings-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-6);
}

/* 40rem is a reading measure -- right for a settings form, wrong for the admin
   users table, which is six columns plus two action buttons and was wrapping
   every row into a paragraph. Data wants the width the window has. */
.settings-page--wide {
  max-width: 80rem;
}

/* ------------------------------------------------------- the users table

   Until now .settings-table had NO base styling -- browser-default borders
   and spacing, which is why the admin page read like a spreadsheet from
   1998. The system's rules apply: hairline row separators instead of boxes,
   the machine's side (emails, dates) in mono, one accent used sparingly. */
.settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}

.settings-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border-strong);
}

.settings-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.settings-table tbody tr:hover {
  background: var(--bg-hover);
}

.users-summary {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Identity is one cell: the person on top, the address (what activation is
   keyed on, so the thing worth copying) underneath in the machine's voice. */
.users-table__name {
  display: block;
  font-weight: 600;
}

.users-table__admin {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0 var(--space-2);
  margin-left: var(--space-1);
  vertical-align: 1px;
}

.users-table__email {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 1px;
}

.users-table__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

/* What the account IS, at a glance: filled tint only for states someone
   chose to grant; free is an outline, quiet on purpose. */
.plan-chip {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  white-space: nowrap;
}

.plan-chip--paid {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

.plan-chip--comp {
  background: var(--marker);
  border-color: transparent;
  color: var(--text);
}

/* Actions stay on one calm line, right-aligned, sized for a table row
   rather than a hero section. */
.users-table__actions {
  text-align: right;
  white-space: nowrap;
}

.users-table__actions form {
  display: inline-block;
}

.users-table__actions form + form {
  margin-left: var(--space-2);
}

.table-button {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
}

/* Two copyable credentials need saying which is which. */
.copy-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-soft);
  font-size: 0.85rem;
}

.copy-label:not(:first-of-type) {
  margin-top: var(--space-4);
}

.settings-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.settings-header h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
}

.settings-section {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
}

.settings-section h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
}

.settings-hint {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 22rem;
}

.settings-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* The agent-connection docs page reuses the settings shell; these are just
   its code sample and capability table. */
.docs-page .copy-field,
.settings-section .copy-field {
  max-width: 28rem;
  margin-bottom: var(--space-2);
}

.docs-code {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-sidebar);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  overflow-x: auto;
}

.docs-table {
  width: 100%;
  margin: 0 0 var(--space-4);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.docs-table th,
.docs-table td {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.docs-table th {
  width: 9rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.docs-steps {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.docs-steps li {
  margin-bottom: var(--space-1);
}

.docs-table code,
.docs-page p code,
.docs-steps code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--bg-hover);
}

.settings-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Text-like inputs only. Without the :not, this also dressed the forms'
   <input type="submit"> as a bordered field, and -- later in the file at equal
   specificity -- beat .primary-button, so "Save profile" was the one primary
   action in Settings that did not look like one. */
.settings-form input:not([type="submit"]) {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text);
  font-size: var(--text-md);
}

.settings-form input:not([type="submit"]):focus {
  outline: none;
  border-color: var(--accent);
}

.primary-button {
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  cursor: pointer;
}

.settings-errors {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: var(--danger);
  margin-bottom: var(--space-4);
}

.settings-errors p {
  margin: 0;
}

/* The delete-account step. The heading carries the warning color; the
   checklist shows the two prerequisites (notes gone, subscription gone) as
   open or done, so the locked state explains itself instead of just refusing. */
.settings-danger h2 {
  color: var(--danger);
}

.deletion-checklist {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.deletion-checklist li {
  position: relative;
  padding-left: var(--space-5);
}

.deletion-checklist li::before {
  content: "○";
  position: absolute;
  left: 0;
  color: var(--danger);
}

.deletion-checklist li.done::before {
  content: "✓";
  color: var(--accent);
}

/* Names are click-to-rename. Say so, quietly -- with no affordance at all, people
   reasonably concluded renaming was simply not implemented. */
.title-label {
  cursor: text;
  border-bottom: 1px dashed transparent;
}

.title-label:hover {
  border-bottom-color: var(--border-strong);
}

/* ---------------------------------------------------------------------------
   Collapsible panes

   The rail and sidebar collapse independently so a writer can push the chrome
   out of the way and just write. State lives as a boolean attribute on <html>
   (not on the pane element itself): <html> survives Turbo frame navigation,
   but the sidebar is re-rendered on every folder/page visit, so keying the
   CSS off an ancestor that never gets swapped means the collapsed state
   applies the instant new sidebar markup lands -- no flash, no JS needed on
   reconnect. See pane_collapse_controller.js and the inline <head> script in
   application.html.erb (same pre-paint pattern as theme).

   Collapsing never removes the toggle: each pane shrinks to a 36px icon strip
   instead of vanishing, so there is always a visible, clickable way back --
   collapsing both panes at once cannot leave a user stuck.
   --------------------------------------------------------------------------- */
.folder-rail,
.sidebar {
  transition: width 0.12s ease;
}

/* The panes themselves no longer scroll -- their CONTENT does. Keeping the
   scrollbox inside .rail-content/.sidebar-content is what lets the rail header
   (the logo toggle) and the sidebar's bottom toggle stay put while long
   folder/section lists scroll behind them. */
.rail-content,
.sidebar-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.pane-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: var(--space-2) auto;
  border: none;
  border-radius: var(--radius);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}

/* The rail toggle is the brand mark; hovering it reveals the chevron in its
   place, and the collapsed rail keeps showing the logo. */
.rail-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-1) var(--space-3);
}

.rail-toggle {
  position: relative;
  width: 28px;
  height: 28px;
  margin: 0;
}

.pane-toggle-logo {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 12%));
  transition: opacity 0.12s ease;
}

.rail-toggle .pane-toggle-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.rail-toggle:hover .pane-toggle-logo,
.rail-toggle:focus-visible .pane-toggle-logo {
  opacity: 0;
}

.rail-toggle:hover .pane-toggle-icon,
.rail-toggle:focus-visible .pane-toggle-icon {
  opacity: 1;
}

/* The sidebar's toggle sits at the BOTTOM of the pane, pinned outside the
   scrolling content. */
.sidebar-toggle {
  margin: auto 0 var(--space-2) var(--space-2);
  align-self: flex-start;
}

.pane-toggle:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.pane-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* A CSS-drawn chevron, not a font glyph: the app already learned (see
   theme_controller.js) that decorative glyphs go missing from some font
   stacks, and this is the very control a stuck user most needs to see. */
.pane-toggle-icon {
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0 0 1.5px 1.5px;
  transform: rotate(45deg);
  transition: transform 0.12s ease;
}

html[data-rail-collapsed] .rail-toggle .pane-toggle-icon,
html[data-sidebar-collapsed] .sidebar-toggle .pane-toggle-icon {
  transform: rotate(225deg);
}

html[data-rail-collapsed] .folder-rail {
  width: 36px;
  padding: var(--space-2) 0;
  align-items: center;
}

html[data-rail-collapsed] .rail-content {
  display: none;
}

html[data-rail-collapsed] .rail-header {
  padding: 0;
  justify-content: center;
}

html[data-rail-collapsed] .folder-rail .brand-name {
  display: none;
}

html[data-sidebar-collapsed] .sidebar {
  width: 36px;
  align-items: center;
}

html[data-sidebar-collapsed] .sidebar-content {
  display: none;
}

html[data-sidebar-collapsed] .sidebar-toggle {
  align-self: center;
  margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .folder-rail,
  .sidebar,
  .pane-toggle-icon,
  .pane-toggle-logo {
    transition: none;
  }
}

/* The demo clips on the landing page: a framed figure, never a bare video.
   The poster carries the story when motion is blocked or the file is slow. */
.landing-demo {
  margin: var(--space-6) auto 0;
  max-width: 860px;
}

.landing-demo__video {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--bg-raised);
}

.landing-demo__caption {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  color: var(--text-muted);
  text-align: center;
}

/* The quiet colophon on public shared pages -- the only place the app
   advertises, and it does it to exactly the right reader. */
.made-with {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  text-align: center;
}

.made-with__link {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
}

.made-with__link:hover {
  color: var(--accent);
}

.landing-slogan {
  margin: var(--space-2) 0 0;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.marketing-legal {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) 0 var(--space-6);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.marketing-legal a:hover {
  color: var(--text);
}

/* The failed attempts from the original BrainLog photo, scattered around the
   hero and the sign-in card. Soft vignettes: they melt into the paper
   background in light mode and ghost back in dark. Never interactive, never
   above content, gone on small screens. */
.paper-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.landing-hero,
.auth-page {
  position: relative;
}

.landing-hero > *:not(.paper-scatter),
.auth-page > *:not(.paper-scatter) {
  position: relative;
  z-index: 1;
}

.paper {
  position: absolute;
  opacity: 0.85;
}

/* Both the landing and the sign-in page spread the papers across the whole
   viewport, hugging the margins so they never sit under the content column. */
.paper-scatter {
  position: fixed;
}

.paper-a { top: 4%;   right: 6%;  width: 150px; transform: rotate(8deg); }
.paper-b { top: 34%;  left: 3%;   width: 120px; transform: rotate(-6deg); }
.paper-c { top: 60%;  right: 4%;  width: 130px; transform: rotate(14deg); }
.paper-d { bottom: 6%; right: 22%; width: 110px; transform: rotate(-12deg); }
.paper-e { bottom: 9%; left: 14%; width: 115px; transform: rotate(5deg); }
.paper-f { top: 7%;   left: 17%;  width: 125px; transform: rotate(-15deg); }

@media (max-width: 1100px) {
  .paper-scatter { display: none; }
}

.pricing-alt {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.docs-toc {
  max-width: 44rem;
  margin: 0 auto var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-sidebar);
}

.docs-toc h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.docs-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-md);
}

.docs-toc a {
  color: var(--accent);
}

.docs-toc a:hover {
  text-decoration: underline;
}

.legal-list {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--text-muted);
}

.legal-list li {
  margin-bottom: var(--space-1);
}

.legal-list strong {
  color: var(--text);
}

/* ------------------------------------------------------------------- brand */

.brand-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.auth-mark {
  width: 96px;
  height: 96px;
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 18%));
}

.auth-page h1 {
  margin: 0 0 var(--space-1);
  /* brain + LOG. A log is a text file, so the wordmark is set like one. */
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.auth-tagline {
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* The sign-in page is now a brand moment: centre the lockup and the wordmark. */
.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.auth-page form {
  width: 100%;
}

/* ===========================================================================
   THE CHROME SPEAKS MONOSPACE

   Everything the app says about your file -- folder and section names, the view
   switcher, board columns, due dates, assignees, line numbers -- is set in the
   file's own typeface. Everything YOU wrote stays proportional. The two voices
   never blur, and you can always tell which side of the screen you are reading.
   =========================================================================== */

.brand-name,
.folder-rail h1,
.folder-list-item a,
.sidebar-header .title-edit,
.section-header .title-edit,
.page-link,
.view-tab,
.menu-item,
.ghost-button,
.theme-toggle,
.rail-link,
.search-input,
.new-item-form input,
.board-column h3,
.board-card-meta,
.board-card-source,
.task-due,
.task-assignee,
.save-status,
.collaborators,
.due-group h3,
.empty-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: -0.01em;
}

/* The wordmark is a log line: lowercase, monospace, no flourish. */
.brand-name {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.folder-rail h1 {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
}

.sidebar-header .title-edit {
  font-size: var(--text-md);
  font-weight: 600;
}

.section-header .title-edit {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.page-link,
.folder-list-item a {
  font-size: var(--text-sm);
}

/* --- the board, which is the argument -------------------------------------
   A card sits in a column because of five characters the writer typed. The
   header says which five. The board doubles as the syntax reference, so nobody
   has to be told where tasks come from. */

.board-column h3 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.board-marker {
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-sidebar);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  white-space: pre;
}

.board-name {
  color: var(--text-muted);
}

.board-count {
  margin-left: auto;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Provenance. The card is a view; this is the address of the thing it is a view of. */
.board-card-source {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-faint);
  font-size: var(--text-2xs);
}

.board-card-source:hover .source-page {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.source-line {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.board-card-text {
  font-family: var(--font-sans);
  font-size: calc(var(--text-md) * var(--board-card-scale, 1));
  line-height: 1.45;
}

.board-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: calc(var(--text-2xs) * var(--board-card-scale, 1));
  color: var(--text-muted);
}

.task-due.overdue {
  color: var(--danger);
}

/* Search hits get the highlighter -- the one place colour is allowed to shout. */
mark,
.search-hit {
  padding: 0 2px;
  border-radius: 2px;
  background: var(--marker);
  color: inherit;
}

/* The page toolbar sticks to the top of the scrolling pane, and now carries the
   + Table / + Board / + Tasks buttons. They used to live inside the editor content,
   where they scrolled away from the writer as soon as a note got long -- a control
   you have to scroll back up to reach is a control you stop using. */
.editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  gap: var(--space-3);
  background: var(--bg);
  border-bottom: 1px solid transparent;
}

/* Once you scroll past it, give it an edge so it reads as chrome over the text. */
.content-pane:not([data-at-top]) .editor-toolbar {
  border-bottom-color: var(--border);
}

/* Inside the toolbar the insert bar is just a group of buttons: no pill, no shadow,
   no sticky of its own -- the toolbar does that job now. */
.editor-toolbar .brainlog-editor__insert {
  position: static;
  display: flex;
  gap: var(--space-1);
  margin: 0 0 0 auto;
  width: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Marketing pages ("/" for signed-out visitors, "/pricing")

   Same shell as the other public surfaces (public.html.erb, .public-page):
   one calm column, the mono/serif split the rest of the app uses, no new
   colours. These pages sell nothing directly -- there is no checkout -- so
   there is nothing here that needs to look like a SaaS template.
   --------------------------------------------------------------------------- */

.marketing-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-6);
}

.marketing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.marketing-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.marketing-nav-mark {
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 12%));
}

.marketing-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.marketing-nav-links a {
  color: var(--text-muted);
}

.marketing-nav-links a:hover {
  color: var(--text);
}

.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-5) 0 var(--space-6);
}

.landing-mark {
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 18%));
}

.landing-hero h1 {
  margin: 0 0 var(--space-3);
  /* Same wordmark treatment as the sign-in page: a log is a text file. */
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.landing-tagline {
  max-width: 34rem;
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.landing-section {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
}

.landing-section h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
}

.landing-section p {
  max-width: 42rem;
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  line-height: 1.65;
}

.landing-section p:last-child {
  margin-bottom: 0;
}

.landing-section code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--bg-hover);
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

.feature-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
}

.feature-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: 1.6;
}

.landing-footer {
  padding: var(--space-6) 0 var(--space-5);
  border-top: 1px solid var(--border);
  text-align: center;
}

.landing-footer .landing-tagline {
  margin: 0 auto var(--space-4);
}

/* ------------------------------------------------------------- pricing */

.pricing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin: 0;
}

.pricing-plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: var(--shadow);
}

.plan-badge {
  align-self: flex-start;
  margin-bottom: var(--space-2);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-sidebar);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

.pricing-plan h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
}

.pricing-price {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-md);
}

.pricing-plan ul {
  flex: 1;
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: 1.7;
}

.pricing-plan .primary-button,
.pricing-plan .ghost-button {
  align-self: flex-start;
}

.pricing-hint {
  margin: var(--space-3) 0 0;
  color: var(--text-faint);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.pricing-faq {
  margin: 0;
}

.pricing-faq dt {
  margin-top: var(--space-3);
  color: var(--text);
  font-weight: 600;
  font-size: var(--text-md);
}

.pricing-faq dt:first-child {
  margin-top: 0;
}

.pricing-faq dd {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: 1.6;
}

@media (max-width: 520px) {
  .landing-hero h1 {
    font-size: var(--text-2xl);
  }

  .landing-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-actions .primary-button,
  .landing-actions .ghost-button {
    text-align: center;
  }
}

/* ------------------------------------------------------ notifications

   A floating button, bottom-right of the app shell, signed-in pages only
   (see layouts/application.html.erb). It is a <details class="share-control">
   like the Share/Invite panels, so popovers.js already gives it click-outside
   / Escape / fixed-position-clamped-to-viewport for free -- positionPanel()
   naturally opens it ABOVE the button here, since the button sits at the
   bottom of the viewport and there is no room below. */

.notifications-control {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 40;
}

.notifications-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.notifications-control[open] .notifications-button {
  background: var(--bg-raised);
  border-color: var(--accent);
}

.notifications-mark {
  display: block;
  width: 22px;
  height: 22px;
}

.notifications-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.notifications-badge[hidden] {
  display: none;
}

/* Two classes on the same element on purpose: .share-panel-frame is what
   popovers.js repositions to position:fixed above/below its trigger;
   .notifications-panel only overrides its size and stacking so it draws
   above the (also fixed) button rather than under it. */
.notifications-panel.share-panel-frame {
  right: 0;
  z-index: 41;
  width: 320px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
}

.notifications-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
  font-weight: 600;
}

.notifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.notification-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.notification-row.overdue {
  background: color-mix(in srgb, var(--danger) 6%, var(--bg));
}

.notification-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notification-row-text {
  font-size: var(--text-sm);
  color: var(--text);
}

.notification-row-text:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---------------------------------------------------------------------------
   Encrypted folders

   The chrome for end-to-end encrypted folders stays calm: a small monospace
   chip on the folder (chrome speaks the file's language), and an unlock panel
   that reads like part of the page, not a modal interruption.
   --------------------------------------------------------------------------- */
.encrypted-chip {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1px var(--space-1);
  white-space: nowrap;
  cursor: help;
}

.encrypt-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  cursor: pointer;
}

.unlock-panel {
  max-width: 460px;
  margin: var(--space-6) auto;
  padding: var(--space-5);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}

.unlock-panel__heading {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  margin: 0 0 var(--space-2);
}

.unlock-panel__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}

.unlock-panel form {
  display: flex;
  gap: var(--space-2);
}

.unlock-panel__input {
  flex: 1;
  font-family: var(--font-mono);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.unlock-panel__error {
  color: var(--danger);
  font-size: var(--text-sm);
  margin: var(--space-3) 0 0;
}

/* ------------------------------------------------------------ phone shell

   The three-pane shell is the desktop layout and the app's whole spatial
   idea: folders, the pages in one, the page itself, side by side. A phone has
   room for exactly one of them -- the rail and sidebar alone are 500px before
   a word of the note -- so below 820px it becomes a drill-down: folders ->
   pages -> content, one at a time, with .mobile-bar as the way back up.

   Which level shows is data-level on .app-shell, set from the URL by
   mobile_nav_controller.js. The panes that are not the current level stay
   RENDERED and are hidden with display:none: the bar reads the folder's name
   out of the sidebar it is not showing, and hiding is what keeps the markup
   identical to the desktop's -- there is no phone-only shell to drift. */

.mobile-bar {
  display: none;
}

@media (max-width: 820px) {
  .mobile-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: fixed;
    inset: 0 0 auto;
    z-index: 30;
    height: 44px;
    padding: 0 var(--space-3);
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
  }

  .mobile-bar[hidden] {
    display: none;
  }

  .mobile-bar__back {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
    /* A back control is the one thing that must never be missed by a thumb. */
    min-height: 44px;
    padding-right: var(--space-2);
    color: var(--accent);
    font-size: var(--text-base);
    text-decoration: none;
  }

  .mobile-bar__chevron {
    font-size: var(--text-xl);
    line-height: 1;
  }

  .mobile-bar__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    color: var(--text-muted);
    font-size: var(--text-md);
  }

  /* dvh, not vh: with vh the browser chrome overlaps the last 60-odd pixels,
     which is exactly where a note's last line sits. */
  .app-shell {
    height: 100dvh;
  }

  /* Room for the bar only where the bar is. The top level has nothing to go
     back to, so it shows no bar and gives the folder list those 44px. */
  .app-shell[data-level="pages"],
  .app-shell[data-level="content"] {
    padding-top: 44px;
  }

  /* One pane at a time. Each is the whole width when it is the one showing.

     Gated on [data-level] deliberately: the attribute only exists once
     mobile_nav_controller has said which level this is. Hiding the panes
     before then -- or if that script never runs -- would leave a blank screen
     rather than a cramped one, which is the worse of the two failures. */
  .app-shell[data-level] > .folder-rail,
  .app-shell[data-level] .sidebar,
  .app-shell[data-level] #content,
  .app-shell[data-level] > turbo-frame#main_pane {
    display: none;
  }

  .app-shell[data-level="folders"] > .folder-rail {
    display: flex;
    width: 100%;
    border-right: 0;
  }

  .app-shell[data-level="pages"] > turbo-frame#main_pane,
  .app-shell[data-level="content"] > turbo-frame#main_pane {
    display: flex;
    flex: 1;
    min-width: 0;
  }

  .app-shell[data-level="pages"] .sidebar {
    display: flex;
    width: 100%;
    border-right: 0;
  }

  .app-shell[data-level="content"] #content {
    display: flex;
    flex: 1;
    min-width: 0;
  }

  /* Search renders its content pane as a direct child of the shell, with no
     frame around it -- it is a destination, not a level. */
  .app-shell[data-level="content"] > .content-pane {
    display: flex;
    flex: 1;
  }

  /* The collapse toggles are a desktop affordance for a layout the phone does
     not have; on one pane at a time they would only ever hide the screen. */
  .pane-toggle {
    display: none;
  }

  /* The note's own chrome, at the width it actually has. The toolbar was
     laid out for a pane 3x this wide and had started breaking "Just you"
     across two lines to fit. */
  .editor-toolbar {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) 0;
  }

  .page-title-input {
    font-size: var(--text-2xl);
    padding: var(--space-3) var(--space-3) var(--space-1);
  }

  .settings-page {
    padding: var(--space-4) var(--space-3);
  }

  /* Reading a table on a phone means scrolling it, not reflowing every row
     into a paragraph. */
  .settings-table {
    display: block;
    overflow-x: auto;
  }

  /* Clear of the home indicator, and of a thumb reaching the last line. */
  .notifications-control {
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
}

.encrypt-note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-2xs);
  line-height: 1.45;
  color: var(--text-faint);
}

/* ------------------------------------------------- email delivery control

   Three states, one row, off always visible -- the promise is that stopping
   the emails is never more than one click from wherever you are. */
.email-delivery {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.email-delivery form + form {
  border-left: 1px solid var(--border-strong);
}

.email-delivery__option {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
}

.email-delivery__option:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.email-delivery__option.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.menu-email {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
}

.menu-email__label {
  display: block;
  font-size: var(--text-2xs);
  color: var(--text-faint);
  margin-bottom: var(--space-1);
}

.email-folder-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.email-folder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.email-folder-name {
  font-weight: 600;
}

/* A collaborator's rail: where "+ New folder" would sit, the reason it isn't. */
.rail-upsell {
  margin: var(--space-2) var(--space-2) 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}