/* IDYABORD · styles.css
   Palette: orchid (primary) + pink (accent), on warm lilac-grey neutrals, matching HuskyTooth.
   Idea "paper" colours are content colours chosen by the user, separate from the UI palette.
   Sections: tokens · base · top bar · notice · canvas · ideas · bubbles · connectors ·
             toolbar/zoom · inspector · document view · search · menus/modals/toasts · responsive */

/* ================= tokens ================= */
:root {
  --bg: #f7f3f8; --surface: #ffffff; --raised: #fbf8fc; --soft: #f1e8f3; --ink: #2a1830; --muted: #6a5672;
  --line: rgba(42, 24, 48, .12); --line-strong: rgba(42, 24, 48, .22); --dot: rgba(42, 24, 48, .13);
  --accent: #9b37a6; --accent-ink: #ffffff; --accent-soft: #f3e1f5; --pink: #d42a63; --pink-soft: #fde4ec;
  --danger: #c4283b; --ok: #1d7f4e;
  --shadow-sm: 0 1px 2px rgba(42, 24, 48, .07);
  --shadow: 0 1px 2px rgba(42, 24, 48, .06), 0 10px 28px -14px rgba(42, 24, 48, .32);
  --shadow-lg: 0 24px 60px -20px rgba(42, 24, 48, .45);
  /* idea paper */
  --p-default: #ffffff; --p-yellow: #fff3bf; --p-pink: #ffe1eb; --p-mint: #d8f4e4; --p-sky: #dcecff; --p-lilac: #ebe1ff; --p-peach: #ffe5d1; --p-gray: #ecebf0;
  /* strong versions: bubble borders, connectors, dots */
  --s-default: #6a5672; --s-yellow: #b98a00; --s-pink: #d42a63; --s-mint: #198a5c; --s-sky: #2a72c9; --s-lilac: #7c4fe0; --s-peach: #cf6a21; --s-gray: #7c7686;
  --f-ui: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --f-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  --f-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 14px; --top: 60px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151017; --surface: #201922; --raised: #261e29; --soft: #2d2331; --ink: #f6edf7; --muted: #b9a7bf;
    --line: rgba(246, 237, 247, .12); --line-strong: rgba(246, 237, 247, .22); --dot: rgba(246, 237, 247, .1);
    --accent: #e3a0e6; --accent-ink: #2a1030; --accent-soft: #3a2540; --pink: #ff6b98; --pink-soft: #45202f;
    --danger: #ff7685; --ok: #5fd39a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -14px rgba(0, 0, 0, .75); --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .8);
    --p-default: #262029; --p-yellow: #3a3420; --p-pink: #40222f; --p-mint: #1d3a2d; --p-sky: #1d3047; --p-lilac: #2e2647; --p-peach: #41291c; --p-gray: #2c2a31;
    --s-default: #b9a7bf; --s-yellow: #f0c44c; --s-pink: #ff6b98; --s-mint: #5fd39a; --s-sky: #6fb0ff; --s-lilac: #b49bff; --s-peach: #ffa463; --s-gray: #a7a1b2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151017; --surface: #201922; --raised: #261e29; --soft: #2d2331; --ink: #f6edf7; --muted: #b9a7bf;
  --line: rgba(246, 237, 247, .12); --line-strong: rgba(246, 237, 247, .22); --dot: rgba(246, 237, 247, .1);
  --accent: #e3a0e6; --accent-ink: #2a1030; --accent-soft: #3a2540; --pink: #ff6b98; --pink-soft: #45202f;
  --danger: #ff7685; --ok: #5fd39a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -14px rgba(0, 0, 0, .75); --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .8);
  --p-default: #262029; --p-yellow: #3a3420; --p-pink: #40222f; --p-mint: #1d3a2d; --p-sky: #1d3047; --p-lilac: #2e2647; --p-peach: #41291c; --p-gray: #2c2a31;
  --s-default: #b9a7bf; --s-yellow: #f0c44c; --s-pink: #ff6b98; --s-mint: #5fd39a; --s-sky: #6fb0ff; --s-lilac: #b49bff; --s-peach: #ffa463; --s-gray: #a7a1b2;
  color-scheme: dark;
}
/* colour classes set --paper / --strong for whatever uses them */
.c-default { --paper: var(--p-default); --strong: var(--s-default); }
.c-yellow { --paper: var(--p-yellow); --strong: var(--s-yellow); }
.c-pink { --paper: var(--p-pink); --strong: var(--s-pink); }
.c-mint { --paper: var(--p-mint); --strong: var(--s-mint); }
.c-sky { --paper: var(--p-sky); --strong: var(--s-sky); }
.c-lilac { --paper: var(--p-lilac); --strong: var(--s-lilac); }
.c-peach { --paper: var(--p-peach); --strong: var(--s-peach); }
.c-gray { --paper: var(--p-gray); --strong: var(--s-gray); }

