/* ==========================================================================
   Лучи заботы — дизайн-система
   База: Notion (warm neutrals, whisper borders, soft shadows)
   Акценты: тёплая палитра (Lemon / Pomegranate из Clay)
     - Lemon 500  #fbbd41 — primary (золото, как лучи в логотипе)
     - Lemon 700  #d08a11 — primary hover
     - Pomegranate 400 #fc7981 — декоративный розовый
   Тёплые поверхности:
     - Lemon 50  #fef9e7  — мягкий кремовый (warm sections)
     - Lemon 100 #fef3c7  — глубокий кремовый (footer, bage bg)
     - Pomegranate 50 #fff1f2 — секция «о нас»
   ========================================================================== */

/* ---------- Preview banner (used by legal preview, etc.) ---------- */

.preview-banner {
    padding: 1rem 1.25rem;
    background: var(--color-accent-soft, #fff3cd);
    border-left: 4px solid var(--color-accent, #856404);
    border-radius: var(--radius-sm, 4px);
    margin-bottom: 1.5rem;
    color: #5a4500;
}

.preview-banner strong {
    color: #5a4500;
}

/* ---------- Manrope (self-hosted, 400–800 variable) ---------- */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: block;
    src: url('/static/fonts/manrope-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: block;
    src: url('/static/fonts/manrope-latin.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;
}

/* ---------- Design tokens (CSS custom properties) ---------- */

:root {
    /* Surfaces */
    --color-bg: #ffffff;
    --color-bg-warm: #faf9f6;          /* subtle warm white, for cards */
    --color-bg-cream: #fef9e7;         /* Lemon 50 — warm section */
    --color-bg-cream-deep: #fef3c7;    /* Lemon 100 — deeper cream */
    --color-bg-amber: #fbbd41;         /* Lemon 500 — warm hero block */
    --color-bg-amber-deep: #d08a11;    /* Lemon 700 — deeper amber */
    --color-bg-pomegranate: #fff1f2;   /* Pomegranate 50 — soft warm section */

    /* Surfaces for opaque containers (cards, panels, sticky bars).
       Used to be undefined; this token existed as a convention across
       ~10 selectors (panel, requisites-row, sticky-bar). Defining
       it here makes the design system actually a design system. */
    --color-surface: #ffffff;
    --color-surface-soft: #faf9f6;     /* warm white card inset */
    --color-surface-muted: #f4f4f5;    /* cool neutral inset */

    /* Text */
    --color-text: rgba(0, 0, 0, 0.95); /* Notion near-black */
    --color-text-muted: #615d59;       /* warm gray 500 */
    --color-text-faint: #a39e98;       /* warm gray 300 */
    --color-text-inverse: #ffffff;
    --color-text-on-dark: #fef9e7;     /* warm cream on dark sections */

    /* Warm accents (Clay palette) */
    --color-accent: #fbbd41;           /* Lemon 500 — primary CTA */
    --color-accent-hover: #d08a11;     /* Lemon 700 — primary CTA hover */
    --color-accent-text: #1a1a1a;     /* dark text on bright yellow */
    --color-accent-soft: #fef3c7;      /* Lemon 100 — soft surface */

    --color-success: #1aae39;          /* standard success green (used sparingly) */
    --color-success-hover: #15803d;
    --color-success-soft: #d1fae5;     /* soft green surface */

    --color-warm-pink: #fc7981;        /* Pomegranate 400 — decorative */
    --color-warm-pink-soft: #fff1f2;   /* Pomegranate 50 */

    /* Borders (whisper) */
    --color-border: rgba(0, 0, 0, 0.10);
    --color-border-strong: rgba(0, 0, 0, 0.16);

    /* Semantic */
    --color-warning: #dd5b00;
    --color-danger: #dc2626;

    /* Shadows (Notion's stacked low-opacity system) */
    --shadow-card: 0 4px 18px rgba(0, 0, 0, 0.04),
                   0 2.025px 7.847px rgba(0, 0, 0, 0.027),
                   0 0.8px 2.925px rgba(0, 0, 0, 0.02),
                   0 0.175px 1.041px rgba(0, 0, 0, 0.01);
    --shadow-deep: 0 1px 3px rgba(0, 0, 0, 0.01),
                   0 3px 7px rgba(0, 0, 0, 0.02),
                   0 7px 15px rgba(0, 0, 0, 0.02),
                   0 14px 28px rgba(0, 0, 0, 0.04),
                   0 23px 52px rgba(0, 0, 0, 0.05);
    --shadow-warm: 0 4px 18px rgba(208, 138, 17, 0.12),
                   0 2px 6px rgba(208, 138, 17, 0.08);
    --shadow-amber: 0 8px 32px rgba(208, 138, 17, 0.25),
                    0 2px 8px rgba(208, 138, 17, 0.15);

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 9999px;

    /* Spacing scale (8px base, organic) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Typography */
    --font-sans: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

    /* Layout */
    --container-max: 760px;
    --container-wide: 1200px;
}

/* ---------- Reset & base ---------- */

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "lnum" 1, "locl" 1;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-3);
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.75rem; letter-spacing: -0.02em; }
h2 { font-size: 1.375rem; letter-spacing: -0.015em; }
h3 { font-size: 1.125rem; }

p { margin: 0 0 var(--space-3); }

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

a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Container ---------- */

.container {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-4) var(--space-4);
}

