/*
 * kee.cam base stylesheet
 *
 * Purpose: typography, forms, buttons, tables and alerts shared by every page.
 * Since:   2026-09
 *
 * Album grid and lightbox styles are NOT here - they come over from the legacy plugin's CSS
 * with SPEC-MEDIA and get their own file, so the two can be reviewed separately.
 *
 * Served directly by Apache from public/assets/, so it needs no index.php/ in its URL.
 */

/*
 * The two faces, self-hosted from public/assets/fonts/ (both under the SIL Open Font Licence,
 * whose text sits beside them). Lexend, a rounded geometric face close to the wordmark, is the
 * display face: headings, the menu, buttons. Nunito Sans is the text face. Each comes as one
 * variable file per subset - Latin, and Latin Extended for Slovak - and a browser fetches a
 * subset only when the page holds a character from its range. Served from our own origin, so
 * the content-security policy's `'self'` covers them and no third party learns who reads what.
 */
@font-face {
    font-family: "Lexend";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/lexend-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lexend";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/lexend-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../fonts/nunito-sans-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../fonts/nunito-sans-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../fonts/nunito-sans-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../fonts/nunito-sans-latin-ext-wght-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * The palette is taken from the logo (public/assets/img/kee-logo.svg): its ink for text, its
 * stone - darkened until small text on white passes WCAG AA - for secondary text, and its blue,
 * darkened the same way, for links and buttons. The three raw logo colours (--kc-brand-*) are
 * decoration and status, never behind text: the strip under the header, the mark beside the
 * current menu item, the avatar's ring, the dots on the home page and on a tile's badges.
 *
 * The shape follows from the logo too: it is three overlapping circles, so everything a person
 * presses is a pill, and what is round in the logo is round on the page.
 *
 * Three themes, and one place that decides them. The light values below are the default. The
 * dark values apply when the device asks for dark and the person has not chosen light, and when
 * the person chose dark - layouts/app writes that choice as `data-theme` on <html>, and leaves
 * the attribute out for "follow the device". The two dark blocks therefore hold the same
 * values; change one, change both. Every colour in every stylesheet comes from a token here
 * (gallery.css adds its own story palette the same way), so a component never needs a dark
 * rule of its own. The lightbox is the exception: it is dark in both themes, by design.
 */
:root {
    --kc-bg: #f7f6f3;
    --kc-surface: #ffffff;
    --kc-hover: #f1efea;
    --kc-text: #1c1a17;
    --kc-muted: #6b655c;
    --kc-border: #e3e0da;
    --kc-accent: #0b7ac0;
    --kc-accent-hover: #09649e;
    --kc-accent-soft: #e8f4fc;
    --kc-accent-text: #ffffff;
    /* Filled ink: the current menu item and the selected theme. */
    --kc-ink: #1c1a17;
    --kc-ink-text: #ffffff;
    --kc-brand-orange: #f0834e;
    --kc-brand-green: #6ebb5d;
    --kc-brand-blue: #30aff8;
    /* How the logo's circles combine where they overlap: darker on paper, lighter on ink. */
    --kc-brand-blend: multiply;
    --kc-new: #2d6b22;
    --kc-new-bg: #e9f6e5;
    /* Text that sits on one of the brand colours, in either theme. */
    --kc-on-brand: #ffffff;
    --kc-warn: #8a5a00;
    --kc-error: #b00020;
    --kc-error-bg: #fdf0f2;
    --kc-ok: #0a6a4a;
    --kc-ok-bg: #eef7f2;
    --kc-radius: 10px;
    --kc-radius-lg: 18px;
    --kc-radius-pill: 999px;
    --kc-tile-radius: 14px;
    --kc-shadow: 0 1px 2px rgba(28, 26, 23, 0.06), 0 2px 8px rgba(28, 26, 23, 0.05);
    --kc-shadow-raised: 0 4px 16px rgba(28, 26, 23, 0.1);
    --kc-shadow-pop: 0 8px 24px rgba(28, 26, 23, 0.12);
    --kc-backdrop: rgba(0, 0, 0, 0.45);
    /* The logo's colours at a whisper, for the circles behind an introduction. */
    --kc-motif-orange: rgba(240, 131, 78, 0.1);
    --kc-motif-green: rgba(110, 187, 93, 0.12);
    --kc-motif-blue: rgba(48, 175, 248, 0.1);
    --kc-font-display: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --kc-font-text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --kc-gap: 1rem;
    /* The header's height, strip included. gallery.css parks its sticky panels below it. */
    --kc-header-h: 3.75rem;
    color-scheme: light;
}

/* Dark, from the logo's own ink. Body text is its paper, not white; the accent is the logo's
   blue lightened until it reads on the ink, so a filled button carries dark text instead. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --kc-bg: #141311;
        --kc-surface: #1d1b18;
        --kc-hover: #2a2723;
        --kc-text: #ece8e1;
        --kc-muted: #aaa398;
        --kc-border: #37332e;
        --kc-accent: #5cb8f0;
        --kc-accent-hover: #8ccdf5;
        --kc-accent-soft: #10283a;
        --kc-accent-text: #0b1a24;
        --kc-ink: #ece8e1;
        --kc-ink-text: #141311;
        --kc-brand-blend: screen;
        --kc-new: #8fd37f;
        --kc-new-bg: #17301a;
        --kc-warn: #e8b04a;
        --kc-error: #ff8f87;
        --kc-error-bg: #3a1714;
        --kc-ok: #6fd3a5;
        --kc-ok-bg: #0f2a20;
        --kc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
        --kc-shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.45);
        --kc-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55);
        --kc-backdrop: rgba(0, 0, 0, 0.65);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --kc-bg: #141311;
    --kc-surface: #1d1b18;
    --kc-hover: #2a2723;
    --kc-text: #ece8e1;
    --kc-muted: #aaa398;
    --kc-border: #37332e;
    --kc-accent: #5cb8f0;
    --kc-accent-hover: #8ccdf5;
    --kc-accent-soft: #10283a;
    --kc-accent-text: #0b1a24;
    --kc-ink: #ece8e1;
    --kc-ink-text: #141311;
    --kc-brand-blend: screen;
    --kc-new: #8fd37f;
    --kc-new-bg: #17301a;
    --kc-warn: #e8b04a;
    --kc-error: #ff8f87;
    --kc-error-bg: #3a1714;
    --kc-ok: #6fd3a5;
    --kc-ok-bg: #0f2a20;
    --kc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --kc-shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.45);
    --kc-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55);
    --kc-backdrop: rgba(0, 0, 0, 0.65);
    color-scheme: dark;
}

/* Every logo is drawn twice, once per ground, and the one for the other theme is hidden. Only
   ever hidden, never shown: what shows is left to the logo's own rules, such as the header's
   phone breakpoint that trades the wordmark for the mark. !important so those rules cannot
   bring the wrong one back. */
:root[data-theme="light"] .kc-on-dark,
:root[data-theme="dark"] .kc-on-light {
    display: none !important;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .kc-on-dark {
        display: none !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .kc-on-light {
        display: none !important;
    }
}

/* An element carrying `hidden` is hidden, whatever display a class gives it. */
[hidden] {
    display: none !important;
}

/* Read by a screen reader, not shown: a label that a symbol stands for on screen. */
.kc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: var(--kc-bg);
    color: var(--kc-text);
    font: 16px/1.55 var(--kc-font-text);
    /* A column, so a short page still puts its footer at the bottom of the window. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--kc-accent);
}

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

:focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}

h1,
h2,
h3 {
    font-family: var(--kc-font-display);
    text-wrap: balance;
}

h1 {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin: 0 0 1.25rem;
}

h2 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 2rem 0 0.75rem;
}

h3 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* --- Header and main menu ------------------------------------------------ */

/*
 * One bar for both areas: the logo, the area's menu from its headerTools partial, and the
 * language switcher. It stays on screen while the page scrolls. The strip under it carries the
 * logo's three colours.
 *
 * Below 48rem the menu folds behind a toggle. The fold only happens once nav.js has marked the
 * page (html.kc-js): without the script the menu simply wraps under the logo, still usable.
 */
.kc-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--kc-surface);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg,
        var(--kc-brand-orange) 0 33.3%,
        var(--kc-brand-green) 33.3% 66.6%,
        var(--kc-brand-blue) 66.6% 100%) 1;
    box-shadow: var(--kc-shadow);
}

