@import url('https://fonts.googleapis.com/css2?family=Gorditas:wght@400;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================================================================
   savethecape.space

   Light and welcoming. This is a campaign about a building full of people
   playing basketball and taking yoga classes, so the site should feel like
   somewhere you would want to go rather than like a legal filing.

   House rules, kept deliberately few:

     Gorditas for headings and Inter for reading text, the same two faces the
     other site uses. No serif anywhere.

     Nothing has square corners. Every panel, button, field and badge is
     rounded.

     Six font sizes exist and every rule uses one of them. Reading text is one
     size: body copy, leads, card text and notes alike.

     Colour carries meaning. Sea is structure. Coral means urgent and is never
     decorative.
   ========================================================================= */

:root {
    /* The whole type scale. Nothing on the site sets a size outside this list. */
    --fs-label: 12px;                        /* uppercase micro labels */
    --fs-ui: 14px;                           /* buttons, nav, meta */
    --fs-body: 17px;                         /* all reading text */
    --fs-h3: 22px;
    --fs-h2: clamp(28px, 3vw, 40px);
    --fs-h1: clamp(34px, 4.6vw, 58px);

    --display: "Gorditas", "Inter", system-ui, sans-serif;
    --body: "Inter", system-ui, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Consolas, monospace;

    /* Light ground, warm rather than blue white. */
    --paper:    #fdfbf7;
    --card:     #ffffff;
    --mist:     #eef5f6;
    --sand:     #fbeedc;

    --ink:      #23343c;
    --muted:    #61757d;
    --faint:    #8b9ba1;

    --sea:       #17808f;
    --sea-deep:  #0f5c68;
    --sea-soft:  #d9eaed;

    --coral:      #d9563a;
    --coral-deep: #b23f26;
    --coral-soft: #fde6df;

    --line:      rgba(35, 52, 60, .13);
    --line-soft: rgba(35, 52, 60, .07);

    --shadow:      0 14px 38px rgba(20, 60, 68, .10);
    --shadow-soft: 0 6px 18px rgba(20, 60, 68, .07);

    /* Nothing is square. */
    --r-sm:   10px;
    --r:      16px;
    --r-lg:   24px;
    --r-pill: 999px;

    --shell: min(1180px, calc(100% - 48px));
}

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: var(--fs-body);
    line-height: 1.65;
}

img { max-width: 100%; height: auto; border-radius: var(--r-sm); }

:focus-visible {
    outline: 3px solid var(--sea);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

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

.hidden { display: none !important; }

.skip-link {
    position: absolute;
    left: -9999px;
    background: var(--sea-deep);
    color: #fff;
    padding: 12px 18px;
    border-radius: var(--r-pill);
    z-index: 50;
    font-size: var(--fs-ui);
    font-weight: 600;
}
.skip-link:focus { left: 16px; top: 12px; }

.section-shell { width: var(--shell); margin-inline: auto; }

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

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.14;
    color: var(--ink);
    margin: 0 0 .6em;
    text-align: center;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3, h4 { font-size: var(--fs-h3); }

p { margin: 0 0 1.05em; }


a { color: var(--sea); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--coral-deep); }

strong { font-weight: 600; }

code, pre { font-family: var(--mono); font-size: var(--fs-ui); }
code { background: var(--mist); padding: 2px 7px; border-radius: var(--r-sm); }

.eyebrow {
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sea);
    margin: 0 0 12px;
}

/* Reading text stays one size. A lead reads larger by weight and colour. */
.lead { color: var(--muted); font-weight: 500; }

/* A sentence the page wants carried away. Rounded, tinted, never a hard box. */
.pull {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.35;
    color: var(--sea-deep);
    background: var(--sea-soft);
    border-radius: var(--r-lg);
    padding: 20px 26px;
    margin: 28px 0;
}

.field-note { font-size: var(--fs-ui); color: var(--faint); margin: 6px 0 0; }

.text-link { font-weight: 600; }
.optional { font-weight: 400; color: var(--faint); }

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

.site-header {
    background: var(--card);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--shadow-soft);
}

.header-inner {
    width: var(--shell);
    margin-inline: auto;
    padding: 14px 0;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; margin-right: auto; }

