/* ──────────────────────────────────────────────────────────────── */
/* Reset and box model                                              */

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

/* ──────────────────────────────────────────────────────────────── */
/* Design tokens                                                    */

:root {
    /* Neutral palette. */
    --ink:         #1a1a18;
    --ink-soft:    #6b6b65;
    --ink-faint:   #a8a8a2;
    --surface:     #faf9f6;
    --panel:       #ffffff;
    --border:      #e4e3de;
    --muted:       #f0efea;
    --muted-h:     #e4e3de;

    /* Brand accent. Used for primary buttons, focus, links. */
    --accent:      #2d6a4f;
    --accent-h:    #235c43;
    --accent-bg:   #ebf5f0;
    --accent-bd:   #b3d9c5;

    /* Severity palette. The -bd value is used both for the */
    /* saturated edge of a callout and for inline error text. */
    --danger:      #a32d2d;
    --danger-bg:   #fcebeb;
    --danger-line: #f7c1c1;

    --extreme:     #b30000;
    --extreme-bg:  #fdecea;

    --warn:        #d97706;
    --warn-bg:     #fef3e2;

    --caution:     #ca8a04;
    --caution-bg:  #fefce8;

    --info:        #2563eb;
    --info-bg:     #eff6ff;

    /* Snow badge colors. */
    --snow:        #0c447c;
    --snow-bg:     #e6f1fb;

    /* Typography stacks. */
    --serif: Georgia, 'Times New Roman', serif;
    --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI',
             system-ui, sans-serif;
    --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas,
             monospace;

    /* Geometry. */
    --radius:      10px;

    /* Spacing scale. Used for vertical rhythm between block      */
    /* elements (paragraphs, headings, sections) and for          */
    /* surrounding margins on components. Component-internal      */
    /* padding (button bodies, input fields, table cells, callout */
    /* boxes) keeps its own literal values so visual identity     */
    /* does not shift with the rhythm scale.                      */
    --space-xs:    0.25rem;
    --space-sm:    0.5rem;
    --space-md:    0.75rem;
    --space-lg:    1rem;
    --space-xl:    1.5rem;
    --space-2xl:   2rem;
    --space-3xl:   3rem;
}

/* ──────────────────────────────────────────────────────────────── */
/* Base elements                                                    */

html, body {
    height: 100%;
}

/* The body is a two-column grid by default so the auth-screen   */
/* layout (.left + .right) works out of the box. App pages opt   */
/* out by setting body.app-page.                                 */

body {
    font-family: var(--sans);
    background: var(--surface);
    color: var(--ink);
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

body.app-page {
    display: block;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-h);
}

/* The global reset zeros padding on every element, which leaves */
/* ul with padding-left: 0. With the default list-style-position */
/* of outside, bullets render to the left of the content column  */
/* (off-screen at the page edge). Putting them inside the list   */
/* item box keeps the bullet flush with the LHS of body text.    */

ul {
    list-style-position: inside;
}

/* ──────────────────────────────────────────────────────────────── */
/* Headings                                                         */

/* h1 is the page-level display heading; alias .heading-display.  */

h1,
.heading-display {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: var(--space-lg);
    line-height: 1.15;
}

/* Section heading. Used to title a major content block on a     */
/* page.                                                          */

.heading-section {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: var(--space-lg);
}

/* Tight variant: smaller bottom margin for a heading immediately */
/* followed by a short intro paragraph (admin/log pages).         */

.heading-section--tight {
    margin-bottom: var(--space-sm);
}

/* Sub-heading inside a panel or grid column.                     */

.heading-sub {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: var(--space-md);
}

/* ──────────────────────────────────────────────────────────────── */
/* Text utilities                                                   */

/* Large intro paragraph below an h1. */

.text-lead,
.lead {
    font-size: 1.05rem;
    color: var(--ink-soft);
    line-height: 1.2;
    max-width: 55ch;
}

/* Standard secondary text for hints and small descriptions. */