.container-wide {
    max-width: var(--container-wide);
}

/* Admin pages need more horizontal room for the post editor and the
   posts table — but we don't want this everywhere. */
body.admin-page .container {
    max-width: var(--container-wide);
}

/* The site footer is rendered by ``base.html`` for every page, including
   admin pages (which extend ``_admin_layout.html`` → ``base.html``). It's
   noise inside the admin shell — the admin already has its own sidebar
   nav and the operator doesn't need social links / copyright there.
   Scoped to ``body.admin-page`` so public pages keep their footer. */
body.admin-page .site-footer {
    display: none;
}

@media (max-width: 767.98px) {
    .container { padding: var(--space-3); }
}

/* ---------- Header (warm cream with subtle warmth) ---------- */

.site-header {
    background: linear-gradient(180deg, #fef9e7 0%, #fef3c7 100%);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-5) 0 var(--space-4);
    position: relative;
}

.site-header::after {
    /* тонкая золотая линия-акцент под шапкой */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-accent) 50%,
        transparent 100%);
    opacity: 0.6;
}

.site-header .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s ease;
}

.site-brand:hover {
    opacity: 0.85;
    text-decoration: none;
}

.site-brand-text {
    display: flex;
    flex-direction: column;
}

.site-name {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-text);
}

.site-tagline {
    margin: 2px 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.site-logo {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--color-bg), 0 2px 8px rgba(208, 138, 17, 0.25);
}

@media (max-width: 767.98px) {
    .site-logo { width: 56px; height: 56px; }
    .site-name { font-size: 1.375rem; }
    .site-tagline { font-size: 0.8125rem; }
}

.site-desc {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    text-align: center;
}

/* ---------- Hero (тёплый амбер, не кричащий) ---------- */

.hero {
    background: linear-gradient(135deg, var(--color-bg-cream) 0%, var(--color-bg-cream-deep) 100%);
    color: var(--color-text);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}

.hero::before {
    /* Декоративный тёплый луч — мягкое свечение в правом верхнем углу */
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(251, 189, 65, 0.35) 0%, transparent 65%);
    pointer-events: none;
}

.hero::after {
    /* Второй луч, слева, для асимметрии и баланса */
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(252, 211, 77, 0.25) 0%, transparent 60%);
    pointer-events: none;
}

.hero h1 {
    color: var(--color-text);
    font-size: 2.25rem;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-3);
    position: relative;
}

.hero p {
    color: var(--color-text-muted);
    font-size: 1.125rem;
    max-width: 520px;
    margin: 0 auto var(--space-5);
    position: relative;
}