/* ================= base ================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; overflow: hidden;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; } /* the HuskyTooth bar (if present) stacks on top */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; transition: top .15s; }
.skip:focus { top: 10px; }
.ico { display: inline-flex; width: 18px; height: 18px; flex: none; }
.ico svg, svg.i { width: 100%; height: 100%; }
svg.i { width: 18px; height: 18px; flex: none; }
kbd, .kbd { font: 600 11px/1 var(--f-ui); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); white-space: nowrap; }
.noscript { padding: 40px; text-align: center; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* buttons */
.btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent; font-weight: 650; font-size: 14.5px; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s, transform .15s, box-shadow .2s, filter .15s; }
.btn .ico, .btn svg.i { width: 17px; height: 17px; }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13.5px; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--pink)); color: #fff; box-shadow: 0 8px 22px -12px var(--pink); }
:root[data-theme="dark"] .btn-primary { color: #1c0b20; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { color: #1c0b20; } }
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 12px 26px -12px var(--pink); }
.btn-primary:active { transform: none; }
.btn-soft { background: var(--accent-soft); color: var(--ink); }
.btn-soft:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 12%); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--soft); }
.btn-danger { background: var(--danger); color: #fff; }
.btn:disabled { opacity: .55; cursor: progress; transform: none; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 12px; background: transparent; color: var(--ink); transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--soft); }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 9px; color: var(--muted); }
.icon-btn.sm:hover { color: var(--ink); }
.icon-btn .ico, .icon-btn svg.i { width: 19px; height: 19px; }
.icon-btn.sm svg.i { width: 16px; height: 16px; }

/* segmented control */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }
.seg > button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 650; font-size: 13.5px; transition: background .15s, color .15s, box-shadow .15s; }
.seg > button:hover { color: var(--ink); }
.seg > button[aria-selected="true"], .seg > button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.seg-sm { border-radius: 11px; }
.seg-sm > button { height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; flex: 1; justify-content: center; }
.seg-sm svg { width: 34px; height: 16px; }

