/**
 * Briefer Design System: Organisms
 *
 * The single source of truth in code for every organism, and a carbon copy of
 * the "⬣ Organisms" section of the Briefer Design System Figma file: one class
 * here per Figma component, one modifier per variant, one state per Figma
 * state. Figma is upstream.
 *
 * An organism is a layout of molecules and atoms. It never restates their
 * look: the stat cards inside a brief card are `.stat-card`, the fields inside
 * a step flow are `.form-field`, and only the organism's own box, its gaps and
 * the type of its own text are written here. The Card at the top is the one
 * card surface every organism and every page panel in the app is built on.
 *
 * Organisms are copied as Figma draws them, exceptions included: where a
 * component carries an unbound value (the 8px card radius, a 26px icon, a
 * 0.5px divider) it is written as drawn, and where an organism overrides a
 * molecule inside it (the step flow opens its form fields out to a 12px gap)
 * the override lives here, scoped to the organism, so it applies wherever the
 * organism is used and nowhere else.
 *
 * Loaded after molecules.css and before Tailwind's injected sheet, so a layout
 * utility on the same element (`mb-lg`, `w-full`) still applies.
 */

/* ══════════════════════════════════════════════════════════════════ */
/* Card                                                                 */
/* ══════════════════════════════════════════════════════════════════ */

/* The card surface: `card` fill, a 1px border and the 8px radius Figma draws
   on the Brief Card, the Step Flow card and every page-level card on the
   Screens page (unbound in Figma). Every panel in the app is one of these:
   a page section, a list container, a dialog, a settings card. The Response
   Detail Panel, Brief Summary and Response Column keep the radius/lg token
   Figma binds on them.
   .card-padded is the organisms' `lg` padding; .card-header and .card-body
   split a card into a titled header row and its content. */
.card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--card);
  color: var(--foreground);
}
.card-padded { padding: calc(var(--space-lg) - 1px); }
.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.card-body { padding: var(--space-lg); }
/* A card that is itself a link (a saved-brief tile). Not in Figma: a hover
   lift so a clickable card does not look inert. */
a.card { display: block; text-decoration: none; transition: box-shadow var(--duration-base) var(--ease-out); }
a.card:hover { box-shadow: var(--shadow-md); }
a.card:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
/* A card floating over the page: a dialog or a popover. */
.card-raised { box-shadow: var(--shadow-lg); }
/* A card that only outlines a region of the page (the agency landing page's
   briefs section): no fill, a border-subtle stroke and the radius/md token, as
   the Agency View Rework file's final frames draw it. */
.card-outline {
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: transparent;
}

/* The thin rule Figma draws inside organisms (brief card, step flow): 0.5px
   in fg-4. */
.divider {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 0.5px solid var(--fg-4);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Brief Card                                                           */
/* ══════════════════════════════════════════════════════════════════ */

/* One brief in a list. A card in two columns: the brief (an `h3` title row
   with its badges, the `body` description in fg-2, the meta row, a `label`
   heading over four stat cards, a divider and the posted date) and a 159px
   action column (MD buttons at full width, a divider, and a status section of
   a `caption` label over a status action button). */
.brief-card {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: calc(var(--space-lg) - 1px);
}
.brief-card-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}
.brief-card-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.brief-card-title {
  font: var(--type-h3);
  letter-spacing: var(--type-h3-tracking);
  color: var(--foreground);
  overflow-wrap: break-word;
  min-width: 0;
}
.brief-card-description {
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brief-card-section-label {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  color: var(--foreground);
}
.brief-card-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}
.brief-card-posted {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  color: var(--muted-foreground);
}
.brief-card-posted > svg { width: 16px; height: 16px; flex-shrink: 0; }
.brief-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 159px;
  flex-shrink: 0;
}
.brief-card-actions > .btn { width: 100%; }
.brief-card-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.brief-card-status-label {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--muted-foreground);
}
.brief-card-status > .status-action-btn { width: 100%; }
/* The agency's own brief card (Agency View Rework file, final frames; the
   Brief Card component has only the feed's layout so far). It leads with the
   responses rather than the brief: the title row carries a cue (.brief-card-new
   while responses are unseen, otherwise .brief-card-cue) and then, not in
   Figma, the chips the agency's cards carried before the rework (who posted
   it, its status, category and kind). Then .brief-card-counts, four count Stat
   Cards `xl` apart in Figma's 2:2:2:3 widths (the last is the shortlist), so
   the figures line up from card to card; a closed brief that asks who was
   hired swaps the counts for the "Who was hired" prompt (.brief-card-prompt
   over a carousel). The column is `lg` apart, the action column 193px wide
   (247px on a closed brief), and the card takes the radius/md token.
   .brief-card-attention outlines a brief with unseen responses in the accent
   border. */
