/* tokens:begin  Design tokens, the Lightwell design language (docs/design.md). This is the only place raw colors and sizes are defined. */
  :root {
    --accent:#1f5c5c; --accent-contrast:#ffffff;
    --bg:#f6f5f3; --surface:#ffffff; --surface-2:#efede9; --border:#e0ddd7; --border-strong:#c4c0b8;
    --text:#1d1c1a; --text-muted:#5f5b54; --text-faint:#7a766e;
    --accent-text:var(--accent);
    --accent-soft:color-mix(in srgb, var(--accent) 9%, var(--surface));
    --accent-hover:color-mix(in srgb, var(--accent) 88%, #000000);
    --focus:color-mix(in srgb, var(--accent) 70%, #ffffff);
    --success:#1c6b3a; --success-bg:#e3f1e8; --warning:#85560a; --warning-bg:#f9eed6; --danger:#a3271e; --danger-bg:#f9e6e3; --neutral-bg:#eceae6;
    --overlay:rgb(20 19 17 / 0.55); --shadow:0 8px 24px rgb(20 19 17 / 0.14);
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
    --radius:6px; --radius-lg:10px; --border-w:1px;
    --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --text-xs:12px; --text-sm:13px; --text-base:15px; --text-lg:18px; --text-xl:22px; --text-2xl:28px; --leading:1.5;
    --sidebar-w:272px; --content-max:1120px; --touch:44px; --control-h:38px;
    --z-sticky:20; --z-overlay:100; --z-toast:200; --ease:140ms ease;
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --bg:#131312; --surface:#1b1b19; --surface-2:#252523; --border:#33322e; --border-strong:#4a4943;
    --text:#ecebe7; --text-muted:#adaaa2; --text-faint:#8f8c84;
    --accent-text:color-mix(in srgb, var(--accent) 45%, #ffffff);
    --accent-soft:color-mix(in srgb, var(--accent) 22%, var(--surface));
    --accent-hover:color-mix(in srgb, var(--accent) 85%, #ffffff);
    --success:#86d3a0; --success-bg:#17301f; --warning:#e8bd6b; --warning-bg:#33280f; --danger:#f19a92; --danger-bg:#3a1b18; --neutral-bg:#2b2a27;
    --overlay:rgb(0 0 0 / 0.65); --shadow:0 8px 24px rgb(0 0 0 / 0.5); color-scheme:dark;
  } }
  :root[data-theme="dark"] {
    --bg:#131312; --surface:#1b1b19; --surface-2:#252523; --border:#33322e; --border-strong:#4a4943;
    --text:#ecebe7; --text-muted:#adaaa2; --text-faint:#8f8c84;
    --accent-text:color-mix(in srgb, var(--accent) 45%, #ffffff);
    --accent-soft:color-mix(in srgb, var(--accent) 22%, var(--surface));
    --accent-hover:color-mix(in srgb, var(--accent) 85%, #ffffff);
    --success:#86d3a0; --success-bg:#17301f; --warning:#e8bd6b; --warning-bg:#33280f; --danger:#f19a92; --danger-bg:#3a1b18; --neutral-bg:#2b2a27;
    --overlay:rgb(0 0 0 / 0.65); --shadow:0 8px 24px rgb(0 0 0 / 0.5); color-scheme:dark;
  }
  /* tokens:end */

  *, *::before, *::after { box-sizing:border-box; }
  html, body { height:100%; }
  html { -webkit-text-size-adjust:100%; }
  body { margin:0; background:var(--bg); color:var(--text); font:var(--text-base)/var(--leading) var(--font); -webkit-font-smoothing:antialiased; }
  h1, h2, h3, h4 { margin:0; line-height:1.25; font-weight:600; letter-spacing:-.01em; }
  h1 { font-size:var(--text-2xl); } h2 { font-size:var(--text-xl); } h3 { font-size:var(--text-lg); }
  p { margin:0 0 var(--s3); }
  a { color:var(--accent-text); text-underline-offset:2px; }
  a:hover { text-decoration-thickness:2px; }
  :focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--radius); }
  [hidden] { display:none !important; }
  .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .skip { position:absolute; left:var(--s3); top:-100px; z-index:var(--z-toast); background:var(--surface); border:var(--border-w) solid var(--border-strong); border-radius:var(--radius); padding:var(--s2) var(--s3); }
  .skip:focus { top:var(--s3); }
  .dim { color:var(--text-muted); } .err { color:var(--danger); } .small { font-size:var(--text-sm); }
  .num { font-variant-numeric:tabular-nums; }
  .clip { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; max-width:340px; }
  code, .mono { font-family:var(--font-mono); font-size:var(--text-sm); }
  .icon { width:18px; height:18px; flex:none; stroke-width:1.75; }
  .inline-icon { display:inline-flex; }

  /* shell */
  .shell { display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); min-height:100vh; }
  .sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5) var(--s3); background:var(--surface); border-right:var(--border-w) solid var(--border); overflow-y:auto; }
  .sidebar-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
  .sidebar button.sidebar-close { display:none; }
  .brand { display:flex; align-items:center; gap:var(--s2); font-size:var(--text-lg); font-weight:700; letter-spacing:-.02em; padding:0 var(--s3); color:var(--text); text-decoration:none; }
  .brand .icon { color:var(--accent-text); }
  .navsec { font-size:var(--text-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); padding:var(--s4) var(--s3) var(--s1); }
  .nav { display:flex; flex-direction:column; gap:2px; }
  .navitem { display:flex; align-items:center; gap:var(--s3); width:100%; min-height:36px; padding:var(--s2) var(--s3); border-radius:var(--radius); color:var(--text-muted); text-decoration:none; font:inherit; font-weight:500; background:none; border:0; cursor:pointer; text-align:left; }
  .navitem:hover { background:var(--surface-2); color:var(--text); }
  .navitem.on { background:var(--accent-soft); color:var(--accent-text); }
  .navitem .label { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .grow { flex:1 1 auto; min-width:0; }
  .userbox { border-top:var(--border-w) solid var(--border); padding-top:var(--s3); }
  .userbox .who { padding:var(--s1) var(--s3) var(--s2); font-size:var(--text-sm); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .content { min-width:0; }
  main { max-width:var(--content-max); margin:0 auto; padding:var(--s6) var(--s5) var(--s8); }
  main:focus { outline:none; }
  .topbar, .backdrop { display:none; }
  .page-h { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s5); flex-wrap:wrap; }
  .page-h h1 { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
  .page-h p { margin:var(--s1) 0 0; color:var(--text-muted); max-width:70ch; }
  .page-h .btn { white-space:nowrap; }
  .back { display:inline-block; margin-bottom:var(--s3); font-size:var(--text-sm); }

  /* cards, layout */
  .card { background:var(--surface); border:var(--border-w) solid var(--border); border-radius:var(--radius-lg); padding:var(--s5); margin-bottom:var(--s4); overflow-x:auto; }
  .card.flush { padding:0; overflow:hidden; }
  .card > h2 { font-size:var(--text-lg); margin:0 0 var(--s3); }
  .card-h { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3); flex-wrap:wrap; }
  .card-h h2 { font-size:var(--text-lg); margin:0; }
  .meta { color:var(--text-muted); font-size:var(--text-sm); }
  .stack { display:flex; flex-direction:column; gap:var(--s4); }
  .scroll { overflow-x:auto; }
  .actions { display:flex; gap:var(--s2); flex-wrap:wrap; }
  td.actions-cell { text-align:right; white-space:nowrap; }
  td.actions-cell button + button { margin-left:var(--s2); }
  .form-actions { justify-content:flex-end; margin-top:var(--s2); }
  .toolbar { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); flex-wrap:wrap; }
  .toolbar .push { margin-left:auto; }
  .center { max-width:440px; margin:var(--s8) auto; padding:0 var(--s4); }
  .center .brand { justify-content:center; font-size:var(--text-xl); padding-bottom:var(--s4); }

  /* forms */
  label { display:flex; flex-direction:column; gap:var(--s1); font-size:var(--text-sm); font-weight:600; color:var(--text); }
  label.chk { flex-direction:row; align-items:flex-start; gap:var(--s2); font-size:var(--text-base); font-weight:400; }
  input, select, textarea { background:var(--surface); color:var(--text); border:var(--border-w) solid var(--border-strong); border-radius:var(--radius); padding:var(--s2) var(--s3); min-height:var(--control-h); font:inherit; font-weight:400; min-width:0; width:100%; }
  textarea { min-height:96px; resize:vertical; font-family:var(--font-mono); font-size:var(--text-sm); }
  input[type=checkbox] { width:16px; height:16px; min-height:0; padding:0; margin-top:3px; accent-color:var(--accent); }
  input:focus, select:focus, textarea:focus { outline:2px solid var(--focus); outline-offset:0; border-color:var(--accent); }
  input:disabled, select:disabled { opacity:.6; }
  input[aria-invalid="true"] { border-color:var(--danger); }
  .sub { color:var(--text-muted); font-size:var(--text-sm); font-weight:400; }
  fieldset { border:var(--border-w) solid var(--border); border-radius:var(--radius-lg); padding:var(--s4); margin:0; min-width:0; }
  legend { font-size:var(--text-sm); font-weight:600; color:var(--text-muted); padding:0 var(--s2); }
  .pillrow { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); }

  /* buttons: btn is the primary action, ghost the default, danger and quiet the others */
  button.btn, button.ghost { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:var(--control-h); padding:0 var(--s4); border-radius:var(--radius); font:inherit; font-weight:500; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background var(--ease), border-color var(--ease); }
  button.btn { background:var(--accent); color:var(--accent-contrast); border:var(--border-w) solid var(--accent); }
  button.btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
  button.ghost { background:var(--surface); border:var(--border-w) solid var(--border-strong); color:var(--text); }
  button.ghost:hover { background:var(--surface-2); }
  button.quiet { background:transparent; border-color:transparent; }
  button.danger { color:var(--danger); border-color:var(--danger); }
  button.danger:hover { background:var(--danger-bg); }
  button.btn-icon { width:var(--control-h); padding:0; }
  td button.ghost, .actions button.ghost { min-height:30px; padding:0 var(--s3); font-size:var(--text-sm); }
  button:disabled { opacity:.55; cursor:not-allowed; }

  /* tables */
  table { width:100%; border-collapse:collapse; }
  th { text-align:left; font-size:var(--text-sm); color:var(--text-muted); font-weight:600; padding:var(--s3) var(--s4); border-bottom:var(--border-w) solid var(--border); white-space:nowrap; background:var(--surface); }
  td { padding:var(--s3) var(--s4); border-bottom:var(--border-w) solid var(--border); vertical-align:middle; }
  tbody tr:hover td { background:var(--surface-2); }
  tr:last-child td { border-bottom:0; }
  td.wrap { overflow-wrap:anywhere; min-width:150px; max-width:320px; }

  /* badges: status always carries a text label, never color alone */
  .badge { display:inline-flex; align-items:center; gap:var(--s1); padding:2px var(--s2); border-radius:999px; font-size:var(--text-xs); font-weight:600; background:var(--neutral-bg); color:var(--text-muted); white-space:nowrap; }
  .badge-success { background:var(--success-bg); color:var(--success); }
  .badge-warning { background:var(--warning-bg); color:var(--warning); }
  .badge-danger { background:var(--danger-bg); color:var(--danger); }
  .badge-accent { background:var(--accent-soft); color:var(--accent-text); }
  .tag { display:inline-block; padding:1px var(--s2); border:var(--border-w) solid var(--border); border-radius:var(--radius); font-size:var(--text-xs); color:var(--text-muted); }

  /* the event and chat feed */

  /* empty state, notice, loading */
  .empty { text-align:center; padding:var(--s7) var(--s5); color:var(--text-muted); border:var(--border-w) dashed var(--border-strong); border-radius:var(--radius-lg); margin:var(--s3); }
  .empty h3 { color:var(--text); margin-bottom:var(--s1); }
  .empty p { margin:0 auto var(--s3); max-width:56ch; }
  .empty .icon { width:28px; height:28px; margin:0 auto var(--s3); color:var(--text-faint); display:block; }
  .card > .empty { margin:0; }
  .notice { padding:var(--s3) var(--s4); border-radius:var(--radius); border:var(--border-w) solid var(--border); background:var(--surface-2); font-size:var(--text-sm); margin-bottom:var(--s4); display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }
  .notice-warning { background:var(--warning-bg); border-color:var(--warning); color:var(--warning); }
  .notice-danger { background:var(--danger-bg); border-color:var(--danger); color:var(--danger); }
  .skeleton { background:linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size:200% 100%; animation:shimmer 1.3s infinite; border-radius:var(--radius); height:16px; margin-bottom:14px; }
  .w60 { width:60%; } .w75 { width:75%; } .w90 { width:90%; } .w100 { width:100%; }
  @keyframes shimmer { to { background-position:-200% 0; } }

  /* dialogs, tabs, toasts */
  .shade { position:fixed; inset:0; background:var(--overlay); display:grid; grid-template-columns:minmax(0,1fr); place-items:start center; padding:var(--s7) var(--s4); overflow:auto; z-index:var(--z-overlay); }
  .modal { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:var(--s5); width:min(480px,100%); }
  .modal.wide { width:min(640px,100%); }
  .modal h2 { margin:0 0 var(--s3); font-size:var(--text-lg); }
  .toasts { position:fixed; right:var(--s4); bottom:var(--s4); z-index:var(--z-toast); display:flex; flex-direction:column; gap:var(--s2); max-width:min(360px, calc(100vw - 32px)); }
  .toast { background:var(--text); color:var(--bg); padding:var(--s3) var(--s4); border-radius:var(--radius); box-shadow:var(--shadow); font-size:var(--text-sm); overflow-wrap:anywhere; }
  .toast-error { background:var(--danger); color:var(--accent-contrast); }

  @media (prefers-reduced-motion: reduce) { .skeleton { animation:none; } * { transition:none !important; } html { scroll-behavior:auto; } }
  @media (pointer: coarse) {
    button.btn, button.ghost, .navitem, input, select, .tabs2 a { min-height:var(--touch); }
    td button.ghost, .actions button.ghost { min-height:36px; }
    input, select, textarea { font-size:16px; }
  }
  @media (max-width:860px) {
    .shell { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
    .sidebar { display:none; }
    .sidebar.open { display:flex; position:fixed; inset:0 auto 0 0; width:min(280px,85vw); height:100dvh; z-index:var(--z-overlay); box-shadow:var(--shadow); }
    .sidebar button.sidebar-close { display:inline-flex; }
    .topbar { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:var(--s2) var(--s4); background:var(--surface); border-bottom:var(--border-w) solid var(--border); position:sticky; top:0; z-index:var(--z-sticky); }
    .backdrop.open { display:block; position:fixed; inset:0; background:var(--overlay); z-index:calc(var(--z-overlay) - 1); }
    main { padding:var(--s5) var(--s4) var(--s7); }
    .ev { grid-template-columns:4.5rem minmax(0,1fr); } .ev .badge { display:none; }
  }
  @media (max-width:640px) {
    .modal { padding:var(--s4); }
    .shade { padding:var(--s4) var(--s3); }
    .toasts { left:var(--s3); right:var(--s3); bottom:var(--s3); max-width:none; }
    .page-h > .btn { width:100%; }
  }
  .icon-16 { width:16px; height:16px; } .icon-22 { width:22px; height:22px; }

  /* notes */
  textarea.write { width:100%; min-height:84px; font-family:var(--font); font-size:var(--text-base); line-height:1.6; resize:none; border:0; padding:0; background:transparent; }
  textarea.write:focus { outline:none; border:0; }
  textarea.write.big { min-height:50vh; resize:vertical; }
  .composer, .note { padding:var(--s4) var(--s5); }
  .composer:focus-within, .note.editing { border-color:var(--accent); }
  .note { background:var(--surface); border:var(--border-w) solid var(--border); border-radius:var(--radius-lg); margin-bottom:var(--s3); overflow:visible; }
  .note.pinned { border-left:3px solid var(--accent); }
  .note-body { overflow-wrap:anywhere; }
  .note-body.clamp { max-height:15em; overflow:hidden; -webkit-mask-image:linear-gradient(black 70%, transparent); mask-image:linear-gradient(black 70%, transparent); }
  .note-foot { display:flex; align-items:center; gap:var(--s3); margin-top:var(--s3); flex-wrap:wrap; font-size:var(--text-sm); color:var(--text-muted); }
  .note-foot a, .note-foot time { color:var(--text-muted); }
  .notes .empty { margin:0; }
  .day-h { font-size:var(--text-sm); font-weight:600; color:var(--text-muted); text-transform:none; margin:var(--s5) 0 var(--s2); letter-spacing:0; }
  .day-h a { color:inherit; }
  .day:first-child .day-h { margin-top:var(--s2); }
  .more { text-align:center; margin:var(--s4) 0; }
  button.small-btn { min-height:28px; padding:0 var(--s2); font-size:var(--text-sm); }
  .navitem .count { font-size:var(--text-xs); color:var(--text-faint); font-variant-numeric:tabular-nums; }
  .chip { display:inline-block; padding:0 var(--s2); border-radius:999px; background:var(--accent-soft); color:var(--accent-text); text-decoration:none; font-size:var(--text-sm); font-weight:500; }
  .chip:hover { text-decoration:underline; }
  .toast { display:flex; gap:var(--s3); align-items:center; justify-content:space-between; }
  .toast-act { background:transparent; border:0; color:inherit; font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; padding:0; }
  .toolbar .push { margin-left:auto; }
  .toolbar input[type=search] { max-width:360px; }

  /* rendered markdown */
  .md > *:first-child { margin-top:0; } .md > *:last-child { margin-bottom:0; }
  .md p { margin:0 0 var(--s3); }
  .md .md-h { margin:var(--s4) 0 var(--s2); font-size:var(--text-lg); }
  .md h4.md-h { font-size:var(--text-base); } .md h5.md-h { font-size:var(--text-base); color:var(--text-muted); }
  .md ul, .md ol { margin:0 0 var(--s3); padding-left:var(--s5); }
  .md li.task { list-style:none; margin-left:calc(var(--s5) * -1); display:flex; gap:var(--s2); align-items:flex-start; }
  .md li.task input { margin-top:5px; }
  .md li .done { color:var(--text-muted); text-decoration:line-through; }
  .md li.ind-1 { margin-left:var(--s4); } .md li.ind-2 { margin-left:var(--s6); } .md li.ind-3 { margin-left:var(--s7); }
  .md li.task.ind-1 { margin-left:calc(var(--s5) * -1 + var(--s4)); } .md li.task.ind-2 { margin-left:calc(var(--s5) * -1 + var(--s6)); } .md li.task.ind-3 { margin-left:calc(var(--s5) * -1 + var(--s7)); }
  .md blockquote { margin:0 0 var(--s3); padding:var(--s1) var(--s4); border-left:3px solid var(--border-strong); color:var(--text-muted); }
  .md pre { margin:0 0 var(--s3); padding:var(--s3); background:var(--bg); border:var(--border-w) solid var(--border); border-radius:var(--radius); overflow-x:auto; }
  .md code { background:var(--surface-2); padding:1px 4px; border-radius:4px; } .md pre code { background:none; padding:0; }
  .md hr { border:0; border-top:var(--border-w) solid var(--border); margin:var(--s4) 0; }

  /* sign in */
  .btn-link { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:var(--control-h); padding:0 var(--s4); border-radius:var(--radius); font:inherit; font-weight:500; text-decoration:none; white-space:nowrap; background:var(--surface); border:var(--border-w) solid var(--border-strong); color:var(--text); }
  .btn-link:hover { background:var(--surface-2); text-decoration:none; }
  .btn-link.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
  .btn-link.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
  .btn-link.wide { display:flex; width:100%; min-height:var(--touch); margin-top:var(--s4); }
  .login-h { font-size:var(--text-xl); text-align:center; margin-bottom:var(--s2); }
  .center-text { text-align:center; }
  kbd { font:inherit; font-family:var(--font-mono); font-size:var(--text-xs); padding:1px 6px; border:var(--border-w) solid var(--border-strong); border-radius:4px; background:var(--surface-2); color:var(--text-muted); white-space:nowrap; }

  /* sidebar: search, pages tree */
  .navitem.find { border:var(--border-w) solid var(--border); margin-bottom:var(--s2); }
  .navitem.find kbd { margin-left:auto; }
  .navsec-row { display:flex; align-items:center; justify-content:space-between; padding-right:var(--s1); }
  button.tiny { width:26px; min-height:26px; height:26px; }
  .treerow { display:flex; align-items:center; gap:2px; }
  .treerow.d1 { padding-left:var(--s4); } .treerow.d2 { padding-left:var(--s5); } .treerow.d3 { padding-left:calc(var(--s5) + var(--s3)); }
  .treerow.d4 { padding-left:var(--s6); } .treerow.d5 { padding-left:calc(var(--s6) + var(--s3)); } .treerow.d6 { padding-left:calc(var(--s6) + var(--s4)); }
  .tree-link { flex:1 1 auto; min-width:0; min-height:32px; padding:var(--s1) var(--s2); }
  .twist, .twist-gap { width:24px; height:24px; flex:none; }
  .twist { display:inline-flex; align-items:center; justify-content:center; border:0; background:none; color:var(--text-faint); cursor:pointer; border-radius:var(--radius); padding:0; }
  .twist:hover { background:var(--surface-2); color:var(--text); }
  .twist .icon { transition:transform var(--ease); }
  .twist.open .icon { transform:rotate(90deg); }
  .sub-add { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; border:0; background:none; border-radius:var(--radius); color:var(--text-faint); cursor:pointer; opacity:0; padding:0; }
  .treerow:hover .sub-add, .sub-add:focus-visible { opacity:1; }
  .sub-add:hover { background:var(--surface-2); color:var(--text); }
  .navhint { margin:0; padding:var(--s1) var(--s3); font-size:var(--text-sm); color:var(--text-muted); }
  @media (pointer: coarse) { .sub-add { opacity:1; } .navitem.find kbd { display:none; } }

  /* a page */
  .page { max-width:780px; margin:0 auto; }
  .page-top { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s5); }
  .crumbs { display:flex; align-items:center; gap:var(--s2); font-size:var(--text-sm); flex-wrap:wrap; min-width:0; }
  .crumbs a { color:var(--text-muted); }
  .crumbs .sep { color:var(--text-faint); }
  .page-actions { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; flex:1 1 auto; justify-content:flex-end; }
  .page-actions .sub { min-width:4.5em; }
  .daynav { margin-bottom:var(--s4); }
  .seg { display:inline-flex; border:var(--border-w) solid var(--border-strong); border-radius:var(--radius); overflow:hidden; }
  .seg-b { min-height:30px; padding:0 var(--s3); font:inherit; font-size:var(--text-sm); font-weight:500; background:var(--surface); color:var(--text-muted); border:0; cursor:pointer; }
  .seg-b + .seg-b { border-left:var(--border-w) solid var(--border-strong); }
  .seg-b.on { background:var(--accent-soft); color:var(--accent-text); }
  .title-wrap { margin-bottom:var(--s2); }
  .title-input { font-size:var(--text-2xl); font-weight:700; letter-spacing:-.02em; line-height:1.25; border:0; padding:0; background:transparent; min-height:0; width:100%; }
  .title-input:focus { outline:none; border:0; }
  .title-input::placeholder { color:var(--text-faint); }
  .day-title { font-size:var(--text-2xl); letter-spacing:-.02em; margin-bottom:var(--s2); }
  .editor-wrap { position:relative; margin-top:var(--s3); }
  .page textarea.write.big { min-height:45vh; line-height:1.7; font-family:var(--font); font-size:var(--text-base); resize:none; overflow:hidden; }
  .view { min-height:45vh; cursor:text; overflow-wrap:anywhere; }
  .md-big { font-size:var(--text-base); line-height:1.7; }
  .md-big h3.md-h { font-size:var(--text-xl); margin-top:var(--s5); } .md-big h4.md-h { font-size:var(--text-lg); margin-top:var(--s4); }
  .tagrow { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
  .tagrow:empty { display:none; }
  .aside { margin-top:var(--s6); display:flex; flex-direction:column; gap:var(--s5); }
  .aside:empty { display:none; }
  .aside-sec h2 { font-size:var(--text-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--s2); }
  .linklist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
  .linklist a { display:inline-flex; align-items:center; gap:var(--s2); padding:var(--s1) 0; }
  .page-meta { margin-top:var(--s6); }
  .wikilink { text-decoration:none; border-bottom:var(--border-w) solid var(--accent-text); }
  .wikilink:hover { background:var(--accent-soft); }
  .wikilink.missing { color:var(--text-muted); border-bottom-style:dashed; border-bottom-color:var(--text-faint); }
  .popup { position:absolute; z-index:var(--z-sticky); min-width:240px; max-width:320px; max-height:260px; overflow-y:auto; padding:var(--s1); background:var(--surface); border:var(--border-w) solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
  .popup-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s2) var(--s3); border-radius:var(--radius); cursor:pointer; }
  .popup-row.on, .popup-row:hover { background:var(--accent-soft); }
  .popup-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .popup-hint { color:var(--text-faint); font-size:var(--text-xs); font-family:var(--font-mono); white-space:nowrap; }
  .mirror { position:absolute; left:-9999px; top:0; visibility:hidden; white-space:pre-wrap; overflow-wrap:break-word; box-sizing:content-box; }
  .notice .btn-link { min-height:30px; }

  /* quick find and the move picker */
  .shade-top { align-items:start; padding-top:12vh; }
  .finder-input { font-size:var(--text-lg); min-height:44px; margin-bottom:var(--s2); }
  .finder-list { display:flex; flex-direction:column; gap:2px; max-height:50vh; overflow-y:auto; }
  .finder-row { display:flex; align-items:center; gap:var(--s3); width:100%; padding:var(--s2) var(--s3); border:0; border-radius:var(--radius); background:none; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
  .finder-row.on, .finder-row:hover { background:var(--accent-soft); }
  .finder-name { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .finder-sub { flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
  .pad { padding:var(--s3); margin:0; }

  /* note cards and settings */
  .note.openable { cursor:pointer; }
  .note-title { font-size:var(--text-lg); margin-bottom:var(--s2); }
  .note-title a { color:inherit; text-decoration:none; }
  .note-title a:hover { text-decoration:underline; }
  .keys { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
  @media (max-width:640px) { .page-actions { justify-content:flex-start; } .shade-top { padding-top:var(--s4); } }

  /* live preview: lines render, the line being edited shows its markdown */
  .live { position:relative; line-height:1.7; font-size:var(--text-base); }
  .live-line { min-height:1.7em; cursor:text; overflow-wrap:anywhere; }
  .live .md p, .live .md ul, .live .md ol, .live .md pre, .live .md blockquote { margin:0; }
  .live .md hr { margin:var(--s2) 0; }
  .live .md .md-h { margin:var(--s2) 0 0; }
  .live .md h3.md-h { font-size:var(--text-xl); } .live .md h4.md-h { font-size:var(--text-lg); }
  textarea.live-edit { display:block; width:100%; min-height:1.7em; margin:0 0 0 calc(-1 * (var(--s2) + 2px)); padding:0 0 0 var(--s2); border:0; border-left:2px solid var(--accent); border-radius:0; background:var(--accent-soft); font-family:var(--font); font-size:var(--text-base); line-height:1.7; resize:none; overflow:hidden; }
  textarea.live-edit:focus { outline:none; border-color:var(--accent); }
  .live-tail { min-height:30vh; cursor:text; }

  /* the vault */
  .vault-gate { display:flex; justify-content:center; padding-top:var(--s6); }
  .vault-gate .card { width:100%; max-width:420px; display:flex; flex-direction:column; gap:var(--s3); }
  .vault-icon { align-self:center; color:var(--accent); }
  .vault-form { display:flex; flex-direction:column; gap:var(--s3); }
  .vault-list { list-style:none; margin:0; padding:var(--s1); }
  .vault-row { display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s3); border-radius:var(--radius); flex-wrap:wrap; }
  .vault-row:hover { background:var(--accent-soft); }
  .vault-name { display:flex; align-items:center; gap:var(--s2); flex:1; min-width:0; color:var(--text); text-decoration:none; }
  .clip1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wikilink .icon { vertical-align:-2px; margin-right:var(--s1); }
  .wikilink.locked { color:var(--text-muted); border-bottom-style:dotted; border-bottom-color:var(--text-faint); }