/* ================= top bar ================= */
.topbar { flex: none; position: relative; z-index: 30; display: flex; align-items: center; gap: 10px; height: var(--top); padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; flex: none; padding: 4px 6px 4px 2px; border-radius: 12px; }
.brand img { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.brand:hover img { transform: rotate(-8deg) scale(1.05); }
.brand-word { font: 800 19px/1 var(--f-display); letter-spacing: .01em; }
.by { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 10px 0 5px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: color .15s, background .15s; }
.by:hover { color: var(--ink); background: var(--accent-soft); }
.by img { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.by:hover img { transform: translateY(-2px) rotate(-6deg); }
.view-toggle { margin-left: 6px; }
.sp { flex: 1; }
.search { position: relative; display: flex; align-items: center; gap: 8px; width: min(340px, 30vw); height: 40px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); transition: border-color .15s, box-shadow .15s; }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14.5px; }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }
.search-open { display: none; }
.save-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 650; }
.save-chip .ico { width: 15px; height: 15px; color: var(--ok); }
.save-chip:hover { background: var(--soft); color: var(--ink); }
.save-chip.bad { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.save-chip.bad .ico { color: var(--danger); }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 280px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: pop .16s ease-out; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.menu [role="menuitem"] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 550; text-align: left; text-decoration: none; }
.menu [role="menuitem"]:hover, .menu [role="menuitem"]:focus-visible { background: var(--soft); outline: none; }
.menu [role="menuitem"] kbd { margin-left: auto; }
.menu [role="menuitem"] .ico { color: var(--muted); width: 17px; height: 17px; }
.menu [role="menuitem"].danger { color: var(--danger); }
.menu [role="menuitem"].danger .ico { color: var(--danger); }
.menu .ext { margin-left: auto; width: 14px; height: 14px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* board switcher */
.board-wrap { position: relative; flex: none; min-width: 0; }
.board-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; max-width: 220px; padding: 0 9px 0 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px; transition: border-color .15s, background .15s; }
.board-btn:hover, .board-btn[aria-expanded="true"] { border-color: var(--accent); }
.board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-btn .ico { width: 15px; height: 15px; color: var(--muted); transition: transform .2s; }
.board-btn[aria-expanded="true"] .ico { transform: rotate(180deg); }
.menu.board-menu { left: 0; right: auto; width: 330px; max-width: calc(100vw - 20px); z-index: 50; }
.bm-head { display: flex; justify-content: space-between; padding: 6px 10px 4px; font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bm-list { max-height: min(360px, 55vh); overflow: auto; }
.bm-row { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.bm-row:hover, .bm-row:focus-within { background: var(--soft); }
.bm-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; }
.bm-open:focus-visible { outline-offset: -2px; }
.bm-check { width: 16px; height: 16px; flex: none; color: var(--accent); }
.bm-check svg { width: 16px; height: 16px; }
.bm-txt { display: flex; flex-direction: column; min-width: 0; }
.bm-t { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-row.cur .bm-t { color: var(--accent); }
.bm-d { font-size: 12px; color: var(--muted); }
.bm-acts { display: flex; padding-right: 4px; opacity: 0; transition: opacity .15s; }
.bm-row:hover .bm-acts, .bm-row:focus-within .bm-acts { opacity: 1; }
@media (hover: none) { .bm-acts { opacity: 1; } }
.bm-new { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--accent); font-weight: 700; font-size: 14px; }
.bm-new svg { width: 17px; height: 17px; }
.bm-new:hover, .bm-new:focus-visible { background: var(--soft); outline: none; }

/* ================= local-storage notice ================= */
.notice { position: absolute; z-index: 25; top: 12px; left: 12px; right: 12px; margin: 0 auto; max-width: 760px;
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: pop .25s ease-out; }
.notice > .ico { color: var(--ok); width: 22px; height: 22px; }
.notice p { margin: 0; flex: 1; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.notice p b { color: var(--ink); display: block; font-size: 14px; }

/* ================= canvas ================= */
main { position: relative; flex: 1; min-height: 0; }
.view { position: absolute; inset: 0; }
.stage { position: absolute; inset: 0; overflow: hidden; overflow: clip; touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; outline: none;
  background-color: var(--bg); background-image: radial-gradient(var(--dot) 1.1px, transparent 1.3px); }
.stage.space { cursor: grab; }
.stage.panning { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.layer-groups, .layer-items { position: absolute; left: 0; top: 0; }
.layer-links { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.marquee { position: absolute; left: 0; top: 0; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 4px; pointer-events: none; transform-origin: 0 0; }

.empty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; padding: 20px; }
.empty-card { max-width: 440px; text-align: center; pointer-events: none; animation: fade .5s ease-out; }
.empty-card h1 { font: 800 clamp(26px, 4vw, 38px)/1.08 var(--f-display); letter-spacing: -.02em; margin: 18px 0 10px; text-wrap: balance; }
.empty-card p { color: var(--muted); margin: 0 0 18px; text-wrap: pretty; }
.empty-card .btn { pointer-events: auto; }
.empty-card .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); vertical-align: -1px; }
.empty-art { position: relative; width: 150px; height: 84px; margin: 0 auto; }
.empty-art span { position: absolute; width: 58px; height: 42px; border-radius: 11px; box-shadow: var(--shadow); animation: float 5s ease-in-out infinite; }
.empty-art span:nth-child(1) { left: 0; top: 30px; background: var(--p-yellow); transform: rotate(-6deg); }
.empty-art span:nth-child(2) { left: 46px; top: 0; background: var(--p-sky); animation-delay: -1.6s; }
.empty-art span:nth-child(3) { right: 0; top: 34px; background: var(--p-pink); transform: rotate(5deg); animation-delay: -3.2s; }
@keyframes float { 50% { translate: 0 -6px; } }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

/* ================= ideas ================= */
.idea { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; min-height: 64px; padding: 10px 14px 14px; border-radius: var(--r);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--strong) 18%, transparent);
  transition: box-shadow .18s, opacity .2s, outline-color .15s; outline: 2px solid transparent; outline-offset: 3px; cursor: grab; touch-action: none; }
