/* App shell styles: paper and ink with neutral tints. The editor's own styles live in /editor.css. */

/* Inter (SIL OFL 1.1), see src/client/fonts/OFL.txt. */
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/dist/fonts/Inter-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/dist/fonts/Inter-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/dist/fonts/Inter-roman-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/dist/fonts/Inter-roman-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 400 (SIL OFL 1.1), the subset hokum.app serves: only the home page's footer uses it, so only it loads it. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/dist/fonts/IBMPlexMono-400.woff2") format("woff2");
}

:root {
  /* Surfaces: paper for the page, neutral (very slightly cool) tints for the sidebar, drawer and hovers. */
  --paper: #fcfcfb;
  --paper-2: #f4f4f5;
  --paper-3: #ebebed;
  --tint-hover: #ececee;
  --tint-active: #e4e4e7;
  --code-bg: #f1f1f2;
  --ink: #1d1e22;
  --ink-2: #3f3f46;
  /* muted and grey-2: small grey text, >= 4.5:1 on paper, the tints and the code background */
  --muted: #62626a;
  --grey-2: #62626a;
  /* grey: borders of controls, >= 3:1 on paper */
  --grey: #8b8b93;
  /* hairlines around raised surfaces (menus, dialogs, secondary buttons) */
  --line: rgba(24, 24, 27, 0.12);
  --line-soft: rgba(24, 24, 27, 0.07);
  --blue: #296d9a;
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--blue);
  /* soft warm yellow: highlights and warnings (no red anywhere) */
  --warn: #e0a800;
  /* the one red: "Delete account" (irreversible); everything else destructive is ink */
  --red: #c62f28;
  --red-hover: #a8241e;
  --warn-soft: rgba(245, 197, 66, 0.26);
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow-pop: 0 1px 2px rgba(24, 24, 27, 0.06), 0 6px 20px rgba(24, 24, 27, 0.1);
  --shadow-modal: 0 2px 8px rgba(24, 24, 27, 0.06), 0 24px 64px rgba(24, 24, 27, 0.18);
  --sidebar-w: 272px;
  --history-w: 380px;
  --header-h: 52px;
  /* Type. Swap faces here; the editor reads the same tokens (with its own fallbacks). The platform font first (San
     Francisco on Apple devices, which picks its Text or Display cut and tracking from the size), Inter elsewhere
     (before system-ui, which would be Segoe UI or Cantarell); fonts.ts sets html.sysfont when it's San Francisco. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: var(--font-ui);
  --font-head: var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* small labels (notebook names, History, table heads) */
  --label-weight: 600;
  --label-size: 12px;
  --label-tracking: 0.005em;
  --label-case: none;
  /* headings in the shell (empty state, dialogs) */
  --head-weight: 650;
  --head-stretch: 100%;
  --head-tracking: -0.02em;
  /* slab logo: always Inter (the mark) */
  --logo-font: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --logo-weight: 800;
  --logo-stretch: 100%;
  --logo-tracking: 0.04em;
  /* the note's own type and colours: the .mde block at the top of editor-rs/editor.css (docs/typography.md) */
  --modal-head-tracking: -0.01em;
}

/* San Francisco: its own size-specific tracking (Text below 20pt, Display above), none of Inter's tuning. */
:root.sysfont {
  --label-tracking: 0;
  --head-tracking: 0;
  --modal-head-tracking: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
}

#app {
  height: 100%;
}

button,
input {
  font: inherit;
  color: inherit;
}

a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

kbd {
  font-family: var(--font-mono);
}

mark {
  background: var(--warn-soft);
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* thin, quiet scrollbars on the scrolling panes */
.sb-tree,
.doc-body,
.history-body,
.modal {
  scrollbar-width: thin;
  scrollbar-color: #cfcfd4 transparent;
}

.label {
  font: var(--label-weight) var(--label-size)/1.2 var(--font-ui);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-case);
}

.muted {
  color: var(--muted);
}

.pad {
  padding: 12px 18px;
}

.fatal {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
}

/* ---------- slab logo (the one inverted, square-edged element) ---------- */

.slab-blk {
  display: inline-block;
  padding: 9px 11px 8px;
  background: var(--ink);
  color: var(--paper);
  font: var(--logo-weight) 22px/1 var(--logo-font);
  font-stretch: var(--logo-stretch);
  letter-spacing: var(--logo-tracking);
  text-decoration: none;
}
.slab-sm {
  padding: 6px 8px 5px;
  font-size: 14px;
}

/* ---------- buttons ---------- */