.brief-card-agency { border-radius: var(--radius-md); }
.brief-card-agency .brief-card-main { gap: var(--space-lg); }
.brief-card-agency .brief-card-actions { width: 193px; }
.brief-card-agency.brief-card-closed .brief-card-actions { width: 247px; }
.brief-card-attention { border-color: var(--accent-border); }
.brief-card-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 2fr)) minmax(0, 3fr);
  /* Not in Figma: folded rows (a narrow screen) sit `sm` apart. */
  gap: var(--space-sm) var(--space-xl);
}
.brief-card-cue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: var(--type-small);
  letter-spacing: var(--type-small-tracking);
  color: var(--foreground);
}
.brief-card-cue > svg { width: 16px; height: 16px; flex-shrink: 0; }
/* The "You've got new responses" cue is the Soft Green badge with Figma's
   overrides: the darker success-subtle fill and foreground text, which keeps it
   apart from the brief's green "Open" chip beside it. */
.brief-card-new.badge-soft.badge-green {
  background-color: var(--success-subtle);
  color: var(--foreground);
}
.brief-card-prompt {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  color: var(--foreground);
}
/* Not in Figma: beside the action column, the title row is as tall as the MD
   button that heads it (the button's padding plus a `label` line), so the
   title and badges share the button's centre line instead of sitting 6px
   above it. A title that wraps is taller than this and stays top-aligned. */
@media (min-width: 1024px) {
  .brief-card:has(> .brief-card-actions) .brief-card-title-row {
    min-height: calc(2 * var(--space-sm) + var(--type-label-size) * var(--type-label-line));
  }
}
/* Not in Figma: below lg the action column drops under the brief at full
   width, and the stat cards fold to two columns, then one. */
@media (max-width: 1023px) {
  .brief-card { flex-direction: column; }
  .brief-card-actions,
  .brief-card-agency .brief-card-actions,
  .brief-card-agency.brief-card-closed .brief-card-actions { width: 100%; }
  .brief-card-stats,
  .brief-card-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .brief-card-stats,
  .brief-card-counts { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════ */
/* Empty State                                                          */
/* ══════════════════════════════════════════════════════════════════ */

/* A section with nothing in it yet (Figma "Layout=Full"): on a `secondary`
   panel, a header row (a 26px primary icon and an `h4` title, a link at the
   far end) over centred content (a 26px muted icon, a `label` title, a
   `label` description in muted, and an MD primary button). The header is
   optional; .panel-header is the same row over a section that does have
   content, so a dashboard section keeps its heading when it fills. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--space-xl) - 1px) calc(var(--space-lg) - 1px);
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--secondary);
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
}
.panel-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  font: var(--type-h4);
  letter-spacing: var(--type-h4-tracking);
  color: var(--foreground);
}
.panel-heading > svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--primary); }
.empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-lg) 0;
  text-align: center;
}
.empty-state-content > svg { width: 26px; height: 26px; color: var(--muted-foreground); }
.empty-state-title {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  color: var(--foreground);
}
.empty-state-description {
  max-width: 40rem;
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  color: var(--muted-foreground);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Filter Bar                                                           */
/* ══════════════════════════════════════════════════════════════════ */

/* The filter and sort controls over a list: a toolbar row (an LG outline
   "Filters" button, a 16px sort glyph and the sort dropdown), the search
   field, and the filter dropdowns in their own row on a `card` panel with a
   strong border, which the Filters button shows and hides. */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.filter-bar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.filter-bar-sort {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.filter-bar-sort > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted-foreground); }
.filter-bar-search { width: 100%; max-width: 424px; }
.filter-bar-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-sm) var(--space-lg);
  padding: calc(var(--space-sm) - 1px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--card);
}
/* .filter-bar-inline is the one-row bar the agency landing page draws over each
   of its lists (Agency View Rework file, final frames): the sort dropdown, an
   MD outline "Filters" button and the quick filters (Solid Neutral badges on
   buttons) at the start, `sm` apart, and a 275px search at the far end, `xl`
   from them. Opening Filters swaps the quick filters for the options row
   below. A pressed quick filter takes the Soft Green badge's colours (not in
   Figma, which draws no pressed state). */
