/* The frame: title bar, sidebar (the E tree), status bar, phone bottom bar and sheet, and the page area.
   Colours, radii, shadows, spacing and type come from design-system/tokens.css only. Chrome sits on --ob-term (darkest at
   the back, D6), the page on --ob-bg. Pages style themselves (app/pages/<page>.css); nothing here reaches into them. */

/* Layout sizes the token file has no name for. Declared once here, each a token request in the step report. */
:root {
  --fr-fold: 64px;       /* the folded sidebar strip */
  --fr-bottom-h: 64px;   /* the phone bottom bar */
  --fr-touch: 44px;      /* the smallest hit target on a phone, and the sidebar foot buttons */
  --fr-ctl: 32px;        /* a control in the title bar and status bar */
  --fr-icon: 20px;       /* a line icon */
  --fr-glyph: 16px;      /* a task-state glyph and a small icon */
  --fr-find-w: 560px;    /* the search entry in the title bar, and the search dialog */
}
[data-ob-theme="light"] { color-scheme: light; }
[data-ob-theme="grid"], :root:not([data-ob-theme="light"]) { color-scheme: dark; }

* { box-sizing: border-box; }
html { background: var(--ob-bg); }
body {
  margin: 0; height: 100vh; height: 100dvh; overflow: hidden;
  display: grid; grid-template-columns: var(--fr-col, var(--rail-w)) minmax(0, 1fr);
  grid-template-rows: var(--menubar-h) minmax(0, 1fr) var(--statusbar-h);
  grid-template-areas: "title title" "rail page" "status status";
  background: var(--ob-bg); color: var(--ob-fg2);
  font: var(--fw-body) var(--t-body)/var(--lh-body) var(--font-sans);
}
html[data-rail="folded"] body { --fr-col: var(--fr-fold); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--ob-acc); outline-offset: -2px; border-radius: var(--radius-6); }
.fr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fr-mono { font-family: var(--font-mono); }
.fr-skip { position: absolute; left: var(--space-8); top: -100px; z-index: 50; padding: var(--space-8) var(--space-12); background: var(--ob-raised); color: var(--ob-fg1); border: 1px solid var(--ob-line2); border-radius: var(--radius-8); }
.fr-skip:focus { top: var(--space-8); }

/* ---- the page area ---- */
.fr-page { grid-area: page; min-width: 0; min-height: 0; overflow: auto; background: var(--ob-bg); outline: none; }
/* The router's container for one page (router.mjs): it takes no box, so a page lays out as if it were in <main> itself. */
.fr-mount { display: contents; }
.fr-placeholder, .fr-error { padding: var(--space-16); }
.fr-placeholder h1, .fr-error h1 { margin: 0 0 var(--space-8); font-size: var(--t-page); line-height: var(--lh-page); letter-spacing: var(--ls-page); font-weight: var(--fw-page); color: var(--ob-fg1); }
.fr-placeholder h1::first-letter, .fr-error h1::first-letter { text-transform: uppercase; }
.fr-placeholder p, .fr-error p { margin: 0 0 var(--space-12); color: var(--ob-fg3); }
.fr-retry, .fr-btn, .fr-note button {
  min-height: var(--fr-ctl); padding: 0 var(--space-14); border: 1px solid var(--ob-line2); border-radius: var(--radius-8);
  color: var(--ob-fg2); font-size: var(--t-meta);
}
.fr-retry:hover, .fr-btn:hover, .fr-note button:hover { border-color: var(--ob-acc); color: var(--ob-acc); }