/* Secondary (default): paper with a hairline. Primary: ink. Quiet: no frame, a tint on hover. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 1px 1px rgba(24, 24, 27, 0.04);
  color: var(--ink);
  cursor: pointer;
  font: 550 13px/1 var(--font-ui);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.12s, border-color 0.12s;
}
.btn:hover:not(:disabled) {
  background: var(--paper-2);
  border-color: rgba(24, 24, 27, 0.18);
}
.btn:active:not(:disabled) {
  background: var(--paper-3);
}
.btn:disabled {
  color: var(--muted);
  cursor: default;
  box-shadow: none;
  opacity: 0.7;
}
.btn-primary,
.btn-danger {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover:not(:disabled),
.btn-danger:hover:not(:disabled) {
  border-color: #000;
  background: #000;
}
.btn-primary:active:not(:disabled),
.btn-danger:active:not(:disabled) {
  background: var(--ink-2);
}
.btn-red {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}
.btn-red:hover:not(:disabled) {
  border-color: var(--red-hover);
  background: var(--red-hover);
}
.btn-red:active:not(:disabled) {
  background: var(--red-hover);
}
.btn-red:disabled {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  opacity: 0.45;
}
/* "Delete your account?": what goes, as a short list */
.delete-account .delete-list {
  margin: -6px 0 0;
  padding-left: 20px;
  line-height: 1.5;
}
.delete-account .delete-list li + li {
  margin-top: 2px;
}
.btn-primary:disabled {
  border-color: var(--paper-3);
  background: var(--paper-3);
  color: var(--muted);
  opacity: 1;
}
.btn-small {
  height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.icon-btn:hover,
.icon-btn[aria-expanded="true"] {
  background: var(--tint-active);
  color: var(--ink);
}
.icon-btn:focus-visible {
  outline-offset: 0;
}

.quiet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font: 550 13.5px/1.2 var(--font-ui);
}
.quiet-btn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.quiet-btn .plus {
  /* A drawn plus (two bars in a fixed square) rather than the "+" glyph, so it centres exactly on the text. */
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
}
.quiet-btn .plus::before,
.quiet-btn .plus::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.quiet-btn .plus::before {
  left: 0;
  right: 0;
  top: 4px;
  height: 2px;
}
.quiet-btn .plus::after {
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: 550 12.5px/1.2 var(--font-ui);
}
.link-btn:hover {
  color: var(--ink);
}

/* chevrons, drawn with two borders */
.chev {
  flex: none;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 5px 0 3px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg);
  transition: transform 0.12s;
}
[aria-expanded="true"] > .chev,
.chev-down {
  transform: translateY(-2px) rotate(45deg);
}

/* ---------- badges & avatars ---------- */

.badge {
  flex: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--tint-active);
  color: var(--ink-2);
  font: 550 10.5px/1.3 var(--font-ui);
}
.badge-error {
  background: var(--warn-soft);
  color: var(--ink);
}

.avatar {
  --c: #888;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  background: var(--c);
  color: #fff;
  font-weight: 650;
  letter-spacing: 0.02em;
  user-select: none;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-md {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
}
.avatar-md img {
  border-radius: inherit;
}
.agent-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font-size: 7.5px;
  letter-spacing: 0.06em;
  line-height: 11px;
  box-shadow: 0 0 0 1.5px var(--paper);
}
.avatar-more {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--tint-active);
  color: var(--ink-2);
  font-size: 10.5px;
}

/* ---------- inputs ---------- */

input[type="text"],
input[type="search"] {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  background: var(--paper);
  outline: none;
  font-size: 14px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input[type="text"]:hover,
input[type="search"]:hover {
  border-color: var(--ink-2);
}
input[type="text"]:focus,
input[type="search"]:focus {
  border-color: var(--blue);
}
input[type="text"]:focus-visible,
input[type="search"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(41, 109, 154, 0.22);
}
input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
input::placeholder {
  color: var(--muted);
}
input[type="checkbox"],
input[type="radio"] {
  margin: 0;
  accent-color: var(--ink);
}

/* ---------- home and /scratch (signed out) ---------- */

.home {
  position: relative;
  min-height: 100%;
}
/* The home page is taller than the window: #app grows with it (it's one window tall elsewhere), so the doodle's own
   element is under the pointer everywhere on the page. Beside the note, below the first screen, the pointer was over
   the bare <html>: the system arrow showed there, and Safari took moving onto it for leaving the page, hiding the
   pencil. */
#app.home {
  height: auto;
}
/* Above the fold on the home page: blank paper for the pencils (src/client/doodle). */
.home-hero {
  position: relative;
  height: max(100vh, 820px);
  height: max(100svh, 820px);
  user-select: none;
  -webkit-user-select: none;
}
/* Phones and tablets: a finger draws on this paper, so the top of the note peeks in below it, to scroll from */
@media (pointer: coarse) {
  .home-hero {
    height: max(calc(100svh - 150px), 460px);
  }
}
/* (not raised over the doodle's ink: above that composited, multiply-blended canvas the header would be a layer of
   its own, its text losing subpixel anti-aliasing and coming out soft. Under it, it's on the page's own layer like the
   rest of the text; the ink lets clicks through, and the pencil gives way over its links) */
.home-hero .home-top {
  position: relative;
  padding: 28px 36px 0;
}
/* plain text: the pencil draws straight over it */
.home-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 14px;
  white-space: nowrap;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.home-hero + .home-page {
  /* the scratch note explains the product: wide (1040px, less the page's padding on narrower screens) */
  max-width: calc(1040px + 2 * 40px);
  padding-top: 0;
}
.home-hero + .home-page .home-main {
  margin-top: 56px;
}
/* exactly as tall as the page's content (the doodle measures it without the canvas) */
.doodle-ink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}
/* sized by the doodle to the window it projects into (not 100vw/100vh: on phones 100vh is taller than the window
   while the toolbar shows, which stretched the pencils away from their ink) */
.doodle-gl {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  pointer-events: none;
}
/* The wall (src/client/landing/wall): the page's plastic, behind everything, and what crawls out of it, over the
   content but under the pencils. Neither takes the pointer. */