.hero-cta {
    display: inline-flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

@media (max-width: 767.98px) {
    .hero { padding: var(--space-6) var(--space-3); }
    .hero h1 { font-size: 1.75rem; }
    .hero p { font-size: 1rem; }
}

/* ---------- Тёплые секции (чередование) ---------- */

.section-warm {
    background: var(--color-bg-cream);
    padding: var(--space-7) var(--space-4);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.section-pomegranate {
    background: var(--color-bg-pomegranate);
    padding: var(--space-7) var(--space-4);
}

.section-cream-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.section-warm h2,
.section-pomegranate h2 {
    color: var(--color-text);
}

/* ---------- Footer (тёплый кремовый с амбер-акцентом) ---------- */

.site-footer {
    background: var(--color-bg-cream-deep);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-5) 0;
    font-size: 0.875rem;
    border-top: 1px solid var(--color-border);
}

.site-footer p { margin: 0; }
.site-footer a { color: var(--color-accent-hover); font-weight: 600; }
.site-footer a:hover { color: var(--color-bg-amber-deep); text-decoration: underline; }

.footer-nav {
    margin-bottom: var(--space-2);
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.footer-nav a {
    color: var(--color-text-muted);
    font-weight: 500;
}

.footer-nav a:hover {
    color: var(--color-accent-hover);
    text-decoration: none;
}

/* ---------- Cards (the workhorse) ---------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-warm);
    transform: translateY(-2px);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.1s ease,
                box-shadow 0.15s ease;
    white-space: nowrap;
}

.btn:active { transform: scale(0.97); }
.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(208, 138, 17, 0.2);
}

.btn-primary:hover {
    background: var(--color-accent-hover);
    color: var(--color-text-inverse);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(208, 138, 17, 0.3);
}

.btn-success {
    background: var(--color-success);
    color: var(--color-text-inverse);
    border-color: transparent;
}

.btn-success:hover {
    background: var(--color-success-hover);
    color: var(--color-text-inverse);
    text-decoration: none;
}

.btn-secondary {
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
    border-color: transparent;
}

.btn-secondary:hover {
    background: #fde68a;
    color: var(--color-accent-text);
    text-decoration: none;
}

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

.btn-ghost:hover {
    background: var(--color-bg-cream);
    color: var(--color-text);
    text-decoration: none;
}

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.btn-outline:hover {
    background: var(--color-bg-cream);
    color: var(--color-text);
    text-decoration: none;
    border-color: var(--color-accent);
}

.btn-outline-light {
    background: transparent;
    color: var(--color-text-on-dark);
    border-color: rgba(254, 249, 231, 0.4);
}

.btn-outline-light:hover {
    background: rgba(254, 249, 231, 0.1);
    color: var(--color-text-on-dark);
    text-decoration: none;
    border-color: var(--color-accent);
}

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

.btn-danger:hover {
    background: #fef2f2;
    color: var(--color-danger);
    text-decoration: none;
}

.btn-small {
    font-size: 0.8125rem;
    padding: 0.3125rem 0.625rem;
}

/* ---------- Forms (warm focus ring) ---------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="file"],
textarea,
select {
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.625rem;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(251, 189, 65, 0.25);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-faint);
}

label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

label input,
label textarea,
label select {
    margin-top: 0.375rem;
}

.check-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.check-row input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--color-accent);
}

.hint {
    font-size: 0.8125rem;
    color: var(--color-text-faint);
    margin: 0 0 var(--space-2);
}

/* ---------- Flash messages (admin: stacked region at top of main column) ---------- */
/* Three categories in use: ``flash`` (info/success — accent cream),
   ``error`` (red), ``warning`` (orange) — see ``flash(...)`` calls in
   app/blueprints/admin.py. The region pattern (one block, multiple
   optional messages) sits inside .admin-content-header so it lives
   above the form title and is impossible to miss. */

.flash-region {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
}

.flash-region > p,
.flash,
.error,
p[class*="flash"],
p[class*="error"]:not(.error-message):not(.error-back) {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md, 0.5rem);
    font-size: 0.9375rem;
    font-weight: 500;
    margin: 0;
    border: 1px solid transparent;
    border-left-width: 4px;
    background-clip: padding-box;
}

.flash-region > p::before,
.flash::before,
.error::before,
p[class*="flash"]::before,
p[class*="error"]:not(.error-message):not(.error-back)::before {
    display: inline-block;
    flex-shrink: 0;
    font-weight: 700;
    line-height: 1.2;
}

/* Success / info — warm cream, lemon accent strip. */

.flash,
.flash-region > p.flash,
p.flash,
p[class*="flash"]:not([class*="error"]) {
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}
.flash::before,
.flash-region > p.flash::before,
p.flash::before,
p[class*="flash"]:not([class*="error"])::before {
    content: "✓";
    color: var(--color-accent-hover);
}

/* Error — soft red, danger accent strip. */

.error,
.flash-region > p.error,
p.error,
p[class*="error"]:not(.error-message):not(.error-back) {
    background: #fef2f2;
    color: #991b1b;
    border-color: var(--color-danger, #dc2626);
}
.error::before,
.flash-region > p.error::before,
p.error::before,
p[class*="error"]:not(.error-message):not(.error-back)::before {
    content: "!";
    color: var(--color-danger, #dc2626);
}

/* Warning (used sparingly). */

.warning,
.flash-region > p.warning,
p.warning {
    background: #fff7ed;
    color: #9a3412;
    border-color: var(--color-warning, #dd5b00);
}

/* ---------- Inline notices (e.g. <noscript> fallback) ---------- */

.notice {
    display: block;
    padding: 0.75rem 1rem;
    margin: var(--space-3) 0;
    background: var(--color-surface-muted, #f4f4f5);
    color: var(--color-text-muted, #52525b);
    border: 1px solid var(--color-border, #e4e4e7);
    border-radius: var(--radius-md, 0.5rem);
    font-size: 0.875rem;
}

/* ---------- Feed (homepage list of posts) ---------- */

.feed-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-5);
}

.feed-empty {
    text-align: center;
    color: var(--color-text-faint);
    padding: var(--space-8) 0;
    font-size: 0.9375rem;
}

.feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.post {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.post:hover {
    border-color: rgba(251, 189, 65, 0.4);
    box-shadow: var(--shadow-warm);
}

.post-title {
    margin: 0 0 var(--space-2);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.post-title a {
    color: var(--color-text);
    text-decoration: none;
}

.post-title a:hover {
    color: var(--color-accent-hover);
    text-decoration: none;
}

.post-text {
    color: var(--color-text);
    margin: var(--space-3) 0;
    line-height: 1.6;
    word-break: break-word;
}

.post-date {
    color: var(--color-text-faint);
    font-size: 0.8125rem;
    font-weight: 500;
}

.post-media {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-surface-muted, #f4f4f5);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
}

.post-media-link {
    display: block;
    margin: var(--space-4) 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.post-media-link .post-media {
    margin: 0;
    transition: transform 0.2s ease;
}

.post-media-link:hover .post-media {
    transform: scale(1.01);
}

iframe.post-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-md);
}

.post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.post-views {
    color: var(--color-text-faint);
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.post-views-detail {
    margin: 0 0 var(--space-3);
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-accent-hover);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
}

.read-more:hover {
    color: var(--color-success-hover);
    text-decoration: none;
}

.read-more::after {
    content: '→';
    transition: transform 0.15s ease;
}

.read-more:hover::after {
    transform: translateX(3px);
}

/* ---------- Back link (full post page) ---------- */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    margin: 0 0 var(--space-4);
}

.back-link::before {
    content: '←';
    transition: transform 0.15s ease;
}

.back-link:hover {
    color: var(--color-accent-hover);
    text-decoration: none;
}

.back-link:hover::before {
    transform: translateX(-3px);
}

.post-full .back-link {
    display: inline-flex;
}

.post-full .back-link:first-child { margin-bottom: var(--space-4); }
.post-full .back-link:last-child {
    margin-top: var(--space-5);
    margin-bottom: 0;
}

/* ---------- Page-media gallery ----------
 * Operator-edited pages (``/<slug>``) and ``/about`` render attached
 * images as a lightbox-bound thumbnail grid under the content.
 * Each ``.post-media-thumb`` wraps a 1080-edge WebP and links to the
 * full 1920-edge variant; clicks bubble to the existing lightbox.js
 * handler (selector: ``a[data-lightbox]``) so we reuse the same overlay
 * the post archive uses.
 */

.post-media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.post-media-thumb {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-bg-cream);
}

.post-media-thumb img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.post-media-thumb:hover img,
.post-media-thumb:focus img {
    transform: scale(1.04);
}

@media (max-width: 600px) {
    .post-media-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* One image — full-width block, centred, no thumbnail frame.
 * Two images — two equal columns. 3+ — auto-fill grid (default above).
 * Count is set by Jinja as ``count-N`` on the gallery wrapper; we
 * keep the rule CSS-only so the template stays simple.
 */
.post-media-gallery.count-1 {
    display: block;
    max-width: 720px;
    margin-inline: auto;
}
.post-media-gallery.count-1 > .post-media-thumb {
    display: block;
}
.post-media-gallery.count-1 > .post-media-thumb img {
    width: 100%;
    height: auto;
    max-height: none;
}

.post-media-gallery.count-2 {
    grid-template-columns: 1fr 1fr;
}

/* ---------- Text + media side-by-side layout ----------
 * Wraps the prose and the media gallery on operator pages (/<slug>)
 * and /about. Desktop / landscape: prose on the left, media on the
 * right at a fixed column width. Portrait and narrow viewports:
 * stack — prose on top, media below.
 *
 * The image keeps the base ``.post-media-thumb img`` behaviour —
 * width:100%, height:auto, object-fit:contain, max-height:80vh —
 * so it is never cropped, and the prose drives the column height
 * via ``align-items: start`` (a tall image simply makes the media
 * column longer; the prose column stays anchored at the top).
 */
.layout-text-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-5);
    align-items: start;
}

.layout-text-media > .post-text {
    min-width: 0;
}

.layout-text-media .post-media-gallery {
    margin: 0;
}

/* count-1 inside the layout shouldn't fall back to the global 720px
 * cap — the right column is only 320px wide, so let the image fill it.
 */
.layout-text-media .post-media-gallery.count-1 {
    max-width: none;
    margin-inline: 0;
}

@media (orientation: portrait) and (max-width: 1024px) {
    .layout-text-media {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .layout-text-media .post-media-gallery.count-1 {
        max-width: 720px;
        margin-inline: auto;
    }
}

/* ---------- Lightbox ---------- */

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.92);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: zoom-out;
}

.lightbox.open { display: flex; }

.lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
    outline: none;
}

.lightbox-close:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.6);
}