.kc-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    max-width: 105rem;
    min-height: calc(var(--kc-header-h) - 3px);
    margin: 0 auto;
    padding: 0.5rem 1rem;
}

.kc-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: auto;
    text-decoration: none;
}

.kc-brand__logo {
    display: block;
    height: 1.9rem;
    width: auto;
}

.kc-brand__mark {
    display: none;
    height: 2rem;
    width: auto;
}

/* The administration area wears a label beside the logo, so nobody mistakes where they are. */
.kc-brand__area {
    margin-left: 0.6rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-muted);
    border: 1px solid var(--kc-border);
    border-radius: 999px;
}

.kc-menu-toggle {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    font: inherit;
    font-family: var(--kc-font-display);
    color: var(--kc-text);
    background: transparent;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-pill);
    cursor: pointer;
}

/* Three bars drawn with borders and a shadow, so the toggle needs no icon file. */
.kc-menu-toggle__icon {
    width: 1rem;
    height: 0.7rem;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.kc-header__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.kc-nav-main {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kc-nav-main a {
    position: relative;
    display: block;
    padding: 0.4rem 0.95rem;
    font-family: var(--kc-font-display);
    font-weight: 500;
    color: var(--kc-text);
    text-decoration: none;
    border-radius: var(--kc-radius-pill);
}

.kc-nav-main a:hover {
    background: var(--kc-hover);
    color: var(--kc-text);
}

/* The current item is filled with ink and carries the logo's three circles in front. */
.kc-nav-main a[aria-current="page"] {
    padding-left: 2.05rem;
    color: var(--kc-ink-text);
    background: var(--kc-ink);
}

.kc-nav-main a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0.75rem;
    top: 50%;
    width: 0.95rem;
    height: 0.85rem;
    transform: translateY(-50%);
    background:
        radial-gradient(circle at 30% 68%, var(--kc-brand-orange) 0 30%, transparent 31%),
        radial-gradient(circle at 70% 68%, var(--kc-brand-blue) 0 30%, transparent 31%),
        radial-gradient(circle at 50% 32%, var(--kc-brand-green) 0 30%, transparent 31%);
}

/* The account menu: a native <details>, so it opens without script. nav.js closes it on an
   outside click or Escape. */
.kc-account {
    position: relative;
}

.kc-account > summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.6rem 0.3rem 0.3rem;
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--kc-border);
    border-radius: 999px;
}

