/* 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 */
  --fr-bar-h: 44px;      /* the title bar (the Prototype's --tb-h) */
  --fr-status-h: 32px;   /* the status bar */
  --fr-fs: 1;            /* the text-size step (frame.mjs sets it on <html>): the sidebar column grows with it */
  --fr-rail-w: calc(clamp(232px, 19vw, 272px) * var(--fr-fs)); /* the open sidebar: narrower below 1280, where the Prototype folds it */
  --fr-page-max: 3600px; /* the widest a page grows: only a window wider than a 4K screen reaches it, and the page is then centred */
  --fr-row: 30px;        /* a project row, and a tinted task row, in the sidebar (the Prototype's rail heights) */
  --fr-row-plain: 26px;  /* a plain task row in the sidebar */
  --fr-nav-h: 36px;      /* the Home item at the top of the sidebar */
  --fr-badge-size: 20px; /* a count badge: a square-ended pill, 20 high */
  --fr-badge-fs: 13px;   /* the count inside a badge */
  --fr-drawer-h: 280px;  /* the terminal drawer; frame code sets it on <html> once the grip is used */
  --fr-term-head-h: 36px; /* the drawer's tab row */
  --fr-term-grip: 10px;  /* the grip's hit area, straddling the drawer's top edge */
  --fr-term-item-h: 28px; /* a row in the new-terminal menu */
  --fr-term-menu-w: 280px; /* the new-terminal menu's least width */
  --fr-term-menu-h: 240px; /* and its tallest, before it scrolls */
  --fr-term-tab-w: 180px; /* the widest a terminal tab's name grows */
}
/* The sidebar is 240px on a laptop window (1280 to 1599), so the page beside it keeps the width, and 272px from 1600 up, as the Prototype's column. */
@media (min-width: 1280px) {
  :root { --fr-rail-w: calc(240px * var(--fr-fs)); }
}
@media (min-width: 1600px) {
  :root { --fr-rail-w: calc(272px * var(--fr-fs)); }
}
/* The shared rules every page inherits (ui round 1). From 1900px the Prototype steps up the type scale only, plus the three
   frame sizes it names (title bar 48, status bar 38, sidebar 320); spacing, controls and icons stay at their 1440 size, so a
   4K screen gets more room and bigger text, not bigger boxes. Pages fill the width beside the sidebar and add columns; they
   never cap their own width below --fr-page-max. Running text keeps --measure. A page never sets these tokens itself. */
@media (min-width: 1900px) {
  :root {
    --t-page: 34px; --lh-page: 42px; --t-section: 26px; --lh-section: 34px; --t-title: 21px; --lh-title: 28px;
    --t-body: 18px; --lh-body: 28px; --t-meta: 16px; --lh-meta: 24px; --t-micro: 14px; --lh-micro: 20px; --t-chip: 16px; --lh-chip: 24px;
    --t-eyebrow: 16px; --lh-eyebrow: 24px; --t-data: 16px; --lh-data: 24px; --t-terminal: 16px; --lh-terminal: 24px;
    --t-stat: 34px; --lh-stat: 42px; --t-wordmark: 21px; --lh-wordmark: 28px;
    --fr-bar-h: 48px; --fr-status-h: 38px; --fr-rail-w: calc(320px * var(--fr-fs));
  }
}
[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(--fr-rail-w)) minmax(0, 1fr);
  grid-template-rows: var(--fr-bar-h) minmax(0, 1fr) var(--fr-status-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; }
b, strong { font-weight: var(--fw-title); } /* Plex ships 600 as its heaviest face, so a bare <b> asks for 600, not the browser's 700 */
: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-mount > * { max-width: var(--fr-page-max); margin-inline: auto; }
.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: calc(var(--fr-icon) * 1.1); height: calc(var(--fr-icon) * 1.1); }
.fr-logo:hover { background: var(--ob-hover); }
.fr-logo[aria-current="page"] { background: color-mix(in srgb, var(--ob-fg1) 6%, transparent); } /* on Home the mark is pressed in a soft wash, as the Prototype's */
.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); font-weight: var(--fw-title); 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: calc(var(--fr-ctl) - 2px); padding: 0 var(--space-6) 0 var(--space-10);
  background: var(--ob-panel); border: 1px solid var(--ob-line); border-radius: var(--radius-8);
  color: var(--ob-dim); 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: calc(var(--fr-glyph) * .875); height: calc(var(--fr-glyph) * .875); 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); font-weight: 500; padding: 1px 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); padding: 0 var(--space-6); border-radius: var(--radius-6); color: var(--ob-meta); }