/* ---------- Login & install pages ---------- */

.login-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    background: linear-gradient(180deg, var(--color-bg-cream) 0%, var(--color-bg-pomegranate) 100%);
}

.login-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-deep);
    padding: var(--space-6) var(--space-5);
    width: 100%;
    max-width: 400px;
}

.login-box h1 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: var(--space-5);
    color: var(--color-text);
}

.login-box h1::before {
    /* маленький золотой маркер */
    content: '✦';
    display: block;
    color: var(--color-accent);
    font-size: 1.25rem;
    margin-bottom: var(--space-2);
}

.login-box .btn { width: 100%; margin-top: var(--space-3); }

.login-box form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.login-box .muted {
    text-align: center;
    margin: var(--space-4) 0 0;
    color: var(--color-text-faint);
    font-size: 0.875rem;
}

.login-box .muted a { color: var(--color-text-muted); }
.login-box .muted a:hover { color: var(--color-accent-hover); }

/* ---------- Admin panel ---------- */

/* ---------- Admin layout: sidebar + content ---------- */

.admin-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-5);
    align-items: start;
}

.admin-sidebar {
    position: sticky;
    top: var(--space-4);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.admin-sidebar-brand {
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.admin-sidebar-title {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-text);
}

.admin-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-sidebar-list a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
}