.wall-gl {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}
.wall-blood {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}
.wall-crawlers {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
  pointer-events: none;
}
.wall-debug {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(20, 20, 22, 0.88);
  color: #eee;
  font: 12px/1.3 "IBM Plex Mono", monospace;
  cursor: default;
}
.wall-debug-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wall-debug button {
  padding: 3px 7px;
  border: 1px solid #555;
  border-radius: 5px;
  background: #2a2a2e;
  color: #eee;
  font: inherit;
  cursor: pointer;
}
.wall-debug-speed {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wall-debug-speed input {
  cursor: pointer;
}
.doodle-labels {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 31;
  overflow: hidden;
  pointer-events: none;
}
.doodle-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 7px 3px;
  border-radius: 999px;
  background: var(--c, var(--ink-2));
  color: #fff;
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0.92;
}
.home .home-page {
  position: relative;
  z-index: 2;
}
.home.doodling,
.home.doodling * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Touch on the paper: one finger draws (the doodle), two scroll or zoom; no long-press callout, magnifier or tap
   flash. (pinch-zoom lets the browser do two-finger panning; where it isn't understood, none, and the doodle
   scrolls for two fingers itself.) */
.doodle-paper .home-hero {
  touch-action: none;
  touch-action: pinch-zoom;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Your cursor is a pencil, except over things you click, type in or select (the doodle's INTERACTIVE list hides
   the pencil over exactly these, so there's always one or the other). In a layer so any cursor the app or the
   editor sets on an element still wins. */
@layer doodle {
  .doodle-on,
  .doodle-on *,
  html:has(> body > .doodle-on),
  body:has(> .doodle-on) {
    cursor: none;
  }
  .doodle-on :is(a, button, label, summary, [role="button"]),
  .doodle-on :is(a, button, label, summary, [role="button"]) * {
    cursor: pointer;
  }
  .doodle-on .site-footer,
  .doodle-on .site-footer :not(a) {
    cursor: default;
  }
  .doodle-on :is(input, textarea, select, [contenteditable]),
  .doodle-on :is(.home-editor, .form-error),
  .doodle-on :is(.home-editor, .form-error) * {
    cursor: text;
  }
}
/* The landing page's bottom spacing, to tune: the big note to its buttons, and the buttons to the links row and the
   links row to the footer (the same gap both sides). */
.home {
  --home-cta-gap: 56px;
  --home-footer-gap: 160px;
}
@media (max-width: 640px) {
  .home {
    --home-cta-gap: 32px;
    --home-footer-gap: 88px;
  }
}
.home-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 40px var(--home-footer-gap, 72px);
}
/* the links row: --home-footer-gap below the buttons, and the page's bottom padding (the same gap) to the footer;
   plain links in the top-right link's quiet ink and type */
.home-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin-top: var(--home-footer-gap, 72px);
  line-height: 20px;
}
.home-links a {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
/* the dot between them: the same ink, not a link (14 px either side: about the old 28 px gap, split) */
.home-links-dot {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 550;
  user-select: none;
}
.home-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}
/* hokum.app's footer (opentunnel's): the Anomaly copyright, its signature faintly behind the line, both centred, here
   light, on the page's own paper. Over the ink (the paper covers it) and the system cursor, not the pencil. */
.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 64px 0;
  background: var(--paper);
}
.copyright {
  position: relative;
  color: #8a8a8f;
  font: 400 13px/24px "IBM Plex Mono", monospace;
  font-variant-numeric: normal;
}
.copyright .signature {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.copyright .signature path {
  fill: #e8e8e6;
}
.copyright p {
  position: relative;
  margin: 0;
}
.copyright a {
  color: inherit;
  text-decoration: underline rgba(138, 138, 143, 0.35);
  text-underline-offset: 2px;
}
.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* The landing page's logo: the mark and the wordmark side by side, both in the page's ink (the mark is drawn in
   currentColor: one colour for both), straight on the paper. As tall as the old inverted block, so the header row
   (and the action opposite) stays where it was. */
.home-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  color: var(--ink);
  font: var(--logo-weight) 18px/1 var(--logo-font);
  font-stretch: var(--logo-stretch);
  letter-spacing: var(--logo-tracking);
  text-decoration: none;
}
.home-mark {
  flex: none;
  display: block;
}
.home-nav a:not(.btn) {
  color: var(--ink-2);
  font-weight: 550;
  text-decoration: none;
}
.home-nav a:not(.btn):hover {
  color: var(--ink);
}
/* Opposite the logo, one action: "View my notes →" signed in, "Sign in" signed out (landing/home.ts topAction): a plain
   link in the header's muted ink, underlined on hover; it fades in once, then scrolls with the header */
/* (a whole number of pixels tall, like the logo (34), so it's centred on a whole pixel too: the header is a layer of
   its own over the doodle's canvases, and text half a pixel off the grid there comes out soft) */
