/* =============================================================
   Architeeli — design system + app shell.
   Adapted from the Anthropic design canvas.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

:root {
  --brand-cyan:        #00FFFF;
  --brand-cyan-soft:   #7CFCFC;
  --brand-cyan-deep:   #00B8C4;
  --brand-cyan-ink:    #006873;
  --brand-cyan-glow:   rgba(0,255,255,0.18);
  --brand-cyan-line:   rgba(0,255,255,0.35);

  --bg-0:  #06090E;
  --bg-1:  #0B0F16;
  --bg-2:  #121823;
  --bg-3:  #1A2230;
  --bg-4:  #232D3E;

  --border-1: #1F2837;
  --border-2: #2A3548;
  --border-3: #3A485F;

  --fg-0:  #F4F7FB;
  --fg-1:  #C7D1DD;
  --fg-2:  #8E9AAB;
  --fg-3:  #5E6A7C;
  --fg-4:  #3F4A5C;

  --paper-0: #FFFFFF;
  --paper-1: #F7F9FB;
  --paper-2: #EEF2F6;
  --paper-3: #DEE5EC;
  --ink-0:   #0B0F16;
  --ink-1:   #2A3548;
  --ink-2:   #5E6A7C;

  --info:    #00FFFF;
  --success: #4ADE80;
  --warning: #F5B547;
  --danger:  #F87171;
  --info-bg:    rgba(0,255,255,0.10);
  --success-bg: rgba(74,222,128,0.12);
  --warning-bg: rgba(245,181,71,0.12);
  --danger-bg:  rgba(248,113,113,0.12);

  --font-sans:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Geist', system-ui, sans-serif;
  --font-doc:     'Fraunces', Georgia, serif;

  --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 8px; --r-5: 12px; --r-full: 999px;
  --ring-focus: 0 0 0 3px var(--brand-cyan-glow), 0 0 0 1px var(--brand-cyan);

  --dur-1: 120ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Body type scale bumped 2026-05-23 — user: 'troche zwiekszyc czcionke
   tego standardowego tekstu, 12px jest nieczytelne'. Base lifted 14→15.
   Sidebar + right-rail bumps + all small mono labels also bumped to
   stay legible (see overrides below). Headings (.h1/.h2/.h3) untouched
   since those already read fine at their established sizes. */
body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-cyan-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── App grid: topbar + sidebar + workspace ─────────────────────────────── */
.app {
  width: 100%; height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 60px 1fr;
  overflow: hidden;
  transition: grid-template-columns .18s ease;
}

/* Collapsed-sidebar mode: narrow rail (~52px) showing only icons.
   Toggled by the chevron at the top of the sidebar; default state on
   arcdoc pages so the doc gets maximum reading width. User pref is
   persisted in localStorage (see core.js attachSidebarToggle). */
html.sidebar-collapsed .app { grid-template-columns: 36px 1fr; }
/* Collapsed rail: HIDE EVERYTHING except the chevron toggle.
   User-requested: 'nie umieszczaj tez tam wszystkich mozliwych ikonek
   ktore i tak nic nie robia'. So when the sidebar is folded away the
   only affordance is the toggle itself — a clean narrow gutter with
   a single chevron, no useless company icons cluttering it.
   IMPORTANT: every selector scopes to `.sidebar` (the LEFT app chrome
   rail) — NOT `.sb-row` globally. The arcdoc chapter column inside
   arcdoc_detail.mako reuses .sb-row and must stay intact. */
html.sidebar-collapsed .app .sidebar > * { display: none; }
html.sidebar-collapsed .app .sidebar .sidebar-toggle { display: flex; }
html.sidebar-collapsed .app .sidebar { padding: 0; }

/* The expand/collapse toggle pinned to the sidebar's top-right edge.
   Rotates the chevron based on state so it always points the way the
   sidebar is about to move. */
.sidebar-toggle {
  position: absolute;
  top: 14px;
  right: -12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--fg-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: background .12s, color .12s, border-color .12s, transform .18s;
  padding: 0;
}
.sidebar-toggle:hover {
  background: var(--bg-3);
  color: var(--brand-cyan);
  border-color: var(--brand-cyan);
}
.sidebar-toggle svg {
  width: 12px; height: 12px;
  transition: transform .18s ease;
}
html.sidebar-collapsed .app .sidebar-toggle svg { transform: rotate(180deg); }
/* Hide the toggle on mobile — the drawer pattern (hamburger) wins below 900px. */
@media (max-width: 900px) {
  .sidebar-toggle { display: none; }
  html.sidebar-collapsed .app { grid-template-columns: 1fr; }
}

