/*
 * gogo-custom.css - layer 4 of 5 (foundation, tokens, theme, COMPONENTS, app).
 *
 * The composed gogo-* components the pages use. Each is built on fwk-* markup wherever UIkit
 * has the component (navbar, card, grid, form, button, subnav); this file only styles the
 * composition. Values come from gogo-tokens.css (no hex, canon K4). Catalog with live
 * examples: /design/components (brain/standards/design-system/components.md).
 */

/* ---- Display type and section label ------------------------------------------------------- */
.gogo-display {
    font-family: var(--gogo-font-display);
    font-size: var(--gogo-display-size);
    font-weight: var(--gogo-display-weight);
    letter-spacing: var(--gogo-display-tracking);
    line-height: var(--gogo-display-leading);
    color: var(--gogo-text-strong);
    margin: 0 0 var(--gogo-space-6);
    overflow-wrap: break-word;
}

.gogo-lead {
    font-size: var(--gogo-h3-size);
    line-height: var(--gogo-small-leading);
    color: var(--gogo-text-muted);
    max-width: var(--gogo-measure);
}

/* The section label: Inter semibold in sentence case, warm slate, so it reads as part of the
   page rather than a code tag (owner, 1 Oct 2026). */
.gogo-label {
    display: inline-block;
    font-family: var(--gogo-font-sans);
    font-size: var(--gogo-label-size);
    font-weight: var(--gogo-label-weight);
    letter-spacing: var(--gogo-label-tracking);
    line-height: var(--gogo-small-leading);
    color: var(--gogo-label-text);
    margin: 0 0 var(--gogo-space-3);
}

/* ---- Nav capsule: a floating white pill on fwk-navbar markup ------------------------------- */
/* Two classes, so it outranks the theme's transparent .fwk-navbar-container:not(...) rule.
   The text sits on the site content edge and the pill reaches out past it by the inset, but
   never closer than space-2 to the screen edge. The room outside the content edge is the
   gutter, or half of what the window has beyond the container width when that is more; on
   narrow screens the pill stops at space-2 and its text moves in by the difference.
   The right padding leaves out the 12px the last link and the menu toggle carry themselves. */
.fwk-navbar-container.gogo-nav-capsule {
    --gogo-nav-reach: min(var(--gogo-nav-inset), max(var(--gogo-gutter), (100vw - var(--gogo-container-max)) / 2) - var(--gogo-space-2));
    min-height: var(--gogo-nav-height);
    margin-left: calc(-1 * var(--gogo-nav-reach));
    margin-right: calc(-1 * var(--gogo-nav-reach));
    padding-left: calc(var(--gogo-nav-inset) - var(--gogo-hairline-width));
    padding-right: calc(var(--gogo-nav-inset) - var(--gogo-space-3) - var(--gogo-hairline-width));
    background: var(--gogo-canvas);
    border: var(--gogo-hairline-width) solid var(--gogo-border);
    border-radius: var(--gogo-radius-pill);
    box-shadow: var(--gogo-shadow-float);
}

.gogo-nav-capsule .fwk-navbar-left,
.gogo-nav-capsule .fwk-navbar-right,
.gogo-nav-capsule .fwk-navbar-nav {
    gap: var(--gogo-space-1);
}

.gogo-nav-capsule .fwk-navbar-right {
    flex-wrap: nowrap;
}

.gogo-nav-capsule .fwk-navbar-nav > li > a {
    padding-left: var(--gogo-space-3);
    padding-right: var(--gogo-space-3);
}

/* The current page changes two things, never weight alone (designux bottom-nav case): it takes
   the action blue (5.7:1 on the white capsule) and an underline. */
.gogo-nav-capsule .fwk-navbar-nav > li.fwk-active > a {
    color: var(--gogo-accent-text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.gogo-nav-capsule .fwk-navbar-item {
    padding-left: 0;
    padding-right: 0;
}

.gogo-nav-capsule .fwk-button {
    line-height: calc(var(--gogo-touch) - 2px);
    padding: 0 var(--gogo-space-5);
}

.gogo-wordmark {
    font-family: var(--gogo-font-display);
    font-size: var(--gogo-body-size);
    font-weight: var(--gogo-weight-semibold);
    letter-spacing: var(--gogo-h1-tracking);
    color: var(--gogo-text-strong);
    text-decoration: none;
    white-space: nowrap;
}

.gogo-wordmark:hover {
    color: var(--gogo-text-strong);
}

/* ---- Hero band: full-width sunrise wash; the terminal card overhangs its lower edge ------- */
.gogo-hero-band {
    background: var(--gogo-hero-fade), var(--gogo-hero-wash);
    margin-top: calc(-1 * var(--gogo-nav-clear));
    padding-top: calc(var(--gogo-nav-clear) + var(--gogo-nav-after));
    padding-bottom: var(--gogo-space-16);
}

.gogo-hero-band-overlap {
    margin-bottom: var(--gogo-hero-overlap);
}

.gogo-hero-band-overlap .gogo-hero-band-visual {
    position: relative;
    margin-bottom: calc(-1 * var(--gogo-hero-overlap) - var(--gogo-space-16));
}

.gogo-hero-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gogo-space-3);
    margin-top: var(--gogo-space-8);
}

