/* ==========================================================================
   LUMEN ΓÇö STUDY EXTENSIONS
   Adds: Board (spatial canvas), Highlights, Review (memory engine), Insight.

   INTEGRATION RULE: this file uses ONLY tokens that already exist in
   core-styles-01.css (--paper/--ink/--panel*/--surface-*/--line/--border/
   --accent*/--ok/--warn/--err/--serif/--sans/--mono/--r-*/--shadow-*/
   --fs-*/--dur-*/--ease-*). Every one of them is redefined by the `paper`,
   `midnight`, `contrast` and `comfy` skins, so all five themes work with no
   per-skin overrides here. Zero !important ΓÇö that is deliberate, see the
   !important census in core-styles-01.css.
   ========================================================================== */

:root{
  /* Derived study tokens. Defined once, inherit the skin through the parents. */
  --ls-tint:color-mix(in srgb, var(--accent) 9%, transparent);
  --ls-tint-line:color-mix(in srgb, var(--accent) 26%, transparent);
  --ls-ok-tint:color-mix(in srgb, var(--ok) 10%, transparent);
  --ls-ok-line:color-mix(in srgb, var(--ok) 28%, transparent);
  --ls-warn-tint:color-mix(in srgb, var(--warn) 10%, transparent);
  --ls-warn-line:color-mix(in srgb, var(--warn) 28%, transparent);
  --ls-err-tint:color-mix(in srgb, var(--err) 10%, transparent);
  --ls-err-line:color-mix(in srgb, var(--err) 28%, transparent);
  --ls-wl-tint:color-mix(in srgb, var(--muted) 9%, transparent);
  --ls-wl-line:color-mix(in srgb, var(--muted) 24%, transparent);
}

/* ============================ shared primitives ========================= */
.ls-mono-label{
  font:600 var(--fs-2xs)/1 var(--mono);
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.ls-pill{
  display:inline-flex;align-items:center;gap:5px;
  height:20px;padding:0 8px;border-radius:var(--r-full);
  font:600 var(--fs-xs)/1 var(--sans);
  background:var(--surface-2);color:var(--muted);
  border:1px solid var(--border);white-space:nowrap;
}
.ls-pill[data-tone="accent"]{background:var(--ls-tint);color:var(--accent);border-color:var(--ls-tint-line)}
.ls-pill[data-tone="ok"]{background:var(--ls-ok-tint);color:var(--ok);border-color:var(--ls-ok-line)}
.ls-pill[data-tone="warn"]{background:var(--ls-warn-tint);color:var(--warn);border-color:var(--ls-warn-line)}
.ls-pill[data-tone="err"]{background:var(--ls-err-tint);color:var(--err);border-color:var(--ls-err-line)}

.cite-chip{
  display:inline-flex;align-items:center;gap:4px;
  height:20px;padding:0 8px;border-radius:var(--r-full);
  font:600 var(--fs-xs)/1 var(--sans);
  background:var(--surface-2);color:var(--accent);
  border:1px solid var(--accent);cursor:pointer;
  margin:0 2px;vertical-align:baseline;
  transition:background .12s,border-color .12s;
}
.cite-chip:hover{background:var(--ls-tint);border-color:var(--ls-tint-line)}

.ls-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:52px 24px;text-align:center;color:var(--muted);
}
.ls-empty h3{margin:0;font:600 var(--fs-md)/1.3 var(--serif);color:var(--ink)}
.ls-empty p{margin:0;max-width:420px;font-size:var(--fs-base);line-height:1.65;color:var(--muted)}

.ls-panel{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--shadow-xs);
}
.ls-row{display:flex;align-items:center;gap:8px}
.ls-grow{flex:1;min-width:0}
.ls-scroll{overflow:auto;scrollbar-width:thin}

/* thin scrollbars that match Lumen's */
.ls-scroll::-webkit-scrollbar{width:8px;height:8px}
.ls-scroll::-webkit-scrollbar-track{background:transparent}
.ls-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.ls-scroll::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:padding-box}

/* ============================== board ================================== */
.ls-board{
  position:relative;flex:1;min-height:0;overflow:hidden;
  background:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0/26px 26px,
    var(--bg);
  touch-action:none;
}
.ls-board[data-mode="pan"]{cursor:grab}
.ls-board[data-mode="pan"][data-drag="1"]{cursor:grabbing}
.ls-plane{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.ls-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.ls-wire{stroke:var(--muted);stroke-width:1.6;fill:none;stroke-linecap:round;opacity:.75}
.ls-wire-g[data-kind="relation"] .ls-wire{stroke-dasharray:5 4}
.ls-wire-g[data-sel="1"] .ls-wire{stroke:var(--accent);stroke-width:2.4;opacity:1}
.ls-wire-g[data-tone="ok"] .ls-wire{stroke:var(--ok)}
.ls-wire-g[data-tone="warn"] .ls-wire{stroke:var(--warn)}
.ls-wire-g[data-tone="err"] .ls-wire{stroke:var(--err)}

/* --- sections: Lumen's tonal accent system instead of pastel palettes --- */
.ls-sec{
  position:absolute;border-radius:var(--r-lg);
  border:1px solid var(--border);background:var(--ls-wl-tint);
  padding:30px 12px 12px;
}
.ls-sec[data-tone="accent"]{background:var(--ls-tint);border-color:var(--ls-tint-line)}
.ls-sec[data-tone="ok"]{background:var(--ls-ok-tint);border-color:var(--ls-ok-line)}
.ls-sec[data-tone="warn"]{background:var(--ls-warn-tint);border-color:var(--ls-warn-line)}
.ls-sec[data-tone="err"]{background:var(--ls-err-tint);border-color:var(--ls-err-line)}
.ls-sec[data-tone="mute"]{background:var(--ls-wl-tint);border-color:var(--ls-wl-line)}
.ls-sec[data-tone="none"]{background:transparent;border-color:transparent;padding:0}
.ls-sec[data-sel="1"]{box-shadow:var(--ring-soft)}

.ls-sec-label{
  position:absolute;top:8px;left:10px;
  display:inline-flex;align-items:center;gap:6px;height:22px;
  padding:0 9px 0 10px;border-radius:var(--r-full);
  background:var(--panel2);border:1px solid var(--border-strong);
  font:600 var(--fs-xs)/1 var(--sans);color:var(--ink);
  box-shadow:var(--shadow-xs);max-width:calc(100% - 20px);
}
.ls-sec[data-tone="accent"] .ls-sec-label{background:var(--ls-tint);border-color:var(--ls-tint-line);color:var(--accent)}
.ls-sec[data-tone="ok"] .ls-sec-label{background:var(--ls-ok-tint);border-color:var(--ls-ok-line);color:var(--ok)}
.ls-sec[data-tone="warn"] .ls-sec-label{background:var(--ls-warn-tint);border-color:var(--ls-warn-line);color:var(--warn)}
.ls-sec[data-tone="err"] .ls-sec-label{background:var(--ls-err-tint);border-color:var(--ls-err-line);color:var(--err)}
.ls-sec[data-tone="mute"] .ls-sec-label{background:var(--panel2);color:var(--muted)}
.ls-sec-label > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-sec-label .ls-meta{color:var(--muted);font-weight:500}
.ls-sec-label .ls-dots{
  display:grid;place-items:center;width:16px;height:16px;margin-left:1px;
  border-radius:var(--r-xs);color:var(--muted);cursor:pointer;flex:none;
}
.ls-sec-label .ls-dots:hover{background:var(--surface-3);color:var(--ink)}
.ls-sec-grip{
  position:absolute;right:3px;bottom:3px;width:14px;height:14px;cursor:nwse-resize;
  border-radius:0 0 var(--r-lg) 0;opacity:0;transition:opacity var(--dur-fast);
}
.ls-sec:hover .ls-sec-grip{opacity:1}

/* --- cards --- */
.ls-card{
  position:absolute;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
  padding:10px 12px 11px;display:flex;flex-direction:column;gap:5px;
  transition:box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.ls-card:hover{box-shadow:var(--shadow-sm);border-color:var(--border-strong)}
.ls-card[data-sel="1"]{border-color:var(--accent);box-shadow:var(--ring-soft),var(--shadow-sm)}
.ls-card[data-drag="1"]{box-shadow:var(--shadow-md);cursor:grabbing}
.ls-card-title{
  font:600 var(--fs-base)/1.35 var(--serif);color:var(--ink);
  letter-spacing:-.005em;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
}
.ls-card[data-clamp="1"] .ls-card-title{-webkit-line-clamp:1}
.ls-card[data-clamp="2"] .ls-card-title{-webkit-line-clamp:2}
.ls-card[data-clamp="3"] .ls-card-title{-webkit-line-clamp:3}
.ls-card-body{
  font-size:var(--fs-sm);line-height:1.6;color:var(--muted);
  white-space:pre-wrap;word-break:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
}
.ls-card[data-clamp="4"] .ls-card-body{-webkit-line-clamp:4}
.ls-card[data-clamp="6"] .ls-card-body{-webkit-line-clamp:6}
.ls-card[data-clamp="9"] .ls-card-body{-webkit-line-clamp:9}
.ls-card[data-clamp="14"] .ls-card-body{-webkit-line-clamp:14}
.ls-card-src{
  margin-top:auto;padding-top:4px;font-size:var(--fs-xs);color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ls-card-src b{color:var(--muted);font-weight:600}
.ls-card[data-kind="source"] .ls-card-src b{color:var(--accent)}
.ls-card-edge{position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--accent)}
.ls-card[data-kind="highlight"] .ls-card-edge{background:var(--warn)}
.ls-card[data-kind="quiz"] .ls-card-edge{background:var(--ok)}
.ls-card[data-kind="deck"] .ls-card-edge{background:var(--accent)}
.ls-card[data-kind="exam"] .ls-card-edge{background:var(--err)}
.ls-card[data-kind="insight"] .ls-card-edge{background:var(--ok)}
.ls-card-menu{
  position:absolute;top:5px;right:5px;width:20px;height:20px;
  display:none;place-items:center;border-radius:var(--r-xs);
  background:var(--panel2);border:1px solid var(--border);color:var(--muted);cursor:pointer;
}
.ls-card:hover .ls-card-menu{display:grid}
.ls-card-menu:hover{color:var(--ink);border-color:var(--border-strong)}
.ls-card-grip{
  position:absolute;left:-4px;top:50%;transform:translateY(-50%);
  width:8px;height:26px;border-radius:var(--r-full);cursor:ew-resize;opacity:0;
  transition:opacity var(--dur-fast);
}
.ls-card:hover .ls-card-grip{opacity:1}
.ls-card-grip:hover{background:var(--accent)}
.ls-card-handle{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;opacity:0;transition:opacity var(--dur-fast)}
.ls-card:hover .ls-card-handle{opacity:1}
.ls-card-tags{position:absolute;top:6px;right:26px;display:flex;gap:4px}

/* --- floating board toolbar --- */
.ls-tools{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:2px;padding:5px;
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);z-index:20;
}
.ls-tools button{
  width:30px;height:30px;border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--muted);
  border:0;background:none;cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast);
}
.ls-tools button:hover{background:var(--surface-2);color:var(--ink)}
.ls-tools button[aria-pressed="true"]{background:var(--ls-tint);color:var(--accent)}
.ls-tools hr{border:0;border-top:1px solid var(--border);margin:4px 2px}