/* ── TopBar ──────────────────────────────────────────────────────────────── */
.topbar {
  grid-column: 1 / -1; grid-row: 1;
  display: flex; align-items: stretch;
  padding: 0 14px 0 12px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-1);
  z-index: 3;
}
.topbar .brand { display: flex; align-items: center; padding: 0 12px 0 0; border-right: 1px solid var(--border-1); }
.topbar .brand a { display: flex; align-items: center; }
.topbar .brand img { height: 50px; width: auto; display: block; margin: 0; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 0 14px; border-right: 1px solid var(--border-1); }
.crumbs .sep { color: var(--fg-4); }
.crumbs .ws  { color: var(--fg-2); font-family: var(--font-mono); font-size: 11.5px; }
.crumbs .cur { color: var(--fg-0); font-weight: 500; }
.tabs { display: flex; align-items: stretch; padding: 0 8px; gap: 2px; flex: 1 1 auto; min-width: 0; }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px;
  font-size: 13px; color: var(--fg-2);
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; margin-bottom: -1px; height: 100%;
  font-family: var(--font-sans); text-decoration: none;
}
.tab:hover { color: var(--fg-0); }
.tab.active { color: var(--fg-0); border-bottom-color: var(--brand-cyan); }
.tab .count {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3);
  padding: 2px 6px; background: var(--bg-3); border-radius: 999px;
}
.top-right { display: flex; align-items: center; gap: 8px; padding-left: 8px; }
.search-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: var(--bg-0); border: 1px solid var(--border-1);
  border-radius: 6px; color: var(--fg-3); font-size: 12px;
  min-width: 280px; cursor: pointer; font-family: var(--font-sans);
}
.search-trigger > span:first-child { flex: 1; text-align: left; }
.search-trigger:hover { border-color: var(--border-2); color: var(--fg-1); }

/* ── Search modal ────────────────────────────────────────────────────────── */
.search-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.search-modal[hidden] { display: none; }
.search-modal-backdrop { position: absolute; inset: 0; background: rgba(6,9,14,.72); backdrop-filter: blur(4px); }
.search-modal-panel {
  position: relative; width: min(640px, 92vw);
  background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: var(--r-4);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  max-height: 70vh; overflow: hidden;
}
.search-modal-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border-1);
}
.search-modal-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--font-sans); font-size: 15px; color: var(--fg-0);
}
.search-modal-input::placeholder { color: var(--fg-4); }
.search-modal-results { overflow: auto; flex: 1; padding: 6px 0; }

.search-hit {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 16px; cursor: pointer;
  border-left: 2px solid transparent;
  text-decoration: none; color: inherit;
}
.search-hit:hover, .search-hit.active {
  background: var(--bg-3); border-left-color: var(--brand-cyan);
}
.search-hit-title { font-size: 13.5px; color: var(--fg-0); font-weight: 500; line-height: 1.3; }
.search-hit-meta { font-size: 12px; color: var(--fg-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11.5px;
  min-width: 20px; height: 18px; padding: 0 5px;
  background: var(--bg-3); color: var(--fg-1);
  border: 1px solid var(--border-2);
  border-bottom-width: 2px; border-radius: 4px;
}
.avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--border-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--brand-cyan);
  font-family: var(--font-mono);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  grid-column: 1; grid-row: 2;
  background: var(--bg-1);
  border-right: 1px solid var(--border-1);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;     /* anchor for .sidebar-toggle */
}
.workspace-pill {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 12px 6px; padding: 8px 10px;
  background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: 8px;
}
.workspace-pill .ws-glyph {
  width: 26px; height: 26px; border-radius: 4px;
  background: var(--bg-4); color: var(--brand-cyan);
  font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.workspace-pill .ws-name { font-size: 14px; color: var(--fg-0); font-weight: 500; }
.workspace-pill .ws-sub { font-size: 12px; color: var(--fg-3); font-family: var(--font-mono); margin-top: 1px; }
.sb-section {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 6px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.sb-section::-webkit-details-marker { display: none; }
.sb-section::marker { content: ""; }
.sb-section:hover { color: var(--fg-1); }
.sb-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; color: var(--fg-3);
  transition: transform 120ms cubic-bezier(.2,.7,.2,1);
}
details.sb-group:not([open]) > .sb-section .sb-caret { transform: rotate(-90deg); }
details.sb-group { display: contents; }
details.sb-group-grow { display: flex; flex-direction: column; flex: 1; min-height: 0; }
details.sb-group-grow > .sb-tree { flex: 1; }
.sb-section .add {
  width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px; cursor: pointer; color: var(--fg-3); border: none; background: transparent;
}
.sb-section .add:hover { background: var(--bg-3); color: var(--fg-0); }
.sb-tree { padding: 0 6px; overflow: auto; }
.sb-tree.flex-grow { flex: 1; min-height: 0; }
.sb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 4px;
  cursor: pointer; font-size: 14px;
  color: var(--fg-1);
  border-left: 2px solid transparent;
  margin-left: 4px; text-decoration: none;
  line-height: 1.35;
}
.sb-row:hover { background: var(--bg-2); }
.sb-row.active { background: var(--bg-4); border-left-color: var(--brand-cyan); color: var(--fg-0); }
.sb-row .glyph { width: 16px; flex: 0 0 16px; color: var(--fg-3); display: inline-flex; align-items: center; justify-content: center; }
.sb-row .glyph svg { display: block; }
.sb-row.active .glyph { color: var(--brand-cyan); }
.sb-row .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-row .count { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); }
.sb-row.indent { padding-left: 22px; }
.sb-row.indent2 { padding-left: 36px; }
.sb-row.indent3 { padding-left: 50px; }
.sb-row.muted { color: var(--fg-3); }