.home-action {
  display: inline-block;
  line-height: 20px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  text-underline-offset: 3px;
  animation: home-action-in 300ms ease-out;
  transition: color 120ms ease;
}
.home-action:hover {
  color: var(--ink);
  text-decoration: underline;
}
/* the tagline: only while the page is at its very top (landing/home.ts atTop) */
.at-top-only {
  transition: opacity 200ms ease;
}
.at-top-only.away {
  opacity: 0;
  pointer-events: none;
}
@keyframes home-action-in {
  from {
    opacity: 0;
  }
}
@media (max-width: 640px) {
  .home-action {
    font-size: 13px;
  }
}
.home-main {
  margin-top: clamp(32px, 8vh, 80px);
}
/* The example note: the real editor (the app's note type) on a faint tint, growing with what's in it. */
.home-editor {
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  min-height: 420px;
}
.home-editor .mde {
  --mde-bg: var(--paper-2);
  --mde-code-bg: var(--paper-3);
  --mde-bg2: var(--paper-3);
  border-radius: inherit;
}
.home-editor .mde-content {
  max-width: none;
  min-height: 420px;
  padding: 40px 56px 44px calc(var(--mde-gutter) + 28px);
}
/* the H1 hint in the gutter only once you're editing */
.home-editor .mde:not(:focus-within) .ln .tok-heading {
  visibility: hidden;
}
/* The call to action: the only thing at the bottom, centred. */
.home-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: var(--home-cta-gap, 28px) 0 0;
}
.cta-form {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cta-label {
  margin-right: 2px;
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 500;
}
.cta-form input {
  width: 260px;
  height: 46px;
  padding: 0 14px;
  font-size: 16px;
}
.btn-cta {
  height: 46px;
  padding: 0 22px;
  font-size: 16px;
  font-weight: 650;
}
.cta-alt {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}
.cta-alt:hover {
  color: var(--ink);
}
.start-main {
  margin-top: 16px;
}
.start-doc .mde-content {
  padding-bottom: 32px;
  min-height: 0;
}
.start-doc .mde .ln.active .tok-heading {
  visibility: hidden;
}

@media (max-width: 640px) {
  .home-page {
    padding: 20px 16px var(--home-footer-gap, 48px);
  }
  .site-footer {
    padding: 48px 0;
  }
  .home-main {
    margin-top: 28px;
  }
  .home-editor,
  .home-editor .mde-content {
    min-height: 320px;
  }
  .home-editor .mde-content {
    padding: 20px 18px 22px calc(var(--mde-gutter) + 2px);
  }
  .home-cta,
  .cta-form {
    width: 100%;
  }
  .cta-form input {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

/* ---------- layout ---------- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) auto;
  height: 100%;
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper-2);
}
.sb-head {
  display: flex;
  align-items: center;
  flex: none;
  height: var(--header-h);
  padding: 0 8px;
}
/* The workspace switcher: the open workspace and its server, top left. */
.ws-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  text-align: left;
}
.ws-switcher:hover,
.ws-switcher[aria-expanded="true"] {
  background: var(--tint-hover);
}
.ws-switcher:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.ws-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font: 700 12px/1 var(--font-ui);
}
.ws-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 1px;
}
.ws-title,
.ws-host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-title {
  font: 600 13.5px/1.25 var(--font-ui);
}
.ws-host {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.25;
}
.ws-switcher .chev {
  flex: none;
  width: 5px;
  height: 5px;
  margin: 0 2px 0 0;
  color: var(--muted);
}
.ws-menu {
  width: calc(var(--sidebar-w) - 16px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
/* the filter right under the switcher, then "New note" (a row like the tree's), then the tree */
.sb-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
  padding: 8px 12px 8px 16px;
}
.sb-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
/* Sidebar actions behave like tree rows: a faint tint on hover, no underline. */
.sb-actions .quiet-btn {
  margin: 0 -8px;
  padding: 5px 8px;
  border-radius: var(--radius);
  /* Whole-pixel line boxes keep every row's icon and text on the same pixel grid. */
  line-height: 18px;
}
.sb-actions .quiet-btn:hover {
  text-decoration: none;
  background: var(--tint-hover);
  color: var(--ink);
}
/* A quiet action, not a heading: regular weight, muted, a thin plus. Its plus sits where the top-level folders'
   chevrons are (same centre, about the same size) and its label lines up with their names. */
.sb-actions .quiet-btn {
  color: var(--muted);
  font-weight: 400;
}
.sb-actions .quiet-btn .plus {
  width: 8px;
  height: 8px;
  margin-left: 2px;
}
.sb-actions .quiet-btn .plus::before {
  top: 3.25px;
  height: 1.5px;
}
.sb-actions .quiet-btn .plus::after {
  left: 3.25px;
  width: 1.5px;
}
/* "Search files": looks like a field, opens the search dialog (Ctrl+P). */
.sb-search {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 7px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--muted);
  cursor: text;
  font: 400 14px/1 var(--font-ui);
  text-align: left;
  transition: border-color 0.12s;
}
.sb-search:hover {
  border-color: rgba(24, 24, 27, 0.22);
}
.sb-search:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(41, 109, 154, 0.22);
}
.sb-search-label {
  flex: 1;
}
.sb-search kbd {
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font: 400 11px/1.2 var(--font-ui);
}
.sb-tree {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 0 32px;
}
/* "Share with an agent": a tinted card pinned below the tree */
.sb-agent {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 8px 12px 12px;
  padding: 8px 8px 8px 12px;
  border-radius: var(--radius);
  background: var(--tint-hover);
  font-size: 13px;
}
.sb-agent[hidden] {
  display: none;
}
/* "Share with an agent": wraps rather than being cut off in a narrow sidebar */
.sb-agent-label {
  flex: 1;
  min-width: 0;
  color: var(--ink-2);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
/* Who's signed in, at the very bottom: opens the account menu (upward). */
.sb-account {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
  margin: 0 8px 8px;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  font: 500 13px/18px var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.sb-agent:not([hidden]) + .sb-account {
  margin-top: -4px;
}
.sb-account:hover,
.sb-account[aria-expanded="true"] {
  background: var(--tint-hover);
  color: var(--ink-2);
}
.sb-account:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.sb-account .avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 9px;
}
.sb-account .avatar img {
  border-radius: inherit;
}
.sb-account-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu {
  width: calc(var(--sidebar-w) - 16px);
}
.sb-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.repo + .repo {
  margin-top: 16px;
}
/* Rows are inset from the sidebar edges with small rounded corners. */
.repo-row,
.folder-row,
.file-row {
  --depth: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  margin: 0 8px;
  padding: 2px 8px 2px calc(var(--depth) * 14px - 6px);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  outline: none;
}
.repo-row {
  min-height: 30px;
  margin-bottom: 2px;
  padding: 4px 56px 4px 7px;
  color: var(--ink-2);
  font: var(--label-weight) var(--label-size)/1.2 var(--font-ui);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-case);
}
.repo-row .chev {
  width: 5px;
  height: 5px;
  margin: 0 8px 0 1px;
  color: var(--muted);
}
.repo-row:hover,
.folder-row:hover,
.file-row:hover {
  background: var(--tint-hover);
}
.repo-row:focus-visible,
.folder-row:focus-visible,
.file-row:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.repo-title,
.folder-name,
.file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repo-title {
  flex: 0 1 auto;
}
.repo-row .badge {
  margin-left: 6px;
}
.folder-row {
  color: var(--ink-2);
}
.folder-row .chev {
  width: 6px;
  height: 6px;
  color: var(--muted);
}
.file-row {
  padding-left: calc(12px + var(--depth) * 14px);
  font-size: 14px;
}
.file-row .file-name mark {
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--warn);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.file-row.active,
.file-row.active:hover {
  background: var(--tint-active);
  color: var(--ink);
  font-weight: 600;
}
/* The tree's current row while the tree has focus: only its background, a light blue tint instead of grey (dark text); over hover and the open note's grey. */
.sb-tree [role="treeitem"]:focus,
.sb-tree [role="treeitem"]:focus:hover {
  background: color-mix(in srgb, var(--blue) 18%, var(--paper-2));
  color: var(--ink);
  outline: none;
}
/* Row buttons sit beside the row (not inside it), over its right edge. */
.row-wrap,
.file-item,
.folder-item {
  position: relative;
}
/* a subfolder's "+": a new note in it */
.folder-add {
  position: absolute;
  top: 2px;
  right: 12px;
  opacity: 0;
}
.folder-item > .folder-row:hover ~ .folder-add,
.folder-item > .folder-row:hover ~ .row-menu,
.folder-item > .folder-row:focus ~ .row-menu,
.folder-item > .folder-add:hover ~ .row-menu,
.folder-item > .row-menu:hover,
.folder-item:has(> .row-menu:hover) > .folder-add,
.folder-add:hover,
.folder-add:focus-visible {
  opacity: 1;
}
/* a folder row's "+" sits left of its "⋯" */
.folder-item > .folder-add:has(~ .row-menu) {
  right: 38px;
}
.folder-item > .folder-row {
  padding-right: 64px;
}
/* A row's name while it's being renamed in place. */
.row-rename {
  flex: 1;
  min-width: 0;
  height: 22px;
  margin: 0 0 0 -4px;
  padding: 0 4px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  outline: none;
}
.file-item .file-row {
  padding-right: 34px;
}
.row-actions {
  position: absolute;
  top: 3px;
  right: 12px;
  display: flex;
  gap: 2px;
}
.row-menu {
  position: absolute;
  top: 2px;
  right: 12px;
  opacity: 0;
}
.row-actions .icon-btn {
  opacity: 0;
}
/* Inside a notebook row the menu button is laid out in the row of actions, not positioned on its own. */
.row-actions .row-menu {
  position: static;
}
/* The "+ new note" beside a notebook's name is always visible; its menu button shows on hover. */
.row-actions .icon-btn.row-add,
.row-wrap:hover .row-actions .icon-btn,
.row-wrap:focus-within .row-actions .icon-btn,
.row-actions .icon-btn[aria-expanded="true"] {
  opacity: 1;
}
.row-wrap:hover .row-actions,
.row-wrap:focus-within .row-actions,
.file-item:hover .row-menu,
.file-item:focus-within .row-menu,
.file-item.active .row-menu,
.row-menu[aria-expanded="true"] {
  opacity: 1;
}
.row-add {
  font-size: 17px;
  font-weight: 400;
}
/* Touch screens have no hover: show the menus, but quietly. */
@media (hover: none) {
  .row-actions .icon-btn,
  .row-menu {
    opacity: 1;
  }
  .file-item:not(.active) .row-menu {
    color: #a1a1aa;
  }
}
/* people who show up after the first view (presence dots, header avatars) fade in rather than pop */
.arrived {
  animation: arrive 0.3s ease-out;
}