/* --- zoom cluster --- */
.ls-zoom{
  position:absolute;right:16px;bottom:16px;z-index:20;
  display:flex;align-items:center;gap:2px;padding:3px;
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-full);box-shadow:var(--shadow-sm);
}
.ls-zoom button{
  width:28px;height:28px;border-radius:var(--r-full);border:0;background:none;
  display:grid;place-items:center;color:var(--muted);cursor:pointer;
}
.ls-zoom button:hover{background:var(--surface-2);color:var(--ink)}
.ls-zoom button[aria-pressed="true"]{color:var(--accent);background:var(--ls-tint)}
.ls-zoom .ls-sep{width:1px;height:16px;background:var(--border);margin:0 3px}
.ls-zoom .ls-pct{
  min-width:42px;text-align:center;font:600 var(--fs-xs)/1 var(--mono);
  color:var(--muted);font-variant-numeric:tabular-nums;
}

/* --- selection marquee --- */
.ls-marquee{
  position:absolute;border:1px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius:var(--r-xs);pointer-events:none;z-index:15;
}

/* ============================ highlights =============================== */
.ls-hl-layer{position:absolute;inset:0;pointer-events:none;z-index:3}
.ls-hl{
  position:absolute;border-radius:2px;pointer-events:auto;cursor:pointer;
  mix-blend-mode:screen;opacity:.62;
  transition:box-shadow var(--dur-fast);
}
[data-skin="paper"] .ls-hl{mix-blend-mode:multiply;opacity:.5}
.ls-hl:hover{box-shadow:0 0 0 2px var(--accent-glow)}
.ls-hl[data-active="1"]{box-shadow:0 0 0 2px var(--accent)}
.ls-hl[data-color="yellow"]{background:#ffd54a}
.ls-hl[data-color="green"]{background:#7dd87d}
.ls-hl[data-color="blue"]{background:#74c0fc}
.ls-hl[data-color="pink"]{background:#f783ac}
.ls-hl[data-color="purple"]{background:#b197fc}
.ls-hl[data-color="orange"]{background:#ffab66}

.ls-hl-bar{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  padding:0 0 8px;
}
.ls-sw{
  width:22px;height:22px;border-radius:var(--r-xs);cursor:pointer;
  border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line2);
}
.ls-sw[aria-pressed="true"]{border-color:var(--accent)}

.ls-hl-item{
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--panel);padding:10px 12px;margin-bottom:8px;
}
.ls-hl-item blockquote{
  margin:0 0 8px;padding-left:10px;
  border-left:3px solid var(--warn);
  font-size:var(--fs-base);line-height:1.6;color:var(--ink);
}
.ls-hl-item .ls-note{font-size:var(--fs-sm);color:var(--muted);margin:0 0 8px;line-height:1.55}

/* ============================== review ================================= */
.ls-rv{max-width:760px;margin:0 auto;padding:20px 18px 48px;display:flex;flex-direction:column;gap:14px}
.ls-rv-head{
  border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--panel);padding:14px 16px;
}
.ls-rv-head h3{margin:0 0 5px;font:600 var(--fs-lg)/1.3 var(--serif);color:var(--ink)}
.ls-rv-head p{margin:0;font-size:var(--fs-base);line-height:1.65;color:var(--muted)}
.ls-rv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px}
.ls-stat{
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--panel);padding:10px 12px;
}
.ls-stat b{display:block;font:700 var(--fs-xl)/1.1 var(--serif);font-variant-numeric:tabular-nums}
.ls-stat span{font:600 var(--fs-2xs)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.ls-rv-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:26px 24px;min-height:210px;
  display:flex;flex-direction:column;justify-content:center;gap:12px;
}
.ls-rv-card .q{font:600 var(--fs-lg)/1.45 var(--serif);color:var(--ink)}
.ls-rv-card .a{font-size:var(--fs-base);line-height:1.7;color:var(--muted);white-space:pre-wrap}
.ls-rv-card .hint{font-size:var(--fs-base);color:var(--dim);font-style:italic}
.ls-rv-extra{
  font-size:var(--fs-sm);line-height:1.6;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--ls-tint);border:1px solid var(--ls-tint-line);color:var(--accent);
}
.ls-rv-extra[data-kind="feynman"]{background:var(--ls-ok-tint);border-color:var(--ls-ok-line);color:var(--ok)}
.ls-rv-grades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ls-rv-grades button{
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--panel);cursor:pointer;padding:11px 6px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:border-color var(--dur-fast),background var(--dur-fast);
}
.ls-rv-grades button:hover{background:var(--surface-2);border-color:var(--border-strong)}
.ls-rv-grades .g{font:600 var(--fs-base)/1 var(--sans)}
.ls-rv-grades .n{font:500 var(--fs-2xs)/1 var(--mono);color:var(--dim)}
.ls-rv-grades button[data-g="again"]{color:var(--err)}
.ls-rv-grades button[data-g="hard"]{color:var(--warn)}
.ls-rv-grades button[data-g="good"]{color:var(--ok)}
.ls-rv-grades button[data-g="easy"]{color:var(--accent)}
.ls-rv-bar{height:4px;background:var(--surface-3);border-radius:var(--r-full);overflow:hidden}
.ls-rv-bar i{display:block;height:100%;background:var(--accent);transition:width var(--dur-slow) var(--ease-out)}

