/*
 * 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;
}

/* ---------------------------------------------------------------------------
   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: #9b968b;

  --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: #736f68;

  --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: #736f68;

    --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: 15px;
  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 */

.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: 13px;
  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: 16px;
  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: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

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

.page-row:hover .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: 12px;
  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: 12px;
}

.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: 30px;
  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: 17px;
  line-height: 1.7;
  max-width: 760px;
}

/* ------------------------------------------------------------ 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);
}

.ghost-button {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

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

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

.primary-button {
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-weight: 500;
}

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

/* .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: 18px;
  margin-bottom: var(--space-2);
}

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

.empty-hint {
  color: var(--text-faint);
  font-size: 13px;
  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: 13px;
  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: 11px;
  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: 22px;
  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: 12px;
  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: 13px;
  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: 13px;
  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: 12px;
  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: 12px;
  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(14px * var(--board-card-scale, 1));
  margin-bottom: var(--space-1);
}

.board-card-meta {
  display: flex;
  gap: var(--space-2);
  font-size: calc(12px * 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: 11px;
  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: 15px;
}

.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: 12px;
  color: var(--text-faint);
  margin: 2px 0;
}

.search-snippet {
  font-size: 13px;
  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: 14px;
}

.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: 13px;
}

/* 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: 12px;
  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 */

.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: 13px;
  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: 13px;
  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: 12px;
}

.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: 12px;
}

.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: 11px;
}

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

.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: 13px;
}

.public-page h1.public-page-title {
  font-family: var(--font-serif);
  font-size: 32px;
  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: 17px;
  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: 26px; }
.markdown-content h2 { font-size: 21px; }
.markdown-content h3 { font-size: 18px; }

.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: 13px;
  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: 13px;
  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: 12px;
  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: 12px;
  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;
}

/* 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: 28px;
}

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

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

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

.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: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
}

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

.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: 13px;
  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: 12px;
  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: 12px;
}

.settings-form input {
  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: 14px;
}

.settings-form input: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;
}

/* 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;
  }
}

.landing-slogan {
  margin: var(--space-2) 0 0;
  font-family: var(--font-serif);
  font-size: 26px;
  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: 12px;
}

.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: 13px;
  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: 12px;
  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: 14px;
}

.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: 14px;
  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: 17px;
  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: 26px;
  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: 12.5px;
}

/* 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: 12.5px;
  letter-spacing: -0.01em;
}

/* The wordmark is a log line: lowercase, monospace, no flourish. */
.brand-name {
  font-family: var(--font-mono);
  font-size: 14px;
  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: 14px;
  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: 13px;
}

/* --- 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: 11.5px;
  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: 11.5px;
}

.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(14px * 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(11.5px * 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: 13px;
}

.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: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.landing-tagline {
  max-width: 34rem;
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
  font-size: 17px;
  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: 21px;
}

.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: 15px;
  font-weight: 600;
}

.feature-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  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: 11px;
}

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

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

.pricing-plan ul {
  flex: 1;
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  color: var(--text-muted);
  font-size: 14px;
  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: 12.5px;
  line-height: 1.6;
}

.pricing-faq {
  margin: 0;
}

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

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

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

@media (max-width: 520px) {
  .landing-hero h1 {
    font-size: 26px;
  }

  .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: 11px;
  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: 14px;
  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: 13px;
  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: 10px;
  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: 11px;
  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: 15px;
  margin: 0 0 var(--space-2);
}

.unlock-panel__hint {
  font-size: 13px;
  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: 13px;
  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: 15px;
    text-decoration: none;
  }

  .mobile-bar__chevron {
    font-size: 22px;
    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: 14px;
  }

  /* 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: 24px;
    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));
  }
}

/* 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: 12.5px;
  color: var(--text-muted);
}