/*
 * DaycareIn shared shell — Phase 1B.
 *
 * Loads after `default.min.css` and before `provider.css`. It does not replace
 * the legacy stylesheet: it establishes the tokens, typography, spacing,
 * buttons and cards that later phases build on, and overrides the specific
 * legacy rules that were actively harmful (a 10px base font, a 550px fixed h1,
 * a navigation that gave "Add New Listing" the same weight as the directory).
 *
 * Selectors here are deliberately no more specific than they need to be. Where
 * a legacy rule carries an id, the override matches that id — see the notes.
 */

/* ------------------------------------------------------------------ tokens */

:root {
    /* ======================================================================
       Phase 3C — the design system.

       Every value here is a ROLE. Templates and components reach for the role,
       never for a hex code or a pixel value, which is what lets a later phase
       change the look without touching a template.

       The palette moves off the 2010 theme it inherited: a teal page with a
       960px white column floating in it, and maroon for every action. Maroon
       reads as a warning, which is the wrong register for a directory whose job
       is to feel calm and credible while carrying licensing information. The
       teal survives as the brand - it is what the site has always been - but as
       a deep, quiet anchor for the header and the primary action rather than as
       a page background.

       Every text and control pairing below was computed against WCAG 2.2 AA
       before it was written down. The numbers are in the Phase 3C report.
       ====================================================================== */

    /* -- type -------------------------------------------------------------
       A system stack, deliberately. Phase 3B removed 684 KB of unused
       front-end weight; spending an LCP on a web font to buy a typeface most
       readers could not name would be giving that back. system-ui resolves to
       Segoe UI Variable on current Windows and SF on Apple platforms, both of
       which are modern faces. The redesign comes from the scale, the weights
       and the rhythm, not from the font file. */
    --dc-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --dc-text: 1rem;
    --dc-text-xs: 0.8125rem;
    --dc-text-sm: 0.9375rem;
    --dc-text-lg: 1.0625rem;

    /* Headings clamp so a phone gets a proportionate h1 rather than a desktop
       one that overhangs the screen. */
    --dc-h1: clamp(1.75rem, 1.35rem + 1.9vw, 2.5rem);
    --dc-h2: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
    --dc-h3: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);

    --dc-leading: 1.6;
    --dc-leading-tight: 1.2;
    --dc-tracking-tight: -0.011em;

    /* The comfortable measure for a paragraph. Long-form copy gets this; a
       directory listing does not need it. */
    --dc-measure: 68ch;

    /* -- space ------------------------------------------------------------ */
    --dc-space-1: 4px;
    --dc-space-2: 8px;
    --dc-space-3: 12px;
    --dc-space-4: 16px;
    --dc-space-5: 24px;
    --dc-space-6: 32px;
    --dc-space-7: 48px;
    --dc-space-8: 64px;

    /* -- layout ----------------------------------------------------------- */
    --dc-page-max: 1180px;
    --dc-gutter: var(--dc-space-4);
    --dc-gutter-lg: var(--dc-space-6);

    --dc-radius-sm: 6px;
    --dc-radius: 10px;
    --dc-radius-lg: 14px;
    --dc-radius-pill: 999px;

    /* Restrained on purpose. A directory earns trust by being legible, not by
       floating. One soft shadow for raised surfaces, one for the sticky header. */
    --dc-shadow-sm: 0 1px 2px rgba(16, 36, 43, 0.06);
    --dc-shadow: 0 2px 8px rgba(16, 36, 43, 0.08);

    /* -- colour ROLES ------------------------------------------------------ */
    --dc-page: #f4f7f8;
    --dc-surface: #ffffff;
    --dc-surface-sunken: #eef3f5;

    --dc-ink: #16242b;
    --dc-text-muted: #55646d;
    --dc-ink-soft: var(--dc-text-muted);      /* retained: earlier phases use it */

    --dc-brand: #0d5b6b;
    --dc-brand-dark: #084451;
    --dc-brand-tint: #e6f0f2;

    --dc-action: var(--dc-brand);
    --dc-action-hover: var(--dc-brand-dark);
    --dc-on-action: #ffffff;

    --dc-link: #11577f;
    --dc-link-hover: #0b3f5e;

    /* Decorative separators. Not a control boundary - those use
       --dc-border-control, which is held to 3:1 for WCAG 1.4.11. */
    --dc-line: #d6dee2;
    --dc-line-soft: #e8eef0;
    --dc-border-control: #78848b;

    --dc-focus: #0b3f5e;

    /* Lifecycle. Phase 2 created a distinction the design system had no
       vocabulary for: 757 listings that record a business no longer at their
       address. Historical must read as a notice, never as an error, and
       revoked must be distinguishable from replaced. */
    --dc-status-current: #14603a;
    --dc-status-current-bg: #e8f3ec;
    --dc-status-historical: #6b4a10;
    --dc-status-historical-bg: #f9f2e4;
    --dc-status-historical-line: #d8c48d;  /* 1.54:1 - decorative edge; the 6px rule and the eyebrow carry the meaning */
    --dc-status-historical-ink: #4a3a12;   /* 9.89:1 on its ground - the notice heading */
    --dc-status-warning: #7c3a10;
    --dc-status-warning-bg: #fbeee5;
    --dc-error: #8c1c1c;
    --dc-error-bg: #fbeded;

    /* Retained aliases so components written in earlier phases keep working. */
    --dc-accent: var(--dc-brand);
    --dc-accent-dark: var(--dc-brand-dark);
    --dc-muted-bg: var(--dc-surface-sunken);

    /* -- targets ----------------------------------------------------------- */
    /* The footer is the one dark surface; its text roles are its own so the
       page palette never has to carry a colour that only works on dark. */
    --dc-footer-link: #eaf2f4;   /* 9.46:1 on --dc-brand-dark */
    --dc-footer-muted: #a9bcc6;  /* 5.47:1 on --dc-brand-dark */
    --dc-footer-rule: rgba(255, 255, 255, 0.16);

    --dc-touch: 44px;
    --dc-target-min: 24px;
}

/* -------------------------------------------------------------- typography */

/*
 * `default.min.css` sets `body { font: 400 10px Helvetica }`, then #left to
 * 125% and #right to 120% — which is where Phase 0D's 12.5px body text came
 * from. Reset the base to 16px and bring the two columns back to sane values,
 * otherwise every percentage in the legacy sheet scales off the new base.
 */
body {
    font-family: var(--dc-font-body);
    font-size: var(--dc-text);
    line-height: var(--dc-leading);
    color: var(--dc-ink);
    -webkit-text-size-adjust: 100%;
}

#right,
#appendix {
    font-size: var(--dc-text-sm);
    line-height: var(--dc-leading);
}

#left p,
#left li,
#left dd,
#left td {
    font-size: var(--dc-text);
}

h1, h2, h3, h4, h5, h6,
div#left h1, div#left h2, div#left h3,
#right h2, #right h3 {
    /* The legacy sheet sets these with the `font:` shorthand
       (`div#left h3 { font: italic 120% Georgia, serif }`), so overriding the
       family alone left the headings italic. Reset style and weight too. */
    font-family: var(--dc-font-body);
    font-style: normal;
    color: var(--dc-ink);
    line-height: var(--dc-leading-tight);
    text-wrap: balance;
    margin: 0 0 var(--dc-space-3);
}

h1, div#left h1 {
    font-size: var(--dc-h1);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 0;
}

h2, div#left h2 {
    font-size: var(--dc-h2);
    font-weight: 700;
    margin-top: var(--dc-space-6);
}

h3, div#left h3 {
    font-size: var(--dc-h3);
    font-weight: 700;
    margin-top: var(--dc-space-5);
}

/* The sidebar's own headings must not compete with the page h1. */
#right h2,
#right h3,
#appendix h2 {
    font-size: var(--dc-text-lg);
    margin-top: var(--dc-space-4);
}

p {
    margin: 0 0 var(--dc-space-4);
}

/* Long-form reading measure. Directory listings set their own width. */
.dc-prose p,
.dc-prose li {
    max-width: 68ch;
}

a {
    color: var(--dc-link);
}