@keyframes arrive {
  from {
    opacity: 0;
  }
}

.presence-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
}
.pdot {
  --c: #888;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--c);
}
.pdot.is-agent {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--c);
}
.presence-dots .more {
  margin-left: 1px;
  color: var(--muted);
  font-size: 10.5px;
}
.tree-note {
  margin: 0;
  padding: 4px 16px 6px 34px;
  color: var(--muted);
  font-size: 13px;
}
.tree-note.error {
  color: var(--ink-2);
}
.tree-note.error::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--warn);
  vertical-align: 1px;
}
.sb-tree > .tree-note {
  padding-left: 20px;
}
.sb-label {
  display: flex;
  justify-content: space-between;
  margin: 0 12px 4px 16px;
  padding: 6px 0 4px;
  color: var(--ink-2);
  font: var(--label-weight) var(--label-size)/1.2 var(--font-ui);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-case);
}
.sb-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 20px;
  color: var(--muted);
}
.sb-empty p {
  margin: 0;
}

/* ---------- main ---------- */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.doc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  height: var(--header-h);
  padding: 0 12px 0 24px;
}
.spacer {
  flex: 1;
}
.breadcrumb {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.crumb {
  overflow: hidden;
  text-overflow: ellipsis;
  /* Every part of the path uses the same type; only colour sets the file apart. */
  font: 500 14px/17px var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.crumb-repo {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.crumb-repo:hover {
  color: var(--ink);
}
.crumb-sep {
  font: 400 14px/17px var(--font-ui);
  color: #a1a1aa;
}
.crumb-file {
  color: var(--ink);
}
.participants {
  display: flex;
  align-items: center;
  gap: 6px;
}
.participants:empty {
  display: none;
}
/* the header's "⋯" (History, Authors, Rename, Delete, Copy Link): a 30px ghost button at the right edge */
.doc-more {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 18px;
}
.doc-more:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.doc-more[aria-expanded="true"],
.doc-more[aria-expanded="true"]:hover {
  background: var(--tint-active);
}
.save-status {
  flex: none;
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.save-status:empty {
  display: none;
}
.save-status .sha {
  font-size: 11.5px;
  color: var(--ink-2);
}
.save-status.dirty {
  color: var(--ink);
}
/* Offline: a soft yellow note, not an alarm. */
.save-status.warn {
  padding: 4px 9px 4px 8px;
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: var(--ink);
  font-weight: 500;
}
.save-status.warn::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--warn);
  vertical-align: 1px;
}

.doc-body {
  position: relative;
  flex: 1;
  min-height: 0;
  /* never sideways: what's too wide (tables, code blocks) scrolls inside itself (editor.css); this is only a net */
  overflow-x: hidden;
  overflow-y: auto;
}
.editor-host {
  min-height: 100%;
}
/* A note with nothing to show yet: a thin bar along the top, and only once it has taken 300 ms. */
.note-pending {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  animation: pending-in 0.2s ease-out 0.3s forwards;
}
.note-pending::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: var(--tint-active);
  animation: pending-slide 1.1s ease-in-out infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pending-in {
  to {
    opacity: 1;
  }
}
@keyframes pending-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(340%);
  }
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  max-width: 460px;
  height: 100%;
  margin: 0 auto;
  padding: 32px;
}
.empty-state .label {
  color: var(--muted);
  font-weight: 500;
}
.empty-state h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  font-stretch: var(--head-stretch);
  letter-spacing: var(--head-tracking);
}
.empty-state p {
  margin: 2px 0 18px;
  font-size: 14.5px;
  line-height: 1.5;
}
.empty-state .row {
  display: flex;
  gap: 8px;
}

