/* 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;
  --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;
  /* note text and headings (read by editor.css) */
  --text-size: 16px;
  --text-leading: 1.6;
  --h-weight: 650;
  --h1-weight: 700;
  --h3-weight: 600;
  --h-stretch: 100%;
  --h1-stretch: 100%;
  --h3-stretch: 100%;
  --h4-stretch: 100%;
  --h-tracking: -0.017em;
  --h1-tracking: -0.024em;
  --h2-tracking: -0.02em;
  --h3-tracking: -0.01em;
  --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;
  --h-tracking: 0;
  --h1-tracking: 0;
  --h2-tracking: 0;
  --h3-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;
  -webkit-font-smoothing: antialiased;
}

#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-primary:disabled {
  border-color: var(--paper-3);
  background: var(--paper-3);
  color: var(--muted);
  opacity: 1;
}
.btn-tab {
  height: 30px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  font: 550 13px/1 var(--font-ui);
}
.btn-tab:hover:not(:disabled) {
  border-color: transparent;
  background: var(--paper-2);
}
.btn-tab.active,
.btn-tab.active:hover:not(:disabled) {
  border-color: transparent;
  background: var(--tint-active);
  color: var(--ink);
}
.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 /start (signed out) ---------- */

.home {
  position: relative;
  min-height: 100%;
}
/* 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);
  }
}
.home-hero .home-top {
  position: relative;
  z-index: 2;
  padding: 28px 36px 0;
}
.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;
}
.home-hero + .home-page {
  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;
}
.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;
}
.doodle-label span {
  margin-left: 5px;
  opacity: 0.75;
  font-weight: 450;
}
.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 * {
    cursor: none;
  }
  .doodle-on :is(a, button, label, summary, [role="button"], .home-hint),
  .doodle-on :is(a, button, label, summary, [role="button"], .home-hint) * {
    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, .home-caption, .home-about, .form-error),
  .doodle-on :is(.home-editor, .home-caption, .home-about, .form-error) * {
    cursor: text;
  }
}
.home-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 40px 72px;
}
.start .home-page {
  max-width: 840px;
}
/* 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;
  -webkit-font-smoothing: antialiased;
}
.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;
}
/* line the logo up with the guide's text column */
.start .home-top {
  padding: 0 24px 0 calc(var(--mde-gutter, 33px) + 16px);
}
.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.home-top .slab-blk {
  font-size: 18px;
  padding: 8px 10px 7px;
}
.home-nav a:not(.btn) {
  color: var(--ink-2);
  font-weight: 550;
  text-decoration: none;
}
.home-nav a:not(.btn):hover {
  color: var(--ink);
}
.home-main {
  margin-top: clamp(32px, 8vh, 80px);
}
/* The example note: the real editor on a faint tint. */
.home-editor {
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.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: 0;
  padding: 28px 32px 30px calc(var(--mde-gutter) + 10px);
}
/* the H1 hint in the gutter only once you're editing */
.home-editor .mde:not(:focus-within) .ln .tok-heading {
  visibility: hidden;
}
.home-caption {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}
.home-about {
  margin: 28px 0 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
}
/* The call to action: the only thing at the bottom, centred. */
.home-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 40px 0 8px;
}
.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 48px;
  }
  .site-footer {
    padding: 48px 0;
  }
  .home-main {
    margin-top: 28px;
  }
  .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;
  }
  .start .home-top {
    padding: 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 this workspace with an agent": wraps to two lines rather than being cut off */
.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/1.2 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/1.2 var(--font-ui);
  color: #a1a1aa;
}
.crumb-file {
  color: var(--ink);
}
.participants {
  display: flex;
  align-items: center;
  gap: 4px;
}
.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;
  }
}
.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-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.signin-or::before,
.signin-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}
.signin-name {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.signin-name .btn {
  height: 40px;
}
.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 "View the notes" + "Sign in" */
.cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cta-signin {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 550;
  text-decoration: none;
}
.cta-signin:hover {
  color: var(--ink);
  text-decoration: underline;
}
/* 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 folder's note, above the editor */
.demo-banner {
  flex: none;
  margin: 12px auto 0;
  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);
}