/* ---- Terminal: the real gate refusing an edit, as a styled window ------------------------- */
.gogo-terminal {
    margin: 0;
    background: var(--gogo-term-bg);
    color: var(--gogo-term-fg);
    border-radius: var(--gogo-radius-card);
    box-shadow: var(--gogo-shadow-lift);
    overflow: clip;
    max-width: 100%;
}

.gogo-terminal-bar {
    display: flex;
    align-items: center;
    gap: var(--gogo-space-2);
    padding: var(--gogo-space-3) var(--gogo-space-4);
    background: var(--gogo-term-bar);
}

.gogo-terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--gogo-radius-pill);
    background: var(--gogo-term-dot-close);
}

.gogo-terminal-dot + .gogo-terminal-dot {
    background: var(--gogo-term-dot-min);
}

.gogo-terminal-dot + .gogo-terminal-dot + .gogo-terminal-dot {
    background: var(--gogo-term-dot-max);
}

.gogo-terminal-title {
    margin-left: var(--gogo-space-2);
    font-family: var(--gogo-font-mono);
    font-size: var(--gogo-label-size);
    color: var(--gogo-term-muted);
}

.gogo-terminal-body {
    margin: 0;
    padding: var(--gogo-space-5) var(--gogo-space-4);
    font-family: var(--gogo-font-mono);
    font-size: var(--gogo-small-size);
    line-height: var(--gogo-small-leading);
    color: var(--gogo-term-fg);
    background: transparent;
    border: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    /* On a phone a wrapped line never leaves one word alone ("plan." under its sentence). */
    text-wrap: pretty;
}

.gogo-terminal-body .gogo-terminal-ok {
    color: var(--gogo-term-ok);
}

.gogo-terminal-body .gogo-terminal-warn {
    color: var(--gogo-term-warn);
}

.gogo-terminal-body .gogo-terminal-muted {
    color: var(--gogo-term-muted);
}

@media (min-width: 640px) {
    .gogo-terminal-body {
        padding: var(--gogo-space-6);
    }
}

/* ---- Post card: on fwk-card fwk-card-default fwk-card-body -------------------------------- */
.gogo-post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gogo-post-card:hover {
    border-color: var(--gogo-text-strong);
}

.gogo-post-card .gogo-label {
    margin-bottom: var(--gogo-space-3);
}

.gogo-post-card-title {
    margin: 0 0 var(--gogo-space-3);
}

/* Each format has its own pastel surface (tokens --gogo-format-*) and no edge: the surface
   carries the card, and the transparent border keeps the ink outline on hover. Text stays ink,
   graphite and the blue label, all AA on every pastel (contrast record in gogo-tokens.css). */
.gogo-post-card-problem,
.gogo-post-card-challenge,
.gogo-post-card-experience {
    border-color: transparent;
}

.gogo-post-card-problem {
    background-color: var(--gogo-format-problem-bg);
}

.gogo-post-card-challenge {
    background-color: var(--gogo-format-challenge-bg);
}

.gogo-post-card-experience {
    background-color: var(--gogo-format-experience-bg);
}

/* The format chip, the only pill on the site: a post's format on its card and at the head of
   the post. On the page it fills with the format's pastel; on a format card, which already
   carries that pastel, it fills white so it still reads as a chip. */
.gogo-format-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--gogo-space-1) var(--gogo-space-3);
    border-radius: var(--gogo-radius-pill);
    background-color: var(--gogo-canvas);
    color: var(--gogo-text-strong);
    line-height: 1;
}

.gogo-format-tag-problem {
    background-color: var(--gogo-format-problem-bg);
}

.gogo-format-tag-challenge {
    background-color: var(--gogo-format-challenge-bg);
}

.gogo-format-tag-experience {
    background-color: var(--gogo-format-experience-bg);
}

/* A section label inside prose sits just above its heading; the label takes the section's gap. */
.gogo-prose .gogo-label {
    margin-top: var(--gogo-space-12);
}

.gogo-prose > .gogo-label:first-child {
    margin-top: 0;
}

.gogo-prose .gogo-label + h2 {
    margin-top: 0;
}

/* A label on the sunrise wash, on home's hero band or an inner page's band, is ink. */
.gogo-hero-band .gogo-label,
.gogo-page-wash .gogo-page-head .gogo-label {
    color: var(--gogo-on-wash-label);
}

/* /about: the numbers as tiles, and the three habits as cards. */
.gogo-facts {
    margin-bottom: var(--gogo-space-16);
}

.gogo-fact {
    display: flex;
    flex-direction: column;
    gap: var(--gogo-space-1);
    height: 100%;
    box-sizing: border-box;
}

.gogo-fact .gogo-icon-tile {
    margin-bottom: var(--gogo-space-3);
}

