/* LlamaLink: reading and file pages, in the Atrium look of my.llamassist.ai.
   Layout: warm paper ground; a slim bar with the llama and "LlamaLink", search
   in the middle (staff), the page's buttons and your circle on the right;
   the content on one soft card; one reading column of about 68 characters, with
   a sticky contents rail to its left on wide screens. On laptops and desktops the
   card is a fixed window that scrolls inside itself; on phones the page scrolls. */

@font-face { font-family: "Newsreader LL"; src: url("/_lab/vendor/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader LL"; src: url("/_lab/vendor/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree LL"; src: url("/_lab/vendor/figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree LL"; src: url("/_lab/vendor/figtree-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono LL"; src: url("/_lab/vendor/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono LL"; src: url("/_lab/vendor/plex-mono-500.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

:root {
  /* surfaces (the portal's own tokens) */
  --ground: #e7e0d2;         /* paper: the page behind the card */
  --paper: #fcfaf5;          /* the card */
  --paper-2: #f7f2e8;        /* panels on the card */
  --ink: #3b352c;
  --ink-2: #4a4438;
  --muted: #6b6355;
  --faint: #8a8172;          /* small labels only */
  --rule: #efe8da;
  --rule-strong: #e4dccb;
  --edge: #d9cfbc;           /* button outlines */
  --accent: #b8501e;         /* Llamigo orange, deep: text and links */
  --spark: #d65a1e;          /* Llamigo orange: buttons, marks */
  --spark-hover: #a5450f;
  --spark-wash: #fbf3ec;
  --spark-tint: #f6e7da;
  --teal: #124f60;           /* staff-only information */
  --teal-wash: #e8f0f1;
  --code-bg: #f7f2e8;
  --sel: #f6e7da;
  --shadow: 0 1px 2px rgba(59,53,44,.04), 0 30px 70px -34px rgba(59,53,44,.3);
  --note: #124f60;  --note-wash: #e8f0f1;
  --tip: #2e7d57;   --tip-wash: #ebf4ee;
  --important: #6a4a9c; --important-wash: #f2eef8;
  --warning: #8f5f10; --warning-wash: #faf1de;
  --caution: #a8321f; --caution-wash: #faece8;
  --hl-keyword: #9a3a76; --hl-string: #2e7d57; --hl-number: #9a5b00; --hl-comment: #8a8172;
  --hl-title: #124f60; --hl-attr: #8a4b00; --hl-meta: #6a4a9c;

  /* type */
  --display: "Newsreader LL", "Iowan Old Style", Georgia, serif;
  --ui: "Figtree LL", -apple-system, "Segoe UI", system-ui, sans-serif;
  --read: var(--ui);
  --mono: "Plex Mono LL", ui-monospace, "SF Mono", Menlo, monospace;
  --measure: 42rem;
  --card-max: 76rem;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}

/* Light by default for everyone; dark only when the viewer flips the switch
   (remembered in this browser, applied by theme.js before the page paints). */
:root[data-theme="dark"] {
  --ground: #16140f; --paper: #211e18; --paper-2: #2a261e; --ink: #efe8da; --ink-2: #d9d1c1; --muted: #a89f8e; --faint: #8f8676;
  --rule: #332e25; --rule-strong: #3f392e; --edge: #4a4336;
  --accent: #f0915a; --spark: #e8723a; --spark-hover: #f0915a; --spark-wash: #2e2118; --spark-tint: #3a2819;
  --teal: #7fbccb; --teal-wash: #1a2a2e;
  --code-bg: #2a261e; --sel: #5a3413;
  --shadow: 0 1px 2px rgba(0,0,0,.2), 0 30px 70px -34px rgba(0,0,0,.6);
  --note: #7fbccb; --note-wash: #1a2a2e; --tip: #7cc79d; --tip-wash: #17261d;
  --important: #b9a2e6; --important-wash: #231d2e; --warning: #e0b15c; --warning-wash: #2c2413;
  --caution: #f08a74; --caution-wash: #2e1a15;
  --hl-keyword: #e08cc4; --hl-string: #8fd4a6; --hl-number: #f0b877; --hl-comment: #8f8676;
  --hl-title: #8ec9d6; --hl-attr: #e6a86a; --hl-meta: #b9a2e6;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; background: var(--ground); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--ui);
  min-height: 100vh; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
::selection { background: var(--sel); }
:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; border-radius: 4px; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }

.ll-skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 8px; }
.ll-skip:focus { left: 8px; }

/* ── top bar ─────────────────────────────────────────── */
/* Three zones on one row: the llama and "LlamaLink" left, staff search truly
   centred, the page's buttons and your circle right. It never changes shape:
   where you are lives on the page, in the path line above the title. */
.ll-bar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(10rem, 22rem) minmax(max-content, 1fr); align-items: center; gap: 18px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) max(var(--gutter), calc((100% - var(--card-max)) / 2 + 8px)) 14px; /* a little air above the bar */
  background: var(--ground); /* solid: nothing slides visibly underneath */
}
.ll-mark { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 500 1.5rem/1 var(--display); letter-spacing: -0.01em; }
/* The llama sits 2 px above centre on purpose: its weight is low (thin ears,
   heavy body), so truly centred it looks low; Newsreader's capitals ride high,
   so the name comes down 2 px to sit on the buttons' centre line. */
.ll-mark img { display: block; height: 30px; width: auto; transform: translateY(-2px); }
.ll-mark > span { transform: translateY(2px); }
.ll-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.ll-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  font: 550 0.9375rem/1 var(--ui); color: var(--ink); text-decoration: none; cursor: pointer;
  background: var(--paper); border: 1px solid var(--edge);
  transition: background-color .15s, border-color .15s, color .15s;
}
.ll-btn:hover { background: var(--paper-2); }
.ll-btn-primary { background: var(--spark); color: #fff; border-color: var(--spark); }
.ll-btn-primary:hover { background: var(--spark-hover); border-color: var(--spark-hover); }
:root[data-theme="dark"] .ll-btn-primary { color: #1a120c; }
.ll-icon-btn { width: 40px; padding: 0; }
.ll-dl-icon { display: none; width: 18px; height: 18px; }
.ll-icon-btn svg { width: 17px; height: 17px; color: var(--muted); }
.ll-visible { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 36px; padding: 12px 12px 12px 28px; border-radius: 12px; background: var(--teal-wash); font: 0.9375rem/1.45 var(--ui); color: var(--ink-2); }
.ll-visible b { font-weight: 600; color: var(--ink); }
/* In the library the bar bleeds 12px each side like a hovered row, so its buttons line up with the ⋯
   column and the dot sits on the row icons' centre line. File pages keep it flush with the card below. */
body.ll-library .ll-visible { margin-inline: -12px; padding-left: 21px; }
/* Who can see wraps beside the buttons, which stay on the first line at the right. */
.ll-visible-who { flex: 1 1 16rem; min-width: 0; }
.ll-visible > .ll-btn-sm, .ll-visible-actions { align-self: flex-start; margin-left: auto; }
.ll-visible-label { flex: none; display: inline-flex; align-items: center; gap: 18px; font: 500 0.6875rem/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.ll-visible-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.ll-btn-lg { min-height: 46px; padding: 0 22px; font-size: 1rem; }

/* Narrower screens: staff search drops to a second row of its own. */
@media (max-width: 760px) {
  .ll-bar { grid-template-columns: max-content minmax(0, 1fr); row-gap: 10px; }
  .ll-actions { grid-column: 2; }
}
/* Phones: logo, buttons and circle on one row; Download and Copy link become icons. */
@media (max-width: 640px) {
  .ll-bar { column-gap: 8px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
  .ll-mark { font-size: 1.3125rem; gap: 8px; }
  .ll-mark img { height: 26px; }
  .ll-actions { gap: 6px; }
  .ll-btn { min-height: 40px; padding: 0 13px; font-size: 0.875rem; }
  .ll-icon-btn { padding: 0; }
  .ll-btn-dl, .ll-btn-copy:not(.ll-btn-primary) { width: 40px; padding: 0; }
  .ll-btn-dl span, .ll-btn-copy:not(.ll-btn-primary) span { display: none; }
  .ll-dl-icon { display: block; }
  .ll-btn-copy.ll-btn-primary .ll-dl-icon { display: none; }
}

/* ── the card ────────────────────────────────────────── */
.ll-frame {
  flex: 1; width: min(calc(100% - 2 * var(--gutter)), var(--card-max)); margin: 6px auto 0;
  display: grid; grid-template-columns: minmax(0, var(--measure)); justify-content: center; align-content: start;
  gap: 64px; padding: 52px 56px 72px;
  background: var(--paper); border-radius: 22px; box-shadow: var(--shadow);
}
.ll-frame.is-wide { grid-template-columns: minmax(0, 64rem); }
.ll-main { min-width: 0; }
@media (min-width: 1180px) {
  .ll-frame.has-toc { grid-template-columns: 12.5rem minmax(0, var(--measure)); }
}
@media (max-width: 640px) {
  .ll-frame { border-radius: 18px; padding: 28px 20px 44px; }
}
/* Laptops and desktops: the card is a window that stays put and scrolls inside
   itself, between the bar and a one-line footer. */
@media (min-width: 900px) and (min-height: 560px) {
  html, body { height: 100%; overflow: hidden; }
  body { min-height: 0; }
  .ll-bar { position: relative; }
  .ll-frame { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 24px; margin-top: 2px; }
  .ll-frame:focus { outline: none; }
  .ll-frame .ll-doc :is(h1, h2, h3, h4) { scroll-margin-top: 24px; }
  .ll-frame .ll-toc-rail { top: 40px; max-height: calc(100vh - 260px); scrollbar-width: none; }
  .ll-frame .ll-toc-rail::-webkit-scrollbar { display: none; }
  .ll-foot { padding: 12px var(--gutter) 14px; }
  /* The browser's own scrollbar is hidden; app.js draws LlamaLink's rail instead. */
  .ll-frame { scrollbar-width: none; }
  .ll-frame::-webkit-scrollbar { display: none; }
}
.ll-meta {
  margin: 0 0 16px; font: 500 0.75rem/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.ll-foot { padding: 28px var(--gutter) 32px; text-align: center; font: 0.875rem/1.5 var(--ui); color: var(--muted); }

/* ── contents rail ───────────────────────────────────── */
.ll-toc { font: 0.9375rem/1.45 var(--ui); }
.ll-toc-rail { display: none; }
@media (min-width: 1180px) {
  .ll-toc-rail { display: block; position: sticky; top: 104px; align-self: start; max-height: calc(100vh - 220px); overflow-y: auto; padding: 6px 8px 0 0; }
  .ll-toc-inline { display: none; }
}
.ll-toc-label { margin: 0 0 12px; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.ll-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ll-toc a { display: block; padding: 5px 0; color: var(--muted); text-decoration: none; }
.ll-toc a:hover { color: var(--ink); }
.ll-toc a[aria-current="true"] { color: var(--spark); font-weight: 600; }
.ll-toc .d3 a { padding-left: 14px; font-size: 0.875rem; }
.ll-toc-inline { margin: 0 0 32px; border-radius: 12px; background: var(--paper-2); }
.ll-toc-inline summary { cursor: pointer; padding: 14px 16px; font: 600 0.9375rem/1 var(--ui); list-style: none; display: flex; justify-content: space-between; }
.ll-toc-inline summary::-webkit-details-marker { display: none; }
.ll-toc-inline summary::after { content: "Show"; font-weight: 450; color: var(--muted); }
.ll-toc-inline[open] summary::after { content: "Hide"; }
.ll-toc-inline ol { padding: 0 16px 14px; }

/* ── the document ────────────────────────────────────── */
.ll-doc { font: 400 1.125rem/1.7 var(--read); color: var(--ink-2); hanging-punctuation: first; }
.ll-doc > :first-child { margin-top: 0; }
.ll-doc h1, .ll-doc h2, .ll-doc h3, .ll-doc h4 { color: var(--ink); text-wrap: balance; position: relative; scroll-margin-top: 96px; }
.ll-doc h1 { font: 400 clamp(2.25rem, 1.5rem + 2.8vw, 3.25rem)/1.05 var(--display); letter-spacing: -0.02em; margin: 0 0 0.55em; }
.ll-doc h2 { font: 500 clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem)/1.2 var(--display); letter-spacing: -0.01em; margin: 2em 0 0.55em; }
.ll-doc h3 { font: 600 1.1875rem/1.3 var(--ui); margin: 1.8em 0 0.5em; }
.ll-doc h4 { font: 600 1rem/1.4 var(--ui); letter-spacing: 0.01em; margin: 1.6em 0 0.4em; }
.ll-anchor { margin-left: 0.35em; color: var(--edge); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity .15s; }
.ll-doc :is(h2, h3, h4):hover .ll-anchor, .ll-anchor:focus-visible { opacity: 1; }
.ll-doc p { margin: 0 0 1.1em; }
.ll-doc a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ll-doc a:hover { text-decoration-color: currentColor; }
.ll-doc strong { font-weight: 650; color: var(--ink); }
.ll-doc mark { background: var(--spark-tint); color: inherit; padding: 0 0.15em; border-radius: 3px; }
.ll-doc ul, .ll-doc ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.ll-doc li { margin: 0.3em 0; padding-left: 0.2em; }
.ll-doc li::marker { color: var(--spark); font-size: 0.95em; }
.ll-doc li > ul, .ll-doc li > ol { margin: 0.25em 0 0.4em; }
.ll-doc .contains-task-list { list-style: none; padding-left: 0.2em; }
.ll-doc .task-list-item { display: flex; gap: 0.6em; align-items: baseline; }
.ll-doc .task-list-item input { appearance: none; flex: none; width: 1.05em; height: 1.05em; border: 1.5px solid var(--edge); border-radius: 5px; transform: translateY(0.15em); margin: 0; }
.ll-doc .task-list-item input:checked { background: var(--spark); border-color: var(--spark); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ll-doc blockquote { margin: 1.4em 0; padding: 16px 20px; border-radius: 12px; background: var(--spark-wash); color: var(--ink); font: italic 400 1.1875rem/1.55 var(--display); }
.ll-doc blockquote p:last-child { margin-bottom: 0; }
.ll-doc hr { border: 0; height: 1px; width: 5rem; margin: 2.6em auto; background: var(--edge); }
.ll-doc img { display: block; height: auto; border-radius: 12px; margin: 1.6em auto; }
.ll-doc figure { margin: 1.6em 0; }
.ll-doc figcaption { font: 500 0.75rem/1.5 var(--mono); letter-spacing: 0.06em; color: var(--muted); text-align: center; margin-top: 0.7em; }
.ll-doc del { color: var(--muted); }
.ll-doc abbr[title] { text-decoration: underline dotted; }
.ll-doc kbd { font: 0.8em var(--mono); padding: 0.1em 0.4em; border: 1px solid var(--edge); border-bottom-width: 2px; border-radius: 5px; background: var(--paper-2); }
.ll-doc details { margin: 1.2em 0; padding: 0.7em 1em; border-radius: 12px; background: var(--paper-2); }
.ll-doc summary { cursor: pointer; font: 600 1rem/1.4 var(--ui); color: var(--ink); }

/* inline + block code */
.ll-doc :not(pre) > code { font: 450 0.86em/1 var(--mono); background: var(--code-bg); border: 1px solid var(--rule-strong); padding: 0.12em 0.36em; border-radius: 6px; white-space: break-spaces; color: var(--ink); }
.ll-code { margin: 1.4em 0; border: 1px solid var(--rule-strong); border-radius: 14px; background: var(--code-bg); overflow: hidden; }
.ll-code-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--rule-strong); }
.ll-code-lang { font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; }
.ll-copy { font: 550 0.8125rem/1 var(--ui); color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 7px 10px; cursor: pointer; }
.ll-copy:hover { border-color: var(--edge); background: var(--paper); }
.ll-code pre, .ll-plain pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 400 0.86rem/1.65 var(--mono); tab-size: 2; color: var(--ink); }
.ll-code pre code { font: inherit; background: none; border: 0; padding: 0; }

/* tables */
.ll-table { margin: 1.6em 0; overflow-x: auto; }
.ll-table table { width: 100%; border-collapse: collapse; font: 0.9375rem/1.45 var(--ui); font-variant-numeric: tabular-nums; color: var(--ink); }
.ll-table th { text-align: left; font: 500 0.6875rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 0 14px 10px 0; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.ll-table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ll-table tr:last-child td { border-bottom: 0; }
.ll-table th[align="right"], .ll-table td[align="right"] { text-align: right; }
.ll-table th[align="center"], .ll-table td[align="center"] { text-align: center; }

/* callouts */
.ll-callout { --c: var(--note); --w: var(--note-wash); margin: 1.5em 0; padding: 16px 20px; border-radius: 14px; background: var(--w); font-size: 1.0625rem; color: var(--ink-2); }
.ll-callout > :last-child { margin-bottom: 0; }
.ll-callout-title { margin: 0 0 0.4em !important; font: 500 0.6875rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); display: flex; align-items: center; gap: 8px; }
.ll-callout-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ll-callout-tip { --c: var(--tip); --w: var(--tip-wash); }
.ll-callout-important { --c: var(--important); --w: var(--important-wash); }
.ll-callout-warning { --c: var(--warning); --w: var(--warning-wash); }
.ll-callout-caution { --c: var(--caution); --w: var(--caution-wash); }

/* diagrams */
.ll-diagram { position: relative; margin: 1.8em 0; padding: 22px 16px; border: 1px solid var(--rule-strong); border-radius: 14px; background: var(--paper); overflow-x: auto; text-align: center; }
.ll-diagram pre.mermaid { margin: 0; font: 0.8rem/1.4 var(--mono); color: var(--muted); white-space: pre-wrap; text-align: left; }
.ll-diagram pre.mermaid[data-processed] { font: inherit; color: inherit; text-align: center; white-space: normal; }
.ll-diagram svg { max-width: 100%; height: auto; }
.ll-diagram.is-scrolling { text-align: left; }
/* Wide diagrams spread into the card's margin on big screens. */
@media (min-width: 900px) { .ll-frame:not(.has-toc) .ll-diagram.is-wide { margin-inline: calc((min(42rem, 100%) - min(64rem, 100vw - 180px)) / 2); } }
@media (min-width: 1180px) { .ll-frame.has-toc .ll-diagram.is-wide { margin-right: -40px; } }
.ll-diagram.is-broken pre.mermaid::before { content: "This diagram couldn't be drawn. Here is its source:"; display: block; margin-bottom: 8px; font: 550 0.8125rem/1.3 var(--ui); color: var(--warning); }
.ll-diagram-expand { position: absolute; top: 8px; right: 8px; font: 550 0.75rem/1 var(--ui); color: var(--ink-2); background: var(--paper); border: 1px solid var(--edge); border-radius: 999px; padding: 7px 10px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.ll-diagram:hover .ll-diagram-expand, .ll-diagram-expand:focus-visible { opacity: 1; }
@media (hover: none) { .ll-diagram-expand { opacity: 1; } }
.ll-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
.ll-viewer::backdrop { background: var(--paper); }
.ll-viewer-bar { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.ll-viewer-body { padding: 24px 16px; overflow: auto; height: calc(100% - 60px); touch-action: pan-x pan-y pinch-zoom; }
.ll-viewer-body svg { max-width: none !important; min-width: min(100%, 900px); height: auto; }

/* highlight.js */
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type { color: var(--hl-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-tag { color: var(--hl-string); }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: var(--hl-number); }
.hljs-comment, .hljs-quote { color: var(--hl-comment); font-style: italic; }
.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: var(--hl-title); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-property, .hljs-params { color: var(--hl-attr); }
.hljs-meta, .hljs-doctag, .hljs-tag { color: var(--hl-meta); }
.hljs-deletion { color: var(--caution); }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; }

/* footnotes */
.ll-doc .footnotes { margin-top: 3em; padding-top: 1.2em; border-top: 1px solid var(--rule-strong); font-size: 0.9375rem; color: var(--muted); }
.ll-doc .footnotes h2 { font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin: 0 0 1em; }
.ll-doc [data-footnote-backref] { text-decoration: none; white-space: nowrap; margin-left: 0.25em; }
.ll-doc [data-footnote-ref] { font: 600 0.72em/1 var(--ui); text-decoration: none; padding: 0 0.1em; }

/* ── file pages ──────────────────────────────────────── */
.ll-title { font: 400 clamp(1.9rem, 1.4rem + 2vw, 2.75rem)/1.08 var(--display); letter-spacing: -0.02em; margin: 0 0 22px; overflow-wrap: anywhere; text-wrap: balance; color: var(--ink); }
.ll-title.is-long { font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem); line-height: 1.12; }
.ll-ext { color: var(--faint); }
/* A file's meta line sits right under its name. */
.ll-main > .ll-title + .ll-meta { margin: -10px 0 22px; }
/* File pages, the "byline" header (Claude Design, 2026-10-06): path, Visible to, the title, and the meta line
   close under it as its byline, then the file. Folder pages keep their own order. */
body.ll-file .ll-path { margin-bottom: 24px; }
body.ll-file .ll-visible { margin: 0 0 36px; }
body.ll-file .ll-main > .ll-title, body.ll-file .ll-doc > h1:first-child { margin-bottom: 14px; }
body.ll-file .ll-main > .ll-title + .ll-meta, body.ll-file .ll-main > .ll-meta, body.ll-file .ll-doc > .ll-byline { margin: 0 0 28px; }
@media (max-width: 640px) {
  body.ll-file .ll-path { margin-bottom: 20px; }
  body.ll-file .ll-visible { margin-bottom: 28px; }
  body.ll-file .ll-main > .ll-title, body.ll-file .ll-doc > h1:first-child { margin-bottom: 12px; }
  body.ll-file .ll-main > .ll-title + .ll-meta, body.ll-file .ll-main > .ll-meta, body.ll-file .ll-doc > .ll-byline { margin: 0 0 24px; }
}

/* ── the path line: Home, then the folders, above the title ── */
.ll-path { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 450 0.875rem/1.45 var(--ui); color: var(--muted); }
.ll-path ol { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
/* Back: a small circle that hangs in the card's margin on wide screens, so the path still lines up with the title. */
.ll-path .ll-path-up { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--edge); background: var(--paper); color: var(--ink-2); text-decoration: none; transition: background-color .15s, border-color .15s; }
.ll-path .ll-path-up svg { width: 16px; height: 16px; }
.ll-path .ll-path-up:hover { background: var(--paper-2); border-color: var(--muted); color: var(--ink); text-decoration: none; }
@media (min-width: 761px) { .ll-path .ll-path-up { margin-left: -38px; } }
@media (pointer: coarse) { .ll-path .ll-path-up { width: 36px; height: 36px; } }
.ll-path li { display: flex; align-items: center; min-width: 0; }
.ll-path li + li::before { content: "/"; flex: none; margin: 0 8px; color: var(--edge); }
.ll-path a { color: inherit; text-decoration: none; border-radius: 6px; }
.ll-path a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ll-path-end span { color: var(--ink); font-weight: 550; }
/* With app.js: one line. Middle folders fold into "…" one at a time, only when it wouldn't fit;
   if Home, "…" and the last folder still don't, the last name is cut (its full name in the tooltip). */
.ll-path.is-measured ol { flex-wrap: nowrap; white-space: nowrap; }
.ll-path.is-measured li { flex: none; }
.ll-path.is-cut ol { overflow: hidden; }
.ll-path.is-cut li.is-last, .ll-path.is-cut li.ll-path-end { flex: 0 1 auto; }
.ll-path.is-cut li.is-last > :last-child, .ll-path.is-cut li.ll-path-end > :last-child { min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; }
.ll-path-more { display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border-radius: 7px; border: 1px solid var(--rule-strong); background: var(--paper-2); color: var(--muted); font: 700 0.8125rem/1 var(--ui); letter-spacing: .04em; cursor: pointer; }
.ll-path-more:hover, .ll-path-more[aria-expanded="true"], .ll-path-more.is-drop { background: var(--spark-tint); border-color: transparent; color: var(--accent); }
.ll-path a.is-drop { color: var(--ink); background: var(--spark-tint); box-shadow: 0 0 0 4px var(--spark-tint); }
/* "…" opened: the full path as a staircase. */
.ll-menu.ll-path-menu { width: auto; min-width: 220px; max-width: min(360px, calc(100vw - 32px)); padding: 6px; }
.ll-menu.ll-path-menu a { padding: 8px 12px 8px calc(10px + var(--d, 0) * 14px); gap: 9px; color: var(--ink-2); overflow-wrap: anywhere; }
.ll-path-menu a svg { width: 16px; height: 16px; fill: var(--spark); stroke: none; }
.ll-menu.ll-path-menu a.is-here { background: var(--spark-wash); color: var(--ink); font-weight: 650; }
.ll-player audio { width: 100%; margin: 8px 0 16px; }
.ll-player video { display: block; width: 100%; max-height: 78vh; background: #000; border-radius: 14px; }
.ll-audio-card { padding: 28px 24px; border-radius: 16px; background: var(--paper-2); }
.ll-wave { display: flex; align-items: end; gap: 3px; height: 40px; margin-bottom: 16px; }
.ll-wave i { flex: 1; background: var(--spark); opacity: .7; border-radius: 2px; }
.ll-fallback { padding: 24px; border: 1px dashed var(--edge); border-radius: 14px; text-align: center; color: var(--ink-2); }
.ll-fallback p { margin: 0 0 16px; }
.ll-file-card { display: grid; justify-items: start; gap: 14px; padding: 32px 28px; border-radius: 16px; background: var(--paper-2); }
.ll-file-card .ll-icon { width: 44px; height: 44px; color: var(--spark); }
.ll-file-card p { margin: 0; color: var(--ink-2); }
.ll-preview-img { display: block; margin: 0 auto; max-height: 80vh; border-radius: 12px; background: repeating-conic-gradient(var(--paper-2) 0 25%, var(--paper) 0 50%) 0 0 / 16px 16px; }
.ll-plain { border: 1px solid var(--rule-strong); border-radius: 14px; background: var(--code-bg); }
.ll-plain pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.ll-plain.is-code pre { white-space: pre; overflow-wrap: normal; }
.ll-note { margin: 12px 0 0; font: 0.875rem/1.45 var(--ui); color: var(--muted); }
.ll-note-box { margin: 0 0 24px; padding: 12px 16px; border-radius: 12px; background: var(--warning-wash); color: var(--ink-2); }
.ll-doc + .ll-note-box { margin: 32px 0 0; }

/* ── folders ─────────────────────────────────────────── */
.ll-list { list-style: none; margin: 0; padding: 0; }
.ll-list li { border-bottom: 1px solid var(--rule); }
.ll-list li:last-child { border-bottom: 0; }
.ll-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 12px; margin: 0 -12px; color: var(--ink); text-decoration: none; border-radius: 12px; }
.ll-row:hover { background: var(--paper-2); }
.ll-row .ll-icon { width: 22px; height: 22px; color: var(--muted); }
.ll-row.is-folder .ll-icon { color: var(--spark); }
.ll-row-name { font-weight: 550; overflow-wrap: anywhere; }
.ll-row-type, .ll-row-size { font: 0.8125rem/1.3 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ll-row-size { min-width: 5.5em; text-align: right; }
@media (max-width: 560px) {
  .ll-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .ll-row-type { display: none; }
}
.ll-empty { padding: 40px 0; color: var(--muted); }

/* not found */
.ll-lost { padding-top: 4vh; max-width: 34rem; }
.ll-lost .ll-code404 { font: 500 0.75rem/1 var(--mono); color: var(--accent); letter-spacing: 0.14em; margin: 0 0 16px; }
.ll-lost p { color: var(--ink-2); font-size: 1.0625rem; }
.ll-lost .ll-note { font-size: 0.9375rem; color: var(--muted); }
.ll-lost-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 22px 0; padding: 14px 14px 14px 18px; border-radius: 14px; background: var(--paper-2); }
.ll-lost-who p { margin: 0; overflow-wrap: anywhere; }
.ll-switch-form { margin: 0; }

/* the card's scrollbar (drawn by app.js, only while the card scrolls inside itself) */
.ll-rail { position: fixed; z-index: 15; width: 16px; touch-action: none; }
.ll-rail::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--rule-strong); opacity: 0; transition: opacity .25s; }
.ll-thumb { position: absolute; top: 0; left: 5px; width: 6px; border-radius: 999px; background: var(--edge); transition: background-color .2s, width .15s, left .15s; cursor: grab; will-change: transform; }
.ll-rail.is-active::before, .ll-rail:hover::before, .ll-rail.is-dragging::before { opacity: 1; }
/* Active: a soft clay, halfway between the resting grey and Llamigo orange. */
.ll-rail.is-active .ll-thumb, .ll-rail:hover .ll-thumb, .ll-rail.is-dragging .ll-thumb { background: color-mix(in srgb, var(--spark) 55%, var(--edge)); }
.ll-rail:hover .ll-thumb, .ll-rail.is-dragging .ll-thumb { width: 8px; left: 4px; }
.ll-rail.is-dragging .ll-thumb { cursor: grabbing; }

/* toast */
.ll-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--paper); font: 550 0.9375rem/1.35 var(--ui); padding: 11px 18px; border-radius: 22px; width: max-content; max-width: min(36rem, calc(100vw - 32px)); text-align: center; box-shadow: var(--shadow); transition: opacity .18s, transform .18s; z-index: 60; }
.ll-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
body.is-picking .ll-toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } /* above the selection bar */
@media (max-width: 640px) { body.is-picking .ll-toast { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── print ───────────────────────────────────────────── */
@media print {
  :root { --ground: #fff; --paper: #fff; --paper-2: #f6f6f6; --ink: #111; --ink-2: #222; --muted: #666; --rule: #ddd; --accent: #111; }
  @page { margin: 18mm 16mm; }
  html, body { background: #fff; display: block; height: auto; overflow: visible; }
  .ll-bar, .ll-toc, .ll-foot, .ll-toast, .ll-rail, .ll-copy, .ll-anchor, .ll-diagram-expand, .ll-skip, .ll-meta { display: none !important; }
  .ll-frame, .ll-frame.has-toc { display: block; padding: 0; margin: 0; width: auto; box-shadow: none; border-radius: 0; overflow: visible; }
  .ll-doc { font-size: 11pt; line-height: 1.55; }
  .ll-doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; overflow-wrap: anywhere; }
  .ll-doc h1, .ll-doc h2, .ll-doc h3 { break-after: avoid; }
  .ll-code, .ll-table, .ll-diagram, .ll-callout, figure, img { break-inside: avoid; }
  .ll-code pre { white-space: pre-wrap; }
  .ll-table { overflow: visible; }
}

/* ── LlamaLink 2: sign-in, sign-out, sharing ──────────────── */
/* Sign-in, finish and signed-out: version 3, "Open paper" */
.ll-gate-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.ll-gate-page { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 24px 24px; }
.ll-gate-col { width: min(100%, 21.25rem); display: flex; flex-direction: column; align-items: center; text-align: center; }
.ll-gate-icon { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 10px 30px -14px rgba(214,90,30,.6); }
.ll-gate-name { margin: 28px 0 10px; font: 400 2.75rem/1 var(--display); letter-spacing: -0.025em; color: var(--ink); }
.ll-gate-lead { margin: 0 0 32px; color: var(--muted); font: 1rem/1.55 var(--ui); }
.ll-gate-notice { margin: -12px 0 22px; padding: 12px 14px; border-radius: 12px; background: var(--warning-wash); color: var(--warning); font: 0.9375rem/1.45 var(--ui); text-align: left; }
.ll-gate-actions { width: 100%; display: grid; gap: 12px; }
.ll-gate-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; border-radius: 999px; border: 1px solid var(--edge); background: var(--paper); color: var(--ink); font: 600 1rem/1 var(--ui); cursor: pointer; transition: background-color .15s, border-color .15s; }
.ll-gate-google:hover { background: var(--paper-2); }
.ll-gate-google:disabled { opacity: .6; cursor: progress; }
.ll-g { width: 18px; height: 18px; }
.ll-gate-or { display: flex; align-items: center; gap: 14px; margin: 6px 0; color: var(--faint); font: 0.8125rem/1 var(--ui); }
.ll-gate-or::before, .ll-gate-or::after { content: ""; flex: 1; height: 1px; background: var(--rule-strong); }
.ll-gate-email { display: grid; gap: 12px; }
.ll-gate-input { width: 100%; min-height: 50px; box-sizing: border-box; padding: 0 16px; border-radius: 14px; border: 1px solid var(--edge); background: var(--paper); color: var(--ink); font: 1rem/1 var(--ui); text-align: left; }
.ll-gate-input::placeholder { color: var(--faint); }
.ll-gate-input:focus { outline: 2px solid var(--spark); outline-offset: 1px; border-color: transparent; }
.ll-gate-submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--spark); background: var(--spark); color: #fff; font: 600 1rem/1 var(--ui); text-decoration: none; cursor: pointer; transition: background-color .15s; }
.ll-gate-submit:hover { background: var(--spark-hover); border-color: var(--spark-hover); color: #fff; }
.ll-gate-submit:disabled { opacity: .6; cursor: progress; }
.ll-gate-hint { margin: 2px 0 0; color: var(--muted); font: 0.875rem/1.5 var(--ui); }
.ll-gate-sent { padding: 20px; border-radius: 16px; background: var(--tip-wash); text-align: left; }
.ll-gate-sent h2 { margin: 0 0 8px; font: 400 1.625rem/1.15 var(--display); color: var(--ink); }
.ll-gate-sent p { margin: 0 0 8px; color: var(--ink-2); font: 0.9375rem/1.5 var(--ui); overflow-wrap: anywhere; }
.ll-gate-status { margin: 2px 0 0; font: 0.9375rem/1.45 var(--ui); color: var(--caution); }
.ll-gate-status:empty { display: none; }
.ll-gate-copy { padding: 24px; text-align: center; color: var(--faint); font: 0.8125rem/1.4 var(--ui); }
.ll-gate-col .ll-dev-sign-in { width: 100%; box-sizing: border-box; margin-top: 28px; text-align: left; }
.ll-dev-sign-in { display: grid; gap: 10px; margin: 24px 0; padding: 16px; border: 1px dashed var(--edge); border-radius: 14px; }
.ll-input { min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--edge); background: var(--paper); color: var(--ink); font: 1rem/1 var(--ui); width: 100%; box-sizing: border-box; }
.ll-input:focus { outline: 2px solid var(--spark); outline-offset: 1px; border-color: transparent; }
.ll-link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ll-btn-sm { min-height: 32px; padding: 0 12px; font-size: 0.8125rem; margin-left: auto; align-self: center; }
.ll-visible .ll-btn-sm { flex: none; }

.ll-share { box-sizing: border-box; border: 0; padding: 0; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(22,20,15,.5); width: min(34rem, calc(100vw - 32px)); max-width: none; overflow: hidden; }
.ll-share::backdrop { background: rgba(22, 20, 15, .38); }
.ll-share-body { padding: 26px 26px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ll-share-body > * { min-width: 0; }
.ll-share h2 { margin: 0; font: 400 1.75rem/1.15 var(--display); letter-spacing: -0.01em; }
.ll-share-sub { margin: 6px 0 0; color: var(--muted); font: 0.9375rem/1.4 var(--ui); overflow-wrap: anywhere; }
.ll-share-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ll-share-list li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--spark-wash); font: 0.9375rem/1.35 var(--ui); }
.ll-share-list li.is-only { background: var(--teal-wash); }
.ll-share-who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ll-share-who small { display: block; color: var(--muted); font-size: 0.8125rem; }
.ll-share-add { display: flex; flex-wrap: wrap; gap: 8px; }
.ll-share-add > .ll-field { flex: 1 0 100%; }
.ll-share-add .ll-input { flex: 1 1 14rem; width: auto; min-width: 0; min-height: 42px; }
.ll-share-add .ll-btn { flex: none; }
.ll-share-error { margin: -6px 0 0; color: var(--caution); font: 0.875rem/1.4 var(--ui); }
.ll-share-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ll-share-foot .ll-note { flex: 1 1 14rem; margin: 0; color: var(--muted); font: 0.8125rem/1.45 var(--ui); }

/* ── LlamaLink 2: library (option A), upload tray, menus, dialogs ─────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ll-pdf { width: 100%; height: min(80vh, 1100px); border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.ll-lib-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 16px; margin-bottom: 22px; }
.ll-lib-head .ll-title { margin: 0 auto 0 0; }
.ll-lib-cols, .ll-lib-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 260px) 96px 40px; gap: 16px; align-items: center; }
.ll-lib-cols { padding: 0 0 10px; border-bottom: 1px solid var(--rule-strong); font: 500 0.6875rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ll-lib-cols span:nth-child(4) { text-align: right; }
.ll-lib { list-style: none; margin: 0; padding: 0; }
.ll-lib-row { position: relative; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; }
/* Rules between rows sit at the content width, and the two touching a highlighted row hide, so the hover pill swallows them. */
.ll-lib-row::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--rule); pointer-events: none; }
.ll-lib-row:first-child::before { content: none; }
.ll-lib-row:is(:hover, :focus-within, .is-picked, .is-drop)::before,
.ll-lib-row:is(:hover, :focus-within, .is-picked, .is-drop) + .ll-lib-row::before { opacity: 0; }
.ll-lib-row:hover, .ll-lib-row:focus-within { background: var(--paper-2); }
.ll-lib-row .ll-icon { width: 22px; height: 22px; color: var(--muted); }
.ll-lib-row[data-kind="folder"] .ll-icon { color: var(--spark); }
.ll-lib-main { min-width: 0; display: flex; align-items: center; gap: 12px; }
.ll-lib-name { flex: 0 1 auto; min-width: 0; color: var(--ink); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ll-lib-name::after { content: ""; position: absolute; inset: 0; border-radius: 12px; } /* the whole row opens it */
.ll-lib-kind { flex: none; font: 0.875rem/1.2 var(--ui); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ll-lib-row.is-uploading .ll-lib-kind { color: var(--accent); }
/* Copy link takes no room until the row is pointed at or tabbed into (Tab from the name reaches it). */
.ll-lib-copy { display: none; flex: none; margin-left: auto; position: relative; z-index: 1; }
/* Hover reveals only where there's a real pointer: on a phone, iOS spends the first tap on hover, so a tap must just open. */
@media (hover: hover) { .ll-lib-row:is(:hover, :focus-within) .ll-lib-copy { display: inline-flex; } }
.ll-lib-who { min-width: 0; }
.ll-lib-when { font: 0.875rem/1.2 var(--ui); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.ll-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px; border-radius: 999px; background: var(--paper-2); color: var(--muted); font: 500 0.8125rem/1.2 var(--ui); }
.ll-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-chip.is-shared { background: var(--teal-wash); color: var(--teal); }
.ll-lib-row:is(:hover, :focus-within) .ll-chip:not(.is-shared, .is-ending) { background: var(--paper); }
.ll-chip-icon { width: 15px; height: 15px; flex: none; }
.ll-btn-xs { min-height: 32px; padding: 0 12px; font-size: 0.8125rem; }
.ll-more { position: relative; z-index: 1; justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.ll-more:hover, .ll-more[aria-expanded="true"] { background: var(--paper); border-color: var(--edge); color: var(--ink); }
.ll-more-icon { width: 18px; height: 18px; fill: currentColor; }
.ll-more-bar .ll-more-icon { color: var(--ink); }
.ll-drop { margin-top: 28px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; border: 1.5px dashed var(--rule-strong); border-radius: 16px; background: transparent; color: var(--muted); font: 0.9375rem/1.4 var(--ui); cursor: pointer; }
.ll-drop .ll-icon { color: var(--spark); }
.ll-drop:hover { border-color: var(--spark); color: var(--ink); }
body.is-dragging .ll-frame { outline: 2px dashed var(--spark); outline-offset: -10px; }
body.is-dragging .ll-drop { border-color: var(--spark); background: var(--spark-wash); color: var(--ink); }

.ll-menu { position: fixed; z-index: 60; width: 250px; padding: 8px; margin: 0; list-style: none; background: var(--paper); border-radius: 16px; border: 1px solid var(--rule); box-shadow: 0 2px 4px rgba(59,53,44,.06), 0 24px 60px -20px rgba(59,53,44,.45); }
.ll-menu a { text-decoration: none; }
.ll-menu button, .ll-menu a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 500 0.9375rem/1.2 var(--ui); text-align: left; cursor: pointer; }
.ll-menu button:hover, .ll-menu button:focus-visible, .ll-menu a:hover, .ll-menu a:focus-visible { background: var(--paper-2); outline: none; }
.ll-menu a.is-drop { background: var(--spark-tint); box-shadow: inset 0 0 0 2px var(--spark); }
.ll-menu button.is-danger { color: var(--caution); }
.ll-menu svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ll-menu hr { border: 0; height: 1px; margin: 6px 8px; background: var(--rule); }

.ll-tray { position: fixed; right: 24px; bottom: 24px; z-index: 55; width: min(400px, calc(100vw - 32px)); padding: 16px 20px 8px; background: var(--paper); border-radius: 18px; border: 1px solid var(--rule); box-shadow: 0 2px 4px rgba(59,53,44,.06), 0 24px 60px -20px rgba(59,53,44,.45); }
.ll-tray-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; padding-right: 40px; }
.ll-tray-head strong { font: 400 1.375rem/1.2 var(--display); }
.ll-tray-head span { font: 0.8125rem/1 var(--ui); color: var(--muted); }
.ll-tray ul { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.ll-tray li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--rule); }
.ll-tray-name { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-tray-bar { display: block; height: 6px; margin: 6px 0 4px; border-radius: 999px; background: var(--rule-strong); overflow: hidden; }
.ll-tray-bar i { display: block; height: 100%; width: 0; background: var(--spark); border-radius: 999px; transition: width .2s; }
.ll-tray-state { font: 0.8125rem/1.2 var(--ui); color: var(--muted); }
.ll-tray-state.is-ready { color: var(--tip); }
.ll-tray-state.is-error { color: var(--caution); }
.ll-tray-close { position: absolute; top: 10px; right: 10px; }

.ll-ask { border: 0; padding: 0; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); width: min(30rem, calc(100vw - 32px)); }
.ll-ask::backdrop { background: rgba(22, 20, 15, .38); }
.ll-ask form { padding: 24px; display: grid; gap: 14px; }
.ll-field { display: grid; gap: 6px; font: 600 0.875rem/1.3 var(--ui); color: var(--ink-2); }
.ll-field select { width: 100%; }
.ll-ask .ll-share-error { margin: -4px 0 0; }
.ll-ask button[disabled], .ll-share button[disabled] { opacity: .6; cursor: progress; }
.ll-ask h2 { margin: 0; font: 400 1.625rem/1.2 var(--display); }
.ll-ask p { margin: 0; color: var(--muted); font: 0.9375rem/1.45 var(--ui); }
.ll-ask select { min-height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--edge); background: var(--paper); color: var(--ink); font: 0.9375rem/1 var(--ui); }
.ll-ask-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.ll-btn-danger { background: var(--caution); border-color: var(--caution); color: #fff; }
.ll-share-add select { min-height: 42px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--edge); background: var(--paper); color: var(--ink); font: 0.9375rem/1 var(--ui); }
.ll-share-link { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--paper-2); }
.ll-share-link .ll-btn { flex: none; }
.ll-share-link code { flex: 1; min-width: 0; font: 0.875rem/1.3 var(--mono); color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Narrower desktops: the name keeps the whole line, type and size go under it, and
   Copy link stays in the ⋯ menu (otherwise long names were squeezed to nothing). */
@media (max-width: 1100px) {
  .ll-lib-main { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ll-lib-name { max-width: 100%; }
  .ll-lib-row:is(:hover, :focus-within) .ll-lib-copy { display: none; }
}
@media (max-width: 760px) {
  .ll-lib-cols { display: none; }
  .ll-lib-row { grid-template-columns: 24px minmax(0, 1fr) 44px; row-gap: 4px; }
  .ll-lib-who { grid-column: 2; grid-row: 2; }
  .ll-lib-when { display: none; }
}
/* Phones: names win. The name gets its own line (two at most), type and size go under it. */
@media (max-width: 640px) {
  .ll-lib-name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
  .ll-lib-kind { font-size: 0.8125rem; }
}
/* Touch screens: a visible Select button shows the checkboxes, and row ⋯ buttons are a thumb wide. */
.ll-sel-mode { display: none; }
.ll-sel-mode.is-on { background: var(--spark-wash); border-color: var(--spark-tint); color: var(--accent); }
@media (pointer: coarse), (max-width: 640px) {
  .ll-sel-mode { display: inline-flex; }
  .ll-more { width: 44px; height: 44px; }
}
body.is-selecting .ll-pick { opacity: 1; }
body.is-selecting .ll-lib-pickcell .ll-icon { opacity: 0; }
body.is-selecting a.ll-lib-name::after { content: none; } /* a tap picks the row instead of opening it */
body.is-selecting .ll-lib-row { cursor: pointer; }
.ll-btn .ll-icon, .ll-drop .ll-icon { width: 20px; height: 20px; flex: none; }
.ll-btn { white-space: nowrap; }

/* ── your circle (top right, signed in) ─────────────── */
/* Your initial on Llamigo orange, matching the Upload and Download buttons, with a quiet ring. */
.ll-account { position: relative; display: flex; align-items: center; margin-left: 4px; }
.ll-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--spark); color: #fff; font: 600 1rem/1 var(--ui); box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--edge); }
:root[data-theme="dark"] .ll-avatar { color: #1a120c; }
button.ll-avatar { cursor: pointer; transition: background-color .15s, box-shadow .15s; }
button.ll-avatar:hover, button.ll-avatar[aria-expanded="true"] { background: var(--spark-hover); box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--spark); }
.ll-account-menu { position: absolute; right: 0; top: calc(100% + 12px); z-index: 60; width: 272px; padding: 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 2px 4px rgba(59,53,44,.06), 0 24px 60px -20px rgba(59,53,44,.45); }
.ll-account-who { display: flex; align-items: flex-start; gap: 12px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); }
.ll-account-who .ll-avatar { width: 36px; height: 36px; font-size: 0.9375rem; box-shadow: none; }
.ll-account-who img.ll-avatar { object-fit: cover; background: var(--paper-2); }
.ll-account-who > span:last-child { display: grid; min-width: 0; overflow-wrap: anywhere; }
.ll-account-who strong { font: 600 0.9375rem/1.3 var(--ui); color: var(--ink); }
.ll-account-who span span { font: 0.8125rem/1.35 var(--ui); color: var(--muted); }
.ll-account-who em { margin-top: 6px; justify-self: start; padding: 2px 9px; border-radius: 999px; background: var(--teal-wash); color: var(--teal); font: 600 0.6875rem/1.5 var(--ui); font-style: normal; letter-spacing: .04em; }
.ll-account-menu form { margin: 0; }
.ll-account-menu hr { height: 1px; margin: 4px 8px; border: 0; background: var(--rule); }
.ll-account-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 500 0.9375rem/1.25 var(--ui); text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.ll-account-item:hover, .ll-account-item:focus-visible { background: var(--paper-2); outline: none; color: var(--ink); }
.ll-account-item small { display: block; margin-top: 2px; color: var(--muted); font: 400 0.8125rem/1.3 var(--ui); }
.ll-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--rule-strong); transition: background-color .15s; flex: none; }
.ll-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
:root[data-theme="dark"] .ll-switch { background: var(--spark); }
:root[data-theme="dark"] .ll-switch::after { transform: translateX(14px); }