.ls-forecast{display:flex;align-items:flex-end;gap:3px;height:66px}
.ls-forecast i{
  flex:1;min-width:5px;border-radius:2px 2px 0 0;background:var(--accent);opacity:.72;
}
.ls-forecast i[data-today="1"]{opacity:1}
.ls-forecast i[data-hot="1"]{background:var(--warn);opacity:1}

.ls-mastery{display:flex;flex-direction:column;gap:9px}
.ls-mrow{display:grid;grid-template-columns:130px 1fr 46px;gap:11px;align-items:center;font-size:var(--fs-base)}
.ls-mrow .lbl{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-mrow .track{height:7px;background:var(--surface-3);border-radius:var(--r-full);overflow:hidden}
.ls-mrow .track i{display:block;height:100%;border-radius:var(--r-full);background:var(--accent);transition:width var(--dur-slow) var(--ease-out)}
.ls-mrow .pc{text-align:right;color:var(--dim);font:600 var(--fs-xs)/1 var(--mono);font-variant-numeric:tabular-nums}

/* ============================== insight ================================ */
.ls-ins{
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--panel);padding:10px 12px;margin-bottom:8px;
}
.ls-ins p{margin:0 0 7px;font-size:var(--fs-base);line-height:1.55;color:var(--ink)}
.ls-ins details{font-size:var(--fs-xs);color:var(--muted)}
.ls-ins summary{cursor:pointer;color:var(--dim)}
.ls-ins details p{
  margin:6px 0 0;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--muted);line-height:1.6;white-space:pre-wrap;
}

/* ======================= notebook scope switcher ======================== */
/* ---------------- review: navigation, topics, reminders ------------------ */
.ls-rv-nav{
  display:flex;align-items:center;gap:7px;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line);
}
.ls-rv-nav .btn{font-size:var(--fs-sm)}
.ls-rv-nav .btn[disabled]{opacity:.38;pointer-events:none}
.ls-rv-nav .btn svg{width:14px;height:14px}
.ls-topics{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px;
}
.ls-topic{
  display:flex;align-items:center;gap:7px;padding:8px 10px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink);
  font:500 var(--fs-sm)/1.3 var(--sans);text-align:left;cursor:pointer;
}
.ls-topic:hover{border-color:var(--accent);background:var(--surface)}
.ls-topic-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-remind{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:14px 0 4px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);
}
.ls-remind svg{width:15px;height:15px;color:var(--dim)}
.ls-remind-l{font:600 var(--fs-xs)/1 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.ls-remind .ls-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.ls-remind .ls-seg button{
  padding:4px 9px;border:0;background:transparent;
  color:var(--muted);font:500 var(--fs-xs)/1.4 var(--sans);cursor:pointer;
}
.ls-remind .ls-seg button+button{border-left:1px solid var(--border)}
.ls-remind .ls-seg button.on{background:var(--accent);color:var(--panel)}
.ls-remind .ls-seg button:hover:not(.on){background:var(--surface)}

/* -------- floating selection menu (zero-friction highlight actions) -------- */
.lsq{
  position:fixed;z-index:8000;display:flex;align-items:center;gap:2px;
  padding:4px;border-radius:var(--r-md);
  background:var(--panel);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg);
  animation:lsk-pop .11s ease-out;
}
.lsq-b{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 9px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--ink);
  font:500 var(--fs-sm)/1 var(--sans);white-space:nowrap;cursor:pointer;
}
.lsq-b:hover,.lsq-b:focus-visible{background:var(--surface-2);outline:0}
.lsq-b svg{width:14px;height:14px;opacity:.85}
.lsq-b.is-primary{background:var(--accent);color:var(--panel)}
.lsq-b.is-primary:hover{filter:brightness(1.08);background:var(--accent)}
.lsq-b.is-primary svg{opacity:1}
.lsq-sep{width:1px;height:18px;margin:0 3px;background:var(--line)}
@media (max-width:720px){
  .lsq-b span{display:none}
  .lsq-b{padding:8px}
  .lsq-b.is-primary span{display:inline}
}
/* Keep the browser's own selection callout (Search / Copy / Translate) out of
   the way. There is no API to remove it, but disabling selection on the page
   chrome means it only appears over real text, and Lumen's menu draws above. */
#rTools,#rName,.ls-hl-bar{-webkit-user-select:none;user-select:none}

/* ============================================================================
   WORKSPACE ΓÇö minimised, resizable, tiled panels
   ========================================================================= */
#lsw-root{position:fixed;inset:0;z-index:60;pointer-events:none}
.lsw{
  position:fixed;display:flex;flex-direction:column;overflow:hidden;
  pointer-events:auto;
  background:var(--panel);
  border:1px solid var(--border-strong);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  animation:lsk-pop .13s cubic-bezier(.2,.8,.3,1);
}
.lsw.is-min{display:none}
.lsw.is-max{left:8px!important;right:8px!important;width:auto!important;top:62px!important;bottom:58px!important;height:auto!important}
.lsw-bar{
  display:flex;align-items:center;gap:7px;flex:none;
  padding:0 6px 0 0;height:34px;
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  cursor:default;
}
.lsw-grip{
  width:22px;height:100%;flex:none;cursor:grab;
  background:
    radial-gradient(circle at 50% 50%,var(--border-strong) 1px,transparent 1.2px) 0 0/5px 5px;
  opacity:.75;
}
.lsw-grip:active{cursor:grabbing}
.lsw-ic{width:14px;height:14px;flex:none;color:var(--dim)}
.lsw-title{font:600 var(--fs-sm)/1 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsw-spacer{flex:1}
.lsw-btn{
  width:26px;height:26px;flex:none;display:grid;place-items:center;
  border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);cursor:pointer;
}
.lsw-btn:hover{background:var(--surface-2);color:var(--ink)}
.lsw-btn.is-close:hover{background:var(--err);color:var(--panel)}
.lsw-btn svg{width:14px;height:14px}
.lsw-body{
  flex:1;min-height:0;overflow:auto;position:relative;
  display:flex;flex-direction:column;
  background:var(--paper);
}
.lsw-body > *{min-height:0}
.lsw-phead{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:8px 12px;font:italic 600 var(--fs-md)/1.2 var(--serif);color:var(--ink);
  border-bottom:1px solid var(--line);
}
.lsw-phead .vbar,
.lsw-body > .vbar.lsw-vbar{
  margin:0;flex:none;border-bottom:1px solid var(--line);
  padding:6px 10px;min-height:0;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.lsw-body > .vbar.lsw-vbar .vtitle{font-size:var(--fs-md)}
.lsw-hint{padding:18px;font-size:var(--fs-sm);color:var(--muted)}
.lsw-hz{
  position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 52%,var(--border-strong) 52%,var(--border-strong) 62%,transparent 62%,transparent 72%,var(--border-strong) 72%);
  opacity:.7;
}
/* dock */
.lsw-dock{
  position:fixed;left:50%;bottom:10px;transform:translateX(-50%);
  z-index:70;display:flex;align-items:center;gap:3px;
  padding:5px;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg);
}
.lsw-dock-b{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  height:32px;min-width:32px;padding:0 9px;justify-content:center;
  border:0;border-radius:var(--r-full);background:transparent;color:var(--muted);cursor:pointer;
}
.lsw-dock-b:hover{background:var(--surface-2);color:var(--ink)}
.lsw-dock-b svg{width:16px;height:16px}
.lsw-dock-b span{font:600 var(--fs-xs)/1 var(--sans)}
.lsw-dock-b.is-open{color:var(--accent);background:var(--ls-tint)}
.lsw-dock-b.is-open::after{
  content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--accent);
}
.lsw-dock-tools{display:flex;align-items:center;gap:2px;margin-left:5px;padding-left:6px;border-left:1px solid var(--line)}
@media (max-width:720px){
  /* Wrap rather than scroll: a single scrolling row put the Hide button past
     the right edge, which is why there appeared to be no way to hide the
     switcher at all on a narrow screen. Labels go, icons stay, tools stay. */
  .lsw-dock{left:8px;right:8px;transform:none;justify-content:center;flex-wrap:wrap;max-width:none}
  .lsw-dock-b span{display:none}
  .lsw-dock-tools{display:flex;margin-left:0;padding-left:0;border-left:0;justify-content:center}
  .lsw{border-radius:var(--r-sm)}
}
@media (max-width:560px){
  .lsw{left:6px!important;right:6px;width:auto!important}
  .lsw-bar{height:38px}
}