.gogo-fact-number {
    font-family: var(--gogo-font-display);
    font-size: var(--gogo-h2-size);
    font-weight: var(--gogo-weight-semibold);
    line-height: var(--gogo-h2-leading);
    letter-spacing: var(--gogo-h2-tracking);
    color: var(--gogo-text-strong);
}

.gogo-fact-label {
    font-size: var(--gogo-small-size);
    line-height: var(--gogo-small-leading);
    color: var(--gogo-text-muted);
}

.gogo-habits {
    margin-top: var(--gogo-space-6);
    margin-bottom: var(--gogo-space-6);
}

.gogo-habit {
    height: 100%;
    box-sizing: border-box;
}

/* /newsletter's week as a timeline: each step a full-width card, and on a thin line down the
   left a 40px circle in the illustrations' colour carrying the step's type icon, joining Monday
   to the weekend email. The circle's centre sits level with the card's day line. */
.gogo-week {
    list-style: none;
    margin: var(--gogo-space-6) 0 0;
    padding: 0;
}

.gogo-week-step {
    position: relative;
    display: grid;
    grid-template-columns: var(--gogo-space-10) minmax(0, 1fr);
    gap: var(--gogo-space-3);
}

.gogo-week-step + .gogo-week-step {
    margin-top: var(--gogo-space-4);
}

.gogo-week-dot {
    justify-self: center;
    margin-top: var(--gogo-space-4);
    position: relative;
    z-index: 1;
}

/* The line runs from this step's circle down to the next one's; the last step has none. */
.gogo-week-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--gogo-space-10) / 2 - var(--gogo-hairline-width));
    top: var(--gogo-space-4);
    bottom: calc(-1 * var(--gogo-space-4) - var(--gogo-space-4));
    width: calc(2 * var(--gogo-hairline-width));
    background: var(--gogo-border);
}

/* In a step the day and its chip share one line, since the card has the full width. */
.gogo-week-step .gogo-habit .gogo-post-meta {
    flex-direction: row;
    align-items: center;
}

.gogo-week-step .gogo-habit .gogo-post-meta .gogo-label {
    margin: 0;
}

.gogo-week-step .gogo-habit .gogo-post-meta + .fwk-card-title {
    margin-top: var(--gogo-space-3);
}

.gogo-week-email {
    background-color: var(--gogo-signup-bg);
    border-color: transparent;
}

@media (min-width: 640px) {
    .gogo-week-step {
        gap: var(--gogo-space-4);
    }

    .gogo-week-dot {
        margin-top: var(--gogo-space-6);
    }

    .gogo-week-step:not(:last-child)::before {
        top: var(--gogo-space-6);
        bottom: calc(-1 * var(--gogo-space-4) - var(--gogo-space-6));
    }
}

/* /about's habits: one full-width row each, the icon tile beside the title and text. */
.gogo-habit-rows > li + li {
    margin-top: var(--gogo-space-3);
}

/* On a phone the icon sits above the title, so the text keeps the card's full width. */
.gogo-habit-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gogo-space-3);
}

@media (min-width: 640px) {
    .gogo-habit-row {
        flex-direction: row;
        gap: var(--gogo-space-5);
    }
}

.gogo-habit-row .fwk-card-title {
    margin: var(--gogo-space-1) 0 var(--gogo-space-2);
}

.gogo-habit-row p {
    margin: 0;
}

.gogo-habit .gogo-label + .fwk-card-title {
    margin-top: var(--gogo-space-2);
}

/* /newsletter's weekday cards: the day over its format chip, on two lines in every card, so a
   long day name never wraps one card and leaves its heading out of line with the others. */
.gogo-habit .gogo-post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gogo-space-2);
}

.gogo-habit p {
    margin: var(--gogo-space-2) 0 0;
}

/* /newsletter: a weekday card's link to its newest real post, set off from the description. */
.gogo-habit p.gogo-habit-example {
    margin-top: var(--gogo-space-4);
    font-size: var(--gogo-small-size);
    line-height: var(--gogo-small-leading);
}

.gogo-habit-example .fwk-text-meta {
    display: block;
}

/* A section label that opens the prose right after a row of cards keeps the same gap as every
   other section on the page, instead of sitting tight under the cards. */
.gogo-habits + .gogo-prose > .gogo-label:first-child {
    margin-top: var(--gogo-space-12);
}

/* The talk-it-through module (R-11) heads the rail on a post and on /about: a white card with
   the theme's hairline, so it never borrows a format's colour. */
.gogo-talk-module {
    margin-bottom: var(--gogo-space-10);
    background-color: var(--gogo-talk-bg);
}

.gogo-talk-module-text {
    margin: var(--gogo-space-2) 0 0;
    color: var(--gogo-text-strong);
}

/* The subscribe module stands apart from the post cards on a pale blue surface. */
.gogo-signup-module {
    background-color: var(--gogo-signup-bg);
    border-color: transparent;
}

