/* ==========================================================================
   CALCULATOR - page-specific layer
   --------------------------------------------------------------------------
   Loaded after design-system.css. Everything here is unique to the
   calculator; the shared tokens, form controls, buttons and typography come
   from the design system and are not repeated. Same rule as the design
   system: tokens only, no literal colors.
   ========================================================================== */


/* ==========================================================================
   SETUP BLOCK
   Each box is a single question, so boxes are stretched to a common height
   per row rather than sized to their own contents: three ragged boxes read
   as an accident.
   ========================================================================== */

.setup-grid { display: grid; gap: var(--space-5); }

.setup-box {
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--space-5);
}

.setup-note {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}
.setup-note:first-child { margin-top: 0; }

.field-why {
    margin-top: var(--space-2);
    max-width: 34ch;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}

@media (min-width: 640px) {
    .setup-box { padding: var(--space-7) var(--space-6); }
}
@media (min-width: 1024px) {
    .setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}


/* ==========================================================================
   THE FORM CARD
   One sheet divided by hairlines, rather than a per-section card, shadow, or
   background change. The blue top edge is the single piece of color that
   marks this as the working surface of the tool.
   ========================================================================== */

.calc-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.calc-section {
    padding: var(--space-6) var(--space-5);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface);
}
.calc-section:first-child { border-top: none; }

@media (min-width: 640px) {
    .calc-section { padding: var(--space-8) var(--space-7); }
}

/* Wide screens: lay the four sections out two-across / two-down, so the whole
   form fits in roughly one screen instead of a long scroll. At half the
   card's width there is no room for the 280px label rail, so inside each
   section the label stacks above its own fields (and stops being sticky,
   which only makes sense in the tall single-column layout). Below 1024px none
   of this applies and the full-width stack with the side label rail stands. */
@media (min-width: 1024px) {
    .calc-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .calc-card .calc-section.split {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-4);
    }
    .calc-card .calc-section.split > div:first-child { position: static; }
    /* 2x2 rules: no top border on the first row, a single vertical hairline
       between the two columns. */
    .calc-card .calc-section:nth-child(-n+2) { border-top: none; }
    .calc-card .calc-section:nth-child(2n) { border-left: 1px solid var(--color-border); }
}


/* ==========================================================================
   SETUP SEGMENTED CONTROL
   A row of outlined pills that wraps, for the setup questions. The form's own
   controls keep the filled-track treatment, which is what makes these two
   read as setup rather than as more of the form.
   ========================================================================== */

.seg-pill {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
}
.seg-pill .seg-label {
    min-height: var(--control-height-lg);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast),
                border-color var(--transition-fast),
                background-color var(--transition-fast);
}
.seg-pill .seg-label:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-primary-subtle);
}
.seg-pill input:checked + .seg-label {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}


/* ==========================================================================
   RESULTS
   ========================================================================== */

/* Disclosure rows inside recommendation entries. */
.disclosure {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-3) 0;
    text-align: left;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-primary);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.disclosure:hover { color: var(--color-primary-hover); }

/* Indeterminate progress rule for the results wait - a single thin bar, in
   place of a spinning disc. */
.progress-rule {
    position: relative;
    height: 3px;
    border-radius: var(--radius-pill);
    background-color: var(--color-border);
    overflow: hidden;
}
.progress-rule::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 35%;
    background-color: var(--color-primary);
    animation: rule-sweep 1.1s ease-in-out infinite;
}
@keyframes rule-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .progress-rule::after { width: 100%; transform: none; }
}


/* ==========================================================================
   PRINT
   The printed sheet is the deliverable a caseworker hands over, so it is
   treated as a real document: no page chrome, no interactive affordances,
   black-on-white text. These rules extend the design system's print layer.
   ========================================================================== */

@media print {
    body { font-size: 10.5pt; }
    .shell { padding: 0; margin-bottom: 0; }
    /* Tinted panels flatten to white on paper, and any reversed-out text goes
       back to ink, so nothing prints as a block of solid colour. */
    .panel { border: none; border-radius: 0; padding: 0 0 18px; background: #FFFFFF !important; }
    .calc-card { border: none; border-radius: 0; }
    .calc-section { border-top: none; padding: 0 0 18px; }
    [class*="text-white"] { color: #000000 !important; }
    .print-section { page-break-inside: avoid; }
    .print-block { border: none !important; padding-left: 0 !important; padding-right: 0 !important; }
    a[href]::after { content: none !important; }
    .disclosure { display: none !important; }
    [id^="details-"] { display: block !important; }
    .progress-rule { display: none !important; }
}