/**
 * The module page design language (2026-08-10 roadmap redesign), transcribed
 * from docs/design-reference/extracted/module-*.html.
 *
 * Every module capture lays its page out identically: a max-width column of
 * 1.5rem-spaced blocks, opened by an icon tile + title + subtitle header with
 * the guide's chapter/score chips under it, then a sequence of unrounded white
 * cards, uppercase section labels, accent-bordered rows, option tiles and
 * pills. This file is that vocabulary, one class per idiom, so no module view
 * has to carry a style="" attribute.
 *
 * Literal pixel type from the captures is written calc(Npx * var(--text-scale))
 * — the convention modules/hub.css and modules/guide-chrome.css established —
 * so Settings -> text size keeps working. Sizes the captures already wrote as
 * calc(x + var(--text-bump)) are transcribed verbatim.
 */

/* ── The page column ───────────────────────────────────────────────── */

/* The captures' content column: 1220px on most modules (1240 on Roadmap, 1380
   on Action Plan — see the modifiers), 1.75rem of air above and 3.5rem below,
   and a flat 1.5rem gap between every top-level block. Horizontal gutters come
   from the surrounding .container's --pad-x, exactly as in the reference. */
.module-page {
  max-width: var(--module-page-width, 1220px);
  margin: 0 auto;
  padding: 1.75rem 0 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.module-page--roadmap { --module-page-width: 1240px; }
.module-page--wide { --module-page-width: 1380px; }

/* The page column carries the capture's own vertical rhythm, so the app
   container it sits in must not add its own on top. */
.container:has(> .module-page) {
  padding-top: 0;
  padding-bottom: 0;
}

/* The column's 1.5rem gap is the only vertical rhythm on the page — blocks
   carried over from the pre-redesign layout must not stack their own margins
   on top of it. Dialogs are exempt: a native <dialog> centers itself in the
   top layer with `margin: auto`, and zeroing its bottom margin shoves all the
   auto slack above it — the dialog renders pinned to the bottom of the
   viewport (this is exactly what happened to the faith scripture modal). */
.module-page > *:not(dialog) { margin-bottom: 0; }

/* ── Page header ───────────────────────────────────────────────────── */

.module-page-headline {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.module-page-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--teal-light);
  color: var(--teal-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(22.5px * var(--text-scale));
}

.module-page-title {
  font-family: var(--font-heading);
  font-size: calc(31.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
  margin: 0;
  line-height: 1.2;
}

/* Action Plan's header runs a touch larger and sits over its subtitle rather
   than beside an icon tile. */
.module-page-title--plan {
  font-size: calc(33.5px * var(--text-scale));
  margin-bottom: 0.25rem;
}

.module-page-sub {
  font-family: var(--font-body);
  font-size: calc(17.5px * var(--text-scale));
  color: var(--text-secondary);
  margin: 0;
}

/* Action Plan's header, which carries buttons on the right instead of chips.
   The capture (module-action-plan.html) baseline-aligns the two columns on
   their bottom edge and sets a 1.5rem gutter between them. */
.module-page-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.module-page-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* The "Chapter N · Name" line, its info circle, and any page-supplied meta,
   under the title. */
.module-page-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.6rem;
}

/* Plain-text meta beside the chips ("6 of 6 written" on Roadmap). */
.module-page-meta-text {
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  color: var(--text-secondary);
}

/* ── Section header (uppercase label, optional right-hand meta/action) ── */

.module-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.module-section-label {
  font-family: var(--font-heading);
  font-size: calc(14px * var(--text-scale));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--navy-primary);
  font-weight: 600;
}

.module-section-meta {
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  color: var(--text-secondary);
}

/* The captures' right-hand "Edit with the coach" / "See the whole guide in
   your hub" text button: teal, body type, no chrome at all. */
.module-section-action,
.module-inline-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--teal-ink);
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.module-section-action:hover,
.module-inline-link:hover {
  text-decoration: underline;
  color: var(--teal-ink);
}

/* Inline inside a sentence (the footer note's "roadmap" / "hub" links). */
.module-inline-link {
  font: inherit;
  color: var(--teal-ink);
}

/* ── Cards ─────────────────────────────────────────────────────────── */

/* The plain white block every capture builds its sections from: no radius, no
   border, --shadow-md, 1.3rem of vertical padding and --card-x horizontal. */
.module-card {
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
  padding: 1.3rem var(--card-x);
}

.module-card + .module-card { margin-top: 0.7rem; }