.admin-sidebar-list a:hover {
    background: var(--color-bg-cream);
    color: var(--color-text);
}

.admin-sidebar-list a.is-current {
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
    font-weight: 600;
}

.admin-sidebar-logout {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    display: flex;
}

.admin-sidebar-logout button {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.admin-sidebar-logout button:hover { color: var(--color-accent-hover); }

.admin-content {
    min-width: 0;            /* allow grid item to shrink for tables */
}

.admin-content-header {
    margin-bottom: var(--space-5);
}

.admin-content-header h1 {
    margin: 0;
    font-size: 1.5rem;
}

@media (max-width: 767.98px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }
    .admin-sidebar {
        position: static;
    }
}

.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-card);
}

.panel h2 {
    margin: 0 0 var(--space-4);
    font-size: 1.125rem;
    color: var(--color-text);
}

.panel form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.inline-form { display: inline; margin: 0; }

.media-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background: var(--color-bg-cream);
    border-radius: var(--radius-md);
}

.media-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    min-width: 120px;
}

.media-preview img {
    max-width: 100px;
    max-height: 100px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.media-preview .media-video-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
    word-break: break-word;
}

.media-preview label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-faint);
    margin: 0;
}

.actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

/* Spaced variant: pushes first/last items to opposite ends. Used by
   list pages that put a heading + an "Add" button in one row. */
.actions--between {
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

/* Sticky bottom action row. Pinned to the viewport bottom while the
   long form (post editor, page editor) is being scrolled, so the
   primary save button is always reachable. Hidden automatically on
   short forms (``.actions--sticky`` only applies where used).

   Bottom-bar look: subtle top border + soft shadow + warm surface,
   matching the panel it lives in. The container must be allowed to
   span past the normal content padding — we use position: sticky
   inside the .panel which is the form's flex parent. */
.actions--sticky {
    position: sticky;
    bottom: 0;
    margin: var(--space-4) calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.04);
    z-index: 2;
}

/* Mobile: stack vertically so the primary button stays in thumb's reach. */
@media (max-width: 640px) {
    .actions--sticky {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .actions--sticky > .btn { width: 100%; }
}

/* The default h2 has margin-bottom -- inside a flex actions row we
   don't want it. */
.actions h2 { margin: 0; }

.form-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: 0 0 var(--space-4);
    background: var(--color-surface-soft);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ---------- Form tabs (Основное / SEO) ---------- */

.form-tabs {
    display: flex;
    gap: 0;
    margin-bottom: -1px;     /* overlap the fieldset's top border */
}

.form-tabs input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* The radios sit *outside* .form-tabs (siblings to the panes) so the
   CSS-only tab toggle works. Inputs themselves are still hidden by
   the rules below; only their :checked state drives visibility. */

input[name="post_tab"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-tabs label {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--color-surface);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-faint);
    margin-right: -1px;       /* collapse duplicate borders between tabs */
}

.form-tabs input[type="radio"]:checked + label,
#post-tab-main:checked ~ .form-tabs label[for="post-tab-main"],
#post-tab-seo:checked ~ .form-tabs label[for="post-tab-seo"] {
    background: var(--color-surface-soft);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-surface-soft); /* visually merges with fieldset */
}

.form-tabs input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--color-accent, #4a90e2);
    outline-offset: 2px;
}

/* --- CSS-only tab content switching --- */

/* Default: hide all panes. The checked radio reveals its own pane
   via the sibling selector below. */
.tab-pane { display: none; }

#post-tab-main:checked ~ .tab-pane-main { display: block; }
#post-tab-seo:checked ~ .tab-pane-seo  { display: block; }


.form-section legend {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    padding: 0 var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
}

.form-section label {
    margin-bottom: 0;
}

.seo-og-image-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.og-preview {
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}

.og-preview img {
    max-width: 240px;
    max-height: 120px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    display: block;
}

.posts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.posts-table th,
.posts-table td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.posts-table th {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.posts-table tr.row-inactive { opacity: 0.55; }

.posts-table .row-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    border-bottom: 0;
    padding: var(--space-2) var(--space-3);
}

.posts-table .muted { color: var(--color-text-faint); }

/* ---------- About / requisites ---------- */

.requisites {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: var(--space-4) 0;
    background: var(--color-surface);
}

.requisites-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0.75rem 1rem;
}

.requisites-row:nth-child(odd) {
    background: var(--color-bg-cream);
}

.requisites-label {
    color: var(--color-text-muted);
    flex-shrink: 0;
    font-size: 0.9375rem;
}

.requisites-value {
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    color: var(--color-text);
}

.requisites-title {
    margin: var(--space-5) 0 var(--space-3);
    font-size: 1.125rem;
}