.ll-share-error:empty { display: none; }

/* ── select several, drag to move ─────────────────────── */
.ll-lib-pickcell { position: relative; width: 28px; height: 24px; display: grid; place-items: center; }
.ll-pick { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; accent-color: var(--spark); opacity: 0; cursor: pointer; z-index: 2; }
.ll-pick:focus-visible, body.is-picking .ll-pick { opacity: 1; }
body.is-picking .ll-lib-pickcell .ll-icon { opacity: 0; }
@media (hover: hover) {
  .ll-lib-row:hover .ll-pick { opacity: 1; }
  .ll-lib-row:hover .ll-lib-pickcell .ll-icon { opacity: 0; }
}
/* On touch screens the hidden checkbox doesn't catch taps until Select is on, so a tap on the icon opens the row too. */
@media (hover: none) {
  .ll-pick { pointer-events: none; }
  body.is-picking .ll-pick, body.is-selecting .ll-pick { pointer-events: auto; }
}
.ll-lib-row.is-picked { background: var(--spark-wash); }
.ll-lib-row.is-dragged { opacity: .45; }
.ll-lib-row.is-drop { background: var(--spark-tint); box-shadow: inset 0 0 0 2px var(--spark); }
.ll-selbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 56; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: 0 20px 50px -20px rgba(22,20,15,.6); font: 600 0.875rem/1 var(--ui); white-space: nowrap; }
.ll-selbar [data-selcount] { margin-right: 8px; }
.ll-selbar .ll-btn { background: transparent; color: var(--paper); border-color: rgba(252,250,245,.25); }
.ll-selbar .ll-btn:hover { background: rgba(252,250,245,.12); }
@media (max-width: 640px) {
  .ll-selbar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: none; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px; border-radius: 20px; white-space: normal; }
  .ll-selbar [data-selcount] { flex: 1 0 100%; margin: 0 0 2px; text-align: center; }
}
.ll-lib-row.is-failed { box-shadow: inset 3px 0 0 var(--caution); }
.ll-chip.is-ending { background: var(--warning-wash); color: var(--warning); }
.ll-drop .ll-link-btn { color: var(--accent); font-weight: 600; }

