/* ===========================================
   FORM-INSPECTOR.CSS — Prescribing desktop primitives (≥900px)
   ===========================================

   Used by DMARD, Biologics, Prednisolone, Monitoring desktop
   clinician forms. Inert below 900px; mobile styles remain in
   their respective module files.

   Primitives:
     1. .form-inspector              — card shell with --active-color top accent
     2. .form-inspector .section     — stepped block with top rule
     3. .seg / .seg > div / ...      — segmented control
     4. .dates-preview / ...         — live date strip
   =========================================== */

/* 0. DENSITY TOKENS
   Unconditional on the shell so the tile grid inherits them regardless
   of viewport. One dial for all prescribing interiors — tune here to
   retune DMARD + biologics + future prescribing modules.
   ---------------------------------------------------------- */
.form-inspector {
    --fi-label-size:     var(--text-sm);        /* 14px — tile name, chip title */
    --fi-sublabel-size:  0.6875rem;             /* 11px — abbrev, chip subtitle */
    --fi-meta-size:      var(--text-xs);        /* 12px — uppercase section head */
    --fi-tile-min-h:     56px;                  /* drug + class tile floor — matches natural height of dual-route biologics tiles (17.5 name + 8 gap + 12 collapsed-expansion + 16 padding + borders) so single- and dual-route tiles align */
    --fi-tile-pad-y:     0.5rem;                /* tile vertical padding */
    --fi-tile-pad-x:     0.75rem;               /* tile horizontal padding */
}