.filter-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
}
.filter-bar-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.filter-bar-inline .filter-bar-search { width: 275px; max-width: 100%; }
.filter-bar-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
/* Not in Figma: below xl the one row no longer fits. The search joins sort and
   Filters on the first line (taking a line of its own when that is too tight)
   and the chips go on a line under them; on a phone they scroll sideways in
   that one line rather than stacking, so the cards stay near the top. */
@media (max-width: 1279px) {
  .filter-bar-inline .filter-bar-row { justify-content: flex-start; gap: var(--space-sm); }
  .filter-bar-inline .filter-bar-quick { display: contents; }
  .filter-bar-inline .filter-bar-search { flex: 1 1 12rem; width: auto; }
  .filter-bar-chips { order: 1; flex: 1 1 100%; }
}
@media (max-width: 639px) {
  .filter-bar-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filter-bar-chips::-webkit-scrollbar { display: none; }
  .filter-bar-chips > * { flex-shrink: 0; }
}
.filter-bar-chip {
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}
.filter-bar-chip:hover { color: var(--foreground); }
.filter-bar-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.filter-bar-chip[aria-pressed="true"] {
  background-color: var(--accent-subtle);
  border-color: var(--accent-subtle);
  color: var(--success-foreground);
}
/* Not in Figma: the result count and "Clear all" under the bar. */
.filter-bar-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  color: var(--muted-foreground);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Step Flow                                                            */
/* ══════════════════════════════════════════════════════════════════ */

/* A multi-step form: the step counter over a card padded 48/32, whose content
   is a column 24px apart: a centred section heading, the step's fields, a
   divider and the Back / Next row. Inside it every form field opens out from
   the molecule's 6px to a 12px gap, and each row of radio cards is 24px
   apart, as Figma draws the flow. */
.step-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.step-flow > .step-counter { width: 100%; max-width: 594px; margin: 0 auto; }
.step-flow-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: calc(var(--space-2xl) - 1px) calc(var(--space-xl) - 1px);
}
.step-flow-heading { align-items: center; text-align: center; }
.step-flow .form-field { gap: var(--space-sm); }
.step-flow-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-lg);
}
.step-flow-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.step-flow-actions > .btn:only-child { margin-left: auto; }
/* Not in Figma: a phone gets the card's padding back for the fields. */
@media (max-width: 639px) {
  .step-flow-card { padding: calc(var(--space-lg) - 1px) calc(var(--space-md) - 1px); }
}

/* ══════════════════════════════════════════════════════════════════ */
/* Accordion · Accordion Content · Accordion Group                      */
/* ══════════════════════════════════════════════════════════════════ */

/* A collapsible section: a header row on `card` (an optional 20px leading
   icon, the `label` title, an optional badge, the 20px chevron) over a content
   panel on the page background. Open state is the header button's
   aria-expanded. Accordion Content is either options (a checkbox card grid)
   or text: a `label` subhead over a `body` paragraph in muted. */
.accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out);
}
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: calc(var(--space-md) - 1px) calc(var(--space-md) - 1px) var(--space-md);
  border: 0;
  background-color: var(--card);
  color: var(--foreground);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-align: left;
  cursor: pointer;
}
.accordion-header:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.accordion-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
.accordion-label > svg { width: 20px; height: 20px; flex-shrink: 0; }
.accordion-trailing {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  min-width: 0;
}
.accordion-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--muted-foreground);
  transition: transform var(--duration-base) var(--ease-out);
}
.accordion-header[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }
.accordion-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-md) calc(var(--space-md) - 1px) calc(var(--space-md) - 1px);
  background-color: var(--background);
}
/* Accordion Content, Type=Text: the subhead 8px over its paragraph. Figma
   binds the subhead to primary-foreground, which only reads on its dark
   canvas; it is the foreground colour. */