.requisites-qr {
    margin: var(--space-4) auto var(--space-5);
    padding: var(--space-4);
    background: var(--color-bg-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    max-width: 360px;
}

.qr-frame {
    display: flex;
    justify-content: center;
    padding: var(--space-3);
    background: #fff;
    border-radius: var(--radius-sm);
}

.qr-image {
    width: 100%;
    height: auto;
    max-width: 320px;
    display: block;
}

/* ---------- WYSIWYG (Trix) ---------- */

trix-editor.post-text-editor {
    display: block;
    min-height: 320px;
    background: #fff;
    border-radius: var(--radius-sm);
    margin-top: var(--space-2);
}

/* ---------- WYSIWYG (Quill) — post text editor only ---------- */

/* The post editor on /admin (app/templates/admin.html:36-40) needs a
   taller canvas than Quill's default (~150-180px is too small for 15-20
   lines of editing). Quill renders ``<div class="ql-container"><div
   class="ql-editor">…</div></div>`` inside our ``#post-text-editor``
   host. Other admin pages (admin_page_about / privacy / new / edit)
   also use Quill but with shorter content — they must keep Quill's
   default compact height. ``.tab-pane-main`` exists only on the post
   editor (admin.html), not on the operator-pages editors, so this
   selector is precise. We set a ``min-height`` rather than a fixed
   height so the editor can grow with long posts. */
.tab-pane-main #post-text-editor .ql-editor {
    min-height: 540px;
}

.post-text {
    /* Trix emits <div> wrappers that look identical to site styles. */
    line-height: var(--line-height-loose, 1.6);
}

.post-text p { margin: 0 0 var(--space-3); }
.post-text h2 { margin: var(--space-5) 0 var(--space-3); }
.post-text h3 { margin: var(--space-4) 0 var(--space-2); }
.post-text ul, .post-text ol { padding-left: var(--space-5); margin: 0 0 var(--space-3); }
.post-text blockquote {
    margin: var(--space-3) 0;
    padding-left: var(--space-3);
    border-left: 3px solid var(--color-border);
    color: var(--color-text-faint);
    font-style: italic;
}
.post-text img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.post-text pre, .post-text code {
    background: #f5f1ea;
    border-radius: 3px;
    padding: 0.1em 0.3em;
    font-size: 0.95em;
}

/* ---------- Метрики / цифры (как в hero) ---------- */

.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0 0;
}

.metric {
    text-align: center;
    padding: var(--space-3);
}

.metric-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-accent);
    letter-spacing: -0.02em;
    line-height: 1;
}

.metric-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* ---------- Utility ---------- */

.muted { color: var(--color-text-faint); }

.empty {
    text-align: center;
    color: var(--color-text-faint);
    padding: var(--space-8) 0;
}

.text-center { text-align: center; }

/* ---------- Header / container modifiers ---------- */

/* The footer-nav is reused in the site header — give it a small gap
   below the brand block. */
.site-header .footer-nav { margin-top: var(--space-3); }

/* Feed pages put the post list in a <main class="container"> that sits
   right under the hero / page heading — give it a touch of top padding
   so the first post doesn't hug the previous block. */
.container--gap { padding-top: var(--space-6); }

/* A textarea that should render in a monospace font (e.g. editing raw
   Markdown / config). Width is already 100% from the global textarea
   rule, so this only needs the font. */
.textarea-mono {
    font-family: var(--font-mono);
    line-height: 1.5;
}

/* ---------- Badges (роли в /admin/users) ---------- */

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.5;
}

.badge-admin {
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
}

.badge-editor {
    background: var(--color-bg-pomegranate);
    color: #9f1239;
}

/* ---------- Print ---------- */

@media print {
    .site-header::after, .site-footer, .back-link, .post-footer { display: none; }
    .post { border: 0; box-shadow: none; padding: 0; }
    .hero { background: white; color: black; padding: 0; }
}

/* ---------- Share buttons (post page) ---------- */

.post-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.post-share-label {
    margin-right: 0.25rem;
}

.post-share-btn {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg-warm);
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.post-share-btn:hover,
.post-share-btn:focus {
    background: var(--color-bg-amber);
    border-color: var(--color-bg-amber-deep);
    color: #000;
}

.post-share-copy {
    font: inherit;
}

/* ---------- Error pages (404 / 500) ----------
   The actual selectors live further down (search for "Error page (404)"),
   where they were rewritten to use design tokens (Lemon 500, cream
   backdrop) and the decorative sun. The legacy rules that used to live
   here were removed because they collided with the rewrite (notably
   ``.error-page { padding: 4rem 1rem }`` plus
   ``.container { padding: var(--space-4) }`` produced the heavy
   top/bottom stripes operator reported on 404) — see PR#6 and #8. */

/* ---------- Pagination (archive) ---------- */