.text-muted,
.section-hint {
    font-size: .8rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* A page-level intro paragraph; sits beneath a section heading. */

.section-intro {
    font-size: .875rem;
    color: var(--ink-soft);
    margin-bottom: var(--space-xl);
}

/* Faint text. Counts, footers, "no data" messages. */

.text-faint,
.no-data {
    color: var(--ink-faint);
    font-size: .875rem;
}

/* Inline monospace. */

.text-mono {
    font-family: var(--mono);
    font-size: .75rem;
}

/* Tabular numerics (digits align). */

.text-tabular {
    font-variant-numeric: tabular-nums;
}

/* Danger-colored inline text. Used for short error messages */
/* outside of the boxed .data-error / .alert variants.       */

.text-danger {
    color: var(--danger);
}

/* Layout helpers. */

.scroll-x {
    overflow-x: auto;
}

.nowrap {
    white-space: nowrap;
}

.section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-xl) 0 var(--space-lg);
}

/* ──────────────────────────────────────────────────────────────── */
/* Spacing utilities                                                */

/* Vertical-margin shorthand keyed to the spacing scale. Used    */
/* where the only thing a page-specific class added was a single */
/* margin in one direction.                                      */

.mb-xs { margin-bottom: var(--space-xs); } /*1*/
.mb-sm { margin-bottom: var(--space-sm); }
.mb-lg { margin-bottom: var(--space-lg); } /*1*/
.mb-xl { margin-bottom: var(--space-xl); } /*1*/
.mt-lg { margin-top:    var(--space-lg); }

/* A block whose vertical rhythm matches the surrounding page    */
/* sections. Equivalent to mt-xl + mb-xl.                        */

.section-gap {
    margin-top:    var(--space-xl);
    margin-bottom: var(--space-xl);
} /*1*/

/* ──────────────────────────────────────────────────────────────── */
/* Width utilities                                                  */

/* Two width steps used across the site: a narrow column for     */
/* form-shaped content, and a page-width column for tables and   */
/* content blocks.                                               */

.maxw-narrow { max-width: 520px; } /*1*/
.maxw-page   { max-width: 860px; } /*1*/

/* ──────────────────────────────────────────────────────────────── */
/* Layout primitives                                                */

/* Two-column grid that collapses to one column on narrow        */
/* viewports. Used for side-by-side panels.                      */

.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
} /*1*/

/* Horizontal flex row with a small gap. The "inline" variant    */
/* collapses to a vertical stack on narrow viewports.            */

.row-inline {
    display: flex;
    gap: .75rem;
    align-items: center;
} /*1*/

/* Tight horizontal flex row for an icon paired with a label.    */

.row-icon {
    display: flex;
    align-items: center;
    gap: .25rem;
} /*1*/

/* Plain unstyled list. Bullet, padding, and margin removed; the */
/* container above sets the top margin and the items below set   */
/* their own row padding.                                        */

.list-plain {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0 0 0;
} /*1*/

.list-plain > li {
    padding: .6rem 0;
} /*1*/

.list-plain a {
    font-size: 1rem;
} /*1*/

/* ──────────────────────────────────────────────────────────────── */
/* Layout: split-screen auth pages                                  */

.split-left,
.left {
    background: var(--accent);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.split-left::before,
.left::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 80%,
                        rgba(255,255,255,.07) 0%,
                        transparent 70%),
        radial-gradient(ellipse 40% 60% at 80% 20%,
                        rgba(0,0,0,.15) 0%,
                        transparent 70%);
    pointer-events: none;
}

.split-right,
.right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.brand {
    font-family: var(--serif);
    font-size: 1.6rem;
    color: #ffffff;
    letter-spacing: -.02em;
    position: relative;
    z-index: 1;
}

.tagline {
    position: relative;
    z-index: 1;
}

.tagline h2 {
    font-family: var(--serif);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin-bottom: var(--space-lg);
}

.tagline p {
    font-size: .95rem;
    color: rgba(255,255,255,.65);
    line-height: 1.6;
    max-width: 28ch;
}

/* ──────────────────────────────────────────────────────────────── */
/* Layout: app page (centered content)                              */

.page {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-2xl);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border);
}

.topbar-brand {
    font-family: var(--serif);
    font-size: 1.4rem;
    color: var(--ink);
    letter-spacing: -.02em;
}

