/* ==========================================================================
   NailsCentre — shared responsive design system (Phase 1B)

   Mobile-first. Every rule outside a media query is the PHONE rule; wider
   screens progressively add columns and space.

   This file replaces per-element inline `style=""` for layout and typography.
   It is deliberately plain CSS: no framework, no build step, no runtime
   dependency. Production has no node/npm, so Vite cannot run at deploy time;
   the file is served straight from public/ with a content-hash query string
   (see App\Support\Asset) so a changed file always defeats the 4-hour
   Cache-Control on static assets.

   Branding is preserved exactly: the same plum/pink palette, DM Serif Display
   for display type, Manrope for text.
   ========================================================================== */

:root {
    /* Brand palette — unchanged from the existing design */
    --nc-plum:        #3A1A2B;
    --nc-pink:        #D24E86;  /* decorative: rules, accents, brand marks     */
    --nc-pink-strong: #C0407A;  /* interactive surfaces w/ white text: 4.9:1   */
    --nc-pink-ink:    #B83A6E;  /* pink TEXT on light backgrounds: 5.1:1       */
    --nc-cream:       #FBF4F2;
    --nc-blush:       #FBEAF1;
    --nc-white:       #fff;
    --nc-gold:        #E9A21C;

    /* Text tones. --nc-muted and --nc-soft both clear 4.5:1 on cream/white;
       the old #a78a99 was 2.8:1 and is not used for text any more. */
    --nc-muted:       #6e5260;
    --nc-soft:        #7a5e6d;

    --nc-line:        rgba(58, 26, 43, 0.12);
    --nc-line-strong: rgba(58, 26, 43, 0.22);

    /* One spacing scale, used everywhere instead of ad-hoc pixel padding. */
    --nc-gap-xs: 6px;
    --nc-gap-sm: 10px;
    --nc-gap:    16px;
    --nc-gap-md: 24px;
    --nc-gap-lg: 36px;
    --nc-gap-xl: 56px;

    /* Horizontal page padding: 20px on a phone, growing to 56px on desktop.
       This single value replaces the hard-coded `padding: Npx 56px` that made
       every template 540px wide at minimum. */
    --nc-pad: 20px;

    --nc-radius:    14px;
    --nc-radius-lg: 20px;
    --nc-radius-pill: 40px;

    --nc-shadow:    0 6px 18px rgba(58, 26, 43, 0.08);
    --nc-shadow-lg: 0 14px 34px rgba(210, 78, 134, 0.12);

    /* 44px is the minimum comfortable tap target. */
    --nc-tap: 44px;
}

@media (min-width: 768px) { :root { --nc-pad: 32px; } }
@media (min-width: 1100px) { :root { --nc-pad: 56px; } }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--nc-cream);
    color: var(--nc-plum);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    /* Belt and braces: nothing may cause a sideways scroll on a phone. */
    overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }

/* Long unbroken strings — 60-character salon names, URLs, addresses — must wrap
   rather than push the page wider. */
h1, h2, h3, h4, p, li, td, th, dd, dt, figcaption, blockquote, address {
    overflow-wrap: break-word;
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb { background: #e3c7d3; border-radius: 20px; }

/* Visible focus for keyboard users, on every interactive element. */
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(--nc-pink-strong);
    outline-offset: 2px;
    border-radius: 4px;
}

.nc-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.nc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--nc-plum);
    color: var(--nc-white);
    padding: 12px 20px;
    border-radius: 0 0 var(--nc-radius) 0;
    font-weight: 700;
    text-decoration: none;
}
.nc-skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */

.nc-shell {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--nc-pad);
}

.nc-section      { padding-block: var(--nc-gap-lg); }
.nc-section--tight { padding-block: var(--nc-gap-md); }
.nc-section--flush { padding-block: 0; }
.nc-section--white { background: var(--nc-white); }
.nc-section--blush { background: var(--nc-blush); }

@media (min-width: 768px) {
    .nc-section { padding-block: var(--nc-gap-xl); }
}

.nc-stack > * + * { margin-top: var(--nc-gap); }
.nc-stack-sm > * + * { margin-top: var(--nc-gap-sm); }

/* --------------------------------------------------------------------------
   Typography — fluid, so a phone never gets a 64px headline
   -------------------------------------------------------------------------- */