a:hover {
    color: var(--dc-link-hover);
}

small,
.dc-meta {
    font-size: var(--dc-text-sm);
    color: var(--dc-ink-soft);
}

/* ------------------------------------------------------------------ layout */

/*
 * Mobile-safe gutters. `#outline` and `#content` carry fixed pixel widths at
 * the desktop breakpoints in the legacy sheet; those are left alone. Below
 * them, everything gets predictable padding instead of table-era margins.
 */
@media (max-width: 991px) {
    #outline,
    #content {
        width: auto;
        max-width: 100%;
        padding-left: var(--dc-gutter);
        padding-right: var(--dc-gutter);
        box-sizing: border-box;
    }
}

#content {
    padding-top: var(--dc-space-4);
    padding-bottom: var(--dc-space-6);
}

/* Nothing may force the page wider than the screen. */
img,
iframe,
video,
table {
    max-width: 100%;
}

.dc-section + .dc-section {
    padding-top: var(--dc-space-5);
    border-top: 1px solid var(--dc-line-soft);
}

/* --------------------------------------------------------------- skip link */

.dc-skip-link {
    position: absolute;
    left: var(--dc-space-2);
    top: -100px;
    z-index: 10000;
    padding: var(--dc-space-3) var(--dc-space-4);
    background: var(--dc-surface);
    color: var(--dc-link);
    font-weight: 700;
    border: 2px solid var(--dc-focus);
    border-radius: var(--dc-radius);
    text-decoration: none;
    transition: top 120ms ease-in-out;
}

.dc-skip-link:focus {
    top: var(--dc-space-2);
}

@media (prefers-reduced-motion: reduce) {
    .dc-skip-link { transition: none; }
}

/* ------------------------------------------------------------------ focus */

/*
 * Never remove the outline. The legacy sheet does not set one, so browsers
 * were using their defaults over a coloured header where they are hard to see.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--dc-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

#nav a:focus-visible,
.dc-footer a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -1px;
}

/* ---------------------------------------------------------------- buttons */

.dc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dc-space-2);
    min-height: var(--dc-touch);
    padding: var(--dc-space-3) var(--dc-space-5);
    border: 2px solid var(--dc-accent);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
    color: var(--dc-accent);
    font-family: inherit;
    font-size: var(--dc-text);
    font-weight: 700;
    line-height: var(--dc-leading-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.dc-btn--text {
    min-height: var(--dc-touch);
    padding: var(--dc-space-2) 0;
    border: 0;
    background: none;
    color: var(--dc-link);
    text-decoration: underline;
}

/*
 * The legacy `div#left a { color: #215c97 }` has specificity (0,1,0,2) and
 * outranks any plain class selector — in Phase 1A it painted dark blue text on
 * the dark red Call button. Scoping under #content matches the id count and
 * wins on class count, without reaching for !important.
 */
#content a.dc-btn,
#content a.dc-btn:hover,
#content a.dc-btn:focus,
#appendix a.dc-btn {
    color: var(--dc-accent);
    text-decoration: none;
}

#content a.dc-btn--primary,
#content a.dc-btn--primary:hover,
#content a.dc-btn--primary:focus,
#appendix a.dc-btn--primary {
    color: #fff;
    text-decoration: none;
}

#content a.dc-btn--quiet,
#content a.dc-btn--quiet:hover,
#content a.dc-btn--quiet:focus {
    color: var(--dc-link);
}

.dc-btn:hover {
    background: var(--dc-brand-tint);
}

.dc-btn--primary:hover,
#content a.dc-btn--primary:hover {
    background: var(--dc-accent-dark);
}

.dc-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dc-space-3);
    margin: var(--dc-space-4) 0;
}

/* ------------------------------------------------------------------ cards */

.dc-card {
    display: block;
    padding: var(--dc-space-4);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius-lg);
    background: var(--dc-surface);
    box-sizing: border-box;
}

.dc-card > :first-child { margin-top: 0; }
.dc-card > :last-child { margin-bottom: 0; }

.dc-card__title {
    font-size: var(--dc-text-lg);
    font-weight: 700;
    margin: 0 0 var(--dc-space-1);
}

.dc-card__meta {
    font-size: var(--dc-text-sm);
    color: var(--dc-ink-soft);
    margin: 0 0 var(--dc-space-2);
}

.dc-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dc-space-2);
    margin-top: var(--dc-space-3);
}

@media (min-width: 681px) {
    .dc-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------ forms */

.dc-field {
    margin: 0 0 var(--dc-space-4);
}

.dc-field label,
label {
    display: inline-block;
    font-size: var(--dc-text);
    font-weight: 600;
    margin-bottom: var(--dc-space-1);
}

.dc-hint {
    display: block;
    font-size: var(--dc-text-sm);
    color: var(--dc-ink-soft);
    margin-top: var(--dc-space-1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
    font-family: inherit;
    font-size: var(--dc-text);
    line-height: var(--dc-leading);
    min-height: var(--dc-touch);
    padding: var(--dc-space-2) var(--dc-space-3);
    border: 1px solid var(--dc-border-control);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
    color: var(--dc-ink);
    box-sizing: border-box;
    max-width: 100%;
}

textarea {
    min-height: 8rem;
    line-height: var(--dc-leading);
}

/* Required marker, shared with the Phase 1A provider forms. */
.req {
    color: #b3261e;
    font-weight: 700;
}

.dc-error,
.dc-errors {
    margin: 0 0 var(--dc-space-4);
    padding: var(--dc-space-3) var(--dc-space-4);
    border-left: 4px solid #b3261e;
    background: #fdf3f2;
    color: #7a1f1a;
    font-size: var(--dc-text);
}

.dc-errors ul { margin: 0; padding-left: var(--dc-space-5); }

.dc-notice {
    margin: 0 0 var(--dc-space-4);
    padding: var(--dc-space-3) var(--dc-space-4);
    border-left: 4px solid var(--dc-line);
    background: var(--dc-muted-bg);
    font-size: var(--dc-text);
}

.dc-notice--success {
    border-left-color: #2e7d4f;
    background: #f1f8f3;
}

/* ------------------------------------------------------------------ brand */

.header {
    padding: var(--dc-space-3) var(--dc-gutter);
}

.header img {
    display: block;
    width: auto;
    max-width: min(320px, 70vw);
    height: auto;
}

@media (min-width: 681px) {
    .header img { max-width: 380px; }
}

/* ------------------------------------------------------- primary navigation */

/*
 * Consumer discovery leads; provider and account actions sit visually
 * secondary. Routes are unchanged — this is weight and order only.
 */
#nav {
    display: block;
    width: 100%;
    height: auto;
    background: #8a0f22;
    box-sizing: border-box;
}

#nav ul.sf-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    width: auto;
    background: none;
    position: static;
}

#nav ul.dc-nav__secondary {
    margin-left: auto;
}

#nav li {
    float: none;
    position: static;
}

#nav li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    min-height: var(--dc-touch);
    margin: 0;
    padding: var(--dc-space-2) var(--dc-space-3);
    border: 0;
    color: #fff;
    font-family: var(--dc-font-body);
    font-size: var(--dc-text-sm);
    font-weight: 700;
    text-decoration: none;
}

#nav li a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* Provider/account links: same routes, quieter presentation. */
#nav .dc-nav__secondary a {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

#nav .dc-nav__secondary a:hover {
    color: #fff;
}


@media (max-width: 819px) {
    .dc-nav__inner {
        display: block;
        padding: 0;
    }

    #nav[data-enhanced="true"] .dc-nav__toggle {
        display: flex;
        align-items: center;
        gap: var(--dc-space-2);
        width: 100%;
        min-height: var(--dc-touch);
        padding: var(--dc-space-2) var(--dc-gutter);
        border: 0;
        background: none;
        color: #fff;
        font-family: var(--dc-font-body);
        font-size: var(--dc-text);
        font-weight: 700;
        text-align: left;
        cursor: pointer;
    }

    .dc-nav__toggle-bars {
        display: inline-block;
        width: 20px;
        height: 2px;
        background: #fff;
        box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff;
    }

    #nav ul.sf-menu {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-bottom: var(--dc-space-2);
    }

    /* Collapse only once nav.js has marked the nav as enhanced. Without
       JavaScript the links stay visible rather than becoming unreachable. */
    #nav[data-enhanced="true"] ul.sf-menu {
        display: none;
    }

    #nav[data-enhanced="true"][data-open="true"] ul.sf-menu {
        display: flex;
    }

    #nav ul.dc-nav__secondary {
        margin-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }

    #nav li a {
        padding: var(--dc-space-3) var(--dc-gutter);
        font-size: var(--dc-text);
    }
}

