/* rhys.wtf: the old site's stylesheet (Gruvbox, Recoleta, the greeting,
   the post list, albums on cards), with the apps' shared header (the apps
   mark and its menu) and Posts' figures. Fonts and their --font-* tokens
   come from type.css, linked after this. */


:root {

    /* Gruvbox light palette — https://github.com/morhetz/gruvbox */
    --gruvbox-bg0-hard: #f9f5d7;
    --gruvbox-bg0: #fbf1c7;
    --gruvbox-bg0-soft: #f2e5bc;
    --gruvbox-bg1: #ebdbb2;
    --gruvbox-bg2: #d5c4a1;
    --gruvbox-bg3: #bdae93;
    --gruvbox-bg4: #a89984;

    --gruvbox-fg0: #282828;
    --gruvbox-fg1: #3c3836;
    --gruvbox-fg2: #504945;
    --gruvbox-fg3: #665c54;
    --gruvbox-fg4: #7c6f64;

    --gruvbox-gray: #928374;

    --gruvbox-red: #cc241d;
    --gruvbox-green: #98971a;
    --gruvbox-yellow: #d79921;
    --gruvbox-blue: #458588;
    --gruvbox-purple: #b16286;
    --gruvbox-aqua: #689d6a;
    --gruvbox-orange: #d65d0e;

    --gruvbox-red-faded: #9d0006;
    --gruvbox-green-faded: #79740e;
    --gruvbox-yellow-faded: #b57614;
    --gruvbox-blue-faded: #076678;
    --gruvbox-purple-faded: #8f3f71;
    --gruvbox-aqua-faded: #427b58;
    --gruvbox-orange-faded: #af3a03;

    /* Semantic tokens — change these to retheme without touching components */
    --color-bg: var(--gruvbox-bg0);
    --color-surface: var(--gruvbox-bg0-hard);
    --color-border: var(--gruvbox-fg0);
    --color-text: var(--gruvbox-fg1);
    --color-text-strong: var(--gruvbox-fg3);
    --color-muted: var(--gruvbox-fg3);
    --color-link: var(--gruvbox-fg1);
    --color-link-hover: var(--gruvbox-blue-faded);
    --color-error: var(--gruvbox-red-faded);
    /* Empty part of progress bars. */
    --color-track: var(--gruvbox-bg1);

    --spacing: 1rem;
    --radius: 1rem;

    /* Form controls and scrollbars follow the palette in each scheme. */
    color-scheme: light;

    /* Gruvbox dark palette, held here and applied by the two blocks below
       (once for the OS preference, once for the explicit choice) so the
       values exist in exactly one place. The plain accents are the same in
       both schemes, as in Gruvbox itself; the "faded" slots, which this
       stylesheet uses for emphasis, take the dark scheme's bright variants. */
    --gruvbox-dark-bg0-hard: #1d2021;
    --gruvbox-dark-bg0: #282828;
    --gruvbox-dark-bg0-soft: #32302f;
    --gruvbox-dark-bg1: #3c3836;
    --gruvbox-dark-bg2: #504945;
    --gruvbox-dark-bg3: #665c54;
    --gruvbox-dark-bg4: #7c6f64;
    --gruvbox-dark-fg0: #fbf1c7;
    --gruvbox-dark-fg1: #ebdbb2;
    --gruvbox-dark-fg2: #d5c4a1;
    --gruvbox-dark-fg3: #bdae93;
    --gruvbox-dark-fg4: #a89984;
    --gruvbox-dark-red-bright: #fb4934;
    --gruvbox-dark-green-bright: #b8bb26;
    --gruvbox-dark-yellow-bright: #fabd2f;
    --gruvbox-dark-blue-bright: #83a598;
    --gruvbox-dark-purple-bright: #d3869b;
    --gruvbox-dark-aqua-bright: #8ec07c;
    --gruvbox-dark-orange-bright: #fe8019;
}