.nc-display,
.nc-h1, .nc-h2, .nc-h3 {
    font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    line-height: 1.08;
    margin: 0;
    text-wrap: balance;
}

/* Was a fixed 64px, which alone filled a phone screen. */
.nc-display { font-size: clamp(2.25rem, 1.30rem + 4.75vw, 4rem); line-height: 1.04; }
.nc-h1      { font-size: clamp(1.85rem, 1.25rem + 3.00vw, 3rem); }
.nc-h2      { font-size: clamp(1.45rem, 1.10rem + 1.75vw, 2.1rem); }
.nc-h3      { font-size: clamp(1.15rem, 1.00rem + 0.75vw, 1.5rem); line-height: 1.2; }

.nc-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nc-pink-ink);
    margin: 0 0 var(--nc-gap-sm);
}

.nc-lede    { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); color: var(--nc-muted); margin: 0; }
.nc-meta    { font-size: 14px; color: var(--nc-muted); margin: 0; }
.nc-meta-sm { font-size: 13px; color: var(--nc-soft); margin: 0; }

.nc-italic { font-style: italic; color: var(--nc-pink-ink); }

/* --------------------------------------------------------------------------
   Buttons — all at least 44px tall
   -------------------------------------------------------------------------- */

.nc-btn-primary,
.nc-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--nc-tap);
    padding: 12px 26px;
    border-radius: var(--nc-radius-pill);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

.nc-btn-primary { background: var(--nc-pink-strong); color: var(--nc-white); }
.nc-btn-primary:hover { background: #a83568; }

.nc-btn-secondary { background: transparent; color: var(--nc-plum); border-color: var(--nc-line-strong); }
.nc-btn-secondary:hover { border-color: var(--nc-plum); }

.nc-btn-block { width: 100%; }
@media (min-width: 560px) { .nc-btn-block { width: auto; } }

/* --------------------------------------------------------------------------
   Site header / navigation
   Built on <details>, so it works with JavaScript disabled. A small script
   adds Escape-to-close and outside-click; neither is required for the menu to
   open, close, or be keyboard operated.
   -------------------------------------------------------------------------- */

.nc-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 244, 242, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--nc-line);
}

.nc-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nc-gap);
    min-height: 62px;
    padding-block: 10px;
}

.nc-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--nc-plum);
    flex: 0 1 auto;
    min-width: 0;
}
.nc-brand svg { flex: none; }
.nc-brand__name {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(1.15rem, 1.02rem + 0.65vw, 1.6rem);
    line-height: 1;
    /* Keeps "Nails Centre" on ONE line at 320px — it used to wrap to two. */
    white-space: nowrap;
}

.nc-nav { min-width: 0; }

/* The toggle: hidden entirely on desktop. */
.nc-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--nc-tap);
    min-width: var(--nc-tap);
    padding: 8px 14px;
    border: 1px solid var(--nc-line-strong);
    border-radius: var(--nc-radius-pill);
    background: var(--nc-white);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.nc-nav__toggle::-webkit-details-marker { display: none; }
.nc-nav__toggle::marker { content: ''; }

.nc-nav__burger { display: block; width: 18px; height: 12px; position: relative; }
.nc-nav__burger::before,
.nc-nav__burger::after,
.nc-nav__burger span {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--nc-plum);
    border-radius: 2px;
}
.nc-nav__burger::before { top: 0; }
.nc-nav__burger span    { top: 5px; }
.nc-nav__burger::after  { bottom: 0; }

/* Panel — phone: a dropdown under the bar. */
.nc-nav__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--nc-white);
    border-bottom: 1px solid var(--nc-line);
    box-shadow: var(--nc-shadow);
    padding: var(--nc-gap-sm) var(--nc-pad) var(--nc-gap-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* The panel must never cover the whole screen: the consent banner and the
       page content behind it stay reachable. */
    max-height: min(70vh, 460px);
    overflow-y: auto;
}

.nc-nav__link {
    display: flex;
    align-items: center;
    min-height: var(--nc-tap);
    padding: 6px 4px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--nc-plum);
    border-bottom: 1px solid var(--nc-line);
}
.nc-nav__link:last-child { border-bottom: 0; }
.nc-nav__link[aria-current="page"] { color: var(--nc-pink-ink); }