/* The text stays quiet; only the glyph takes the state colour (the Prototype's count chips). */
.fr-agents > .fr-k-need .fr-gl { color: var(--ob-ask); }
.fr-agents > .fr-k-work .fr-gl { color: var(--ob-ok); }
.fr-agents > .fr-k-stuck .fr-gl { color: var(--ob-err); }
.fr-agents > .fr-k-review .fr-gl { color: var(--ob-vio); }
.fr-agents b { font-weight: inherit; }
.fr-agents > .fr-asep { padding: 0; color: var(--ob-dim); }
.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) 20%, var(--ob-panel)); border: 1px solid color-mix(in srgb, var(--ob-ok) 55%, var(--ob-line)); border-radius: var(--radius-8);
  color: var(--ob-fg1); font-size: var(--t-meta); font-weight: var(--fw-title); white-space: nowrap;
}
.fr-new:hover { background: color-mix(in srgb, var(--ob-ok) 32%, var(--ob-panel)); border-color: var(--ob-ok); }
.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; }
.fr-new[hidden] { display: none; }

/* ---- sidebar ---- */
.fr-rail { grid-area: rail; min-height: 0; display: flex; flex-direction: column; background: var(--fr-rail-bg); border-right: 1px solid var(--ob-line); padding: var(--space-8) var(--space-6) var(--space-8) var(--space-8); overflow: hidden; }
.fr-top { flex: none; padding: 0 0 var(--space-4); }
.fr-tree { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin-right: calc(var(--space-4) * -1); padding: var(--space-6) var(--space-4) var(--space-6) 0; }
.fr-foot { flex: none; display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-6) 0; 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(--fr-nav); }
@media (hover: hover) { .fr-i:hover { background: var(--ob-hover); color: var(--ob-fg1); } } /* a tap leaves no hover behind on a phone's bottom bar */
/* The fold button is not a disclosure that lights up: its state is told by the icon (the Prototype's fold button has no fill). */
.fr-i[aria-expanded="true"]:not([data-fold]) { background: var(--ob-accT); color: var(--ob-fg1); }/* The open page: a 12 percent accent fill, a 3px accent bar on the left edge, as the Prototype's rail. */
.fr-i[aria-current="page"] { background: color-mix(in srgb, var(--ob-acc) 12%, transparent); color: var(--ob-fg1); box-shadow: inset 3px 0 0 var(--ob-acc); }
.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-body); line-height: var(--lh-body); font-weight: 500; } /* every nav label is 500 in the Prototype (Home, Search, People, Onboarding, Settings, fold), between a task's 400 and a project's 600 */
.fr-top .fr-i { padding: 0 var(--space-8); min-height: var(--fr-nav-h); }
.fr-top .fr-t { width: var(--fr-icon); height: var(--fr-icon); }
.fr-top .fr-n { flex: 1; color: var(--ob-fg1); }
/* The open workspace heads the sidebar: a letter tile, its name, and "Switch" at the right while the sidebar is open. */
.fr-foot .fr-i { flex: none; justify-content: center; width: var(--fr-touch); 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(--fr-badge-size); height: var(--fr-badge-size); padding: 0 5px; border-radius: var(--radius-10); font-family: var(--font-mono); font-size: var(--fr-badge-fs); line-height: var(--fr-badge-size); font-weight: var(--fw-title); }
.fr-b[hidden] { display: none; }
.fr-b[data-tone="ask"] { background: var(--fr-badge); color: var(--fr-on-badge); }
.fr-b b { font-weight: inherit; }
/* The Inbox count is quiet: what is new to file is not a wait, so it is not amber (the Prototype's quiet badge). */
.fr-b[data-tone="quiet"] { background: var(--ob-raised); color: var(--ob-fg2); }