/* Dark scheme. The visitor's choice (`data-theme` on <html>, set from the
   `theme` cookie by the server and by the header toggle in the browser)
   beats the OS preference in both directions: the first block applies
   the OS's dark preference unless light was chosen, the second applies a
   dark choice regardless of the OS. The two must stay identical. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --gruvbox-bg0-hard: var(--gruvbox-dark-bg0-hard);
        --gruvbox-bg0: var(--gruvbox-dark-bg0);
        --gruvbox-bg0-soft: var(--gruvbox-dark-bg0-soft);
        --gruvbox-bg1: var(--gruvbox-dark-bg1);
        --gruvbox-bg2: var(--gruvbox-dark-bg2);
        --gruvbox-bg3: var(--gruvbox-dark-bg3);
        --gruvbox-bg4: var(--gruvbox-dark-bg4);
        --gruvbox-fg0: var(--gruvbox-dark-fg0);
        --gruvbox-fg1: var(--gruvbox-dark-fg1);
        --gruvbox-fg2: var(--gruvbox-dark-fg2);
        --gruvbox-fg3: var(--gruvbox-dark-fg3);
        --gruvbox-fg4: var(--gruvbox-dark-fg4);
        --gruvbox-red-faded: var(--gruvbox-dark-red-bright);
        --gruvbox-green-faded: var(--gruvbox-dark-green-bright);
        --gruvbox-yellow-faded: var(--gruvbox-dark-yellow-bright);
        --gruvbox-blue-faded: var(--gruvbox-dark-blue-bright);
        --gruvbox-purple-faded: var(--gruvbox-dark-purple-bright);
        --gruvbox-aqua-faded: var(--gruvbox-dark-aqua-bright);
        --gruvbox-orange-faded: var(--gruvbox-dark-orange-bright);
        /* The page sits on bg1 rather than bg0, so controls on the darker
           surface stand out, and all text and borders take the brightest
           foreground. */
        --color-bg: var(--gruvbox-bg1);
        --color-text: var(--gruvbox-fg0);
        --color-text-strong: var(--gruvbox-fg0);
        --color-muted: var(--gruvbox-fg0);
        --color-link: var(--gruvbox-fg0);
        --color-border: var(--gruvbox-fg0);
        --color-track: var(--gruvbox-bg2);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --gruvbox-bg0-hard: var(--gruvbox-dark-bg0-hard);
    --gruvbox-bg0: var(--gruvbox-dark-bg0);
    --gruvbox-bg0-soft: var(--gruvbox-dark-bg0-soft);
    --gruvbox-bg1: var(--gruvbox-dark-bg1);
    --gruvbox-bg2: var(--gruvbox-dark-bg2);
    --gruvbox-bg3: var(--gruvbox-dark-bg3);
    --gruvbox-bg4: var(--gruvbox-dark-bg4);
    --gruvbox-fg0: var(--gruvbox-dark-fg0);
    --gruvbox-fg1: var(--gruvbox-dark-fg1);
    --gruvbox-fg2: var(--gruvbox-dark-fg2);
    --gruvbox-fg3: var(--gruvbox-dark-fg3);
    --gruvbox-fg4: var(--gruvbox-dark-fg4);
    --gruvbox-red-faded: var(--gruvbox-dark-red-bright);
    --gruvbox-green-faded: var(--gruvbox-dark-green-bright);
    --gruvbox-yellow-faded: var(--gruvbox-dark-yellow-bright);
    --gruvbox-blue-faded: var(--gruvbox-dark-blue-bright);
    --gruvbox-purple-faded: var(--gruvbox-dark-purple-bright);
    --gruvbox-aqua-faded: var(--gruvbox-dark-aqua-bright);
    --gruvbox-orange-faded: var(--gruvbox-dark-orange-bright);
    /* The page sits on bg1 rather than bg0, so controls on the darker
       surface stand out, and all text and borders take the brightest
       foreground. */
    --color-bg: var(--gruvbox-bg1);
    --color-text: var(--gruvbox-fg0);
    --color-text-strong: var(--gruvbox-fg0);
    --color-muted: var(--gruvbox-fg0);
    --color-link: var(--gruvbox-fg0);
    --color-border: var(--gruvbox-fg0);
    --color-track: var(--gruvbox-bg2);
}