/* ======================= notebook scope switcher ======================== */
/* ============================================================================
   UI KIT ΓÇö in-app dialogs, menus and inputs.
   Replaces window.prompt/confirm/alert. Token-driven, so every skin applies.
   ========================================================================= */
.lsk-overlay{
  position:fixed;inset:0;z-index:9000;
  display:grid;place-items:center;padding:20px;
  background:color-mix(in srgb,var(--ink) 55%,transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:lsk-fade .13s ease-out;
}
@keyframes lsk-fade{from{opacity:0}to{opacity:1}}
@keyframes lsk-pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.lsk-card{
  width:min(540px,100%);max-height:86vh;display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border-strong);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  animation:lsk-pop .15s cubic-bezier(.2,.8,.3,1);
}
.lsk-card.lsk-wide{width:min(760px,100%)}
.lsk-head{
  display:flex;align-items:center;gap:10px;
  padding:13px 14px 11px 16px;border-bottom:1px solid var(--line);
}
.lsk-title{margin:0;flex:1;font:600 var(--fs-lg)/1.3 var(--serif);color:var(--ink)}
.lsk-x{
  width:28px;height:28px;flex:none;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;
}
.lsk-x:hover{background:var(--surface-2);color:var(--ink)}
.lsk-body{padding:14px 16px;overflow:auto}
.lsk-msg{margin:0 0 12px;font-size:var(--fs-base);line-height:1.6;color:var(--ink)}
.lsk-fields{display:grid;gap:11px}
.lsk-field{display:grid;gap:5px}
.lsk-label{font:600 var(--fs-xs)/1 var(--sans);color:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.lsk-input{
  width:100%;padding:8px 10px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink);
  font:400 var(--fs-base)/1.5 var(--sans);
}
.lsk-input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.lsk-input.lsk-bad{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 22%,transparent)}
.lsk-textarea{resize:vertical;min-height:64px}
.lsk-hint{font-size:var(--fs-xs);color:var(--dim)}
.lsk-foot{
  display:flex;justify-content:flex-end;gap:8px;
  padding:11px 16px;border-top:1px solid var(--line);
}
.lsk-menu{
  position:fixed;z-index:9100;min-width:210px;max-width:min(340px,92vw);
  max-height:min(70vh,520px);overflow:auto;padding:5px;
  background:var(--panel);
  border:1px solid var(--border-strong);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  animation:lsk-pop .1s ease-out;
}
.lsk-mi{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 9px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--ink);
  font:400 var(--fs-base)/1.35 var(--sans);text-align:left;cursor:pointer;
}
.lsk-mi:hover,.lsk-mi:focus-visible{background:var(--surface-2);outline:0}
.lsk-mi.is-active{color:var(--accent)}
.lsk-mi.is-danger{color:var(--err)}
.lsk-mi-ic{flex:none;width:15px;height:15px;opacity:.8}
.lsk-mi-l{flex:1;min-width:0}
.lsk-mi-h{flex:none;font-size:var(--fs-xs);color:var(--dim)}
.lsk-mi-k{
  flex:none;padding:1px 5px;border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid var(--border);
  font:600 10px/1.5 var(--mono);color:var(--dim);
}
.lsk-sep{margin:4px 6px;border:0;border-top:1px solid var(--line)}
.lsk-sheet-wrap{position:fixed;inset:0;z-index:9050;display:flex;align-items:flex-end;background:color-mix(in srgb,var(--ink) 55%,transparent)}
.lsk-sheet{
  width:100%;padding:8px 10px calc(10px + env(safe-area-inset-bottom));
  background:var(--panel);border-top:1px solid var(--border-strong);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  animation:lsk-pop .16s cubic-bezier(.2,.8,.3,1);
}
.lsk-grab{width:38px;height:4px;margin:0 auto 8px;border-radius:2px;background:var(--border-strong)}
.lsk-si{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 10px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--ink);font:500 var(--fs-md)/1.3 var(--sans);text-align:left;
}
.lsk-si.is-danger{color:var(--err)}
.lsk-si:hover{background:var(--surface-2)}
@media (max-width:560px){
  .lsk-overlay{padding:0;align-items:flex-end}
  .lsk-card{width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
  .lsk-foot{padding-bottom:calc(11px + env(safe-area-inset-bottom))}
  .lsk-foot .btn{flex:1;justify-content:center}
}
/* Native selection callout: the browser offers Search/Copy/Translate on every
   text selection and it lands on top of Lumen's own highlight toolbar. There is
   no API to remove it, but suppressing the selection callout on the surfaces
   where Lumen draws its own UI keeps the reader menu clean. */
.lsk-noselect{-webkit-user-select:none;user-select:none}

.ls-nb-bar{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:0 0 10px;
}
.ls-nb-bar select{max-width:230px}

/* A <select> styled as .btn: .btn sets height/border/padding that a native
   select renders inconsistently across engines, and it left the dropdown
   arrow misaligned. Match the app's own control metrics explicitly. */
.ls-nb-sel{
  height:28px;padding:0 26px 0 9px;max-width:230px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:var(--surface-2);color:var(--ink);
  font:500 var(--fs-sm)/1 var(--sans);
  cursor:pointer;
}
.ls-nb-sel:hover{border-color:var(--accent);color:var(--ink)}
.ls-nb-sel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Inline variant. The switcher is also mounted into a .vbar, which is itself
   `display:flex; flex-wrap:wrap` ΓÇö so the standalone rules above made the
   select and its buttons wrap onto a second line and collide with the view
   title. Collapse it to a single non-wrapping row with no block padding. */
.vbar .ls-bctl{
  display:flex;align-items:center;gap:8px;
  flex-wrap:nowrap;min-width:0;
}
.vbar .ls-nb-bar{
  flex-wrap:nowrap;padding:0;gap:7px;min-width:0;
}
.vbar .ls-nb-bar .ls-nb-sel{max-width:230px;min-width:150px}
.vbar .ls-nb-bar .btn{white-space:nowrap}
.vbar .ls-nb-bar .ls-pill{display:none}   /* the count pill duplicates the title bar */
@media (max-width:820px){
  .vbar .ls-nb-bar .ls-nb-sel{max-width:130px}
}

/* ============================ responsive =============================== */
@media (max-width:900px){
  .ls-tools{left:8px;padding:4px}
  .ls-tools button{width:28px;height:28px}
  .ls-zoom{right:10px;bottom:10px}
  .ls-rv-grades{grid-template-columns:repeat(2,1fr)}
  .ls-mrow{grid-template-columns:100px 1fr 40px}
  .ls-rv{padding:14px 12px 40px}
}
@media (prefers-reduced-motion:reduce){
  .ls-card,.ls-hl,.ls-sw,.ls-tools button,.ls-zoom button,.ls-rv-bar i,.ls-mrow .track i{transition:none}
}
/* =============================================================================
   SECOND WAVE ΓÇö graph, capture, library, export, reader, AI, memory, undo
   Token-driven only, so all five skins apply with no per-theme overrides.
   ========================================================================= */

/* ---------------------------------------------------------------- shared */
.lsk-panel-h{
  margin:14px 0 6px;font:600 var(--fs-xs)/1.3 var(--sans);
  color:var(--muted);letter-spacing:.04em;text-transform:uppercase;
}
.lsk-hint{margin:4px 0;font-size:var(--fs-xs);line-height:1.55;color:var(--dim)}
.lsk-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lsk-sep{display:inline-block;width:1px;height:16px;background:var(--line);margin:0 4px}
.lsk-quote{
  margin:8px 0;padding:10px 12px;border-left:2px solid var(--accent);
  background:var(--surface-2);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-sm);line-height:1.65;color:var(--ink);
  white-space:pre-wrap;max-height:38vh;overflow:auto;
}
.lsk-mono{font-family:var(--mono);font-size:var(--fs-xs)}
.lsk-answer{
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);
  font-size:var(--fs-sm);line-height:1.7;color:var(--ink);
  white-space:pre-wrap;max-height:52vh;overflow:auto;
}
.lsk-list{display:grid;gap:4px}
.lsk-empty{color:var(--muted);font-size:var(--fs-sm);padding:10px 0}