/* The tree: a project, then its tasks, always open. */
.fr-pj + .fr-pj { margin-top: var(--space-8); }
/* Projects with no tasks come last, after a plain gap (no label), muted; full strength on hover, focus or when selected. */
.fr-pj.fr-gap { margin-top: calc(var(--space-16) * 2 + var(--space-8)); }
/* One rule per effect, no override order: muted unless the project is hovered, focused or the open page. */
.fr-pj.fr-quiet:not(:hover):not(:focus-within) > .fr-pa:not([aria-current="page"]) { color: var(--ob-meta); }
.fr-pj.fr-quiet:not(:hover):not(:focus-within) > .fr-pa:not([aria-current="page"]) > .fr-chip,
.fr-pj.fr-quiet:not(:hover):not(:focus-within) > .fr-pa:not([aria-current="page"]) > .fr-unset { opacity: .5; }
.fr-pa { display: flex; align-items: center; gap: var(--space-8); min-height: var(--fr-row); padding: 0 var(--space-8); 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); }
/* The project's tile: filled with its colour, the letter in the page background, as the Prototype's project tile. */
.fr-chip { flex: none; display: grid; place-items: center; width: var(--fr-icon); height: var(--fr-icon); background: var(--c); border-radius: var(--radius-5); color: var(--ob-bg); font: var(--fw-title) var(--t-micro)/1 var(--font-sans); }
.fr-pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-body); line-height: var(--lh-body); 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-family: var(--font-mono); font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: var(--fw-title); }
/* A project whose setup has not started asks for it: an amber "Set up" pill in the open sidebar, a "!" on its tile when folded. */
.fr-unset { flex: none; height: var(--fr-badge-size); padding: 0 var(--space-8); border-radius: var(--radius-10); background: var(--fr-badge); color: var(--fr-on-badge); font-size: var(--t-micro); line-height: var(--fr-badge-size); font-weight: var(--fw-title); white-space: nowrap; }
.fr-bang { display: none; }
.fr-dot { display: none; flex: none; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round); background: currentColor; }
/* a neutral indent guide, not an accent; the task's glyph sits a small step in from the project's icon */
.fr-kids { margin: var(--space-2) 0 0 var(--space-8); padding-left: var(--space-2); border-left: 0; }
.fr-r, .fr-fd {
  display: flex; align-items: center; gap: var(--space-6); width: 100%; min-height: var(--fr-row-plain); padding: 0 var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-6); color: var(--ob-meta); font-size: var(--t-body); line-height: var(--lh-body); text-align: left;
}
/* The "N idle" fold: a little shorter than a task row, quiet text, no border box, as the Prototype's. */
.fr-fd { min-height: calc(var(--fr-ctl) * .8); padding-inline: var(--space-6); border: 0; color: var(--ob-dim); }
.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-r[aria-current="page"] b { font-weight: var(--fw-title); } /* the open task is bolder, as in the Prototype (it asks 700; Plex's heaviest face here is 600) */
.fr-id { flex: none; font-family: var(--font-mono); font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--ob-dim); }
.fr-tm { flex: none; font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 500; color: var(--ob-meta); }
.fr-fd span { flex: 1; }
.fr-cv { width: calc(var(--fr-glyph) * .75); height: calc(var(--fr-glyph) * .75); 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-ok); }
.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 { color: var(--ob-fg1); }
.fr-r.fr-k-idle { color: var(--ob-meta); }
.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-ok); }
.fr-r.fr-k-idle .fr-gl { color: var(--ob-dim); }
.fr-r:hover, .fr-r[aria-current="page"] { color: var(--ob-fg1); }
/* A row that waits on someone is a soft tint with no outline, as in the Prototype's rail; the outline shows only on hover. */
.fr-r.fr-tint { min-height: var(--fr-row); }
.fr-r.fr-tint.fr-k-stuck { background: var(--fr-stuck-row); }
.fr-r.fr-tint.fr-k-need { background: var(--fr-need-row); }
.fr-r.fr-tint.fr-k-review { background: var(--ob-vioT); }
.fr-r.fr-tint.fr-k-stuck:hover { border-color: var(--ob-errBd); }
.fr-r.fr-tint.fr-k-need:hover { border-color: var(--ob-askBd); }
.fr-r.fr-tint.fr-k-review:hover { border-color: color-mix(in srgb, var(--ob-vio) 45%, transparent); }
/* The page you are on carries an accent bar on its left edge. */
.fr-pa[aria-current="page"], .fr-r[aria-current="page"] { box-shadow: inset 3px 0 0 var(--c, var(--ob-acc)); }
.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-unset { display: none; }
html[data-rail="folded"] .fr-rail .fr-bang { display: grid; place-items: center; position: absolute; top: var(--space-2); right: var(--space-4); min-width: var(--space-12); height: var(--space-12); border-radius: var(--radius-round); background: var(--fr-badge); color: var(--fr-on-badge); font-family: var(--font-mono); font-size: var(--t-micro); line-height: 1; font-weight: var(--fw-title); }
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: center; justify-content: flex-start; }
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); }
/* Left: the connection dot and the context (scope, page, task); it takes the room the right side leaves. */
.fr-sbl { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-8); }
.fr-sbc { display: flex; align-items: center; gap: var(--space-6); min-width: 0; white-space: nowrap; }
.fr-sbc .fr-sep { color: var(--ob-dim); }
.fr-sbp { flex: none; display: inline-flex; min-width: 0; color: var(--ob-meta); }
.fr-sbp:last-child, .fr-sbp[aria-current] { color: var(--ob-fg1); }
a.fr-sbp:hover { color: var(--ob-acc); }
.fr-sbc .fr-sbp:has(.fr-sbt) { flex: 0 1 auto; overflow: hidden; }
.fr-sbt { overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.fr-acct { flex: none; display: flex; justify-content: flex-end; height: 100%; align-items: center; }
.fr-rshort, .fr-dp, .fr-more { display: none; }
.fr-acct:hover .fr-lv { color: var(--ob-fg1); }
.fr-devs, .fr-lics { display: inline-flex; align-items: center; min-width: 0; }
.fr-lic:hover { color: var(--ob-fg1); }
.fr-lic .fr-led { background: var(--ob-meta); }
.fr-lic.fr-lv-warn .fr-lt { color: var(--ob-ask); }
.fr-lic.fr-lv-err .fr-lt { color: var(--ob-err); }
.fr-ulic .fr-led { background: var(--ob-meta); }
.fr-ulic.fr-lv-warn .fr-led { background: var(--ob-ask); }
.fr-ulic.fr-lv-err .fr-led { background: var(--ob-err); }
.fr-dev:hover { color: var(--ob-fg1); }
.fr-dev-off .fr-led { background: var(--ob-err); }
.fr-dev-off .fr-dt { color: var(--ob-err); }
.fr-dev-out .fr-dt { color: var(--ob-ask); }
.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-16); 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[hidden] { display: none; }
.fr-themes, .fr-font { display: inline-flex; flex: none; align-items: center; gap: 1px; padding: var(--space-2); border: 1px solid var(--ob-line); border-radius: var(--radius-8); }
.fr-themes button { display: grid; place-items: center; width: calc(var(--fr-ctl) * 1.25); height: calc(var(--fr-status-h) - 8px); padding: 0 var(--space-4); border-radius: var(--radius-6); color: var(--ob-meta); line-height: 1; }
.fr-themes button:hover { color: var(--ob-fg1); background: var(--ob-hover); }
.fr-themes button[aria-pressed="true"] { color: var(--ob-acc); background: var(--ob-hover); box-shadow: inset 0 0 0 1px var(--ob-acc); }
.fr-themes 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 button { display: grid; place-items: center; width: calc(var(--fr-ctl) * 1.25); height: calc(var(--fr-status-h) - 8px); padding: 0 var(--space-4); border-radius: var(--radius-6); color: var(--ob-meta); line-height: 1; }
.fr-font button:hover:not(:disabled) { color: var(--ob-fg1); background: var(--ob-hover); }
.fr-font button:disabled { color: var(--ob-dim); opacity: .4; 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 { font-size: calc(var(--t-micro) + 1px); line-height: 1; color: var(--ob-dim); font-variant-numeric: tabular-nums; } /* the % reads in Sans, a step above the micro size, as the Prototype's */
.fr-usize .fr-font button { height: var(--fr-touch); min-width: var(--fr-touch); }

/* 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); }
/* The bars are straight pills: --radius-round is 999px. */
.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-uword { grid-column: span 2; color: var(--ob-meta); }
.fr-lv-warn .fr-uword { color: var(--ob-ask); }
.fr-lv-err .fr-uword { color: var(--ob-err); }
.fr-un { margin: 0; color: var(--ob-dim); }
.fr-usize, .fr-ulicw { display: none; }
.fr-usize .fr-font { width: max-content; }
.fr-usage form { margin-top: var(--space-14); }

/* ---- the agent usage dialog: header, spend and next account, then one card per account (limits left, seven days right, what runs now) ---- */
.fr-dialog.fr-usage { width: min(calc(var(--fr-find-w) * 1.75), calc(100vw - var(--space-16) * 2)); }
.fr-dialog.fr-usage p { margin: 0; }
.fr-uhead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4) var(--space-14); }
.fr-usage .fr-uhead h2 { margin: 0; }
.fr-ulinks { display: flex; flex-wrap: wrap; gap: var(--space-14); font-size: var(--t-meta); }
.fr-ulinks a { color: var(--ob-acc2); }
.fr-ut { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-12); min-width: 0; }
.fr-uas { color: var(--ob-meta); font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.fr-utop { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--fr-find-w) * .5), 1fr)); gap: var(--space-10); margin-top: var(--space-12); }
@media (min-width: 720px) { .fr-utop { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
/* Headings are an eyebrow: the name, and a count where there is one (r467). */
.fr-usage .fr-ucard h3, .fr-usage .fr-uah, .fr-urk { font-family: var(--font-mono); font-size: var(--t-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-eyebrow); text-transform: uppercase; color: var(--ob-meta); }
.fr-usage .fr-uah .fr-uan, .fr-urk b { letter-spacing: 0; color: var(--ob-fg1); }
.fr-uvs { font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: var(--fw-body); color: var(--ob-meta); }
.fr-ucard, .fr-ua { display: grid; align-content: start; gap: var(--space-8); padding: var(--space-12); background: var(--ob-panel); border: 1px solid var(--ob-line); border-radius: var(--radius-8); min-width: 0; }
.fr-usage .fr-ucard h3 { margin: 0; }
.fr-usage .fr-uah { margin-top: var(--space-14); }
.fr-uv { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-8); font-size: var(--t-stat); line-height: var(--lh-stat); letter-spacing: var(--ls-stat); font-weight: var(--fw-stat); color: var(--ob-fg1); overflow-wrap: anywhere; }
.fr-uv.fr-un { font-size: var(--t-body); line-height: var(--lh-body); font-weight: var(--fw-body); color: var(--ob-dim); }
.fr-us { font-size: var(--t-meta); color: var(--ob-meta); }
.fr-uplan, .fr-uag { font-size: var(--t-meta); line-height: var(--lh-meta); font-weight: var(--fw-meta); color: var(--ob-meta); }
.fr-uah { display: flex; align-items: baseline; gap: var(--space-8); }
.fr-uan { color: var(--ob-meta); font-weight: var(--fw-meta); }
.fr-uaccts { margin-bottom: 0; }
.fr-ua .fr-uh { flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.fr-usage .fr-ua h4.fr-uname { margin: 0; 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-uname a { color: inherit; text-decoration: none; }
.fr-uname a:hover { text-decoration: underline; text-underline-offset: var(--space-2); }
.fr-ua:hover { border-color: var(--ob-line2); }
.fr-utag { display: inline-flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-8); border: 1px solid var(--ob-line2); border-radius: var(--radius-round); font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--ob-meta); white-space: nowrap; }
.fr-utag-use { color: var(--ob-fg1); font-weight: var(--fw-title); }
.fr-utag-next { border-color: var(--ob-acc); background: color-mix(in srgb, var(--ob-acc) 14%, var(--ob-panel)); color: var(--ob-fg1); font-weight: var(--fw-title); }
.fr-udot { flex: none; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round); background: var(--ob-ok); }
.fr-ureset { margin-left: auto; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-6); padding: var(--space-2) var(--space-12); border: 1px solid var(--ob-line); border-radius: var(--radius-8); background: var(--ob-bg); color: var(--ob-fg1); font-size: var(--t-body); }
.fr-ureset b { font-size: var(--t-title); font-weight: var(--fw-title); font-variant-numeric: tabular-nums; }
.fr-urf { font-size: var(--t-meta); color: var(--ob-meta); }
.fr-ureset-none { background: none; color: var(--ob-meta); }
.fr-ubody { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--fr-find-w) * .5), 1fr)); gap: var(--space-14); }
.fr-ulim, .fr-uside { display: grid; align-content: start; gap: var(--space-8); min-width: 0; }
.fr-ulr { display: grid; gap: var(--space-4); font-size: var(--t-meta); }
.fr-ult { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-8); color: var(--ob-fg2); }
.fr-ulk { flex: 1 1 auto; min-width: 0; }
.fr-ult b { order: 2; color: var(--ob-fg1); font-weight: var(--fw-title); font-variant-numeric: tabular-nums; }
.fr-ult .fr-uwarn { order: 1; padding: 0 var(--space-8); border: 1px solid var(--ob-ask); border-radius: var(--radius-round); font-weight: var(--fw-title); color: var(--ob-fg1); white-space: nowrap; }
.fr-lv-err .fr-uwarn { border-color: var(--ob-err); }
.fr-ulr .fr-ur { order: 3; flex: 1 0 100%; white-space: normal; }
.fr-ulr .fr-uword { grid-column: auto; order: 2; }
/* The 7-day chart (r467): a plot with two labelled gridlines, rectangular bars (today in the accent, the rest tinted), day names under it. */
.fr-uchart { display: grid; align-content: start; gap: var(--space-6); margin: 0; }
.fr-uplot { position: relative; height: calc(var(--space-16) * 7); margin: calc(var(--space-10) * 2) 0 0 calc(var(--space-8) * 7); border-bottom: 1px solid var(--ob-meta); }
.fr-ugl { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px solid var(--ob-line); }
.fr-ugl span { position: absolute; right: calc(100% + var(--space-8)); top: 0; translate: 0 -50%; font-family: var(--font-mono); font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--ob-meta); font-style: normal; white-space: nowrap; }
.fr-ubars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-8); align-items: end; }
.fr-ud7 { display: flex; align-items: flex-end; justify-content: center; height: 100%; min-width: 0; }
.fr-ubar { position: relative; width: 100%; max-width: calc(var(--space-16) * 2 + var(--space-4)); height: var(--h); min-height: var(--space-2); border-radius: var(--radius-4) var(--radius-4) 0 0; background: color-mix(in srgb, var(--ob-acc) 50%, var(--ob-panel)); }
.fr-ud7-now .fr-ubar { background: var(--ob-acc); }
.fr-ud7-zero .fr-ubar { height: var(--space-2); border-radius: 0; background: var(--ob-line2); }
.fr-ubv { position: absolute; left: 50%; bottom: calc(100% + var(--space-2)); translate: -50% 0; font-family: var(--font-mono); font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: var(--fw-title); color: var(--ob-fg1); white-space: nowrap; }
.fr-uax { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-8); margin-left: calc(var(--space-8) * 7); text-align: center; }
.fr-ul7 { font-family: var(--font-mono); font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--ob-meta); }
.fr-ul7-now { color: var(--ob-fg1); font-weight: var(--fw-title); }
.fr-ucs { margin: 0 0 0 calc(var(--space-8) * 7); font-family: var(--font-mono); font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--ob-meta); }
.fr-uleft { display: grid; align-content: start; gap: var(--space-8); min-width: 0; }
.fr-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--ob-line); font-size: var(--t-meta); color: var(--ob-fg2); }
.fr-ust b { color: var(--ob-fg1); font-weight: var(--fw-title); }
.fr-urun { display: grid; gap: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--ob-line); font-size: var(--t-meta); }
.fr-urb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8) var(--space-12); }
.fr-uchips { display: flex; flex-wrap: wrap; gap: var(--space-6); min-width: 0; }
.fr-uchip { display: inline-flex; align-items: center; min-height: calc(var(--space-12) * 2); padding: 0 var(--space-8); border: 1px solid var(--ob-line); border-radius: var(--radius-round); font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--ob-fg2); text-decoration: none; }
.fr-uchip:hover { border-color: var(--ob-acc); color: var(--ob-fg1); }
.fr-uct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-ushow { margin-left: auto; padding: 0 var(--space-10); }
.fr-urows { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto auto; gap: var(--space-6) var(--space-12); margin: 0; padding: 0; list-style: none; }
.fr-urow { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; gap: var(--space-4) var(--space-12); }
.fr-urow > * { min-width: 0; overflow-wrap: anywhere; }
.fr-urt { color: var(--ob-fg1); }
.fr-urow > span { color: var(--ob-meta); }