html {
    /* 100%, not smaller: anything else shrinks text on iOS in landscape. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

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

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

/* <picture> is a container, not a box — keep it out of layout entirely so
   every rule targeting the inner <img> behaves exactly as it did before.
   Without this, <picture>'s default `display: inline` would introduce a
   line box and whitespace gaps around images that are `display: block;
   width: 100%`. */
picture {
    display: contents;
}

/* Keyboard focus — every hover affordance needs a visible keyboard equivalent */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-link-hover);
    outline-offset: 2px;
}

.page {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing);
}

/* Site header: the title, then the light/dark switch and the apps mark. */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.site-header__brand {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.6rem;
    min-width: 0;
}

.site-header__title {
    font-family: var(--font-italic);
    font-size: 3rem;
    color: var(--color-text-strong);
    text-decoration: none;
}

.site-header__title:hover,
.site-header__app:hover {
    color: var(--color-text-strong);
    text-decoration: underline;
}

.site-header__app {
    font-family: var(--font-ui);
    font-size: 1.6rem;
    color: var(--color-muted);
    text-decoration: none;
}

/* Top right, the same in every rhys.wtf app: the apps mark, opening the
   apps menu with the light/dark switch at its foot. */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The apps mark: a rounded square per app in its Gruvbox colour, faded in
   light and bright in dark (the tokens flip). Profiles is red, feeds
   purple, dailies orange; later apps add squares. */
.apps-mark { width: 2rem; height: 2rem; display: block; }
.apps-mark__red { fill: var(--gruvbox-red-faded); }
.apps-mark__orange { fill: var(--gruvbox-orange-faded); }

.apps-mark { width: 2rem; height: 2rem; display: block; }
.apps-mark__red { fill: var(--gruvbox-red-faded); }
.apps-mark__orange { fill: var(--gruvbox-orange-faded); }
.apps-mark__yellow { fill: var(--gruvbox-yellow-faded); }
.apps-mark__green { fill: var(--gruvbox-green-faded); }
.apps-mark__aqua { fill: var(--gruvbox-aqua-faded); }
.apps-mark__gray { fill: var(--gruvbox-gray); }
.apps-mark__blue { fill: var(--gruvbox-blue-faded); }
.apps-mark__purple { fill: var(--gruvbox-purple-faded); }

/* An app's icon: its favicon glyph on a square in its colour. */
.app-icon { width: 2rem; height: 2rem; flex: none; }
.app-icon__back { fill: var(--gruvbox-blue-faded); }
.app-icon--red .app-icon__back { fill: var(--gruvbox-red-faded); }
.app-icon--purple .app-icon__back { fill: var(--gruvbox-purple-faded); }
.app-icon--blue .app-icon__back { fill: var(--gruvbox-blue-faded); }
.app-icon--green .app-icon__back { fill: var(--gruvbox-green-faded); }
.app-icon--orange .app-icon__back { fill: var(--gruvbox-orange-faded); }
.app-icon--yellow .app-icon__back { fill: var(--gruvbox-yellow-faded); }
.app-icon--aqua .app-icon__back { fill: var(--gruvbox-aqua-faded); }
.app-icon--gray .app-icon__back { fill: var(--gruvbox-gray); }
/* The glyphs carry fill="#fbf1c7" for copies without this stylesheet;
   here they follow the palette. */
.app-icon g,
.app-icon text { fill: var(--color-on-accent); }
.app-icon [stroke]:not([stroke="none"]) { stroke: var(--color-on-accent); }

/* The app switcher: click the mark for a list of every app. A <details>,
   so it works without JavaScript; app.js closes it on an outside click. */
.apps-menu { position: relative; }