.kc-account > summary::-webkit-details-marker {
    display: none;
}

.kc-account > summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.1rem;
    border-right: 2px solid var(--kc-muted);
    border-bottom: 2px solid var(--kc-muted);
    transform: translateY(-2px) rotate(45deg);
}

.kc-account > summary:hover,
.kc-account[open] > summary {
    background: var(--kc-hover);
}

/* The initial on ink, inside a ring of the logo's three colours - drawn as two background
   layers, so it needs no extra markup and no stacking tricks. */
.kc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-family: var(--kc-font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kc-ink-text);
    background:
        radial-gradient(circle closest-side, var(--kc-ink) 0 calc(100% - 4px), var(--kc-surface) calc(100% - 4px) calc(100% - 2.5px), transparent calc(100% - 2.5px)),
        conic-gradient(var(--kc-brand-orange) 0 33.3%, var(--kc-brand-green) 0 66.6%, var(--kc-brand-blue) 0);
    border-radius: 50%;
}

.kc-account__name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kc-account__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 60;
    min-width: 17rem;
    padding: 0.4rem;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    box-shadow: var(--kc-shadow-pop);
}

.kc-account__panel a,
.kc-account__panel button {
    display: block;
    width: 100%;
    padding: 0.45rem 0.6rem;
    font: inherit;
    text-align: left;
    color: var(--kc-text);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--kc-radius);
    cursor: pointer;
}

.kc-account__panel a:hover,
.kc-account__panel button:hover {
    background: var(--kc-hover);
}

/* The theme switch in the account menu: three segments in one pill, the chosen one in ink. */
.kc-theme {
    padding: 0.35rem 0.6rem 0.55rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--kc-border);
}

.kc-theme fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.kc-theme legend {
    padding: 0;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    color: var(--kc-muted);
}

.kc-theme__options {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--kc-hover);
    border-radius: var(--kc-radius-pill);
}

.kc-account__panel .kc-theme__option {
    flex: 1 1 auto;
    width: auto;
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--kc-radius-pill);
}

.kc-account__panel .kc-theme__option:hover {
    background: var(--kc-surface);
}

.kc-account__panel .kc-theme__option[aria-pressed="true"] {
    color: var(--kc-ink-text);
    background: var(--kc-ink);
}

.kc-account__email {
    padding: 0.3rem 0.6rem 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    color: var(--kc-muted);
    border-bottom: 1px solid var(--kc-border);
    overflow-wrap: anywhere;
}