.sb-mini-section {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 4px 22px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-4); user-select: none;
}
.sb-mini-section.indent2 { padding-left: 36px; }
.sb-mini-section.indent3 { padding-left: 50px; }
.sb-mini-section .add { color: var(--fg-3); padding: 0 4px; text-decoration: none; }
.sb-mini-section .add:hover { color: var(--fg-0); }

.sb-footer {
  margin-top: auto; padding: 10px 12px;
  border-top: 1px solid var(--border-1);
  display: flex; align-items: center; gap: 8px;
}

/* ── Workspace pane ──────────────────────────────────────────────────────── */
.work {
  grid-column: 2; grid-row: 2;
  background: var(--bg-0);
  overflow: auto;
  min-height: 0;
}
.work-inner { max-width: 1100px; margin: 0 auto; padding: 32px 40px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px;
  font-size: 13px; font-weight: 500;
  border-radius: var(--r-3); border: 1px solid transparent;
  background: transparent; color: var(--fg-1);
  white-space: nowrap; font-family: var(--font-sans);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.btn.primary { background: var(--brand-cyan); color: #06090E; font-weight: 600; }
.btn.primary:hover { background: var(--brand-cyan-soft); }
.btn.secondary { background: var(--bg-3); border-color: var(--border-2); color: var(--fg-0); }
.btn.secondary:hover { background: var(--bg-4); }
.btn.ghost { color: var(--fg-1); }
.btn.ghost:hover { background: var(--bg-3); color: var(--fg-0); }
.btn.icon { width: 32px; padding: 0; justify-content: center; }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn.lg { height: 38px; padding: 0 18px; font-size: 14px; }
.btn.danger { color: var(--danger); border-color: rgba(248,113,113,0.35); }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.input, .textarea, .select {
  width: 100%;
  background: var(--bg-0);
  color: var(--fg-0);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  padding: 8px 11px;
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-4); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand-cyan); box-shadow: var(--ring-focus);
}
.textarea { resize: vertical; line-height: 1.6; min-height: 100px; }

