/*
 * Brawijaya Corpora Professional UI
 * Loaded after app.css so the original visual components remain compatible.
 * Uses local system fonts only: no CDN, no Node.js, no font download.
 */

:root {
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --serif: var(--font-display);
    --sans: var(--font-ui);
    --ink: #17151c;
    --muted: #67636e;
    --paper: #fbfaf8;
    --soft: #f3f1ed;
    --line: #e3dfd8;
    --violet: #6544c5;
    --indigo: #4d4ac9;
    --gold: #a97a25;
    --dark: #15121c;
    --radius: 14px;
    --shadow: 0 16px 42px rgba(28, 23, 39, .10);
    --shadow-soft: 0 6px 22px rgba(28, 23, 39, .07);
    --focus-ring: 0 0 0 3px rgba(101, 68, 197, .16);
}

html {
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.hero h1,
.page-hero h1,
.about-hero h1,
.detail-hero h1,
.lexicon-title-row h1,
.contributor-profile h1,
.admin-heading h1,
.form-section > legend,
.relation-impact strong {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.025em;
}

p { margin-top: 0; }

button, input, textarea, select {
    font-family: var(--font-ui);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 2px;
}

.container {
    width: min(1160px, calc(100% - 48px));
}

/* ---------- Public website ---------- */

.site-header {
    height: 72px;
    background: rgba(18, 16, 24, .42);
    border-bottom-color: rgba(255, 255, 255, .10);
}

.site-header.scrolled {
    background: rgba(18, 16, 24, .95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.nav-wrap { gap: 22px; }

.brand-box {
    width: 126px;
    height: 54px;
    padding: 5px 10px;
    border-radius: 10px;
}

.brand img { max-height: 44px; }

.main-nav { gap: 2px; }

.main-nav a {
    padding: 9px 11px;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .005em;
}

.search-open {
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
}

.search-overlay { padding-top: 96px; }
.search-panel { width: min(680px, 100%); }
.search-panel h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin: 8px 0 22px; }
.search-panel input { padding: 15px 0; font-size: 1.25rem; }
.search-close { font-size: 2.25rem; }
.search-results a { padding: 12px 14px; border-radius: 9px; }

.hero {
    min-height: min(900px, 100vh);
    padding: 116px 0 58px;
}

.hero-grid {
    min-height: calc(min(900px, 100vh) - 174px);
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: clamp(40px, 6vw, 72px);
}

.hero h1 {
    font-size: clamp(2.75rem, 5vw, 4.25rem);
    line-height: 1.04;
    margin: 20px 0;
    max-width: 760px;
}

.hero-copy > p {
    max-width: 640px;
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    line-height: 1.65;
    font-style: normal;
    color: rgba(255, 255, 255, .82);
}

.hero-badge,
.eyebrow {
    font-size: .6875rem;
    letter-spacing: .14em;
}

.hero-actions { margin-top: 28px; }

.btn {
    min-height: 42px;
    padding: 10px 17px;
    border-radius: 9px;
    font-size: .875rem;
    font-weight: 650;
    box-shadow: none;
}

.btn:hover { transform: translateY(-1px); }
.btn-gradient { background: linear-gradient(135deg, #5e43bb, #4b55c8); box-shadow: 0 8px 20px rgba(79, 70, 190, .22); }
.btn-dark { background: #201d27; }

.hero-mosaic { gap: 14px; }
.hero-mosaic figure { height: 160px; border-radius: 14px; }
.hero-mosaic .mosaic-wide { height: 220px; }
.hero-mosaic figcaption { left: 15px; bottom: 13px; font-size: .875rem; }

.scroll-hint { font-size: .625rem; }

.section { padding: 80px 0; }
.section-head { max-width: 720px; margin-bottom: 42px; }
.section-head.split { gap: 60px; }

.section-head h2,
.map-intro-grid h2,
.contact-grid h2,
.about-intro h2 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    line-height: 1.14;
    margin: 12px 0 15px;
}

.section-head p,
.map-intro-grid p,
.contact-grid p,
.about-intro p,
.prose p,
.entry-main p {
    font-size: 1rem;
    line-height: 1.7;
}

.culture-grid { gap: 22px; }
.culture-card { border-radius: 14px; box-shadow: var(--shadow-soft); }
.culture-card:hover { transform: translateY(-4px); }
.culture-image { height: 225px; }
.culture-body { padding: 21px; }
.culture-region { font-size: .6875rem; }
.culture-body h3 { font-size: 1.5rem; line-height: 1.2; margin: 8px 0 10px; }
.culture-body p { font-size: .9375rem; line-height: 1.6; min-height: 70px; }
.text-link { font-size: .8125rem; }

/* Peta Jawa Timur pada beranda. Penanda dan labelnya memakai gaya yang sama
   dengan halaman Cultural Map, supaya keduanya terbaca sebagai satu benda —
   yang di beranda hanya ringkasannya. */
.map-intro-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 60px;
}

/* Petanya lebar dan pendek — 1745 x 515 — jadi ia diberi seluruh lebar
   kolom, dengan teks pengantar di atasnya dan daftar lapisan di bawahnya. */
.home-map { margin: 40px 0 0; }
.home-map .map-stage {
    padding: 20px 24px;
    background: radial-gradient(circle at 50% 20%, rgba(76, 48, 160, .55), rgba(20, 16, 34, .5) 60%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
}
.home-map .map-stage > img { filter: brightness(1.75) saturate(.85); }
.home-map figcaption {
    margin-top: 18px;
    font-size: .8125rem;
    font-weight: 700;
}
.home-map figcaption a { color: #a78bfa; }
.home-map figcaption a:hover { color: #c7b6ff; }

/* Nama wilayah yang panjang dipendekkan di layar, bukan di data — beranda
   hanya ringkasan, dan nama utuhnya tetap muncul saat penanda disentuh.
   Isilah "Short map label" pada form Wilayah kalau ingin nama pendek yang
   Anda pilih sendiri; kalau kolom itu terisi, tidak ada yang dipotong. */
.home-map .map-stage .map-marker .map-marker-label {
    max-width: 150px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-map .map-stage .map-marker:hover .map-marker-label,
.home-map .map-stage .map-marker:focus-visible .map-marker-label {
    max-width: 240px;
    white-space: normal;
    overflow: visible;
    z-index: 6;
}

.map-intro-aside { margin-top: 42px; }
.map-intro-aside .feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 34px;
    margin: 0 0 30px;
}
.map-intro-aside .feature-list > div { border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.feature-list { margin: 28px 0; gap: 8px; }
.feature-list > div { gap: 16px; padding: 13px 0; }
.feature-list strong { font-size: .9375rem; }
.feature-list span { font-size: .9rem; }

.stats-section { padding: 50px 0; }
.stat strong { font-size: clamp(2.1rem, 4vw, 3.25rem); line-height: 1; }
.stat span { font-size: .75rem; }

.activity-grid figure { border-radius: 14px; }
.activity-grid figcaption { font-size: .875rem; }

.contributor-card { border-radius: 14px; box-shadow: var(--shadow-soft); }
.contributor-card img { height: 220px; }
.contributor-card div { padding: 18px; }
.contributor-card span { font-size: .6875rem; }
.contributor-card h3 { font-size: 1.35rem; line-height: 1.2; }
.contributor-card p { font-size: .875rem; line-height: 1.55; }

.contact-grid { gap: 56px; }
.contact-form {
    padding: 28px;
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}
.contact-form label,
.login-card label {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.contact-form input,
.contact-form textarea,
.login-card input,
.filter-bar input,
.filter-bar select {
    padding: 11px 12px;
    border-radius: 8px;
    font-size: .9375rem;
}

.site-footer { padding: 58px 0 22px; }
.footer-grid { gap: 42px; }
.footer-logo { width: 138px; }
.footer-grid p,
.footer-grid a { font-size: .875rem; line-height: 1.6; }
.footer-grid h3 { font-size: .8125rem; }
.footer-bottom { margin-top: 42px; font-size: .6875rem; }

.page-hero {
    min-height: 440px;
    padding: 130px 0 58px;
}
.page-hero h1,
.about-hero h1 {
    max-width: 860px;
    font-size: clamp(2.6rem, 5vw, 3.75rem);
    line-height: 1.06;
    margin: 12px 0 16px;
}
.page-hero p { max-width: 720px; font-size: 1.125rem; line-height: 1.65; }

.detail-hero { height: 540px; }
.detail-hero-content { padding-bottom: 48px; }
.detail-hero h1 {
    font-size: clamp(3.25rem, 7vw, 5rem);
    line-height: .98;
    margin: 12px 0 18px;
}
.detail-hero p { font-size: 1.125rem; line-height: 1.6; }
.detail-grid { gap: 64px; }
.prose h3 { font-size: 1.5rem; margin-top: 32px; }
.prose .lead { font-size: 1.25rem; line-height: 1.65; }
.profile-card { padding: 27px; border-radius: 14px; }
.profile-card h3 { font-size: 1.4rem; }
.profile-card > span { font-size: .9375rem; }

.lexicon-grid { gap: 18px; }
.lexicon-card { min-height: 245px; padding: 22px; border-radius: 13px; }
.lexicon-card h2 { font-size: 1.6rem; line-height: 1.2; margin: 18px 0 12px; }
.lexicon-card p { font-size: .9375rem; line-height: 1.65; }
.lexicon-foot { font-size: .75rem; }
.lexicon-detail-head { padding: 145px 0 52px; }
.lexicon-title-row { margin-top: 35px; }
.lexicon-title-row h1 { font-size: clamp(3.5rem, 8vw, 5.5rem); line-height: .95; }
.entry-layout { gap: 64px; }
.entry-main section { padding-bottom: 48px; padding-left: 46px; }
.entry-main h2 { font-size: 1.55rem; }
.entry-side { font-size: .9375rem; }
.audio-button { padding: 11px 18px; font-size: .875rem; }

.resource-grid { gap: 18px; }
.resource-card,
.research-card { border-radius: 13px; }
.resource-card h2,
.research-card h2 { font-size: 1.45rem; line-height: 1.25; }
.resource-card p,
.research-card p { font-size: .9375rem; }

.contributor-detail-head { padding: 125px 0 62px; }
.contributor-profile { grid-template-columns: 260px 1fr; gap: 44px; }
.contributor-profile > img { width: 260px; height: 310px; border-radius: 14px; }
.contributor-profile h1 { font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1.05; }
.contributor-detail-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 52px; }
.contribution-list { border-radius: 13px; padding: 24px; }

.media-resource-card { min-height: 230px; border-radius: 13px; }
.media-resource-card h3 { font-size: 1.35rem; }

/* ---------- Administration ---------- */

.admin-body {
    --admin-bg: #f5f6f8;
    --admin-surface: #ffffff;
    --admin-line: #e3e6eb;
    --admin-muted: #67707c;
    --admin-text: #20242b;
    --admin-primary: #5a3fba;
    background: var(--admin-bg);
    color: var(--admin-text);
    font-family: var(--font-ui);
    font-size: .875rem;
    line-height: 1.5;
}

.admin-topbar {
    position: sticky;
    z-index: 90;
    top: 0;
    height: 64px;
    padding: 0 24px;
    background: #17151d;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.admin-brand { gap: 11px; font-size: .875rem; }
.admin-brand img { width: 34px; height: 34px; }
.admin-brand span { display: flex; flex-direction: column; line-height: 1.1; }
.admin-brand b { font-size: .9375rem; }
.admin-brand small { margin-top: 3px; color: #aaa5b2; font-size: .6875rem; font-weight: 500; }
.admin-topbar nav { align-items: center; gap: 18px; font-size: .8125rem; }
.admin-topbar nav a { color: #ddd9e4; }
.admin-topbar nav a:hover { color: #fff; }
.admin-topbar nav span { color: #aaa5b2; }

.admin-shell {
    grid-template-columns: 246px minmax(0, 1fr);
    min-height: calc(100vh - 64px);
}

.admin-sidebar {
    position: sticky;
    top: 64px;
    align-self: start;
    height: calc(100vh - 64px);
    padding: 18px 12px 28px;
    overflow-y: auto;
    background: #201d27;
    scrollbar-width: thin;
}

.admin-sidebar-label {
    padding: 14px 11px 7px;
    color: #918b9a;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.admin-sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin-bottom: 2px;
    padding: 8px 11px;
    border-radius: 7px;
    color: #d6d2dc;
    font-size: .8125rem;
    font-weight: 520;
}

.admin-sidebar a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-sidebar a.active { background: #5c42b7; color: #fff; box-shadow: none; }

.admin-content {
    width: 100%;
    max-width: 1540px;
    padding: 30px clamp(22px, 3vw, 44px) 80px;
}

.admin-heading {
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}
.admin-heading h1 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.15;
    margin: 2px 0;
}
.admin-heading > div > p { margin: 5px 0 0; font-size: .875rem; line-height: 1.55; }

.admin-stats { gap: 14px; }
.admin-stats article,
.admin-panel,
.admin-form-card {
    padding: 20px;
    border: 1px solid var(--admin-line);
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(28, 31, 38, .04);
}
.admin-stats article { min-height: 112px; }
.admin-stats span { color: var(--admin-muted); font-size: .75rem; font-weight: 600; }
.admin-stats strong { margin-top: 7px; font-size: 2rem; line-height: 1; }
.admin-panel { margin-top: 16px; }
.admin-panel h2, .admin-panel h3 { margin-top: 0; font-size: 1.125rem; }

.admin-form { max-width: 1120px; }
.admin-form-card { background: #fff; }
.form-grid { gap: 16px 18px; }
.form-grid label,
.field-block,
.admin-form label {
    gap: 6px;
    color: #313640;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}

.form-grid input,
.form-grid textarea,
.form-grid select,
.field-block input,
.field-block textarea,
.field-block select,
.admin-form input,
.admin-form textarea,
.admin-form select,
.admin-filter input,
.admin-filter select,
.bulk-bar select,
.relation-option-with-role select {
    min-height: 40px;
    padding: 9px 11px;
    border-color: #d8dce3;
    border-radius: 8px;
    color: #20242b;
    font-size: .875rem;
    line-height: 1.4;
}

textarea { line-height: 1.55; }

.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus,
.field-block input:focus,
.field-block textarea:focus,
.field-block select:focus,
.admin-filter input:focus,
.admin-filter select:focus,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
    border-color: var(--admin-primary);
    box-shadow: var(--focus-ring);
}

.field-hint,
.field-counter,
.form-section-intro,
.upload-copy small,
.current-file,
.relation-option small,
.relation-impact p,
.relation-impact li span {
    font-size: .75rem;
    line-height: 1.45;
}

.form-section {
    margin-bottom: 16px;
    padding: 19px;
    border-radius: 11px;
}
.form-section > legend { padding: 0 7px; font-size: 1.125rem; }
.form-section-intro { margin-bottom: 15px; }

.admin-tabs {
    gap: 4px;
    margin-bottom: 18px;
    padding: 5px;
    border-radius: 9px;
    background: #eceef3;
}
.admin-tabs button {
    padding: 8px 12px;
    border-radius: 6px;
    color: #59616d;
    font-size: .8125rem;
    font-weight: 650;
}
.admin-tabs button.active { color: var(--admin-primary); box-shadow: 0 2px 8px rgba(30, 34, 42, .08); }

.sticky-save {
    bottom: 12px;
    margin-top: 20px;
    padding: 10px 12px 10px 16px;
    border-radius: 11px;
    box-shadow: 0 10px 28px rgba(23, 25, 32, .12);
}
.sticky-save span { font-size: .75rem; }

.upload-zone {
    grid-template-columns: 140px 1fr;
    min-height: 128px;
    padding: 13px;
    border-radius: 10px;
}
.upload-preview { height: 98px; border-radius: 8px; }
.current-file { border-radius: 7px; }

.relation-picker { border-radius: 9px; }
.relation-picker-head { padding: 9px; }
.relation-picker-options { max-height: 260px; padding: 6px; }
.relation-option { gap: 9px !important; padding: 8px; border-radius: 6px; font-size: .8125rem; }
.relation-option-with-role { grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); }

.list-editor { padding: 10px; border-radius: 9px; }
.list-editor-row { grid-template-columns: 1fr 34px; }
.list-editor-add { padding: 7px 10px; border-radius: 7px; font-size: .8125rem; }

.admin-filter {
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--admin-line);
    border-radius: 10px;
    background: #fff;
}
.admin-filter input,
.admin-filter select { min-width: 160px; }

.admin-table-wrap {
    border-color: var(--admin-line);
    border-radius: 11px;
    box-shadow: 0 3px 14px rgba(28, 31, 38, .035);
}
.admin-table { font-size: .8125rem; }
.admin-table th,
.admin-table td { padding: 11px 12px; border-bottom-color: #edf0f3; }
.admin-table th {
    top: 0;
    background: #f8f9fb;
    color: #646c78;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .055em;
}
.admin-table small { margin-top: 2px; color: #7a828e; font-size: .71875rem; }
.admin-table .thumb { width: 54px; height: 40px; border-radius: 6px; }
.actions { gap: 9px; font-size: .75rem; }
.actions a, .actions button { font-weight: 600; }

.status,
.verification,
.category-chip {
    padding: 4px 7px;
    font-size: .625rem;
    letter-spacing: .025em;
}

.quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.quick-actions a { padding: 15px; border-radius: 10px; }
.quick-actions a:hover { transform: translateY(-2px); }
.quick-actions b { font-size: .875rem; }
.quick-actions span { font-size: .75rem; }

.quality-panel { gap: 14px; margin-top: 16px; }
.quality-list li { padding: 8px 0; font-size: .8125rem; }

.relation-impact {
    grid-template-columns: minmax(210px, .9fr) minmax(280px, 1.4fr);
    gap: 18px;
    margin-bottom: 18px;
    padding: 15px 17px;
    border-left-width: 4px;
    border-radius: 10px;
}
.relation-impact strong { font-size: 1rem; }
.relation-impact li { padding: 8px 9px; border-radius: 7px; }

.alert, .toast {
    border-radius: 9px;
    font-size: .8125rem;
    box-shadow: 0 5px 18px rgba(25, 28, 34, .07);
}

.admin-menu-toggle { font-size: 1.25rem; }

/* ---------- Login ---------- */

.login-page {
    background:
        radial-gradient(circle at 20% 5%, rgba(112, 81, 196, .30), transparent 34%),
        linear-gradient(145deg, #191620, #0f0d14 64%);
    font-size: .875rem;
}
.login-card {
    width: min(420px, 100%);
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.login-card > img { width: 145px; margin-bottom: 20px; }
.login-card h1 { margin: 5px 0 10px; font-size: 1.875rem; line-height: 1.2; }
.login-card p { font-size: .875rem; line-height: 1.6; }
.login-card .btn { margin: 7px 0 16px; }
.login-card > a { font-size: .8125rem; color: #5d4ba4; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); gap: 38px; }
    .admin-shell { grid-template-columns: 220px minmax(0, 1fr); }
    .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .container { width: min(100% - 36px, 1160px); }
    .site-header { height: 68px; }
    .main-nav { top: 78px; border-radius: 11px; }
    .hero { min-height: auto; padding-top: 105px; }
    .hero-grid { min-height: auto; grid-template-columns: 1fr; padding: 40px 0 58px; }
    .hero-mosaic { max-width: 620px; }
    .home-map .map-stage { padding: 12px; }
    .map-intro-aside .feature-list { grid-template-columns: 1fr; gap: 0; }
    .page-hero { min-height: 400px; }
    .detail-grid, .entry-layout, .contributor-detail-grid { gap: 44px; }
}

@media (max-width: 760px) {
    html { font-size: 15px; }
    .container { width: min(100% - 28px, 1160px); }
    .section { padding: 62px 0; }
    .hero h1 { font-size: clamp(2.4rem, 12vw, 3.3rem); }
    .hero-copy > p { font-size: 1.05rem; }
    .hero-mosaic figure { height: 145px; }
    .hero-mosaic .mosaic-wide { height: 190px; }
    .culture-grid, .lexicon-grid, .resource-grid, .contributor-grid { grid-template-columns: 1fr; }
    .culture-image { height: 230px; }
    .page-hero { min-height: 350px; padding: 112px 0 45px; }
    .page-hero h1, .about-hero h1 { font-size: 2.4rem; }
    .detail-hero { height: 430px; }
    .detail-hero h1 { font-size: 3rem; }
    .lexicon-title-row { align-items: flex-start; gap: 18px; }
    .lexicon-title-row h1 { font-size: 3.3rem; }
    .contributor-profile { grid-template-columns: 1fr; }
    .contributor-profile > img { width: 210px; height: 250px; }
    .footer-bottom { gap: 10px; text-align: left; }

    .admin-topbar { height: 60px; padding: 0 15px; }
    .admin-shell { min-height: calc(100vh - 60px); }
    .admin-sidebar { top: 60px; height: calc(100vh - 60px); width: 270px; }
    .admin-content { padding: 22px 14px 78px; }
    .admin-heading { align-items: flex-start; margin-bottom: 18px; }
    .admin-heading h1 { font-size: 1.65rem; }
    .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .admin-stats article { min-height: 98px; padding: 16px; }
    .admin-stats strong { font-size: 1.7rem; }
    .admin-form-card, .admin-panel { padding: 16px; }
    .form-section { padding: 15px; }
    .sticky-save { align-items: stretch; flex-direction: column; gap: 8px; }
    .sticky-save > div { display: flex; gap: 7px; }
    .sticky-save .btn { flex: 1; }
    .quick-actions { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .hero-actions { align-items: stretch; flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .hero-mosaic { grid-template-columns: 1fr; }
    .hero-mosaic .mosaic-wide { grid-column: auto; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .admin-stats { grid-template-columns: 1fr; }
    .admin-topbar nav { gap: 10px; }
    .admin-topbar nav span { display: none; }
    .login-card { padding: 25px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Map alignment & interactive admin position picker */
.map-canvas{align-items:center}
.map-stage{position:relative;width:100%;line-height:0}
.map-stage>img{display:block;width:100%;height:auto}
.map-stage .map-marker{line-height:1.2;text-decoration:none;z-index:2;max-width:150px;text-align:center}
.map-stage .map-marker span{display:block;white-space:nowrap}
.map-stage .map-marker:focus-visible{outline:3px solid #f5cb66;outline-offset:3px}

.admin-map-picker{border:1px solid #ddd7cc;border-radius:16px;background:#faf9f6;padding:16px;display:grid;gap:14px}
.admin-map-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.admin-map-picker-head b,.admin-map-picker-head small{display:block}
.admin-map-picker-head small{margin-top:4px;color:#6b6570;max-width:780px;line-height:1.45}
.admin-map-picker-stage{position:relative;width:100%;overflow:hidden;border-radius:12px;background:#17131f;border:1px solid #d7d0c5;cursor:crosshair;line-height:0;user-select:none}
.admin-map-picker-stage img{display:block;width:100%;height:auto;pointer-events:none}
.admin-map-picker-stage:focus-visible{outline:3px solid #7157d9;outline-offset:3px}
.admin-map-picker-pin{position:absolute;left:50%;top:50%;width:18px;height:18px;border:4px solid #fff;border-radius:50%;background:#6f4fd6;box-shadow:0 3px 14px rgba(0,0,0,.42);transform:translate(-50%,-50%);pointer-events:none;display:none;z-index:3}
.admin-map-picker.has-position .admin-map-picker-pin{display:block}
.admin-map-picker-values{display:grid;grid-template-columns:180px 180px 1fr;gap:12px;align-items:end}
.admin-map-picker-values label{margin:0}
.admin-map-picker-readout{min-height:42px;padding:10px 12px;border-radius:9px;background:#fff;border:1px solid #e1dbd2;color:#5d5663;font-size:13px;display:flex;align-items:center}
.region-position-helper{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 16px;border:1px solid #ddd7cc;border-radius:12px;background:#f6f3fb}
.region-position-helper b,.region-position-helper small{display:block}
.region-position-helper small{color:#6c6472;margin-top:3px}
.btn-small{padding:8px 12px!important;font-size:12px!important;white-space:nowrap}

@media(max-width:760px){
  .admin-map-picker-head,.region-position-helper{display:grid;grid-template-columns:1fr}
  .admin-map-picker-values{grid-template-columns:1fr 1fr}
  .admin-map-picker-readout{grid-column:1/-1}
  .map-stage .map-marker span{display:none}
  .map-stage .map-marker{width:18px;height:18px;padding:0;border-radius:50%}
}

/* Region-driven public cultural map */
.map-region-marker{
  --marker-color:#8b6de8;
  background:var(--marker-color);
  color:#fff;
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 5px 18px rgba(0,0,0,.34),0 0 0 5px color-mix(in srgb,var(--marker-color) 22%,transparent);
}
.map-region-marker:hover,.map-region-marker.active{
  background:#fff;
  color:#1d1727;
  box-shadow:0 7px 24px rgba(0,0,0,.4),0 0 0 7px color-mix(in srgb,var(--marker-color) 35%,transparent);
}
.map-region-list{align-content:start;max-height:680px;overflow:auto;padding-right:4px}
.map-region-card{border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.055);overflow:hidden;transition:.2s}
.map-region-card.active{background:rgba(140,113,255,.22);border-color:#9d86ff}
.map-region-main{display:flex!important;align-items:center;gap:13px;padding:14px!important;background:transparent!important;border:0!important;border-radius:0!important}
.map-region-main i{width:10px;height:44px;border-radius:99px;flex:0 0 auto}
.map-region-main span{display:block;flex:1;min-width:0}
.map-region-main b,.map-region-main small{display:block}
.map-region-main small{color:#aaa;font-family:var(--sans);font-size:10px;line-height:1.4;margin-top:3px}
.map-region-main em{font-style:normal}
.map-region-cultures{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 14px 37px}
.map-region-cultures a{display:inline-flex!important;width:auto!important;padding:5px 9px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:999px!important;background:rgba(255,255,255,.06)!important;color:#d6d1de;font-family:var(--sans);font-size:10px;line-height:1.2}
.map-region-cultures a:hover{background:rgba(255,255,255,.14)!important;color:#fff}
.public-filter-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 28px;padding:16px 18px;border:1px solid #ddd7cc;border-radius:14px;background:#f7f4fb}
.public-filter-banner span,.public-filter-banner strong,.public-filter-banner small{display:block}
.public-filter-banner span{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#716879}
.public-filter-banner strong{font-size:22px;line-height:1.2;margin-top:2px}
.public-filter-banner small{font-family:var(--sans);font-size:12px;color:#766f7b;margin-top:2px}

@media(max-width:760px){
  .map-region-list{max-height:none}
  .map-region-cultures{padding-left:14px}
  .public-filter-banner{align-items:flex-start;display:grid;grid-template-columns:1fr}
}

/* Public map: collision-aware region labels */
.map-stage .map-marker{
  width:18px;
  height:18px;
  padding:0;
  border-radius:50%;
  overflow:visible;
  display:block;
  max-width:none;
  text-align:left;
  transform:translate(-50%,-50%);
}
.map-stage .map-marker:hover,.map-stage .map-marker.active{
  transform:translate(-50%,-50%) scale(1.12);
}
.map-marker-dot{
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:currentColor;
  opacity:.96;
}
.map-region-marker .map-marker-dot{background:#fff}
.map-region-marker:hover .map-marker-dot,.map-region-marker.active .map-marker-dot{background:var(--marker-color)}
.map-stage .map-marker .map-marker-label{
  --label-x:-50%;
  --label-y:calc(-100% - 11px);
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  width:max-content;
  max-width:160px;
  min-width:58px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:8px;
  background:rgba(24,20,33,.92);
  color:#fff;
  box-shadow:0 5px 16px rgba(0,0,0,.28);
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  line-height:1.25;
  white-space:normal;
  text-align:center;
  overflow-wrap:anywhere;
  pointer-events:none;
  transform:translate(var(--label-x),var(--label-y));
  transform-origin:center;
  transition:opacity .16s,background .16s,border-color .16s;
  z-index:4;
}
.map-stage .map-marker:not(:hover):not(:focus-visible):not(.active) .map-marker-label[data-collision-hidden="1"]{opacity:0}
.map-stage .map-marker:hover .map-marker-label,
.map-stage .map-marker:focus-visible .map-marker-label,
.map-stage .map-marker.active .map-marker-label{
  opacity:1!important;
  z-index:30;
  background:#fff;
  color:#1d1727;
  border-color:rgba(255,255,255,.95);
}
.map-marker[data-label-placement="top"] .map-marker-label{--label-x:-50%;--label-y:calc(-100% - 11px)}
.map-marker[data-label-placement="right"] .map-marker-label{--label-x:11px;--label-y:-50%}
.map-marker[data-label-placement="bottom"] .map-marker-label{--label-x:-50%;--label-y:11px}
.map-marker[data-label-placement="left"] .map-marker-label{--label-x:calc(-100% - 11px);--label-y:-50%}
.map-marker[data-label-placement="top-right"] .map-marker-label{--label-x:11px;--label-y:calc(-100% - 9px)}
.map-marker[data-label-placement="top-left"] .map-marker-label{--label-x:calc(-100% - 11px);--label-y:calc(-100% - 9px)}
.map-marker[data-label-placement="bottom-right"] .map-marker-label{--label-x:11px;--label-y:9px}
.map-marker[data-label-placement="bottom-left"] .map-marker-label{--label-x:calc(-100% - 11px);--label-y:9px}
.map-stage .map-marker-label::after{
  content:'';
  position:absolute;
  width:7px;
  height:7px;
  background:inherit;
  border-right:1px solid rgba(255,255,255,.35);
  border-bottom:1px solid rgba(255,255,255,.35);
}
.map-marker[data-label-placement="top"] .map-marker-label::after{left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg)}
.map-marker[data-label-placement="bottom"] .map-marker-label::after{left:50%;top:-5px;transform:translateX(-50%) rotate(225deg)}
.map-marker[data-label-placement="right"] .map-marker-label::after{left:-5px;top:50%;transform:translateY(-50%) rotate(135deg)}
.map-marker[data-label-placement="left"] .map-marker-label::after{right:-5px;top:50%;transform:translateY(-50%) rotate(-45deg)}
.map-marker[data-label-placement^="top-"] .map-marker-label::after{bottom:-5px;left:12px;transform:rotate(45deg)}
.map-marker[data-label-placement^="bottom-"] .map-marker-label::after{top:-5px;left:12px;transform:rotate(225deg)}
@media(max-width:900px){
  .map-stage .map-marker-label{display:none}
  .map-stage .map-marker{width:19px;height:19px}
}

/* Integrity check detail line (Data Integrity page). */
.quality-list small{display:block;margin-top:3px;color:#7b7486;font:500 .72rem/1.4 var(--sans)}

/* Public Metadata Preview (lexicon editor).
   Placed with grid rather than by restructuring the form, so the tab script
   keeps finding its panels as descendants of the same element. */
.metadata-preview{
  padding:18px;
  border:1px solid #ded8ec;
  border-radius:14px;
  background:#faf8ff;
}
.metadata-preview strong{display:block;margin:6px 0 2px;font-size:1.05rem}
.metadata-preview .metadata-preview-note{margin:8px 0 0;color:#6f6878;font-size:.75rem;line-height:1.5}
.metadata-preview dl{display:grid;gap:9px;margin:14px 0 0}
.metadata-preview dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.metadata-preview dt{color:#7b7486;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}
.metadata-preview dd{margin:0;text-align:right;font-weight:700;font-size:.83rem;overflow-wrap:anywhere}

@media(min-width:1180px){
  .admin-form.has-metadata-preview{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:22px;
    align-items:start;
  }
  /* Every other child stays in the first column; only the aside moves over. */
  .admin-form.has-metadata-preview>*{grid-column:1}
  .admin-form.has-metadata-preview>.metadata-preview{
    grid-column:2;
    grid-row:1 / span 99;
    position:sticky;
    top:88px;
  }
}

/* Concept graph — public "Related entries" block.
   Grouped by the relation as read from the entry being viewed, so a single
   stored row appears as "Part of" on one page and "Has part" on the other. */
.entry-relations{display:grid;gap:20px;margin-top:6px}
.relation-group h3{
  margin:0 0 9px;
  font:700 .72rem/1 var(--sans);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#7b7486;
}
.relation-group ul{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.relation-group li{margin:0}
.relation-group a{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  transition:border-color .18s ease,transform .18s ease;
}
.relation-group a:hover{border-color:var(--violet);transform:translateY(-1px)}
.relation-group a b{font:600 .95rem/1.2 var(--sans)}
.relation-group a small{color:#7b7486;font-size:.72rem}

/* Concept graph — admin review desk. */
.relation-arrow{margin:5px 0;color:#6544c5;font:600 .72rem/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase}
.relation-evidence{margin:0 0 5px;max-width:42ch;color:#57515f;font-size:.8rem;line-height:1.55}

/* ------------------------------------------------------------------
   Concept graph — culture detail network map (assets/js/relation-graph.js)
   ------------------------------------------------------------------ */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

.culture-graph-section .section-head{margin-bottom:26px}

.relation-graph{
  position:relative;
  margin:0;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,#fff 0%,#fcfbf9 100%);
  box-shadow:0 18px 44px rgba(20,15,35,.07);
  overflow:hidden;
}

/* Toolbar ---------------------------------------------------------- */
.relation-graph-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.7);
}
/* Order rather than source position, so that when the legend is too wide to
   share a line it wraps to a row of its own instead of stranding the zoom
   buttons on an empty second row. */
.graph-search{order:0;flex:0 0 auto}
.graph-search input{
  width:190px;
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font:500 .8rem/1.2 var(--sans);
  color:var(--ink);
}
.graph-search input:focus{outline:2px solid var(--violet);outline-offset:1px}

.graph-legend{order:2;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:7px}
.graph-legend-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px 6px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font:600 .74rem/1 var(--sans);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.graph-legend-chip i{width:10px;height:10px;border-radius:50%;background:var(--chip,#6544c5)}
.graph-legend-chip b{color:#8b8494;font-weight:700}
.graph-legend-chip:hover{border-color:var(--chip,#6544c5)}
.graph-legend-chip.is-active{border-color:var(--chip,#6544c5);background:color-mix(in srgb,var(--chip,#6544c5) 12%,#fff)}

.graph-controls{order:1;display:flex;gap:6px;margin-left:auto}
.graph-controls button{
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.graph-controls button:hover{border-color:var(--violet);color:var(--violet)}
.graph-controls button[aria-pressed="true"]{border-color:var(--violet);color:var(--violet)}

/* Stage ------------------------------------------------------------ */
.relation-graph-stage{
  position:relative;
  /* Close to a 3:2 frame at desktop widths. A network settles into a roughly
     round cloud, so a very wide panel can only ever be filled by leaving the
     dots far apart — this shape suits the drawing rather than the page. */
  height:clamp(440px,68vh,700px);
  /* Faint grid: gives the eye a sense of scale while panning without
     competing with the network itself. */
  background-image:
    linear-gradient(rgba(101,68,197,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(101,68,197,.045) 1px,transparent 1px);
  background-size:38px 38px;
}
.rg-svg{
  display:block;
  width:100%;height:100%;
  cursor:grab;
  touch-action:none;
  opacity:0;
  transition:opacity .5s ease;
}
.relation-graph.is-ready .rg-svg{opacity:1}
.relation-graph.is-panning .rg-svg{cursor:grabbing}

.rg-edge{
  fill:none;
  stroke-width:1.5;
  stroke-opacity:.45;
  stroke-linecap:round;
  transition:stroke-opacity .2s ease,stroke-width .2s ease;
}
.rg-edge.is-lit{stroke-opacity:.9;stroke-width:2}
.rg-edge.is-dim{stroke-opacity:.06}

.rg-node{cursor:pointer;outline:none}
.rg-dot{
  stroke:#fff;
  stroke-width:1.6;
  transition:opacity .2s ease;
}
.rg-halo{opacity:0;transition:opacity .2s ease}
.rg-node:hover .rg-halo,
.rg-node:focus-visible .rg-halo,
.rg-node.is-lit .rg-halo{opacity:.2}
.rg-node:focus-visible .rg-dot{stroke:var(--violet);stroke-width:3}
.rg-node.is-dim .rg-dot{opacity:.16}
.rg-node.is-dim{cursor:default}

.rg-label{
  font-family:var(--sans);
  font-weight:600;
  fill:#231f2c;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:3.2px;
  stroke-linejoin:round;
  pointer-events:none;
  transition:opacity .2s ease;
}
.rg-label.is-dim{opacity:.22}

/* Tooltip ---------------------------------------------------------- */
.rg-tooltip{
  position:absolute;
  z-index:3;
  width:250px;
  margin:14px 0 0 14px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.97);
  box-shadow:0 16px 38px rgba(20,15,35,.16);
  font-family:var(--sans);
  pointer-events:none;
}
.rg-tooltip.flip-x{transform:translateX(-100%);margin-left:-14px}
.rg-tooltip.flip-y{transform:translateY(-100%);margin-top:-14px}
.rg-tooltip.flip-x.flip-y{transform:translate(-100%,-100%)}
.rg-tooltip b{display:block;font-size:.98rem;color:var(--ink)}
.rg-tooltip em{display:block;margin-top:1px;color:#8b8494;font-size:.68rem;font-style:normal;text-transform:uppercase;letter-spacing:.07em}
.rg-tooltip p{margin:7px 0 0;color:#57515f;font-size:.76rem;line-height:1.5}
.rg-tooltip ul{margin:9px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.rg-tooltip li{font-size:.75rem;color:var(--ink)}
.rg-tooltip li span{color:var(--violet);font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em}
.rg-tooltip .rg-more{color:#8b8494}

/* Caption ---------------------------------------------------------- */
.relation-graph-caption{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  align-items:baseline;
  padding:13px 16px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.7);
  font-family:var(--sans);
  font-size:.76rem;
  color:#6f6878;
}
.relation-graph-caption b{color:var(--ink);font-weight:800}
.graph-hint{margin-left:auto;color:#8b8494}

/* Expanded --------------------------------------------------------- */
body.has-expanded-graph{overflow:hidden}
.relation-graph.is-expanded{
  position:fixed;
  inset:16px;
  z-index:200;
  margin:0;
  border-radius:18px;
  box-shadow:0 40px 90px rgba(15,10,28,.4);
}
.relation-graph.is-expanded .relation-graph-stage{height:calc(100vh - 32px - 122px)}

/* Text fallback ---------------------------------------------------- */
.relation-graph-fallback{padding:20px 22px 24px}
.relation-graph-fallback h3{margin:0 0 10px;font:700 .82rem/1.3 var(--sans)}
.relation-graph-fallback ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.relation-graph-fallback li{font-family:var(--sans);font-size:.82rem}
.relation-graph-fallback li span{color:var(--violet);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:0 6px}
.relation-graph-fallback a{border-bottom:1px solid var(--line)}
.relation-graph.is-ready .relation-graph-fallback{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;
}
.relation-graph:not(.is-ready) .relation-graph-stage,
.relation-graph:not(.is-ready) .relation-graph-caption{display:none}

.graph-empty{background:#fff}

@media(max-width:820px){
  .relation-graph-bar{gap:9px;padding:12px}
  .graph-search input{width:100%}
  .graph-search{flex:1 1 auto}
  .graph-controls{flex:0 0 auto}
  .relation-graph-stage{height:clamp(360px,62vh,470px)}
  .rg-tooltip{width:200px}
  .graph-hint{display:none}
  .relation-graph.is-expanded{inset:8px}
}

@media(prefers-reduced-motion:reduce){
  .rg-svg,.rg-edge,.rg-dot,.rg-halo,.rg-label{transition:none}
}

/* ------------------------------------------------------------------
   Admin pagination (app/Views/pagers/admin_full.php)

   The framework default renders a bare <ul class="pagination">, but app.css
   styles `.pagination ul` — a wrapper containing the list. Unwrapped, that
   selector never matches and the pager falls back to a bulleted column. The
   admin template carries its own class instead of relying on either shape.
   ------------------------------------------------------------------ */
.admin-pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 18px;
  margin:22px 0 4px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.admin-pager-summary{
  margin:0;
  margin-right:auto;
  color:#7b7486;
  font:500 .78rem/1.4 var(--sans);
}
.admin-pager-summary b{color:var(--ink);font-weight:700}

.admin-pager-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.admin-pager-links li{margin:0}
.admin-pager-links a,
.admin-pager-links span{
  display:grid;
  place-items:center;
  min-width:36px;
  height:36px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  font:600 .78rem/1 var(--sans);
  white-space:nowrap;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.admin-pager-links a:hover{border-color:var(--violet);color:var(--violet)}
.admin-pager-links a.is-current{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
}
/* Disabled Prev/Next keep their place so the row does not shift as you page. */
.admin-pager-links span[aria-disabled]{color:#b8b2c2;background:#faf9fb}
.admin-pager-links .admin-pager-gap{
  min-width:22px;
  padding:0;
  border:0;
  background:none;
  color:#b8b2c2;
}

@media(max-width:640px){
  .admin-pager{gap:10px}
  .admin-pager-summary{flex:1 1 100%;margin-right:0}
  .admin-pager-links a,.admin-pager-links span{min-width:32px;height:32px;padding:0 8px;font-size:.72rem}
}

/* The public pager wraps the list in .pagination, so app.css matches there.
   This guards the other shape as well, in case a template is ever rendered
   without that wrapper. */
ul.pagination{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin:40px 0 0;
  padding:0;
  list-style:none;
}
.pagination a{padding:0 11px}

/* ------------------------------------------------------------------
   Definition style: the live panel in the lexicon editor, and the
   corpus-wide audit page (App\Services\DefinitionStyleGuide).
   ------------------------------------------------------------------ */

/* Live panel ------------------------------------------------------- */
.definition-check{
  margin-top:-6px;
  padding:14px 16px;
  border:1px solid #d9e5dd;
  border-left:3px solid #2a9d8f;
  border-radius:12px;
  background:#f5faf8;
}
.definition-check.is-unreadable{
  border-color:#f0dcc6;
  border-left-color:#d97706;
  background:#fdf8f1;
}
/* Readable, but with something left to tidy: worth distinguishing from both
   "fine" and "unusable", or the headline and the list disagree. */
.definition-check.is-imperfect{
  border-color:#e6e0ef;
  border-left-color:#8b7fd0;
  background:#faf9fd;
}
.definition-check.is-imperfect .definition-check-status{color:#5c4fa8}
.definition-check-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 16px;
}
.definition-check-status{
  margin-right:auto;
  font:700 .78rem/1.4 var(--sans);
  color:#1f6f63;
}
.definition-check.is-unreadable .definition-check-status{color:#9a5b06}
.definition-check-head .text-link{
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
  font-size:.72rem;
}

.definition-check-read{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.definition-check-read:empty{display:none}

.style-chip{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  padding:5px 11px;
  border:1px solid #dfd9e6;
  border-radius:999px;
  background:#fff;
  font:500 .72rem/1.3 var(--sans);
  color:#6f6878;
}
.style-chip b{color:var(--ink);font-weight:700}
.style-chip.is-bad{border-color:#eccfcf;color:#a33}

.definition-check-issues{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.definition-check-issues:empty{display:none}
.definition-check-issues li,
.style-issues li{
  padding-left:18px;
  position:relative;
  font:500 .76rem/1.5 var(--sans);
  color:var(--ink);
}
.definition-check-issues li:before,
.style-issues li:before{
  position:absolute;
  left:0;
  top:0;
  font-size:.8rem;
}
.definition-check-issues li.level-error:before,
.style-issues li.level-error:before{content:'\00D7';color:#c1121f;font-weight:800}
.definition-check-issues li.level-warning:before,
.style-issues li.level-warning:before{content:'!';color:#d97706;font-weight:800}
.definition-check-issues li.level-info:before,
.style-issues li.level-info:before{content:'\002B';color:#3d7dd6;font-weight:800}
.definition-check-issues small,
.style-issues small{display:block;margin-top:2px;color:#7b7486;font-weight:500;font-size:.72rem}

.definition-check-rules{margin-top:14px;padding-top:12px;border-top:1px dashed #d5cfdd}

/* The written rules, shared by the editor and the audit page -------- */
.definition-rules{margin:0;padding-left:20px;display:grid;gap:12px;font-family:var(--sans)}
.definition-rules li{font-size:.8rem;line-height:1.6;color:#57515f}
.definition-rules b{color:var(--ink)}
.definition-rules code{
  padding:1px 6px;
  border-radius:5px;
  background:#efecf5;
  font-size:.74rem;
}
.rule-examples{display:grid;gap:4px;margin-top:6px}
.rule-examples span{
  padding:5px 10px;
  border-radius:7px;
  font-size:.74rem;
}
.rule-examples .is-good{background:#eef7f2;color:#1f6f63}
.rule-examples .is-good:before{content:'\2713\00A0\00A0';font-weight:800}
.rule-examples .is-bad{background:#fdf1f1;color:#a33}
.rule-examples .is-bad:before{content:'\00D7\00A0\00A0';font-weight:800}
.style-rule-intro{margin:0 0 14px;color:#6f6878;font:500 .82rem/1.5 var(--sans)}

/* Audit page ------------------------------------------------------- */
.style-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.style-stats article{
  background:#fff;
  border:1px solid var(--admin-line,#e2ddd5);
  border-radius:12px;
  padding:16px 18px;
}
.style-stats span{display:block;color:#7b7486;font:600 .72rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.05em}
.style-stats b{display:block;margin-top:6px;font:800 1.65rem/1 var(--sans);color:var(--ink)}
.style-stats .is-warning b{color:#b45309}
.style-stats .is-danger b{color:#c1121f}

.style-audit-table td{vertical-align:top}
.style-audit-table .style-chip{margin:0 4px 4px 0}
.style-issues{margin:0;padding:0;list-style:none;display:grid;gap:7px;max-width:46ch}

.style-score{
  display:inline-grid;
  place-items:center;
  min-width:30px;
  height:22px;
  margin-left:7px;
  padding:0 7px;
  border-radius:6px;
  font:800 .7rem/1 var(--sans);
}
.style-score.is-good{background:#eef7f2;color:#1f6f63}
.style-score.is-warn{background:#fdf6ec;color:#9a5b06}
.style-score.is-bad{background:#fdf1f1;color:#a33}

.align-right{text-align:right}

@media(max-width:900px){
  .style-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .style-stats{grid-template-columns:1fr}
  .definition-check{padding:12px}
}

/* ---------------------------------------------------------------- sub-cultures
   The layer between a culture and its lexicon entries. A sub-culture with no
   accent colour of its own shows a dashed outline instead of a filled chip —
   that is the visual shorthand for "inherits its culture's colour". */
.swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 7px;
}

.subculture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
}

.subculture-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    border: 1px solid #e4dfd5;
    border-left: 4px solid var(--card-accent, #7c3aed);
    border-radius: 16px;
    background: #fff;
    transition: transform .25s, box-shadow .25s;
}
.subculture-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.subculture-card h3 { margin: 0; font-size: 1.4rem; line-height: 1.15; }
.subculture-card p { margin: 0; color: var(--muted); font-size: .9375rem; }
.subculture-card .count {
    margin-top: auto;
    padding-top: 10px;
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--violet);
}

/* Region › Culture › Sub-culture, shown above an entry so a reader always
   knows how far down the hierarchy they are. */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.breadcrumb a { color: inherit; opacity: .72; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb span[aria-hidden] { opacity: .45; }

/* A child-record section under a parent form (lookup items, sub-cultures).
   Sits below the sticky save bar, so it needs air above it to read as a
   separate area rather than part of the form. */
.admin-heading.compact {
    margin-top: 34px;
    margin-bottom: 14px;
}

.admin-heading.compact h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* A checkbox that qualifies the field above it (e.g. "use the culture's
   colour" next to an accent picker) rather than standing on its own. */
.inline-check {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-size: .8rem;
    font-weight: 500;
    color: #5b5468;
}

.inline-check input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* ---------------------------------------------------- sub-culture cards
   Used on the public Sub-cultures listing. Deliberately lighter than
   .culture-card — smaller image, tighter type — so a sub-culture reads as
   sitting one level below a culture rather than competing with it. */
.subculture-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.subculture-tile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-soft, 0 6px 22px rgba(28, 23, 39, .07));
    border-top: 3px solid var(--tile-accent, #7c3aed);
    transition: transform .25s ease, box-shadow .25s ease;
}

.subculture-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(28, 23, 39, .13);
}

.subculture-tile-image {
    display: block;
    height: 152px;
    overflow: hidden;
    background: #ece9e4;
}

.subculture-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* No image anywhere up the chain: a flat wash of the accent instead of a
   broken frame, so the row keeps its rhythm. */
.subculture-tile-blank {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--tile-accent, #7c3aed), rgba(255, 255, 255, .25));
    opacity: .35;
}

.subculture-tile-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
}

.subculture-tile-parent {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tile-accent, #7c3aed);
}

.subculture-tile h3 {
    font-size: 1.1875rem;
    line-height: 1.25;
    margin: 7px 0 8px;
}

.subculture-tile h3 a { color: inherit; text-decoration: none; }
.subculture-tile h3 a:hover { color: var(--tile-accent, #7c3aed); }

.subculture-tile p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: #5b5468;
}

.subculture-tile-count {
    margin-top: auto;
    padding-top: 14px;
    font-size: .75rem;
    font-weight: 600;
    color: #8a8296;
}

@media (max-width: 900px) {
    .subculture-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .subculture-tiles { grid-template-columns: 1fr; }
    .subculture-tile-image { height: 175px; }
}