/* ------------------------------------------------------- link rows/lists */
.lsk-links{display:grid;gap:3px;margin-top:8px;max-height:52vh;overflow:auto}
.lsk-link-row{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:7px 9px;border:1px solid transparent;border-radius:var(--r-sm);
  background:transparent;color:var(--ink);cursor:pointer;
  font:400 var(--fs-sm)/1.4 var(--sans);
}
.lsk-link-row:hover{background:var(--surface-2);border-color:var(--border);outline:0}
.lsk-link-row.is-static{cursor:default}
.lsk-link-row.is-static:hover{background:transparent;border-color:transparent}
.lsk-link-row > svg{width:15px;height:15px;flex:none;opacity:.75}
.lsk-link-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.lsk-link-s{flex:none;font-size:var(--fs-xs);color:var(--dim)}
.lsk-link-row kbd{
  flex:none;padding:1px 5px;border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid var(--border);
  font:600 10px/1.6 var(--mono);color:var(--muted);
}
.lsk-link-row .lsk-hint{flex-basis:100%;margin:2px 0 0 24px}

/* ------------------------------------------------------------- filters */
.lsk-filters{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:10px 0}
.lsk-chip{
  padding:4px 9px;border:1px solid var(--border);border-radius:var(--r-full);
  background:transparent;color:var(--muted);
  font:500 var(--fs-xs)/1.5 var(--sans);cursor:pointer;white-space:nowrap;
}
.lsk-chip:hover{border-color:var(--accent);color:var(--ink)}
.lsk-chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--panel)}

/* -------------------------------------------------------- card library */
.lsk-lib,.lsk-journal{display:flex;flex-direction:column;gap:4px;min-height:0}
.lsk-lib-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.lsk-lib-head .vtitle{font:italic 600 20px var(--serif);color:var(--ink)}
.lsk-lib-list{overflow:auto;min-height:0;gap:2px}
.lsk-lib-row{
  display:grid;grid-template-columns:auto 1fr;gap:2px 8px;
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);
}
.lsk-lib-row:hover{border-color:var(--border-strong)}
.lsk-lib-q{
  grid-column:2;font:600 var(--fs-base)/1.45 var(--serif);color:var(--ink);
  cursor:pointer;
}
.lsk-lib-a{
  grid-column:2;font-size:var(--fs-sm);line-height:1.6;color:var(--muted);
  white-space:pre-wrap;padding:6px 0 2px;border-top:1px dashed var(--line);margin-top:4px;
}
.lsk-lib-meta{grid-column:2;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.lsk-lib-row > .lsk-row{grid-column:2;margin-top:4px}
.lsk-lib-row > input[type=checkbox]{grid-row:1/4;align-self:start;margin-top:4px}

/* ---------------------------------------------------------------- graph */
.lsk-graphwrap{display:flex;flex-direction:column;gap:6px;min-height:0}
.lsk-graph{width:100%;height:auto;max-height:62vh;display:block}
.lsk-edge{stroke:var(--border-strong);stroke-width:1.4;opacity:.7}
.lsk-gnode{stroke:var(--bg);stroke-width:1.5;transition:r .12s}
.lsk-gnode:hover{r:11}
.lsk-glabel{
  fill:var(--muted);font:500 9px var(--sans);text-anchor:middle;pointer-events:none;
  opacity:.8;
}

/* ---------------------------------------------------------------- inbox */
.lsk-inbox{display:flex;flex-direction:column;gap:8px;min-height:0}
.lsk-inbox-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lsk-inbox-head b{font:italic 600 20px var(--serif);color:var(--ink)}
.lsk-inbox-head .lsk-row{margin-left:auto}
.lsk-inbox-row{
  display:flex;flex-direction:column;gap:4px;
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);
}
.lsk-inbox-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lsk-inbox-text{font-size:var(--fs-sm);line-height:1.6;color:var(--ink)}
.lsk-inbox-row .lsk-row{margin-top:2px}

/* ------------------------------------------------------- target picker */
.lsk-targets{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;margin-top:10px}
.lsk-target{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 6px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink);
  font:500 var(--fs-xs)/1.3 var(--sans);cursor:pointer;
}
.lsk-target:hover{border-color:var(--accent);background:var(--surface)}
.lsk-target svg{width:17px;height:17px}

/* --------------------------------------------------------------- stats */
.lsk-stats{display:flex;flex-direction:column;gap:10px}
.lsk-stats .ls-rv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:7px}
.lsk-bars{
  display:flex;align-items:flex-end;gap:3px;height:76px;
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);
}
.lsk-bars i{flex:1;min-width:4px;background:var(--accent);opacity:.75;border-radius:2px 2px 0 0}
.lsk-bars i:hover{opacity:1}

/* ------------------------------------------------------ settings panels */
.lsk-settings{display:flex;flex-direction:column;gap:2px}
.lsk-set-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.lsk-set-l{flex:1;min-width:180px;font:500 var(--fs-sm)/1.4 var(--sans);color:var(--ink)}
.lsk-set-l small{display:block;margin-top:2px}
.lsk-set-c{flex:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lsk-set-slider{display:flex;align-items:center;gap:8px}
.lsk-set-slider input[type=range]{width:150px;accent-color:var(--accent)}
.lsk-set-slider b{min-width:52px;text-align:right;font:600 var(--fs-sm)/1 var(--mono);color:var(--accent)}
.lsk-set-cost{
  margin:8px 0;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:var(--fs-sm);line-height:1.6;color:var(--muted);
}
.lsk-set-warn{color:var(--warn);margin-top:3px}
.lsk-set-foot{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.lsk-exp-sec{margin-bottom:6px}
.lsk-exp-sec .lsk-row{margin:6px 0}
.lsk-keys{display:grid;gap:2px}

/* ---------------------------------------------------------- AI panels */
.lsk-contra{
  padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);margin-bottom:8px;
}
.lsk-contra blockquote{
  margin:6px 0;padding:8px 11px;border-left:2px solid var(--accent);
  background:var(--surface-2);font-size:var(--fs-sm);line-height:1.6;
}
.lsk-contra blockquote.is-b{border-left-color:var(--err)}

/* --------------------------------------------------------------- undo */
.lsk-undo-bar{display:inline-flex;align-items:center;gap:2px}
/* All three buttons are peers. The icons used to read as one white arrow and
   two grey ones because the enabled/disabled gap was carried almost entirely
   by an inline opacity, and the enabled button inherited a near-white colour
   from the header. Pin both states to theme tokens instead: a solid icon for
   "available", a faded one for "nothing to do", with no hover on disabled. */
.lsk-undo-b{
  width:28px;height:28px;display:grid;place-items:center;
  border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--muted);cursor:pointer;opacity:1;transition:color .12s,background .12s;
}
.lsk-undo-b svg{width:15px;height:15px;stroke:currentColor}
.lsk-undo-b:hover:not(:disabled){background:var(--surface-2);color:var(--fg)}
.lsk-undo-b:active:not(:disabled){background:var(--surface-3)}
.lsk-undo-b:disabled{cursor:default;color:var(--muted);opacity:.3}
.lsk-undo-b:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lsk-undo-toast{
  display:flex;align-items:center;gap:10px;margin-top:6px;
  padding:8px 12px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--panel);box-shadow:var(--shadow-sm);
  font-size:var(--fs-sm);color:var(--ink);
  animation:lsk-pop .15s ease-out;
}