/*
 * The legacy image toggle is replaced by a real <button>. Hide the old one
 * rather than leaving two controls that disagree about state.
 */
.mobile_toggle {
    display: none !important;
}

/* ----------------------------------------------------------------- footer */

#appendix,
.dc-footer {
    clear: both;
    background: #2f3f47;
    color: #e6ecef;
    padding: var(--dc-space-6) 0 var(--dc-space-5);
    margin: 0;
    width: auto;
}

.dc-footer__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--dc-gutter);
}

.dc-footer__cols {
    display: grid;
    gap: var(--dc-space-5);
    grid-template-columns: 1fr;
}

@media (min-width: 681px) {
    .dc-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

.dc-footer h2 {
    margin: 0 0 var(--dc-space-2);
    font-size: var(--dc-text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a9bcc6;
}

.dc-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dc-footer li {
    margin: 0;
}

.dc-footer a {
    display: inline-block;
    min-height: 36px;
    line-height: 36px;
    color: #e6ecef;
    text-decoration: none;
    font-size: var(--dc-text-sm);
}

.dc-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.dc-footer__states {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--dc-space-3);
}

.dc-footer__bottom {
    margin-top: var(--dc-space-5);
    padding-top: var(--dc-space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: var(--dc-text-sm);
    color: #a9bcc6;
}

/* -------------------------------------------------------------- homepage */

.dc-lede {
    font-size: var(--dc-text-lg);
    color: var(--dc-ink-soft);
    max-width: 62ch;
    margin-bottom: var(--dc-space-5);
}

.dc-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--dc-space-2);
    min-height: var(--dc-touch);
    margin-right: var(--dc-space-4);
    font-weight: 600;
    cursor: pointer;
}

.dc-choice input {
    width: 20px;
    height: 20px;
    margin: 0;
}

.dc-home-search__row input[type="text"] {
    width: 100%;
}

@media (max-width: 480px) {
}

.dc-choose-heading { margin-top: var(--dc-space-6); }

.dc-vertical-card > p { margin-bottom: var(--dc-space-3); }

.dc-state-grid a {
    display: inline-block;
    min-height: 36px;
    line-height: 36px;
    font-weight: 600;
    text-decoration: none;
}

.dc-details {
    margin: var(--dc-space-3) 0 0;
}

.dc-details summary {
    min-height: var(--dc-touch);
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--dc-link);
    cursor: pointer;
}

.dc-city-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dc-city-list li { border-bottom: 1px solid var(--dc-line-soft); }

.dc-city-list a {
    display: block;
    min-height: var(--dc-touch);
    line-height: var(--dc-touch);
    text-decoration: none;
}


/* -------------------------------------------------- sidebar geometry (1B) */

/*
 * Promoting the sidebar to <aside> and the footer to <footer> silently
 * dropped every `div#right` / `div#appendix` rule in `default.min.css`,
 * including the sidebar's float and width. Restated here without the element
 * qualifier so the semantic markup keeps the layout it had.
 */
#right {
    margin: 0;
    padding: var(--dc-space-3) 0 var(--dc-space-3) var(--dc-space-3);
    box-sizing: border-box;
}

@media (min-width: 992px) {
    #right {
        float: right;
        width: 240px;
    }
}

@media (max-width: 991px) {
    #right {
        float: none;
        width: 100%;
        padding-left: 0;
    }
}

#right ul,
#appendix ul {
    list-style: none;
    padding: 0;
}


/* A footer control that looks and behaves like the links beside it. */
.dc-footer__link-btn {
    display: inline-block;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: #e6ecef;
    font-family: inherit;
    font-size: var(--dc-text-sm);
    line-height: 36px;
    text-align: left;
    cursor: pointer;
}

.dc-footer__link-btn:hover {
    color: #fff;
    text-decoration: underline;
}

/* ------------------------------------------------------------- resources */

.dc-article__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 560px;
    margin: 0 0 var(--dc-space-4);
    border-radius: var(--dc-radius);
}

.dc-article__body > :first-child { margin-top: 0; }

.dc-article-list {
    display: grid;
    gap: var(--dc-space-4);
    margin: var(--dc-space-4) 0;
    padding: 0;
    list-style: none;
}

.dc-article-card {
    display: flex;
    gap: var(--dc-space-4);
    align-items: flex-start;
}

.dc-article-card__image {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--dc-radius);
}

.dc-article-card__text { flex: 1 1 220px; min-width: 0; }

.dc-article-card__text > :last-child { margin-bottom: 0; }

@media (max-width: 480px) {
    .dc-article-card { flex-direction: column; }
    .dc-article-card__image { width: 100%; height: 160px; }
}

/* ------------------------------------------------- Adult directory (1C) */

.dc-state-grid--compact li { border-bottom: 0; padding: 2px 0; }
.dc-state-grid--compact a { min-height: 32px; line-height: 32px; font-weight: 400; }

.dc-alpha-heading {
    margin: var(--dc-space-4) 0 var(--dc-space-1);
    font-size: var(--dc-text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--dc-ink-soft);
    border-bottom: 1px solid var(--dc-line-soft);
}

.dc-state-search { margin-bottom: var(--dc-space-5); }

.dc-details > .dc-state-grid { margin-top: var(--dc-space-2); }

/* --------------------------------------------------- enquiry form (1E) */

.dc-enquiry-form { max-width: 34rem; }

.dc-enquiry-form input[type="text"],
.dc-enquiry-form input[type="email"],
.dc-enquiry-form input[type="tel"],
.dc-enquiry-form textarea {
    width: 100%;
}

.dc-enquiry-form .h-captcha { margin: var(--dc-space-2) 0; }

.provider-enquiry { border-top: 1px solid var(--dc-line-soft); padding-top: var(--dc-space-4); }

/* ==========================================================================
   Phase 3B — search, pagination and target sizes
   ==========================================================================
   Structure and accessible minimums only. Everything here is expected to be
   restyled in Phase 3C; nothing below encodes a visual decision that a redesign
   would have to argue with, beyond the contrast and target-size floors, which
   are accessibility requirements rather than taste.
   ========================================================================== */

/* Utility: available to a screen reader, not to a sighted reader. Used by the
   pagination controls, whose visible text is a bare number. */
.dc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------- target sizes */

/*
 * WCAG 2.2 AA 2.5.8. Phase 3A measured breadcrumb links at 20-21px tall, the
 * legacy submit control at 85x18 and the care-type radios at 20x20 - all below
 * the 24x24 floor. `.dc-btn` was already correct at 44px; these are the
 * controls the design system had never been applied to.
 */
.breadcrumb a,
.breadcrumb span[aria-current] {
    display: inline-block;
    min-height: var(--dc-target-min);
    line-height: var(--dc-target-min);
}

.dc-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--dc-space-2);
    min-height: var(--dc-touch);
    margin-right: var(--dc-space-4);
}

.dc-choice input[type="radio"],
.dc-choice input[type="checkbox"] {
    width: var(--dc-target-min);
    height: var(--dc-target-min);
    min-height: 0;
    margin: 0;
    accent-color: var(--dc-action);
}

/*
 * The cookie dialog's own checkboxes. Ours, not the ad network's - the
 * component lives in resources/views/components - so they are held to the same
 * 24px floor as every other control. Phase 3A measured them at 13x13, which is
 * the browser default nobody had ever overridden.
 */
.dc-consent__option input[type="checkbox"] {
    width: var(--dc-target-min);
    height: var(--dc-target-min);
    margin: 0;
    accent-color: var(--dc-action);
}