/* ── search everywhere ────────────────────────────────── */
.ll-search-results { margin: 8px 0 24px; padding: 14px; border-radius: 16px; background: var(--paper-2); display: grid; gap: 2px; }
.ll-search-label { margin: 0 0 6px 4px; font: 500 0.6875rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ll-search-hit { display: flex; align-items: baseline; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.ll-search-hit:hover { background: var(--paper); }
.ll-search-hit b { font-weight: 600; }
.ll-search-hit span { color: var(--muted); font-size: 0.875rem; }

/* ── Trash and Settings ───────────────────────────────── */
.ll-page-lead { margin: -8px 0 28px; max-width: 46rem; color: var(--muted); font: 1rem/1.55 var(--ui); }
.ll-section-title { margin: 0 0 14px; font: 400 1.75rem/1.2 var(--display); }
.ll-btn-quiet-danger { color: var(--caution); }
.ll-btn-quiet-danger:hover { background: var(--caution-wash); border-color: var(--caution); }
.ll-btn-danger-outline { color: var(--caution); border-color: var(--caution); }
.ll-btn-danger-outline:hover { background: var(--caution-wash); }
.ll-trash { list-style: none; margin: 0; padding: 0; }
.ll-trash-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ll-trash-row .ll-icon { width: 22px; height: 22px; color: var(--muted); }
.ll-trash-main { display: grid; gap: 2px; min-width: 0; }
.ll-trash-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-trash-main span { color: var(--muted); font-size: 0.875rem; }
.ll-trash-actions { display: flex; gap: 8px; }
.ll-settings { display: flex; flex-wrap: wrap; gap: 56px; }
.ll-settings > section:first-child { flex: 999 1 30rem; min-width: 0; }
.ll-settings > section:last-child { flex: 1 1 20rem; min-width: 0; }
.ll-team { list-style: none; margin: 0; padding: 0; }
.ll-team-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.ll-team-face { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--spark-tint); color: var(--accent); font: 600 0.875rem/1 var(--ui); }
.ll-team-who { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.ll-team-who b { font-weight: 600; }
.ll-team-who span { color: var(--muted); font-size: 0.8125rem; }
.ll-team-row select, .ll-team-add select { min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--edge); background: var(--paper); color: var(--ink); font: 0.875rem/1 var(--ui); }
.ll-team-gap { width: 76px; }
.ll-team-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ll-team-add .ll-input { flex: 1 1 14rem; width: auto; min-width: 0; min-height: 40px; }
.ll-activity { list-style: none; margin: 0; padding: 0; }
.ll-activity li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font: 0.875rem/1.45 var(--ui); color: var(--ink-2); overflow-wrap: anywhere; }
.ll-activity time { color: var(--faint); font: 0.75rem/1.6 var(--mono); }
.ll-share-list li.is-opened { background: var(--paper-2); }
.ll-share-list li.is-opened small { white-space: pre-line; }