.nc-nav__cta { margin-top: var(--nc-gap-sm); }

/* Desktop: no toggle, links laid out in a row, panel always visible. */
@media (min-width: 900px) {
    .nc-nav__toggle { display: none; }

    .nc-nav__panel {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--nc-gap-md);
        padding: 0;
        max-height: none;
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .nc-nav__link {
        min-height: 0;
        padding: 4px 0;
        border-bottom: 0;
        font-size: 15px;
        white-space: nowrap;
    }

    .nc-nav__cta { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Grids — auto-fit, so column count follows available width
   -------------------------------------------------------------------------- */

.nc-grid { display: grid; gap: var(--nc-gap); }

/* One column on a phone, then as many as fit. This is what replaces the fixed
   three-column grids that pushed the homepage to 711px. */
.nc-grid--cards { grid-template-columns: 1fr; }
.nc-grid--links { grid-template-columns: 1fr; gap: var(--nc-gap-sm); }

@media (min-width: 560px) {
    .nc-grid--cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .nc-grid--links { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (min-width: 1100px) {
    .nc-grid--cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* A dense list of plain city links (the Phase 1A "more cities" block). */
.nc-linklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--nc-gap-xs) var(--nc-gap);
}
.nc-linklist li { min-width: 0; }
.nc-linklist a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-size: 15px;
    color: var(--nc-plum);
    text-decoration: none;
    border-bottom: 1px solid rgba(210, 78, 134, 0.35);
}
.nc-linklist .nc-linklist__count { font-size: 12px; color: var(--nc-soft); margin-left: 4px; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.nc-card {
    background: var(--nc-white);
    border-radius: var(--nc-radius-lg);
    box-shadow: var(--nc-shadow);
    padding: var(--nc-gap-md);
    min-width: 0;
}

.nc-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    background: var(--nc-blush);
    color: var(--nc-pink-ink);
    border-radius: 30px;
}

.nc-stars { color: #9a6a06; letter-spacing: 1px; }

/* Salon card. On a phone this is ONE column: the decorative photo panel used
   to be a fixed 437px beside the details, which pushed the business name,
   address and telephone link off the right edge of the screen. */
.nc-salon-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--nc-white);
    border-radius: var(--nc-radius-lg);
    box-shadow: var(--nc-shadow);
    overflow: hidden;
    min-width: 0;
}

.nc-salon-card__media {
    position: relative;
    background: repeating-linear-gradient(135deg, var(--nc-blush), var(--nc-blush) 12px, #f7dfe9 12px, #f7dfe9 24px);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nc-soft);
    font-size: 13px;
}

.nc-salon-card__body { padding: var(--nc-gap-md); min-width: 0; }

.nc-salon-card__name {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    line-height: 1.15;
    margin: 0 0 6px;
    /* An 80-character imported salon name must wrap, not overflow. */
    overflow-wrap: anywhere;
}

.nc-salon-card__addr {
    font-size: 14px;
    color: var(--nc-muted);
    margin: 0 0 var(--nc-gap-sm);
    font-style: normal;
    overflow-wrap: anywhere;
}

.nc-salon-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nc-gap-sm);
    margin-top: var(--nc-gap-sm);
}

/* Contact links are the point of the page — always full-size tap targets. */
.nc-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--nc-tap);
    padding: 8px 16px;
    border-radius: var(--nc-radius-pill);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--nc-line-strong);
    color: var(--nc-plum);
    background: var(--nc-white);
    overflow-wrap: anywhere;
}
.nc-contact-link--phone { background: var(--nc-pink-strong); color: var(--nc-white); border-color: transparent; }
.nc-contact-link--phone:hover { background: #a83568; }

@media (min-width: 700px) {
    /* Restore the side-by-side card on real estate that can hold it. */
    .nc-salon-card { grid-template-columns: 240px 1fr; }
    .nc-salon-card__media { min-height: 100%; }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.nc-form { display: grid; gap: var(--nc-gap); max-width: 760px; }
.nc-form__row { display: grid; grid-template-columns: 1fr; gap: var(--nc-gap); }
@media (min-width: 640px) { .nc-form__row--2 { grid-template-columns: 1fr 1fr; } }

.nc-field { display: block; min-width: 0; }

.nc-field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--nc-muted);
    margin-bottom: 6px;
}
.nc-req { color: var(--nc-pink-ink); }