/* ---- 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; }
/* ---- the notifications bell and its dialog ---- */
.fr-bell { flex: none; display: grid; place-items: center; width: var(--fr-ctl); height: var(--fr-ctl); border-radius: var(--radius-8); color: var(--ob-meta); }
.fr-bell:hover:not(:disabled) { color: var(--ob-fg1); background: var(--ob-hover); }
.fr-bell:disabled { color: var(--ob-dim); cursor: not-allowed; }
.fr-bell svg { width: var(--fr-icon); height: var(--fr-icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fr-notify { max-height: calc(100dvh - var(--space-16) * 2); overflow: auto; }
.fr-notify p { margin: 0; }
.fr-ncount { margin-left: var(--space-6); color: var(--ob-dim); font-weight: var(--fw-body); }
.fr-nlist { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.fr-nrow { display: grid; gap: var(--space-3); padding: var(--space-8) var(--space-10); border: 1px solid var(--ob-line); border-radius: var(--radius-8); background: var(--ob-panel); color: var(--ob-fg2); }
a.fr-nrow:hover { border-color: var(--ob-line2); background: var(--ob-hover); }
.fr-ntop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); }
.fr-ntop b { color: var(--ob-fg1); font-weight: var(--fw-title); }
.fr-nwhen { font-size: var(--t-meta); color: var(--ob-meta); }
.fr-ntitle { color: var(--ob-fg1); }
.fr-nbody { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--ob-fg3); }
.fr-nreach { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: var(--space-6) var(--space-10); border: 1px solid var(--ob-line); border-radius: var(--radius-8); }
.fr-nchips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-4); }
.fr-nchip { padding: 0 var(--space-6); border: 1px solid var(--ob-line); border-radius: var(--radius-6); font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--ob-meta); }
.fr-nchip.fr-nask { border-color: color-mix(in srgb, var(--ob-ask) 55%, var(--ob-line)); color: var(--ob-ask); }
.fr-nmore { display: inline-block; margin-top: var(--space-10); color: var(--ob-acc); font-size: var(--t-meta); }
.fr-nmore:hover { text-decoration: underline; }
/* ---- the dialog that shows a link the system browser did not open ---- */
.fr-extlink { display: block; padding: var(--space-8) var(--space-10); border: 1px solid var(--ob-line); border-radius: var(--radius-8); background: var(--ob-panel); color: var(--ob-fg1); font-size: var(--t-meta); line-height: var(--lh-meta); overflow-wrap: anywhere; user-select: all; }
.fr-bottom { display: none; }
.fr-sheet[hidden] { display: none; }