/* A soft round mark: sand over water. No logo file to load, and nothing that
   could be mistaken for an official city seal. */
.brand-mark {
    width: 40px; height: 40px;
    border-radius: var(--r-pill);
    background: linear-gradient(to bottom, var(--sand) 0 42%, #45a9b8 42% 100%);
    box-shadow: var(--shadow-soft);
    flex: none;
}

.brand-words { display: flex; flex-direction: column; line-height: 1.2; }
.brand-words strong { font-family: var(--display); font-size: var(--fs-h3); font-weight: 400; }
.brand-words span { font-size: var(--fs-label); color: var(--faint); letter-spacing: .06em; }

.site-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.site-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: var(--fs-ui);
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--r-pill);
}
.site-nav a:hover { background: var(--mist); color: var(--sea-deep); }
.site-nav a.active { background: var(--sea-soft); color: var(--sea-deep); }

.not-admin .admin-link { display: none; }

.nav-toggle {
    display: none;
    background: var(--mist);
    border: none;
    border-radius: var(--r-pill);
    padding: 11px 13px;
    cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: var(--r-pill); background: var(--muted); margin: 4px 0; }

.pending-group { display: inline-flex; gap: 8px; }

.pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--coral);
    color: #fff !important;
    border-radius: var(--r-pill);
    padding: 6px 13px 6px 11px;
    font-size: var(--fs-ui);
    font-weight: 700;
}
.pending-badge:hover { background: var(--coral-deep); }
.pending-badge.accounts { background: var(--sea); }
.pending-badge.accounts:hover { background: var(--sea-deep); }
.pending-badge svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* ------------------------------------------------------------- breadcrumb */

.breadcrumb-bar { padding: 16px 0 0; font-size: var(--fs-ui); color: var(--faint); }
.breadcrumb-bar a { color: var(--faint); text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--sea); }
.breadcrumb-bar a + a::before { content: " / "; color: var(--line); }
.page-home .breadcrumb-bar { display: none; }

/* ------------------------------------------------------------------- hero */

.hero { padding: 48px 0 8px; }

.hero-inner {
    background: linear-gradient(160deg, var(--sea-soft) 0%, var(--sand) 100%);
    border-radius: var(--r-lg);
    padding: 48px 44px;
    box-shadow: var(--shadow);
}

.hero h1 { margin-bottom: .5em; }
.hero-lead { color: var(--sea-deep); font-weight: 500; }

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

.button-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0; align-items: center; justify-content: center; }

.button {
    display: inline-block;
    font-family: var(--body);
    font-size: var(--fs-ui);
    font-weight: 700;
    padding: 13px 26px;
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
}