.topbar-links {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.topbar-links a {
    font-size: .875rem;
    color: var(--ink-soft);
}

.topbar-links a:hover {
    color: var(--accent);
}

.topbar-links .link-logout {
    color: var(--ink-faint);
}

/* Page header that pairs the current location (h1) with a small  */
/* link to the change-location page.                              */
.loc-header {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.loc-header .heading-display {
    margin-bottom: 0;
}

.loc-change {
    font-size: .875rem;
    color: var(--ink-soft);
}

.loc-change:hover {
    color: var(--accent);
}

footer {
    margin-top: 4rem;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
    font-size: .8rem;
    color: var(--ink-faint);
}

/* ──────────────────────────────────────────────────────────────── */
/* Surfaces: card                                                   */

/* Auth-page card: a fixed-width form column.                     */

.card {
    width: 100%;
    max-width: 400px;
}

.card-header {
    margin-bottom: var(--space-2xl);
}

.card-header h1 {
    font-size: 2rem;
    margin-bottom: var(--space-xs);
}

.card-header p {
    font-size: .875rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

.card-footer {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
    font-size: .8rem;
    color: var(--ink-faint);
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────── */
/* Surfaces: panel                                                  */

/* Generic outlined surface. */

.panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space-sm);
    overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────── */
/* Surfaces: callout (severity-colored notice block)                */

/* A callout is a soft-fill block with a saturated left border    */
/* signaling severity. Used for weather alerts, Nixle alerts,     */
/* PSE outages, the latest-alert teaser, and any similar notice.  */

.callout {
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin-bottom: var(--space-sm);
    border-left: 4px solid var(--ink-soft);
    background: var(--muted);
}

/* Severity variants. */

.callout--info {
    border-left-color: var(--info);
    background: var(--info-bg);
}

.callout--success {
    border-left-color: var(--accent-bd);
    background: var(--accent-bg);
} /*1*/

.callout--caution {
    border-left-color: var(--caution);
    background: var(--caution-bg);
}

.callout--warn {
    border-left-color: var(--warn);
    background: var(--warn-bg);
}

.callout--danger {
    border-left-color: var(--extreme);
    background: var(--extreme-bg);
}

/* Callout structural pieces. */

.callout-title {
    font-weight: 600;
    color: var(--ink);
    font-size: 1.05rem;
    margin-bottom: var(--space-xs);
}

.callout-meta {
    color: var(--ink-soft);
    font-size: .9rem;
    margin-top: var(--space-xs);
}

.callout-body {
    margin-top: var(--space-xs);
    color: var(--ink);
    font-size: .95rem;
}

/* Compact label above a callout body (used in teaser callouts). */

.callout-label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-soft);
}

/* Inline link inside a callout (e.g. "Read more"). */

.callout-link {
    color: var(--accent);
}

.callout-link:hover {
    text-decoration: underline;
}

/* Two-column key/value rows inside a callout (used by PSE). */

.callout-kv {
    display: flex;
    gap: .6rem;
    font-size: .9rem;
    line-height: 1.45;
}

.callout-kv-key {
    color: var(--ink-soft);
    flex: 0 0 11em;
}

.callout-kv-val {
    color: var(--ink);
    flex: 1 1 auto;
}

/* Container for a list of callouts (resets ul styling). */

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

/* Section grouping a heading + a callout-list. */

.callouts {
    max-width: 860px;
    margin-bottom: var(--space-xl);
}

/* Header strip inside a teaser callout (label on the left, link  */
/* on the right). The link is sized down to match the label.      */

.callout-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.callout-head .callout-link {
    font-size: .8rem;
}

/* Expandable details inside a callout (the "show more" pattern). */

.callout-details {
    margin-top: var(--space-sm);
} /*1*/

.callout-details summary {
    cursor: pointer;
    color: var(--ink-soft);
    font-size: .9rem;
} /*1*/

.callout-headline {
    font-style: italic;
    color: var(--ink);
    margin: var(--space-xs) 0;
} /*1*/

.callout-desc {
    white-space: pre-wrap;
    font-size: .9rem;
    color: var(--ink);
    margin-top: var(--space-xs);
} /*1*/

/* ──────────────────────────────────────────────────────────────── */
/* Status banner                                                    */

/* The "alert" banner sits above a form (errors, save success).   */
/* Distinct from a "callout", which is content-level severity.    */

.alert {
    display: none;
    align-items: flex-start;
    gap: .6rem;
    background: var(--danger-bg);
    border: 1px solid var(--danger-line);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    margin-bottom: var(--space-lg);
    font-size: .875rem;
    color: var(--danger);
    line-height: 1.4;
}

.alert.visible {
    display: flex;
}

.alert--success {
    background: var(--accent-bg);
    border-color: var(--accent-bd);
    color: var(--accent);
}

.alert-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

/* Inline error variants used by data-fetcher fragments. */

.data-error {
    color: var(--danger);
    background: var(--danger-bg);
    border: 1px solid var(--danger-line);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    font-size: .9rem;
}

/* ──────────────────────────────────────────────────────────────── */
/* Tables                                                           */

/* Base data table. Adopted by every tabular block on the site.   */

.ooo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    margin-top: var(--space-sm);
}