/* ---------------------------------------------------- palette additions */
#cpRoot .cp-item-ic{width:14px;height:14px;flex:none;opacity:.7;margin-right:7px}

/* ------------------------------------------------------------ re-reading */
.ls-reread .btn svg{width:14px;height:14px}

/* ------------------------------------------------------------ responsive */
@media (max-width:720px){
  .lsk-set-row{flex-direction:column;align-items:flex-start;gap:6px}
  .lsk-set-c{width:100%}
  .lsk-set-slider input[type=range]{width:100%;flex:1}
  .lsk-lib-row{grid-template-columns:1fr}
  .lsk-lib-row > input[type=checkbox]{grid-row:auto}
  .lsk-lib-q,.lsk-lib-a,.lsk-lib-meta,.lsk-lib-row > .lsk-row{grid-column:1}
  .lsk-graph{max-height:48vh}
  .lsk-targets{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .lsk-glabel{display:none}
}
@media (max-width:480px){
  .lsk-filters{gap:4px}
  .lsk-chip{font-size:10px;padding:3px 7px}
}
/* Desk quick actions: the rows were a single nowrap line with a hidden
   scrollbar, so on a phone the last shortcuts sat off the right edge with
   nothing to suggest they were there. Wrapping keeps them reachable. Placed in
   the last-loaded stylesheet so it wins over the earlier nowrap rules. */
@media (max-width:820px){
  .dash-qa{ flex-wrap:wrap !important; overflow-x:visible !important; }
  .dash-qa .btn{ flex:0 1 auto !important; max-width:100% !important; }
}
/* ------------------------------------------------------- wall widget
   A widget you can drag anywhere, or shove into the right-hand wall. In the
   wall only a small nub shows, and dragging the nub pulls it back out. */
.lsk-drawer{
  position:fixed;z-index:9001;top:0;left:0;
  display:flex;flex-direction:column;
  min-width:260px;min-height:180px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:0 18px 44px rgba(0,0,0,.46);
  overflow:hidden;
}
.lsk-drawer.dragging{opacity:.94;box-shadow:0 26px 60px rgba(0,0,0,.55);user-select:none}
.lsk-drawer.in-wall{visibility:hidden;pointer-events:none}

.lsk-drawer-head{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:10px 10px 10px 8px;border-bottom:1px solid var(--line);
  background:var(--surface);cursor:grab;touch-action:none;
}
.lsk-drawer-head:active{cursor:grabbing}
.lsk-drawer-grip{width:15px;height:15px;color:var(--muted);flex:none;stroke:currentColor}
.lsk-drawer-head b{font:600 13px/1.2 var(--sans);color:var(--fg)}
.lsk-drawer-sp{flex:1}
.lsk-drawer-x{color:var(--muted);flex:none}
.lsk-drawer-x:hover{color:var(--fg)}
.lsk-drawer-body{flex:1;min-height:0;overflow:auto;padding:4px 14px 20px}

/* the nub: a small thing coming out of the wall */
.lsk-drawer-nub{
  position:fixed;right:0;z-index:9000;
  width:30px;height:74px;padding:0;
  display:grid;place-items:center;
  border:1px solid var(--line);border-right:0;
  border-radius:var(--r-md) 0 0 var(--r-md);
  background:var(--panel);color:var(--muted);cursor:grab;
  box-shadow:-6px 0 18px rgba(0,0,0,.32);
  touch-action:none;
  transition:color .14s,transform .14s,box-shadow .14s;
}
.lsk-drawer-nub:hover{color:var(--fg);transform:translateX(-5px);box-shadow:-10px 0 24px rgba(0,0,0,.42)}
.lsk-drawer-nub:active,.lsk-drawer-nub.dragging{cursor:grabbing;color:var(--accent)}
.lsk-drawer-nub svg{width:15px;height:15px;stroke:currentColor}
.lsk-drawer-nub::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:22px;border-radius:2px;background:var(--accent);opacity:.6;
}

@media (prefers-reduced-motion:reduce){
  .lsk-drawer-nub{transition:none}
}
@media (max-width:560px){
  .lsk-drawer{width:calc(100vw - 16px)!important;left:8px!important}
  .lsk-drawer-nub{width:26px;height:62px}
}

/* --------------------------------------------------------- dock mobility
   The switcher floats over the bottom of the study views, so it can be moved
   out of the way and hidden. The transform is dropped once the dock has an
   explicit left/top, otherwise translateX(-50%) would fight the position. */
.lsw-dock[data-x]{transform:none}
.lsw-dock.dragging{
  transform:none;opacity:.95;cursor:grabbing;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.lsw-dock-grip{
  display:grid;place-items:center;flex:none;
  width:18px;align-self:stretch;margin:-5px 2px -5px -5px;
  border-radius:var(--r-full) 0 0 var(--r-full);
  color:var(--muted);cursor:grab;touch-action:none;
}
.lsw-dock-grip:hover{color:var(--fg)}
.lsw-dock-grip:active{cursor:grabbing}
.lsw-dock-grip svg{width:13px;height:13px;stroke:currentColor}

/* the tab left on the edge when the switcher is hidden */
.lsw-dock-tab{
  position:fixed;right:0;bottom:96px;z-index:70;
  width:28px;height:52px;padding:0;
  display:grid;place-items:center;
  border:1px solid var(--border-strong);border-right:0;
  border-radius:var(--r-md) 0 0 var(--r-md);
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--muted);cursor:grab;touch-action:none;
  box-shadow:-6px 0 18px rgba(0,0,0,.34);
  transition:color .14s,transform .14s;
}
.lsw-dock-tab:hover{color:var(--accent);transform:translateX(-4px)}
.lsw-dock-tab.dragging{cursor:grabbing;color:var(--accent)}
.lsw-dock-tab svg{width:15px;height:15px;stroke:currentColor}

@media (prefers-reduced-motion:reduce){
  .lsw-dock-tab{transition:none}
}

/* --------------------------------------------------- dock: never clipped
   The switcher is a single row of 16 controls. At 766px wide it overflowed a
   narrower window, which pushed the Hide button off the end, so there was no
   way to hide it. Wrap instead of clipping, and mark the layout buttons
   disabled while there is nothing to lay out. */
.lsw-dock{flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 20px)}
.lsw-dock-tools{flex-wrap:wrap}
.lsw-dock-b.is-off,.lsw-dock-b:disabled{
  opacity:.32;cursor:default;pointer-events:none;
}
.lsk-drawer-tab,.lsw-dock-tab{background:var(--panel)}

/* ------------------------------------------------- settings list (compact)
   One row, one click target: icon + label + current state on the left,
   nothing to the right because the whole row activates. Secondary text is
   STATUS, never a description of the feature. */