.idea:hover { box-shadow: 0 1px 2px rgba(42, 24, 48, .07), 0 16px 34px -14px rgba(42, 24, 48, .42); }
.idea:focus-visible { outline-color: var(--accent); }
.idea.sel { outline-color: var(--accent); }
.idea.editing { cursor: auto; outline-color: var(--accent); z-index: 5; }
.idea.dragging { cursor: grabbing; z-index: 6; box-shadow: var(--shadow-lg); opacity: .96; }
.idea.connect-target { outline: 2px dashed var(--pink); outline-offset: 4px; }
.idea.dim { opacity: .22; }
.idea.hit { outline-color: var(--pink); }
.idea.flash, .bubble.flash, .doc-idea.flash, .doc-sec.flash { animation: flash 1.3s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pink) 40%, transparent), var(--shadow); } }
.idea-head { display: flex; align-items: center; gap: 6px; height: 18px; margin-bottom: 4px; color: color-mix(in srgb, var(--ink) 70%, transparent); font-size: 10.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.idea-type { display: inline-flex; align-items: center; gap: 5px; }
.idea-type svg { width: 13px; height: 13px; }
.idea-progress { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.idea-port { position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); cursor: crosshair; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; touch-action: none; }
.idea-port::after { content: ""; position: absolute; inset: -10px; } /* bigger touch target */
.idea:hover .idea-port, .idea.sel .idea-port, .idea.editing .idea-port { opacity: 1; transform: none; }
.idea-port:hover { background: var(--accent); }
.idea-resize { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: ew-resize; opacity: 0; transition: opacity .15s;
  background: linear-gradient(135deg, transparent 55%, color-mix(in srgb, var(--ink) 35%, transparent) 55% 62%, transparent 62% 75%, color-mix(in srgb, var(--ink) 35%, transparent) 75% 82%, transparent 82%); }
.idea:hover .idea-resize, .idea.sel .idea-resize { opacity: 1; }
@media (hover: none) { .idea-port { opacity: .9; transform: none; } }

/* fonts & sizes */
.f-sans .iv { font-family: var(--f-ui); }
.f-serif .iv { font-family: var(--f-serif); }
.f-mono .iv { font-family: var(--f-mono); font-size: .92em; }
.f-hand .iv { font-family: var(--f-hand); font-size: 1.32em; line-height: 1.25; }
.s-s .iv { font-size: 13.5px; } .s-m .iv { font-size: 15.5px; } .s-l .iv { font-size: 20px; }
.s-s.f-hand .iv { font-size: 18px; } .s-m.f-hand .iv { font-size: 21px; } .s-l.f-hand .iv { font-size: 27px; }

/* idea bodies (shared with doc view) */
.iv { line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.iv [data-field] { outline: none; white-space: pre-wrap; min-height: 1.45em; cursor: inherit; }
.idea.editing .iv [data-field], .doc .iv [data-field] { cursor: text; user-select: text; -webkit-user-select: text; }
.iv [data-field]:empty::before { content: attr(data-ph); color: color-mix(in srgb, var(--ink) 40%, transparent); pointer-events: none; }
.iv-title { font-weight: 700; font-size: 1.05em; line-height: 1.3; }
.iv-note { margin-top: 6px; color: color-mix(in srgb, var(--ink) 82%, transparent); font-size: .95em; }
.idea:not(.editing) .iv-note:empty { display: none; }
/* checklist */
.iv-rows { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.iv-row { display: flex; align-items: flex-start; gap: 8px; }
.iv-box { flex: none; width: 19px; height: 19px; margin-top: .14em; padding: 0; display: grid; place-items: center; border-radius: 6px; border: 2px solid color-mix(in srgb, var(--strong) 70%, var(--ink) 10%); background: var(--surface); transition: background .15s, border-color .15s, transform .15s; }
.iv-box svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .25s ease-out; }
.iv-box:hover { transform: scale(1.08); }
.iv-row.done .iv-box { background: var(--accent); border-color: var(--accent); }
.iv-row.done .iv-box svg { stroke-dashoffset: 0; stroke: var(--accent-ink); }
.iv-row-text { flex: 1; min-width: 0; }
.iv-row.done .iv-row-text { text-decoration: line-through; color: color-mix(in srgb, var(--ink) 50%, transparent); }
.iv-add { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 8px 3px 4px; border: 0; border-radius: 8px; background: transparent; color: color-mix(in srgb, var(--ink) 70%, transparent); font: 600 12.5px var(--f-ui); opacity: 0; transition: opacity .15s, background .15s; }
.iv-add svg { width: 14px; height: 14px; }
.idea:hover .iv-add, .idea.sel .iv-add, .idea.editing .iv-add, .doc .iv-add, .iv-add:focus-visible { opacity: 1; }
.iv-add:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
/* thought bubble */
.idea.t-thought { border-radius: 30px; padding: 14px 20px 18px; }
.idea.t-thought::before, .idea.t-thought::after { content: ""; position: absolute; border-radius: 50%; background: var(--paper); border: 1px solid color-mix(in srgb, var(--strong) 18%, transparent); box-shadow: var(--shadow-sm); }
.idea.t-thought::before { width: 18px; height: 18px; left: 22px; bottom: -14px; }
.idea.t-thought::after { width: 10px; height: 10px; left: 12px; bottom: -26px; }
.idea.t-thought .idea-head { display: none; }
/* link card */
.iv-url { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line-strong); cursor: text; }
.iv-url svg { width: 16px; height: 16px; color: var(--muted); }
.iv-url input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 14px var(--f-ui); }
.iv-thumb { display: block; margin: 2px -6px 8px; border-radius: 9px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft); }
.iv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-site { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font: 600 12px var(--f-ui); color: color-mix(in srgb, var(--ink) 70%, transparent); }
.iv-fav { position: relative; width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 5px; overflow: hidden; font: 800 10px var(--f-ui); color: #fff; background: hsl(var(--h, 290) 55% 48%); }
.iv-fav img { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--surface); object-fit: contain; }
.iv-domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-open { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); font: 650 12.5px var(--f-ui); text-decoration: none; transition: background .15s; }
.iv-link { display: flex; flex-direction: column; }
.iv-open svg { width: 13px; height: 13px; }
.iv-open:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
/* image */
.idea.t-image { padding: 8px 8px 10px; }
.idea.t-image .idea-head { padding: 0 6px; }
.iv-img { position: relative; border-radius: 10px; overflow: hidden; background: var(--soft); min-height: 60px; }
.iv-img img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.iv-img.missing::after { content: attr(data-msg); position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font: 600 12.5px var(--f-ui); color: var(--muted); }
.iv-caption { padding: 0 6px; margin-top: 8px; }
.iv-drop { display: flex; align-items: center; gap: 12px; padding: 18px 14px; border: 2px dashed var(--line-strong); border-radius: 12px; cursor: pointer; color: var(--ink); font-family: var(--f-ui); transition: border-color .15s, background .15s; }
.iv-drop:hover, .iv-drop:focus-within { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.iv-drop-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.iv-drop-ico svg { width: 20px; height: 20px; }
.iv-drop > span:last-child { display: flex; flex-direction: column; font-size: 14px; }
.iv-drop small { color: var(--muted); font-size: 12.5px; }
.doc .iv-img { max-width: 420px; cursor: zoom-in; }
.lightbox { margin: 0; display: grid; place-items: center; }
.lightbox img { display: block; max-width: 100%; max-height: 68dvh; border-radius: 12px; }
body.dropping .stage, body.dropping #doc-view { box-shadow: inset 0 0 0 4px var(--accent); }
.sr-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* watched */
.iv-watch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--f-ui); }
.iv-kind { height: 26px; padding: 0 6px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--strong) 35%, transparent); background: color-mix(in srgb, var(--surface) 70%, transparent); font: 650 12px var(--f-ui); }
.iv-date { margin-left: auto; font-size: 12px; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.iv-stars { display: flex; gap: 1px; margin: 6px 0 2px -3px; }
.iv-stars button { width: 26px; height: 26px; padding: 3px; border: 0; background: transparent; color: color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 6px; transition: transform .15s, color .15s; }
.iv-stars button svg { width: 100%; height: 100%; }
.iv-stars button.on { color: var(--s-yellow); }
.iv-stars button.on svg { fill: currentColor; }
.iv-stars button:hover { transform: scale(1.15); }
.iv-watched .iv-title { font-size: 1.12em; }

/* ================= bubbles ================= */
.bubble { position: absolute; left: 0; top: 0; border-radius: 30px; pointer-events: none;
  background: color-mix(in srgb, var(--strong) 7%, transparent); border: 2px solid color-mix(in srgb, var(--strong) 42%, transparent); transition: background .2s, border-color .2s, box-shadow .2s; }
.bubble.nested { background: color-mix(in srgb, var(--strong) 9%, var(--bg) 0%); border-radius: 24px; }
.bubble.b-dashed { border-style: dashed; } .bubble.b-dotted { border-style: dotted; border-width: 3px; } .bubble.b-none { border-color: transparent; }
.bubble.sel { border-color: var(--strong); box-shadow: 0 0 0 4px color-mix(in srgb, var(--strong) 18%, transparent); }
.bubble.drop { background: color-mix(in srgb, var(--strong) 16%, transparent); border-color: var(--strong); }
.bubble.hit { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 40%, transparent); }
.bubble.dragging { box-shadow: var(--shadow-lg); }
.bubble-head { position: absolute; left: 16px; top: 12px; max-width: calc(100% - 32px); display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--strong) 18%, var(--surface)); color: var(--ink); pointer-events: auto; cursor: grab; touch-action: none; user-select: none; box-shadow: var(--shadow-sm); }
.bubble-head:focus-visible { outline: 2px solid var(--strong); outline-offset: 2px; }
.bubble-name { font: 800 15px/1 var(--f-display); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.bubble-name[contenteditable] { cursor: text; user-select: text; -webkit-user-select: text; min-width: 40px; overflow: visible; }
.bubble-count { font: 700 11.5px var(--f-ui); color: color-mix(in srgb, var(--ink) 70%, transparent); }
.bubble-count:empty { display: none; }
.bubble-resize { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 0 0 18px 0; cursor: nwse-resize; pointer-events: none; opacity: 0; transition: opacity .15s; touch-action: none;
  border-right: 3px solid var(--strong); border-bottom: 3px solid var(--strong); }
.bubble.sel .bubble-resize { opacity: .7; pointer-events: auto; }
@media (hover: none) { .bubble.sel .bubble-resize { opacity: .9; } }

/* ================= connectors ================= */
.link { --lc: var(--strong); }
.link-line { fill: none; stroke: var(--lc); stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.link-arrow { fill: var(--lc); }
.link-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.link-label { font: 650 13px var(--f-ui); fill: var(--ink); text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round; pointer-events: all; cursor: pointer; }
.link.sel .link-line { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--lc) 80%, transparent)); }
.link.sel .link-hit { stroke: color-mix(in srgb, var(--lc) 18%, transparent); }
.link.dim { opacity: .2; }
.link-temp .link-line { opacity: .8; }
.link.c-default { --lc: color-mix(in srgb, var(--ink) 70%, transparent); }

