/* Central — the outline.
   Boards-kin: white ground, Inter, dense 14px rows at 1.6, pill badges, rounded
   bodies and drawer, hover-lit rows, hairlines only where depth needs them.
   The only stylesheet Central has. Every rule still hangs off .outline-page,
   so nothing here can leak onto a page that isn't the outline's. */

@font-face {
  font-family: "Inter";
  src: url("/assets/inter/InterVariable-884c49a1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.outline-page {
  --ground: #ffffff;
  --ink: #1b1d21;
  --ink-muted: #6b7079;
  --ink-faint: #9aa0a8;
  --hairline: #e7e8eb;
  --hover: #f4f5f7;
  --green: #1f8a5b;
  --green-wash: rgba(31, 138, 91, 0.10);
  --blue: #2b7fff;
  --blue-wash: rgba(43, 127, 255, 0.10);
  --terracotta: #d9480f;
  --terracotta-wash: rgba(217, 72, 15, 0.10);
  --violet: #7048e8;
  --violet-wash: rgba(112, 72, 232, 0.10);
  --radius: 10px;
  --pill: 999px;
  --row-size: 14px;
  --row-leading: 1.6;
  --indent: 20px;
  /* One column for the outline and the pages, and the top bar's contents
     inset to it, so the chrome lines up whichever is showing. */
  --column: 1120px;
  --gutter: 24px;
  --column-inset: max(var(--gutter), calc((100% - var(--column)) / 2 + var(--gutter)));
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--row-size)/var(--row-leading) var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Widths include padding and border, so a 420px drawer is 420px and a 100%
   wide thing never pokes past its container. */
.outline-page,
.outline-page *,
.outline-page *::before,
.outline-page *::after { box-sizing: border-box; }

.outline-page a { color: inherit; text-decoration: none; }
.outline-page :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }

/* Top bar: mark, crumbs, stale chip, admin menu. */
.outline-page .topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 8px var(--column-inset); background: var(--ground); border-bottom: 1px solid var(--hairline);
}
.outline-page .topbar .page-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 650; line-height: 28px; }
.outline-page .shell .topbar-mark { display: none; }
.outline-page .crumbs { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.outline-page .crumb { color: var(--ink-muted); }
.outline-page a.crumb:hover { color: var(--ink); }
.outline-page .crumb--current { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.outline-page .crumb-sep { color: var(--ink-faint); }

.outline-page .admin-menu { position: relative; }
.outline-page .admin-menu summary { cursor: pointer; list-style: none; padding: 4px 10px; border-radius: var(--pill); color: var(--ink-muted); }
.outline-page .admin-menu summary:hover { background: var(--hover); color: var(--ink); }
.outline-page .admin-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--ground); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.outline-page .admin-menu-list a,
.outline-page .admin-menu-signout { padding: 6px 10px; border-radius: 6px; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
.outline-page .admin-menu-list a:hover,
.outline-page .admin-menu-signout:hover { background: var(--hover); }

/* The flash sits in the outline's column, not across the window. */
.outline-page .flashes { max-width: var(--column); margin: 0 auto; padding: 8px var(--gutter) 0; }
.outline-page .flash { margin: 0; padding: 8px 12px; border-radius: var(--radius); }
.outline-page .flash--notice { background: var(--green-wash); }
.outline-page .flash--alert { background: var(--terracotta-wash); color: var(--terracotta); }

/* The tree. */
.outline-page .outline { max-width: var(--column); margin: 0 auto; padding: 16px var(--gutter) 80px; }
.outline-page .zoom-title { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; font-size: 20px; font-weight: 650; }
.outline-page .tree { list-style: none; margin: 0; padding: 0; }
.outline-page .tree .tree { padding-left: var(--indent); }
.outline-page .node,
.outline-page .node-group { margin: 0; }

.outline-page .row {
  position: relative;
  display: flex; align-items: center; gap: 0 8px;
  min-height: calc(var(--row-size) * var(--row-leading) + 6px);
  padding: 2px 8px; border-radius: 6px; outline: none;
}
/* Hover looks are a mouse's: a touch screen would keep a tapped row lit. */
@media (hover: hover) {
  .outline-page .row:hover { background: var(--hover); }
}
.outline-page .node.is-focused > .row { background: var(--hover); box-shadow: inset 2px 0 0 var(--green); }
.outline-page .row--group { color: var(--ink-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }

.outline-page .twisty {
  width: 16px; height: 16px; flex: none; padding: 0; border: 0; background: none;
  color: var(--ink-faint); font-size: 11px; line-height: 16px; cursor: pointer; transition: transform 120ms ease;
}
.outline-page .twisty--leaf { cursor: default; }
.outline-page .node.is-open > .row .twisty { transform: rotate(90deg); color: var(--ink-muted); }

.outline-page .bullet { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ink-faint); }
.outline-page .bullet--folder { background: var(--green); }
.outline-page .bullet--board { background: var(--blue); }
.outline-page .bullet--filter { background: var(--violet); }
.outline-page .bullet--column { background: transparent; border: 1.5px solid var(--ink-faint); }
.outline-page .bullet--card { width: 5px; height: 5px; }
.outline-page .bullet--hollow { background: transparent; border: 1.5px solid var(--green); }

/* The name gives way first, but the meta never takes more than 55% of the
   row: past that it wraps (chips onto more lines) rather than eat the name. */
.outline-page .row-label { flex: 1 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline-page a.row-label:hover { text-decoration: underline; text-decoration-color: var(--hairline); }
.outline-page .num { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.outline-page .row-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 8px;
  flex: 0 1 auto; min-width: 0; max-width: 55%; color: var(--ink-muted); font-size: 12.5px; text-align: right;
}
.outline-page .row-meta > * { min-width: 0; max-width: 100%; }
.outline-page .count { font-variant-numeric: tabular-nums; }
/* Edit takes no room: it floats over the end of the meta, on the row's own
   hover ground, only while the row is hovered or focused. */
.outline-page .row-edit {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  padding: 0 10px; border: 1px solid var(--hairline); border-radius: var(--pill);
  background: var(--ground); color: var(--ink-muted); font-size: 12.5px; line-height: 18px;
  box-shadow: -8px 0 8px 4px var(--hover);
  opacity: 0; pointer-events: none;
}
.outline-page .row:hover .row-edit,
.outline-page .node.is-focused > .row .row-edit,
.outline-page .row-edit:focus-visible { opacity: 1; pointer-events: auto; }
.outline-page .row-meta .btn--quiet { padding: 0; border: 0; background: none; }
.outline-page .row-meta .btn--quiet:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); }
.outline-page .node--gone .row-label { color: var(--ink-faint); text-decoration: line-through; }
.outline-page .node--column .chip--board { display: none; }

/* Chips, glyphs, dates. */
.outline-page .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; padding: 0 8px; border-radius: var(--pill); font-size: 11.5px; line-height: 18px; background: var(--hover); color: var(--ink-muted); }
.outline-page .chip--account,
.outline-page .chip--board { background: var(--blue-wash); color: var(--blue); }
.outline-page .chip--filter { background: var(--violet-wash); color: var(--violet); }
.outline-page .chip--gone,
.outline-page .chip--waiting { background: var(--hover); color: var(--ink-faint); }
.outline-page .chip--stale { background: var(--hover); color: var(--ink-muted); }