.lsk-settings{display:flex;flex-direction:column;gap:14px;padding:4px 0 8px}
.lsk-set-sec > h4{
  margin:0 0 5px;padding:0 2px;
  font:600 10px/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
}
.lsk-set-list{
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--surface);
}
.lsk-set-row{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 11px;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:inherit;text-align:left;text-decoration:none;
  font:400 13px/1.35 var(--sans);cursor:pointer;
  transition:background .12s;
}
.lsk-set-row:last-child{border-bottom:0}
.lsk-set-row:hover{background:var(--surface-2)}
.lsk-set-row:active{background:var(--surface-3)}
.lsk-set-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lsk-set-ic{width:16px;height:16px;flex:none;color:var(--muted);stroke:currentColor}
.lsk-set-row:hover .lsk-set-ic{color:var(--fg)}
.lsk-set-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.lsk-set-l{font-weight:500;color:var(--fg)}
.lsk-set-s{
  font-size:11.5px;line-height:1.3;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lsk-set-row.is-go .lsk-set-ic{color:var(--accent)}
.lsk-set-row.is-on .lsk-set-s{color:var(--accent)}

/* long tail behind one collapsed row */
.lsk-set-adv{border-top:1px solid var(--line);padding-top:10px}
.lsk-set-adv > summary{
  display:flex;align-items:center;gap:8px;padding:7px 9px;
  border-radius:var(--r-sm);cursor:pointer;list-style:none;
  font:500 12px/1.3 var(--sans);color:var(--muted);
}
.lsk-set-adv > summary::-webkit-details-marker{display:none}
.lsk-set-adv > summary:hover{background:var(--surface-2);color:var(--fg)}
.lsk-set-adv > summary svg{width:14px;height:14px;stroke:currentColor}
.lsk-set-adv > summary span{flex:1}
.lsk-set-adv-c{transition:transform .15s}
.lsk-set-adv[open] > .lsk-set-adv-c{transform:rotate(180deg)}
.lsk-set-adv > .lsk-set-list{margin-top:6px}

@media (max-width:420px){
  .lsk-set-row{padding:10px}
  .lsk-set-l{font-size:13px}
}

/* ------------------------------------------------------- universal chat
   An icon you can move anywhere that opens a panel you can drag and resize.
   Everything is on theme tokens so it inherits every skin. */
.uchat-fab{
  position:fixed;right:18px;bottom:88px;z-index:9200;
  width:46px;height:46px;padding:0;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:var(--panel);color:var(--accent);
  box-shadow:0 10px 26px rgba(0,0,0,.42);
  font:500 20px/1 var(--sans);
  cursor:grab;touch-action:none;
  transition:transform .14s,box-shadow .14s;
}
.uchat-fab:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.5)}
.uchat-fab:active{cursor:grabbing}
.uchat-fab.is-behind{opacity:0;pointer-events:none;transform:scale(.7)}
.uchat-fab-g{pointer-events:none;display:block;max-width:100%;overflow:hidden}

.uchat{
  position:fixed;z-index:9201;left:0;top:0;
  display:flex;flex-direction:column;min-width:300px;min-height:240px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:0 20px 50px rgba(0,0,0,.5);
  overflow:hidden;
}
.uchat.is-dragging{opacity:.96;box-shadow:0 26px 60px rgba(0,0,0,.58)}
.uchat.is-resizing{user-select:none}
.uchat-head{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:9px 8px 9px 6px;border-bottom:1px solid var(--line);
  background:var(--surface);cursor:grab;touch-action:none;
}
.uchat-head:active{cursor:grabbing}
.uchat-grip{
  display:grid;place-items:center;flex:none;
  width:22px;height:22px;padding:0;border:0;background:transparent;
  color:var(--muted);cursor:grab;
}
.uchat-grip svg{width:14px;height:14px;stroke:currentColor}
.uchat-title{font:600 13px/1.2 var(--sans);color:var(--fg)}
.uchat-sp{flex:1}
.uchat-head .ibtn{color:var(--muted)}
.uchat-head .ibtn:hover{color:var(--fg)}

.uchat-log{
  flex:1;min-height:0;overflow-y:auto;padding:12px;
  display:flex;flex-direction:column;gap:10px;
  overscroll-behavior:contain;
}
.uchat-msg{display:flex;flex-direction:column;gap:2px;max-width:92%}
.uchat-msg.is-me{align-self:flex-end;align-items:flex-end}
.uchat-who{font:600 9.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.uchat-text{
  padding:8px 11px;border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--fg);
  font:400 13px/1.55 var(--sans);
  white-space:pre-wrap;word-break:break-word;
}
.uchat-msg.is-me .uchat-text{background:var(--accent);color:var(--accent-ink)}
.uchat-text.is-err{background:color-mix(in srgb,var(--err) 14%,transparent);color:var(--err)}

.uchat-foot{
  display:flex;align-items:flex-end;gap:8px;flex:none;
  padding:9px;border-top:1px solid var(--line);background:var(--surface);
}
.uchat-in{
  flex:1;min-width:0;resize:none;max-height:120px;
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--fg);
  font:400 13px/1.5 var(--sans);outline:none;
}
.uchat-in:focus{border-color:var(--accent)}
.uchat-send{flex:none;width:34px;height:34px;padding:0;display:grid;place-items:center}
.uchat-send svg{width:15px;height:15px;stroke:currentColor}
.uchat-send:disabled{opacity:.5}

.uchat-resize{
  position:absolute;right:0;bottom:0;width:18px;height:18px;
  display:grid;place-items:center;color:var(--muted);
  cursor:nwse-resize;touch-action:none;
}
.uchat-resize svg{width:12px;height:12px;stroke:currentColor;transform:rotate(-45deg)}

/* its editor inside the settings panel */
.uchat-set{
  display:grid;grid-template-columns:1fr auto;gap:8px;
  padding:11px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);
}
.uchat-set-head{display:flex;flex-direction:column;gap:1px;min-width:0}
.uchat-set-glyph{
  width:52px;text-align:center;
  padding:7px 4px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--fg);font:500 15px/1.2 var(--sans);
}
.uchat-set-name{
  grid-column:1/-1;padding:7px 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--fg);font:400 12.5px var(--sans);
}
.uchat-set-glyph:focus,.uchat-set-name:focus{border-color:var(--accent);outline:none}
.lsk-set-uc{margin-top:2px}