@media (max-width: 47.99rem) {
    .kc-brand__logo {
        display: none;
    }

    .kc-brand__mark {
        display: block;
    }

    .kc-js .kc-menu-toggle {
        display: inline-flex;
    }

    /* Folded: the tools drop into a full-width panel under the bar while the toggle is open. */
    .kc-js .kc-header__tools {
        display: none;
    }

    .kc-js .kc-header.is-menu-open .kc-header__tools {
        display: flex;
    }

    .kc-header__tools {
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 0 0.25rem;
        border-top: 1px solid var(--kc-border);
    }

    .kc-nav-main {
        flex-direction: column;
    }

    .kc-account__panel,
    .kc-header .kc-lang__panel {
        position: static;
        margin-top: 0.4rem;
        box-shadow: none;
    }

    .kc-header .kc-lang {
        align-self: flex-start;
    }
}

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

.kc-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.kc-main--narrow {
    max-width: 26rem;
}

/* A page of tiles reads better wide; past 1680 px rows of 150 px tiles stop being scannable. */
.kc-main--wide {
    max-width: 105rem;
}

.kc-footer {
    border-top: 1px solid var(--kc-border);
    background: var(--kc-surface);
    color: var(--kc-muted);
    font-size: 0.85rem;
}

.kc-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    max-width: 105rem;
    margin: 0 auto;
    padding: 1rem;
}

.kc-footer__mark {
    display: block;
    height: 1.25rem;
    width: auto;
}

.kc-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.kc-footer__links a {
    color: var(--kc-muted);
}

.kc-footer__links a:hover {
    color: var(--kc-text);
}

.kc-footer__copy {
    margin-left: auto;
}

.kc-card {
    background-color: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    box-shadow: var(--kc-shadow);
    padding: 1.25rem;
}

/* The logo's circles, faint, in the corner of the two surfaces that introduce the platform:
   the sign-in card and the landing page's introduction. Background layers over the surface,
   so they sit behind the text and need no markup. */
.kc-main--narrow > .kc-card,
.kc-intro {
    background-image:
        radial-gradient(circle at calc(100% - 4.4rem) 4.6rem, var(--kc-motif-green) 0 3.4rem, transparent 3.45rem),
        radial-gradient(circle at calc(100% - 6.2rem) 7.2rem, var(--kc-motif-orange) 0 3.4rem, transparent 3.45rem),
        radial-gradient(circle at calc(100% - 2.6rem) 7.2rem, var(--kc-motif-blue) 0 3.4rem, transparent 3.45rem);
    background-repeat: no-repeat;
}

/* --- The signed-out shell ------------------------------------------------ */

.kc-auth-brand {
    display: block;
    margin: 1rem auto 1.75rem;
    text-align: center;
}

.kc-auth-brand img {
    height: 2.5rem;
    width: auto;
}

/* On the signed-out pages the footer sits under the card, not across the window. */
.kc-auth-footer {
    margin-top: 1.5rem;
    color: var(--kc-muted);
    font-size: 0.85rem;
    text-align: center;
}

.kc-auth-footer .kc-lang,
.kc-auth-footer .kc-footer__links {
    justify-content: center;
    margin-top: 0.5rem;
}

/* Long-form text such as the privacy policy: lists sit inside the reading measure. */
.kc-prose ul {
    padding-left: 1.25rem;
}

.kc-prose li {
    margin-bottom: 0.35rem;
}

/* --- Navigation and language switcher ----------------------------------- */

.kc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kc-gap);
    margin: 0 0 var(--kc-gap);
    padding: 0;
    list-style: none;
}

/* The language switcher: a native <details>, like the account menu - the current code in a
   small pill, opening to the languages by their own names. */
.kc-lang {
    position: relative;
    font-size: 0.9rem;
}

.kc-lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    list-style: none;
    cursor: pointer;
    color: var(--kc-text);
    border: 1px solid var(--kc-border);
    border-radius: 999px;
}

.kc-lang__toggle::-webkit-details-marker {
    display: none;
}

.kc-lang__toggle::after {
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    margin-left: 0.1rem;
    border-right: 2px solid var(--kc-muted);
    border-bottom: 2px solid var(--kc-muted);
    transform: translateY(-2px) rotate(45deg);
}

.kc-lang__toggle:hover,
.kc-lang[open] > .kc-lang__toggle {
    background: var(--kc-hover);
}

.kc-lang__icon {
    display: block;
    color: var(--kc-muted);
}

.kc-lang__code {
    font-weight: 600;
    letter-spacing: 0.03em;
}