input.btn,
input[type="submit"],
button.btn {
    min-height: var(--dc-touch);
    padding: var(--dc-space-2) var(--dc-space-4);
    box-sizing: border-box;
}

/* ------------------------------------------------------------ search form */

.dc-search-form {
    margin: 0 0 var(--dc-space-6);
}

.dc-search-form__types {
    border: 0;
    padding: 0;
    margin: 0 0 var(--dc-space-3);
}

.dc-search-form__types legend {
    padding: 0;
    margin-bottom: var(--dc-space-2);
    font-weight: 600;
}

.dc-field__error {
    margin: var(--dc-space-1) 0 0;
    font-size: var(--dc-text-sm);
    color: var(--dc-error);
}

.dc-alert {
    padding: var(--dc-space-3) var(--dc-space-4);
    border-left: 4px solid var(--dc-line);
    background: var(--dc-muted-bg);
    margin: 0 0 var(--dc-space-4);
}

.dc-alert--error {
    border-left-color: var(--dc-error);
    background: var(--dc-error-bg);
}

/* ---------------------------------------------------------- empty state */

.dc-empty-state {
    padding: var(--dc-space-5);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius-lg);
    background: var(--dc-muted-bg);
    margin: 0 0 var(--dc-space-6);
}

.dc-empty-state h2 {
    margin-top: 0;
}

.dc-pagination__list > li {
    margin: 0;
}

.dc-pagination__current {
    background: var(--dc-muted-bg);
    font-weight: 700;
}

.dc-pagination [aria-disabled="true"] {
    opacity: 0.5;
}

/* ==========================================================================
   Phase 3C - the visual redesign
   ==========================================================================
   This section owns the page skeleton, the global shell and the shared
   components. Everything above it is Phase 1 and 3B structure that still
   holds; everything here is the look.

   The legacy sheet (default.min.css) still carries the old skeleton: #outline
   at 960px, #left floated left, #right floated right, a 10px base font on
   body. Phase 3B deliberately left it alone because retiring it means choosing
   a page width, and that was this phase to decide. It is decided here - the
   ids are neutralised and replaced with a grid.
   ========================================================================== */

/* ------------------------------------------------------------------ canvas */

html {
    background: var(--dc-page);
}

body {
    background: var(--dc-page);
    color: var(--dc-ink);
    font-family: var(--dc-font-body);
    font-size: var(--dc-text);
    line-height: var(--dc-leading);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
div#left h1, div#left h2, div#left h3,
#right h2, #right h3 {
    letter-spacing: var(--dc-tracking-tight);
    font-weight: 700;
}

h1, div#left h1 { font-size: var(--dc-h1); margin: 0 0 var(--dc-space-3); }
h2, div#left h2, #right h2 { font-size: var(--dc-h2); margin: var(--dc-space-7) 0 var(--dc-space-3); }
h3, div#left h3, #right h3 { font-size: var(--dc-h3); margin: 0 0 var(--dc-space-2); }

.dc-lede {
    font-size: var(--dc-text-lg);
    color: var(--dc-text-muted);
    max-width: var(--dc-measure);
    margin: 0 0 var(--dc-space-5);
}

.dc-meta {
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
}

/* --------------------------------------------------- skeleton, un-floated */

/*
 * The old ids are kept because 37 templates use them. What changes is what
 * they mean: #outline is the page, #content is the grid, #left is the main
 * column and #right is the aside. No floats, no fixed 960px, no clearfix.
 */
#outline,
div#outline {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

#content,
div#content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dc-space-6);
    width: 100%;
    max-width: var(--dc-page-max);
    margin: 0 auto;
    padding: var(--dc-space-6) var(--dc-gutter) var(--dc-space-8);
    background: transparent;
    clear: none;
}

#left,
div#left {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: var(--dc-text);
    line-height: var(--dc-leading);
}

#right,
div#right {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: var(--dc-text-sm);
}

/* The clearfix pseudo-element the legacy sheet inserts would add a grid row. */
#content.clearfix::after,
.clearfix::after { content: none; }

.clearfix { display: block; }

@media (min-width: 1024px) {
    #content,
    div#content {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--dc-space-7);
        padding-left: var(--dc-gutter-lg);
        padding-right: var(--dc-gutter-lg);
    }

    /*
     * A page with no sidebar should not leave a 320px hole.
     *
     * Phase 3C wrote this as `aside:empty`, and Phase 3F measured that it has
     * never fired: `:empty` means no child nodes at all, and the whitespace
     * between `<aside ...>` and `</aside>` in a Blade template is a text node.
     * On /user/login the aside computed `display: block` at 320px with nothing
     * in it. The `:empty` pair is kept because it is correct when it does
     * match, and the case that actually occurs - no `<aside>` in the markup at
     * all, which is what the account pages look like now that the 160x600 has
     * gone - is handled by the rule below.
     *
     * Written as a negation on purpose: a browser without `:has()` drops the
     * whole rule and keeps today's two-column behaviour, rather than
     * collapsing every directory page to one column.
     */
    #content > aside:empty { display: none; }
    #content:has(> aside:empty) { grid-template-columns: minmax(0, 1fr); }
    #content:not(:has(> aside)) { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ header */

.header,
header.header {
    background: var(--dc-brand);
    padding: 0;
}

.dc-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dc-space-4);
    max-width: var(--dc-page-max);
    margin: 0 auto;
    padding: var(--dc-space-3) var(--dc-gutter);
}

/*
 * The wordmark is a 537x105 PNG of shadowed serif type. Replacing the mark
 * itself is beyond this phase, but it does not have to be presented as a
 * banner: at reading scale on the brand bar it takes the header from about
 * 160px of chrome down to about 64px on a phone.
 */
.dc-logo img,
.header img {
    display: block;
    width: auto;
    max-width: 190px;
    height: auto;
}

@media (min-width: 681px) {
    .dc-logo img,
    .header img { max-width: 230px; }
}

/* -------------------------------------------------------------- navigation */

#nav,
div#nav {
    position: relative;
    z-index: 2;
    height: auto;
    width: 100%;
    background: var(--dc-brand-dark);
}

.dc-nav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dc-space-2);
    max-width: var(--dc-page-max);
    margin: 0 auto;
    padding: 0 var(--dc-gutter);
}

.sf-menu,
#nav ul.sf-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dc-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
    position: static;
    width: auto;
}

.sf-menu li,
#nav li {
    float: none;
    margin: 0;
    position: static;
}

#nav a,
#nav li a,
div#nav li a {
    display: block;
    padding: var(--dc-space-3);
    border: 0;
    border-radius: var(--dc-radius-sm);
    color: #eaf2f4;
    font-family: inherit;
    font-size: var(--dc-text-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    min-height: var(--dc-target-min);
}

#nav a:hover,
#nav li a:hover,
div#nav li a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.dc-nav__secondary a,
#nav .dc-nav__secondary a {
    color: #bcd3d8;
    font-weight: 500;
}

.dc-nav__toggle {
    display: none;
    align-items: center;
    gap: var(--dc-space-2);
    min-height: var(--dc-touch);
    padding: var(--dc-space-2) var(--dc-space-3);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--dc-radius-sm);
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/*
 * Phase 3C moved this from 767px, measured rather than guessed. The six primary
 * links plus the two account links need about 800px on one row; at 768 - an
 * iPad in portrait - the bar wrapped to two rows and took 104px of the fold
 * instead of 48. Below 820 the Menu button is both tidier and shorter.
 */
@media (max-width: 819px) {
    .dc-nav__inner { padding-top: var(--dc-space-2); padding-bottom: var(--dc-space-2); }
    .dc-nav__toggle { display: inline-flex; }

    #nav .sf-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        padding-bottom: var(--dc-space-2);
    }

    #nav[data-open="true"] .sf-menu { display: flex; }

    #nav .sf-menu li a { padding: var(--dc-space-3) var(--dc-space-2); }

    #nav .dc-nav__secondary {
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        margin-top: var(--dc-space-2);
        padding-top: var(--dc-space-2);
    }
}

/* ------------------------------------------------------------------ blocks */

.dc-section { margin: 0 0 var(--dc-space-7); }