/* footer small print */
.ll-gate-copy, .ll-foot-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.ll-foot a, .ll-gate-copy a { color: var(--muted); text-decoration: none; }
.ll-foot a:hover, .ll-gate-copy a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ll-foot-sep { color: var(--edge); }
.ll-foot-safe { display: inline-flex; align-items: center; gap: 5px; }
.ll-foot-lock { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

/* header search (staff), centred in the bar */
.ll-hsearch { grid-column: 2; position: relative; min-width: 0; }
.ll-hsearch-box { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--edge); background: var(--paper); color: var(--faint); box-sizing: border-box; }
.ll-hsearch-box:focus-within { border-color: var(--spark); box-shadow: 0 0 0 3px var(--spark-wash); }
.ll-hsearch-box svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ll-hsearch-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 0.9375rem/1 var(--ui); }
.ll-hsearch-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 61; max-height: 60vh; overflow: auto; padding: 8px; border-radius: 16px; border: 1px solid var(--rule); background: var(--paper); box-shadow: 0 2px 4px rgba(59,53,44,.06), 0 24px 60px -20px rgba(59,53,44,.45); display: grid; gap: 2px; }
.ll-visible-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.ll-visible-actions .ll-btn-sm { margin-left: 0; }
/* Phones: "Visible to" and its buttons share the top row, the names get the full width below, so the box stays two rows, not three. */
@media (max-width: 640px) {
  .ll-visible, body.ll-library .ll-visible { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 12px 12px 14px 18px; }
  .ll-visible-label { grid-column: 1; grid-row: 1; gap: 10px; }
  .ll-visible > .ll-btn-sm, .ll-visible-actions { grid-column: 2; grid-row: 1; align-self: center; margin-left: 0; }
  .ll-visible-who { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) { .ll-hsearch { grid-column: 1 / -1; grid-row: 2; } }
.ll-search-hits { display: grid; gap: 2px; }
.ll-search-hits:empty { display: none; }
.ll-search-hits .ll-search-hit { flex-direction: column; align-items: flex-start; gap: 2px; }
.ll-search-hits .ll-search-hit:hover, .ll-search-hits .ll-search-hit:focus-visible { background: var(--paper-2); outline: none; }
.ll-search-label.is-plain, .ll-search-label.is-error { margin: 2px 4px; text-transform: none; letter-spacing: 0; font: 0.9375rem/1.45 var(--ui); color: var(--muted); }
.ll-search-label.is-error { color: var(--caution); }

/* ── sign-in track ── */
/* Gate pages: a command in the lead line (the "ready" page), and a hint above the actions. */
.ll-gate-lead code { font: 450 0.86em/1.4 var(--mono); background: var(--code-bg); border: 1px solid var(--rule-strong); padding: 0.12em 0.36em; border-radius: 6px; overflow-wrap: anywhere; color: var(--ink); }
.ll-gate-actions > .ll-gate-hint:first-child { margin: 0 0 4px; }

/* ── console track ── */
/* The console at lab.llamassist.app: the Sites list (LlamaLink's library
   rows, with more columns), one site's page in sections, and the New site
   dialog. Built from the ll- pieces above; lab- classes only where Lab needs
   something LlamaLink didn't have. */
.lab-stroke { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* the Sites list: site · status · runs · who can open · deployed · ⋯ */
.lab-sites-cols, .lab-sites .ll-lib-row { grid-template-columns: 28px minmax(0, 1fr) 88px 150px minmax(0, 200px) 96px 40px; }
.lab-sites-cols span:nth-child(4) { text-align: left; }
.lab-sites-cols span:nth-child(6) { text-align: right; }
.lab-sites .ll-lib-row.is-live > .ll-icon { color: var(--spark); }
.lab-sites .ll-lib-row.is-deleted { opacity: .62; }
.lab-site-main { flex-direction: column; align-items: flex-start; gap: 3px; }
.lab-site-main .ll-lib-name { max-width: 100%; }
.lab-site-host { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; min-height: 26px; }
.lab-host-link { position: relative; z-index: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 0.8125rem/1.3 var(--mono); color: var(--muted); text-decoration: none; }
.lab-host-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lab-site-host .ll-lib-copy { margin-left: 0; min-height: 26px; padding: 0 10px; font-size: 0.75rem; }
.lab-site-what { display: grid; gap: 2px; min-width: 0; font: 0.875rem/1.25 var(--ui); color: var(--ink-2); }
.lab-site-what small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 0.75rem/1.3 var(--mono); color: var(--muted); }
.lab-never { color: var(--faint); }
.ll-chip.lab-status::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
/* (also on a hovered row, where LlamaLink's grey chips turn white) */
:is(.ll-chip, .ll-lib-row:is(:hover, :focus-within) .ll-chip).lab-status.is-live { background: var(--tip-wash); color: var(--tip); }
:is(.ll-chip, .ll-lib-row:is(:hover, :focus-within) .ll-chip).lab-status.is-paused { background: var(--warning-wash); color: var(--warning); }
:is(.ll-chip, .ll-lib-row:is(:hover, :focus-within) .ll-chip).lab-status.is-deleted { background: var(--caution-wash); color: var(--caution); }
.lab-quiet { margin: 22px 0 0; font: 0.875rem/1.45 var(--ui); color: var(--muted); }
.lab-quiet a { color: inherit; text-underline-offset: 3px; }
.lab-quiet a:hover { color: var(--ink); }
.lab-empty { display: grid; justify-items: center; gap: 10px; margin-top: 8px; padding: 52px 24px 48px; border-radius: 20px; background: var(--paper-2); text-align: center; }
.lab-empty .lab-empty-icon { width: 44px; height: 44px; color: var(--spark); }
.lab-empty h2 { margin: 4px 0 0; font: 400 1.75rem/1.2 var(--display); color: var(--ink); }
.lab-empty p { margin: 0 0 10px; max-width: 30rem; color: var(--ink-2); }
@media (max-width: 1100px) {
  .lab-sites-cols, .lab-sites .ll-lib-row { grid-template-columns: 28px minmax(0, 1fr) 88px minmax(0, 190px) 96px 40px; }
  .lab-sites-cols span:nth-child(4), .lab-site-what { display: none; }
  .lab-sites-cols span:nth-child(6) { text-align: right; }
}
/* Phones: name and address on the first line, status beside them, who can open underneath. */
@media (max-width: 760px) {
  .lab-sites .ll-lib-row { grid-template-columns: 24px minmax(0, 1fr) auto 44px; grid-template-areas: "icon main status more" "icon who who more"; row-gap: 6px; }
  .lab-sites .ll-lib-row > .ll-icon { grid-area: icon; align-self: start; margin-top: 2px; }
  .lab-sites .lab-site-main { grid-area: main; }
  .lab-sites .lab-site-status { grid-area: status; align-self: start; }
  .lab-sites .ll-lib-who { grid-area: who; grid-column: auto; grid-row: auto; }
  .lab-sites :is(.ll-more, .lab-more-gap) { grid-area: more; }
  .lab-sites .lab-site-what, .lab-sites .ll-lib-when { display: none; }
}

/* buttons in the bar */
.lab-help-btn { background: transparent; border-color: transparent; color: var(--muted); }
.lab-help-btn:hover { background: var(--paper); border-color: var(--edge); color: var(--ink); }

/* forms: the New site dialog and a site's settings */
.lab-new { width: min(36rem, calc(100vw - 32px)); }
.lab-new[open] { max-height: calc(100dvh - 32px); overflow-y: auto; }
.lab-form .ll-field > span:first-child { display: flex; align-items: baseline; gap: 8px; }
.lab-optional { font: 400 0.8125rem/1.3 var(--ui); color: var(--faint); }
.lab-form select, .lab-grant-add select { min-height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--edge); background: var(--paper); color: var(--ink); font: 0.9375rem/1 var(--ui); max-width: 100%; }
.lab-textarea { min-height: 0; padding: 10px 14px; font: 0.9375rem/1.5 var(--ui); resize: vertical; }
.lab-slug { display: flex; align-items: center; min-width: 0; border: 1px solid var(--edge); border-radius: 12px; background: var(--paper); }
.lab-slug:focus-within { outline: 2px solid var(--spark); outline-offset: 1px; border-color: transparent; }
.lab-slug .ll-input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 12px 0 0 12px; font-family: var(--mono); font-size: 0.9375rem; }
.lab-slug .ll-input:focus { outline: none; }
.lab-slug > span { flex: none; padding: 0 14px 0 2px; font: 0.9375rem/1 var(--mono); color: var(--muted); }
.lab-slug-state { margin: 0; font: 400 0.8125rem/1.4 var(--ui); color: var(--muted); }
.lab-slug-state.is-ok { color: var(--tip); }
.lab-slug-state.is-bad { color: var(--caution); }
.lab-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--paper-2); cursor: pointer; }
.lab-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--spark); cursor: pointer; }
.lab-check > span { display: grid; gap: 2px; min-width: 0; }
.lab-check b { font: 600 0.9375rem/1.35 var(--ui); color: var(--ink); }
.lab-check small { font: 0.8125rem/1.45 var(--ui); color: var(--muted); overflow-wrap: anywhere; }
.lab-check code, .lab-cmd { font: 0.8125rem/1.4 var(--mono); padding: 0.1em 0.4em; border-radius: 6px; background: var(--code-bg); border: 1px solid var(--rule-strong); color: var(--ink); overflow-wrap: anywhere; }
.ll-note.lab-tight { margin: -8px 0 0; }
.lab-cmd-box { margin: 14px 0; }
.lab-cmd-box code { white-space: normal; overflow-wrap: anywhere; }