/* ---- the terminal: its button in the status bar, and the drawer of plain shells under the page (app/shell/drawer.mjs) ----
   The drawer is the theme's terminal well (--ob-term), so it follows the four themes. The sixteen palette colours below are what a
   shell's ANSI colours 0 to 15 look like; the other 240 colours and 24-bit colours are program data and are set inline. */
:root {
  --sh-c0: var(--ob-line); --sh-c1: var(--ob-err); --sh-c2: var(--ob-ok); --sh-c3: var(--ob-ask);
  --sh-c4: var(--ob-acc); --sh-c5: var(--ob-vio); --sh-c6: var(--ob-teal); --sh-c7: var(--ob-fg2);
  --sh-c8: var(--ob-meta);
  --sh-c9: color-mix(in srgb, var(--ob-err) 80%, var(--ob-fg1)); --sh-c10: color-mix(in srgb, var(--ob-ok) 80%, var(--ob-fg1));
  --sh-c11: color-mix(in srgb, var(--ob-ask) 80%, var(--ob-fg1)); --sh-c12: color-mix(in srgb, var(--ob-acc) 80%, var(--ob-fg1));
  --sh-c13: color-mix(in srgb, var(--ob-vio) 80%, var(--ob-fg1)); --sh-c14: color-mix(in srgb, var(--ob-teal) 80%, var(--ob-fg1));
  --sh-c15: var(--ob-fg1);
}
.fr-tbtn {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-6); height: calc(var(--fr-status-h) - 8px); padding: 0 var(--space-8);
  border-radius: var(--radius-6); color: var(--ob-meta); white-space: nowrap;
}
.fr-tbtn > span:first-child { font-family: var(--font-mono); }
.fr-tbtn kbd { padding: 0 var(--space-4); border: 1px solid var(--ob-line2); border-radius: var(--radius-4); font-family: var(--font-mono); font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--ob-dim); }
.fr-tbtn:hover:not(:disabled) { color: var(--ob-fg1); background: var(--ob-hover); }
.fr-tbtn[aria-pressed="true"] { color: var(--ob-acc); background: var(--ob-hover); box-shadow: inset 0 0 0 1px var(--ob-acc); }
.fr-tbtn:disabled { color: var(--ob-dim); opacity: .4; cursor: default; }
.fr-tdiv { flex: none; width: 1px; height: var(--fr-glyph); background: var(--ob-line2); }
@media (max-width: 999px) {
  .fr-tbtn kbd { display: none; }
}