/* ---- title bar ---- */
.fr-title {
  /* The search entry sits in the middle and gives way first: at 1024 it is narrower so the agents chip and Submit new task stay whole.
     The right column is never narrower than what it holds; the left (the crumb) and the middle share the rest 1 to 2. */
  grid-area: title; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(max-content, 1fr);
  align-items: center; gap: var(--space-12); padding: 0 var(--space-12);
  background: var(--ob-term); border-bottom: 1px solid var(--ob-line);
}
.fr-tl, .fr-tr { display: flex; align-items: center; gap: var(--space-10); min-width: 0; }
.fr-tr { justify-content: flex-end; }
.fr-logo { display: grid; place-items: center; width: var(--fr-ctl); height: var(--fr-ctl); border-radius: var(--radius-8); flex: none; }
.fr-logo svg { width: var(--fr-icon); height: var(--fr-icon); }
.fr-mark-g { fill: var(--ob-line2); }
.fr-mark-acc { fill: var(--ob-acc); }
.fr-crumb { display: flex; align-items: center; gap: var(--space-6); min-width: 0; font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--ob-meta); white-space: nowrap; }
.fr-crumb a:hover { color: var(--ob-acc); }
.fr-crumb .fr-sep { color: var(--ob-dim); }
.fr-crumb .fr-cur { color: var(--ob-fg1); overflow: hidden; text-overflow: ellipsis; }
.fr-find {
  display: flex; align-items: center; gap: var(--space-8); min-width: 0; width: 100%; max-width: var(--fr-find-w); justify-self: center; height: var(--fr-ctl); padding: 0 var(--space-10);
  background: var(--ob-bg); border: 1px solid var(--ob-line); border-radius: var(--radius-8);
  color: var(--ob-meta); font-size: var(--t-meta); text-align: left;
}
.fr-find:hover { border-color: var(--ob-line2); color: var(--ob-fg2); }
.fr-find svg { flex: none; width: var(--fr-glyph); height: var(--fr-glyph); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fr-find span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-find kbd { flex: none; font-family: var(--font-mono); font-size: var(--t-micro); line-height: var(--lh-micro); padding: 0 var(--space-6); border: 1px solid var(--ob-line); border-radius: var(--radius-5); color: var(--ob-dim); }
.fr-agents { display: flex; align-items: center; gap: var(--space-12); font-size: var(--t-meta); color: var(--ob-meta); white-space: nowrap; }
.fr-agents[hidden] { display: none; }
.fr-agents > span { display: inline-flex; align-items: center; gap: var(--space-6); }
.fr-agents:hover { color: var(--ob-fg1); }
/* The one green button: Submit new task. */
.fr-new {
  display: inline-flex; align-items: center; gap: var(--space-6); height: var(--fr-ctl); padding: 0 var(--space-12); flex: none;
  background: color-mix(in srgb, var(--ob-ok) 14%, var(--ob-panel)); border: 1px solid var(--ob-ok); border-radius: var(--radius-8);
  color: var(--ob-fg1); font-size: var(--t-meta); font-weight: var(--fw-title); box-shadow: var(--shadow-button); white-space: nowrap;
}
.fr-new:hover { background: color-mix(in srgb, var(--ob-ok) 24%, var(--ob-panel)); }
.fr-new[aria-current="page"] { background: color-mix(in srgb, var(--ob-ok) 30%, var(--ob-panel)); }
.fr-plus { width: var(--fr-glyph); height: var(--fr-glyph); fill: none; stroke: var(--ob-ok); stroke-width: 2.4; stroke-linecap: round; }
.fr-new-s { display: none; }

/* ---- sidebar ---- */
.fr-rail { grid-area: rail; min-height: 0; display: flex; flex-direction: column; background: var(--ob-term); border-right: 1px solid var(--ob-line); overflow: hidden; }
.fr-top { flex: none; padding: var(--space-8) var(--space-8) var(--space-4); }
.fr-tree { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--space-4) var(--space-8) var(--space-8); }
.fr-foot { flex: none; display: flex; gap: var(--space-2); padding: var(--space-6) var(--space-8); border-top: 1px solid var(--ob-line); }