/* one site's page */
.lab-site-head { align-items: flex-start; margin-bottom: 8px; }
.lab-site-title { flex: 1 1 24rem; min-width: 0; }
.lab-site-title .ll-title { margin: 0 0 10px; }
.lab-site-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.lab-site-line .lab-host-link { font-size: 0.9375rem; color: var(--accent); }
.lab-site-line .ll-btn-xs .ll-icon { width: 15px; height: 15px; }
.lab-host-dead { font: 0.9375rem/1.3 var(--mono); color: var(--muted); text-decoration: line-through; }
.lab-docs-link { display: inline-flex; align-items: center; gap: 6px; font: 0.875rem/1.3 var(--ui); color: var(--muted); text-decoration: none; }
.lab-docs-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lab-docs-link .ll-icon { width: 16px; height: 16px; }
.lab-site-head > .ll-btn { margin-top: 6px; }
.lab-section { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--rule); }
.lab-section:first-child { margin-top: 28px; }
.lab-lead { margin: -6px 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--warning-wash); color: var(--ink-2); font: 0.9375rem/1.45 var(--ui); }
.lab-sub { margin: 30px 0 6px; font: 500 0.6875rem/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.ll-drop.lab-drop { margin-top: 0; padding: 26px 20px; }
.lab-versions { list-style: none; margin: 0; padding: 0; }
.lab-version { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.lab-version:last-child { border-bottom: 0; }
.lab-version-main { display: grid; gap: 2px; min-width: 0; }
.lab-version-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-version-main span { font: 0.875rem/1.4 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.lab-grants { margin-bottom: 16px; }
.ll-share-list.lab-grants li.is-ending { background: var(--warning-wash); }
.lab-settings { display: grid; gap: 16px; max-width: 38rem; }
.lab-settings select { width: 100%; }
.lab-facts { display: grid; gap: 0; max-width: 38rem; margin: 32px 0 0; }
.lab-facts > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.lab-facts dt { font: 500 0.6875rem/1.9 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.lab-facts dd { margin: 0; font: 0.9375rem/1.55 var(--ui); color: var(--ink-2); overflow-wrap: anywhere; }
.lab-facts dd code { font: 0.8125rem/1.4 var(--mono); }
.lab-manage { max-width: 46rem; }
.lab-manage-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.lab-manage-row:last-child { border-bottom: 0; }
.lab-manage-row p { flex: 1 1 22rem; display: grid; gap: 2px; margin: 0; }
.lab-manage-row b { font-weight: 600; }
.lab-manage-row span { font: 0.9375rem/1.45 var(--ui); color: var(--muted); }
.lab-gone { max-width: 40rem; margin-top: 24px; color: var(--ink-2); }
.lab-guest-row > .ll-icon { color: var(--spark); }
.lab-guest-row .ll-row-size { color: var(--accent); font-weight: 600; }
@media (max-width: 640px) {
  .lab-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lab-version { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lab-version > :last-child { justify-self: start; }
}