.button-primary { background: var(--coral); color: #fff; }
.button-primary:hover { background: var(--coral-deep); color: #fff; }

.button-secondary { background: var(--card); color: var(--sea-deep); border-color: var(--line); }
.button-secondary:hover { border-color: var(--sea); color: var(--sea); }

.button-danger { background: var(--card); color: var(--coral-deep); border-color: var(--coral-soft); }
.button-danger:hover { background: var(--coral); color: #fff; border-color: var(--coral); }

.button:disabled { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------- main page two columns */

.main-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 40px;
    padding: 40px 0 56px;
    align-items: start;
}

.main-body > section { margin-bottom: 48px; }

/* ----------------------------------------------------------------- stakes */

.stakes-list { list-style: none; padding: 0; margin: 0 0 22px; }
.stakes-list li {
    background: var(--card);
    border-radius: var(--r);
    box-shadow: var(--shadow-soft);
    padding: 14px 20px 14px 46px;
    margin-bottom: 10px;
    position: relative;
}
.stakes-list li::before {
    content: "";
    position: absolute;
    left: 20px; top: 22px;
    width: 12px; height: 12px;
    border-radius: var(--r-pill);
    background: var(--sea);
}

/* ---------------------------------------------------------------- figures */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 14px; margin: 0 0 16px; }
.figures > div {
    background: var(--card);
    border-radius: var(--r);
    box-shadow: var(--shadow-soft);
    padding: 20px;
}
.figures dt { font-family: var(--display); font-size: var(--fs-h3); color: var(--sea-deep); line-height: 1.2; }
.figures dd { margin: 6px 0 0; font-size: var(--fs-ui); color: var(--muted); }

.ask-list { padding-left: 22px; }
.ask-list li { margin-bottom: 10px; }

/* ---------------------------------------------------------------- updates */

.update-list, .update-index { display: grid; gap: 16px; }

.update {
    background: var(--card);
    border-radius: var(--r);
    box-shadow: var(--shadow-soft);
    padding: 22px 26px;
}
.update time {
    display: block;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 8px;
}
.update h2, .update h3 { margin-bottom: .35em; }
.update h2 a, .update h3 a { text-decoration: none; color: var(--sea-deep); }
.update h2 a:hover, .update h3 a:hover { color: var(--coral-deep); }
.update-more { margin-top: 18px; }

.draft-badge, .comment-badge {
    display: inline-block;
    background: var(--sand);
    color: var(--ink);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 11px;
    border-radius: var(--r-pill);
}

.draft-notice {
    background: var(--sand);
    border-radius: var(--r);
    padding: 14px 20px;
    max-width: none;
    font-weight: 600;
}

/* ------------------------------------------------------------------- post */

.post { padding: 8px 0 56px; }
.post-head { margin-bottom: 26px; }
.post-head time {
    font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--faint);
}
.post-summary { color: var(--muted); font-weight: 500; }
.post-body blockquote {
    margin: 24px 0;
    background: var(--mist);
    border-radius: var(--r);
    padding: 18px 24px;
    color: var(--muted);
}
.post-foot { display: flex; gap: 24px; flex-wrap: wrap; padding-top: 22px; margin-top: 36px; border-top: 1px solid var(--line-soft); }

/* --------------------------------------------------------------- calendar */

.calendar {
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 26px 24px;
    position: sticky;
    top: 20px;
}
.calendar h2 { font-size: var(--fs-h3); margin-bottom: 16px; color: var(--sea-deep); }
.calendar-empty { color: var(--faint); max-width: none; }

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

.calendar-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--mist);
    border-radius: var(--r);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.calendar-item.important { background: var(--coral-soft); }
.calendar-item.important .calendar-when { color: var(--coral-deep); }

.calendar-when {
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sea);
}
.calendar-title { font-family: var(--display); font-size: var(--fs-h3); color: var(--ink); line-height: 1.2; }
.calendar-where, .calendar-note { font-size: var(--fs-ui); color: var(--muted); }
.calendar-link { font-size: var(--fs-ui); font-weight: 600; }

/* --------------------------------------------------------------- comments */

.comments-section { scroll-margin-top: 20px; }

.comment-form {
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 28px;
    margin: 22px 0 36px;
}

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }

.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=search],
.field input[type=url],
.field input[type=date],
.field input[type=time],
.field input[type=number],
.field textarea,
.stack-form input,
.stack-form textarea {
    width: 100%;
    font-family: var(--body);
    font-size: var(--fs-body);
    padding: 12px 16px;
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
}
.field input:focus, .field textarea:focus { border-color: var(--sea); background: var(--card); }
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }

.field.captcha { background: var(--sea-soft); border-radius: var(--r); padding: 20px; }
.field.captcha label { font-family: var(--display); font-size: var(--fs-h3); font-weight: 400; }

.comment-signed { background: var(--sea-soft); border-radius: var(--r); padding: 14px 18px; max-width: none; }

.form-message { margin: 12px 0 0; font-weight: 600; max-width: none; }
.form-message.good { color: var(--sea); }
.form-message.bad { color: var(--coral-deep); }

.comment-count {
    font-family: var(--body);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 14px;
}

.comment {
    background: var(--card);
    border-radius: var(--r);
    box-shadow: var(--shadow-soft);
    padding: 20px 24px;
    margin-bottom: 12px;
}
.comment-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.comment-name { font-weight: 700; color: var(--sea-deep); }
.comment-when { font-size: var(--fs-ui); color: var(--faint); }