/* ---------- history drawer ---------- */

.history {
  display: flex;
  flex-direction: column;
  width: var(--history-w);
  min-height: 0;
  background: var(--paper-2);
}
.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: var(--header-h);
  padding: 0 12px 0 20px;
}
.history-head h2 {
  margin: 0;
  font: 600 14px/1.2 var(--font-ui);
}
.history-head .icon-btn,
.modal-head .icon-btn {
  width: 28px;
  height: 28px;
  font-size: 18px;
}
.history-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.history .empty {
  margin: 0;
  padding: 12px 20px;
  color: var(--muted);
  line-height: 1.5;
}
.commits {
  margin: 0;
  padding: 0 12px 24px;
  list-style: none;
}
.commits li + li {
  margin-top: 2px;
}
.commit {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 9px 8px 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  text-align: left;
}
.commit:hover {
  background: var(--tint-hover);
}
.commit-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 550;
}
.commit-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}
.commit-meta code {
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
}
.commit-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 20px 16px;
}
.commit-detail .link-btn {
  align-self: flex-start;
  margin-bottom: 8px;
}
.commit-detail .commit-meta code {
  margin-left: 0;
}
.commit-title {
  font-weight: 650;
  font-size: 15px;
  line-height: 1.35;
}
.commit-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.diff,
.file-at-ref {
  margin: 0 12px 24px;
  padding: 10px 0;
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
}
.file-at-ref {
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
.dl {
  display: block;
  padding: 0 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
.dl-add {
  background: rgba(41, 109, 154, 0.09);
  box-shadow: inset 2px 0 0 var(--blue);
}
.dl-del {
  background: rgba(24, 24, 27, 0.045);
  box-shadow: inset 2px 0 0 #a1a1aa;
  color: var(--muted);
}
.dl-hunk {
  margin-top: 6px;
  color: var(--muted);
}
.dl-meta {
  color: var(--muted);
}

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

.menu {
  position: fixed;
  z-index: 50;
  min-width: 184px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-pop);
  animation: pop-in 0.1s ease-out;
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
}
.menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 13.5px;
  text-align: left;
  white-space: nowrap;
}
.menu-item:hover {
  background: var(--paper-2);
}
.menu-item:focus {
  outline: none;
}
.menu-item:focus-visible {
  background: var(--paper-2);
  box-shadow: inset 0 0 0 2px var(--blue);
}
/* destructive: last, after a separator, set apart by weight (never red) */
.menu-item.danger {
  font-weight: 600;
}
.menu-item.danger:hover,
.menu-item.danger:focus-visible {
  background: var(--paper-3);
}
.menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--line-soft);
}
.menu-header {
  overflow: hidden;
  padding: 6px 10px 4px;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-section {
  overflow: hidden;
  padding: 8px 10px 4px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-item:disabled {
  color: var(--muted);
  cursor: default;
}
.menu-item:disabled:hover {
  background: none;
}
.menu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-detail {
  flex: none;
  margin-left: 12px;
  color: var(--muted);
  font-size: 12px;
}
/* a row with a × at its right (leave / remove from the list): shown on hover and focus, always on touch */
.menu-row {
  position: relative;
}
.menu-row > .menu-item {
  padding-right: 34px;
}
.menu-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
}
.menu-row:hover .menu-remove,
.menu-row:focus-within .menu-remove {
  opacity: 1;
}
.menu-remove:hover,
.menu-remove:focus-visible {
  background: var(--paper-3);
  color: var(--ink);
}
.menu-remove:focus {
  outline: none;
}
.menu-remove:focus-visible {
  box-shadow: inset 0 0 0 2px var(--blue);
}
@media (hover: none) {
  .menu-remove {
    opacity: 1;
  }
}
/* the open workspace: a small dot before its name (other rows keep the space) */
.menu-check {
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
}
.menu-check.on {
  background: var(--ink);
}

/* ---------- dialogs ---------- */

.modal {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-modal);
}
.modal[open] {
  animation: modal-in 0.14s ease-out;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }
}
.modal-wide {
  width: min(600px, calc(100vw - 32px));
}
.modal::backdrop {
  background: rgba(24, 24, 27, 0.3);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 12px 0 20px;
}
.modal-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-family: var(--font-head);
  font-weight: 650;
  letter-spacing: var(--modal-head-tracking);
}
.modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 20px 20px;
}
.modal-body p {
  margin: 0;
  line-height: 1.5;
}
/* "Search files" (Ctrl+P): near the top, a compact search field over a flat list of paths. No flex chain: the
   list's own max-height sizes it (a flex: 1 list in an auto-height dialog collapses to nothing in Safari). */