.ooo-table th, .ooo-table td {
    padding: .45rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.ooo-table th {
    color: var(--ink-soft);
    font-weight: 500;
}

/* Compact size modifier for log-style tables. */

.ooo-table--compact {
    font-size: .8rem;
}

.ooo-table--compact th, .ooo-table--compact td {
    padding: .4rem .6rem;
}

/* Small size modifier (between default and compact). */

.ooo-table--small {
    font-size: .875rem;
}

/* Width hint for two-column "label / value" tables. */

.ooo-table--label-value th {
    width: 40%;
} /*1*/

/* Width hints for the four-column tide table. */

.ooo-table--tide th:nth-child(1),
.ooo-table--tide td:nth-child(1) { width: 38%; } /*1*/

.ooo-table--tide th:nth-child(2),
.ooo-table--tide td:nth-child(2) { width: 17%; } /*1*/

.ooo-table--tide th:nth-child(3),
.ooo-table--tide td:nth-child(3) { width: 13%; } /*1*/

.ooo-table--tide th:nth-child(4),
.ooo-table--tide td:nth-child(4) { width: 32%; } /*1*/

.tide-high td:last-child,
.tide-low td:last-child {
    color: var(--ink-soft);
} /*1*/

/* Inline detail spans used inside vulnerability tables. */

.vuln-id {
    font-family: var(--mono);
    font-size: .75rem;
} /*1*/

.vuln-desc {
    font-size: .75rem;
    color: var(--ink-soft);
    display: block;
    margin-top: var(--space-xs);
}

/* ──────────────────────────────────────────────────────────────── */
/* Status text (inline)                                             */

.status-ok,
.status-clean { color: var(--accent); }

.status-err,
.status-vuln  { color: var(--danger); }

/* ──────────────────────────────────────────────────────────────── */
/* Form fields                                                      */

.field {
    margin-bottom: var(--space-lg);
}

label {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

input[type="text"],
input[type="password"],
input[type="email"],
.def-select {
    width: 100%;
    padding: .7rem .9rem;
    font-family: var(--sans);
    font-size: .95rem;
    color: var(--ink);
    background: var(--panel);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
}

input:focus,
.def-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(45,106,79,.12);
}

input.error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(163,45,45,.1);
}

/* ──────────────────────────────────────────────────────────────── */
/* Buttons                                                          */

.btn {
    width: 100%;
    padding: .8rem;
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 500;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s, transform .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-decoration: none;
}

.btn:active   { transform: scale(.99); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn.loading  { opacity: .6; pointer-events: none; }

.btn-primary {
    color: #ffffff;
    background: var(--accent);
    margin-bottom: var(--space-md);
}

.btn-primary:hover {
    background: var(--accent-h);
}

.btn-muted {
    color: var(--ink-soft);
    background: var(--muted);
    border: 1px solid var(--border);
}

.btn-muted:hover {
    background: var(--muted-h);
}

/* Inline button modifier: shrink to content width and prevent    */
/* the label from wrapping. Reverts to full width on narrow       */
/* viewports (see responsive section).                            */

.btn--inline {
    width: auto;
    white-space: nowrap;
} /*1*/

/* Spinner shown inside a loading button. */

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    display: none;
}

.btn.loading .spinner  { display: block; }
.btn.loading .btn-text { opacity: .7; }

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ──────────────────────────────────────────────────────────────── */
/* User pill and avatar                                             */

.user-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .35rem .75rem .35rem .35rem;
    margin-bottom: var(--space-2xl);
}

.user-pill span {
    font-size: .85rem;
    color: var(--ink-soft);
}

.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────── */
/* Badges                                                           */

.badge {
    font-size: .75rem;
    font-weight: 500;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--ink-soft);
}