input, textarea, select {
    font-family: 'Manrope', system-ui, sans-serif;
    color: var(--nc-plum);
}

.nc-input {
    width: 100%;
    min-height: var(--nc-tap);
    border: 1px solid var(--nc-line-strong);
    border-radius: 12px;
    padding: 12px 14px;
    /* 16px prevents iOS Safari from zooming the page when a field is focused. */
    font-size: 16px;
    background: var(--nc-white);
    outline: none;
}
.nc-input:focus { border-color: var(--nc-pink-strong); }
.nc-input[aria-invalid="true"] { border-color: var(--nc-pink-ink); }

textarea.nc-input { min-height: 120px; resize: vertical; }

.nc-error { color: var(--nc-pink-ink); font-size: 13px; margin-top: 4px; }
.nc-hint  { color: var(--nc-muted); font-size: 13px; margin-top: 4px; }

.nc-notice {
    background: var(--nc-blush);
    border-left: 4px solid var(--nc-pink);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 15px;
    margin: 0 0 var(--nc-gap-md);
}

/* Search form: stacks on a phone, inline where there is room. */
.nc-searchbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nc-gap-sm);
    background: var(--nc-white);
    border-radius: var(--nc-radius-lg);
    padding: var(--nc-gap);
    box-shadow: var(--nc-shadow-lg);
}
@media (min-width: 720px) {
    .nc-searchbar { grid-template-columns: 1fr 1fr auto; align-items: end; }
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.nc-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--nc-gap-sm);
    margin-top: var(--nc-gap-lg);
}
.nc-page-link,
.nc-page-current,
.nc-page-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--nc-tap);
    padding: 10px 18px;
    border-radius: var(--nc-radius-pill);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.nc-page-link     { border: 1px solid var(--nc-line-strong); color: var(--nc-plum); background: var(--nc-white); }
.nc-page-current  { background: var(--nc-pink-strong); color: var(--nc-white); }
.nc-page-disabled { border: 1px solid var(--nc-line); color: var(--nc-soft); background: var(--nc-white); }
.nc-page-status   { font-size: 14px; color: var(--nc-muted); padding-inline: 6px; }

/* --------------------------------------------------------------------------
   Article / prose
   -------------------------------------------------------------------------- */

.nc-prose { max-width: 68ch; font-size: 1.0625rem; line-height: 1.7; }
.nc-prose > * + * { margin-top: 1.1em; }
.nc-prose h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem); line-height: 1.15; margin-top: 1.8em; }
.nc-prose h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.45rem); margin-top: 1.5em; }
.nc-prose img { border-radius: var(--nc-radius); }
.nc-prose a { color: var(--nc-pink-ink); }
.nc-prose ul, .nc-prose ol { padding-left: 1.3em; }
.nc-prose li + li { margin-top: 0.4em; }
/* Imported CKEditor bodies carry inline colours and widths; keep them inside. */
.nc-prose table { width: 100%; display: block; overflow-x: auto; }
.nc-prose pre   { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.nc-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 13px;
    color: var(--nc-muted);
    padding: 0;
    margin: 0 0 var(--nc-gap);
    list-style: none;
}
.nc-crumbs a { color: var(--nc-muted); }
.nc-crumbs [aria-current="page"] { color: var(--nc-plum); font-weight: 700; }

/* --------------------------------------------------------------------------
   Advertising containers

   Ad code, publisher ID and slot IDs are untouched. These rules only stop a
   fixed-width ad from widening the page, and reserve height so the insert does
   not shove content down as it loads.
   -------------------------------------------------------------------------- */