/* The body is one element with newlines kept by CSS. Nothing a commenter typed
   is ever turned into a tag, which is what makes text only true rather than
   merely intended. */
.comment-body { white-space: pre-wrap; overflow-wrap: break-word; margin: 10px 0 0; max-width: none; }

.comment-empty { color: var(--faint); }

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

.site-footer { background: var(--mist); margin-top: 48px; padding: 44px 0 24px; }
.footer-inner {
    width: var(--shell);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 40px;
}
.footer-about strong { font-family: var(--display); font-size: var(--fs-h3); font-weight: 400; display: block; margin-bottom: 8px; }
.footer-about p { font-size: var(--fs-ui); color: var(--muted); }
.footer-note { color: var(--faint); }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { color: var(--muted); text-decoration: none; font-size: var(--fs-ui); font-weight: 600; }
.footer-nav a:hover { color: var(--sea-deep); }
.anonymous .account-only { display: none; }
.footer-legal { width: var(--shell); margin: 32px auto 0; font-size: var(--fs-ui); color: var(--faint); }

/* ------------------------------------------------------------- form pages */

.form-page { padding: 24px 0 64px; }
.stack-form { margin-top: 22px; }

.page-hero { padding: 24px 0 12px; }
.page-hero h1 { margin-bottom: .4em; }

.error-page { padding: 40px 0 72px; }
.error-code { font-family: var(--display); font-size: var(--fs-h1); color: var(--line); display: block; line-height: 1; }
.new-page-list { font-family: var(--mono); font-size: var(--fs-ui); }
.new-page-no { margin-top: 14px; }

/* ------------------------------------------------------------ page editor */

.editor-bar { padding: 16px 0 0; }
#editor-list { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; flex-wrap: wrap; }
#editor-list a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-ui);
    font-weight: 600;
    text-decoration: none;
    color: var(--sea-deep);
    background: var(--card);
    box-shadow: var(--shadow-soft);
    border-radius: var(--r-pill);
    padding: 8px 16px;
}
#editor-list a:hover { color: var(--coral-deep); }
.edit-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.confirm { background: var(--sand); border-radius: var(--r); padding: 16px 20px; margin-top: 12px; }
.confirm p { margin: 0 0 10px; max-width: none; font-size: var(--fs-ui); }
.confirm-buttons { display: flex; gap: 10px; }

.edit-form { padding: 20px 0 48px; }
.edit-form input#wikititle {
    width: 100%;
    font-family: var(--display);
    font-size: var(--fs-h3);
    padding: 12px 16px;
    border: 2px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
}
.edit-content-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
#wrapToggle { font-size: var(--fs-ui); }

.linedwrap {
    display: flex;
    border: 2px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    font-family: var(--mono);
    font-size: var(--fs-ui);
    overflow: hidden;
}
.linedwrap .lines {
    flex: none;
    width: 56px;
    padding: 12px 8px;
    background: var(--mist);
    color: var(--faint);
    text-align: right;
    overflow: hidden;
    user-select: none;
}
.linedwrap .lineno { line-height: 1.55; }
.linedwrap textarea {
    flex: 1;
    min-height: 30rem;
    border: none;
    padding: 12px;
    font: inherit;
    line-height: 1.55;
    resize: vertical;
    background: var(--card);
    color: var(--ink);
}
.linedwrap textarea:focus { outline: none; }
.linedwrap textarea.nowrap { white-space: pre; overflow-x: auto; }

/* ------------------------------------------------------------------ admin */

.admin-summary { display: flex; flex-wrap: wrap; gap: 10px; max-width: none; }
.admin-stat {
    background: var(--card);
    box-shadow: var(--shadow-soft);
    border-radius: var(--r-pill);
    padding: 7px 18px;
    font-size: var(--fs-ui);
    font-weight: 600;
}

.panel-lead { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 14px; padding-bottom: 48px; }
.lead-card {
    display: block;
    background: var(--card);
    border-radius: var(--r);
    box-shadow: var(--shadow-soft);
    padding: 20px 22px;
    text-decoration: none;
}
.lead-card:hover { box-shadow: var(--shadow); }
.lead-card strong { display: block; font-family: var(--display); font-size: var(--fs-h3); font-weight: 400; color: var(--sea-deep); }
.lead-card-text > span { font-size: var(--fs-ui); color: var(--muted); }