.badge--info {
    background: var(--info-bg);
    color: var(--info);
} /*1*/

.badge--success {
    background: var(--accent-bg);
    color: var(--accent);
} /*1*/

.badge--warn {
    background: var(--warn-bg);
    color: var(--warn);
} /*1*/

.badge--danger {
    background: var(--danger-bg);
    color: var(--danger);
} /*1*/

.badge--snow {
    background: var(--snow-bg);
    color: var(--snow);
} /*1*/

/* ──────────────────────────────────────────────────────────────── */
/* Daily content (current-weather + forecast region)                */

/* Section-end gap for callout teasers used as direct children of */
/* the daily content (PSE outage teaser, latest Nixle alert).     */
/* Matches the 1.5rem trailing space that the current-weather     */
/* block and .callouts already supply, so the next heading        */
/* (Forecast) sits the same distance below regardless of which    */
/* sections precede it. The rule does not affect callouts nested  */
/* inside a .callout-list (NWS weather alerts), where the smaller */
/* inter-callout gap from .callout still applies.                 */

.daily-content > .callout {
    margin-bottom: var(--space-xl);
} /*1*/

/* The OpenWeather PNG has substantial transparent padding around */
/* the glyph; the negative margin trims that whitespace so the    */
/* icon sits closer to the heading above and the description text */
/* beside it.                                                     */

.weather-icon {
    width: 50px;
    height: 50px;
    margin: -8px -4px;
} /*1*/

.weather-icon-sm {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.weather-desc {
    font-size: 1.1rem;
    color: var(--ink);
} /*1*/

/* Forecast (collapsible day cards + chart). */

.disclosure-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--muted);
    cursor: pointer;
    list-style: none;
    font-size: .9rem;
}

.disclosure-summary::-webkit-details-marker {
    display: none;
}

.disclosure-summary::before {
    content: '▶';
    font-size: .7rem;
    color: var(--ink-faint);
    transition: transform .15s;
}

.disclosure[open] .disclosure-summary::before {
    transform: rotate(90deg);
}

.disclosure-title {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--ink);
    min-width: 11rem;
}

.disclosure-meta {
    color: var(--ink-soft);
    font-size: .85rem;
}

.forecast-chart-scroll {
    overflow-x: auto;
} /*1*/

.forecast-chart {
    display: block;
    min-width: 680px;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
} /*1*/

/* ──────────────────────────────────────────────────────────────── */
/* Form-control width modifier                                      */

/* Sizing for a select that should not stretch to fill the row in  */
/* a flex layout. Pair with .row-inline.                           */

.def-select {
    flex: 0 1 auto;
    width: 18rem;
}

/* ──────────────────────────────────────────────────────────────── */
/* Style guide (used only on /style)                                */

.style-block {
    margin-bottom: var(--space-2xl);
}

.style-block > h2 {
    margin-bottom: var(--space-xs);
}

.style-block > p.text-muted {
    margin-bottom: var(--space-lg);
}

.style-example {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: var(--space-sm);
    background: var(--panel);
}

.style-code {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--ink-soft);
    background: var(--muted);
    padding: .6rem .75rem;
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre;
}

.swatch-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit, minmax(140px, 1fr));
    gap: .75rem;
} /*1*/

.swatch {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .6rem;
    font-size: .75rem;
    color: var(--ink-soft);
}

.swatch-chip {
    display: block;
    height: 44px;
    border-radius: 6px;
    margin-bottom: var(--space-xs);
    border: 1px solid var(--border);
}

.swatch-name {
    font-family: var(--mono);
    color: var(--ink);
}

/* Top margin for a stacked sibling inside a .style-example block. */

.demo-spacer {
    margin-top: var(--space-md);
}

/* ──────────────────────────────────────────────────────────────── */
/* Responsive                                                       */

@media (max-width: 680px) {
    body {
        grid-template-columns: 1fr;
    }
    .left,
    .split-left {
        display: none;
    }
    .right,
    .split-right {
        padding: 2rem 1.25rem;
        align-items: flex-start;
        padding-top: 3rem;
    }
}

@media (max-width: 600px) {
    .grid-2col {
        grid-template-columns: 1fr;
    } /*1*/
    .row-inline {
        flex-direction: column;
        align-items: stretch;
    } /*1*/
    .btn--inline {
        width: 100%;
    } /*1*/
}