.module-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.module-card-title {
  font-family: var(--font-heading);
  font-size: calc(18.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
  margin: 0;
}

.module-card-note {
  font-family: var(--font-body);
  font-size: calc(15.5px * var(--text-scale));
  color: var(--text-secondary);
  margin: 0.3rem 0 0;
}

/* The accent-bordered variant (probe cards, instrument rows). */
.module-card--accent { border-left: 4px solid var(--teal-accent); }
.module-card--warning { border-left: 4px solid var(--status-warning); }
.module-card--muted { border-left: 4px solid var(--border-medium); }

/* A section's own controls (a form's Save button, an "add another" link). */
.module-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

/* ── Rows (icon tile + body + trailing actions) ────────────────────── */

.module-rows {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.module-row {
  background: var(--bg-primary);
  border-left: 4px solid var(--teal-accent);
  box-shadow: var(--shadow-sm);
  padding: 1rem var(--card-x);
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.module-row--muted { border-left-color: var(--border-medium); }
.module-row--warning { border-left-color: var(--status-warning); }

.module-row-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--teal-light);
  color: var(--teal-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(19.5px * var(--text-scale));
}

.module-row-body {
  flex: 1 1 320px;
  min-width: 0;
}

.module-row-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.module-row-title {
  font-family: var(--font-heading);
  font-size: calc(18.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
  margin: 0;
}

.module-row-note {
  display: block;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 2px;
}

.module-row-value {
  display: block;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-dark);
  margin-top: 5px;
}

.module-row-aside {
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
  color: var(--text-muted);
}

.module-row-tags {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 6px;
}

.module-row-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Chips and pills ───────────────────────────────────────────────── */

/* The small teal context tag ("Sets the order of your whole roadmap"). Same
   geometry as .guide-chip, which the guide chrome already ships. */
.module-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--teal-light);
  color: var(--teal-ink);
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  line-height: 1.5;
}

/* The status pill ("Complete", "Taken", "Running", "Designed"). */
.module-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: calc(0.7rem + var(--text-bump));
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-full);
  line-height: 1.4;
  white-space: nowrap;
  background: var(--bg-secondary);
  color: var(--text-muted);
}

.module-pill--complete {
  background: var(--teal-light);
  color: var(--teal-ink);
}

.module-pill--warning {
  background: var(--status-warning-bg);
  color: var(--status-warning-deep);
}

/* ── Option tiles (numbered choice grid) ───────────────────────────── */

.module-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.7rem;
}

.module-tile {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  text-align: left;
  padding: 1rem;
  cursor: pointer;
  font-family: var(--font-body);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.module-tile.is-selected {
  background: var(--teal-light);
  border: 2px solid var(--teal-accent);
}

.module-tile-num {
  font-family: var(--font-ui);
  font-size: calc(14px * var(--text-scale));
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.module-tile.is-selected .module-tile-num {
  background: var(--teal-fill);
  color: #fff;
}

.module-tile-label {
  font-family: var(--font-heading);
  font-size: calc(17px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
  line-height: 1.35;
}

/* ── Card grid (the Roadmap foundation cards' shape) ───────────────── */

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
}

/* ── Dashed "add another" / empty affordance ───────────────────────── */

.module-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.9rem;
  border: 1px dashed var(--border-medium);
  text-align: center;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-muted);
  text-decoration: none;
}

.module-empty i { color: var(--teal-ink); }

/* ── Closing note ──────────────────────────────────────────────────── */

