/*
 * Cortex — Component primitives
 * Buttons, cards, badges, stats, tables, tabs, seg, progress, layout utilities.
 *
 * All classes are rd-prefixed. See docs/design-system.md for the full spec.
 */

@layer components {
  /* ---------- Buttons ----------
     Pop-art sticker default: 2px ink border + offset shadow + Bangers caps on
     every .rd-btn. This used to live behind .rd-btn.sticker; the redesign
     now wears that flair full-time so all buttons share a consistent
     silhouette. The .sticker class is kept as a no-op alias for back-compat
     with existing markup. Inline secondary actions opt out via .rd-btn-sm,
     and .rd-btn-ghost strips the chrome while keeping the type. */
  .rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    /* min-height locks every variant (text, icon-only, mixed) to the same
       silhouette so a row of mixed rd-btns lines up regardless of whether
       a button carries a label, an icon, or both. */
    min-height: calc(1em * 1.15 + 20px);
    border-radius: 0;
    font-family: var(--rd-font-display);
    font-size: var(--rd-text-base);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 2px solid var(--pop-ink);
    background: var(--rd-bg-sunken);
    color: var(--rd-fg);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--pop-shadow-sm);
    /* Bangers ships pre-slanted; never compound with italic. */
    font-style: normal;
    line-height: 1.15;
    transition:
      transform var(--rd-dur-fast) var(--rd-ease),
      box-shadow var(--rd-dur-fast) var(--rd-ease),
      background var(--rd-dur-fast) var(--rd-ease),
      color var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-btn:hover {
    background: var(--rd-bg-hover);
    color: var(--rd-fg);
    transform: translate(-1px, -1px);
    box-shadow: var(--pop-shadow);
  }
  .rd-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--pop-ink);
  }
  .rd-btn:disabled,
  .rd-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--pop-shadow-sm);
  }
  /* Tone the icon stroke down so it reads against the colored fills/page bg. */
  .rd-btn [data-icon],
  .rd-btn svg {
    opacity: 0.92;
  }

  .rd-btn-primary,
  .rd-btn.pink {
    background: var(--pop-pink);
    border-color: var(--pop-ink);
    color: #fff;
  }
  .rd-btn-primary:hover,
  .rd-btn.pink:hover {
    background: var(--pop-pink-hover);
    color: #fff;
  }

  .rd-btn.blue {
    background: var(--pop-blue);
    border-color: var(--pop-ink);
    color: #fff;
  }
  .rd-btn.blue:hover {
    background: var(--pop-blue-hover);
    color: #fff;
  }

  .rd-btn.yellow {
    background: var(--pop-yellow);
    border-color: var(--pop-ink);
    color: var(--pop-yellow-fg);
  }
  .rd-btn.yellow:hover {
    background: var(--pop-yellow);
    color: var(--pop-yellow-fg);
  }

  /* Ghost — strips the sticker chrome but keeps the typography so it can
     sit inline next to other rd-btns without towering over them. */
  .rd-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--rd-fg-muted);
    box-shadow: none;
  }
  .rd-btn-ghost:hover {
    background: var(--rd-bg-hover);
    border-color: transparent;
    color: var(--rd-fg);
    box-shadow: none;
    transform: none;
  }
  .rd-btn-ghost:active {
    transform: none;
    box-shadow: none;
  }

  .rd-btn-danger {
    color: var(--rd-danger);
    background: var(--rd-bg-sunken);
    border-color: var(--pop-ink);
  }
  .rd-btn-danger:hover {
    background: var(--rd-danger-soft);
    color: var(--rd-danger);
  }

  .rd-btn-danger-fill {
    background: var(--rd-danger);
    border-color: var(--pop-ink);
    color: #fff;
  }
  .rd-btn-danger-fill:hover {
    background: oklch(0.62 0.22 27);
    color: #fff;
  }

  /* Small / inline variant — deliberately flat. Used for table-row actions,
     comment-form submits, and other secondary spots where the sticker
     silhouette would be too loud. Drops Bangers, ink border, and shadow. */
  .rd-btn-sm {
    padding: 4px 10px;
    min-height: 0;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-text-xs);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    border-width: 1px;
    border-color: var(--rd-border);
    box-shadow: none;
  }
  .rd-btn-sm:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--rd-border-strong);
  }
  .rd-btn-sm:active {
    transform: none;
    box-shadow: none;
  }
  .rd-btn-sm:disabled,
  .rd-btn-sm[aria-disabled="true"] {
    box-shadow: none;
  }
  /* Color/ghost variants on a small button keep their fills but no shadow. */
  .rd-btn-sm.rd-btn-primary,
  .rd-btn-sm.rd-btn-danger,
  .rd-btn-sm.rd-btn-danger-fill,
  .rd-btn-sm.pink,
  .rd-btn-sm.blue,
  .rd-btn-sm.yellow {
    border-color: var(--pop-ink);
  }
  .rd-btn-sm.rd-btn-ghost {
    border-color: transparent;
  }

  /* Icon-only — same height as the default button so a row of mixed
     icon/text buttons all line up on the baseline. */
  .rd-btn-icon {
    padding: 8px;
    min-width: calc(1em * 1.15 + 16px + 4px);
  }
  .rd-btn-icon.rd-btn-sm {
    padding: 4px;
    min-width: 0;
  }

  /* No-op sticker alias — preserved so existing markup that explicitly
     opts into the sticker style continues to work. The styles now live on
     the base .rd-btn. */
  .rd-btn.sticker {
    /* intentionally empty */
  }

  .rd-btn-block {
    width: 100%;
    justify-content: center;
  }

  /* ---------- Cards ----------
     Pop-art default: 2px ink border + 3px offset shadow on every card.
     This used to live behind .rd-card.pop; the redesign now wears that
     flair full-time. Dark-mode shadow is softened in pop.css. */
  .rd-card {
    background: var(--rd-bg-raised);
    border: 2px solid var(--pop-ink);
    border-radius: 0;
    box-shadow: var(--pop-shadow);
    overflow: hidden;
  }
  .rd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rd-border);
    gap: 12px;
  }
  .rd-card-title {
    font-size: var(--rd-text-base);
    font-weight: 600;
    letter-spacing: -0.005em;
    margin: 0;
    font-family: var(--rd-font-sans);
    line-height: 1.3;
  }
  .rd-card-sub {
    font-size: var(--rd-text-sm);
    color: var(--rd-fg-muted);
  }
  .rd-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .rd-card-body {
    padding: 16px;
  }
  .rd-card-body-flush {
    padding: 0;
    /* Tables hosted in flush card bodies are too wide for phone
       viewports — let them scroll inside the card instead of pushing
       the page sideways. */
    overflow-x: auto;
  }
  /* When a card hosts a wide table directly (uncommon, but it happens
     with utility cards), the same horizontal-scroll guarantee
     applies. */
  .rd-card {
    max-width: 100%;
  }

  /* ---------- Badges ---------- */
  .rd-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--rd-text-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 0;
    background: var(--rd-bg-sunken);
    color: var(--rd-fg-muted);
    border: 1px solid var(--rd-border);
    white-space: nowrap;
    font-family: var(--rd-font-sans);
  }
  .rd-badge-active {
    background: var(--rd-success-soft);
    color: var(--rd-success);
    border-color: transparent;
  }
  .rd-badge-warn {
    background: var(--rd-warn-soft);
    color: var(--rd-warn);
    border-color: transparent;
  }
  .rd-badge-danger {
    background: var(--rd-danger-soft);
    color: var(--rd-danger);
    border-color: transparent;
  }
  .rd-badge-info {
    background: var(--rd-info-soft);
    color: var(--rd-info);
    border-color: transparent;
  }
  .rd-badge-accent {
    background: var(--rd-accent-soft);
    color: var(--rd-accent);
    border-color: transparent;
  }

  /* ProjectStatus palette variants. Colors mirror the 8 choices in
     ProjectStatus::COLORS — soft background with a readable tinted
     foreground that works in both light and dark themes. */
  .rd-badge-color-gray {
    background: oklch(0.70 0.006 60 / 0.18);
    color: var(--rd-fg-muted);
    border-color: transparent;
  }
  .rd-badge-color-red {
    background: oklch(0.68 0.22 27 / 0.14);
    color: oklch(0.68 0.22 27);
    border-color: transparent;
  }
  .rd-badge-color-orange {
    background: oklch(0.72 0.17 55 / 0.16);
    color: oklch(0.72 0.17 55);
    border-color: transparent;
  }
  .rd-badge-color-yellow {
    background: oklch(0.80 0.15 85 / 0.22);
    color: oklch(0.68 0.14 80);
    border-color: transparent;
  }
  .rd-badge-color-green {
    background: oklch(0.72 0.16 155 / 0.14);
    color: oklch(0.72 0.16 155);
    border-color: transparent;
  }
  .rd-badge-color-blue {
    background: oklch(0.72 0.14 240 / 0.14);
    color: oklch(0.72 0.14 240);
    border-color: transparent;
  }
  .rd-badge-color-purple {
    background: oklch(0.66 0.18 300 / 0.16);
    color: oklch(0.66 0.18 300);
    border-color: transparent;
  }
  .rd-badge-color-pink {
    background: oklch(0.68 0.22 0 / 0.14);
    color: oklch(0.68 0.22 0);
    border-color: transparent;
  }

  .rd-badge-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
  }

  /* ---------- Stand-alone stat card (when not part of rd-stat-row) ---------- */
  .rd-stat-card {
    background: var(--rd-bg-raised);
    border: 2px solid var(--pop-ink);
    border-radius: 0;
    box-shadow: var(--pop-shadow);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  /* Tonal stat cards keep the ink chrome — only the fill changes. */
  .rd-stat-card-success { background: var(--rd-success-soft); }
  .rd-stat-card-danger  { background: var(--rd-danger-soft); }
  .rd-stat-card-warning { background: var(--rd-warn-soft); }
  .rd-stat-card-info    { background: var(--rd-info-soft); }

  /* ---------- Stat tile ---------- */
  .rd-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .rd-stat-row-2 { grid-template-columns: repeat(2, 1fr); }
  .rd-stat-row-3 { grid-template-columns: repeat(3, 1fr); }
  .rd-stat-row-4 { grid-template-columns: repeat(4, 1fr); }
  .rd-stat-row-5 { grid-template-columns: repeat(5, 1fr); }
  @media (max-width: 1200px) {
    .rd-stat-row-5 {
      grid-template-columns: repeat(3, 1fr);
    }
    .rd-stat-row-5 .rd-stat:nth-child(3n) {
      border-right: 0;
    }
    .rd-stat-row-5 .rd-stat:nth-child(n + 4) {
      border-top: 1px solid var(--rd-border);
    }
  }
  /* Below 900px (tablet/phone) every stat row collapses to a 2-column
     grid. We use !important so this wins against inline
     grid-template-columns overrides used in legacy views — those were
     fine on desktop but break the mobile layout. */
  @media (max-width: 900px) {
    .rd-stat-row,
    .rd-stat-row-3,
    .rd-stat-row-4,
    .rd-stat-row-5 {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    .rd-stat-row-5 .rd-stat:nth-child(3n) {
      border-right: 1px solid var(--rd-border);
    }
    .rd-stat-row-5 .rd-stat:nth-child(2n) {
      border-right: 0;
    }
    .rd-stat-row-5 .rd-stat:nth-child(n + 3) {
      border-top: 1px solid var(--rd-border);
    }
  }
  /* Phones: stat values can grow to long currency strings
     ($5,910,437.16). Tighten padding and rein in font size so two
     columns still fit at 375px without overflow. */
  @media (max-width: 540px) {
    .rd-stat {
      padding: 10px 12px;
    }
    .rd-stat-value {
      font-size: var(--rd-text-lg);
    }
  }
  .rd-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border-right: 1px solid var(--rd-border);
    min-width: 0;
  }
  .rd-stat:last-child {
    border-right: 0;
  }
  @media (max-width: 900px) {
    .rd-stat:nth-child(2n) {
      border-right: 0;
    }
    .rd-stat:nth-child(n + 3) {
      border-top: 1px solid var(--rd-border);
    }
  }
  .rd-stat-label {
    font-size: var(--rd-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-fg-subtle);
    font-weight: 500;
  }
  .rd-stat-value {
    font-size: var(--rd-text-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-top: 4px;
    color: var(--rd-fg);
  }
  .rd-stat-value-danger { color: var(--rd-danger); }
  .rd-stat-value-warn { color: var(--rd-warn); }
  .rd-stat-value-success { color: var(--rd-success); }
  .rd-stat-value-unit {
    font-size: var(--rd-text-base);
    font-weight: 500;
    color: var(--rd-fg-muted);
  }
  .rd-stat-delta {
    font-size: var(--rd-text-xs);
    color: var(--rd-fg-muted);
    margin-top: 2px;
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .rd-stat-delta-up { color: var(--rd-success); }
  .rd-stat-delta-down { color: var(--rd-danger); }

  /* ---------- Tables ---------- */
  .rd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rd-text-base);
    font-family: var(--rd-font-sans);
  }
  .rd-table thead th {
    text-align: left;
    font-weight: 500;
    font-size: var(--rd-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rd-fg-subtle);
    padding: 10px 14px;
    background: var(--rd-bg-sunken);
    border-bottom: 1px solid var(--rd-border);
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .rd-table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--rd-border);
    vertical-align: middle;
    color: var(--rd-fg);
  }
  .rd-table tbody tr:hover {
    background: var(--rd-bg-hover);
  }
  .rd-table tbody tr:last-child td {
    border-bottom: 0;
  }
  .rd-table tfoot td {
    padding: 9px 14px;
    border-top: 1px solid var(--rd-border);
    border-bottom: 0;
    vertical-align: middle;
    color: var(--rd-fg);
    font-size: var(--rd-text-base);
  }
  .rd-table tfoot tr:first-child td {
    border-top: 1px solid var(--rd-border-strong);
  }
  .rd-table tfoot tr + tr td {
    border-top: 1px solid var(--rd-border);
  }
  .rd-table .rd-num,
  .rd-table td.rd-num,
  .rd-table th.rd-num {
    font-family: var(--rd-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--rd-text-sm);
    text-align: right;
  }
  .rd-table thead th.rd-num {
    text-align: right;
  }
  .rd-table tfoot td.rd-num {
    font-size: var(--rd-text-sm);
  }
  .rd-table .rd-muted {
    color: var(--rd-fg-muted);
  }

  /* ---------- Segmented control ---------- */
  .rd-seg {
    display: inline-flex;
    background: var(--rd-bg-sunken);
    border: 2px solid var(--pop-ink);
    border-radius: 0;
    box-shadow: var(--pop-shadow-sm);
    padding: 2px;
    gap: 0;
    /* Allow horizontal scrolling when the control is wider than its
       container (mobile). Without this, individual labels wrap inside
       their button and the bar grows tall. */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rd-seg::-webkit-scrollbar {
    display: none;
  }
  .rd-seg button,
  .rd-seg a {
    border: 0;
    background: transparent;
    padding: 4px 12px;
    font-size: var(--rd-text-sm);
    font-weight: 500;
    border-radius: 0;
    color: var(--rd-fg-muted);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .rd-seg button[aria-pressed="true"],
  .rd-seg a[aria-current="true"],
  .rd-seg a.is-active {
    background: var(--rd-bg-raised);
    color: var(--rd-fg);
    box-shadow: var(--rd-shadow-sm);
  }
  .rd-seg button:hover:not([aria-pressed="true"]),
  .rd-seg a:hover:not([aria-current="true"]):not(.is-active) {
    color: var(--rd-fg);
  }

  /* ---------- Tabs ---------- */
  .rd-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--rd-border);
    margin-bottom: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .rd-tabs::-webkit-scrollbar {
    display: none;
  }
  .rd-tab {
    border: 0;
    background: none;
    padding: 10px 14px;
    font-size: var(--rd-text-base);
    font-weight: 500;
    color: var(--rd-fg-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
  }
  .rd-tab:hover {
    color: var(--rd-fg);
  }
  .rd-tab[aria-current="true"],
  .rd-tab.is-active {
    color: var(--rd-fg);
    border-bottom-color: var(--rd-accent);
  }
  .rd-tab-count {
    font-family: var(--rd-font-mono);
    font-size: var(--rd-text-2xs);
    color: var(--rd-fg-subtle);
    background: var(--rd-bg-sunken);
    padding: 1px 5px;
    border-radius: 0;
  }

  /* ---------- Progress ---------- */
  .rd-progress {
    position: relative;
    height: 8px;
    background: var(--rd-bg-sunken);
    border-radius: 0;
    overflow: hidden;
    display: flex;
  }
  .rd-progress > span {
    display: block;
    height: 100%;
    background: var(--rd-accent);
  }
  .rd-progress-warn > span { background: var(--rd-warn); }
  .rd-progress-danger > span { background: var(--rd-danger); }
  .rd-progress-success > span { background: var(--rd-success); }

  /* ---------- Stacked progress (multi-segment with legend) ---------- */
  .rd-progress-stack-wrap {
    display: block;
  }
  .rd-progress-stack {
    display: flex;
    height: 10px;
    background: var(--rd-bg-sunken);
    border: 1px solid var(--rd-border);
    border-radius: 0;
    overflow: hidden;
  }
  .rd-progress-stack-sm { height: 6px; }
  .rd-progress-stack-lg { height: 14px; }

  .rd-progress-stack-seg {
    display: block;
    height: 100%;
    background: var(--rd-accent);
    transition: width var(--rd-dur) var(--rd-ease);
  }
  .rd-progress-stack-seg-positive,
  .rd-progress-stack-seg-success,
  .rd-progress-stack-seg-green { background: var(--rd-success); }
  .rd-progress-stack-seg-warn,
  .rd-progress-stack-seg-yellow { background: var(--rd-warn); }
  .rd-progress-stack-seg-danger,
  .rd-progress-stack-seg-negative,
  .rd-progress-stack-seg-red { background: var(--rd-danger); }
  .rd-progress-stack-seg-info,
  .rd-progress-stack-seg-blue { background: var(--rd-info); }
  .rd-progress-stack-seg-accent,
  .rd-progress-stack-seg-pink { background: var(--rd-accent); }

  .rd-progress-stack-seg-striped {
    background-image: repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.28) 0 4px,
      transparent 4px 8px
    );
  }

  .rd-progress-stack-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
  }
  .rd-progress-stack-legend-center {
    justify-content: center;
  }
  .rd-progress-stack-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--rd-text-sm);
  }
  .rd-progress-stack-swatch {
    width: 10px;
    height: 10px;
    border-radius: 0;
    flex: 0 0 auto;
    background: var(--rd-fg-faint);
  }
  .rd-progress-stack-legend-label {
    color: var(--rd-fg-muted);
  }
  .rd-progress-stack-legend-value {
    color: var(--rd-fg);
    font-weight: 500;
  }

  /* ---------- Bars (sparkline) ---------- */
  .rd-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 38px;
  }
  .rd-bars span {
    width: 7px;
    background: var(--rd-accent-soft);
    border-radius: 0;
    position: relative;
    display: block;
  }
  .rd-bars span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--rd-accent), transparent 85%);
    opacity: 0.85;
    border-radius: 0;
  }

  /* ---------- Avatar (self-sufficient, square) ---------- */
  .rd-av {
    width: 22px;
    height: 22px;
    inline-size: 22px;
    block-size: 22px;
    min-inline-size: 22px;
    min-block-size: 22px;
    max-inline-size: none;
    max-width: none;
    aspect-ratio: 1 / 1;
    border-radius: var(--rd-radius-sm);
    display: inline-grid;
    place-items: center;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-text-2xs);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--rd-fg-faint);
    flex-shrink: 0;
    overflow: hidden;
    vertical-align: middle;
  }
  img.rd-av,
  .rd-av-img {
    width: 22px;
    height: 22px;
    inline-size: 22px;
    block-size: 22px;
    max-inline-size: none;
    max-width: none;
    object-fit: cover;
    display: block;
    background: var(--rd-bg-sunken);
    color: transparent;
  }
  .rd-av-empty {
    background: var(--rd-bg-sunken);
    color: var(--rd-fg-faint);
    border: 1px dashed var(--rd-border);
  }
  .rd-av-overflow {
    background: var(--rd-fg-faint);
    color: var(--rd-bg);
  }

  /* ---------- Avatar groups (overlapping) ---------- */
  .rd-avs {
    display: inline-flex;
  }
  .rd-avs .rd-av {
    border: 2px solid var(--rd-bg-raised);
    margin-left: -6px;
  }
  .rd-avs .rd-av:first-child {
    margin-left: 0;
  }

  /* ---------- Option row (selectable list item in modals / menus) ---------- */
  .rd-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: var(--rd-bg-raised);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
    color: var(--rd-fg);
    font-family: inherit;
    font-size: var(--rd-text-sm);
    text-align: left;
    cursor: pointer;
    transition:
      background var(--rd-dur-fast) var(--rd-ease),
      border-color var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-option-row:hover {
    background: var(--rd-bg-hover);
    border-color: var(--rd-border-strong);
  }
  .rd-option-row:focus-visible {
    outline: none;
    border-color: var(--rd-border-focus);  }
  .rd-option-row:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .rd-option-row-title {
    font-weight: 500;
    color: var(--rd-fg);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---------- Chip ---------- */
  .rd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-full);
    background: var(--rd-bg-raised);
    font-size: var(--rd-text-xs);
    color: var(--rd-fg-muted);
  }

  /* ---------- Inline icon (activity feed, stat icons) ---------- */
  .rd-ic {
    display: inline-grid;
    place-items: center;
    border-radius: 0;
    flex: 0 0 auto;
    background: var(--rd-bg-sunken);
    color: var(--rd-fg-muted);
  }
  .rd-ic-sm { width: 24px; height: 24px; }
  .rd-ic-md { width: 32px; height: 32px; }
  .rd-ic-success { background: var(--rd-success-soft); color: var(--rd-success); }
  .rd-ic-info    { background: var(--rd-info-soft);    color: var(--rd-info); }
  .rd-ic-warn    { background: var(--rd-warn-soft);    color: var(--rd-warn); }
  .rd-ic-danger  { background: var(--rd-danger-soft);  color: var(--rd-danger); }
  .rd-ic-accent  { background: var(--rd-accent-soft);  color: var(--rd-accent); }

  /* ---------- Layout utilities ---------- */
  .rd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .rd-col { display: flex; flex-direction: column; }
  .rd-gap-1 { gap: 4px; }
  .rd-gap-2 { gap: 8px; }
  .rd-gap-3 { gap: 12px; }
  .rd-gap-4 { gap: 16px; }
  .rd-gap-6 { gap: 24px; }
  .rd-flex-1 { flex: 1; min-width: 0; }
  .rd-space-between { justify-content: space-between; }

  .rd-muted  { color: var(--rd-fg-muted); }
  .rd-subtle { color: var(--rd-fg-subtle); }
  .rd-mono   { font-family: var(--rd-font-mono); font-variant-numeric: tabular-nums; }

  .rd-link {
    color: var(--rd-fg);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-link:hover {
    border-bottom-color: var(--rd-accent);
    color: var(--rd-accent);
  }
  .rd-link-accent {
    color: var(--rd-accent);
  }
  .rd-link-muted {
    color: var(--rd-fg-muted);
  }

  /* ---------- Color swatches (user-selectable label colors) ---------- */
  .rd-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: var(--rd-radius-sm);
    border: 1px solid var(--rd-border);
    vertical-align: middle;
    margin-right: 6px;
  }
  .rd-color-swatch-red    { background: oklch(0.68 0.22 27); border-color: transparent; }
  .rd-color-swatch-orange { background: oklch(0.72 0.17 55); border-color: transparent; }
  .rd-color-swatch-yellow { background: oklch(0.80 0.15 85); border-color: transparent; }
  .rd-color-swatch-green  { background: oklch(0.72 0.16 155); border-color: transparent; }
  .rd-color-swatch-blue   { background: oklch(0.72 0.14 240); border-color: transparent; }
  .rd-color-swatch-purple { background: oklch(0.66 0.18 300); border-color: transparent; }
  .rd-color-swatch-pink   { background: oklch(0.68 0.22 0); border-color: transparent; }
  .rd-color-swatch-gray   { background: oklch(0.70 0.006 60); border-color: transparent; }

  /* ---------- Color picker (radio group) ---------- */
  .rd-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .rd-color-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--rd-radius-md);
    border: 1px solid var(--rd-border);
    cursor: pointer;
    transition: transform var(--rd-dur-fast) var(--rd-ease),
                box-shadow var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-color-option input[type="radio"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
  }
  .rd-color-option-swatch {
    width: 20px;
    height: 20px;
    border-radius: var(--rd-radius-sm);
    display: grid;
    place-items: center;
    color: #fff;
  }
  .rd-color-option-check {
    opacity: 0;
  }
  .rd-color-option:hover {
    border-color: var(--rd-border-strong);
  }
  .rd-color-option:has(input[type="radio"]:checked) {
    border-color: var(--rd-fg);
    box-shadow: 0 0 0 2px var(--rd-accent-soft);
  }
  .rd-color-option:has(input[type="radio"]:checked) .rd-color-option-check {
    opacity: 1;
  }

  .rd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .rd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .rd-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  /* Below the sidebar breakpoint there isn't room for multi-column
     grids — collapse to a single column. The 3- and 4-up grids step
     down to two columns first, then to one on phones. */
  @media (max-width: 900px) {
    .rd-grid-2 { grid-template-columns: 1fr; }
    .rd-grid-3,
    .rd-grid-4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .rd-grid-3,
    .rd-grid-4 { grid-template-columns: 1fr; }
  }

  .rd-stack-2 { display: flex; flex-direction: column; gap: 8px; }
  .rd-stack-3 { display: flex; flex-direction: column; gap: 12px; }
  .rd-stack-4 { display: flex; flex-direction: column; gap: 16px; }

  .rd-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
  }
  @media (max-width: 1200px) {
    .rd-split {
      grid-template-columns: 1fr;
    }
  }

  .rd-hr {
    height: 1px;
    background: var(--rd-border);
    border: 0;
    margin: 0;
  }

  /* ---------- Callouts ---------- */
  .rd-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid var(--pop-ink);
    border-radius: 0;
    box-shadow: var(--pop-shadow-sm);
    background: var(--rd-bg-raised);
    color: var(--rd-fg);
    font-size: var(--rd-text-base);
  }
  /* Tonal variants keep the ink chrome — only the fill changes. */
  .rd-callout-info    { background: var(--rd-info-soft);    color: var(--rd-fg); }
  .rd-callout-warn    { background: var(--rd-warn-soft);    color: var(--rd-fg); }
  .rd-callout-danger  { background: var(--rd-danger-soft);  color: var(--rd-fg); }
  .rd-callout-success { background: var(--rd-success-soft); color: var(--rd-fg); }
  .rd-callout-accent  { background: var(--rd-accent-soft);  color: var(--rd-fg); }
  .rd-callout .rd-callout-body { flex: 1; min-width: 0; }
  .rd-callout strong { font-weight: 600; }

  /* A button_to wrapper for inline placement in toolbars / action groups. */
  .rd-inline-form {
    display: inline-flex;
    margin: 0;
  }

  /* ---------- Form controls ---------- */
  .rd-input,
  .rd-select {
    appearance: none;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-text-sm);
    color: var(--rd-fg);
    background: var(--rd-bg-raised);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
    padding: 6px 10px;
    line-height: 1.2;
    min-width: 0;
    transition: border-color var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-input:hover,
  .rd-select:hover,
  .rd-textarea:hover {
    border-color: var(--rd-border-strong);
  }
  .rd-input:focus,
  .rd-select:focus,
  .rd-textarea:focus {
    outline: none;
    border-color: var(--rd-border-focus);  }
  .rd-input::placeholder,
  .rd-textarea::placeholder {
    color: var(--rd-fg-subtle);
  }
  .rd-input:disabled,
  .rd-select:disabled,
  .rd-textarea:disabled {
    background: var(--rd-bg-sunken);
    color: var(--rd-fg-muted);
    cursor: not-allowed;
  }
  .rd-input-lg {
    padding: 8px 12px;
    font-size: var(--rd-text-base);
  }
  .rd-input-full {
    width: 100%;
  }
  .rd-textarea {
    appearance: none;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-text-sm);
    color: var(--rd-fg);
    background: var(--rd-bg-raised);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
    padding: 8px 10px;
    line-height: 1.45;
    min-width: 0;
    min-height: 88px;
    resize: vertical;
    transition: border-color var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-select {
    padding-right: 28px;
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 12px top 12px, right 8px top 12px;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  /* ---------- Form layout helpers ---------- */
  .rd-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .rd-field > .rd-input,
  .rd-field > .rd-select,
  .rd-field > .rd-textarea,
  .rd-field > input[type="text"]:not([class]),
  .rd-field > input[type="email"]:not([class]),
  .rd-field > input[type="url"]:not([class]),
  .rd-field > input[type="number"]:not([class]),
  .rd-field > input[type="password"]:not([class]),
  .rd-field > input[type="date"]:not([class]),
  .rd-field > input[type="month"]:not([class]),
  .rd-field > input[type="datetime-local"]:not([class]),
  .rd-field > input[type="tel"]:not([class]),
  .rd-field > input[type="search"]:not([class]),
  .rd-field > textarea:not([class]),
  .rd-field > select:not([class]) {
    appearance: none;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-text-sm);
    color: var(--rd-fg);
    background: var(--rd-bg-sunken);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
    padding: 6px 10px;
    line-height: 1.2;
    width: 100%;
    transition: border-color var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-field > textarea:not([class]) {
    padding: 8px 10px;
    min-height: 88px;
    line-height: 1.45;
    resize: vertical;
  }
  .rd-field > input:focus:not([class]),
  .rd-field > textarea:focus:not([class]),
  .rd-field > select:focus:not([class]) {
    outline: none;
    border-color: var(--rd-border-focus);  }
  .rd-field > input::placeholder:not([class]),
  .rd-field > textarea::placeholder:not([class]) {
    color: var(--rd-fg-subtle);
  }
  .rd-field-label {
    display: block;
    font-size: var(--rd-text-sm);
    font-weight: 500;
    color: var(--rd-fg);
  }
  .rd-field-hint {
    font-size: var(--rd-text-xs);
    color: var(--rd-fg-muted);
    margin: 0;
  }
  .rd-field-error {
    font-size: var(--rd-text-xs);
    color: var(--rd-danger);
    margin: 0;
  }
  .rd-field-checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }
  .rd-field-checkbox > input[type="checkbox"],
  .rd-field-checkbox > input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--rd-accent);
  }
  .rd-field-checkbox > .rd-field-label {
    font-weight: 400;
    cursor: pointer;
  }
  .rd-field-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }
  .rd-field-group-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  @media (max-width: 640px) {
    .rd-field-group-2 {
      grid-template-columns: 1fr;
    }
  }
  .rd-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;
  }
  .rd-form-actions-split {
    justify-content: space-between;
  }
  .rd-form-error-summary {
    padding: 10px 14px;
    border-radius: var(--rd-radius-md);
    background: var(--rd-danger-soft);
    color: var(--rd-fg);
    font-size: var(--rd-text-sm);
    border: 1px solid transparent;
  }
  .rd-form-error-summary strong {
    color: var(--rd-danger);
    font-weight: 600;
  }
  .rd-form-error-summary ul {
    margin: 6px 0 0;
    padding-left: 20px;
  }

  .rd-search-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
    background: var(--rd-bg-raised);
    color: var(--rd-fg-muted);
    min-width: 220px;
  }
  @media (max-width: 720px) {
    .rd-search-field {
      min-width: 0;
      flex: 1 1 140px;
    }
  }
  .rd-search-field input {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--rd-fg);
    font-family: inherit;
    font-size: var(--rd-text-sm);
    flex: 1;
    min-width: 0;
  }

  /* ---------- Toolbar (row above tables) ---------- */
  .rd-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .rd-toolbar-start,
  .rd-toolbar-end {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .rd-toolbar-end {
    margin-left: auto;
  }
  /* When both groups are present, distribute via space-between so a wrapped
     end group sits flush left on its new row instead of dangling right. */
  .rd-toolbar:has(> .rd-toolbar-start) {
    justify-content: space-between;
  }
  .rd-toolbar:has(> .rd-toolbar-start) > .rd-toolbar-end {
    margin-left: 0;
  }
  .rd-date-nav,
  .rd-date-nav-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .rd-date-nav-form {
    margin: 0;
  }
  .rd-date-nav-input {
    inline-size: 9.5rem;
    max-inline-size: 100%;
  }

  /* ---------- Definition list (rail details) ---------- */
  .rd-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 14px;
    margin: 0;
    font-size: var(--rd-text-sm);
  }
  .rd-dl dt {
    color: var(--rd-fg-subtle);
    font-weight: 400;
  }
  .rd-dl dd {
    margin: 0;
    font-weight: 500;
    color: var(--rd-fg);
    min-width: 0;
  }

  /* ---------- Table burn (inline budget progress) ---------- */
  .rd-burn {
    min-width: 120px;
  }
  .rd-burn-head {
    display: flex;
    justify-content: space-between;
    font-size: var(--rd-text-xs);
    margin-bottom: 3px;
    font-family: var(--rd-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .rd-burn-bar {
    height: 4px;
    background: var(--rd-bg-sunken);
    border-radius: var(--rd-radius-full);
    overflow: hidden;
  }
  .rd-burn-bar > span {
    display: block;
    height: 100%;
    background: var(--rd-success);
  }
  .rd-burn-warn  > span { background: var(--rd-warn); }
  .rd-burn-danger > span { background: var(--rd-danger); }
  .rd-burn-tone-warn  { color: var(--rd-warn); }
  .rd-burn-tone-danger { color: var(--rd-danger); }

  /* ---------- Eyebrow / meta row (small muted text above headings) ---------- */
  .rd-page-eyebrow {
    font-size: var(--rd-text-sm);
    color: var(--rd-fg-subtle);
    margin-bottom: 4px;
  }
  .rd-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    color: var(--rd-fg-muted);
    font-size: var(--rd-text-sm);
  }
  .rd-meta .rd-meta-sep {
    color: var(--rd-fg-faint);
  }

  /* ---------- Table cell helpers ---------- */
  .rd-table .rd-table-actions {
    text-align: right;
    white-space: nowrap;
  }
  /* Buttons inside a row-actions cell drop the sticker chrome so they sit
     flush within the dense table grid. They behave like .rd-btn-sm but
     without requiring callers to remember the size class. */
  .rd-table .rd-table-actions .rd-btn {
    padding: 4px 10px;
    min-height: 0;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-text-xs);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    border-width: 1px;
    border-color: var(--rd-border);
    box-shadow: none;
  }
  .rd-table .rd-table-actions .rd-btn:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--rd-border-strong);
  }
  .rd-table .rd-table-actions .rd-btn-icon {
    padding: 4px;
    min-width: 0;
  }
  .rd-table .rd-table-actions .rd-btn-ghost {
    border-color: transparent;
  }

  /* ---------- Avatar color ramp (deterministic from string) ---------- */
  .rd-av-0 { background: oklch(0.68 0.16 260); }
  .rd-av-1 { background: oklch(0.7  0.18 155); }
  .rd-av-2 { background: oklch(0.74 0.16 50);  }
  .rd-av-3 { background: oklch(0.68 0.18 300); }
  .rd-av-4 { background: oklch(0.68 0.2  20);  }
  .rd-av-5 { background: oklch(0.72 0.14 200); }
  .rd-av-6 { background: oklch(0.66 0.16 120); }
  .rd-av-7 { background: oklch(0.7  0.18 330); }

  /* ---------- Empty state ---------- */
  .rd-empty {
    text-align: center;
    padding: 56px 20px;
    color: var(--rd-fg-muted);
  }
  .rd-empty > svg {
    margin-inline: auto;
  }
  .rd-empty h2 {
    font-size: var(--rd-text-lg);
    font-weight: 600;
    color: var(--rd-fg);
    margin: 8px 0 4px;
    font-family: var(--rd-font-sans);
    letter-spacing: -0.01em;
  }
  .rd-empty p {
    margin: 0 0 16px;
    font-size: var(--rd-text-sm);
  }
  .rd-empty-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ---------- Dropdown menu ---------- */
  .rd-dropdown {
    position: relative;
    display: inline-flex;
  }
  .rd-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 200px;
    background: var(--rd-bg-raised);
    border: 2px solid var(--pop-ink);
    border-radius: 0;
    box-shadow: var(--pop-shadow);
    padding: 4px;
    z-index: 40;
  }
  .rd-dropdown-menu-right {
    left: auto;
    right: 0;
  }
  .rd-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-text-sm);
    font-weight: 500;
    color: var(--rd-fg);
    background: transparent;
    border: 0;
    border-radius: var(--rd-radius-sm);
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
    transition: background var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-dropdown-item:hover,
  .rd-dropdown-item:focus-visible {
    background: var(--rd-bg-hover);
    color: var(--rd-fg);
    outline: none;
  }
  .rd-dropdown-item svg {
    color: var(--rd-fg-muted);
    flex: 0 0 auto;
  }
  .rd-dropdown-item-danger {
    color: var(--rd-danger);
  }
  .rd-dropdown-item-danger:hover,
  .rd-dropdown-item-danger:focus-visible {
    background: var(--rd-danger-soft);
    color: var(--rd-danger);
  }
  .rd-dropdown-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--rd-border);
    border: 0;
  }

  /* Dropdown rendered via the HTML popover attribute.
     Renders in the top layer so it escapes overflow:auto/hidden ancestors.
     The wi-row-menu Stimulus controller positions it relative to its
     anchor button on open. */
  .rd-popover-menu {
    position: fixed;
    inset: unset;
    margin: 0;
    overflow: visible;
  }

  /* ---------- Pagination ---------- */
  .rd-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    font-size: var(--rd-text-sm);
    color: var(--rd-fg-muted);
  }
  .rd-pagination .rd-pagination-actions {
    display: inline-flex;
    gap: 8px;
  }

  /* ---------- Allocation groups (active now / upcoming / past) ---------- */
  .rd-alloc-group {
    border-top: 1px solid var(--rd-border);
  }
  .rd-alloc-group:first-child {
    border-top: 0;
  }
  .rd-alloc-group-label {
    display: block;
    padding: 10px 14px 4px;
    font-size: var(--rd-text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rd-fg-subtle);
  }
  .rd-alloc-group-toggle {
    cursor: pointer;
    list-style: none;
  }
  .rd-alloc-group-toggle::-webkit-details-marker {
    display: none;
  }
  .rd-alloc-group-toggle::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    font-size: var(--rd-text-2xs);
    transition: transform var(--rd-dur-fast) var(--rd-ease);
  }
  details[open] > .rd-alloc-group-toggle::before {
    transform: rotate(90deg);
  }

  /* ---------- Allocation row ---------- */
  .rd-alloc-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rd-border);
    transition: background var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-alloc-row:last-child {
    border-bottom: 0;
  }
  .rd-alloc-row:hover {
    background: var(--rd-bg-hover);
  }
  .rd-alloc-row-ended {
    opacity: 0.65;
  }
  .rd-alloc-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .rd-alloc-title {
    font-weight: 500;
    color: var(--rd-fg);
  }
  .rd-alloc-link {
    color: inherit;
    text-decoration: none;
  }
  .rd-alloc-link:hover {
    color: var(--rd-accent);
  }
  .rd-alloc-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-size: var(--rd-text-sm);
    font-family: var(--rd-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .rd-alloc-pct {
    font-weight: 600;
    color: var(--rd-fg);
  }
  .rd-alloc-notes {
    margin-top: 2px;
    padding-left: 10px;
    border-left: 2px solid var(--rd-border);
    font-size: var(--rd-text-sm);
    color: var(--rd-fg-muted);
    white-space: pre-wrap;
  }

  /* ---------- Workload strip (single-member, 12 weeks) ---------- */
  .rd-wl-strip {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 6px;
  }
  .rd-wl-strip-cell {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: center;
  }
  .rd-wl-strip-cell .rd-wl-pill {
    min-height: 56px;
    padding: 8px 4px;
    gap: 3px;
  }
  .rd-wl-strip-week {
    font-size: var(--rd-text-2xs);
    font-weight: 500;
    opacity: 0.7;
    font-family: var(--rd-font-sans);
    letter-spacing: 0.02em;
  }
  .rd-wl-strip-pct {
    font-size: var(--rd-text-base);
    font-weight: 600;
    font-family: var(--rd-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .rd-wl-strip-cell:hover .rd-wl-pill {
    transform: translateY(-1px);
    box-shadow: var(--rd-shadow-sm);
  }

  /* ---------- Input with inline suffix/prefix ---------- */
  .rd-input-group {
    display: flex;
    align-items: stretch;
  }
  .rd-input-group > input:not([class]),
  .rd-input-group > select:not([class]) {
    appearance: none;
    flex: 1;
    min-width: 0;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-text-sm);
    color: var(--rd-fg);
    background: var(--rd-bg-raised);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
    padding: 6px 10px;
    line-height: 1.2;
    transition: border-color var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-input-group > input:focus:not([class]),
  .rd-input-group > select:focus:not([class]) {
    outline: none;
    border-color: var(--rd-border-focus);    z-index: 1;
  }
  .rd-input-group > input:not([class]):not(:last-child),
  .rd-input-group > select:not([class]):not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
  }
  .rd-input-group > input:not([class]):not(:first-child),
  .rd-input-group > select:not([class]):not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0;
  }
  .rd-input-suffix,
  .rd-input-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    background: var(--rd-bg-sunken);
    border: 1px solid var(--rd-border);
    color: var(--rd-fg-muted);
    font-size: var(--rd-text-sm);
    font-family: var(--rd-font-sans);
  }
  .rd-input-suffix {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  .rd-input-prefix {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
}