.gogo-post-card-link {
    color: var(--gogo-text-strong);
    text-decoration: none;
}

.gogo-post-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--gogo-radius-card);
}

.gogo-post-card-link:hover {
    text-decoration: underline;
}

.gogo-post-card-summary {
    color: var(--gogo-text-muted);
    margin: 0 0 var(--gogo-space-5);
}

.gogo-post-card-date {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gogo-space-1) var(--gogo-space-4);
    margin: auto 0 0;
    font-family: var(--gogo-font-mono);
    font-size: var(--gogo-label-size);
    color: var(--gogo-text-muted);
}

/* A card with a cover (publishing R-27): the image sits in fwk-card-media-top and the text moves
   into the body, which keeps the card's column so the date still settles at the bottom. */
.gogo-post-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.gogo-post-card-cover,
.gogo-post-cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}

.gogo-post-card-cover {
    border-radius: var(--gogo-radius-card) var(--gogo-radius-card) 0 0;
}

/* The wide card: the cover beside the text from 1200px, stacked above it below that. Covers are
   cut-out illustrations on a transparent ground, so the card's own pastel shows round them and
   the image needs no corner of its own. */
.gogo-post-card-wide {
    height: auto;
}

.gogo-post-card-wide .gogo-post-card-cover {
    border-radius: 0;
}

@media (min-width: 1200px) {
    .gogo-post-card-wide .gogo-post-card-media {
        padding-left: var(--gogo-space-4);
    }
}

/* /blog rows: every post after the newest, on the page itself with no card and no row lines. */
.gogo-post-rows {
    margin-top: var(--gogo-space-10);
}

/* The gap between rows is well over the gap inside one, so each post reads as its own group. */
.gogo-post-rows > li + li {
    margin-top: var(--gogo-space-10);
}

.gogo-post-row {
    position: relative;
    max-width: var(--gogo-measure);
}

.gogo-post-row-title {
    margin: 0 0 var(--gogo-space-2);
}

.gogo-post-row .gogo-post-card-summary {
    margin: 0;
}

/* The cover at the head of a post, at the reading width, above the meta row and the h1. */
.gogo-post-cover {
    margin-bottom: var(--gogo-space-5);
    border-radius: var(--gogo-radius-card);
}

/* ---- Post meta row: format label, date, reading time and the Draft badge on one line ------ */
.gogo-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gogo-space-2) var(--gogo-space-3);
    margin-bottom: var(--gogo-space-3);
    font-family: var(--gogo-font-mono);
    font-size: var(--gogo-label-size);
    line-height: var(--gogo-small-leading);
    color: var(--gogo-text-muted);
}

.gogo-post-meta .gogo-label {
    margin: 0;
}

/* Draft badge, on fwk-label markup: the format chip's shape as an outline, so it never passes
   for a second format; seen in development only (R-03). */
.fwk-label.gogo-draft-badge {
    padding: calc(var(--gogo-space-1) - var(--gogo-hairline-width)) calc(var(--gogo-space-3) - var(--gogo-hairline-width));
    background: transparent;
    color: var(--gogo-text-strong);
    border: var(--gogo-hairline-width) solid var(--gogo-border-control);
    border-radius: var(--gogo-radius-pill);
    text-transform: none;
    font-family: var(--gogo-font-sans);
    font-size: var(--gogo-label-size);
    font-weight: var(--gogo-label-weight);
    letter-spacing: var(--gogo-label-tracking);
    line-height: 1;
}

/* ---- Section heading under a gogo-label: the label already carries the space above -------- */
.gogo-section-title {
    margin-top: 0;
    margin-bottom: var(--gogo-space-8);
}

/* ---- Post page: head, the prose column and the closing invitation ------------------------ */
.gogo-post-head {
    margin-bottom: var(--gogo-space-10);
}

.gogo-post-head h1 {
    margin-bottom: 0;
}

/* The byline under a post's title: the author's face and name, linking to /about. */
.gogo-byline {
    display: flex;
    align-items: center;
    gap: var(--gogo-space-3);
    margin: var(--gogo-space-5) 0 0;
    font-size: var(--gogo-small-size);
}

.gogo-byline-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--gogo-radius-pill);
    background: var(--gogo-surface);
}

.gogo-byline-name {
    font-weight: var(--gogo-weight-semibold);
    color: var(--gogo-text-strong);
    text-decoration: none;
}

.gogo-byline-name:hover {
    text-decoration: underline;
}

/* The block after a post: what comes next, and the way back to the blog. */
.gogo-post-end {
    margin-top: var(--gogo-space-12);
    padding-top: var(--gogo-space-8);
    border-top: var(--gogo-hairline-width) solid var(--gogo-border);
}

/* The next piece as its pastel card, at a third of the column's width on wide screens like the
   /newsletter cards, with the way back to the blog under it. */
.gogo-post-end-next {
    max-width: calc(var(--gogo-measure) / 2);
    margin-bottom: var(--gogo-space-6);
}

.gogo-prose {
    overflow-wrap: break-word;
}