.accordion-text-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.accordion-subhead {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  color: var(--foreground);
}
.accordion-text {
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  color: var(--muted-foreground);
}
/* Not in Figma: a collapsed accordion whose content failed validation carries
   the message in its header, or the error would have nothing on screen to
   point at. */
.accordion.is-error { border-color: var(--danger-foreground); }
.accordion-error {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--danger-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accordion-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Brief Summary                                                        */
/* ══════════════════════════════════════════════════════════════════ */

/* A brief read back before it is posted: a `secondary` header (a 16px accent
   icon and the `h4` title) over sections 16px apart, each an `overline`
   heading with an edit link and its rows, a `label` name beside a `body`
   value. */
.brief-summary {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.brief-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-sm);
  background-color: var(--secondary);
  font: var(--type-h4);
  letter-spacing: var(--type-h4-tracking);
  color: var(--foreground);
}
.brief-summary-header > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
.brief-summary-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
}
.brief-summary-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brief-summary-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font: var(--type-overline);
  letter-spacing: var(--type-overline-tracking);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.brief-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brief-summary-row {
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  color: var(--fg-2);
  overflow-wrap: break-word;
}
.brief-summary-row-label {
  margin-right: 4px;
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Response Column · Response Detail Panel                              */
/* ══════════════════════════════════════════════════════════════════ */

/* A triage bucket on a `secondary` panel: a header (16px icon, `label` name,
   `caption` count) over its response cards 6px apart and an SM "See more"
   button. data-type is "discarded", "saved" or "shortlisted" and colours the
   icon and name: muted, pending blue, accent. */
.response-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  background-color: var(--secondary);
}
.response-column-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-xs) var(--space-xs) 0;
  color: var(--muted-foreground);
}
.response-column-header > svg { width: 16px; height: 16px; flex-shrink: 0; }
.response-column-name {
  flex: 1;
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
}
.response-column-count {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--muted-foreground);
}
.response-column[data-type="saved"] .response-column-header { color: var(--pending); }
.response-column[data-type="shortlisted"] .response-column-header { color: var(--accent); }
.response-column-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}

/* One response opened out: the company (`h4` name, contact as a meta item,
   the updated badge and date at the far end), each director on their own
   bordered block (`h4` name and portfolio link, then the showreel card and the
   labelled Discard / Save / Shortlist buttons), the company's comment on a
   `secondary` panel under an `overline`, a 1px divider and the notes bar. */
.response-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: calc(var(--space-lg) - 1px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card);
}
.response-panel-company {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
}
.response-panel-identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}
.response-panel-name {
  font: var(--type-h4);
  letter-spacing: var(--type-h4-tracking);
  color: var(--foreground);
  overflow-wrap: break-word;
}
.response-panel-updated {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
  flex-shrink: 0;
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--muted-foreground);
}
.response-panel-director {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: calc(var(--space-md) - 1px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--card);
}
.response-panel-director-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.response-panel-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.response-panel-actions-row > .media-link-card { width: 320px; max-width: 100%; }
.response-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.response-panel-comment {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--secondary);
}
.response-panel-comment-label {
  font: var(--type-overline);
  letter-spacing: var(--type-overline-tracking);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.response-panel-comment-text {
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  color: var(--fg-2);
  white-space: pre-wrap;
}
.response-panel-divider { height: 1px; background-color: var(--border); }

/* ══════════════════════════════════════════════════════════════════ */
/* Page layout (the Screens page)                                       */
/* ══════════════════════════════════════════════════════════════════ */

/* The column every /app page sits in, as the Screens page draws it: 1248px of
   content (the header, the page header and every list share it), or 892px for
   a step flow. The side gutter grows with the viewport. */
.app-container {
  width: 100%;
  max-width: calc(1248px + 2 * var(--space-xl));
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.app-container-narrow { max-width: calc(892px + 2 * var(--space-xl)); }
@media (min-width: 640px) {
  .app-container { padding-inline: var(--space-lg); }
}
@media (min-width: 1024px) {
  .app-container { padding-inline: var(--space-xl); }
}

/* The app header draws the current page with the Nav Item atom in its Hover
   state (secondary), keeping the atom's Active fill for the mobile drawer. */
.app-header .nav-item { width: auto; }
.app-header .nav-item[aria-current="page"] { background-color: var(--secondary); color: var(--foreground); }