.apps-menu__button {
    list-style: none;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 0.6rem;
    line-height: 0;
}

.apps-menu__button::-webkit-details-marker { display: none; }
.apps-menu__button:hover,
.apps-menu[open] .apps-menu__button { background: var(--color-surface); }
.apps-menu__button:focus-visible { outline: 2px solid var(--color-link-hover); }

.apps-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 20;
    min-width: 17rem;
    padding: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

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

.apps-menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.6rem;
    text-decoration: none;
    color: var(--color-text);
}

.apps-menu__item:hover,
.apps-menu__item:focus-visible { background: var(--color-bg); }

.apps-menu__text { display: flex; flex-direction: column; min-width: 0; }
.apps-menu__name { font-family: var(--font-ui); font-size: 1.1rem; }
.apps-menu__desc { font-family: var(--font-ui); font-size: 0.9rem; color: var(--color-muted); }

/* The menu's last row, under a rule: the light/dark switch, laid out like
   an app (glyph in a 2rem box, then its name). The moon and "Dark mode"
   show in the light scheme, the sun and "Light mode" in the dark. */
.apps-menu__rule {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 0.5rem 0.25rem;
}

.theme-toggle {
    margin: 0;
}

.theme-toggle__button {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.theme-toggle__glyph {
    width: 2rem;
    height: 2rem;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--color-text-strong);
}

.theme-toggle__icon,
.menu-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: none;
}

.menu-icon,
.theme-toggle__icon--moon,
.theme-toggle__label--to-dark {
    display: block;
}

.theme-toggle__label--to-light {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__icon--moon,
    :root:not([data-theme="light"]) .theme-toggle__label--to-dark {
        display: none;
    }

    :root:not([data-theme="light"]) .theme-toggle__icon--sun,
    :root:not([data-theme="light"]) .theme-toggle__label--to-light {
        display: block;
    }
}

:root[data-theme="dark"] .theme-toggle__icon--moon,
:root[data-theme="dark"] .theme-toggle__label--to-dark {
    display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--sun,
:root[data-theme="dark"] .theme-toggle__label--to-light {
    display: block;
}


/* Greeting hero */
.greeting {
    text-align: center;
    margin: 2rem 0 3rem;
}

.greeting__hello {
    font-family: var(--font-display);
    font-size: clamp(4rem, 15vw, 8rem);
    color: var(--color-text-strong);
    margin: 0;
    line-height: 1;
}

.greeting__welcome {
    font-family: var(--font-body);
    font-size: clamp(1.5rem, 5vw, 3rem);
    color: var(--color-text-strong);
    margin: 0.5rem 0 0;
}

/* Shared section header — title + horizontal rule */
.section-header {
    margin-bottom: 1rem;
}

.section-header__title {
    font-family: var(--font-body);
    font-size: 2rem;
    color: var(--color-text-strong);
    margin: 0 0 -0.25rem 0;
}

.section-header__rule {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 0;
}

/* About */
.about {
    margin-bottom: 1.5rem;
}

.about__paragraph {
    font-size: 1.2rem;
    margin: 0.75rem 0;
}

.about__link {
    text-decoration: underline;
}

/* Home — two flex columns (about+posts | albums) that stack on narrow screens */
.home-flex {
    display: flex;
    flex-direction: column;
}

.home-flex__column {
    min-width: 0;
}

@media (min-width: 1600px) {
    .page {
        max-width: 1700px;
    }
    .greeting {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    .home-flex {
        margin-left: 3rem;
        margin-right: 3rem;
        flex-direction: row;
        gap: 3rem;
    }
    .home-flex__column {
        flex: 1 1 0;
        min-width: 700px;
        max-width: 800px;
    }
}

/* Post list — inline date + title (matches rhys.wtf homepage) */
.post-list {
    margin-bottom: 3rem;
}

.post-list__items {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

.post-list__item {
    line-height: 1.3;
}

.post-list__item-link {
    font-size: 1.2rem;
    text-decoration: none;
}

.post-list__item-link:hover .post-list__item-date,
.post-list__item-link:hover .post-list__item-title {
    color: var(--color-link-hover);
}

.post-list__item-date {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--color-muted);
}

.post-list__item-date::before {
    content: "[";
}

.post-list__item-date::after {
    content: "] — ";
}

.post-list__item-title {
    font-family: var(--font-body);
    color: var(--color-link);
    text-decoration: underline;
}

/* Album list — cards with cover image */
.album-list {
    margin-bottom: 3rem;
}

.album-list__items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1rem;
}

.album-list__item {
    max-width: 20rem;
}

.album-list__cover {
    display: block;
    text-decoration: none;
}

.album-list__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.album-list__title {
    display: block;
    font-family: var(--font-body);
    font-size: 1.4rem;
    text-decoration: underline;
    margin-top: 0.5rem;
}

.album-list__date {
    font-family: var(--font-mono);
    color: var(--color-muted);
    font-size: 0.95rem;
}

.album-list__description {
    font-size: 1.1rem;
    margin-top: 0px;
}

/* Album detail */
.album__header {
    text-align: center;
    margin-bottom: 2rem;
}

.album__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3rem);
    color: var(--color-text-strong);
    margin: 0 0 0.5rem 0;
    line-height: 1.1;
}