.module-foot-note {
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

/* Action Plan's closing line is left-aligned under the grid. */
.module-foot-note--left { text-align: left; }

/* ── Action Plan: per-area summary cards ───────────────────────────────
   Transcribed from docs/design-reference/extracted/module-action-plan.html:
   a row of auto-fitting cards above the grid, each a white block with a 4px
   status edge, the area's name and desired result, a slim progress track and
   an outlined "Continue this area". */

/* Flex, not grid (owner, 2026-08-18). A member holds one to five areas, and
   auto-fit tracks laid out four across with the fifth orphaned on a row of its
   own. Flex basis sets how many fit per row; flex-grow then makes whatever is
   on the last row share that row's full width, so three areas read as three
   wide cards and five read as five, with no empty track either way.

   The basis is the exact width of one card in an n-up row, gaps deducted, so
   n land per row and no more. Five across from 1024px — iPad landscape,
   deliberately tight (owner) — so the whole set is one glance on a tablet. */
.action-area-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.action-area-card {
  background: var(--bg-primary);
  border-left: 4px solid var(--status-warning);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem var(--card-x);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 560px) {
  .action-area-card { flex-basis: calc((100% - 1rem) / 2); }
}

@media (min-width: 768px) {
  .action-area-card { flex-basis: calc((100% - 2rem) / 3); }
}

@media (min-width: 1024px) {
  .action-area-card { flex-basis: calc((100% - 4rem) / 5); }
}

/* Five across on a 1024px tablet leaves about 170px a card. The card sheds
   horizontal padding and drops the name a step so the words keep their
   measure; it takes the full treatment back on a desktop screen. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .action-area-card { padding: 1rem 0.85rem; }
  .action-area-card-name { font-size: calc(16.5px * var(--text-scale)); }
  .action-area-card-note { font-size: calc(14px * var(--text-scale)); }
}

/* Cards in a row are the same height, so the longest desired result sets the
   height of all five. Unclamped, one long one made the row 450px tall and
   pushed the grid below the fold. Six lines is the cap once the cards are
   sharing a row; the full text is one click away in the area itself.

   The max-height is not belt-and-braces. The note is a flex: 1 child, so the
   card stretches it past the six lines the clamp asked for, and the seventh
   line prints under the ellipsis. Capping the box at six lines of its own
   line-height (1.6) is what actually clips it. */
@media (min-width: 768px) {
  .action-area-card-note {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 9.6em;
  }
}

.action-area-card--complete { border-left-color: var(--teal-accent); }
.action-area-card--empty { border-left-color: var(--border-medium); }

.action-area-card-name {
  font-family: var(--font-heading);
  font-size: calc(18.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
}

.action-area-card-note {
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
}

.action-area-card-track {
  background: var(--border-light);
  border-radius: var(--radius-full);
  height: 8px;
  overflow: hidden;
}

.action-area-card-fill {
  background: var(--teal-accent);
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--motion-ceremony) var(--ease-out);
}

.action-area-card-count {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: calc(0.875rem + var(--text-bump));
  margin: 0.5rem 0 0;
}

/* ── Re-skinning the older module sheets ──────────────────────────────
   Platform, People, Family, Faith, Philanthropy and Time each ship their own
   pre-redesign sheet (modules/platform.css and friends) with a rounded,
   1px-bordered "section" panel, a 1.25rem serif <h2> and a 900px page. The
   captures use one treatment for all of them: an unrounded white card with
   --shadow-md, a 14px uppercase label, and a 15px description. Rather than
   rewrite six sheets' worth of markup, this block restates that chrome in the
   design language — which is why this file loads after them.

   Anything below only applies inside a .module-page, so the module chat pages
   and the public/print surfaces keep the old sheet exactly as it was. */

/* The page column replaces each module's own width/gutter rules. */
.module-page.platform-container,
.module-page.people-container,
.module-page.family-container,
.module-page.faith-container,
.module-page.philanthropy-container,
.module-page.time-container {
  max-width: var(--module-page-width, 1220px);
  padding: 1.75rem 0 3.5rem;
}

.module-page .platform-section,
.module-page .faith-section,
.module-page .family-section,
.module-page .philanthropy-section,
.module-page .time-section,
.module-page .people-section {
  background: var(--bg-primary);
  border: none;
  border-radius: 0;
  box-shadow: var(--shadow-md);
  padding: 1.3rem var(--card-x);
  margin: 0;
}

.module-page .platform-section-header,
.module-page .faith-section-header,
.module-page .family-section-header,
.module-page .philanthropy-section-header,
.module-page .time-section-header,
.module-page .people-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.module-page .platform-section-header h2,
.module-page .faith-section-header h2,
.module-page .family-section-header h2,
.module-page .philanthropy-section-header h2,
.module-page .time-section-header h2,
.module-page .people-section-header h2,
.module-page .philanthropy-section-info h3 {
  font-family: var(--font-heading);
  font-size: calc(14px * var(--text-scale));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--navy-primary);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.module-page .platform-section-header h2 i,
.module-page .faith-section-header h2 i,
.module-page .family-section-header h2 i,
.module-page .philanthropy-section-header h2 i,
.module-page .time-section-header h2 i,
.module-page .people-section-header h2 i {
  color: var(--teal-ink);
  font-size: calc(15px * var(--text-scale));
}

.module-page .platform-section-description,
.module-page .faith-section-description,
.module-page .family-section-description,
.module-page .philanthropy-section-description,
.module-page .time-section-description,
.module-page .people-section-description {
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 0.85rem;
}

/* The "From your roadmap / other modules" context blocks all read as the
   capture's accent card: white, squared, a 4px teal edge. */
.module-page .platform-mission-card,
.module-page .family-context,
.module-page .faith-context,
.module-page .philanthropy-context {
  background: var(--bg-primary);
  border: none;
  border-left: 4px solid var(--teal-accent);
  border-radius: 0;
  box-shadow: var(--shadow-md);
  padding: 1.3rem var(--card-x);
  margin: 0;
}

.module-page .platform-mission-card.empty {
  border-left-color: var(--border-medium);
}

.module-page .family-context > h3,
.module-page .faith-context > h3,
.module-page .philanthropy-context > h3,
.module-page .platform-mission-header {
  font-family: var(--font-heading);
  font-size: calc(14px * var(--text-scale));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--navy-primary);
  font-weight: 600;
  margin: 0 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.module-page .family-context-label,
.module-page .faith-context-label,
.module-page .philanthropy-context-label {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: calc(11.5px * var(--text-scale));
  color: var(--text-muted);
}

.module-page .family-context-item p,
.module-page .faith-context-item p,
.module-page .philanthropy-context-item p,
.module-page .platform-mission-text {
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 2px 0 0;
}

/* Tables read as the captures' grid: a navy header band in body type, white
   rows at 15px, and the total picked out in teal (module-time.html, and the
   same treatment on the Action Plan grid). */
.module-page .time-table th,
.module-page .worlds-results-table thead th {
  background: var(--surface-inverse);
  color: #fff;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.6rem 0.7rem;
  border-bottom: none;
}

.module-page .time-table td,
.module-page .worlds-results-table td {
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-dark);
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--border-light);
}