.gogo-prose > :first-child {
    margin-top: 0;
}

.gogo-prose h2 {
    margin-top: var(--gogo-space-12);
}

.gogo-prose h3 {
    margin-top: var(--gogo-space-8);
}

.gogo-prose ul,
.gogo-prose ol {
    padding-left: var(--gogo-space-6);
}

.gogo-prose li + li {
    margin-top: var(--gogo-space-2);
}

.gogo-prose strong {
    color: var(--gogo-text-strong);
}

.gogo-prose em {
    color: inherit;
}

.gogo-prose blockquote {
    margin: var(--gogo-space-6) 0;
    padding-left: var(--gogo-space-5);
    border-left: 3px solid var(--gogo-border-control);
    font-size: var(--gogo-body-size);
    font-style: normal;
    line-height: var(--gogo-body-leading);
    color: var(--gogo-text-strong);
}

.gogo-prose blockquote > :last-child {
    margin-bottom: 0;
}

.gogo-prose pre {
    padding: var(--gogo-space-4);
    background: var(--gogo-surface);
    border: var(--gogo-hairline-width) solid var(--gogo-border);
    border-radius: var(--gogo-radius-sm);
    font-size: var(--gogo-small-size);
    line-height: var(--gogo-small-leading);
    color: var(--gogo-text-strong);
    overflow-x: auto;
}

.gogo-prose pre code {
    padding: 0;
    background: transparent;
    border: 0;
    font-size: inherit;
    color: inherit;
}

.gogo-prose img {
    border-radius: var(--gogo-radius-sm);
}

/* ---- Signup module: the rail card with heading, promise and the form (partials/signup_module) */
/* Card, grid and sticky are foundation (fwk-card, fwk-grid, fwk-sticky); only the text sits here. */
.gogo-signup-module-title {
    margin: 0 0 var(--gogo-space-2);
}

.gogo-signup-module-promise {
    color: var(--gogo-text-muted);
    margin: 0;
}

/* ---- Signup form: on fwk-form-stacked markup (partials/signup_form.php) ------------------- */
/* Each answer is a whole-row label, so the tap target is the full 44px line, not the radio. */
.gogo-signup-form .fwk-fieldset legend {
    padding: 0;
    margin-bottom: var(--gogo-space-2);
}

/* Each answer is a name plus a one-line hint under it, so the radio sits level with the name. */
.gogo-signup-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--gogo-space-3);
    min-height: var(--gogo-touch);
    padding-block: var(--gogo-space-2);
    color: var(--gogo-text-strong);
    cursor: pointer;
}

.gogo-signup-choice .fwk-radio {
    flex: none;
    margin: var(--gogo-space-1) 0 0;
}

.gogo-signup-choice-name {
    display: block;
    font-weight: var(--gogo-weight-semibold);
}

.gogo-signup-choice-hint {
    display: block;
    margin-top: var(--gogo-space-1);
}

/* The safety net right under the button (designux paywall case: the promise sits next to the
   action), so the reader knows the cost before they click. */
.gogo-signup-safety {
    margin: var(--gogo-space-3) 0 0;
    text-wrap: balance;
}

.gogo-signup-error {
    margin: var(--gogo-space-2) 0 0;
    font-size: var(--gogo-small-size);
    font-weight: var(--gogo-weight-semibold);
    line-height: var(--gogo-small-leading);
    color: var(--gogo-danger);
}

/* ---- Page head (inner pages) --------------------------------------------------------------- */
.gogo-page-head {
    margin-bottom: var(--gogo-space-10);
}

.gogo-page-head .gogo-lead {
    margin: 0;
}

/* ---- About: the portrait heads the right rail from 960px; on phones it sits under the lead - */
/* Layout is fwk-grid with fwk-width-2-3@m / fwk-width-1-3@m, one copy fwk-hidden@m, one fwk-visible@m. */
.gogo-portrait {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    margin-bottom: var(--gogo-space-10);
}

@media (min-width: 960px) {
    .gogo-portrait {
        max-width: 100%;
    }
}

/* ---- Design-system kit: live preview structure (render/README.md contract) ---------------- */
.gogo-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: var(--gogo-space-4);
    margin-bottom: var(--gogo-space-8);
}

.gogo-swatch {
    display: flex;
    flex-direction: column;
    border: var(--gogo-hairline-width) solid var(--gogo-border);
    border-radius: var(--gogo-radius-sm);
    overflow: clip;
    background: var(--gogo-canvas);
}

.gogo-swatch-chip {
    display: block;
    height: 64px;
    border-bottom: var(--gogo-hairline-width) solid var(--gogo-border);
}

.gogo-swatch-meta {
    display: flex;
    flex-direction: column;
    gap: var(--gogo-space-1);
    padding: var(--gogo-space-3);
    min-width: 0;
    overflow-wrap: anywhere;
}

.gogo-swatch-use {
    font-size: var(--gogo-small-size);
    color: var(--gogo-text-muted);
}