.outline-page .glyph { font-size: 12px; }
.outline-page .glyph--in-progress { color: var(--blue); }
.outline-page .glyph--blocked { color: var(--terracotta); }
.outline-page .glyph--up-next { color: var(--ink-faint); }
.outline-page .glyph--closed { color: var(--green); }
.outline-page .due { color: var(--ink-muted); }
.outline-page .due--soon,
.outline-page .due--overdue { color: var(--terracotta); font-weight: 650; }
.outline-page .age { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.outline-page .who--none { color: var(--ink-faint); }

.outline-page .empty-row { list-style: none; padding: 4px 8px 4px 32px; color: var(--ink-faint); }
.outline-page .new-node { margin-top: 12px; }

/* The expanded card body. */
.outline-page .card-body {
  margin: 4px 8px 10px 32px; padding: 12px 14px;
  border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--ground);
}
.outline-page .body-note { margin: 0 0 10px; color: var(--ink-muted); }
.outline-page .body-note--unreachable { color: var(--terracotta); }
.outline-page .description { margin: 0 0 10px; white-space: pre-line; }
.outline-page .comments { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.outline-page .comment { padding-top: 8px; border-top: 1px solid var(--hairline); }
.outline-page .comment-author { font-weight: 600; margin-right: 6px; }
.outline-page .comment-body { margin: 2px 0 0; }

.outline-page .card-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.outline-page .action-comment { display: flex; gap: 8px; flex: 1 1 100%; }
.outline-page .action-comment textarea {
  flex: 1; min-height: 36px; padding: 6px 10px; resize: vertical;
  font: inherit; border: 1px solid var(--hairline); border-radius: 8px;
}
.outline-page .move-picker { position: relative; }
.outline-page .move-picker summary { list-style: none; }
.outline-page .move-picker summary[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.outline-page .popover {
  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; min-width: 180px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--ground); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.outline-page .action-note { flex: 1 1 100%; margin: 0; color: var(--terracotta); font-size: 12.5px; }
.outline-page .action-note:empty { display: none; }

/* Buttons. */
.outline-page .btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border: 1px solid var(--hairline); border-radius: var(--pill); background: var(--ground);
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
.outline-page .btn:hover { background: var(--hover); }
.outline-page .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.outline-page .btn--primary { background: var(--green); border-color: var(--green); color: #ffffff; }
.outline-page .btn--primary:hover { background: #197a50; }
.outline-page .btn--quiet { border-color: transparent; color: var(--ink-muted); }
.outline-page .btn--danger { border-color: transparent; color: var(--terracotta); }
/* A destructive action that sits near others: grey until pointed at or
   focused, so it can't be taken for its red neighbours. */
.outline-page .btn--quiet-danger:focus-visible { color: var(--terracotta); }
@media (hover: hover) {
  .outline-page .btn--quiet-danger:hover { color: var(--terracotta); }
}

/* The drawer. */
/* The head stays put above a body that scrolls on its own, so a scrollbar
   never pushes the × in from the drawer's edge. */
.outline-page .drawer {
  position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ground); border-left: 1px solid var(--hairline); border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.08);
}
.outline-page .drawer-head { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 6px 0 20px; }
.outline-page .drawer-body {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px;
  padding: 14px 20px 18px; overflow-y: auto; overscroll-behavior: contain;
}
.outline-page .drawer-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 650; outline: none; }
.outline-page .drawer-esc { color: var(--ink-faint); font: inherit; font-size: 12px; }
.outline-page .drawer-close {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--ink-muted); cursor: pointer;
}
.outline-page .drawer-close:hover { background: var(--hover); color: var(--ink); }
.outline-page .drawer-form { display: flex; flex-direction: column; gap: 14px; }
.outline-page .drawer-actions { display: flex; gap: 8px; }
.outline-page .field { display: flex; flex-direction: column; gap: 4px; border: 0; margin: 0; padding: 0; }
.outline-page .field label,
.outline-page .field legend { font-size: 12.5px; color: var(--ink-muted); }
.outline-page .field input[type=text],
.outline-page .field input[type=tel],
.outline-page .field select { padding: 6px 10px; font: inherit; border: 1px solid var(--hairline); border-radius: 8px; }
.outline-page .field-note { margin: 0; color: var(--ink-muted); font-size: 12.5px; }
.outline-page .field-note--alert { color: var(--terracotta); }
.outline-page .form-error { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--terracotta-wash); color: var(--terracotta); }
.outline-page .board-picks { gap: 2px; }
.outline-page .pick-account { margin: 8px 0 2px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.outline-page .pick { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.outline-page .pick--gone { color: var(--ink-faint); }

/* House pages for refusals and gaps. */
.outline-page .notice-page { max-width: 520px; margin: 48px auto; text-align: center; }
.outline-page .notice-page h1 { font-size: 20px; }
.outline-page .notice-page a { color: var(--green); }

/* The sign-in page (layouts/public). */
.outline-page.public-page .topbar { justify-content: center; }
.outline-page .signin { max-width: 360px; margin: 48px auto; display: flex; flex-direction: column; gap: 12px; }
.outline-page .signin h1 { margin: 0; font-size: 20px; }
.outline-page .signin-note { margin: 0; color: var(--ink-muted); }
.outline-page .signin-form { display: flex; flex-direction: column; gap: 14px; }
.outline-page .field input[type=password] { padding: 6px 10px; font: inherit; border: 1px solid var(--hairline); border-radius: 8px; }
.outline-page .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* In a table a number is read beside names: the same size as they are. */
.outline-page .ledger .mono { font-size: inherit; }
/* A mobile read beside words: their type, its digits in even columns, never broken. */
.outline-page .mobile { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The org's pills and glyphs. */
.outline-page .chip--designation { background: var(--hover); color: var(--ink-muted); }
.outline-page .chip--current,
.outline-page .chip--linked,
.outline-page .chip--owner { background: var(--green-wash); color: var(--green); }
.outline-page .chip--outside,
.outline-page .chip--muted { background: var(--hover); color: var(--ink-muted); }
.outline-page .chip--super,
.outline-page .chip--grant { background: var(--violet-wash); color: var(--violet); }
.outline-page .glyph--leave-pending,
.outline-page .count--failures { color: var(--terracotta); font-weight: 650; }
.outline-page .glyph--leave-approved { color: var(--green); }
.outline-page .glyph--leave-rejected { color: var(--ink-faint); }
.outline-page .note,
.outline-page .dates { color: var(--ink-muted); }
.outline-page .access { display: inline-flex; gap: 4px; white-space: nowrap; }
.outline-page .chip--on { background: var(--green-wash); color: var(--green); }
.outline-page .chip--off { background: var(--hover); color: var(--ink-faint); }

/* Switches: a checkbox dressed as a track and knob (ApplicationHelper#switch). */
.outline-page .switch { position: relative; display: inline-flex; }
.outline-page .switch input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.outline-page .switch-track { width: 26px; height: 15px; border-radius: var(--pill); background: var(--hairline); transition: background 0.15s; }
.outline-page .switch-knob { display: block; width: 11px; height: 11px; margin: 2px; border-radius: 50%; background: #ffffff; transition: transform 0.15s; }
.outline-page .switch input:checked + .switch-track { background: var(--green); }
.outline-page .switch input:checked + .switch-track .switch-knob { transform: translateX(11px); }
.outline-page .switch input:disabled + .switch-track { opacity: 0.75; }

/* Drawer sections: the identity, employee and account drawers hold several. */
.outline-page .drawer-section { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.outline-page .drawer-section h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 650; }
.outline-page .drawer-section p { margin: 0; }
.outline-page .drawer-summary { margin: 0; color: var(--ink-muted); }
.outline-page .field textarea,
.outline-page .field input[type=email],
.outline-page .field input[type=date] { padding: 6px 10px; font: inherit; border: 1px solid var(--hairline); border-radius: 8px; }
.outline-page .qr { width: 128px; height: 128px; }
.outline-page .link-card-stage[hidden] { display: none; }
.outline-page .pick--grant { align-items: flex-start; }
.outline-page .grant-what { display: flex; flex-direction: column; flex: 1; }
.outline-page .grant-note { color: var(--ink-muted); font-size: 12.5px; }
.outline-page .super-note { color: var(--violet); }

/* Attendance, a month at a time. */
.outline-page .attendance { padding: 0; }
.outline-page .month-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.outline-page .month-name { font-weight: 600; }
.outline-page .day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.outline-page .day-name { font-size: 11.5px; color: var(--ink-faint); text-align: center; }
.outline-page .day { min-width: 0; overflow-wrap: anywhere; min-height: 44px; padding: 4px 6px; border-radius: 8px; background: var(--hover); font-size: 12px; }
.outline-page .day--outside { background: transparent; }
.outline-page .day--present { background: var(--green-wash); }
.outline-page .day-number { font-weight: 600; }
.outline-page .day-stamps,
.outline-page .day-absent { display: block; color: var(--ink-muted); font-size: 11px; }

@media (max-width: 639px) {
  .outline-page { --gutter: 16px; }
  .outline-page .outline { padding: 12px var(--gutter) 64px; }
  .outline-page .drawer { border-radius: 0; }
  /* The drawer covers a phone's screen, so the page behind it holds still
     (drawer-open is the body's while a drawer is connected). */
  .outline-page.drawer-open { overflow: hidden; }
  .outline-page .drawer-esc { display: none; }

  /* Least important first: a card's assignee. */
  .outline-page .node--card > .row .who { display: none; }
}

/* The rail: the mark and the sections down the left edge. Collapsed to
   icons; kept open (rail-pinned) it moves the page over, opened for a look
   (rail-peek, or a keyboard focus inside it) it lies over the page. On a
   phone it is a sheet (rail-sheet) behind the top bar's menu button. */
.outline-page { --rail: 56px; --rail-open: 220px; }
.outline-page .rail {
  position: fixed; z-index: 15; top: 0; bottom: 0; left: 0; width: var(--rail);
  display: flex; flex-direction: column; gap: 2px; padding: 10px 8px;
  background: var(--ground); border-right: 1px solid var(--hairline);
  transition: width 150ms ease, box-shadow 150ms ease;
}
.outline-page.rail-pinned .rail,
.outline-page.rail-peek .rail,
.outline-page .rail:has(:focus-visible) { width: var(--rail-open); }
.outline-page .rail-head { position: relative; display: flex; align-items: center; height: 40px; margin-bottom: 6px; }
.outline-page .rail-mark { display: flex; align-items: center; height: 40px; padding: 0 6px; }
/* The pin: hidden (and out of the tab order) while the rail is collapsed. */
.outline-page .rail .rail-toggle {
  position: absolute; top: 4px; right: 0; width: 32px; height: 32px; padding: 0; justify-content: center;
  visibility: hidden; opacity: 0; transition: opacity 120ms ease;
}
.outline-page.rail-pinned .rail-toggle,
.outline-page.rail-peek .rail-toggle,
.outline-page .rail:has(:focus-visible) .rail-toggle { visibility: visible; opacity: 1; }
.outline-page.rail-pinned .rail-toggle { color: var(--green); }
.outline-page .rail-toggle .rail-icon { width: 18px; height: 18px; }
.outline-page .rail-entries { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.outline-page .rail-entry,
.outline-page .rail-toggle,
.outline-page .rail .admin-menu summary {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 10px; overflow: hidden;
  border: 0; border-radius: 8px; background: none; color: var(--ink-muted); font: inherit; white-space: nowrap; cursor: pointer;
}
.outline-page .rail-entry:hover,
.outline-page .rail-toggle:hover,
.outline-page .rail .admin-menu summary:hover { background: var(--hover); color: var(--ink); }
.outline-page .rail-entry[aria-current="page"] { background: var(--green-wash); color: var(--green); font-weight: 600; }
.outline-page .rail-icon { flex: none; width: 20px; height: 20px; }
.outline-page .rail-label { opacity: 0; transition: opacity 120ms ease; }
.outline-page.rail-pinned .rail-label,
.outline-page.rail-peek .rail-label,
.outline-page.rail-sheet .rail-label,
.outline-page .rail:has(:focus-visible) .rail-label { opacity: 1; }
.outline-page .rail-foot { margin-top: auto; }
.outline-page .rail-avatar {
  flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-wash); color: var(--green); font-size: 11px; font-weight: 650;
}
.outline-page .rail .admin-menu summary::-webkit-details-marker { display: none; }
.outline-page .rail .admin-menu-list { top: auto; right: auto; bottom: 0; left: calc(100% + 8px); }
.outline-page .shell { margin-left: var(--rail); transition: margin-left 150ms ease; }
/* Kept open, or open for a look, the rail moves the page over: it never lies
   on top of it. */
.outline-page.rail-pinned .shell,
.outline-page.rail-peek .shell,
.outline-page:has(.rail :focus-visible) .shell { margin-left: var(--rail-open); }
.outline-page.rail-instant .rail,
.outline-page.rail-instant .rail-label,
.outline-page.rail-instant .shell { transition: none; }
.outline-page .rail-open,
.outline-page .rail-scrim { display: none; }

@media (max-width: 639px) {
  .outline-page .rail { display: none; width: min(280px, 85vw); }
  .outline-page.rail-sheet .rail { display: flex; box-shadow: 12px 0 32px rgba(0, 0, 0, 0.12); }
  .outline-page.rail-sheet .rail-scrim { display: block; position: fixed; z-index: 14; inset: 0; background: rgba(27, 29, 33, 0.24); }
  .outline-page .shell,
  .outline-page.rail-pinned .shell,
  .outline-page.rail-peek .shell,
  .outline-page:has(.rail :focus-visible) .shell { margin-left: 0; }
  .outline-page .rail-toggle { display: none; }
  .outline-page .rail-open {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
    margin-left: -6px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-muted); cursor: pointer;
  }
  .outline-page .rail .admin-menu-list { left: 0; bottom: calc(100% + 6px); }
  .outline-page .shell .topbar-mark { display: inline-flex; align-items: center; flex: none; }
  .outline-page .topbar-mark .mark { width: 24px; height: 24px; }
}

/* Pages: People, Holdings, System. The outline's look laid out as tables —
   counts up top, a quiet toolbar of pills, hover-lit lines, a hairline under
   each table's heading and nowhere else. */
.outline-page .page { max-width: var(--column); margin: 0 auto; padding: 16px var(--gutter) 80px; }
.outline-page .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 32px; margin: 4px 0 12px; }
.outline-page .stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; color: var(--ink-muted); }
.outline-page .stat { white-space: nowrap; }
.outline-page .stat strong { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.outline-page .stat--alert strong { color: var(--terracotta); }
/* The toolbar keeps a button's height whether a tab has a button or not, so
   the pills and the table under them stay put from tab to tab. Its search,
   select and buttons are one height. */
.outline-page .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 32px; margin: 0 0 18px; }
.outline-page .toolbar .btn,
.outline-page .page-head .btn { height: 32px; }
.outline-page .toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.outline-page .toolbar-search,
.outline-page .toolbar-select {
  height: 32px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: var(--pill);
  background: var(--ground); color: var(--ink); font: inherit; font-size: 13px;
}
/* The house select: one arrow for the toolbar's filters and the drawer's pickers. */
.outline-page .toolbar-select,
.outline-page .field select {
  appearance: none; padding-right: 30px; cursor: pointer;
  background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7079' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.outline-page .field select { color: var(--ink); }
.outline-page .field select:disabled { opacity: 0.5; cursor: not-allowed; }
.outline-page .toolbar-search { width: 220px; }
.outline-page .toolbar-action { margin-left: auto; }
.outline-page .pills { display: flex; flex-wrap: wrap; gap: 4px; }
.outline-page .pill { padding: 3px 12px; border-radius: var(--pill); color: var(--ink-muted); font-size: 13px; }
.outline-page .pill:hover { background: var(--hover); color: var(--ink); }
.outline-page .pill[aria-current] { background: var(--green-wash); color: var(--green); font-weight: 600; }
.outline-page .sheet { margin: 0 0 28px; }
.outline-page .sheet-title {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; padding: 0 8px;
  color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.outline-page .sheet-title .count { color: var(--ink-faint); font-weight: 500; letter-spacing: 0; text-transform: none; }
.outline-page .ledger { width: 100%; border-collapse: separate; border-spacing: 0; }
.outline-page .ledger th {
  padding: 6px 8px; border-bottom: 1px solid var(--hairline);
  color: var(--ink-faint); font-size: 12px; font-weight: 500; text-align: left; white-space: nowrap;
}
.outline-page .ledger td { padding: 5px 8px; vertical-align: middle; }
.outline-page .ledger-line { outline: none; }
.outline-page .ledger-line[data-edit-href] { cursor: pointer; }
.outline-page .ledger-line.is-focused td { background: var(--hover); }
@media (hover: hover) {
  .outline-page .ledger-line:hover td { background: var(--hover); }
}
.outline-page .ledger-line td:first-child { border-radius: 6px 0 0 6px; }
.outline-page .ledger-line td:last-child { border-radius: 0 6px 6px 0; }
.outline-page .ledger-line.is-focused td:first-child { box-shadow: inset 2px 0 0 var(--green); }
.outline-page .ledger-empty td { padding: 6px 8px; color: var(--ink-faint); }
.outline-page .cell-lead { overflow-wrap: anywhere; }
.outline-page .line-name { font-weight: 500; }
.outline-page .ledger td a:hover { text-decoration: underline; text-decoration-color: var(--hairline); }
.outline-page .cell-num,
.outline-page .ledger th.cell-num { text-align: right; font-variant-numeric: tabular-nums; }
/* People: every company's table on one fixed grid, so the columns line up. */
.outline-page .ledger--people { table-layout: fixed; }
.outline-page .ledger--people .col-name { width: 24%; }
.outline-page .ledger--people .col-designation { width: 22%; }
.outline-page .ledger--people .col-manager { width: 22%; }
.outline-page .ledger--people .col-reports { width: 9%; }
.outline-page .ledger--people .col-taken { width: 15%; }
.outline-page .ledger--people .col-edit { width: 8%; }
.outline-page .ledger--people td { overflow-wrap: anywhere; }
.outline-page .cell-edit { width: 1%; text-align: right; white-space: nowrap; }
.outline-page .ledger-edit {
  padding: 0 10px; border: 1px solid var(--hairline); border-radius: var(--pill);
  color: var(--ink-muted); font-size: 12.5px; line-height: 18px; opacity: 0;
}
.outline-page .ledger-line:hover .ledger-edit,
.outline-page .ledger-line.is-focused .ledger-edit,
.outline-page .ledger-edit:focus-visible { opacity: 1; }
.outline-page .chip--pending { background: var(--terracotta-wash); color: var(--terracotta); }
.outline-page .taken { font-variant-numeric: tabular-nums; }
.outline-page .phone-only { display: none; }
.outline-page .empty-page { color: var(--ink-muted); }
.outline-page .empty-page a { color: var(--green); }
.outline-page .btn--small { padding: 1px 10px; font-size: 12.5px; }
.outline-page .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Lists inside a drawer: a person's reports, lines, history and leave; a
   number's past holders; an account's members. */
.outline-page .drawer-tabs { margin-top: -4px; }
.outline-page .drawer-list { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.outline-page .drawer-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.outline-page .drawer-list-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.outline-page .drawer-list-meta { flex-basis: 100%; color: var(--ink-muted); font-size: 12.5px; }

/* System. On Grants a person's name cell is exactly as wide as the name
   (nowrap, width 1%), so ten standings wrap as pills beside it and never
   squeeze it. */
.outline-page .ledger--grants .cell-lead { width: 1%; white-space: nowrap; }
.outline-page .chips { display: flex; flex-wrap: wrap; gap: 4px; }

/* The pages on a phone: each table line becomes a stacked line — the lead
   and its aside on the first line, the essentials under them, the rest left
   to the drawer. The ::after is a zero-height break the essentials wrap
   under (order 1 sits between the first line's cells and the cell-subs). */
@media (max-width: 639px) {
  .outline-page .page { padding: 12px var(--gutter) 64px; }
  .outline-page .toolbar-filters { width: 100%; margin-left: 0; }
  .outline-page .toolbar-search { flex: 1 1 140px; width: auto; min-width: 0; }
  /* A placeholder longer than a name takes a line of its own, whole. */
  .outline-page .toolbar-search--long { flex-basis: 100%; }
  .outline-page .toolbar-select { flex: 1 1 120px; min-width: 0; max-width: 100%; }
  .outline-page .toolbar-action { margin-left: 0; }
  /* The tabs are one strip that scrolls sideways on its own, its scrollbar
     hidden, rather than a tab stranded on a row of its own. */
  .outline-page .toolbar > .pills { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .outline-page .toolbar > .pills::-webkit-scrollbar { display: none; }
  .outline-page .toolbar > .pills .pill { flex: none; white-space: nowrap; }

  .outline-page .ledger,
  .outline-page .ledger tbody { display: block; }
  /* A line's text starts on the page's gutter, in line with the counts and
     buttons above; its hover ground reaches 8px into the gutter. */
  .outline-page .ledger { width: calc(100% + 16px); margin-inline: -8px; }
  .outline-page .sheet-title { padding: 0; }
  .outline-page .ledger thead { display: none; }
  .outline-page .ledger tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 6px 8px; border-radius: 6px; }
  .outline-page .ledger tr::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  .outline-page .ledger td { display: block; min-width: 0; padding: 0; }
  .outline-page .ledger-line.is-focused { background: var(--hover); }
  .outline-page .ledger .cell-lead { flex: 1 1 0; min-width: 40%; overflow-wrap: anywhere; }
  .outline-page .ledger .cell-aside { flex: 0 1 auto; max-width: 60%; text-align: right; }
  .outline-page .ledger .cell-sub { order: 2; color: var(--ink-muted); font-size: 12.5px; text-align: left; }
  .outline-page .cell-extra:is(.ledger td) { display: none; }
  .outline-page .ledger .cell-sub.cell-edit { width: auto; margin-left: auto; white-space: normal; }
  .outline-page .ledger--grants .cell-lead { width: auto; white-space: normal; }
  .outline-page .ledger .cell-grants { flex-basis: 100%; }
  .outline-page .phone-only { display: inline; }
}

@media (max-width: 639px) and (hover: hover) {
  .outline-page .ledger-line:hover { background: var(--hover); }
}

/* Board access: a page, not a node. A table of who may open the board. */
.outline-page .access-counts { display: flex; gap: 12px; color: var(--ink-muted); margin: 0 0 8px; }
.outline-page .access-table { width: 100%; border-collapse: collapse; font-size: var(--row-size); line-height: var(--row-leading); }
.outline-page .access-table th { text-align: left; font-weight: 500; color: var(--ink-muted); padding: 6px 8px; border-bottom: 1px solid var(--hairline); }
.outline-page .access-table td { padding: 6px 8px; vertical-align: middle; }
@media (hover: hover) {
  .outline-page .access-table tbody tr:hover { background: var(--hover); }
}
.outline-page .access-table tbody + tbody tr:first-child td { border-top: 1px solid var(--hairline); }
.outline-page .access-table .who { color: var(--ink-muted); font-size: 12.5px; }
.outline-page .access-table th,
.outline-page .access-actions { white-space: nowrap; }
.outline-page .access-actions { text-align: right; }
.outline-page .access-actions form { display: inline; }
.outline-page .action-note--notice { color: var(--green); }
.outline-page #access-note .action-note { margin: 0 0 8px; }
.outline-page .chip--code-active { background: var(--green-wash); color: var(--green); }
.outline-page .chip--code-unused { background: var(--blue-wash); color: var(--blue); }
.outline-page .chip--code-expired,
.outline-page .chip--code-revoked { background: var(--terracotta-wash); color: var(--terracotta); }
.outline-page .copy-row { display: flex; align-items: center; gap: 8px; }
.outline-page .copy-row > :first-child { flex: 1; min-width: 0; }
.outline-page .drawer-send { margin: 0; }
.outline-page .access-code { font: 600 22px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; margin: 12px 0; }

/* On a phone a row is two lines: the name, cut short rather than wrapped,
   with its pills; then an outsider's actions in one compact row. */
@media (max-width: 640px) {
  .outline-page .access-table,
  .outline-page .access-table tbody { display: block; }
  .outline-page .access-table thead { display: none; }
  .outline-page .access-table tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; padding: 6px 0; }
  .outline-page .access-table td { padding: 0; }
  .outline-page .access-table tbody + tbody tr:first-child { border-top: 1px solid var(--hairline); }
  .outline-page .access-table tbody + tbody tr:first-child td { border-top: 0; }
  .outline-page .access-table td[colspan] { flex: 1 1 100%; }
  .outline-page .access-table .access-name { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .outline-page .access-table .access-who,
  .outline-page .access-table .access-status { flex: none; white-space: nowrap; }
  .outline-page .access-table .access-used,
  .outline-page .access-table .access-until,
  .outline-page .access-row--member .access-status,
  .outline-page .access-table td:empty { display: none; }
  .outline-page .access-table .access-actions { display: flex; flex: 1 1 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 2px; margin-left: -8px; }
  .outline-page .access-actions .btn { padding: 2px 8px; }
}

/* System's Outsiders tab: a person, then the boards they hold codes for set
   in under them, a hairline between one person and the next. */
.outline-page .ledger--outsiders tbody + tbody tr:first-child td { border-top: 1px solid var(--hairline); }
.outline-page .outsider-board .outsider-where { padding-left: 24px; }
.outline-page .outsider-account { color: var(--ink-muted); }
.outline-page .outsider-account::after { content: " ·"; }
.outline-page .outsider-board-name--gone { color: var(--ink-faint); font-style: italic; }
.outline-page .outsider-used,
.outline-page .outsider-expiry { color: var(--ink-muted); white-space: nowrap; }

/* On a phone a board line is its name and status, then when it was used and
   until when, then its actions in one row. */
@media (max-width: 639px) {
  .outline-page .ledger--outsiders tbody + tbody { border-top: 1px solid var(--hairline); }
  .outline-page .ledger--outsiders tbody + tbody tr:first-child td { border-top: 0; }
  .outline-page .ledger--outsiders .outsider-board { padding-left: 24px; }
  .outline-page .ledger--outsiders .outsider-board .outsider-where { padding-left: 0; }
  .outline-page .ledger--outsiders .cell-actions { order: 3; display: flex; flex: 1 1 100%; gap: 2px; margin-left: -8px; }
}