/* Nav items: Home, the foot buttons, the phone bar. An icon (.fr-t) and a name (.fr-n). */
.fr-i { position: relative; display: flex; align-items: center; gap: var(--space-10); min-width: 0; border-radius: var(--radius-8); color: var(--ob-fg3); }
.fr-i:hover { background: var(--ob-hover); color: var(--ob-fg1); }
.fr-i[aria-current="page"], .fr-i[aria-expanded="true"] { background: var(--ob-accT); color: var(--ob-fg1); }
.fr-t { display: grid; place-items: center; flex: none; width: var(--fr-ctl); height: var(--fr-ctl); }
.fr-t svg { width: var(--fr-icon); height: var(--fr-icon); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fr-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-meta); line-height: var(--lh-meta); }
.fr-top .fr-i { padding-right: var(--space-8); }
.fr-top .fr-n { flex: 1; font-weight: var(--fw-title); color: var(--ob-fg1); }
.fr-foot .fr-i { flex: 1; justify-content: center; min-width: 0; height: var(--fr-touch); }
.fr-foot .fr-i .fr-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fr-foot .fr-t { width: 100%; height: 100%; }
/* The count beside Home: what waits on the person, red when something is stuck. */
.fr-b { flex: none; display: inline-grid; place-items: center; min-width: var(--space-16); height: var(--space-16); padding: 0 var(--space-6); border-radius: var(--radius-round); font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: var(--fw-title); }
.fr-b[hidden] { display: none; }
.fr-b[data-tone="ask"] { background: var(--ob-askBg); border: 1px solid var(--ob-askBd); color: var(--ob-ask); }
.fr-b[data-tone="err"] { background: var(--ob-errBg); border: 1px solid var(--ob-errBd); color: var(--ob-err); }
.fr-b b { font-weight: inherit; }