.dc-card,
.listing-card {
    display: block;
    padding: var(--dc-space-5);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow-sm);
    box-sizing: border-box;
}

.dc-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dc-space-4);
    margin: 0 0 var(--dc-space-5);
}

@media (min-width: 681px) {
    .dc-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- listing card */

/*
 * One card, four surfaces: home, search, city, state. Phase 3D reuses this for
 * city pages rather than making a fifth.
 */
.listing-card {
    display: flex;
    flex-direction: column;
    gap: var(--dc-space-3);
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

.listing-card:hover { border-color: #bccbd1; box-shadow: var(--dc-shadow); }

.listing-card .dc-card__title,
.listing-card h3 {
    margin: 0;
    font-size: var(--dc-h3);
    line-height: var(--dc-leading-tight);
    /* A 60-character provider name must not push the card wider than its column. */
    overflow-wrap: anywhere;
}

.listing-card .dc-card__title a { color: var(--dc-link); text-decoration: none; }
.listing-card .dc-card__title a:hover { color: var(--dc-link-hover); text-decoration: underline; }

.listing-card .dc-card__meta {
    margin: 0;
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
    overflow-wrap: anywhere;
}

.listing-card .listing-actions,
.listing-card .dc-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dc-space-2);
    margin-top: auto;
    padding-top: var(--dc-space-2);
}

/* ----------------------------------------------------------------- buttons */

.dc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dc-space-2);
    min-height: var(--dc-touch);
    padding: var(--dc-space-3) var(--dc-space-5);
    border: 1px solid transparent;
    border-radius: var(--dc-radius-sm);
    background: var(--dc-surface);
    color: var(--dc-action);
    font-family: inherit;
    font-size: var(--dc-text-sm);
    font-weight: 600;
    line-height: var(--dc-leading-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.dc-btn--primary {
    background: var(--dc-action);
    border-color: var(--dc-action);
    color: var(--dc-on-action);
}

.dc-btn--primary:hover {
    background: var(--dc-action-hover);
    border-color: var(--dc-action-hover);
    color: var(--dc-on-action);
}

.dc-btn--secondary {
    background: var(--dc-surface);
    border-color: var(--dc-border-control);
    color: var(--dc-action);
}

.dc-btn--secondary:hover { border-color: var(--dc-action); background: var(--dc-brand-tint); }

/* Quiet is a link that happens to be button-sized. Not everything clickable
   should look like a button. */
.dc-btn--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--dc-link);
    padding-left: var(--dc-space-3);
    padding-right: var(--dc-space-3);
}

.dc-btn--quiet:hover { background: var(--dc-surface-sunken); color: var(--dc-link-hover); }

.dc-btn--block { display: flex; width: 100%; }

@media (max-width: 480px) {
    .listing-card .dc-btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------- forms */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
    border: 1px solid var(--dc-border-control);
    border-radius: var(--dc-radius-sm);
    background: var(--dc-surface);
}

input[type="text"]:hover,
input[type="tel"]:hover,
select:hover,
textarea:hover { border-color: #5d6a71; }

.dc-field label,
label { color: var(--dc-ink); font-weight: 600; }

.dc-hint { color: var(--dc-text-muted); }

/* ------------------------------------------------------------- breadcrumbs */

.breadcrumb {
    margin: 0 0 var(--dc-space-4);
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
}

.breadcrumb a { color: var(--dc-link); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb .dc-crumb-sep {
    display: inline-block;
    margin: 0 var(--dc-space-1);
    color: #9aa8ae;
}

.breadcrumb span[aria-current] { color: var(--dc-text-muted); }

/* ------------------------------------------------------------------ status */

.dc-status {
    display: inline-flex;
    align-items: center;
    gap: var(--dc-space-1);
    padding: 2px var(--dc-space-2);
    border-radius: var(--dc-radius-pill);
    font-size: var(--dc-text-xs);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Colour is never the only signal - each badge carries its own word. */
.dc-status--current { color: var(--dc-status-current); background: var(--dc-status-current-bg); }
.dc-status--historical { color: var(--dc-status-historical); background: var(--dc-status-historical-bg); }
.dc-status--warning { color: var(--dc-status-warning); background: var(--dc-status-warning-bg); }

.dc-pagination__current {
    background: var(--dc-brand-tint);
    color: var(--dc-brand);
    border-color: var(--dc-brand-tint);
}

/* ------------------------------------------------------------ empty states */

.dc-empty-state {
    padding: var(--dc-space-6);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
}

.dc-alert { border-radius: var(--dc-radius-sm); }

/* ---------------------------------------------------------------- ad slots */

/*
 * Phase 3F owns placement. What the redesign owes it is a container that
 * reserves its own space, so an ad arriving late moves nothing already on the
 * page.
 */
.dc-ad,
.provider-ad {
    display: block;
    min-height: 280px;
    margin: var(--dc-space-6) 0;
    padding: 0;
    background: var(--dc-surface-sunken);
    border-radius: var(--dc-radius);
    overflow: hidden;
}

.widget .dc-ad,
.widget .provider-ad { min-height: 250px; margin: var(--dc-space-4) 0 0; }

/* ------------------------------------------------------------------ aside */

.widget {
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
    padding: var(--dc-space-5) !important;
    margin: 0 0 var(--dc-space-5);
}

.widget h2 { margin-top: 0; font-size: var(--dc-text-lg); }

.widget a {
    display: block;
    padding: var(--dc-space-2) 0;
    color: var(--dc-link);
    font: inherit;
    font-size: var(--dc-text-sm);
}

.widget a:hover { color: var(--dc-link-hover); }

.widget li { border-bottom: 1px solid var(--dc-line-soft); padding: 0; }
.widget li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ footer */

/*
 * Written to match `#appendix, .dc-footer` above, not to outweigh it. Specificity
 * is computed per selector in a list, so that rule matches this element at
 * (1,0,0) and a plain `.dc-footer` here - however much later - would lose. The
 * footer kept its old slate ground for exactly that reason until this was found.
 */
#appendix,
.dc-footer {
    background: var(--dc-brand-dark);
    color: #cfe0e4;
    margin-top: var(--dc-space-8);
}

.dc-footer a { color: #eaf2f4; }
.dc-footer a:hover { color: #fff; }
.dc-footer h2 { color: #fff; font-size: var(--dc-text); margin-top: 0; }

/* --------------------------------------------------------- homepage search */

/*
 * The homepage's one job is to get somebody into a directory. So the search
 * module is the page's focal surface rather than a form sitting under a
 * paragraph - raised on the brand tint, with the care-type choice as segmented
 * controls rather than loose radios, and a location field wide enough to hold
 * "San Antonio, TX" without truncating.
 *
 * It is deliberately not a hero. A tall banner would push the thing it exists
 * for below the fold on the phone most visitors arrive on.
 */
.dc-home-intro {
    max-width: var(--dc-measure);
}

.dc-home-search {
    margin: 0 0 var(--dc-space-7);
    padding: var(--dc-space-5);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius-lg);
    background: var(--dc-brand-tint);
    box-shadow: var(--dc-shadow-sm);
}

@media (min-width: 681px) {
    .dc-home-search { padding: var(--dc-space-6); }
}

.dc-home-search__title {
    margin: 0 0 var(--dc-space-4);
    font-size: var(--dc-h3);
    color: var(--dc-ink);
}

.dc-home-search__types {
    border: 0;
    padding: 0;
    margin: 0 0 var(--dc-space-4);
}

.dc-home-search__types legend {
    padding: 0;
    margin-bottom: var(--dc-space-2);
    font-size: var(--dc-text-sm);
    font-weight: 600;
    color: var(--dc-text-muted);
}

/*
 * Segmented control. The radio stays in the markup and stays the thing that is
 * focused and checked - only its own box is hidden, so keyboard and screen
 * reader behaviour is untouched and the label is the visible target.
 */
.dc-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dc-space-2);
}

.dc-segmented .dc-choice {
    flex: 1 1 auto;
    margin: 0;
    padding: var(--dc-space-3) var(--dc-space-4);
    border: 1px solid var(--dc-border-control);
    border-radius: var(--dc-radius-sm);
    background: var(--dc-surface);
    font-weight: 600;
    cursor: pointer;
    justify-content: center;
    text-align: center;
}

.dc-segmented .dc-choice input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dc-segmented .dc-choice:has(input:checked) {
    border-color: var(--dc-action);
    background: var(--dc-action);
    color: var(--dc-on-action);
}

.dc-segmented .dc-choice:has(input:focus-visible) {
    outline: 3px solid var(--dc-focus);
    outline-offset: 2px;
}

/*
 * Browsers without :has() get the plain bordered labels above and a visible
 * radio, which is the pre-3C behaviour and entirely usable. Nothing depends on
 * the segmented appearance to work out which option is selected.
 */
@supports not selector(:has(*)) {
    .dc-segmented .dc-choice input[type="radio"] {
        position: static;
        width: var(--dc-target-min);
        height: var(--dc-target-min);
        opacity: 1;
        pointer-events: auto;
    }
}

.dc-home-search__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--dc-space-3);
}

.dc-home-search__row .dc-field {
    flex: 1 1 260px;
    margin: 0;
}

.dc-home-search__row .dc-field input { width: 100%; }

.dc-home-search__row .dc-btn {
    flex: 0 0 auto;
    padding-left: var(--dc-space-6);
    padding-right: var(--dc-space-6);
}

@media (max-width: 480px) {
    .dc-home-search__row .dc-btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------- vertical chooser */

.dc-vertical-card {
    display: flex;
    flex-direction: column;
    gap: var(--dc-space-2);
}

.dc-vertical-card .dc-card__title { margin: 0; }
.dc-vertical-card p { margin: 0; }
.dc-vertical-card .dc-card__meta { font-size: var(--dc-text-sm); color: var(--dc-text-muted); }

.dc-vertical-card .dc-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dc-space-2);
    margin-top: auto;
    padding-top: var(--dc-space-3);
}