.album__description {
    font-family: var(--font-italic);
    font-size: 1.4rem;
    color: var(--color-muted);
    margin: 0;
}

.album__photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: 1.5rem;
}

.photo-card {
    margin: 0;
}

.photo-card__link {
    display: block;
    line-height: 0;
}

.photo-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.photo-card--portrait {
    grid-row: span 2;
}

.photo-card--portrait .photo-card__image {
    aspect-ratio: 2 / 3;
}

.photo-card__caption {
    text-align: center;
    margin-top: 0.5rem;
}

.photo-card__title {
    font-family: var(--font-italic);
    font-size: 1.2rem;
}

.photo-card__description {
    font-size: 1rem;
    color: var(--color-muted);
    margin-top: 0.25rem;
}

/* Single post detail */

.feeds {
    max-width: 40rem;
}

.feeds__group {
    margin-bottom: 1.5rem;
}

.post {
    margin-top: 2rem;
}

.post__header {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.post__title {
    font-family: var(--font-body);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-text-strong);
    margin: 0 0 0 0;
}

.post__date {
    font-family: var(--font-italic);
    color: var(--color-muted);
    font-size: 1.4rem;
    display: block;
    margin-bottom: calc(var(--spacing));
}

.post__body {
    font-size: 1.2rem;
    text-align: left;
}

.post__body p {
    margin: 0.75rem 0;
}

.post__body h1,
.post__body h2,
.post__body h3,
.post__body h4,
.post__body h5,
.post__body h6 {
    font-family: var(--font-body);
    color: var(--color-text-strong);
    margin-bottom: 0.1rem;
}

.post__body h1 { 
    font-size: 2rem;
    line-height: 1.2;
    margin-top: 2rem;
}
.post__body h2 { font-size: 1.85rem; }
.post__body h3 { font-size: 1.7rem; }
.post__body h4 { font-size: 1.55rem; }
.post__body h5 { font-size: 1.4rem; }
.post__body h6 { font-size: 1.25rem; }

.post__body hr { 
    border: 0px;
    border-top: 1px solid var(--color-border); 
}

/* The rule the markdown renderer puts under a top-level heading
   (render.rs): tucked up under the text, the same -0.25rem the home
   page's section headers use, rather than the browser's default half-em
   below it. A standalone --- rule keeps its default spacing. */
.post__body h2 + hr {
    margin-top: -0.35rem; /* collapses with the heading's 0.1rem to -0.25rem */
}

.post__body code {
    font-family: var(--font-mono);
    font-size: 1rem;
}

.post__body pre {
    font-family: var(--font-mono);
    padding: var(--spacing) 0;
    overflow-x: auto;
}