.fr-term {
  grid-area: page; align-self: end; position: relative; z-index: 2; display: flex; flex-direction: column; min-width: 0;
  height: var(--fr-drawer-h); background: var(--ob-term); color: var(--ob-fg2); border-top: 1px solid var(--ob-line);
}
.fr-term[hidden] { display: none; }
.fr-term:not([hidden]) { animation: fr-term-up .2s ease-out; }
@keyframes fr-term-up { from { transform: translateY(100%); } }
.fr-term-grip { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--fr-term-grip) / -2); height: var(--fr-term-grip); cursor: ns-resize; touch-action: none; }
.fr-term-grip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--ob-acc); opacity: 0; }
.fr-term-grip:hover::after, .fr-term-grip:focus-visible::after, .fr-term-grip.is-drag::after { opacity: 1; }
.fr-term-grip:focus-visible { outline: none; }
.fr-term-head { flex: none; display: flex; align-items: stretch; height: var(--fr-term-head-h); border-bottom: 1px solid var(--ob-line); }
.fr-term-tabs { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; }
.fr-term-t { flex: none; display: flex; align-items: center; color: var(--ob-meta); }
.fr-term-t:hover { color: var(--ob-fg1); background: var(--ob-hover); }
.fr-term-t.is-active { color: var(--ob-fg1); background: var(--ob-hover); box-shadow: inset 0 -2px 0 var(--ob-acc); }
.fr-term-tab { display: flex; align-items: center; gap: var(--space-6); height: 100%; padding: 0 var(--space-4) 0 var(--space-12); font-family: var(--font-mono); font-size: var(--t-meta); line-height: var(--lh-meta); }
.fr-term-name { max-width: var(--fr-term-tab-w); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-term-t.is-ended .fr-term-name { color: var(--ob-dim); }
.fr-term-x, .fr-term-add, .fr-term-hide { display: grid; place-items: center; flex: none; color: var(--ob-meta); }
.fr-term-x { width: var(--fr-icon); height: var(--fr-icon); margin: 0 var(--space-6) 0 var(--space-2); border-radius: var(--radius-4); font-size: var(--t-micro); line-height: 1; }
.fr-term-add, .fr-term-hide { width: var(--fr-term-head-h); height: 100%; font-size: var(--t-body); line-height: 1; }
.fr-term-x:hover, .fr-term-add:hover:not(:disabled), .fr-term-hide:hover { color: var(--ob-fg1); background: var(--ob-hover); }
.fr-term-add[aria-expanded="true"] { color: var(--ob-acc); background: var(--ob-hover); }
.fr-term-add:disabled { color: var(--ob-dim); opacity: .4; cursor: default; }
.fr-term-spacer { flex: 1; }
.fr-term-addwrap { position: relative; flex: none; display: flex; align-items: stretch; }
.fr-term-menu {
  position: absolute; z-index: 3; top: 100%; left: 0; min-width: var(--fr-term-menu-w); overflow-y: auto; padding: var(--space-4);
  max-height: min(var(--fr-term-menu-h), calc(var(--fr-drawer-h) - var(--fr-term-head-h)));
  background: var(--ob-raised); border: 1px solid var(--ob-line); border-radius: var(--radius-8); box-shadow: var(--shadow-popover);
}
.fr-term-item {
  display: flex; align-items: center; gap: var(--space-8); width: 100%; height: var(--fr-term-item-h); padding: 0 var(--space-10);
  border-radius: var(--radius-6); font-family: var(--font-mono); font-size: var(--t-meta); line-height: var(--lh-meta); text-align: left; white-space: nowrap; color: var(--ob-fg2);
}
.fr-term-item:hover, .fr-term-item:focus-visible { color: var(--ob-fg1); background: var(--ob-hover); }
.fr-term-body { position: relative; flex: 1; min-height: 0; }
.fr-term-note {
  position: absolute; z-index: 1; left: var(--space-12); right: var(--space-12); bottom: var(--space-8); padding: var(--space-6) var(--space-10);
  background: var(--ob-raised); border: 1px solid var(--ob-errBd); border-radius: var(--radius-8); color: var(--ob-err); font-size: var(--t-meta); line-height: var(--lh-meta);
}
.fr-term-out {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; padding: var(--space-8) var(--space-12);
  font-family: var(--font-mono); font-size: var(--t-terminal); line-height: var(--lh-terminal); letter-spacing: var(--ls-terminal);
  font-variant-ligatures: none; color: var(--ob-fg2); outline: none;
}
.fr-term-probe { visibility: hidden; pointer-events: none; }
.fr-term-cell { display: block; width: max-content; white-space: pre; }
.fr-term-r { min-height: var(--lh-terminal); white-space: pre; }
.fr-term-in {
  position: absolute; width: 1px; height: var(--lh-terminal); margin: 0; padding: 0; border: 0; resize: none; overflow: hidden;
  opacity: 0; outline: none; pointer-events: none;
}
.sh-b { font-weight: var(--fw-title); }
.sh-d { opacity: .6; }
.sh-i { font-style: italic; }
.sh-u { text-decoration: underline; }
.sh-s { text-decoration: line-through; }
.sh-u.sh-s { text-decoration: underline line-through; }
/* The cursor is a hollow box while the terminal is not in focus and a solid block while it is. */
.sh-cur { outline: 1px solid var(--ob-fg1); outline-offset: -1px; }
.fr-term-out:focus-within .sh-cur { background: var(--ob-fg1) !important; color: var(--ob-term) !important; outline: none; }
@media (min-width: 720px) {
  body[data-term="open"] .fr-page { align-self: start; height: calc(100% - var(--fr-drawer-h)); }
}
@media (prefers-reduced-motion: reduce) {
  .fr-term:not([hidden]) { animation: none; }
}

/* ---- phone ---- */
@media (max-width: 719px) {
  body {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--fr-touch) minmax(0, 1fr) var(--fr-touch) 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 { display: none; }
  .fr-tr { order: 3; gap: var(--space-8); }
  /* The counts keep a small chip each; their words are for a screen reader here. */
  .fr-agents { gap: var(--space-6); }
  .fr-agents > span { padding: 0; }
  .fr-aw { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fr-crumb .fr-lead, .fr-crumb .fr-sep { display: none; }
  /* Submit new task is the green plus alone, as the Prototype's; its name stays for a screen reader. */
  .fr-new { position: relative; justify-content: center; width: var(--fr-touch); height: var(--fr-touch); padding: 0; }
  .fr-new-l { display: none; }
  .fr-new-s { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fr-logo { width: var(--fr-touch); height: var(--fr-touch); }
  .fr-status { gap: var(--space-4); padding: 0 var(--space-4) 0 var(--space-8); }
  /* The terminal is for a window with room; a phone's width gets neither the button nor the drawer. */
  .fr-term, .fr-tbtn, .fr-tdiv { display: none; }
  /* The bar keeps a dot for the connection (its word shows only when it is not connected), the devices that are offline or signed out as
     an icon and a count, the next reset, the theme and More; the text size and the accounts and devices in words live in the usage dialog. */
  .fr-status .fr-font { display: none; }
  .fr-usize, .fr-ulicw { display: block; }
  .fr-lics { display: none; }
  .fr-conn[data-state="connected"] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fr-conn { margin-right: var(--space-4); }
  .fr-devs { min-height: var(--fr-touch); }
  .fr-dev-on { display: none; }
  .fr-dev { gap: var(--space-8); }
  .fr-dev .fr-led, .fr-dt { display: none; }
  .fr-dp { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-mono); font-weight: var(--fw-title); }
  .fr-dp > span { display: inline-flex; align-items: center; gap: var(--space-2); }
  .fr-dp svg { width: var(--fr-glyph); height: var(--fr-glyph); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  /* The context line is the title bar's on a phone; the bar keeps the dot, the counts, the reset and the theme. */
  .fr-sbc { display: none; }
  .fr-sbl { flex: none; }
  .fr-acct { flex: 1; justify-content: flex-start; }
  .fr-themes { margin-left: auto; }
  .fr-acct .fr-lv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fr-lv-r b, .fr-lv-r .fr-fig, .fr-rfull { display: none; }
  .fr-rshort { display: inline; }
  .fr-lv-r .fr-pill { padding: 0 var(--space-6); }
  .fr-themes { border: 0; padding: 0; gap: 0; }
  .fr-themes button { width: 38px; height: var(--fr-touch); }
  .fr-more { display: grid; place-items: center; width: var(--fr-touch); height: var(--fr-touch); border-radius: var(--radius-8); color: var(--ob-meta); }
  .fr-more svg { width: var(--fr-icon); height: var(--fr-icon); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .fr-bottom { grid-area: bottom; display: grid; grid-template-columns: repeat(4, 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); }
  /* With the Projects sheet open only Projects is lit: Home keeps its colour but loses its fill and bar. */
  [data-sheet] .fr-bottom .fr-i:not(.fr-pbtn)[aria-current="page"] { background: none; box-shadow: none; }
  .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-chip { width: calc(var(--fr-icon) * 1.2); height: calc(var(--fr-icon) * 1.2); border-radius: var(--radius-6); font-size: var(--t-meta); }
  .fr-sheetbox .fr-id { min-width: calc(var(--fr-icon) * 1.6); }
  .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; }
}