/* ================= toolbar & zoom ================= */
.toolbar { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow); max-width: calc(100vw - 24px); }
.type-picker { background: transparent; border: 0; padding: 0; }
.type-picker > button { height: 40px; padding: 0 14px; }
.type-picker > button[aria-checked="true"] { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.type-picker > button[aria-checked="true"] .ico { color: var(--accent); }
.tb-sep { width: 1px; height: 24px; background: var(--line-strong); flex: none; }
.tb-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 650; font-size: 13.5px; transition: background .15s, color .15s; }
.tb-btn:hover { background: var(--soft); color: var(--ink); }
.tb-btn.icon-only { width: 40px; padding: 0; justify-content: center; }
.zoom { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 19; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.zoom .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
.zoom .icon-btn .ico { width: 17px; height: 17px; }
.zoom-pct { min-width: 52px; height: 36px; border: 0; border-radius: 10px; background: transparent; font: 650 12.5px var(--f-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.zoom-pct:hover { background: var(--soft); color: var(--ink); }

/* ================= inspector ================= */
.inspector { position: absolute; z-index: 22; right: max(16px, env(safe-area-inset-right)); top: 16px; width: 290px; max-height: calc(100% - 110px); display: flex; flex-direction: column;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: slide .2s ease-out; }
@keyframes slide { from { opacity: 0; transform: translateX(10px); } }
.ins-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 6px 16px; }
.ins-head h2 { margin: 0; font: 800 16px var(--f-display); }
.ins-body { overflow: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.ins-row { display: flex; flex-direction: column; gap: 7px; }
.ins-label { font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ins-input, .ins-select, .field-input { width: 100%; height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); }
.ins-input:focus, .ins-select:focus, .field-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ins-inline { display: flex; align-items: center; gap: 10px; }
.ins-range { flex: 1; accent-color: var(--accent); }
.ins-out { min-width: 34px; font: 650 12.5px var(--f-ui); color: var(--muted); text-align: right; }
.ins-note { margin: 0; font-size: 13px; color: var(--muted); }
.ins-acts { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
.ins-act { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-weight: 600; font-size: 14px; text-align: left; }
.ins-act svg { width: 17px; height: 17px; color: var(--muted); }
.ins-act:hover { background: var(--soft); }
.ins-act.danger, .ins-act.danger svg { color: var(--danger); }
.seg-sm .f-sans { font-family: var(--f-ui); } .seg-sm .f-serif { font-family: var(--f-serif); } .seg-sm .f-mono { font-family: var(--f-mono); } .seg-sm .f-hand { font-family: var(--f-hand); font-size: 17px; }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.sw { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--strong) 45%, transparent); background: var(--paper); transition: transform .15s, box-shadow .15s; }
.sw.strong { background: var(--strong); border-color: transparent; }
.sw:hover { transform: scale(1.1); }
.sw[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

/* ================= document view ================= */
#doc-view { overflow: auto; background: var(--bg); }
.doc { max-width: 820px; margin: 0 auto; padding: 40px max(18px, env(safe-area-inset-left)) 120px; }
.doc-head { margin-bottom: 26px; }
body.notice-on .doc { padding-top: 150px; }
.doc-title { margin: 0; font: 800 clamp(30px, 5vw, 46px)/1.05 var(--f-display); letter-spacing: -.025em; outline: none; border-radius: 8px; }
.doc-title:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.doc-meta { margin: 8px 0 14px; color: var(--muted); font-size: 14px; }
.doc-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-sections { display: flex; flex-direction: column; gap: 18px; }
.doc-sec { --rail: var(--strong); position: relative; }
.doc-sec.lvl-1 { padding: 18px 20px 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.doc-sec.lvl-1::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; background: var(--rail); }
.doc-sec:not(.lvl-1) { margin-top: 14px; padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--rail) 40%, transparent); }
.doc-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.doc-sec-head .dot { width: 12px; height: 12px; border-radius: 4px; transform: rotate(45deg); background: var(--strong); flex: none; }
.doc-sec-title { margin: 0; font-family: var(--f-display); font-weight: 800; letter-spacing: -.01em; outline: none; border-radius: 6px; min-width: 40px; }
.doc-sec-title[contenteditable]:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
h2.doc-sec-title { font-size: 24px; } h3.doc-sec-title { font-size: 19px; } h4.doc-sec-title, h5.doc-sec-title, h6.doc-sec-title { font-size: 16.5px; }
.doc-count { color: var(--muted); font-size: 13px; font-weight: 600; }
.doc-sec-head .icon-btn { margin-left: auto; }
.doc-list { display: flex; flex-direction: column; }
.doc-idea { position: relative; display: flex; gap: 12px; padding: 10px 6px 10px 0; border-top: 1px solid var(--line); border-radius: 10px; transition: background .15s; }
.doc-list > .doc-idea:first-child { border-top: 0; }
.doc-idea:hover, .doc-idea:focus-within { background: color-mix(in srgb, var(--paper) 55%, transparent); }
.doc-gutter { flex: none; width: 30px; height: 30px; margin-top: 1px; display: grid; place-items: center; border-radius: 9px; background: var(--paper); color: var(--strong); border: 1px solid color-mix(in srgb, var(--strong) 25%, transparent); }
.doc-gutter svg { width: 16px; height: 16px; }
.doc-idea.c-default .doc-gutter { color: var(--muted); }
.doc-main { flex: 1; min-width: 0; }
.doc .iv { font-size: 15.5px; }
.doc .f-hand .iv { font-size: 21px; }
.doc .iv-note:empty { display: none; }
.doc .doc-idea:focus-within .iv-note:empty { display: block; }
.doc .iv-thumb { max-width: 320px; margin: 4px 0 8px; }
.doc .t-thought .iv { font-style: italic; }
.doc .iv-add { opacity: .75; }
.doc-idea-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.doc-links-lbl { margin-left: 6px; }
.chip { max-width: 240px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover { border-color: var(--accent); }
.doc-idea-acts { display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity .15s; }
.doc-idea:hover .doc-idea-acts, .doc-idea:focus-within .doc-idea-acts { opacity: 1; }
@media (hover: none) { .doc-idea-acts { opacity: .8; } }
.doc-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px 6px 8px; border: 1px dashed var(--line-strong); border-radius: 999px; background: transparent; color: var(--muted); font-weight: 600; font-size: 13.5px; transition: color .15s, border-color .15s, background .15s; }
.doc-add svg { width: 15px; height: 15px; }
.doc-add:hover { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.doc-sec:not(.lvl-1) > .doc-add { font-size: 12.5px; padding: 4px 10px 4px 6px; }
.doc-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.doc-empty p { margin: 0 0 16px; }

/* ================= search ================= */
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); min-width: 300px; max-height: min(460px, 70vh); overflow: auto; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); z-index: 40; animation: pop .14s ease-out; }
.sr-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--ink); }
.sr-item.act, .sr-item:hover { background: var(--soft); }
.sr-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.sr-ico svg { width: 16px; height: 16px; }
.sr-txt { min-width: 0; display: flex; flex-direction: column; }
.sr-t { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-t mark { background: var(--pink-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.sr-d { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-empty { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 14px; }

/* ================= modals & toasts ================= */
.scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(20, 10, 26, .38); opacity: 0; transition: opacity .18s; }
.scrim.on { opacity: 1; }
.modal { width: min(520px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 22px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateY(10px) scale(.98); transition: transform .22s cubic-bezier(.3, 1.3, .5, 1); }
.modal-wide { width: min(820px, 100%); }
.scrim.on .modal { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 12px 4px 22px; }
.modal-head h2 { margin: 0; font: 800 21px/1.2 var(--f-display); letter-spacing: -.01em; }
.modal-body { padding: 8px 22px 6px; overflow: auto; overscroll-behavior: contain; }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 22px 20px; }
.modal-text { margin: 0 0 12px; color: var(--muted); }
.modal-text b { color: var(--ink); }
.muted { color: var(--muted); font-size: 13.5px; }
.form { display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 13px; font-weight: 700; }
.field-inline { display: flex; gap: 8px; align-items: center; }
.field-help { margin: 0; font-size: 13px; color: var(--muted); }
.field-adv summary { cursor: pointer; font-size: 13.5px; font-weight: 650; color: var(--accent); }
.field-adv[open] summary { margin-bottom: 10px; }
.field-status { margin: 0; font-size: 13.5px; color: var(--muted); min-height: 1.4em; }
.field-status.ok { color: var(--ok); } .field-status.err, .err { color: var(--danger); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex: none; }
.callout { padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 13.5px; line-height: 1.5; }
.callout code, .help code { font: 500 12.5px var(--f-mono); padding: 1px 5px; border-radius: 5px; background: var(--surface); }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); cursor: pointer; transition: border-color .15s, background .15s; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { margin-top: 3px; accent-color: var(--accent); }
.choice span { display: flex; flex-direction: column; gap: 2px; }
.choice small { color: var(--muted); font-size: 13px; }
.ai-status { display: flex; flex-direction: column; gap: 10px; }
.ai-status:has(.spinner) { flex-direction: row; align-items: center; color: var(--muted); }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.plan-sum { margin: 0; font-weight: 650; }
.plan, .plan ul { list-style: none; margin: 0; padding: 0; }
.plan { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow: auto; padding: 10px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line); }
.plan ul { margin: 6px 0 0 18px; padding-left: 12px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.plan-g { display: flex; align-items: center; gap: 8px; }
.plan-g .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--strong); transform: rotate(45deg); }
.badge { font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.plan-n { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.plan-ideas { margin: 3px 0 0 18px; font-size: 12.5px; color: var(--muted); }
.facts { margin: 0 0 12px; padding-left: 20px; color: var(--ink); font-size: 14px; }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.help h3 { margin: 10px 0 4px; font: 800 15.5px var(--f-display); }
.help ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.help li { margin: 3px 0; }
.keys { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.keys td { padding: 5px 4px; border-bottom: 1px solid var(--line); }
.keys td:first-child { white-space: nowrap; width: 42%; }
.keys kbd { margin-right: 3px; }
.help-foot { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.toasts { position: fixed; z-index: 70; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 24px); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 16px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 550; box-shadow: var(--shadow-lg); animation: toast .22s ease-out; }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.toast-error { background: var(--danger); color: #fff; }
.toast-act { border: 0; padding: 5px 10px; border-radius: 9px; background: color-mix(in srgb, var(--bg) 18%, transparent); color: inherit; font-weight: 750; }
.toast-act:hover { background: color-mix(in srgb, var(--bg) 30%, transparent); }
.toast-x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: inherit; opacity: .7; }
.toast-x svg { width: 15px; height: 15px; }
@keyframes toast { from { opacity: 0; transform: translateY(8px); } }
body[data-view="doc"] .toasts { bottom: calc(24px + env(safe-area-inset-bottom)); }

/* ================= inside huskytooth.com (shared bar + floating "Request a page" button) ================= */
.ht .by { display: none; }
.ht .zoom { bottom: calc(86px + env(safe-area-inset-bottom)); }

/* ================= responsive ================= */
@media (max-width: 1080px) {
  .save-chip .save-txt { display: none; }
  .save-chip { width: 36px; padding: 0; justify-content: center; }
  .search .kbd { display: none; }
}
@media (max-width: 900px) {
  .by span { display: none; }
  .by { padding: 0 4px; width: 28px; justify-content: center; }
  .view-toggle .lbl, #ai-btn .lbl { display: none; }
  .view-toggle > button { padding: 0 11px; }
  #ai-btn { width: 40px; padding: 0; }
  .type-picker .lbl, .tb-btn .lbl { display: none; }
  .type-picker > button, .tb-btn { padding: 0 11px; }
}
@media (max-width: 680px) {
  :root { --top: 56px; }
  .topbar { gap: 6px; }
  .brand-word { font-size: 16.5px; }
  .search { display: none; }
  .search-open { display: inline-grid; }
  body.search-on .search { display: flex; position: absolute; left: 10px; right: 10px; top: 8px; width: auto; z-index: 5; box-shadow: var(--shadow); }
  .notice { flex-wrap: wrap; }
  .notice p { flex-basis: calc(100% - 40px); }
  .notice .btn { flex: 1; }
  .toolbar { bottom: max(12px, env(safe-area-inset-bottom)); gap: 2px; padding: 4px; }
  .type-picker > button, .tb-btn { height: 40px; padding: 0 10px; }
  .tb-btn.icon-only { width: 36px; }
  .tb-btn.icon-only[data-cmd="redo"] { display: none; }
  .zoom { bottom: auto; top: 12px; right: 12px; flex-direction: column; }
  .zoom-pct { display: none; }
  .inspector { left: 10px; right: 10px; top: auto; bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; max-height: 46dvh; border-radius: 20px; animation: up .22s ease-out; }
  .help-grid { grid-template-columns: minmax(0, 1fr); }
  .doc { padding-top: 26px; }
  body.notice-on .doc { padding-top: 230px; }
  .doc-sec.lvl-1 { padding: 14px 14px 12px; }
  .modal-foot .btn { flex: 1; }
}
@media (max-width: 680px) {
  body.is-editing .inspector { display: none !important; }
  .board-btn { max-width: 130px; height: 34px; padding: 0 7px 0 11px; font-size: 13.5px; }
  .ht .zoom { bottom: auto; }
  /* keep clear of the HuskyTooth request button in the bottom-right corner */
  .ht .toolbar { left: 10px; transform: none; max-width: calc(100% - 92px); }
  .ht .toolbar [data-cmd="undo"], .ht .toolbar [data-cmd="redo"], .ht .toolbar .tb-sep:nth-of-type(2) { display: none; }
  .ht .type-picker > button, .ht .tb-btn { padding: 0 8px; }
}
@media (max-width: 520px) {
  .save-chip:not(.bad) { display: none; }
  .ht .brand { display: none; }
}
@media (max-width: 430px) {
  .brand-word { display: none; }
  .view-toggle { margin-left: 0; }
}
@media (max-width: 400px) {
  .topbar { gap: 4px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .board-btn { max-width: 100px; }
  .view-toggle > button { padding: 0 8px; }
  .topbar .icon-btn, #ai-btn { width: 36px; }
  .by { display: none; }
  .type-picker > button { padding: 0 9px; }
}
@keyframes up { from { opacity: 0; transform: translateY(14px); } }