.module-page .total-row {
  background: var(--teal-light);
}

.module-page .total-row td strong {
  color: var(--teal-ink);
  font-weight: 600;
}

/* Over/under allocation keeps the capture's warning tokens rather than the
   old red/amber washes. */
.module-page .total-row.over-allocated,
.module-page .total-row.under-allocated {
  background: var(--status-warning-bg);
}

.module-page .total-row.over-allocated td strong,
.module-page .total-row.under-allocated td strong {
  color: var(--status-warning-deep);
}

/* The clickable cards inside those modules — People's category rows, Family's
   eight section tiles — square off and take the captures' shadow and teal
   edge in place of the old rounded, 1px-bordered, gradient-filled treatment. */
.module-page .people-category-card,
.module-page .family-section-card,
.module-page .people-scripture,
.module-page .philanthropy-summary {
  background: var(--bg-primary);
  border: none;
  border-left: 4px solid var(--border-light);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}

.module-page .people-category-card:hover,
.module-page .family-section-card:hover,
.module-page .people-category-card:focus,
.module-page .family-section-card:focus {
  border-left-color: var(--teal-accent);
  box-shadow: var(--shadow-md);
  transform: none;
}

.module-page .family-section-card.has-content,
.module-page .people-category-card.has-entries {
  background: var(--bg-primary);
  border-left-color: var(--teal-accent);
}

/* The scripture block keeps its teal edge but loses the gradient. */
.module-page .people-scripture {
  background: var(--teal-light);
  border-left-color: var(--teal-accent);
}

.module-page .family-sections,
.module-page .people-categories,
.module-page .people-stats,
.module-page .people-scripture,
.module-page .family-questions-list {
  margin-bottom: 0;
}

/* Card titles inside those grids follow the captures' row-title scale. */
.module-page .people-category-content h3,
.module-page .family-section-content h3 {
  font-family: var(--font-heading);
  font-size: calc(18.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
}

.module-page .people-category-desc,
.module-page .family-section-content p {
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Three-source builder (action_plans/_source_builder) ───────────────
   The member's own mission / assessment / metrics, each with Lloyd's
   question and a make-an-area affordance. Renders on /action_plan and
   inside the choose_areas step body; collapses entirely at the five-area
   cap. Same white-card grammar as the per-area summary cards above. */

.source-builder {
  margin-bottom: 1.25rem;
}

.source-builder-status {
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}

.source-builder-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.source-builder-card {
  background: var(--bg-primary);
  border-left: 4px solid var(--teal-accent);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem var(--card-x);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.source-builder-label {
  font-family: var(--font-heading);
  font-size: calc(15px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.source-builder-quote {
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  color: var(--text-secondary);
  line-height: 1.6;
  border-left: 3px solid var(--border-light);
  padding-left: 0.75rem;
  margin: 0;
}

.source-builder-question {
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.source-builder-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.source-builder-form--inline {
  display: inline-flex;
  margin: 0;
}

.source-builder-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
}

.source-builder-areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.source-builder-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-primary);
}

.source-builder-empty {
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-muted);
  margin: 0;
  flex: 1;
}