.admin-panel { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); padding: 28px; margin-bottom: 48px; }
.admin-panel-head { display: flex; justify-content: space-between; align-items: baseline; }
.admin-count { font-size: var(--fs-ui); color: var(--faint); }

.tab-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tab {
    background: var(--mist);
    border: none;
    border-radius: var(--r-pill);
    font-family: var(--body);
    font-size: var(--fs-ui);
    font-weight: 600;
    color: var(--muted);
    padding: 9px 18px;
    cursor: pointer;
}
.tab.active { background: var(--sea); color: #fff; }
.tab span { display: inline-block; background: rgba(255,255,255,.28); border-radius: var(--r-pill); padding: 0 8px; margin-left: 6px; }
.tab:not(.active) span { background: var(--card); }

.bulk-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.bulk-row .button { padding: 9px 18px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-ui); font-weight: 600; }

.queue-item { background: var(--paper); border-radius: var(--r); padding: 20px; margin-bottom: 12px; }
.queue-item.pending { background: var(--coral-soft); }
.queue-item.approved { background: var(--sea-soft); }
.queue-item.rejected { background: var(--mist); opacity: .8; }
.queue-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.queue-head .queue-name { font-weight: 700; }
.queue-meta { font-size: var(--fs-ui); color: var(--muted); }
.queue-body { white-space: pre-wrap; overflow-wrap: break-word; margin: 12px 0; max-width: none; }
.queue-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.queue-actions .button { padding: 8px 16px; }

.split { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 26px; align-items: start; }
.split-list { display: grid; gap: 8px; }
.split-row {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--mist);
    border: none;
    border-radius: var(--r);
    font-family: var(--body);
    font-size: var(--fs-body);
    padding: 14px 18px;
    cursor: pointer;
    color: var(--ink);
}
.split-row:hover { background: var(--sea-soft); }
.split-row.chosen { background: var(--sea); color: #fff; font-weight: 600; }
.split-row small { display: block; font-size: var(--fs-ui); color: var(--faint); }
.split-row.chosen small { color: rgba(255,255,255,.85); }

.admin-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: var(--fs-ui); }
.admin-table th { text-align: left; padding: 0 16px; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.admin-table td { padding: 16px; background: var(--paper); vertical-align: top; }
.admin-table td:first-child { border-radius: var(--r) 0 0 var(--r); }
.admin-table td:last-child { border-radius: 0 var(--r) var(--r) 0; }
.admin-table tr.inactive td { background: var(--coral-soft); }

.limit-row { padding: 16px 0; }
.limit-row label { font-weight: 600; display: block; }
.limit-row input { width: 9rem; padding: 10px 14px; border: 2px solid var(--line); border-radius: var(--r-sm); font-family: var(--body); font-size: var(--fs-body); }

/* ------------------------------------------------------------ sql console */

.sql-console { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 26px; align-items: start; padding-bottom: 48px; }
.sql-schema { font-size: var(--fs-ui); }
.sql-table-name {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--sea-deep);
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    background: var(--mist);
    border: none;
    border-radius: var(--r-sm);
    font-size: var(--fs-ui);
    margin-top: 8px;
}
.sql-table-name:hover { background: var(--sea-soft); }
.sql-columns { list-style: none; margin: 6px 0 10px; padding: 0 0 0 16px; color: var(--faint); }
.sql-columns li { font-family: var(--mono); font-size: var(--fs-label); }
.sql-columns .key { color: var(--coral-deep); font-weight: 700; }

#sql-text, #css-text {
    width: 100%;
    font-family: var(--mono);
    font-size: var(--fs-ui);
    padding: 14px;
    border: 2px solid var(--line);
    border-radius: var(--r);
    background: var(--paper);
    line-height: 1.55;
    resize: vertical;
}

