/* The site's own layout glue: the top bar, the page frames, and what keeps the
   old kit's views working on abso's tokens. The look is Design's: abso.css and
   tokens.css (from design/abso/tokens.json). The top bar follows the Main board,
   under an ab- name so Design can fold it into the system. Tokens only. */

/* The hidden attribute wins over a component's display (components.css sets .rec to inline-block). */
[hidden] { display: none !important; }
code, pre, kbd, samp { font-family: var(--font-mono); }

/* ---------- the top bar: the mark and abso, the project, its tabs, and who's signed in ---------- */
.ab-top { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 20px; min-height: 48px; padding: 0 var(--space-4); background: var(--surface); border-bottom: 1px solid var(--rule); }
.ab-top-home { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ab-brand { display: flex; align-items: center; gap: 5px; font-size: 17px; line-height: 20px; font-weight: 750; letter-spacing: -0.03em; }
.ab-brand:hover { text-decoration: none; }
.ab-top-home .sep { color: var(--faint); font-size: 15px; }
.ab-top-project { font-size: 14px; font-weight: 650; }
.ab-top-tabs { display: flex; flex-wrap: wrap; align-items: stretch; }
.ab-top-tabs a { display: flex; align-items: center; padding: 0 10px; color: var(--muted); font-weight: 550; }
.ab-top-tabs a:hover { color: var(--ink); text-decoration: none; }
.ab-top-tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.ab-top-user { display: flex; align-items: center; margin-left: auto; color: var(--muted); }
/* On a phone the tabs take their own row under the project, scrolling sideways rather than wrapping. */
@media (max-width: 720px) {
  .ab-top { padding-top: 6px; }
  .ab-top-tabs { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--space-4)); padding: 0 6px; }
  .ab-top-tabs a { min-height: 40px; white-space: nowrap; }
}

/* No slot (src/look/agents.ts, NO_SLOT): a name that isn't one of the project's agents (init, git), or any name when
   the join order is unknown. The plain faint mark, never a guessed hue (Design, step 1 review). */
:root { --agent-0: var(--faint); --on-agent-0: var(--paper); }
.agent-0 { --c: var(--faint); --on: var(--paper); --ct: var(--paper); }

/* ---------- the frames a page sits in (definePage's `frame`) ---------- */
/* page: the content on the page's measure, as the folder pages have it */
.ab-page { width: 100%; max-width: var(--measure); margin: 0 auto; padding: var(--space-6) var(--space-4) 48px; box-sizing: border-box; }
/* full: the regions fill the window under the top bar (a file: the tree, the code, the side panel) */
.ab-app.is-full { display: flex; flex-direction: column; min-height: 100vh; }
.ab-full { flex: 1; min-height: 0; display: flex; }
@media (min-width: 900px) {
  .ab-app.is-full { height: 100vh; min-height: 640px; overflow: hidden; }
}

/* ---------- the old kit's views, until each is redesigned ---------- */
/* card: the old views' frame, on the measure, in body type */
main.page { padding-top: var(--space-6); padding-bottom: var(--space-8); }
.card { font-size: 15px; line-height: 1.55; }
.card > header h1 { font-size: 18px; line-height: 24px; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
/* a link in prose: ink at 550 with a rule-strong underline (abso's README, "Space and shape") */
.card .human :is(p, li, dd) a:not([class]) { font-weight: 550; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
/* The old kit's names for what abso has, so its rules keep working. */
:root {
  --font: var(--font-sans);
  --text-xs: 12px; --text-s: 13px; --text-m: 15px; --text-l: 18px; --text-xl: 26px; --text-2xl: clamp(30px, 5vw, 52px);
  --leading: 1.55;
  --pulse: 1.2s;
  --stripe: 1s;
}
.ab-top-tabs .ab-top-count { margin-left: 6px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font: 600 11px/16px var(--font-mono); }