.gogo-ds-scale-list {
    display: flex;
    flex-direction: column;
    gap: var(--gogo-space-3);
    margin-bottom: var(--gogo-space-8);
}

.gogo-ds-scale {
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    align-items: center;
    gap: var(--gogo-space-4);
}

.gogo-ds-bar {
    display: block;
    height: var(--gogo-space-4);
    background: var(--gogo-text-strong);
    border-radius: var(--gogo-radius-sm);
}

.gogo-ds-radii,
.gogo-ds-shadows {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gogo-space-6);
    margin-bottom: var(--gogo-space-8);
}

.gogo-ds-radius-item,
.gogo-ds-shadow-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gogo-space-2);
}

.gogo-ds-radius-box,
.gogo-ds-shadow-box {
    display: block;
    width: 96px;
    height: 96px;
    background: var(--gogo-surface);
    border: var(--gogo-hairline-width) solid var(--gogo-border);
}

.gogo-ds-type-sample {
    border-bottom: var(--gogo-hairline-width) solid var(--gogo-border);
    padding: var(--gogo-space-4) 0;
}

.gogo-ds-type-sample > :last-child {
    margin-bottom: 0;
}

.gogo-ds-mono-sample {
    font-family: var(--gogo-font-mono);
}

.gogo-ds-italic-sample {
    font-style: italic;
}

.gogo-ds-display-sample {
    font-family: var(--gogo-font-display);
    font-weight: var(--gogo-weight-semibold);
}

.gogo-ds-doc-list {
    margin-top: var(--gogo-space-4);
}

/* Per-token binding rules, generated from brain/design/config.yaml token_manifest (one rule per
   token; a token missing here renders a blank chip). Regenerate when the manifest changes. */