/* ── Chips & pills ───────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.06em; padding: 3px 7px;
  border-radius: 2px; text-transform: uppercase;
}
.chip.cyan { background: rgba(0,255,255,0.10); color: var(--brand-cyan); }
.chip.container { background: rgba(31,111,235,0.18); color: #6BA0FF; }
.chip.component { background: rgba(111,66,193,0.22); color: #B59CFF; }
.chip.context { background: rgba(0,184,196,0.18); color: #6FE2EA; }
.chip.mermaid { background: rgba(20,184,166,0.18); color: #5EEAD4; }
.chip.plantuml { background: rgba(217,119,6,0.18); color: #FBBF24; }
.chip.muted { background: var(--bg-3); color: var(--fg-2); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid; font-family: var(--font-sans);
}
.pill.success { color: var(--success); background: var(--success-bg); border-color: rgba(74,222,128,0.3); }
.pill.warning { color: var(--warning); background: var(--warning-bg); border-color: rgba(245,181,71,0.3); }
.pill.danger  { color: var(--danger);  background: var(--danger-bg);  border-color: rgba(248,113,113,0.3); }
.pill.info    { color: var(--brand-cyan); background: var(--info-bg); border-color: var(--brand-cyan-line); }
.pill.muted   { color: var(--fg-2); background: var(--bg-3); border-color: var(--border-2); }
.pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.eyebrow-mono {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-cyan);
}
.label-mono {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 6px; display: block;
}
.divider { height: 1px; background: var(--border-1); width: 100%; margin: 16px 0; }

.card {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-4);
  padding: 16px;
}

/* Clickable card-tile (a project/arcdoc/diagram/etc. card that is itself a link).
   Replaces the inline `display:block;text-decoration:none;color:inherit` pattern
   we used in 6+ templates and adds the hover affordance the bare `<a class="card">`
   was missing — users couldn't tell tiles were clickable.
   Pair with a trailing `<span class="card-cta">Open →</span>` inside the tile so
   the action is discoverable BEFORE hover. */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card-link:hover {
  border-color: var(--brand-cyan-line, var(--brand-cyan));
  box-shadow: 0 4px 14px rgba(0, 184, 196, .10);
  transform: translateY(-1px);
}
.card-link:hover .card-cta {
  /* Chip is already maxed-out cyan by default — hover just adds a
     subtle outer glow so the user gets feedback that the mouse is
     engaged. The card lift + cyan border (from .card-link:hover) carry
     most of the hover signal. */
  box-shadow: 0 0 0 3px var(--brand-cyan-glow);
}
.card-link:hover .card-cta-arrow {
  transform: translateX(3px);
}

/* The "Open →" action chip placed at the bottom of every clickable card tile.
   CYAN BY DEFAULT — discoverability matters more than minimalism. User
   should see at first glance that the tile has an action, not have to
   hover to find out. Hover just intensifies the shade for feedback. */
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-cyan);
  border: 1px solid var(--brand-cyan);
  color: var(--bg-0, #06090E);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background .15s, border-color .15s;
}
.card-cta-arrow { transition: transform .15s ease; display: inline-block; }

/* Stat-summary strip — small jump-link chips placed right under the page
   header on landing-style pages (company detail, project detail). Lets the
   user see "5 projects, 12 systems" at a glance and click to scroll, so
   content below the fold stops being invisible.
   Use as: <a class="chip chip-link" href="#projects">5 projects ↓</a> */
.chip-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .15s;
}
.chip-link:hover {
  border-color: var(--brand-cyan);
  transform: translateY(-1px);
}

/* Used on section header containers that are jump-link targets.
   Reserves space below the topbar so the anchored header doesn't slide
   under it on scroll. */
.section-anchor { scroll-margin-top: 80px; }

/* Generic 2-line text-clamp — use on tile descriptions where overflow
   should be visible-but-truncated (no inline expand). Click on the
   whole tile opens the full thing anyway.
   Implementation note: -webkit-line-clamp is a de-facto standard now
   (supported in Chrome/Safari/Firefox/Edge). The `display:-webkit-box`
   + `-webkit-box-orient` are required incantations. */
.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Peek-and-expand wrapper for detail-page descriptions. Default state:
   the text is line-clamped to 2 lines with a cyan "more" cue. When
   the user clicks to expand, the clamp lifts and the cue becomes
   "less". Pure CSS (uses native <details>'s [open] state), no JS.
   Use as:
     <details class="desc-peek"><summary><span>{long text}</span></summary></details>
*/
.desc-peek {
  margin: 6px 0 14px;
  max-width: 720px;
}
.desc-peek summary {
  list-style: none;
  cursor: pointer;
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.desc-peek summary::-webkit-details-marker { display: none; }
.desc-peek summary > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}
.desc-peek[open] summary > span {
  display: block;
  -webkit-line-clamp: unset;
}
.desc-peek summary::after {
  content: ' more';
  color: var(--brand-cyan);
  font-weight: 600;
  font-size: 12px;
  margin-left: 4px;
  font-family: var(--font-mono);
}
.desc-peek[open] summary::after { content: ' less'; }


/* ── Confirm modal ─────────────────────────────────────────────────────
   Replaces native browser confirm() for destructive actions across
   the app (delete company / project / arcdoc / artifact / diagram /
   provider / invite / member). Triggered by adding data-confirm="…"
   to a form or button — the JS in core.js intercepts and renders
   this overlay; on confirm it submits/clicks for real. */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(11, 15, 22, .65);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: modal-fade-in .12s ease-out;
}
@keyframes modal-fade-in { from { opacity: 0 } to { opacity: 1 } }