.post__body pre code {
    background: transparent;
    padding: 0;
}



.post__body img {
    max-width: 100%;
    height: auto;
}





/* Site footer — global */
.site-footer {
    text-align: center;
    font-size: 1.2rem;
    padding: 0 var(--spacing) 1rem;
    width: 100%;
}

.site-footer__rule {
    border: 0;
    border-top: 1px solid var(--color-border);
    width: 30%;
    text-align: center;
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.5rem;
}

.site-footer__links li + li::before {
    content: "⁕";
    margin-right: 0.5rem;
}

.site-footer__link {
    font-size: 1.3rem;
    text-decoration: underline;
}

/* Visually hidden until focused, then a plain button at the top left. */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    padding: 0.5rem 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    z-index: 10;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* Async states */
.loading {
    color: var(--color-muted);
    font-style: italic;
}

.error {
    color: var(--color-error);
    padding: var(--spacing);
    border: 1px solid var(--color-error);
    border-radius: var(--radius);
}

.empty {
    color: var(--color-muted);
    text-align: center;
    padding: calc(var(--spacing) * 2);
}


.post__body picture {
    display: contents;
}

.figure {
    margin: 2rem 0;
    text-align: center;
}

.figure img {
    /* Its width and height are said (so the page keeps its place); both
       auto here, so the two limits scale it in proportion. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    vertical-align: middle;
}

.figure figcaption {
    font-size: 1.1rem;
    color: var(--color-muted);
    max-width: 75%;
    margin: 0.5rem auto 0;
}

.figure figcaption > em:first-child + br {
    display: none;
}

.figure figcaption > em:first-child {
    display: block;
    font-family: var(--font-italic);
    font-size: 1.4rem;
    color: var(--color-text);
}


.views__summary {
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
}

/* Day / Month / Year — same shape as .admin__new-btn, with an active state
   that matches its hover */
.views__toggles {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.views__toggle {
    border: 1px solid var(--color-link);
    color: var(--color-link);
    border-radius: 0.3rem;
    padding: 0.15rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-decoration: none;
}

.views__toggle:hover,
.views__toggle--active {
    background: var(--color-link);
    color: var(--color-bg);
}

/* The chart is a flex row of equal columns; each column is a link whose
   bar is sized as a percentage of the busiest bucket. Labels hang below
   the baseline, so the chart reserves room for them in its margin. */
.views__chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 10rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--color-border);
}

.views__col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
}

.views__bar {
    display: block;
    width: 100%;
    background: var(--gruvbox-blue);
    border-radius: 2px 2px 0 0;
}

/* The column spans the full chart height, so shading it on hover tints the
   blank space above the bar too — same shade as a hovered table row, so
   the chart and the tables share one hover language */
.views__col:hover {
    background: var(--gruvbox-bg0-soft);
}

.views__col:hover .views__bar {
    background: var(--gruvbox-blue-faded);
}

.views__col--selected .views__bar {
    background: var(--gruvbox-orange);
}

.views__col--empty {
    cursor: default;
}

.views__label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-muted);
    white-space: nowrap;
}

.views__path {
    color: inherit;
}

/* The page currently filtered to — same orange as the selected chart bar,
   so the two selections read as one idea */
.admin__row--selected,
.admin__row--selected:hover {
    background: var(--gruvbox-bg0-soft);
    box-shadow: inset 3px 0 0 var(--gruvbox-orange);
}

/* The selected page's path in the heading — mono, smaller, muted, so the
   display-font "Page views" stays the title and the path reads as a
   qualifier */
.views__title-path {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: normal;
    color: var(--color-muted);
    margin-top: 0.25rem;
}

/* Secondary link to the live page, next to the drill-down link */
.views__open {
    margin-left: 0.5rem;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-decoration: none;
}

.views__open:hover {
    color: var(--color-link-hover);
}

.views__meter-cell {
    width: 40%;
}

.views__meter {
    height: 0.6rem;
    background: var(--gruvbox-blue);
    border-radius: 2px;
}