/* ------------------------------------------------------------ state grids */

.dc-state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--dc-space-1) var(--dc-space-4);
    list-style: none;
    margin: 0 0 var(--dc-space-4);
    padding: 0;
}

.dc-state-grid li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dc-space-2);
    padding: var(--dc-space-2) 0;
    border-bottom: 1px solid var(--dc-line-soft);
    margin: 0;
}

.dc-state-grid a {
    color: var(--dc-link);
    text-decoration: none;
    min-height: var(--dc-target-min);
    display: inline-flex;
    align-items: center;
}

.dc-state-grid a:hover { text-decoration: underline; }
.dc-state-grid .dc-meta { font-variant-numeric: tabular-nums; }

.dc-details summary {
    cursor: pointer;
    padding: var(--dc-space-3) 0;
    min-height: var(--dc-target-min);
    color: var(--dc-link);
    font-weight: 600;
}

/* --------------------------------------------------------- search results */

.dc-search-results__heading { margin-bottom: var(--dc-space-2); }

.dc-search-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--dc-space-2) var(--dc-space-3);
    margin: 0 0 var(--dc-space-5);
    padding: var(--dc-space-3) var(--dc-space-4);
    border-radius: var(--dc-radius-sm);
    background: var(--dc-surface-sunken);
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
}

.dc-search-summary strong { color: var(--dc-ink); }

.dc-search-form {
    padding: var(--dc-space-5);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
}

.dc-search-form .dc-field input { width: 100%; }
.dc-search-form .dc-search-form__types { margin-bottom: var(--dc-space-4); }

/* ---------------------------------------------------------------- wordmark */

.dc-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    padding: var(--dc-space-2) 0;
    color: #fff;
    text-decoration: none;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    min-height: var(--dc-touch);
}

.dc-logo:hover { color: #fff; }

.dc-logo__mark { color: #ffffff; }

/* The suffix is quieter than the name, so the eye reads "DaycareIn" first. */
.dc-logo__tld {
    color: #9dc3cb;
    font-weight: 600;
    font-size: 0.95rem;
}

@media (min-width: 681px) {
    .dc-logo { font-size: 1.7rem; }
    .dc-logo__tld { font-size: 1.05rem; }
}

/* ------------------------------------------------------- first-child rhythm */

/*
 * The section rhythm gives every h2 a generous top margin, which is right
 * between sections and wrong as the first thing inside a card - it doubles up
 * with the container's own padding. Scoped past `div#left h2`, which the legacy
 * sheet's id selector would otherwise win.
 */
#left .dc-card > :first-child,
#left .dc-home-search > :first-child,
#left .dc-empty-state > :first-child,
#left .dc-search-form > :first-child,
#right .widget > :first-child,
.dc-card > :first-child,
.dc-home-search > :first-child,
.dc-empty-state > :first-child,
.dc-search-form > :first-child,
.widget > :first-child {
    margin-top: 0;
}

/* A section heading directly after the page h1 does not need the full gap. */
#left h1 + h2,
#left .dc-lede + h2 {
    margin-top: var(--dc-space-6);
}

/* ------------------------------------------------------- footer, continued */

/*
 * The footer is the site's one dark surface. That is deliberate: it ends the
 * page rather than trailing off, and it lets the directory rows above it stay
 * on plain white without a rule under every one.
 *
 * It aligns to the same --dc-page-max as the content above it. The old 960px
 * inner made the footer visibly narrower than the page on a wide screen, which
 * read as a different site stapled to the bottom.
 */
.dc-footer__inner {
    max-width: var(--dc-page-max);
    padding: 0 var(--dc-gutter);
}

#appendix,
.dc-footer {
    padding: var(--dc-space-7) 0 var(--dc-space-6);
}

.dc-footer__cols {
    gap: var(--dc-space-6);
}

.dc-footer h2 {
    letter-spacing: 0.06em;
    margin-bottom: var(--dc-space-1);
}

.dc-footer a,
.dc-footer__link-btn {
    min-height: var(--dc-target-min);
    line-height: 1.6;
    padding: var(--dc-space-2) 0;
}

.dc-footer a:hover,
.dc-footer__link-btn:hover {
    color: #fff;
}

.dc-footer__states {
    gap: 0 var(--dc-space-4);
}

.dc-footer__bottom {
    border-top: 1px solid var(--dc-footer-rule);
    color: var(--dc-footer-muted);
    max-width: var(--dc-measure);
}

.dc-footer__bottom a { color: var(--dc-footer-link); }

/* Two blocks in the markup used to carry their spacing inline. */
.dc-footer__group { margin-top: var(--dc-space-6); }
.dc-footer__group--tight { margin-top: var(--dc-space-5); }

.dc-footer__note {
    margin: var(--dc-space-2) 0 0;
    font-size: var(--dc-text-sm);
    color: var(--dc-footer-muted);
}

.dc-footer__aside {
    margin: var(--dc-space-3) 0 0;
    padding: 0;
    border: 0;
    font-size: var(--dc-text-sm);
    color: var(--dc-footer-muted);
    max-width: var(--dc-measure);
}

.dc-footer__link-btn {
    color: var(--dc-footer-link);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: var(--dc-text-sm);
    text-align: left;
}

.dc-footer__link-btn:hover { text-decoration: underline; }

/* ------------------------------------------------------- aside, continued */

/*
 * `#right h2` carries an id, so it outranks `.widget h2` however late the
 * class rule is written - which is why the rail's headings were still rendering
 * at the page-h2 scale (28px) inside a 320px column. Matched on specificity
 * rather than raised with !important.
 *
 * The rail is also a grid item, so without `align-self` it stretches to the
 * height of a 40,000px city listing and the card's border runs the whole way
 * down beside it. It should end where its content ends.
 */
#right,
div#right {
    align-self: start;
}

#right .widget h2,
#right .widget h3 {
    font-size: var(--dc-text-lg);
    line-height: var(--dc-leading-tight);
    margin: var(--dc-space-6) 0 var(--dc-space-2);
}

#right .widget > h2:first-child,
#right .widget > h3:first-child {
    margin-top: 0;
}

/* Each list in the rail is a group; the rules between items belong inside it,
   not under the last one. */