.archive-count {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 2rem 0 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.pagination-prev,
.pagination-next,
.pagination-page,
.pagination-current {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.2;
    text-decoration: none;
}

.pagination-prev,
.pagination-next {
    color: var(--color-text);
    border: 1px solid var(--color-border);
    background: var(--color-bg-warm);
}

.pagination-prev:hover,
.pagination-next:hover {
    background: var(--color-bg-amber);
    border-color: var(--color-bg-amber-deep);
    color: #000;
}

.pagination-pages {
    display: inline-flex;
    gap: 0.25rem;
}

.pagination-page {
    color: var(--color-text);
    border: 1px solid transparent;
    background: transparent;
}

.pagination-page:hover,
.pagination-page:focus {
    border-color: var(--color-border);
    background: var(--color-bg-warm);
}

.pagination-current {
    background: var(--color-bg-amber);
    color: #000;
    font-weight: 700;
}

.pagination-prev.disabled,
.pagination-next.disabled {
    opacity: 0.35;
    cursor: default;
}

/* ---------- Social links (footer / requisites / about) ---------- */

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin: 1rem 0;
}

/* Footer only: span the container width so the icon row can be centred
   inside. The base .social-links above still owns layout (flex, gap,
   wrap, margin) — this rule only adds the footer-specific alignment,
   so /about, /requisites and operator pages stay left-aligned. */
.site-footer .social-links {
    width: 100%;
    justify-content: center;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 6px;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.social-link svg {
    display: block;
}

.social-link-img {
    display: block;
}

.social-link:hover {
    opacity: 0.78;
    transform: translateY(-1px);
}

.social-link:focus-visible {
    outline: 2px solid var(--color-bg-amber-deep);
    outline-offset: 2px;
}

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

/* Trash / soft-delete view — operator-only screen that lists
   soft-deleted posts and pages with restore / purge actions. Lives
   in the admin panel under the "Корзина" sidebar entry, so it
   inherits the .admin-* chrome from _admin_layout.html. */
.admin-trash h2 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.05rem;
}

/* Drag-and-drop media uploader (admin.html). The wrapper <label>
   becomes the drop zone; selected files get a thumbnail preview and
   a "Clear" button. Wrapped in a unique class so the rules never
   leak into the public site. */
