* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.45 var(--font);
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.012em; }
h2 { font-size: var(--fs-md); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The content region is focused programmatically on navigation, not an interactive control.
   Its focus ring painted a blue square around every page; keyboard users still get the
   visible ring on the controls themselves and the skip link moves focus to this region. */
.page-body:focus,
.page-body:focus-visible { outline: none; }
::selection { background: var(--selection); }
/* `!important` on purpose: a reader who asks for less motion gets none, whatever a component sets. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Text never breaks a layout: single-line labels clip with an ellipsis, long words wrap. */
.ellipsis, .nav a > span:last-child, .user-row .who div, .card-head h2, .table td, .list-item > .grow > *, .plan-unit-title, .plan-unit .meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p, dd { overflow-wrap: anywhere; }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.stack.lg { gap: var(--gap); }
.grow { flex: 1; min-width: 0; }

/* Scroll areas: content scrolls, chrome stays. Scrollbars stay thin and inside their panes. */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: var(--pill); border: 2px solid transparent; background-clip: padding-box; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Shell: one spacing unit (--gap) between every block, on every side ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); gap: var(--gap); height: 100vh; height: 100dvh; padding: var(--gap); }

.sidebar {
  /* One column as wide as the sidebar: a long name (an e-mail in the foot) is cut with an ellipsis
     instead of widening the column past the sidebar's edge. */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0;
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-raised); overflow: hidden;
}
.sidebar-top { padding: var(--pad); display: flex; flex-direction: column; gap: var(--gap); border-bottom: 1px solid var(--line); }
.sidebar-nav { overflow-y: auto; padding: var(--space-1) var(--pad) var(--pad); }
.sidebar-foot { padding: var(--pad); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--gap); }
.sidebar .select { height: 36px; border-radius: var(--pill); }

.brand { display: flex; align-items: center; gap: var(--space-3); }
/* The product's name as drawn in docs/logos/1.png, in its own colour on the light surface. */
.brand-name { display: block; flex: none; width: 110px; height: auto; }
/* In the sidebar the S starts where the text of the property switcher below starts: the control's
   inner padding plus its 1px border. */
.sidebar .brand-name { margin-left: calc(var(--space-5) + 1px); }

.nav { display: flex; flex-direction: column; gap: var(--space-0); }
/* A menu entry, a link or a group header alike. */
.nav a, .nav-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 34px;
  padding: 0 var(--space-4);
  border-radius: var(--pill);
  color: var(--ink-2);
  font-weight: 500;
  font-size: var(--fs-base);
  white-space: nowrap;
  transition: background var(--fast), color var(--fast);
}
.nav a { text-decoration: none; }
.nav a svg, .nav-group svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.nav a:hover, .nav-group:hover { background: var(--surface-hover); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--midnight); color: var(--ink-inverse); box-shadow: var(--shadow-ink-soft); }
.nav a[aria-current="page"] svg { color: var(--ink-inverse); }

.user-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.user-row .avatar { width: 32px; height: 32px; }
.user-row .who { flex: 1; min-width: 0; }
.user-row .who .meta { font-size: var(--fs-2xs); }
.sidebar-foot .segmented { width: 100%; }
.sidebar-foot .segmented button { flex: 1; justify-content: center; }