/* The tree: a project, then its tasks, always open. */
.fr-pj + .fr-pj { margin-top: var(--space-8); }
.fr-pa { display: flex; align-items: center; gap: var(--space-8); min-height: var(--fr-ctl); padding: 0 var(--space-6); border-radius: var(--radius-8); color: var(--ob-fg1); }
.fr-pa:hover { background: var(--ob-hover); }
.fr-pa[aria-current="page"] { background: var(--ob-accT); }
.fr-chip { flex: none; display: grid; place-items: center; width: var(--space-16); height: var(--space-16); border: 1px solid var(--c); border-radius: var(--radius-5); color: var(--c); font: var(--fw-title) var(--t-micro)/1 var(--font-mono); }
.fr-pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-meta); line-height: var(--lh-meta); font-weight: var(--fw-title); }
.fr-pips { display: flex; gap: var(--space-8); flex: none; }
.fr-pp { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: var(--fw-title); }
.fr-dot { display: none; flex: none; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round); background: currentColor; }
.fr-kids { margin: var(--space-2) 0 0 var(--space-12); padding-left: var(--space-4); border-left: 1px solid var(--ob-line); } /* a neutral indent guide, not an accent */
.fr-r, .fr-fd {
  display: flex; align-items: center; gap: var(--space-6); width: 100%; min-height: var(--fr-ctl); padding: 0 var(--space-6);
  border-radius: var(--radius-8); color: var(--ob-fg3); font-size: var(--t-meta); line-height: var(--lh-meta); text-align: left;
}
.fr-r:hover, .fr-fd:hover { background: var(--ob-hover); color: var(--ob-fg1); }
.fr-r[aria-current="page"] { background: var(--ob-accT); color: var(--ob-fg1); }
.fr-r b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-body); }
.fr-id { flex: none; font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ob-meta); }
.fr-tm { flex: none; font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ob-meta); }
.fr-fd span { flex: 1; }
.fr-cv { width: var(--fr-glyph); height: var(--fr-glyph); fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .15s; }
.fr-fd[aria-expanded="true"] .fr-cv { transform: rotate(180deg); }
.fr-gl { flex: none; width: var(--fr-glyph); height: var(--fr-glyph); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fr-k-stuck { color: var(--ob-err); }
.fr-k-need { color: var(--ob-ask); }
.fr-k-review { color: var(--ob-vio); }
.fr-k-work { color: var(--ob-acc); }
.fr-k-idle { color: var(--ob-dim); }
/* Each row keeps its text colour; only the glyph and the age take the state colour. */
.fr-r .fr-gl { color: inherit; }
.fr-r.fr-k-stuck, .fr-r.fr-k-need, .fr-r.fr-k-review, .fr-r.fr-k-work, .fr-r.fr-k-idle { color: var(--ob-fg3); }
.fr-r.fr-k-stuck .fr-gl, .fr-r.fr-k-stuck .fr-tm { color: var(--ob-err); }
.fr-r.fr-k-need .fr-gl, .fr-r.fr-k-need .fr-tm { color: var(--ob-ask); }
.fr-r.fr-k-review .fr-gl, .fr-r.fr-k-review .fr-tm { color: var(--ob-vio); }
.fr-r.fr-k-work .fr-gl { color: var(--ob-acc); }
.fr-r.fr-k-idle .fr-gl { color: var(--ob-dim); }
.fr-r:hover, .fr-r[aria-current="page"] { color: var(--ob-fg1); }
.fr-fd .fr-gl { color: var(--ob-dim); }
.fr-note { padding: var(--space-8) var(--space-6); font-size: var(--t-meta); color: var(--ob-meta); display: grid; gap: var(--space-8); justify-items: start; }
.fr-skel { display: grid; gap: var(--space-8); padding: var(--space-8) var(--space-6); }
.fr-skel i { display: block; height: var(--space-12); border-radius: var(--radius-5); background: var(--ob-panel); }
.fr-skel i:nth-child(2) { width: 70%; }
.fr-skel i:nth-child(3) { width: 85%; }

/* Folded: a strip of icons; projects shrink to their chip, with a dot when something needs a look. */
html[data-rail="folded"] .fr-rail .fr-n,
html[data-rail="folded"] .fr-rail .fr-pn,
html[data-rail="folded"] .fr-rail .fr-pips,
html[data-rail="folded"] .fr-rail .fr-kids { display: none; }
html[data-rail="folded"] .fr-rail .fr-top .fr-i { justify-content: center; padding: 0; }
html[data-rail="folded"] .fr-rail .fr-pa { position: relative; justify-content: center; padding: 0; }
html[data-rail="folded"] .fr-rail .fr-dot { display: block; position: absolute; top: var(--space-4); right: var(--space-6); }
html[data-rail="folded"] .fr-rail .fr-foot { flex-direction: column; align-items: stretch; }
html[data-rail="folded"] .fr-rail .fr-b { position: absolute; top: var(--space-2); right: var(--space-2); min-width: var(--space-12); height: var(--space-12); padding: 0 var(--space-2); }
html[data-rail="folded"] .fr-rail [data-fold] .fr-t svg { transform: scaleX(-1); }

/* ---- status bar ---- */
.fr-status {
  grid-area: status; z-index: 3; display: flex; align-items: center; gap: var(--space-14); padding: 0 var(--space-12);
  background: var(--ob-term); border-top: 1px solid var(--ob-line); font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--ob-meta); min-width: 0;
}
.fr-conn { display: inline-flex; align-items: center; gap: var(--space-6); white-space: nowrap; }
.fr-led { display: block; flex: none; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round); background: var(--ob-dim); }
.fr-conn[data-state="connected"] .fr-led { background: var(--ob-ok); }
.fr-conn[data-state="reconnecting"] .fr-led { background: var(--ob-ask); }
.fr-conn[data-state="offline"] .fr-led { background: var(--ob-err); }
.fr-conn[data-state="offline"] { color: var(--ob-err); }
.fr-acct { flex: 1; min-width: 0; display: flex; justify-content: flex-end; height: 100%; align-items: center; }
.fr-acct[hidden] { display: none; }
.fr-acct:hover .fr-lv { color: var(--ob-fg1); }
.fr-devs { display: inline-flex; align-items: center; min-width: 0; }
.fr-dev:hover { color: var(--ob-fg1); }
.fr-dev-off .fr-led { background: var(--ob-err); }
.fr-dev-out .fr-led { background: var(--ob-ask); }
.fr-dev-on .fr-led { background: var(--ob-ok); }
.fr-lv { display: inline-flex; align-items: center; gap: var(--space-8); min-width: 0; white-space: nowrap; }
.fr-lv b { color: var(--ob-fg1); font-weight: var(--fw-title); }
.fr-lv-ok .fr-led { background: var(--ob-ok); }
.fr-lv-warn .fr-led { background: var(--ob-ask); }
.fr-lv-err .fr-led { background: var(--ob-err); }
.fr-lv-none { color: var(--ob-dim); }
.fr-pill { padding: 0 var(--space-8); border: 1px solid var(--ob-line2); border-radius: var(--radius-round); color: var(--ob-fg3); }
.fr-lv-warn .fr-pill { border-color: var(--ob-askBd); color: var(--ob-ask); }
.fr-lv-err .fr-pill { border-color: var(--ob-errBd); color: var(--ob-err); }
/* The theme (all four, or the system's) and the text size. The text-size buttons are A with a minus, the %, A with a plus. */
.fr-theme {
  flex: none; height: calc(var(--statusbar-h) - var(--space-4)); padding: 0 var(--space-6); background: var(--ob-bg); color: var(--ob-fg3);
  border: 1px solid var(--ob-line); border-radius: var(--radius-8); font: inherit; cursor: pointer; color-scheme: inherit;
}
.fr-theme:hover { border-color: var(--ob-line2); color: var(--ob-fg1); }
.fr-font { display: inline-flex; flex: none; border: 1px solid var(--ob-line); border-radius: var(--radius-8); overflow: hidden; }
.fr-font button { display: grid; place-items: center; min-width: var(--fr-ctl); height: calc(var(--statusbar-h) - var(--space-4)); color: var(--ob-meta); }
.fr-font button:hover:not(:disabled) { color: var(--ob-fg1); background: var(--ob-hover); }
.fr-font button:disabled { color: var(--ob-dim); cursor: default; }
.fr-font svg { width: var(--fr-glyph); height: var(--fr-glyph); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fr-font .fr-fv { padding: 0 var(--space-6); font-family: var(--font-mono); font-size: var(--t-micro); line-height: var(--lh-micro); font-variant-numeric: tabular-nums; }

/* The hover card beside the sidebar: a task's words, or a project's counts. */
.fr-tip {
  position: fixed; z-index: 42; width: max-content; max-width: var(--fr-find-w); padding: var(--space-8) var(--space-10); pointer-events: none;
  background: var(--ob-raised); color: var(--ob-fg3); border: 1px solid var(--ob-line2); border-radius: var(--radius-10); box-shadow: var(--shadow-popover);
  font-size: var(--t-meta); line-height: var(--lh-meta);
}
.fr-tip[hidden] { display: none; }
.fr-tip b { display: block; font-weight: var(--fw-title); color: var(--ob-fg1); overflow-wrap: anywhere; }
.fr-tip span { display: block; overflow-wrap: anywhere; }
.fr-tip .fr-tk { display: flex; align-items: center; gap: var(--space-6); }

/* The usage dialog's lists. */
.fr-dialog h3 { margin: var(--space-14) 0 var(--space-6); font-size: var(--t-meta); line-height: var(--lh-meta); font-weight: var(--fw-title); color: var(--ob-fg3); }
.fr-usage { max-height: calc(100dvh - var(--space-16) * 2); overflow: auto; }
.fr-ul { display: grid; gap: var(--space-8); margin: 0 0 var(--space-6); }
.fr-ua, .fr-ud { display: grid; gap: var(--space-4); }
.fr-uh { display: flex; align-items: baseline; gap: var(--space-8); }
.fr-uh b, .fr-ud b { color: var(--ob-fg1); font-weight: var(--fw-title); }
.fr-uh span { color: var(--ob-meta); }
.fr-ud { display: flex; align-items: center; gap: var(--space-8); }
.fr-ud span { color: var(--ob-meta); }
.fr-uw { display: grid; grid-template-columns: var(--fr-ctl) minmax(0, 1fr) var(--fr-ctl) auto; align-items: center; gap: var(--space-8); font-size: var(--t-meta); }
.fr-bar { display: block; height: var(--space-8); background: var(--ob-line); border-radius: var(--radius-round); overflow: hidden; }
.fr-bar i { display: block; width: var(--w); height: 100%; background: var(--ob-ok); border-radius: var(--radius-round); }
.fr-lv-warn .fr-bar i { background: var(--ob-ask); }
.fr-lv-err .fr-bar i { background: var(--ob-err); }
.fr-ur { color: var(--ob-meta); white-space: nowrap; }
.fr-un { margin: 0; color: var(--ob-dim); }
.fr-usize { display: none; }
.fr-usize .fr-font { width: max-content; }
.fr-usage form { margin-top: var(--space-14); }

/* ---- search dialog (a placeholder until the search page lands) and the phone sheet ---- */
.fr-dialog { width: min(var(--fr-find-w), calc(100vw - var(--space-16) * 2)); padding: var(--space-16); background: var(--ob-raised); color: var(--ob-fg2); border: 1px solid var(--ob-line); border-radius: var(--radius-12); box-shadow: var(--shadow-modal); }
.fr-dialog::backdrop { background: color-mix(in srgb, var(--ob-term) 72%, transparent); }
.fr-dialog h2 { margin: 0 0 var(--space-8); font-size: var(--t-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); font-weight: var(--fw-title); color: var(--ob-fg1); }
.fr-dialog p { margin: 0 0 var(--space-14); color: var(--ob-fg3); }
.fr-dialog form { display: flex; justify-content: flex-end; }
.fr-bottom { display: none; }
.fr-sheet[hidden] { display: none; }

/* ---- phone ---- */
@media (max-width: 719px) {
  body {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--fr-touch) minmax(0, 1fr) var(--fr-ctl) var(--fr-bottom-h);
    grid-template-areas: "title" "page" "status" "bottom";
  }
  html[data-rail="folded"] body { --fr-col: 1fr; }
  .fr-rail { display: none; }
  .fr-title { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-8); padding: 0 var(--space-8); }
  .fr-title .fr-find { order: 2; width: var(--fr-touch); height: var(--fr-touch); padding: 0; justify-content: center; border: 0; background: none; }
  .fr-find span, .fr-find kbd, .fr-agents { display: none; }
  .fr-tr { order: 3; }
  .fr-crumb .fr-lead, .fr-crumb .fr-sep { display: none; }
  .fr-new { height: var(--fr-touch); padding: 0 var(--space-12); }
  .fr-new-l { display: none; }
  .fr-new-s { display: inline; }
  .fr-logo { width: var(--fr-touch); height: var(--fr-touch); }
  .fr-status { gap: var(--space-8); padding: 0 var(--space-8); }
  /* The bar keeps the connection, the account chip and the theme; the devices and the text size live in the usage dialog. */
  .fr-status .fr-devs, .fr-status .fr-font { display: none; }
  .fr-usize { display: block; }
  .fr-acct .fr-lv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fr-bottom { grid-area: bottom; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--ob-term); border-top: 1px solid var(--ob-line); z-index: 3; padding-bottom: env(safe-area-inset-bottom); }
  .fr-bottom .fr-i { flex-direction: column; justify-content: center; gap: var(--space-2); border-radius: 0; min-height: var(--fr-touch); }
  .fr-bottom .fr-t { height: var(--fr-icon); }
  .fr-bottom .fr-n { font-size: var(--t-micro); line-height: var(--lh-micro); }
  .fr-bottom .fr-b { position: absolute; top: var(--space-6); left: 50%; margin-left: var(--space-4); }
  .fr-sheet:not([hidden]) { position: fixed; inset: var(--fr-touch) 0 calc(var(--fr-bottom-h) + env(safe-area-inset-bottom)) 0; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end; }
  .fr-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ob-term) 72%, transparent); }
  .fr-sheetbox { position: relative; display: flex; flex-direction: column; max-height: 100%; background: var(--ob-term); border: 1px solid var(--ob-line); border-bottom: 0; border-radius: var(--radius-16) var(--radius-16) 0 0; box-shadow: var(--shadow-popover); }
  .fr-sheetbox .fr-tree { padding: var(--space-8) var(--space-12); }
  .fr-sheetbox .fr-r, .fr-sheetbox .fr-fd, .fr-sheetbox .fr-pa { min-height: var(--fr-touch); }
  .fr-links { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ob-line); }
  .fr-links .fr-i { flex-direction: column; justify-content: center; gap: var(--space-2); min-height: var(--fr-touch); border-radius: 0; }
  .fr-links .fr-n { font-size: var(--t-micro); line-height: var(--lh-micro); }
}
@media (min-width: 720px) {
  .fr-sheet { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}