.gogo-swatch[data-token="--gogo-ink"] .gogo-swatch-chip { background: var(--gogo-ink); }
.gogo-swatch[data-token="--gogo-graphite"] .gogo-swatch-chip { background: var(--gogo-graphite); }
.gogo-swatch[data-token="--gogo-slate"] .gogo-swatch-chip { background: var(--gogo-slate); }
.gogo-swatch[data-token="--gogo-smoke"] .gogo-swatch-chip { background: var(--gogo-smoke); }
.gogo-swatch[data-token="--gogo-hairline"] .gogo-swatch-chip { background: var(--gogo-hairline); }
.gogo-swatch[data-token="--gogo-surface-grey"] .gogo-swatch-chip { background: var(--gogo-surface-grey); }
.gogo-swatch[data-token="--gogo-cloud"] .gogo-swatch-chip { background: var(--gogo-cloud); }
.gogo-swatch[data-token="--gogo-white"] .gogo-swatch-chip { background: var(--gogo-white); }
.gogo-swatch[data-token="--gogo-signal-blue"] .gogo-swatch-chip { background: var(--gogo-signal-blue); }
.gogo-swatch[data-token="--gogo-signal-blue-deep"] .gogo-swatch-chip { background: var(--gogo-signal-blue-deep); }
.gogo-swatch[data-token="--gogo-peach-paper"] .gogo-swatch-chip { background: var(--gogo-peach-paper); }
.gogo-swatch[data-token="--gogo-lilac-wash"] .gogo-swatch-chip { background: var(--gogo-lilac-wash); }
.gogo-swatch[data-token="--gogo-aqua-wash"] .gogo-swatch-chip { background: var(--gogo-aqua-wash); }
.gogo-swatch[data-token="--gogo-blue-mist"] .gogo-swatch-chip { background: var(--gogo-blue-mist); }
.gogo-swatch[data-token="--gogo-sunrise-1"] .gogo-swatch-chip { background: var(--gogo-sunrise-1); }
.gogo-swatch[data-token="--gogo-sunrise-2"] .gogo-swatch-chip { background: var(--gogo-sunrise-2); }
.gogo-swatch[data-token="--gogo-sunrise-3"] .gogo-swatch-chip { background: var(--gogo-sunrise-3); }
.gogo-swatch[data-token="--gogo-sunrise-4"] .gogo-swatch-chip { background: var(--gogo-sunrise-4); }
.gogo-swatch[data-token="--gogo-term-black"] .gogo-swatch-chip { background: var(--gogo-term-black); }
.gogo-swatch[data-token="--gogo-term-bar-black"] .gogo-swatch-chip { background: var(--gogo-term-bar-black); }
.gogo-swatch[data-token="--gogo-term-white"] .gogo-swatch-chip { background: var(--gogo-term-white); }
.gogo-swatch[data-token="--gogo-term-green"] .gogo-swatch-chip { background: var(--gogo-term-green); }
.gogo-swatch[data-token="--gogo-term-amber"] .gogo-swatch-chip { background: var(--gogo-term-amber); }
.gogo-swatch[data-token="--gogo-term-grey"] .gogo-swatch-chip { background: var(--gogo-term-grey); }
.gogo-swatch[data-token="--gogo-term-red"] .gogo-swatch-chip { background: var(--gogo-term-red); }
.gogo-swatch[data-token="--gogo-red-deep"] .gogo-swatch-chip { background: var(--gogo-red-deep); }
.gogo-swatch[data-token="--gogo-page"] .gogo-swatch-chip { background: var(--gogo-page); }
.gogo-swatch[data-token="--gogo-footer-bg"] .gogo-swatch-chip { background: var(--gogo-footer-bg); }
.gogo-swatch[data-token="--gogo-canvas"] .gogo-swatch-chip { background: var(--gogo-canvas); }
.gogo-swatch[data-token="--gogo-surface"] .gogo-swatch-chip { background: var(--gogo-surface); }
.gogo-swatch[data-token="--gogo-hero-wash"] .gogo-swatch-chip { background: var(--gogo-hero-wash); }
.gogo-swatch[data-token="--gogo-hero-fade"] .gogo-swatch-chip { background: var(--gogo-hero-fade), var(--gogo-hero-wash); }
.gogo-swatch[data-token="--gogo-border"] .gogo-swatch-chip { background: var(--gogo-border); }
.gogo-swatch[data-token="--gogo-border-control"] .gogo-swatch-chip { background: var(--gogo-border-control); }
.gogo-swatch[data-token="--gogo-text-strong"] .gogo-swatch-chip { background: var(--gogo-text-strong); }
.gogo-swatch[data-token="--gogo-text"] .gogo-swatch-chip { background: var(--gogo-text); }
.gogo-swatch[data-token="--gogo-text-muted"] .gogo-swatch-chip { background: var(--gogo-text-muted); }
.gogo-swatch[data-token="--gogo-accent"] .gogo-swatch-chip { background: var(--gogo-accent); }
.gogo-swatch[data-token="--gogo-accent-text"] .gogo-swatch-chip { background: var(--gogo-accent-text); }
.gogo-swatch[data-token="--gogo-link"] .gogo-swatch-chip { background: var(--gogo-link); }
.gogo-swatch[data-token="--gogo-button-primary-bg"] .gogo-swatch-chip { background: var(--gogo-button-primary-bg); }
.gogo-swatch[data-token="--gogo-button-primary-fg"] .gogo-swatch-chip { background: var(--gogo-button-primary-fg); }
.gogo-swatch[data-token="--gogo-focus-ring"] .gogo-swatch-chip { background: var(--gogo-focus-ring); }
.gogo-swatch[data-token="--gogo-danger"] .gogo-swatch-chip { background: var(--gogo-danger); }
.gogo-swatch[data-token="--gogo-on-wash-label"] .gogo-swatch-chip { background: var(--gogo-on-wash-label); }
.gogo-swatch[data-token="--gogo-tone-peach-bg"] .gogo-swatch-chip { background: var(--gogo-tone-peach-bg); }
.gogo-swatch[data-token="--gogo-tone-lilac-bg"] .gogo-swatch-chip { background: var(--gogo-tone-lilac-bg); }
.gogo-swatch[data-token="--gogo-tone-aqua-bg"] .gogo-swatch-chip { background: var(--gogo-tone-aqua-bg); }
.gogo-swatch[data-token="--gogo-tone-blue-bg"] .gogo-swatch-chip { background: var(--gogo-tone-blue-bg); }
.gogo-swatch[data-token="--gogo-format-problem-bg"] .gogo-swatch-chip { background: var(--gogo-format-problem-bg); }
.gogo-swatch[data-token="--gogo-format-challenge-bg"] .gogo-swatch-chip { background: var(--gogo-format-challenge-bg); }
.gogo-swatch[data-token="--gogo-format-experience-bg"] .gogo-swatch-chip { background: var(--gogo-format-experience-bg); }
.gogo-swatch[data-token="--gogo-signup-bg"] .gogo-swatch-chip { background: var(--gogo-signup-bg); }
.gogo-swatch[data-token="--gogo-talk-bg"] .gogo-swatch-chip { background: var(--gogo-talk-bg); }
.gogo-swatch[data-token="--gogo-label-text"] .gogo-swatch-chip { background: var(--gogo-label-text); }
.gogo-swatch[data-token="--gogo-blob-peach"] .gogo-swatch-chip { background: var(--gogo-blob-peach); }
.gogo-swatch[data-token="--gogo-blob-lilac"] .gogo-swatch-chip { background: var(--gogo-blob-lilac); }
.gogo-swatch[data-token="--gogo-blob-aqua"] .gogo-swatch-chip { background: var(--gogo-blob-aqua); }
.gogo-swatch[data-token="--gogo-blob-sky"] .gogo-swatch-chip { background: var(--gogo-blob-sky); }
.gogo-swatch[data-token="--gogo-blob-ink"] .gogo-swatch-chip { background: var(--gogo-blob-ink); }
.gogo-swatch[data-token="--gogo-inverse-bg"] .gogo-swatch-chip { background: var(--gogo-inverse-bg); }
.gogo-swatch[data-token="--gogo-inverse-text"] .gogo-swatch-chip { background: var(--gogo-inverse-text); }
.gogo-swatch[data-token="--gogo-inverse-muted"] .gogo-swatch-chip { background: var(--gogo-inverse-muted); }
.gogo-swatch[data-token="--gogo-term-bg"] .gogo-swatch-chip { background: var(--gogo-term-bg); }
.gogo-swatch[data-token="--gogo-term-fg"] .gogo-swatch-chip { background: var(--gogo-term-fg); }
.gogo-swatch[data-token="--gogo-term-ok"] .gogo-swatch-chip { background: var(--gogo-term-ok); }
.gogo-swatch[data-token="--gogo-term-warn"] .gogo-swatch-chip { background: var(--gogo-term-warn); }
.gogo-swatch[data-token="--gogo-term-muted"] .gogo-swatch-chip { background: var(--gogo-term-muted); }
.gogo-ds-scale[data-token="--gogo-space-1"] .gogo-ds-bar { width: var(--gogo-space-1); }
.gogo-ds-scale[data-token="--gogo-space-2"] .gogo-ds-bar { width: var(--gogo-space-2); }
.gogo-ds-scale[data-token="--gogo-space-3"] .gogo-ds-bar { width: var(--gogo-space-3); }
.gogo-ds-scale[data-token="--gogo-space-4"] .gogo-ds-bar { width: var(--gogo-space-4); }
.gogo-ds-scale[data-token="--gogo-space-5"] .gogo-ds-bar { width: var(--gogo-space-5); }
.gogo-ds-scale[data-token="--gogo-space-6"] .gogo-ds-bar { width: var(--gogo-space-6); }
.gogo-ds-scale[data-token="--gogo-space-8"] .gogo-ds-bar { width: var(--gogo-space-8); }
.gogo-ds-scale[data-token="--gogo-space-10"] .gogo-ds-bar { width: var(--gogo-space-10); }
.gogo-ds-scale[data-token="--gogo-space-12"] .gogo-ds-bar { width: var(--gogo-space-12); }
.gogo-ds-scale[data-token="--gogo-space-16"] .gogo-ds-bar { width: var(--gogo-space-16); }
.gogo-ds-scale[data-token="--gogo-space-24"] .gogo-ds-bar { width: var(--gogo-space-24); }
.gogo-ds-radius-item[data-token="--gogo-radius-sm"] .gogo-ds-radius-box { border-radius: var(--gogo-radius-sm); }
.gogo-ds-radius-item[data-token="--gogo-radius-card"] .gogo-ds-radius-box { border-radius: var(--gogo-radius-card); }
.gogo-ds-radius-item[data-token="--gogo-radius-pill"] .gogo-ds-radius-box { border-radius: var(--gogo-radius-pill); }
.gogo-ds-shadow-item[data-token="--gogo-shadow-none"] .gogo-ds-shadow-box { box-shadow: var(--gogo-shadow-none); }
.gogo-ds-shadow-item[data-token="--gogo-shadow-float"] .gogo-ds-shadow-box { box-shadow: var(--gogo-shadow-float); }
.gogo-ds-shadow-item[data-token="--gogo-shadow-lift"] .gogo-ds-shadow-box { box-shadow: var(--gogo-shadow-lift); }