@media (max-width:560px){
  .uchat-fab{right:12px;bottom:76px;width:42px;height:42px}
  .uchat{border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .uchat-fab{transition:none}
}

/* permanent top-bar chat button, in step with the widget */
#uchatBtn .uchat-btn-glyph{font:500 15px/1 var(--sans);pointer-events:none}
#uchatBtn.is-open{color:var(--accent)}
#uchatBtn[hidden]{display:none}

/* Athena docked in the top nav (taskbar), replacing the old floating tile.

   buildFab() appends the button into .top-nav and tags it is-docked. The base
   .uchat-fab rule is position:fixed bottom-right, which is what put Athena on
   top of Praxis's Export video control; these overrides drop the positioning and
   adopt the metrics of the .ibtn siblings so it sits in the row like every other
   top-nav control. The floating presentation is kept for the fallback path where
   there is no .top-nav, and for the <=560px rule below. */
.uchat-fab.is-docked{
  position:static;right:auto;bottom:auto;z-index:auto;
  width:34px;height:34px;padding:0;
  display:grid;place-items:center;
  border:1px solid transparent;border-radius:var(--r-sm);
  background:transparent;color:var(--muted);
  box-shadow:none;
  cursor:pointer;
  transition:color .14s,background .14s;
}
.uchat-fab.is-docked:hover{transform:none;background:var(--surface-2);color:var(--fg);box-shadow:none}
.uchat-fab.is-docked:active{cursor:pointer}
.uchat-fab.is-docked.is-open{color:var(--accent)}
.uchat-fab.is-docked .uchat-fab-g{display:grid;place-items:center;width:100%;height:100%;pointer-events:none}
.uchat-fab.is-docked .uchat-fab-g svg{width:19px;height:19px}
/* The halo mark only while no custom glyph is set (paintFab toggles is-mark). */
.uchat-fab.is-docked .uchat-fab-g.is-mark{font:0}

/* ------------------------------------------- existing windows made movable
   LS2.win.enhance / .floatDialog applied these to Lumen's own dialogs and the
   calculator. The UA centres a <dialog> with `margin:auto` AND `inset`, and
   `inset:auto` has to go too or the element snaps back to the middle on the
   first drag. Focus trapping and Esc are untouched ,  it is still a real
   modal <dialog>. */
dialog.lsm-float{
  position:fixed;
  /* No !important on margin/inset here. An author !important declaration
     outranks an inline style, so `inset:auto !important` silently reset the
     left/top that the drag handler sets ,  the dialog never moved off the
     top-left corner. The UA sheet is not !important, so plain declarations
     are enough to beat it. */
  margin:0;
  inset:auto;
  max-width:none;
  max-height:none;
  overflow:hidden;
}
dialog.lsm-float .dlg-head{cursor:grab;touch-action:none}
dialog.lsm-float .dlg-head:active{cursor:grabbing}
dialog.lsm-float.is-dragging{box-shadow:0 30px 70px rgba(0,0,0,.6)}
dialog.lsm-float.is-resizing{user-select:none}

.lsm-resize{
  position:absolute;right:0;bottom:0;width:18px;height:18px;z-index:3;
  display:grid;place-items:center;color:var(--muted);
  cursor:nwse-resize;touch-action:none;
}
.lsm-resize svg{width:12px;height:12px;stroke:currentColor;transform:rotate(-45deg)}
.lsm-resize:hover{color:var(--fg)}

#calcPanel.lsm-resizable{position:fixed;right:18px;top:120px;overflow:hidden}
#calcPanel .cdisp{cursor:grab;touch-action:none}
#wbChatFab[hidden],.wb-chat[hidden]{display:none !important}

/* controls mounted into the contextual bar for the runtime-built views */
.lsk-tb-row{display:inline-flex;align-items:center;gap:4px}
.lsk-tb-row .btn svg{width:14px;height:14px;stroke:currentColor}
@media (max-width:900px){ .lsk-tb-row .btn span{display:none} .lsk-tb-row .btn{padding:6px 8px} }

/* ------------------------------------------------------------ mini browser */
.mb{
  position:fixed;z-index:9300;left:0;top:0;
  display:flex;flex-direction:column;min-width:320px;min-height:260px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:0 20px 50px rgba(0,0,0,.5);overflow:hidden;
}
.mb.is-dragging{opacity:.96;box-shadow:0 26px 60px rgba(0,0,0,.58)}
.mb-head{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:9px 8px 9px 6px;border-bottom:1px solid var(--line);
  background:var(--surface);cursor:grab;touch-action:none;
}
.mb-head:active{cursor:grabbing}
.mb-head b{font:600 13px/1.2 var(--sans);color:var(--fg)}
.mb-grip{display:grid;place-items:center;flex:none;width:22px;height:22px;padding:0;border:0;background:transparent;color:var(--muted);cursor:grab}
.mb-grip svg{width:14px;height:14px;stroke:currentColor}
.mb-sp{flex:1}
.mb-head .ibtn{color:var(--muted)}
.mb-head .ibtn:hover{color:var(--fg)}

.mb-tabs{display:flex;align-items:center;gap:3px;flex:none;padding:5px 6px 0;overflow-x:auto;scrollbar-width:none}
.mb-tabs::-webkit-scrollbar{display:none}
.mb-tab{
  display:inline-flex;align-items:center;gap:6px;max-width:190px;
  padding:5px 7px 5px 10px;border:1px solid var(--line);border-bottom:0;
  border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--surface);
  color:var(--muted);font:500 11.5px/1 var(--sans);cursor:pointer;white-space:nowrap;
}
.mb-tab:hover{color:var(--fg)}
.mb-tab.is-on{background:var(--panel);color:var(--fg)}
.mb-tab-t{overflow:hidden;text-overflow:ellipsis}
.mb-tab-x{opacity:.6;font-size:13px;line-height:1}
.mb-tab-x:hover{opacity:1}
.mb-tab-add{flex:none;padding:5px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--muted);cursor:pointer}
.mb-tab-add:hover{color:var(--fg)}

.mb-bar{display:flex;align-items:center;gap:7px;flex:none;padding:7px 8px;border-bottom:1px solid var(--line);background:var(--surface)}
.mb-ico{color:var(--muted);flex:none;display:grid;place-items:center}
.mb-ico svg{width:14px;height:14px;stroke:currentColor}
.mb-in{
  flex:1;min-width:0;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--fg);font:400 12.5px var(--sans);outline:none;
}
.mb-in:focus{border-color:var(--accent)}
.mb-go{flex:none;width:30px;height:30px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--muted);cursor:pointer}
.mb-go:hover{color:var(--fg)}
.mb-go svg{width:14px;height:14px;stroke:currentColor}

.mb-view{flex:1;min-height:0;overflow:auto;padding:14px}
.mb-empty{padding:26px 14px;text-align:center;color:var(--muted);font:400 12.5px/1.6 var(--sans)}
.mb-empty b{display:block;margin-bottom:5px;font:600 13px var(--sans);color:var(--fg)}
.mb-abstract{padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.mb-h{margin:0 0 6px;font:600 15px/1.3 var(--sans);color:var(--fg)}
.mb-p{margin:0 0 8px;font:400 13px/1.65 var(--sans);color:var(--fg)}
.mb-src{font:500 11.5px var(--sans);color:var(--accent);text-decoration:none}
.mb-img{margin:0 0 12px}
.mb-img img{max-width:100%;border-radius:var(--r-sm);border:1px solid var(--line)}
.mb-links{display:flex;flex-direction:column;gap:2px}
.mb-link{
  padding:7px 9px;border-radius:var(--r-sm);
  font:400 12.5px/1.4 var(--sans);color:var(--fg);text-decoration:none;cursor:pointer;
}
.mb-link:hover{background:var(--surface-2);color:var(--accent)}
.mb-note{padding:9px 11px;margin-bottom:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font:400 11.5px/1.55 var(--sans);color:var(--muted)}
.mb-open{display:inline-block;margin-top:7px;font:500 11.5px var(--sans);color:var(--accent);text-decoration:none}
.mb-frame{width:100%;height:100%;min-height:240px;border:0;border-radius:var(--r-sm);background:var(--surface)}
.mb-resize{position:absolute;right:0;bottom:0;width:18px;height:18px;z-index:3;display:grid;place-items:center;color:var(--muted);cursor:nwse-resize;touch-action:none}
.mb-resize svg{width:12px;height:12px;stroke:currentColor;transform:rotate(-45deg)}
@media (max-width:560px){ .mb{border-radius:0} .mb-tab{max-width:130px} }

/* ------------------------------------- study tab inside the real dialog */
#prefDlg .lsk-settings{padding:2px 0 4px}
#prefDlg .lsk-set-sec > h4{padding-left:2px}

/* ------------------------------------------------------ mini time bar */
.lumen-timebar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:7px;
  padding:3px 14px;border-bottom:1px solid var(--line);
  background:var(--surface);
  font:500 11px/1 var(--mono);color:var(--muted);
}
.lumen-timebar-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.lumen-timebar[hidden]{display:none}
#timebarBtn.is-on{color:var(--accent)}

# Breadcrumb trail in study header
#breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-size: 13px;
  color: var(--muted, #666);
}
#breadcrumbs .bc-seg {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
#breadcrumbs .bc-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
#breadcrumbs .bc-link:hover { text-decoration: underline; }
#breadcrumbs .bc-current { font-weight: 600; color: var(--text, #222); }
#breadcrumbs .bc-sep { opacity: 0.6; padding: 0 2px; }
@media (max-width: 768px) {
  #breadcrumbs .bc-seg:not(.bc-current),
  #breadcrumbs .bc-sep { display: none; }
}


#view-study > #breadcrumbs, #view-study #breadcrumbs {
  padding: 6px 16px;
  border-bottom: 1px solid var(--line, #e5e5e5);
  background: var(--panel, transparent);
}

/* P1.4 notebook first-class */
.nb-cover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.nb-cover{border:1px solid var(--line);border-radius:12px;padding:12px}
.nb-cover.pinned{border-color:var(--accent)}