#right .widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#right .widget ul + h2 {
    padding-top: var(--dc-space-5);
    border-top: 1px solid var(--dc-line);
}

/*
 * WCAG 2.2 SC 2.5.8, measured rather than assumed.
 *
 * At 390px the card title link is the entity's primary target, and it came out
 * 23px tall - one pixel under the floor, and only at that width. It is not the
 * inline-text case the success criterion exempts: it is the whole of a heading
 * and the main way into a provider.
 *
 * The padding is on an inline box, so it grows the hit area without moving the
 * line it sits on. Everything else on every measured page was already over.
 */
.listing-card .dc-card__title a {
    padding: 3px 0;
}

/* ---------------------------------------------------------- content links */

/*
 * Measured, not assumed: a census of every rendered colour on the homepage
 * found 89 links painted `#215c97` and only 9 painted `--dc-link`. The legacy
 * sheet writes `div#left a` (1,0,2) and `div.widget a` (0,1,2), both of which
 * outrank the token layer's plain `a` and `.widget a`. Phase 1A matched them
 * for buttons and stopped there, so ordinary links - the great majority of what
 * is on a directory page - were never on the design system at all.
 *
 * Selectors matched exactly, so order decides and nothing needs !important.
 */
div#left a,
div.widget a,
div#right a {
    color: var(--dc-link);
}

div#left a:hover,
div.widget a:hover,
div#right a:hover {
    color: var(--dc-link-hover);
}

/* The card title and the buttons keep their own colours, set above. */
div#left .listing-card .dc-card__title a { color: var(--dc-link); }
div#left .listing-card .dc-card__title a:hover { color: var(--dc-link-hover); }

/* =====================================================================
   Phase 3D - geographic browse at scale.
   ---------------------------------------------------------------------
   Nothing here is a new visual language. City and state browse now use the
   Phase 3C card, button, surface and spacing tokens; what these rules add
   is the structure those surfaces sit in - a results block that owns its
   own heading, a refinement control, and a pagination bar that stays one
   row at 41 pages.
   ===================================================================== */

/* ------------------------------------------------------------- results */

.dc-results {
    margin: var(--dc-space-6) 0 0;
}

/*
 * Phase 3A found city pages jumping h1 -> h3 with no heading owning the
 * results, which left the following "Other cities" h2 reading as though it
 * owned the providers above it. The results have their own h2 now, and it is
 * deliberately quieter than a section heading elsewhere: it labels the list,
 * it does not compete with the city name in the h1 above it.
 */
#left .dc-results__heading,
div#left .dc-results__heading {
    font-size: var(--dc-h3);
    margin: 0 0 var(--dc-space-2);
}

.dc-results__range {
    margin: 0 0 var(--dc-space-5);
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
    max-width: var(--dc-measure);
}

.dc-results__range strong {
    color: var(--dc-ink);
}

/* ---------------------------------------------------------- refinement */

.dc-refine {
    margin: 0 0 var(--dc-space-5);
    padding: var(--dc-space-4) var(--dc-space-5);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface-sunken);
}

.dc-refine__field {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.dc-refine__legend {
    padding: 0;
    font-size: var(--dc-text-sm);
    font-weight: 700;
    color: var(--dc-ink);
}

.dc-refine__hint {
    margin: var(--dc-space-1) 0 var(--dc-space-3);
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
    max-width: var(--dc-measure);
}

.dc-refine__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dc-space-3);
}

.dc-refine__row select {
    flex: 1 1 260px;
    min-width: 0;
    min-height: var(--dc-touch);
    padding: var(--dc-space-2) var(--dc-space-3);
    border: 1px solid var(--dc-border-control);
    border-radius: var(--dc-radius-sm);
    background: var(--dc-surface);
    color: var(--dc-ink);
    font: inherit;
    font-size: var(--dc-text);
}

.dc-refine__row .dc-btn {
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .dc-refine__row select,
    .dc-refine__row .dc-btn {
        flex: 1 1 100%;
    }
}

/* ---------------------------------------------------------- pagination */

.dc-pagination {
    margin: var(--dc-space-6) 0 0;
    padding-top: var(--dc-space-5);
    border-top: 1px solid var(--dc-line);
}

.dc-pagination__status {
    margin: 0 0 var(--dc-space-3);
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
}

.dc-pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dc-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The gap marker is not a control and must not look like one. */
.dc-pagination__gap {
    padding: 0 var(--dc-space-2);
    color: var(--dc-text-muted);
    user-select: none;
}

.dc-pagination .dc-btn {
    min-width: var(--dc-touch);
    justify-content: center;
}

/* --------------------------------------------------- state browse index */

/*
 * The A-Z index on a state page. Texas lists 692 cities; the point of the
 * columns is that a name is found by scanning one column rather than one very
 * long list, and the point of the letter jumps above it is that a visitor
 * looking for Waco does not scroll past six hundred names to reach it.
 */
.dc-alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dc-space-1);
    margin: 0 0 var(--dc-space-5);
    padding: var(--dc-space-3);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface-sunken);
    list-style: none;
}

.dc-alpha-nav li { margin: 0; }

.dc-alpha-nav a,
.dc-alpha-nav span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dc-touch);
    min-height: var(--dc-touch);
    padding: 0 var(--dc-space-2);
    border-radius: var(--dc-radius-sm);
    font-weight: 700;
    font-size: var(--dc-text-sm);
    text-decoration: none;
}

.dc-alpha-nav a {
    color: var(--dc-link);
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
}

.dc-alpha-nav a:hover {
    color: var(--dc-on-action);
    background: var(--dc-action);
    border-color: var(--dc-action);
}

/* A letter with no cities is shown, not hidden - the alphabet keeps its shape
   and the absence is information. It is not a link, and it is not styled like
   one. */
.dc-alpha-nav span {
    color: var(--dc-text-muted);
    opacity: 0.55;
}

.dc-alpha-group {
    margin: 0 0 var(--dc-space-6);
    scroll-margin-top: var(--dc-space-5);
}

#left .dc-alpha-group__letter,
div#left .dc-alpha-group__letter {
    margin: 0 0 var(--dc-space-3);
    padding-bottom: var(--dc-space-2);
    border-bottom: 2px solid var(--dc-brand-tint);
    font-size: var(--dc-h3);
}

.dc-alpha-group__back {
    font-size: var(--dc-text-sm);
    font-weight: 400;
    margin-left: var(--dc-space-3);
}

/* ------------------------------------------------- the page box, corrected */

/*
 * Found in Phase 3D by measuring computed geometry rather than reading the
 * source - the lesson Phase 3C paid for twice.
 *
 * `#content` is `width: 100%; max-width: 1180px; padding: 0 32px` and was not
 * border-box, so the 64px of padding landed *outside* the max-width. In a
 * 1009px viewport the element measured 1073px and the 320px right rail ended at
 * x=1041 - thirty-two pixels off-screen. It never showed as a scrollbar because
 * the legacy sheet sets `html, body { overflow-x: hidden }`, so the rail was not
 * clipped-and-scrollable, it was clipped-and-gone.
 *
 * Live between 1024px (where the two-column grid starts) and about 1244px
 * (where max-width finally takes over) - which is to say across the whole
 * small-laptop range, on every page of the site, since Phase 3C.
 *
 * `min-width: 0` on the wrapper for the same reason it is on the columns: a
 * grid item's default `min-width: auto` refuses to shrink below its content.
 */
#content,
div#content {
    box-sizing: border-box;
    min-width: 0;
}

/* The same shape, for the same reason. Neither has overflowed yet; both would
   under a narrower gutter. */
.dc-header__inner,
.dc-nav__inner,
.dc-footer__inner {
    box-sizing: border-box;
}

/* ------------------------------------------------- the A-Z back link, sized */

/*
 * WCAG 2.2 SC 2.5.8. Measured at 76x20 across every state page and width - the
 * link sits inside an h3, so it is not the inline-text case the criterion
 * exempts. Padding on an inline box grows the hit area without moving the
 * heading it sits in.
 */
.dc-alpha-group__back {
    padding: var(--dc-space-1) var(--dc-space-2);
}