.sql-result { margin-top: 20px; }
.sql-statement { font-family: var(--mono); font-size: var(--fs-ui); background: var(--mist); border-radius: var(--r-sm); padding: 12px 14px; overflow-x: auto; white-space: pre; }
.sql-note { font-size: var(--fs-ui); color: var(--faint); margin: 8px 0; }
.sql-error { color: var(--coral-deep); font-weight: 600; }
.sql-scroll { overflow-x: auto; border-radius: var(--r); }
.sql-grid { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: var(--fs-label); }
.sql-grid th, .sql-grid td { padding: 8px 12px; white-space: pre; border-bottom: 1px solid var(--line-soft); }
.sql-grid th { background: var(--mist); position: sticky; top: 0; text-align: left; }

.css-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.css-tools input { flex: 1 1 12rem; padding: 10px 16px; border: 2px solid var(--line); border-radius: var(--r-pill); font-family: var(--body); font-size: var(--fs-ui); }
.css-tools .button { padding: 9px 18px; }
.css-state, .css-found { font-size: var(--fs-ui); font-weight: 600; color: var(--faint); }

/* ============================== pictures and the shared overlay ========== */

/* A thumbnail floated beside the text it belongs to. The float is what lets the
   appeal wrap around it; the margin keeps the words off it. */
.shot-thumb {
    float: right;
    /* Each picture drops below the one before it rather than sitting beside
       it, so several of them stack down the right hand side as one column and
       the text flows around the whole stack. */
    clear: right;
    width: 240px;
    max-width: 42%;
    margin: 4px 0 20px 24px;
    text-align: center;
}
/* The first picture lines up with the top of the text it belongs to; the ones
   under it are spaced from their neighbour instead. */
.shot-thumb + .shot-thumb { margin-top: 0; }
.shot-thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r);
    box-shadow: var(--shadow);
}
.shot-thumb figcaption {
    font-size: var(--fs-ui);
    font-weight: 700;
    color: var(--sea-deep);
    margin-top: 8px;
}

/* The float has to be cleared or it hangs below the panel it sits in. */
.hero-inner::after, .main-body > section::after { content: ""; display: block; clear: both; }

.popout-holder { position: relative; transition: opacity .3s ease; cursor: pointer; }

/* The thumbnail steps aside while its larger self is on screen and comes back
   as that one leaves. Both sides are driven by the root class, which the
   overlay adds as it opens and drops the instant a close begins, so the two
   cross fade over the same .3s rather than following one another.

   Opacity only, so the space the thumbnail occupies is held and the text
   around it does not reflow underneath the overlay. */
html.overlay-open .popout-holder.popout-active { opacity: 0; }

.popout-badge {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: rgba(15, 92, 104, .68);
    color: #fff;
    line-height: 0;
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease;
}
.popout-badge svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Shown by default, because a touch screen never hovers and a badge that only
   appeared on hover would never appear at all there. Where hovering is real it
   waits to be asked. */
@media (hover: hover) {
    .popout-badge { opacity: 0; transform: translateY(-4px); }
    .popout-holder:hover .popout-badge { opacity: 1; transform: none; }
}
.popout-badge:focus-visible { opacity: 1; transform: none; outline: 2px solid #fff; outline-offset: 2px; }

.overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vmin;
    background: rgba(15, 43, 48, .62);
    /* Faded rather than switched, so the page dims and undims instead of
       flicking. display cannot be transitioned, which is why this is laid out
       with opacity and visibility: the element is always flex, and visibility
       is what keeps a closed overlay from swallowing clicks. On the way out
       visibility is held back for the length of the fade, otherwise it would
       vanish at once and leave nothing to fade.

       overlay.ts waits the same .3s before emptying the stage. The two numbers
       have to agree, so a change here is a change there. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}
.overlay.open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.overlay:focus { outline: none; }
.overlay-stage { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }

/* The page behind must not scroll while the overlay holds the screen. */
html.overlay-open, html.overlay-open body { overflow: hidden; }

/* The enlarged picture, matted the way a photograph is framed. */
.popout-frame {
    background: #fff;
    border: 14px solid #fff;
    border-radius: var(--r);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    max-width: 100%;
    max-height: 100%;
    line-height: 0;
}
.popout-image { display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
    .popout-badge, .popout-holder { transition: none; }
    .overlay, .overlay.open { transition: none; }
}