/* ---- Icons (data-gogo-icon, registered in gogo-icons.js) ---------------------------------- */
.gogo-icon {
    display: inline-flex;
    vertical-align: -0.125em;
    margin-left: var(--gogo-space-1);
}

/* An icon before its text (a label, a date) rather than after it, like the arrow on a button. */
.gogo-icon.gogo-icon-lead {
    margin-left: 0;
    margin-right: var(--gogo-space-1);
}

/* An ink icon on a round tile in one of the illustrations' blob colours: /about's numbers and
   habits, and the rail module heads. Pick the colour with gogo-blob-<name>; the tile names a
   thing, never a post format, so it stays small and the card behind it stays white. */
.gogo-icon-tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--gogo-space-10);
    height: var(--gogo-space-10);
    border-radius: var(--gogo-radius-pill);
    background: var(--gogo-blob-sky);
    color: var(--gogo-blob-ink);
    font-size: var(--gogo-body-size);
}

.gogo-icon-tile-large {
    width: var(--gogo-space-12);
    height: var(--gogo-space-12);
    font-size: var(--gogo-h3-size);
}

.gogo-blob-peach {
    background: var(--gogo-blob-peach);
}

.gogo-blob-lilac {
    background: var(--gogo-blob-lilac);
}

.gogo-blob-sky {
    background: var(--gogo-blob-sky);
}

.gogo-blob-aqua {
    background: var(--gogo-blob-aqua);
}

/* A rail module's head: its tile beside a short heading. */
.gogo-module-head {
    display: flex;
    align-items: center;
    gap: var(--gogo-space-3);
    margin-bottom: var(--gogo-space-4);
}

.gogo-module-head .fwk-card-title {
    margin: 0;
}