.media-drop {
    display: block;
    position: relative;
    padding: 0.75rem;
    border: 1.5px dashed var(--color-border, #d4d4d8);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface-soft, #fafafa);
    transition: border-color 0.15s, background-color 0.15s;
}
.media-drop.is-drag-over {
    border-color: var(--color-accent, #fbbd41);
    background: var(--color-surface-soft, #faf9f6);
    border-style: solid;
}
.media-drop-hint {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted, #615d59);
}
.media-drop-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.media-drop-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 88px;
    padding: 0.25rem;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border-soft, #e4e4e7);
    border-radius: var(--radius-sm, 0.25rem);
}
.media-drop-thumb img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 2px;
}
.media-drop-name {
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: var(--color-text-muted, #615d59);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.media-drop-clear {
    margin-top: 0.5rem;
}
.trash-preview {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.35;
    max-width: 48ch;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.trash-hint {
    margin-top: 1.5rem;
    font-size: 0.85rem;
}
.col-actions { width: 1%; white-space: nowrap; }

/* ---- Error page (404) ---------------------------------------------
   Branded 404 — extends base.html so the site header/footer are
   visible. The whole block lives on design tokens (Lemon 500 warm
   primary + warm cream backdrop) and reads `--color-accent` so the
   decorative "sun" stays on-brand if the palette is tweaked. The
   "sun" is pure CSS: a numeric core with six rays fanned out
   radially. Each ray sits inside a `.error-sun-pivot` wrapper that
   is rotated by 60°; the ray itself is translated outward. This
   pattern is robust against `transform-origin` quirks and survives
   a CSS palette swap. Float animation is gated by
   `prefers-reduced-motion`. */
body.page-error {
    background: linear-gradient(
        180deg,
        var(--color-bg-cream) 0%,
        var(--color-bg-warm) 60%,
        var(--color-bg) 100%
    );
}
.error-page {
    /* Center the card between header and footer without growing the
       page beyond ``100dvh``. We deliberately don't set
       ``min-height: 100dvh`` here on purpose:

       * ``body`` already enforces ``min-height: 100dvh`` and lays
         out its children as a flex column, so the gap between
         header and footer is whatever that gap is (typically
         ~70-80% of the viewport on desktop, more on mobile once
         the dynamic toolbar collapses).
       * ``.container`` (the wrapper this rule is applied to via
         ``<main class="container error-page">``) is
         ``flex: 1 0 auto``, so it fills exactly that gap.
       * Setting ``min-height: 100dvh`` here on top of the
       * ``.container`` would force the column to grow past 100dvh
         (the body would then be ``header + 100dvh + footer``),
         and a scrollbar would reappear — exactly the regression
         the operator reported (page taller than the viewport).

       Centering is done with ``align-items: center`` /
       ``justify-content: center`` on this flex container; the
       card is then placed in the middle of the available space.
       When the card content itself is tall (mobile translations,
       long operator-curated text), ``.error-card`` clips to
       ``calc(100dvh - 32px)`` and stays scrollable inside its
       own box instead of growing the page. */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.error-card {
    max-width: 32rem;
    width: 100%;
    padding: var(--space-5) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.08);
    /* Card itself stays within the viewport: no inner overflow even
       on tall translations / long translated messages. */
    max-height: calc(100dvh - 32px);
    overflow: auto;
}

/* Decorative sun.
   `.error-sun` is a 9rem square, absolutely centered. Its children
   are stacked on top of each other and share the same pivot point
   (the geometric centre of the square). Each
   `.error-sun-pivot` wrapper is itself a 0×0 element rotated
   around the centre, while the `.error-sun-ray` inside it is a
   pill-shaped bar that is translated straight up — because the
   pivot is rotated, "up" ends up pointing in a different
   direction for each ray. Six pivots × 60° gives an even sunburst. */
.error-sun {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto var(--space-4);
}
.error-sun-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5.5rem;
    height: 5.5rem;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 50%;
    box-shadow: 0 6px 18px -6px var(--color-accent-hover);
    z-index: 1;
}
.error-sun-pivot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}
.error-sun-pivot:nth-child(2) { transform: translate(-50%, -50%) rotate(0deg); }
.error-sun-pivot:nth-child(3) { transform: translate(-50%, -50%) rotate(60deg); }
.error-sun-pivot:nth-child(4) { transform: translate(-50%, -50%) rotate(120deg); }
.error-sun-pivot:nth-child(5) { transform: translate(-50%, -50%) rotate(180deg); }
.error-sun-pivot:nth-child(6) { transform: translate(-50%, -50%) rotate(240deg); }
.error-sun-pivot:nth-child(7) { transform: translate(-50%, -50%) rotate(300deg); }
.error-sun-ray {
    display: block;
    width: 0.5rem;
    height: 1.75rem;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    transform: translate(-50%, -100%) translateY(-2.25rem);
    opacity: 0.9;
    animation: error-sun-float 6s ease-in-out infinite;
}
/* Cascade animation delays so rays don't bob in unison. */
.error-sun-pivot:nth-child(2) .error-sun-ray { animation-delay: 0s; }
.error-sun-pivot:nth-child(3) .error-sun-ray { animation-delay: -0.4s; }
.error-sun-pivot:nth-child(4) .error-sun-ray { animation-delay: -0.8s; }
.error-sun-pivot:nth-child(5) .error-sun-ray { animation-delay: -1.2s; }
.error-sun-pivot:nth-child(6) .error-sun-ray { animation-delay: -1.6s; }
.error-sun-pivot:nth-child(7) .error-sun-ray { animation-delay: -2.0s; }

@keyframes error-sun-float {
    0%, 100% { transform: translate(-50%, -100%) translateY(-2.25rem); opacity: 0.85; }
    50%      { transform: translate(-50%, -100%) translateY(-2.75rem); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .error-sun-ray { animation: none; }
}

.error-title {
    margin: 0 0 var(--space-3);
    font-size: 1.5rem;
    color: var(--color-text);
}
.error-message {
    margin: 0 0 var(--space-5);
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.5;
}
.error-back {
    margin: var(--space-5) 0 0;
    display: flex;
    justify-content: center;
}
.error-back .btn {
    min-width: 12rem;
}

@media (max-width: 480px) {
    .error-page { padding: var(--space-3) var(--space-3); }
    .error-card { padding: var(--space-5) var(--space-4); }
    .error-sun { width: 7.5rem; height: 7.5rem; }
    .error-sun-core { width: 4.75rem; height: 4.75rem; font-size: 2rem; }
    /* Rays shrink proportionally. Pivot size is fixed at 0×0 so
       only the ray distance changes — translateY from -2.25rem
       becomes -1.75rem on the small viewport. */
    .error-sun-ray {
        height: 1.4rem;
        transform: translate(-50%, -100%) translateY(-1.75rem);
    }
    @keyframes error-sun-float {
        0%, 100% { transform: translate(-50%, -100%) translateY(-1.75rem); opacity: 0.85; }
        50%      { transform: translate(-50%, -100%) translateY(-2.15rem); opacity: 1; }
    }
}

/* Ultra-compact phones (≤380px): everything shrinks a notch further
   so the card stays inside one viewport even on iPhone SE / Galaxy
   A01. */
@media (max-width: 380px) {
    .error-card { padding: var(--space-4) var(--space-4); }
    .error-sun { width: 6rem; height: 6rem; }
    .error-sun-core { width: 3.75rem; height: 3.75rem; font-size: 1.6rem; }
    .error-sun-ray {
        height: 1.1rem;
        transform: translate(-50%, -100%) translateY(-1.35rem);
    }
    .error-title { font-size: 1.25rem; }
    .error-message { font-size: 0.95rem; }
    .error-back .btn { min-width: 10rem; padding: 0.55rem 1.1rem; }
}