.views__num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.views__referrer--internal {
    color: var(--color-muted);
}

/* ---- Admin: shared shell and form pieces ------------------------------- */


.not-found__title {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.not-found__hint {
    color: var(--color-muted);
}

/* Markdown tables can be wider than a phone; scroll them, don't spill. */
.post__body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.post__body th,
.post__body td {
    border: 1px solid var(--color-border);
    padding: 0.25rem 0.5rem;
}

@media print {
    .site-header,
    .site-footer,
    .skip-link {
        display: none;
    }

    .page {
        max-width: none;
        padding: 0;
    }

    .post__body a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
    }
}


/* The header's own light/dark switch, as the old site had it: a form
   posting to /theme, the moon in light and the sun in dark (the icons'
   rules are the menu's, above). */
.header-theme {
    margin: 0;
}

.header-theme__button {
    background: none;
    border: 0;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--color-text-strong);
    display: grid;
    place-items: center;
}

.header-theme__button:hover {
    color: var(--color-link-hover);
}

.header-theme .theme-toggle__icon {
    width: 2rem;
    height: 2rem;
}

/* Home: what else is public, under the albums. */
.diagram-list__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

.diagram-list__item {
    margin: 0;
}

.diagram-list__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.diagram-list__title {
    display: block;
    font-size: 1.1rem;
    margin-top: 0.4rem;
}

.shared-list {
    margin-bottom: 3rem;
}

.shared-list__items {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    font-size: 1.2rem;
}

.shared-list__kind {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--color-muted);
}

.elsewhere {
    font-size: 1.1rem;
    color: var(--color-muted);
}

/* A post's tags, and where to talk about it. */
.post__tags {
    font-family: var(--font-ui);
    margin: 0 0 1rem;
}

.post__discuss {
    margin: 2.5rem 0 1rem;
    font-size: 1.2rem;
    text-align: center;
}

/* The page's view mark (stats.rs): fetched, never seen. */
.seen {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Admin. */
.admin {
    max-width: 60rem;
    margin: 0 auto;
}

.admin__title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    margin: 1rem 0 1.5rem;
    color: var(--color-text-strong);
}

.admin__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
}

.admin__table th,
.admin__table td {
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--color-track);
    vertical-align: top;
}


/* The views chart's bars and the tables' meters, in twentieths of the
   most (views.rs `step`): classes, as the CSP allows no inline styles. */
.h0 { height: 0%; }
.h1 { height: 5%; }
.h2 { height: 10%; }
.h3 { height: 15%; }
.h4 { height: 20%; }
.h5 { height: 25%; }
.h6 { height: 30%; }
.h7 { height: 35%; }
.h8 { height: 40%; }
.h9 { height: 45%; }
.h10 { height: 50%; }
.h11 { height: 55%; }
.h12 { height: 60%; }
.h13 { height: 65%; }
.h14 { height: 70%; }
.h15 { height: 75%; }
.h16 { height: 80%; }
.h17 { height: 85%; }
.h18 { height: 90%; }
.h19 { height: 95%; }
.h20 { height: 100%; }
.w0 { width: 0%; }
.w1 { width: 5%; }
.w2 { width: 10%; }
.w3 { width: 15%; }
.w4 { width: 20%; }
.w5 { width: 25%; }
.w6 { width: 30%; }
.w7 { width: 35%; }
.w8 { width: 40%; }
.w9 { width: 45%; }
.w10 { width: 50%; }
.w11 { width: 55%; }
.w12 { width: 60%; }
.w13 { width: 65%; }
.w14 { width: 70%; }
.w15 { width: 75%; }
.w16 { width: 80%; }
.w17 { width: 85%; }
.w18 { width: 90%; }
.w19 { width: 95%; }
.w20 { width: 100%; }

/* Cross-document navigations fade between pages where the browser can
   (no script: the old site's in-page navigation, done by CSS). */
@view-transition {
    navigation: auto;
}