/* =====================================================================
   Phase 3E - provider detail.
   ---------------------------------------------------------------------
   No new visual language. The source panel, the correction form and the
   successor block use the Phase 3C tokens, surfaces and status
   primitives; what these rules add is the shape of three components the
   design system did not have yet.
   ===================================================================== */

/* --------------------------------------------------------- source panel */

.dc-source {
    margin: 0 0 var(--dc-space-5);
    padding: var(--dc-space-5);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
}

/* `div#left h2` carries an id and outranks any class, which is the trap
   Phase 3C paid for five times. Matched, not fought with !important. */
#left .dc-source__heading,
div#left .dc-source__heading {
    font-size: var(--dc-h3);
    margin: 0 0 var(--dc-space-2);
}

.dc-source__intro {
    margin: 0 0 var(--dc-space-4);
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
    max-width: var(--dc-measure);
}

.dc-source__facts {
    display: grid;
    gap: var(--dc-space-4);
    margin: 0;
}

.dc-source__facts--tight { gap: var(--dc-space-3); }

.dc-source__fact { margin: 0; }

.dc-source__fact dt {
    margin: 0 0 2px;
    font-size: var(--dc-text-sm);
    font-weight: 700;
    color: var(--dc-text-muted);
}

.dc-source__fact dd { margin: 0; }

.dc-source__value {
    display: block;
    font-size: var(--dc-text);
    color: var(--dc-ink);
}

/*
 * The operation number is the reason this panel exists: it is the string a
 * parent takes to the state search. Set in a face where 1 and l and 0 and O are
 * distinguishable, wide-tracked so it can be read aloud down a phone, and
 * `user-select: all` so one click selects the whole thing rather than half of it.
 */
.dc-source__value--id {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: var(--dc-text-lg);
    letter-spacing: 0.04em;
    user-select: all;
    word-break: break-all;
}

.dc-source__hint {
    display: block;
    margin-top: 2px;
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
    max-width: var(--dc-measure);
}

.dc-source__hint--block { margin-top: var(--dc-space-4); }

.dc-source__office,
.dc-source__provenance {
    margin-top: var(--dc-space-5);
    padding-top: var(--dc-space-4);
    border-top: 1px solid var(--dc-line-soft);
}

#left .dc-source__office h3,
#left .dc-source__provenance h3,
div#left .dc-source__office h3,
div#left .dc-source__provenance h3 {
    margin: 0 0 var(--dc-space-2);
    font-size: var(--dc-text-lg);
}

@media (min-width: 681px) {
    .dc-source__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dc-source__facts--tight { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- the map */

/*
 * Was `width="330" height="280"` as HTML attributes - a fixed box that neither
 * filled a 1280px column nor fitted a 390px phone. An aspect-ratio frame now.
 */
.provider-map__frame {
    position: relative;
    aspect-ratio: 16 / 10;
    margin: 0 0 var(--dc-space-3);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    overflow: hidden;
    background: var(--dc-surface-sunken);
}

.provider-map__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.provider-map__address {
    margin: 0;
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
}

/* ------------------------------------------------------ successor block */

/*
 * Inside the historical notice and visually subordinate to it. A parent must
 * read "this is a historical record" before they read "a different provider is
 * listed here", never the other way round.
 */
.provider-inactive__successor {
    margin: var(--dc-space-5) 0 0;
    padding: var(--dc-space-4) var(--dc-space-5);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
}

#left .provider-inactive__successor h3,
div#left .provider-inactive__successor h3 {
    margin: 0 0 var(--dc-space-2);
    font-size: var(--dc-text-lg);
}

.provider-inactive__successor p {
    margin: 0 0 var(--dc-space-3);
    font-size: var(--dc-text-sm);
    max-width: var(--dc-measure);
}

.provider-inactive__successor p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ correction form */

.dc-correction-subject {
    margin: 0 0 var(--dc-space-5);
    padding: var(--dc-space-4) var(--dc-space-5);
    border: 1px solid var(--dc-line);
    border-left: 4px solid var(--dc-brand);
    border-radius: var(--dc-radius);
    background: var(--dc-surface-sunken);
}

#left .dc-correction-subject__heading,
div#left .dc-correction-subject__heading {
    margin: 0;
    font-size: var(--dc-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dc-text-muted);
}

.dc-correction-subject__name {
    margin: var(--dc-space-1) 0 var(--dc-space-1);
    font-size: var(--dc-h3);
    font-weight: 700;
    color: var(--dc-ink);
}

.dc-correction-subject__meta {
    margin: 0;
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
}

.dc-form { max-width: 44rem; }

/*
 * The legacy account forms, given the same measure.
 *
 * Phase 3F: removing the 160x600 from the password and account pages left
 * `#left` spanning the whole page, and a single email input rendered 1,004px
 * wide. `.dc-form` above and `.dc-enquiry-form` already settle what a form's
 * measure is on this site; `dl.zend_form` is the same kind of object and had no
 * answer of its own. `max-width` only caps, so the sixteen templates that use
 * it inside a narrower column are unaffected.
 */
.zend_form { max-width: 44rem; }

.dc-form fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--dc-space-5);
    min-width: 0;
}

.dc-form legend {
    padding: 0;
    margin-bottom: var(--dc-space-2);
    font-weight: 700;
    color: var(--dc-ink);
}

/* One choice per row: six options with sentence-length labels do not belong
   side by side, and a full-width row is a larger target on a phone. */
.dc-choice-list {
    display: grid;
    gap: var(--dc-space-2);
}

.dc-choice-list .dc-choice {
    display: flex;
    align-items: center;
    gap: var(--dc-space-3);
    min-height: var(--dc-touch);
    padding: var(--dc-space-2) var(--dc-space-3);
    border: 1px solid var(--dc-border-control);
    border-radius: var(--dc-radius-sm);
    background: var(--dc-surface);
    cursor: pointer;
}

.dc-choice-list .dc-choice:has(input:checked) {
    border-color: var(--dc-action);
    box-shadow: inset 0 0 0 1px var(--dc-action);
    background: var(--dc-brand-tint);
}

.dc-choice-list .dc-choice:has(input:focus-visible) {
    outline: 3px solid var(--dc-focus);
    outline-offset: 2px;
}

.dc-choice-list .dc-choice input[type="radio"] {
    width: var(--dc-target-min);
    height: var(--dc-target-min);
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--dc-action);
}

.dc-form textarea,
.dc-form select {
    width: 100%;
    min-height: var(--dc-touch);
    padding: var(--dc-space-2) var(--dc-space-3);
    border: 1px solid var(--dc-border-control);
    border-radius: var(--dc-radius-sm);
    background: var(--dc-surface);
    color: var(--dc-ink);
    font: inherit;
    font-size: var(--dc-text);
}

.dc-form textarea { min-height: 8rem; resize: vertical; }

/* ------------------------------------------------------------ questions */

.dc-questions__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--dc-space-4);
}

.dc-questions__item {
    padding: var(--dc-space-4) var(--dc-space-5);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
}

.dc-questions__q { margin: 0 0 var(--dc-space-2); max-width: var(--dc-measure); }
.dc-questions__q .dc-meta { display: block; margin-bottom: var(--dc-space-1); }

.dc-questions__a {
    margin: 0 0 var(--dc-space-2);
    padding-left: var(--dc-space-4);
    border-left: 3px solid var(--dc-brand-tint);
    max-width: var(--dc-measure);
}

/* ------------------------------------------- reachability list (Phase 3E) */

/*
 * Providers whose recorded place has no city page. A way in, not a listing -
 * see partials/provider_reachability_list.blade.php for why this is not the
 * card.
 */
.dc-reachability {
    margin: 0 0 var(--dc-space-5);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--dc-space-1);
}

.dc-reachability li {
    padding: var(--dc-space-2) 0;
    border-bottom: 1px solid var(--dc-line-soft);
}

.dc-reachability li:last-child { border-bottom: 0; }

.dc-reachability a {
    display: inline-block;
    padding: 3px 0;
    font-weight: 700;
}

.dc-reachability .dc-meta { display: block; font-size: var(--dc-text-sm); }