/* TYPE SCALE. Greg, 23 September 2026: "hard to read / distinguish between
   sections and text / projects / titles / tasks, everything is blending
   together and im having to squint really hard". Measured: nine text roles
   between 12 and 13px in half-pixel steps, section headers smaller and
   greyer than the rows under them, one weight everywhere. Each role now has
   its own step. Approved from a before/after the same night ("Apply it").

   Borrowed, not invented, both MIT:
   - GitHub Primer, @primer/primitives 11.10.0: title.medium 20/600 (page
     title), title.small 16/600 (section header), body.medium 14/400 (body and
     row titles), caption 12, spacing 8/12/24/32. Secondary text is 13px, one
     step off Primer's 12, to keep a 13px floor.
   - Radix Colors 3.0.0 slate-11 #60646c for secondary text (in theme.js).

   Loaded after every other stylesheet on purpose: it is one layer that sets
   size, weight and spacing, so the rules below win over the per-screen files
   without raising specificity. */

/* ── base: Primer body.medium ─────────────────────────────────────── */
body { font-size: 14px; line-height: 1.5; }

/* ── page title: Primer title.medium ──────────────────────────────── */
.pagehead h1, .h1edit { font-size: 20px; font-weight: 600; line-height: 1.4; }
.pagehead { margin-bottom: 24px; }
.pagehead p, .ph-brief { font-size: 14px; }
.detail-note { font-size: 14px; line-height: 1.5; }

/* ── section header: Primer title.small, in ink, not grey ─────────── */
div.sec { margin: 32px 0 8px; }
div.sec h2, .performance-section .sec h2 {
  font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--t1); letter-spacing: 0;
}
div.sec .n, div.sec .more, div.sec > .sub { font-size: 13px; }

/* ── group header inside a list (Not started, In progress) ─────────── */
.grp-hdr { font-size: 13px; }
.grp-hdr .lbl { font-weight: 600; color: var(--t1); }
.grp-hdr .n { font-size: 13px; }

/* ── rows: title inherits 14px from body; the pair is tight, rows are not */
.row { padding-top: 12px; padding-bottom: 12px; }
.row .sub { font-size: 13px; line-height: 1.4; }

/* ── secondary / meta: 13px floor ─────────────────────────────────── */
.due-chip, .waited, .health, .st, .prio, .owner-tag,
.filterbar .cnt, .filterbar .to, .clearf, .viewbar .cnt, .record-position,
.feed .when, .top .right, .nav .ct, .prop .k, .task-properties .prop > .k,
.project-target, .propdateface, .task-source-brief > summary, .empty, .toggle,
.description-status, .prevbar, .prevbar .exit, .attn, .attn .go,
.switch-btn.quiet .nm, .switch-btn.quiet .ctx { font-size: 13px; }
/* EXCEPTION: the entity chip (client / project / assignee pills in the agency
   task list) stays 12px. Its grid tracks are fixed at 156/148/132px and at
   13px "Northwind Cabinet Co" (174px) runs into the next pill. It already
   overflows its track by 8px at 12px; that is a separate layout fix. */
/* the filter row fitted 1440 with 0px to spare; 13px on the count wrapped it.
   Primer base-size-8, which is what the portal's own first rule used. */
.filterbar { gap: 8px; }
.task-properties .prop > .k { font-weight: 500; }
/* "Set a date" was --h2, a hairline colour, at 3.17:1 */
.due-chip.none { color: var(--t3); }

/* at phone width the task title column is ~150px; 14px titles truncated
   five more tasks, so there they wrap to a second line instead */
@media (max-width: 560px) {
  .r-task .ttl, .r-need .ttl, .r-work .ttl { white-space: normal; line-height: 1.35; }
}

/* ── chips, segmented control, buttons ────────────────────────────── */
.chip, .chip .n, .seg button, .btn, .btn.sm { font-size: 13px; }

/* ── navigation and chrome ────────────────────────────────────────── */
.crumb { font-size: 14px; }
.nav .grp, .switch-btn .ctx, .brandby, .feed-day { font-size: 12px; }
.nav .grp, .feed-day { font-weight: 500; color: var(--t2); }