.fs-modal {
  width: min(600px, 90vw);
  max-height: none;
  margin: 12vh auto auto;
  overflow: hidden;
}
.fs-field {
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.fs-field .fs-input {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: 400 14px/1.2 var(--font-ui);
}
.fs-field .fs-input::placeholder {
  color: var(--muted);
}
.fs-field .fs-input:hover,
.fs-field .fs-input:focus,
.fs-field .fs-input:focus-visible {
  border-color: transparent;
  box-shadow: none;
}
.fs-list {
  /* grows with its results, then scrolls; shorter windows keep the whole dialog on screen */
  position: relative;
  max-height: min(420px, 60vh, calc(88vh - 120px));
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.fs-item {
  overflow: hidden;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  font: 400 14px/18px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fs-item[aria-selected="true"] {
  background: color-mix(in srgb, var(--blue) 16%, var(--paper));
}
.fs-dir {
  color: var(--muted);
}
.fs-name {
  font-weight: 600;
}
.fs-empty {
  padding: 12px 10px;
  color: var(--muted);
  font-size: 14px;
}
.fs-foot {
  margin: 0;
  padding: 7px 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12.5px;
}
/* "Open…": choices on the left, the chosen form on the right. */
.open-modal {
  width: min(620px, calc(100vw - 32px));
}
.open-dlg {
  display: grid;
  grid-template-columns: 168px 1fr;
  min-height: 248px;
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.open-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px 16px;
  background: var(--paper-2);
  border-bottom-left-radius: var(--radius-lg);
}
.open-section {
  padding: 10px 10px 4px;
  color: var(--grey);
  font: 600 11.5px/1.2 var(--font-ui);
  letter-spacing: 0.01em;
}
.open-section:first-child {
  padding-top: 2px;
}
.open-choice {
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-2);
  font: 500 13.5px/1.3 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.open-choice:hover {
  background: var(--tint-hover);
}
.open-choice[aria-selected="true"] {
  background: var(--tint-active);
  color: var(--ink);
}
.open-choice:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.open-panes {
  min-width: 0;
}
.open-pane {
  padding-top: 16px;
}
@media (max-width: 520px) {
  .open-dlg {
    grid-template-columns: 1fr;
  }
  .open-nav {
    border-radius: 0;
  }
}
/* "Share with an agent": two sections (this workspace; all of them over MCP), each a heading, a line, a
   monospace field with its own Copy and a Copy prompt button; a hairline between them */
.share-modal {
  width: min(520px, calc(100vw - 32px));
}
.share-body {
  gap: 0;
}
.share-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.share-sec + .share-sec {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.share-sec h3 {
  margin: 0;
  color: var(--ink);
  font: 600 13.5px/1.3 var(--font-ui);
}
.share-sec .hint {
  margin: 0 0 4px;
}
.share-code {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.share-code-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font: 400 12.5px/1.5 var(--font-mono);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.share-code-wrap {
  align-items: flex-start;
}
.share-code-wrap .share-code-text {
  padding-top: 2px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.share-code-error .share-code-text {
  color: var(--muted);
  font-family: var(--font-ui);
}
.share-code-copy {
  flex: none;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  font: 550 12px/1 var(--font-ui);
}
.share-code-copy:hover:not(:disabled) {
  color: var(--ink);
  border-color: rgba(24, 24, 27, 0.18);
}
.share-code-copy:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.7;
}
.share-btns {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
/* "Copy prompt" → "Copied" without the button changing size */
.share-btns .btn {
  min-width: 112px;
}
.share-snippets {
  margin-top: 4px;
  font-size: 13px;
}
.share-snippets summary {
  width: fit-content;
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 550;
}
.share-snippets summary:hover {
  color: var(--ink);
}
.share-snippet {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.share-snippet-head {
  color: var(--muted);
  font-size: 12.5px;
}
.share-modal .modal-actions {
  margin-top: 20px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field > span {
  color: var(--ink-2);
  font: 550 12.5px/1.2 var(--font-ui);
}
.field input {
  width: 100%;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hint {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.form-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: var(--ink);
  font-weight: 500;
  font-size: 13px;
}
.gh-status::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border: 1.5px solid var(--tint-active);
  border-top-color: var(--ink-2);
  border-radius: 50%;
  vertical-align: -1px;
  animation: spin 0.8s linear infinite;
}
/* ---------- toasts ---------- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(480px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  box-shadow: var(--shadow-pop);
  color: var(--paper);
  font-size: 13px;
  line-height: 1.4;
  animation: toast-in 0.18s ease-out;
  transition: opacity 0.3s, transform 0.3s;
}
.toast-error::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f5c542;
}
.toast-action {
  flex: none;
  margin: -4px -6px -4px 4px;
  padding: 4px 9px;
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
}
.toast-action:hover { background: rgba(255, 255, 255, 0.24); }
.toast.leaving {
  opacity: 0;
  transform: translateY(6px);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ---------- GitHub repos ---------- */

.doc-source {
  flex: none;
  display: flex;
  min-width: 0;
}
.gh-source {
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.gh-source:hover {
  background: var(--tint-hover);
  color: var(--ink);
}

/* ---------- small screens ---------- */

.sidebar-toggle,
.sidebar-backdrop {
  display: none;
}
.burger {
  display: block;
  width: 14px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

@media (max-width: 900px) {
  .app.history-open {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }
  .history {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    width: min(var(--history-w), 100vw);
    box-shadow: var(--shadow-modal);
  }
}
@media (max-width: 640px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: min(var(--sidebar-w), 85vw);
    transform: translateX(-105%);
    transition: transform 0.18s ease-out;
  }
  .app.sidebar-open .sidebar {
    transform: none;
    box-shadow: var(--shadow-modal);
  }
  .app.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(24, 24, 27, 0.3);
  }
  .sidebar-toggle {
    display: inline-grid;
    flex: none;
    width: 32px;
    height: 32px;
    margin-left: -6px;
    color: var(--ink);
  }
  .doc-header {
    gap: 8px;
    padding: 0 8px 0 12px;
  }
  .participants,
  .doc-source {
    display: none;
  }
  .history {
    width: 100vw;
  }
}
@media (max-width: 520px) {
  .breadcrumb > :not(.crumb-file) {
    display: none;
  }
  .save-status {
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
}

/* ---------- sign-in screen (signed out in the app) ---------- */

.signin-page {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 32px 16px;
}
.signin-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: min(360px, 100%);
}
.signin-card .slab-blk {
  align-self: flex-start;
  margin-bottom: 18px;
}
.signin-card h1 {
  margin: 0;
  font: var(--head-weight) 22px/1.25 var(--font-head);
  letter-spacing: var(--head-tracking);
}
.signin-card > p {
  margin: -4px 0 6px;
  line-height: 1.5;
}
.btn-signin {
  height: 40px;
  font-size: 14px;
}
.btn-google svg {
  flex: none;
}
.signin-card .cta-alt {
  align-self: center;
  margin-top: 10px;
}

/* ---------- not signed in (guests) ---------- */

/* a guest in the participants list: a dashed ring, no account */
.avatar.is-guest {
  box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.5px var(--c);
  opacity: 0.85;
}
.sb-account.sb-signin {
  color: var(--ink-2);
  font-weight: 550;
}
/* the home page's "Try it out" */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* "Download macOS app": the quiet partner of the call to action */
.btn-mac,
.btn-mac:hover:not(:disabled) {
  border-color: transparent;
  box-shadow: none;
  background: #f0f0ef;
  color: var(--ink);
}
.btn-mac:hover:not(:disabled) {
  background: #e6e6e4;
}
.btn-mac:active:not(:disabled) {
  background: #dededc;
}
@media (max-width: 640px) {
  .cta-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}
/* the Mac app dialog */
.mac-modal {
  width: min(480px, calc(100vw - 32px));
}
.mac-steps h3 {
  margin: 0 0 6px;
  font: 650 13px/1.3 var(--font-ui);
}
.mac-steps ol {
  margin: 0;
  padding-left: 20px;
  line-height: 1.5;
}
.mac-steps li + li {
  margin-top: 4px;
}
.mac-body .mac-term {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12.5px;
}
.mac-term code {
  display: block;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink-2);
  font: 12px/1.4 var(--font-mono);
  overflow-wrap: anywhere;
}
.mac-body .mac-req {
  color: var(--muted);
  font-size: 13px;
}
/* the sign-in dialog */
.signin-modal {
  width: min(400px, calc(100vw - 32px));
}
.signin-body .signin-why {
  margin: 0 0 14px;
  line-height: 1.5;
}
.signin-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signin-options .hint {
  margin: 0;
}
.signin-actions {
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}
.signin-actions .spacer {
  flex: 1;
}
.signin-scratch {
  color: var(--muted);
  font-size: 13px;
}
.signin-scratch:hover {
  color: var(--ink);
}
/* /scratch */
.scratch-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: var(--ink-2);
  font-size: 13.5px;
}
.scratch-back {
  color: var(--ink-2);
  font-weight: 550;
  text-decoration: none;
}

/* the demo room's note: in the flow above the editor (never over it), with clear space before the note's title */
.demo-banner {
  position: static;
  display: block;
  flex: none;
  box-sizing: border-box;
  margin: 16px auto 20px;
  padding: 6px 12px;
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: var(--ink-2);
  font-size: 13px;
  text-align: center;
  width: fit-content;
  max-width: calc(100% - 32px);
}