.page { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
/* Each in its own row: with no status shown the body would otherwise fall into the auto row, grow
   with its content instead of scrolling, and stop short of the sidebar's end. The space between
   them is margin, so a hidden status adds none. */
.page > .page-head { grid-row: 1; margin-bottom: var(--gap); } .page > .page-status { grid-row: 2; } .page > .page-body { grid-row: 3; }
.page > .page-status:not(:empty) { margin-bottom: var(--gap); }
/* The top bar is one row, always (the owner's word, 04/11/2026: never two), and never cuts what it
   holds: its views and tabs keep their width; when the row does not hold everything, the shell
   makes it tight (app.js fitHead): the search folds to its lens, the secondary buttons to their
   icon, the views close up. A cut control is unreachable: overflowing a right-aligned row hides its start. */
.page-head {
  display: flex; align-items: center; gap: var(--gap); height: var(--header); padding: 0 var(--pad);
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-resting); min-width: 0;
}
.page-head h1 { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; flex: none; padding-right: var(--space-1); }
.page-head .tools {
  display: flex;
  align-items: center;
  justify-content: safe flex-end;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
}
.page-head .segmented, .page-head .tabs { flex: none; max-width: none; overflow: visible; }
.page-head.tight { gap: var(--space-3); }
.page-head.tight .segmented button, .page-head.tight .tabs button { padding: 0 var(--space-3); }
.page-head.tight .search { flex: none; width: 40px; min-width: 40px; transition: width var(--med); }
.page-head.tight .search .input { padding-right: 0; }
.page-head.tight .search:not(:focus-within) .input::placeholder { color: transparent; }
.page-head.tight .search:focus-within { width: 240px; }
.page-head.tight .btn:not(.primary) .btn-label { display: none; }
.page-head.tight .btn:not(.primary):has(.btn-label) { padding: 0 var(--space-3); }
.page-head .actions { display: flex; align-items: center; gap: var(--space-3); flex: none; margin-left: auto; }
.page-head .tools:not(:empty) + .actions:not(:empty) { margin-left: 0; padding-left: var(--space-3); border-left: 1px solid var(--midnight-line); }
/* The scroll area gives shadows a few pixels to breathe without moving the grid. */
.page-body { overflow-y: auto; min-height: 0; margin: -6px; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
/* A card on the page keeps its full height (a flex column would shrink one that clips its overflow,
   cutting a long table off): the page scrolls, not the card. */
.page-body > .card, .page-body > .stack > .card { flex-shrink: 0; }

/* Sub-places of the open section, indented under it. */
.nav-children {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  margin: var(--space-0) 0 var(--space-2) var(--space-5);
  padding-left: var(--space-3);
  border-left: 1px solid var(--line);
}
.nav a.child { height: 30px; font-size: var(--fs-base); }

/* Only for keyboard and screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed;
  left: var(--gap);
  top: -60px;
  z-index: 100;
  height: 36px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--pill);
  background: var(--midnight);
  color: var(--ink-inverse);
  font-weight: 600;
}
.skip:focus { top: var(--gap); }
.fatal { padding: var(--space-7); }

.nav-toggle, .nav-scrim, .brand .btn { display: none; }

/* Phones and small tablets: the sidebar becomes a drawer opened by the button beside the title,
   and the header puts its tools and actions on lines of their own, wrapped: the title is whole and
   no button scrolls out of sight. */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; padding: var(--gap) var(--gap) calc(var(--gap) + env(safe-area-inset-bottom)); }
  .sidebar {
    position: fixed;
    inset: var(--gap) auto var(--gap) var(--gap);
    height: auto;
    width: min(300px, calc(100vw - 48px));
    z-index: 60;
    transform: translateX(-120%);
    transition: transform var(--med);
    visibility: hidden;
  }
  .shell.nav-open .sidebar { transform: none; visibility: visible; }
  .shell.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--overlay); }
  .brand .btn { display: inline-flex; margin-left: auto; }
  .page { grid-template-rows: auto auto minmax(0, 1fr); }
  .page-head { flex-wrap: wrap; height: auto; min-height: var(--header); padding: var(--space-3) var(--gap); row-gap: var(--space-3); }
  .page-head h1 { flex: 1; min-width: 0; }
  .page-head .tools { order: 3; flex: 1 0 100%; justify-content: flex-start; margin-left: 0; flex-wrap: wrap; overflow-x: visible; }
  .page-head .actions { order: 4; flex: 1 0 100%; flex-wrap: wrap; margin-left: 0; }
  .page-head .actions:empty { display: none; }
  .page-head .tools:empty { display: none; }
  .page-head .tools:not(:empty) + .actions:not(:empty) { padding-left: 0; border-left: 0; }
  .page-head .search { flex: 1 0 180px; }

  .nav-toggle {
    display: inline-grid; place-items: center; flex: none; width: var(--control-bar); height: var(--control-bar);
    border: 1px solid var(--midnight-line); border-radius: var(--pill); background: var(--midnight-raised); color: var(--ink-inverse); cursor: pointer;
  }
  .nav-toggle:hover { background: var(--midnight-hover); }
  .nav-toggle svg { width: 18px; height: 18px; }
}



/* A group heading opens and closes its places; it is not a place itself. */
.nav-group { width: 100%; border: 0; background: none; font: inherit; font-weight: 500; font-size: var(--fs-base); cursor: pointer; text-align: left; }
.nav-group.active { color: var(--ink); font-weight: 600; }
.nav-group .chevron { display: contents; }
.nav-group .chevron svg { width: 14px; transition: transform var(--fast); }
.nav-group[aria-expanded="true"] .chevron svg { transform: rotate(90deg); }
.nav-children[hidden] { display: none; }
/* Hidden means hidden, whatever display a component gives itself. */
[hidden] { display: none !important; }