.kc-lang__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 60;
    min-width: 10rem;
    padding: 0.4rem;
    text-align: left;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    box-shadow: var(--kc-shadow-pop);
}

.kc-lang__panel a,
.kc-lang__current {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: var(--kc-radius);
}

.kc-lang__panel a {
    color: var(--kc-text);
    text-decoration: none;
}

.kc-lang__panel a:hover {
    background: var(--kc-hover);
}

/* The language in use, marked rather than linked. */
.kc-lang__current {
    font-weight: 600;
    color: var(--kc-muted);
}

/* Under the sign-in card the switcher is centred, so its panel opens centred under it. */
.kc-auth-footer .kc-lang {
    display: inline-block;
}

.kc-auth-footer .kc-lang__panel {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

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

.kc-field {
    margin: 0 0 var(--kc-gap);
}

.kc-field > label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.kc-field--check > label {
    font-weight: 400;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.kc-hint {
    display: block;
    margin-top: 0.25rem;
    color: var(--kc-muted);
    font-size: 0.85rem;
    font-weight: 400;
}

/* --- Dialogs -------------------------------------------------------------- */

/* Native <dialog>s, on the album page and on the group's people page alike. */

.kc-dialog {
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    padding: 0;
    width: calc(100% - 24px);
    max-width: 480px;
    background: var(--kc-surface);
    color: var(--kc-text);
}

.kc-dialog--wide {
    max-width: 720px;
}

.kc-dialog::backdrop {
    background: var(--kc-backdrop);
}

.kc-dialog__form {
    padding: 16px;
}

.kc-dialog h3 {
    margin: 0 0 12px;
    font-size: 1.1rem;
}

.kc-dialog__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.kc-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.kc-checkbox--inline {
    display: inline-flex;
    margin: 0;
}

.kc-fieldset {
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    margin: 0 0 var(--kc-gap);
    padding: 8px 12px;
}

.kc-fieldset:disabled {
    opacity: 0.55;
}

.kc-fieldset legend {
    font-weight: 500;
    padding: 0 4px;
}

/* The invitation form's albums: a nested list of checkboxes, as deep as the tree. */
.kc-album-picker,
.kc-album-picker__children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kc-album-picker__children {
    padding-left: 1.5rem;
}

.kc-album-picker .kc-checkbox {
    margin: 4px 0;
}

/* A table cell holding several controls side by side, wrapping on a narrow screen. */
.kc-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* The albums an invitation opens, on its landing page. */
.kc-invite-albums {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.6rem;
    font: inherit;
    color: inherit;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
}

input[type="checkbox"] {
    width: auto;
    margin-top: 0.3rem;
}

.kc-btn {
    display: inline-block;
    padding: 0.5rem 1.15rem;
    font: inherit;
    font-family: var(--kc-font-display);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--kc-accent-text);
    background: var(--kc-accent);
    border: 1px solid transparent;
    border-radius: var(--kc-radius-pill);
    cursor: pointer;
    text-decoration: none;
}

.kc-btn--quiet {
    color: var(--kc-text);
    background: transparent;
    border-color: var(--kc-border);
}

.kc-btn--danger {
    color: var(--kc-error);
    background: transparent;
    border-color: var(--kc-border);
}

.kc-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.kc-inline {
    display: inline;
}

/* --- Separators and notes ----------------------------------------------- */

/*
 * The "or" between the sign-in methods on the login page: a horizontal rule with the word
 * sitting on it, drawn with borders so no extra markup is needed.
 */
.kc-sep {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: var(--kc-gap) 0;
    color: var(--kc-muted);
    font-size: 0.9rem;
}

.kc-sep::before,
.kc-sep::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--kc-border);
}

.kc-rule {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--kc-border);
}

.kc-note {
    margin-top: 1.5rem;
    font-size: 0.85rem;
}

/* --- Alerts ------------------------------------------------------------- */

.kc-alert {
    margin: 0 0 var(--kc-gap);
    padding: 0.6rem 0.8rem;
    border: 1px solid transparent;
    border-radius: var(--kc-radius);
}

.kc-alert--ok {
    color: var(--kc-ok);
    background: var(--kc-ok-bg);
    border-color: var(--kc-ok);
}

.kc-alert--error {
    color: var(--kc-error);
    background: var(--kc-error-bg);
    border-color: var(--kc-error);
}

.kc-alert ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

/* --- Tables ------------------------------------------------------------- */

.kc-table-wrap {
    overflow-x: auto;
}

.kc-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--kc-surface);
}

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

.kc-table th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--kc-muted);
}