.nc-ad {
    max-width: 100%;
    overflow: hidden;      /* a 728px unit cannot widen a 320px page */
    margin-block: var(--nc-gap-md);
    text-align: center;
    min-height: 100px;     /* reserve space to reduce layout shift */
}
.nc-ad ins, .nc-ad iframe { max-width: 100% !important; }
@media (min-width: 768px) { .nc-ad { min-height: 120px; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.nc-footer {
    background: var(--nc-plum);
    color: rgba(255, 255, 255, 0.86);
    padding-block: var(--nc-gap-lg);
    margin-top: var(--nc-gap-lg);
}
.nc-footer a { color: var(--nc-white); text-decoration: none; }
.nc-footer__cols { display: grid; grid-template-columns: 1fr; gap: var(--nc-gap-md); }
@media (min-width: 640px) { .nc-footer__cols { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.nc-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.nc-footer__list a { display: inline-flex; align-items: center; min-height: 34px; font-size: 15px; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@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;
    }
}

/* --------------------------------------------------------------------------
   List + sidebar (city pages)
   The sidebar drops BELOW the list on anything narrower than a small laptop,
   so the listing contact details always get the full width of a phone.
   -------------------------------------------------------------------------- */

.nc-with-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nc-gap-lg);
    align-items: start;
    padding-top: var(--nc-gap-md);
}

@media (min-width: 1000px) {
    .nc-with-sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
    .nc-with-sidebar > aside { position: sticky; top: 88px; }
}

/* --------------------------------------------------------------------------
   Listing detail ordering

   The listing sidebar holds the address, phone, directions, the one
   correction action and the provenance statement. It used to follow the
   reviews and the review form in source order, so on a phone -- one column --
   all of it sat around 1,600px down a 3,200px page: the contact details and
   the trust language were far below the fold on the layout most visitors use.

   The fix is in the markup, not here: salon_show.blade.php now emits
   head -> aside -> main. That reorders the reading and tab order too, which a
   CSS `order` property would not have done -- a keyboard or screen-reader
   user would still have met the review form before the phone number.

   So this block only has to put desktop back the way it looked: head and main
   stacked in column 1, sidebar spanning both rows in column 2.
   -------------------------------------------------------------------------- */

@media (min-width: 1000px) {
    .nc-listing-grid { row-gap: 0; }
    .nc-listing-grid > .nc-listing__head { grid-column: 1; grid-row: 1; }
    .nc-listing-grid > .nc-listing__main { grid-column: 1; grid-row: 2; }
    .nc-listing-grid > aside             { grid-column: 2; grid-row: 1 / span 2; }
}

/* --------------------------------------------------------------------------
   Third-party widgets

   The hCaptcha iframe is a fixed ~303px and cannot be told to be narrower, so
   at 320px -- minus the page gutters -- it widened the page by 34px. Contained
   here rather than by changing any captcha setting.
   -------------------------------------------------------------------------- */

.h-captcha, .g-recaptcha { max-width: 100%; overflow-x: auto; }

@media (max-width: 379px) {
    .h-captcha, .g-recaptcha {
        transform: scale(0.85);
        transform-origin: 0 0;
        height: 66px;   /* 78px widget * 0.85, so the scale leaves no gap */
    }
}

/* --------------------------------------------------------------------------
   Split auth layout (log in / register)

   A two-panel split with a fixed 42% brand column. On a 320px phone that
   column is 134px wide and clipped its own contents; because it was
   overflow:hidden the page never reported an overflow, so only a screenshot
   showed it. The panels stack below 900px.
   -------------------------------------------------------------------------- */

.nc-split { display: flex; flex-direction: column; min-height: 0; }
.nc-split__brand { width: 100%; flex: none; }

@media (min-width: 900px) {
    .nc-split { flex-direction: row; min-height: calc(100vh - 70px); }
    .nc-split__brand { width: 42%; }
}

/* --------------------------------------------------------------------------
   City card (state pages)

   A class rather than an inline style because a large state repeats this card
   several hundred times -- California renders 452 of them, and the inline
   version cost real bytes on every one.
   -------------------------------------------------------------------------- */

.nc-city-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: var(--nc-tap);
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--nc-white);
    box-shadow: var(--nc-shadow);
    color: var(--nc-plum);
    text-decoration: none;
    min-width: 0;
}
.nc-city-card__name { display: block; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.nc-city-card__sub  { display: block; font-size: 13px; color: var(--nc-soft); }
.nc-city-card__n    { flex: none; font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; color: var(--nc-pink-ink); }

/* Plain state link tile (homepage) */
.nc-state-tile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: var(--nc-tap);
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--nc-cream);
    color: var(--nc-plum);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}