@media (min-width: 900px) {

    /* 1. FORM INSPECTOR SHELL
       ---------------------------------------------------------- */
    .form-inspector {
        background: var(--bg-card, var(--bg-secondary));
        border: 1px solid var(--border-subtle);
        border-top: 3px solid var(--active-color, var(--theme-primary));
        border-radius: var(--radius-md);
        padding: 0;
        position: relative;
        transition: border-top-color var(--transition-base);
    }

    /* 2. SECTION
       ---------------------------------------------------------- */
    .form-inspector .fi-section {
        padding: var(--form-section-padding);
    }

    .form-inspector .fi-section + .fi-section {
        border-top: 1px solid var(--border-subtle);
    }

    .form-inspector .sec-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }

    .form-inspector .sec-title {
        font-size: var(--fi-meta-size);
        font-weight: var(--font-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    /* 3. SEGMENTED CONTROL
       ---------------------------------------------------------- */
    .seg {
        display: grid;
        gap: 2px;
    }

    .seg > div,
    .seg > button {
        text-align: center;
        padding: var(--seg-cell-padding);
        font-size: 0.78125rem;
        font-weight: var(--font-semibold);
        color: var(--text-secondary);
        border-radius: var(--seg-cell-radius);
        cursor: pointer;
        line-height: 1.2;
        border: none;
        background: transparent;
        font-family: inherit;
        position: relative;
        transition:
            background var(--transition-fast),
            color var(--transition-fast),
            box-shadow var(--transition-fast);
    }

    .seg > div.selected,
    .seg > button.selected {
        background: var(--active-light, var(--theme-light));
        color: var(--active-color, var(--theme-primary));
        box-shadow: inset 0 0 0 1px
            color-mix(in srgb, var(--active-color, var(--theme-primary)) 40%, transparent);
    }

    .seg .sub {
        display: block;
        font-size: var(--fi-sublabel-size);
        font-weight: var(--font-medium);
        color: var(--text-muted);
        margin-top: 0.1rem;
    }

    /* Selected button has a dark --active-color background with white text,
       so .sub needs translucent white — not a tint of --active-color, which
       would blend into the bg and disappear. */
    .seg > div.selected .sub,
    .seg > button.selected .sub {
        color: rgba(255, 255, 255, 0.75);
    }

    /* 4. DATES PREVIEW
       ---------------------------------------------------------- */
    .dates-preview {
        margin-top: 0.875rem;
        padding: 0;
    }

    .dates-preview[hidden] { display: none; }

    .dates-preview-head {
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .dates-preview-head .count {
        color: var(--text-muted);
        margin-left: auto;
    }

    /* Neutralise the top-right layout hook so the picker sits inline. */
    .dates-preview-head .header-start-date {
        margin-left: 0;
    }

    /* Compact variant of the shared start-date pill for this inline spot. */
    .dates-preview-head .start-date-trigger {
        padding: 0.25rem 0.5rem;
        font-size: var(--text-2xs);
        width: auto;
        gap: 0.3rem;
        letter-spacing: 0.04em;
        text-transform: none;
    }

    .dates-preview-head .start-date-trigger svg {
        width: 11px;
        height: 11px;
    }

    .dates-preview-dates {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.375rem;
    }

    .dates-preview .cell {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.375rem 0.625rem;
        border-left: 2px solid var(--active-color, var(--theme-dark));
        border-radius: 0 4px 4px 0;
        background: color-mix(in srgb, var(--active-color, var(--theme-primary)) 5%, transparent);
    }

    .dates-preview .cell .wk {
        font-size: var(--text-xs);
        font-weight: var(--font-bold);
        color: var(--text-muted);
        letter-spacing: 0.05em;
    }

    .dates-preview .cell .dt {
        font-size: 0.9375rem;
        font-weight: var(--font-semibold);
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }

    .dates-preview .cell .day {
        font-size: var(--text-xs);
        color: var(--text-muted);
        font-weight: var(--font-medium);
        margin-top: 0.1rem;
    }

    /* 4b. SCHEDULE CONTROLS — unified pill shell: pill picker + start-date
       ----------------------------------------------------------
       Sits as a sibling below .sec-head. Shared by DMARD Step-2
       (Standard/High-Risk + start chip) and Monitoring Step-1
       (frequency pills + start chip) / Step-2 (duration pills).
       The controls live inside one rounded container so they read
       as a single compound control. */

    /* Schedule row — pure flex layout. Pills carry their own fills so they
       read as the primary tap targets; Start sits flat alongside them as
       a value/label. No shell tint — avoids double-fill and keeps pills
       floating cleanly on the card surface. */
    .form-inspector .sched-controls {
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    [data-theme="dark"] .form-inspector .sched-controls {
        background: transparent;
        border: 0;
    }

    /* Pill segmented — individual filled chips. Each pill reads as the
       primary tap target; small gap separates them so they don't merge. */
    .form-inspector .sched-controls .seg.sched-seg-pill {
        display: inline-flex;
        grid-template-columns: none;
        gap: 3px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .form-inspector .sched-controls .seg.sched-seg-pill > button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 0 1rem;
        border-radius: 999px;
        font-size: var(--text-2xs);
        font-weight: var(--font-medium);
        letter-spacing: -0.005em;
        line-height: 1;
        background: rgba(0, 0, 0, 0.04);
        color: var(--text-primary);
        /* Inset ring defines the chip edge against the card without adding
           layout height. Subtle drop shadow adds just enough lift. */
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, 0.09),
            0 1px 2px rgba(0, 0, 0, 0.04);
        border: none;
    }

    [data-theme="dark"] .form-inspector .sched-controls .seg.sched-seg-pill > button {
        background: rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    @media (hover: hover) {
        .form-inspector .sched-controls .seg.sched-seg-pill > button:not(.selected):hover {
            background: #fff;
            color: var(--text-primary);
            box-shadow:
                inset 0 0 0 1px rgba(0, 0, 0, 0.14),
                0 2px 4px rgba(0, 0, 0, 0.06);
        }
    }
    .hover-capable .form-inspector .sched-controls .seg.sched-seg-pill > button:not(.selected):hover {
        background: #fff;
        color: var(--text-primary);
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, 0.14),
            0 2px 4px rgba(0, 0, 0, 0.06);
    }
    [data-theme="dark"] .form-inspector .sched-controls .seg.sched-seg-pill > button:not(.selected):hover {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    }

    /* Solid drug-colour fill + white text — fixes the muddy
       dark-on-dark / white-on-white state of the previous design. */
    .form-inspector .sched-controls .seg.sched-seg-pill > button.selected {
        background: var(--active-color, var(--theme-primary));
        color: #fff;
        font-weight: var(--font-semibold);
        box-shadow: none;
    }

    [data-theme="dark"] .form-inspector .sched-controls .seg.sched-seg-pill > button.selected {
        box-shadow: none;
    }

    /* Start-date wrapper — breathing room from the pills. No divider;
       the visual weight difference (filled pills vs. flat Start) carries
       the separation on its own. */
    .form-inspector .sched-controls .header-start-date {
        display: inline-flex;
        align-items: center;
        margin-left: 0.5rem;
        padding-left: 0;
        border-left: 0;
    }

    [data-theme="dark"] .form-inspector .sched-controls .header-start-date {
        border-left: 0;
    }

    /* Start-date trigger — flat text + icon + chevron. No fill / shadow so
       it reads as a value display rather than a choice target. The pills
       are the primary action; Start is a secondary editable detail. */
    .form-inspector .sched-controls .start-date-trigger {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 0.5rem;
        font-size: var(--text-2xs);
        font-weight: var(--font-medium);
        width: auto;
        gap: 0.375rem;
        letter-spacing: normal;
        text-transform: none;
        background: transparent;
        border: 0;
        border-radius: 999px;
        color: var(--text-secondary);
        box-shadow: none;
    }

    [data-theme="dark"] .form-inspector .sched-controls .start-date-trigger {
        background: transparent;
        border: 0;
        color: var(--text-secondary);
        box-shadow: none;
    }

    @media (hover: hover) {
        .form-inspector .sched-controls .start-date-trigger:hover {
            background: rgba(0, 0, 0, 0.04);
            border-color: transparent;
            color: var(--text-primary);
            box-shadow: none;
        }
    }
    .hover-capable .form-inspector .sched-controls .start-date-trigger:hover {
        background: rgba(0, 0, 0, 0.04);
        border-color: transparent;
        color: var(--text-primary);
        box-shadow: none;
    }

    [data-theme="dark"] .form-inspector .sched-controls .start-date-trigger:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: transparent;
        color: var(--text-primary);
        box-shadow: none;
    }

    .form-inspector .sched-controls .start-date-trigger svg {
        width: 12px;
        height: 12px;
    }

    /* Schedule preview — numbered timeline rail with a date on the left,
       dot-leader bridging the middle, and weekday on the right. Subgrid
       keeps dates flush-left and weekdays flush-right across every row. */
    .dates-preview .weeks-flat {
        display: grid;
        grid-template-columns: 30px minmax(0, auto) minmax(16px, 1fr) minmax(0, auto);
        column-gap: 0.875rem;
        row-gap: 0;
        font-variant-numeric: tabular-nums;
    }

    .dates-preview .sched-row {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        align-items: center;
        min-height: 40px;
        border-radius: 6px;
    }

    /* Rail column — circular node + vertical connector line */
    .dates-preview .sched-rail {
        position: relative;
        display: grid;
        place-items: center;
        align-self: stretch;
    }
    .dates-preview .sched-rail::before {
        content: "";
        position: absolute;
        top: -2px; bottom: -2px;
        left: 50%;
        width: 1.5px;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            color-mix(in srgb, var(--theme-primary) 35%, transparent) 8%,
            color-mix(in srgb, var(--theme-primary) 35%, transparent) 92%,
            transparent 100%
        );
        transform: translateX(-50%);
    }
    .dates-preview .sched-row:first-child .sched-rail::before { top: 50%; }
    .dates-preview .sched-row:last-child  .sched-rail::before { bottom: 50%; }

    .dates-preview .sched-node {
        position: relative;
        width: 24px; height: 24px;
        border-radius: 50%;
        background: var(--bg-elevated, #fff);
        border: 1.5px solid var(--border-color);
        display: grid; place-items: center;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: var(--font-medium);
        color: var(--text-muted);
        z-index: 1;
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }

    /* Column-header row — small labels over the node column and weekday
       column. Uses subgrid so "Test"/"Week" sits flush-centered over the
       rail circles and "Day" aligns with the weekday text on each row. */
    .dates-preview .sched-head {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        align-items: center;
        min-height: 22px;
        padding-bottom: 2px;
    }
    .dates-preview .sched-head-num,
    .dates-preview .sched-head-day {
        font-size: 10px;
        font-weight: var(--font-semibold);
        color: var(--text-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .dates-preview .sched-head-num {
        text-align: center;
    }
    .dates-preview .sched-head-day {
        grid-column: 4;
        text-align: right;
    }

    /* Date — hero, left. Bold, primary color. */
    .dates-preview .sched-date {
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        color: var(--text-primary);
        letter-spacing: -0.005em;
        white-space: nowrap;
        padding: 0.5rem 0;
        font-variant-numeric: tabular-nums lining-nums;
    }
    .dates-preview .sched-date .ord {
        font-size: 0.62em;
        font-weight: var(--font-medium);
        color: var(--text-muted);
        vertical-align: 0.5em;
        margin-left: 1px;
        margin-right: 2px;
        letter-spacing: 0.02em;
    }
    .dates-preview .sched-date .yr {
        color: var(--text-secondary);
        font-weight: var(--font-medium);
        margin-left: 2px;
    }

    /* Flexible gap between date and weekday — structure only, no leader pattern */
    .dates-preview .sched-leader {
        align-self: center;
    }

    /* Weekday — supporting, right */
    .dates-preview .sched-day {
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
        color: var(--text-muted);
        text-align: right;
        white-space: nowrap;
        padding: 0.5rem 0;
        letter-spacing: 0.005em;
    }

    /* 5. CONDITION STEP SECTION
       Step 3 is a regular .fi-section like Steps 1 & 2 — label above,
       control below. The picker lives in a compact form (just the trigger
       wrap), so drop the picker's own divider/spacing since .fi-section
       + .fi-section already provides the separator. The badge inherits
       .sec-title styling from primitive 2 above.
       ---------------------------------------------------------- */
    .condition-step-section .sec-title .step-badge {
        margin-right: 0.35rem;
    }

    .condition-step-section .condition-picker {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-top: none;
    }
}

/* ===========================================
   6. DRUG TILE GRID
   Shared pyramid layout + card anatomy used by the DMARD and
   biologics medication pickers. Six-col base with :has() per-count
   spans so partial last rows centre automatically.

   Structural contract (applies on both modules):
     .seg.drug-tile-grid
       > .select-btn[data-drug]
         > .drug-card-content           (flex row, space-between)
           > .drug-info                  (flex column, name stack)
             > .drug-name
           > .drug-abbrev                (desktop — absolute, under name)
           > [.route-badges]             (biologics-only)

   Activates at ≥900px alongside the form-inspector shell and the
   rail/topbar. Below 900 the drug list is rendered by biologics-mobile
   / dmard-colors with its own mobile layout.
   =========================================== */
@media (min-width: 900px) {

    .seg.drug-tile-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        row-gap: 0.75rem;
        column-gap: 0.5rem;
        align-items: start;
    }

    /* Default: each tile spans 2 cols → 3 per row */
    .drug-tile-grid > .select-btn {
        grid-column: span 2;
    }

    /* n=1 — centred, wider card */
    .drug-tile-grid:has(> .select-btn:nth-child(1):last-child) > .select-btn:nth-child(1) {
        grid-column: 2 / 5;
    }
    /* n=2 — two halves */
    .drug-tile-grid:has(> .select-btn:nth-child(2):last-child) > .select-btn:nth-child(1) { grid-column: 1 / 4; }
    .drug-tile-grid:has(> .select-btn:nth-child(2):last-child) > .select-btn:nth-child(2) { grid-column: 4 / 7; }
    /* n=4 — 2×2 */
    .drug-tile-grid:has(> .select-btn:nth-child(4):last-child) > .select-btn:nth-child(1) { grid-column: 1 / 4; }
    .drug-tile-grid:has(> .select-btn:nth-child(4):last-child) > .select-btn:nth-child(2) { grid-column: 4 / 7; }
    .drug-tile-grid:has(> .select-btn:nth-child(4):last-child) > .select-btn:nth-child(3) { grid-column: 1 / 4; }
    .drug-tile-grid:has(> .select-btn:nth-child(4):last-child) > .select-btn:nth-child(4) { grid-column: 4 / 7; }
    /* n=5 — pyramid (3 + 2 centred) */
    .drug-tile-grid:has(> .select-btn:nth-child(5):last-child) > .select-btn:nth-child(4) { grid-column: 2 / 4; }
    .drug-tile-grid:has(> .select-btn:nth-child(5):last-child) > .select-btn:nth-child(5) { grid-column: 4 / 6; }
    /* n=7 — 3+3+1 centred */
    .drug-tile-grid:has(> .select-btn:nth-child(7):last-child) > .select-btn:nth-child(7) { grid-column: 3 / 5; }
    /* n=8 — 3+3+2 centred */
    .drug-tile-grid:has(> .select-btn:nth-child(8):last-child) > .select-btn:nth-child(7) { grid-column: 2 / 4; }
    .drug-tile-grid:has(> .select-btn:nth-child(8):last-child) > .select-btn:nth-child(8) { grid-column: 4 / 6; }

    /* === TILE ANATOMY === */
    .drug-tile-grid > .select-btn {
        position: relative;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-height: var(--fi-tile-min-h);
        padding: var(--fi-tile-pad-y) var(--fi-tile-pad-x);
        text-align: left;
        /* Restore main's softer card corner — .seg sharpens to 5px otherwise */
        border-radius: var(--radius-md);
    }

    .drug-tile-grid > .select-btn > .drug-card-content {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
    }

    .drug-tile-grid > .select-btn .drug-info {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        text-align: left;
    }

    .drug-tile-grid > .select-btn .drug-name {
        display: block;
        font-weight: var(--font-semibold);
        font-size: var(--fi-label-size);
        color: var(--text-primary);
        line-height: 1.25;
    }

    /* Abbrev sits below the name, absolute-positioned so the right-aligned
       route-badges (biologics-only) can share the top-right slot. `top` is
       derived from the tile's top padding + one line-box for the name. */
    .drug-tile-grid > .select-btn .drug-card-content > .drug-abbrev {
        display: block;
        position: absolute;
        left: var(--fi-tile-pad-x);
        top: calc(var(--fi-tile-pad-y) + 1.4rem);
        font-size: var(--fi-sublabel-size);
        color: var(--text-muted);
        font-weight: var(--font-medium);
    }

    .drug-tile-grid > .select-btn.selected .drug-name {
        color: white;
    }

    .drug-tile-grid > .select-btn.selected .drug-card-content > .drug-abbrev {
        color: rgba(255, 255, 255, 0.72);
    }

    /* Unselected hairline — form-inspector's `.seg > button` zeroes the
       base `.select-btn` border, so re-add it here for the tile frame. */
    .drug-tile-grid > .select-btn:not(.selected) {
        border-top: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    /* Tiles don't rise on hover — they're cards, not pills. */
    .drug-tile-grid > .select-btn:hover {
        transform: none;
        box-shadow: none;
    }

    /* Selected — full active-colour flood. Specificity (0,0,6,0) so
       it beats DMARD's base `.clinician-mode .form-inspector .seg
       .select-btn[data-drug]` reset (0,0,5,0) that sets transparent
       left-border. */
    .form-inspector .seg.drug-tile-grid > .select-btn[data-drug].selected {
        background: var(--active-color);
        border-left-width: var(--drug-edge-width);
        border-left-color: var(--active-dark);
        color: white;
        box-shadow: var(--shadow-md), 0 0 0 3px var(--active-light);
    }
}

/* === Mobile schedule pills ===
   Desktop pill primitives live under .form-inspector inside the
   @media (min-width: 900px) block above, so below 900px the
   .dmard-mobile-card / .monitoring-mobile-card buttons inherit
   nothing and render as bare text. This block re-applies the base
   pill treatment to those mobile shells and bumps to iOS 44px. */
@media (max-width: 899px) {
    .dmard-mobile-card .sched-controls,
    .monitoring-mobile-card .sched-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .dmard-mobile-card .seg.sched-seg-pill,
    .monitoring-mobile-card .seg.sched-seg-pill {
        display: inline-flex;
        flex-wrap: wrap;
        grid-template-columns: none;
        gap: 4px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .dmard-mobile-card .seg.sched-seg-pill > button,
    .monitoring-mobile-card .seg.sched-seg-pill > button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 1.25rem;
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        line-height: 1;
        border: none;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.04);
        color: var(--text-primary);
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, 0.09),
            0 1px 2px rgba(0, 0, 0, 0.04);
    }

    [data-theme="dark"] .dmard-mobile-card .seg.sched-seg-pill > button,
    [data-theme="dark"] .monitoring-mobile-card .seg.sched-seg-pill > button {
        background: rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .dmard-mobile-card .seg.sched-seg-pill > button.selected,
    .monitoring-mobile-card .seg.sched-seg-pill > button.selected {
        background: var(--active-color, var(--theme-primary));
        color: #fff;
        font-weight: var(--font-semibold);
        box-shadow: none;
    }

    .dmard-mobile-card .header-start-date,
    .monitoring-mobile-card .header-start-date {
        display: inline-flex;
        align-items: center;
    }

    .dmard-mobile-card .start-date-trigger,
    .monitoring-mobile-card .start-date-trigger {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        min-height: 44px;
        padding: 0 0.5rem;
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
        letter-spacing: normal;
        text-transform: none;
        background: transparent;
        border: 0;
        border-radius: 999px;
        color: var(--text-secondary);
        box-shadow: none;
        width: auto;
    }

    .dmard-mobile-card .sched-controls .start-date-trigger svg,
    .monitoring-mobile-card .sched-controls .start-date-trigger svg {
        width: 14px;
        height: 14px;
    }
}

/* === Compact tier (601–899px): bump Start-date trigger ===
   The <=899px rule above shrinks the trigger so it fits true-mobile
   (<=600px). At compact widths there's room to breathe — restore a
   pill-matching scale so the widget doesn't read as tiny next to the
   schedule pills. Scoped to dmard + monitoring only. */
@media (min-width: 601px) and (max-width: 899px) {
    .dmard-mobile-card .start-date-trigger,
    .monitoring-mobile-card .start-date-trigger {
        gap: 0.5rem;
        padding: 0 0.75rem;
        font-size: var(--text-sm);
    }

    .dmard-mobile-card .sched-controls .start-date-trigger svg,
    .monitoring-mobile-card .sched-controls .start-date-trigger svg {
        width: 16px;
        height: 16px;
    }
}