.kc-muted {
    color: var(--kc-muted);
}

.kc-progress {
    display: block;
    width: 100%;
    max-width: 32rem;
    height: 0.8rem;
    margin: 1rem 0 0.5rem;
}

.kc-drain-status {
    font-weight: 600;
}

.kc-btn:not([disabled]):hover {
    background: var(--kc-accent-hover);
    color: var(--kc-accent-text);
}

.kc-btn--quiet:not([disabled]):hover {
    background: var(--kc-hover);
    color: var(--kc-text);
}

.kc-btn--danger:not([disabled]):hover {
    background: var(--kc-error-bg);
    color: var(--kc-error);
}

/* --- Home page ------------------------------------------------------------ */

/* What the platform is, above the person's groups. */
.kc-intro {
    margin: 0 0 2rem;
    padding: 1.5rem;
    background-color: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    box-shadow: var(--kc-shadow);
}

.kc-intro__lead {
    margin: 0 0 1rem;
    font-size: 1.05rem;
}

.kc-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kc-features li {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    color: var(--kc-muted);
}

.kc-features strong {
    display: block;
    color: var(--kc-text);
}

/* One of the logo's three circles in front of each point. */
.kc-dot {
    flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    transform: translateY(0.05rem);
}

.kc-dot--orange {
    background: var(--kc-brand-orange);
}

.kc-dot--green {
    background: var(--kc-brand-green);
}

.kc-dot--blue {
    background: var(--kc-brand-blue);
}

.kc-intro__help {
    margin: 1rem 0 0;
    font-size: 0.9rem;
}

/* The person's groups, one card each. The whole card is the link. */
.kc-group-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kc-group-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    color: var(--kc-text);
    text-decoration: none;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-top: 3px solid var(--kc-brand-blue);
    border-radius: var(--kc-radius-lg);
    box-shadow: var(--kc-shadow);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.kc-group-cards li:nth-child(3n + 1) .kc-group-card {
    border-top-color: var(--kc-brand-orange);
}

.kc-group-cards li:nth-child(3n + 2) .kc-group-card {
    border-top-color: var(--kc-brand-green);
}

.kc-group-card:hover {
    color: var(--kc-text);
    transform: translateY(-2px);
    box-shadow: var(--kc-shadow-raised);
}

.kc-group-card__name {
    font-family: var(--kc-font-display);
    font-size: 1.1rem;
    font-weight: 600;
}

.kc-group-card__desc {
    flex: 1 0 auto;
    color: var(--kc-muted);
    font-size: 0.9rem;
}

.kc-group-card__count {
    color: var(--kc-muted);
    font-size: 0.85rem;
}

/* Recently shared with you: a row of album cards, the picture a cover or a 2×2 mosaic. */
.kc-shared {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.kc-shared__card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--kc-text);
    text-decoration: none;
}

.kc-shared__card:hover {
    color: var(--kc-accent);
}

.kc-shared__mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--kc-border);
    border-radius: var(--kc-radius-lg);
}

.kc-shared__mosaic--single {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.kc-shared__mosaic img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.kc-shared__placeholder {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: 0.5;
    background: var(--kc-surface);
}

.kc-shared__title {
    font-family: var(--kc-font-display);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kc-shared__group {
    color: var(--kc-muted);
    font-size: 0.85rem;
}

.kc-badge {
    align-self: flex-start;
    padding: 0.1rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--kc-accent-hover);
    background: var(--kc-accent-soft);
    border-radius: 999px;
}

/* --- Help ----------------------------------------------------------------- */

.kc-toc {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
}

.kc-toc ol {
    columns: 2 14rem;
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.kc-toc li {
    margin-bottom: 0.25rem;
    break-inside: avoid;
}

/* A section heading reached from the contents lands below the sticky header, not under it. */
.kc-prose h2[id] {
    scroll-margin-top: calc(var(--kc-header-h) + 1rem);
}

.kc-matrix tbody th {
    font-size: inherit;
    text-transform: none;
    letter-spacing: normal;
    color: var(--kc-text);
    font-weight: 400;
}

.kc-matrix caption {
    padding-bottom: 0.5rem;
    text-align: left;
}

.kc-matrix th:not(:first-child),
.kc-matrix td:not(:first-child) {
    text-align: center;
}

.kc-matrix__yes {
    color: var(--kc-ok);
    font-weight: 600;
}

/* The help page shows two role tables, one after the other. */
.kc-table-wrap + .kc-table-wrap {
    margin-top: 1.5rem;
}