.modal-card {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-4);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  max-width: 440px; width: 100%;
  padding: 22px 24px 18px;
  font-family: var(--font-sans, -apple-system, sans-serif);
  animation: modal-slide-in .14s ease-out;
}
@keyframes modal-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  color: var(--fg-0);
  margin: 0 0 6px;
  line-height: 1.3;
}
.modal-body {
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.modal-actions .btn { min-width: 92px; }
/* Keyboard hint — tiny mono label tucked under the buttons. */
.modal-hint {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 10px;
  text-align: right;
}

/* ── Toast notifications ─────────────────────────────────────────────────
   Non-blocking replacement for native alert(). See window.notify() in
   core.js. Stacks bottom-right, click any toast to dismiss early. */
.toast-host {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 1100;
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}
.toast {
  min-width: 220px; max-width: 380px;
  background: var(--bg-1);
  color: var(--fg-1);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--fg-3);
  border-radius: var(--r-3, 6px);
  padding: 10px 14px;
  font-size: 13.5px; line-height: 1.45;
  font-family: var(--font-sans, -apple-system, sans-serif);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0; transform: translateX(20px);
  transition: opacity .18s ease, transform .18s ease;
  word-break: break-word;
}
.toast--in      { opacity: 1; transform: translateX(0); }
.toast--leaving { opacity: 0; transform: translateX(20px); }
.toast--success { border-left-color: var(--success, #4ade80); }
.toast--error   { border-left-color: var(--danger,  #f87171); color: var(--fg-0); }
.toast--warning { border-left-color: var(--warning, #f5b547); }
.toast--info    { border-left-color: var(--brand-cyan); }

/* ── Headings ────────────────────────────────────────────────────────────── */
.h-display { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: -0.022em; color: var(--fg-0); margin: 0; }
.h1 { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; color: var(--fg-0); margin: 0 0 8px; }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--fg-0); margin: 24px 0 8px; }
.h3 { font-weight: 600; font-size: 16px; color: var(--fg-0); margin: 18px 0 6px; }
.text-muted { color: var(--fg-2); }
/* Utility for free-text fields (descriptions, raw context, free notes).
   Preserves user-entered newlines + indentation, wraps long words at any
   character so an unbreakable token can't blow out a fixed-width card. */
.text-pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Empty states ────────────────────────────────────────────────────────── */
.empty {
  text-align: center; padding: 80px 24px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-4);
  background: var(--bg-1);
  color: var(--fg-2);
}
.empty h2 { margin: 0 0 8px; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-1); }
.form-row:last-child { border-bottom: none; }
.form-row .label-mono { margin: 4px 0 0; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 16px; }

/* ── HTMX indicator ──────────────────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-flex; }
.htmx-request.htmx-indicator { display: inline-flex; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-4); }
::-webkit-scrollbar-track { background: transparent; }


/* ════════════════════════════════════════════════════════════════════════
   Responsive (mobile + tablet)
   ════════════════════════════════════════════════════════════════════════
   Defaults above target desktop (≥900px). Below that the sidebar becomes
   an off-canvas drawer triggered by the hamburger in the topbar; the
   3-column ArcDoc detail collapses to one column with its own toggles
   for the chapter rail + icon rail.

   Breakpoints:
     900px  — phones + portrait tablets
     480px  — small phones (tighter type, hide the wordmark)
   ════════════════════════════════════════════════════════════════════════ */

/* The hamburger is desktop-hidden; flipped to inline-flex on mobile. */
.hamburger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  margin-right: 6px;
  background: transparent; border: 0;
  color: var(--fg-1); cursor: pointer; border-radius: 6px;
}
.hamburger:hover { background: var(--bg-3); color: var(--brand-cyan); }

/* Sidebar backdrop slot — visible only when .sidebar-open AND <900px. */
.sidebar-backdrop { display: none; }
/* ArcDoc mobile toolbar — hidden by default, shown in the <900px block. */
.ad-mobile-toggle { display: none; }


@media (max-width: 900px) {
  /* Defensive: prevent any stray element (long URL, wide image, etc.)
     from pushing the viewport horizontally on phones. */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* ── Shell: collapse to a single column ──────────────────────────── */
  .app { grid-template-columns: 1fr; width: 100vw; max-width: 100vw; }
  /* The desktop layout puts .work in grid-column:2; on mobile we only
     have one column, so without this override the workspace pane lands
     in an implicit column 2 (i.e. past the right edge of the screen). */
  .work { grid-column: 1; min-width: 0; }
  .work-inner { min-width: 0; }

  /* Hamburger surfaces, mode-switch tabs hide, search trims to icon. */
  .hamburger { display: inline-flex; }
  .tabs { display: none; }
  .crumbs { padding: 0 8px; }
  .crumbs .ws { display: none; }
  .topbar .brand img { height: 32px; }
  .top-right { padding-left: 4px; gap: 6px; }
  .search-trigger { min-width: 0; padding: 0 10px; }
  .search-trigger > span:first-child { display: none; }
  .search-trigger .kbd { display: none; }

  /* Sidebar becomes an off-canvas drawer slid in from the left. */
  .sidebar {
    position: fixed; top: 60px; bottom: 0; left: 0;
    width: 280px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .22s ease-out;
    z-index: 40;
    box-shadow: 4px 0 24px rgba(0,0,0,.45);
  }
  .app.sidebar-open .sidebar { transform: translateX(0); }
  .app.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed; inset: 60px 0 0 0;
    background: rgba(0,0,0,.55);
    z-index: 39;
  }

  /* Forms stack — label above the input, full width. */
  .form-row { grid-template-columns: 1fr; gap: 8px; }
  .form-actions { flex-wrap: wrap; gap: 8px; }
  .work-inner { padding: 18px 14px; max-width: 100%; }

  /* Cards / lists go full width with tighter padding. */
  .card { border-radius: 8px; }

  /* Tables that won't fit get horizontal scroll instead of overflow. */
  table { display: block; overflow-x: auto; }

  /* ── ArcDoc 3-column layout → single column ──────────────────────
     The chapter rail (.ad-left) and icon-rail panels (.ad-right) are
     hidden by default; the user re-summons them via the
     #ad-chapters-toggle (rendered in arcdoc_detail.mako) which sets
     a .chapters-open class on .arcdoc-grid.                          */
  .arcdoc-grid,
  .arcdoc-grid.right-open {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
  }
  .arcdoc-grid .ad-left {
    position: fixed; top: 60px; bottom: 0; left: 0;
    width: 280px; max-width: 84vw; z-index: 38;
    transform: translateX(-100%); transition: transform .22s ease-out;
    background: var(--bg-1); border-right: 1px solid var(--border-1);
    box-shadow: 4px 0 24px rgba(0,0,0,.45);
  }
  .arcdoc-grid.chapters-open .ad-left { transform: translateX(0); }
  /* Right rail (icon-rail + panels) is hidden on mobile — power-user
     surface, accessible via a separate toggle in the floating toolbar. */
  .arcdoc-grid .ad-right { display: none; }
  .arcdoc-grid.right-open .ad-right { display: none; }

  /* Floating "open chapters" FAB inside the central pane. The actual
     button is injected by arcdoc_detail.mako; we only style it here. */
  .ad-mobile-toggle {
    position: sticky; top: 0; z-index: 5;
    display: flex; gap: 8px; padding: 10px 14px;
    background: var(--bg-1); border-bottom: 1px solid var(--border-1);
  }
  .ad-mobile-toggle button {
    background: var(--bg-2); color: var(--fg-1); border: 1px solid var(--border-2);
    border-radius: 6px; padding: 6px 10px; font-size: 12.5px; cursor: pointer;
  }

  /* ── Diagram detail page ───────────────────────────────────────── */
  .dp-toolbar {
    grid-template-columns: 1fr !important; gap: 10px;
  }
  .dp-actions { min-width: 0; }
  .diagram-page.fmt-mermaid .dp-canvas {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 6px 1fr !important;
  }
  .diagram-page.fmt-mermaid .dp-canvas .dp-mermaid-code {
    border-right: 0; border-bottom: 1px solid var(--border-1);
  }
  .dp-split-handle { display: none; }   /* drag-resize doesn't make sense on touch */

  /* Editor block toolbar buttons wrap nicely. */
  .toastui-editor-toolbar-icons { padding: 0 2px !important; }
}


@media (max-width: 480px) {
  /* Tighter typography for small phones. */
  .h1 { font-size: 22px; }
  .h2 { font-size: 18px; }
  .work-inner { padding: 14px 10px; }
  .topbar { padding: 0 6px; }
  .topbar .brand img { display: none; }   /* the favicon already says "this is Architeeli" */
  .crumbs .cur { font-size: 12px; }
  .search-trigger { display: none; }       /* ⌘K not realistic on phone */
}