/* Geopo styles, carried over with the app from cotsv [sc-51].
 *
 * Extracted from cotsv's guild.css and curators.css: the rules the geopo
 * templates actually use, and nothing else. Every selector is confined to
 * `body.geopo` - GeopoSvelteMixin sets that body class - so this cannot reach
 * the archive chrome, the wiki's Bootstrap 4, or anything else on the site.
 * The design tokens that were :root variables in cotsv now hang off the same
 * body class, for the same reason.
 */

/* ==== from cotsv guild.css ==== */
/* Guild Global Theme Styles */
/* Component-specific layout styles live in Svelte <style> blocks */
/* Design Tokens */
body.geopo {
    /* Geopo's palette, pointed at the archive's [sc-51]. The rules below came
       from cotsv and still ask for these names; what they resolve to is now the
       same gilt-on-dark the rest of the site uses, defined once in
       static/css/archive.css. The fallbacks are only for a stylesheet loaded
       without it. */

    /* Core palette */
    --color-bg-deep: var(--arc-bg, #0e0b08);
    --color-bg-purple: var(--arc-panel, #16130e);
    --color-gold: var(--arc-gold, #c9a84c);
    --color-gold-dim: rgba(201, 168, 76, 0.3);
    --color-gold-border: rgba(201, 168, 76, 0.5);
    --color-heraldry-sheet: #e9e6de;
    --color-heraldry-ink: #2b2114;

    /* Text */
    --color-text-primary: var(--arc-title, #e0cfa0);
    --color-text-secondary: var(--arc-heading, #d4c098);
    --color-text-muted: #b9b0a0;
    --color-text-dim: #9a8f7c;

    /* Panels. Glass over a purple wash became flat warm panels over the
       archive's ground — a blur reads as a smudge against this palette. */
    --glass-bg: var(--arc-panel, #16130e);
    --glass-bg-hover: var(--arc-panel-lit, #1e1610);
    --glass-bg-active: #241b12;
    --glass-border: var(--arc-line, #2e2416);
    --glass-border-hover: #4a3a20;
    --glass-border-strong: var(--arc-gold-dim, #8a6a30);
    --glass-blur: none;

    /* Modal overlay */
    --modal-bg: var(--arc-panel, #16130e);
    --modal-overlay: rgba(14, 11, 8, 0.72);

    /* Shadows */
    --shadow-text: 1px 1px 2px rgba(0, 0, 0, 0.8);
    --shadow-text-light: 1px 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-text-heavy: 2px 2px 4px rgba(0, 0, 0, 0.8);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.55);
    --shadow-photo: 0 4px 12px rgba(0, 0, 0, 0.4);

    /* Borders */
    --radius-sm: 8px;
    --radius-md: 12px;

    /* Transitions */
    --transition-base: all 0.3s ease;
}
body.geopo .top-nav .nav-link.active {
    border-bottom: 2px solid var(--arc-gold, #c9a84c);
    padding-bottom: calc(0.5rem - 2px);
}
/* Base guild styling */
body.geopo {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    /* The archive chrome paints the ground; geopo no longer brings its own
       gradient, and takes the site's serif rather than Arial. */
    background: var(--arc-bg, #0e0b08);
    font-family: var(--arc-prose, Georgia, "Times New Roman", serif);
    color: var(--arc-body, #7a6a4a);
    line-height: 1.6;
}
/* The second palette that came over with the templates, from cotsv's
   curators.css. It was dropped when this stylesheet was extracted [sc-51],
   which left --ink, --vellum, --bone and the rest referenced but undefined —
   the lore page and the parchment buttons have been rendering without them.
   Restored here, with the colours repointed at the archive's and the
   geometry, textures and clip paths kept as they were. */
body.geopo {
    /* base inks */
    --ink: var(--arc-bg, #0e0b08);
    --ink-2: var(--arc-panel, #16130e);
    --panel: var(--arc-panel, #16130e);
    --panel-2: var(--arc-panel-lit, #1e1610);
    --panel-line: var(--arc-line, #2e2416);
    /* heraldic violet */
    --violet: #4a3a20;
    --violet-bright: var(--arc-gold-dim, #8a6a30);
    --magenta: #5a3a18;
    --magenta-deep: #33220f;
    /* metallic gold */
    --gold: var(--arc-gold, #c9a84c);
    --gold-bright: var(--arc-title-lit, #ecddb8);
    --gold-deep: var(--arc-gold-dim, #8a6a30);
    --gold-grad:     linear-gradient(180deg,#f6e3a6 0%,#dcb45e 38%,#b6842f 70%,#8a6020 100%);
    /* parchment / bone text */
    --bone: var(--arc-title, #e0cfa0);
    --bone-dim: var(--arc-heading, #d4c098);
    --bone-faint: var(--arc-body, #7a6a4a);
    /* aged vellum (buttons, seals) */
    --vellum:        linear-gradient(176deg,#f1e1b6 0%,#e6d09a 48%,#d6b97e 78%,#c7a566 100%);
    --ink-sepia:     #3a2410;
    --char:          #201207;
    --maxw: 1180px;
    --shadow-card: 0 18px 50px -20px rgba(0,0,0,.75), 0 2px 0 rgba(255,255,255,.02) inset;
    /* fine stone grain for carved tablets (nav) */
    --stone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23s)' opacity='0.07'/%3E%3C/svg%3E");
    /* chipped stone silhouettes (3 variants, cycled across nav tablets) */
    --chip-a:polygon(2% 14%, 6% 4%, 19% 8%, 33% 2%, 50% 6%, 66% 1%, 82% 7%, 95% 3%, 99% 16%, 97% 34%, 100% 54%, 98% 74%, 100% 88%, 92% 97%, 78% 92%, 62% 98%, 46% 93%, 30% 99%, 15% 94%, 5% 98%, 1% 84%, 3% 64%, 0% 44%, 2% 30%);
    --chip-b:polygon(1% 10%, 9% 2%, 24% 7%, 38% 1%, 55% 5%, 70% 0%, 88% 6%, 98% 12%, 100% 30%, 97% 48%, 99% 68%, 96% 86%, 99% 96%, 86% 100%, 70% 95%, 54% 100%, 38% 96%, 22% 100%, 9% 95%, 2% 88%, 4% 70%, 0% 50%, 2% 32%, 0% 20%);
    --chip-c:polygon(3% 6%, 14% 1%, 28% 6%, 44% 0%, 60% 5%, 76% 1%, 90% 5%, 100% 14%, 98% 32%, 100% 50%, 97% 70%, 100% 84%, 94% 94%, 80% 99%, 64% 94%, 48% 100%, 32% 95%, 17% 99%, 6% 93%, 0% 80%, 3% 60%, 1% 40%, 3% 22%, 1% 12%);
    /* faint ogee damask (from the shield's dexter half) */
    --veil-ogee:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='132' viewBox='0 0 88 132'%3E%3Cg fill='none' stroke='%237a4fb0' stroke-opacity='0.05' stroke-width='1.4'%3E%3Cpath d='M44 0 C44 33 0 33 0 66 C0 99 44 99 44 132 C44 99 88 99 88 66 C88 33 44 33 44 0 Z'/%3E%3Cpath d='M0 66 C0 33 -44 33 -44 0 M88 66 C88 33 132 33 132 0'/%3E%3C/g%3E%3C/svg%3E");
    /* faint starfield (from the sinister half) */
    --veil-stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='%23d8af52' fill-opacity='0.16'%3E%3Ccircle cx='40' cy='80' r='.8'/%3E%3Ccircle cx='180' cy='40' r='.6'/%3E%3Ccircle cx='320' cy='120' r='.9'/%3E%3Ccircle cx='500' cy='60' r='.6'/%3E%3Ccircle cx='560' cy='200' r='.8'/%3E%3Ccircle cx='120' cy='220' r='.7'/%3E%3Ccircle cx='260' cy='300' r='.6'/%3E%3Ccircle cx='440' cy='340' r='.9'/%3E%3Ccircle cx='80' cy='420' r='.7'/%3E%3Ccircle cx='360' cy='460' r='.6'/%3E%3Ccircle cx='540' cy='480' r='.8'/%3E%3Ccircle cx='200' cy='520' r='.7'/%3E%3Ccircle cx='460' cy='560' r='.6'/%3E%3Ccircle cx='300' cy='580' r='.8'/%3E%3C/g%3E%3C/svg%3E");
    /* faint leather / vellum grain */
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

body.geopo .guild-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 5rem 2rem 3rem;
    text-align: center;
}
body.geopo .wide-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 5rem 2rem 3rem;
    text-align: center;
}
body.geopo .full-width-container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 5rem 2rem 3rem;
    text-align: center;
}
body.geopo .game-map-container {
    width: 100%;
    height: calc(100vh - 60px);
}
body.geopo .page-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 3rem;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    color: var(--arc-title, #e0cfa0);
}
body.geopo .nav-link.active {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
}
/* Page header (title + back button) */
body.geopo .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
/* Filter bar — shared layout + styling for list-view filter forms.
   Rendered by cotsv/templates/bicolline/includes/filter_bar.html. */
body.geopo .filter-bar {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
body.geopo .filter-bar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
body.geopo .filter-bar__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-shadow: var(--shadow-text);
    margin: 0;
}
body.geopo .filter-bar__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
body.geopo .filter-bar__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}
body.geopo .filter-bar__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body.geopo .filter-bar__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
    text-shadow: var(--shadow-text);
}
body.geopo .filter-bar__field input[type="text"],
body.geopo .filter-bar__field input[type="search"],
body.geopo .filter-bar__field input[type="number"],
body.geopo .filter-bar__field select {
    width: 100%;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}
body.geopo .filter-bar__field input[type="text"]:focus,
body.geopo .filter-bar__field input[type="search"]:focus,
body.geopo .filter-bar__field input[type="number"]:focus,
body.geopo .filter-bar__field select:focus {
    outline: none;
    border-color: var(--color-gold-border);
    background: var(--glass-bg-hover);
}
body.geopo .filter-bar__field select option {
    background: var(--color-bg-deep);
    color: var(--color-text-primary);
}
body.geopo .filter-bar__field input[type="checkbox"] {
    width: auto;
    margin-right: 0.25rem;
}
body.geopo .filter-bar__errors {
    color: #ff9a9a;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}
body.geopo .filter-bar__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--glass-border);
}
body.geopo .filter-bar__active-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-right: 0.25rem;
}
body.geopo .filter-bar__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    color: var(--color-text-primary);
    background: var(--glass-bg-hover);
    border: 1px solid var(--glass-border-strong);
    border-radius: 999px;
    text-decoration: none;
    transition: var(--transition-base);
}
body.geopo .filter-bar__badge:hover {
    background: var(--glass-bg-active);
    border-color: var(--color-gold-dim);
    color: var(--color-text-primary);
    text-decoration: none;
}
body.geopo .filter-bar__apply {
    /* Inherits from .btn-action; kept separate hook for future tweaks. */
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
}
/* Pagination */
body.geopo .pagination-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}
body.geopo .pagination-nav__info {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}
/* Detail fields (label/value grid replacing Bootstrap row/col) */
body.geopo .detail-fields {
    display: grid;
    grid-template-columns: minmax(120px, 25%) 1fr;
    gap: 0;
    text-align: left;
    margin-bottom: 1rem;
}
body.geopo .detail-fields dt {
    padding: 0.4rem 0;
    font-weight: 600;
    color: var(--color-text-primary);
    text-shadow: var(--shadow-text);
}
body.geopo .detail-fields dd {
    padding: 0.4rem 0;
    margin-bottom: 0;
}
/* Body sections below the detail-fields grid. The page container is centred,
   which leaves bare lists with their markers stranded at the far left while the
   text floats inward. Left-align the section so headings, prose and list items
   line up, and keep each bullet next to its item. */
body.geopo .entity-detail-body {
    text-align: left;
}
body.geopo .detail-list {
    margin: 0.5rem 0 1.5rem;
    padding-left: 1.5rem;
}
body.geopo .detail-list li {
    margin-bottom: 0.3rem;
}
@media (max-width: 575.98px) {
  body.geopo .detail-fields {
        grid-template-columns: 1fr;
    }
  body.geopo .detail-fields dt {
        padding-bottom: 0;
        font-weight: 700;
    }
  body.geopo .detail-fields dd {
        padding-top: 0;
        margin-bottom: 0.5rem;
    }
}
/* Header action cluster — groups the RSS button with the back button. */
body.geopo .page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* RSS subscribe button — standard orange so RSS-literate users spot it. */
body.geopo .btn-rss {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: #f26522;
    border: 1px solid #d65414;
    border-radius: var(--radius-sm, 4px);
    text-decoration: none;
    transition: var(--transition-base);
}
body.geopo .btn-rss:hover {
    background: #d65414;
    border-color: #b64810;
    color: #fff;
    text-decoration: none;
}
body.geopo .btn-rss__icon {
    width: 1.1rem;
    height: 1.1rem;
    color: #f26522;
    background: #fff;
    border-radius: 0.2rem;
    padding: 0.1rem;
    flex: 0 0 auto;
}
/* Back button */
body.geopo .btn-back {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-base);
}
body.geopo .btn-back:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    color: var(--color-text-primary);
    text-decoration: none;
}
/* Primary action button */
body.geopo .btn-action {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-bg-deep);
    background: var(--color-gold);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-base);
}
body.geopo .btn-action:hover {
    background: #fff;
    color: var(--color-bg-deep);
    text-decoration: none;
}
/* Guild table */
body.geopo .guild-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--color-text-secondary);
}
body.geopo .guild-table thead th {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    font-weight: 600;
    text-shadow: var(--shadow-text);
    border-bottom: 2px solid var(--color-gold-dim);
    padding: 0.5rem;
    text-align: left;
}
body.geopo .guild-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--glass-border);
}
body.geopo .guild-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}
body.geopo .guild-table td a {
    color: var(--color-gold);
    text-decoration: none;
    transition: var(--transition-base);
}
body.geopo .guild-table td a:hover {
    color: #fff;
    text-decoration: underline;
}
body.geopo .guild-table--compact td,
body.geopo .guild-table--compact th {
    padding: 0.25rem 0.5rem;
}
/* Guild form elements */
body.geopo .guild-form-label {
    color: var(--color-text-primary);
    font-weight: 600;
    text-shadow: var(--shadow-text);
    margin-bottom: 0.25rem;
    display: block;
}
body.geopo .guild-form-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    padding: 0.5rem;
}
body.geopo .guild-form-select:focus {
    outline: none;
    border-color: var(--color-gold-border);
    box-shadow: 0 0 0 2px var(--color-gold-dim);
}
body.geopo .guild-form-select option {
    background: var(--color-bg-purple);
    color: var(--color-text-secondary);
}
/* Utility classes */
body.geopo .u-text-center { text-align: center; }
body.geopo .u-text-end { text-align: right; }
body.geopo .u-text-muted { color: var(--color-text-muted); text-shadow: var(--shadow-text-light); }
body.geopo .u-w-full { width: 100%; }
body.geopo .u-mb-0 { margin-bottom: 0; }
body.geopo .u-mb-3 { margin-bottom: 1rem; }
body.geopo .u-mb-4 { margin-bottom: 1.5rem; }
body.geopo .u-flex { display: flex; }
body.geopo .u-flex-grow { flex-grow: 1; }
body.geopo .u-flex-wrap { flex-wrap: wrap; }
body.geopo .u-flex-col { flex: 1; min-width: 280px; }
body.geopo .u-gap-3 { gap: 1rem; }
body.geopo .u-gap-4 { gap: 1.5rem; }
body.geopo .u-items-center { align-items: center; }
body.geopo .u-items-end { align-items: flex-end; }
body.geopo .u-img-fluid { max-width: 100%; height: auto; }
body.geopo .u-rounded { border-radius: var(--radius-sm); }
/* Geopo Index Cards */
body.geopo .geopo-page-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
}
body.geopo .geopo-changes-panel {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card);
    padding: 1.25rem;
    align-self: stretch;
}
body.geopo .geopo-changes-title {
    color: var(--color-text-primary);
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 1rem 0;
    text-shadow: var(--shadow-text);
}
body.geopo .geopo-changes-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
}
body.geopo .geopo-change-item {
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.6rem;
}
body.geopo .geopo-change-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
body.geopo .geopo-change-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.4rem;
    flex-wrap: wrap;
}
body.geopo .geopo-change-emoji {
    font-size: 1rem;
    flex-shrink: 0;
    cursor: default;
}
body.geopo .geopo-change-name {
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
body.geopo .geopo-change-name:hover {
    text-decoration: underline;
}
body.geopo .geopo-change-type-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm, 4px);
    background: var(--glass-border);
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
body.geopo .geopo-change-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}
body.geopo .geopo-change-summary {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0.25rem 0 0 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
body.geopo .geopo-changes-empty {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
body.geopo .geopo-see-more {
    display: block;
    text-align: center;
    margin-top: 1rem;
}
body.geopo .geopo-page-layout .geopo-grid {
    flex: 1;
    min-width: 0;
}
body.geopo .entity-change-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
body.geopo .entity-change-filter label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
}
body.geopo .entity-change-filter select,
body.geopo .entity-change-filter input[type="text"] {
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--glass-border);
    background: var(--color-bg-purple);
    color: var(--color-text-primary);
}
body.geopo .entity-change-filter select option {
    background: var(--color-bg-purple);
    color: var(--color-text-primary);
}
body.geopo .entity-change-filter-errors {
    border: 1px solid #b64810;
    background: rgba(242, 101, 34, 0.12);
    color: #ffb38a;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm, 4px);
    margin-bottom: 0.75rem;
}
body.geopo .entity-change-filter-errors p {
    margin: 0;
}
body.geopo .entity-change-poi-filters.hidden {
    display: none;
}
body.geopo .entity-change-hex__inputs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
body.geopo .entity-change-hex__inputs input[type="number"] {
    width: 5rem;
}
body.geopo .geopo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    text-align: left;
}
body.geopo .geopo-card {
    display: block;
    padding: 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: var(--transition-base);
}
body.geopo .geopo-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
}
body.geopo .geopo-card h5 {
    color: var(--color-text-primary);
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-shadow: var(--shadow-text);
}
body.geopo .geopo-card p {
    color: var(--color-text-muted);
    margin: 0;
    font-size: 0.95rem;
    text-shadow: var(--shadow-text-light);
}
body.geopo .guild-detail-title {
    margin-bottom: 0.5rem;
}
body.geopo .guild-identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}
body.geopo .guild-detail-logo {
    max-width: 160px;
    max-height: 160px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
body.geopo .entity-list-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}
/* Guild Detail Header */
body.geopo .guild-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
}
body.geopo .guild-stats {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 1rem 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card);
    flex-shrink: 0;
}
body.geopo .guild-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
body.geopo .guild-stat-value {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-text-primary);
    text-shadow: var(--shadow-text);
}
body.geopo .guild-stat-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Guild Notes (collapsible) */
body.geopo .guild-notes {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    backdrop-filter: var(--glass-blur);
}
body.geopo .guild-notes summary {
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-gold);
    text-shadow: var(--shadow-text);
    list-style: none;
}
body.geopo .guild-notes summary::-webkit-details-marker {
    display: none;
}
body.geopo .guild-notes summary::before {
    content: "\25B6";
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}
body.geopo .guild-notes[open] summary::before {
    transform: rotate(90deg);
}
body.geopo .guild-notes-body {
    padding: 0 1.5rem 1.25rem;
    color: var(--color-text-muted);
    text-shadow: var(--shadow-text-light);
    line-height: 1.7;
}
/* Resource production charts */
body.geopo .resource-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
body.geopo .resource-chart {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card);
    min-height: 360px;
}
body.geopo .resource-chart canvas {
    max-width: 100%;
}
/* Province Cards */
body.geopo .province-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card);
    text-align: left;
}
body.geopo .province-card h4 {
    margin: 0 0 1rem;
}
body.geopo .province-card h4 a {
    color: var(--color-gold);
    text-decoration: none;
    text-shadow: var(--shadow-text);
    font-weight: 600;
}
body.geopo .province-card h4 a:hover {
    color: #fff;
    text-decoration: underline;
}
body.geopo .province-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
body.geopo .province-card ul li {
    padding: 0.3rem 0;
}
body.geopo .province-card ul li a {
    color: var(--color-gold);
    text-decoration: none;
    transition: var(--transition-base);
}
body.geopo .province-card ul li a:hover {
    color: #fff;
    text-decoration: underline;
}
/* Domaine Grid inside Province Cards */
body.geopo .domaine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}
/* Territory Nesting */
body.geopo .territory-level {
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--glass-border);
    margin-top: 0.75rem;
}
body.geopo .territory-level h5 {
    color: var(--color-text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: var(--shadow-text);
}
body.geopo .territory-level h5 a {
    color: var(--color-gold);
    text-decoration: none;
}
body.geopo .territory-level h5 a:hover {
    color: #fff;
    text-decoration: underline;
}
body.geopo .territory-level h6 {
    color: var(--color-text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: var(--shadow-text);
}
body.geopo .territory-level h6 a {
    color: var(--color-gold);
    text-decoration: none;
}
body.geopo .territory-level h6 a:hover {
    color: #fff;
    text-decoration: underline;
}
/* Guild Title Labels (GitLab-style) */
body.geopo .guild-title-label {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 10px;
    background: var(--color-gold-dim);
    color: var(--color-gold);
    border: 1px solid var(--color-gold-border);
    vertical-align: middle;
    text-decoration: none;
}
body.geopo a.guild-title-label:hover {
    background: var(--color-gold-border);
    color: #fff;
    text-decoration: none;
}
/* Domaine Detail Header */
body.geopo .domaine-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
body.geopo .domaine-header-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}
body.geopo .domaine-header > a {
    position: absolute;
    right: 0;
}
body.geopo .domaine-header-actions {
    position: absolute;
    right: 0;
    display: flex;
    gap: 0.5rem;
}
body.geopo .guild-label-logo {
    height: 1em;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 0.25rem;
    border-radius: 2px;
}
/* Sortable Table Headers */
body.geopo table.sortable thead th {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.25em;
}
body.geopo table.sortable thead th::after {
    content: "\2195";
    position: absolute;
    right: 0.4em;
    opacity: 0.3;
    font-size: 0.8em;
}
body.geopo table.sortable thead th.sort-asc::after {
    content: "\25B2";
    opacity: 0.9;
}
body.geopo table.sortable thead th.sort-desc::after {
    content: "\25BC";
    opacity: 0.9;
}
/* Character Cards */
body.geopo .character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.25rem;
    text-align: center;
}
body.geopo .character-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: var(--transition-base);
}
body.geopo .character-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
}
body.geopo .character-card.inactive {
    opacity: 0.55;
    filter: grayscale(0.8);
}
body.geopo .character-card.inactive:hover {
    opacity: 0.75;
}
body.geopo .inactive-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}
body.geopo .guild-table tr.inactive {
    opacity: 0.55;
}
body.geopo .guild-table tr.inactive:hover {
    opacity: 0.8;
}
body.geopo .character-inactive-banner {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card);
    text-align: center;
}
body.geopo .character-inactive-banner strong {
    display: block;
    font-size: 1.25rem;
    color: var(--color-gold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: var(--shadow-text);
}
body.geopo .character-inactive-banner p {
    margin: 0.5rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
body.geopo .character-card-photo {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-photo);
}
body.geopo .character-detail-photo {
    max-height: 300px;
}
body.geopo .character-detail-role-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-left: 0.5rem;
}
body.geopo .character-card-role-icon {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-bg-purple);
    box-shadow: var(--shadow-photo);
}
body.geopo .character-card-guild-icon {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-bg-purple);
    box-shadow: var(--shadow-photo);
    background: var(--glass-bg);
}
body.geopo .character-card-religion-icon {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-bg-purple);
    box-shadow: var(--shadow-photo);
    background: var(--glass-bg);
}
/* Mage/occultist indicator: bottom-left corner icon(s), styled like the
   religion icon in the opposite corner. */
body.geopo .character-card-sphere-icon {
    position: absolute;
    bottom: -6px;
    left: -6px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-bg-purple);
    box-shadow: var(--shadow-photo);
    background: var(--glass-bg);
}
/* A character with both spheres shows the occultist icon beside the mage icon. */
body.geopo .character-card-sphere-icon.second {
    left: 34px;
}
body.geopo .character-detail-religion-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-left: 0.5rem;
}
body.geopo .region-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}
body.geopo .region-breakdown-table th,
body.geopo .region-breakdown-table td {
    padding: 0.6rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
}
body.geopo .region-breakdown-table th {
    color: var(--color-gold);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body.geopo .region-breakdown-table tr.clickable-row {
    cursor: pointer;
    transition: var(--transition-base);
}
body.geopo .region-breakdown-table tr.clickable-row:hover {
    background: var(--glass-bg-hover);
}
body.geopo .region-breakdown-table td a {
    color: var(--color-text-primary);
    text-decoration: none;
    display: block;
    width: 100%;
}
body.geopo .character-card-name {
    position: relative;
    z-index: 1;
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    text-shadow: var(--shadow-text);
    margin-bottom: 0.25rem;
}
/* Hierarchy tree: High Priest on top, vertical dotted line, Cleric below */
body.geopo .hierarchy-tree {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center;
}
body.geopo .hierarchy-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.geopo .hierarchy-connector {
    width: 2px;
    height: 40px;
    border-left: 2px dotted var(--glass-border-strong, rgba(255, 255, 255, 0.25));
}
/* Utility Classes */
body.geopo .hidden {
    display: none !important;
}
/* Responsive design - global theme adjustments */
@media (max-width: 768px) {
  body.geopo .guild-container {
        padding: 4rem 1rem 2rem;
    }
  body.geopo .full-width-container {
        padding: 4rem 1rem 2rem;
    }
  body.geopo .page-title {
        font-size: 2rem;
    }
  body.geopo .guild-header {
        flex-direction: column;
    }
  body.geopo .guild-stats {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Info tooltip for resource output explanation */
body.geopo .info-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    color: var(--color-gold, var(--arc-gold, #c9a84c));
    margin-left: 0.25rem;
    vertical-align: middle;
}
body.geopo .info-tooltip .info-tooltip-content {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.5rem;
    background: var(--color-bg-dark, #1a1a2e);
    border: 1px solid var(--color-gold, var(--arc-gold, #c9a84c));
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
    color: #ddd;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
body.geopo .info-tooltip:hover .info-tooltip-content,
body.geopo .info-tooltip:focus .info-tooltip-content {
    display: block;
}
/* Production modifier pills in the resource-production "Modifiers" cell.
   The pill itself is .guild-title-label (gold-on-gold, with logo + text);
   the delta sits next to it color-coded. */
body.geopo .modifier-delta {
    margin-left: 0.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
body.geopo .modifier-delta--pos { color: var(--color-positive, #2c6a2c); }
body.geopo .modifier-delta--neg { color: var(--color-negative, #a13030); }
/* Head-to-Head comparison */
body.geopo .h2h-table {
    table-layout: fixed;
}
body.geopo .h2h-table th:first-child,
body.geopo .h2h-table td:first-child {
    width: 25%;
}
body.geopo .h2h-table th:nth-child(2),
body.geopo .h2h-table td:nth-child(2) {
    width: 50%;
}
body.geopo .h2h-table th:last-child,
body.geopo .h2h-table td:last-child {
    width: 25%;
}
body.geopo .h2h-section-header td {
    font-weight: bold;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--glass-border-strong);
    padding-top: 1rem;
    color: var(--color-gold);
}
body.geopo .h2h-metric-label .h2h-label {
    font-weight: 600;
    color: var(--color-text-primary);
}
body.geopo .h2h-metric-label .h2h-delta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
body.geopo .h2h-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
}
body.geopo .h2h-spinner-icon {
    width: 48px;
    height: 48px;
    border: 4px solid var(--glass-border);
    border-top-color: var(--color-gold);
    border-radius: 50%;
    animation: h2h-spin 0.8s linear infinite;
}
@keyframes h2h-spin {
    to {
        transform: rotate(360deg);
    }
}
/* Building detail page */
body.geopo .building-art-placeholder {
    width: 200px;
    height: 200px;
    background: var(--card-bg, #2a2a2a);
    border: 1px dashed var(--border-color, #555);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 0.85rem;
}
body.geopo .library-intro {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--bone, #ece3cf);
    text-shadow: var(--shadow-text-light);
    max-width: 60ch;
}
body.geopo .library-heraldry-shield {
    width: clamp(90px, 14vw, 130px);
    height: auto;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
    transition: transform 0.2s ease;
}
body.geopo .library-heraldry-shield:hover {
    transform: translateY(-3px) scale(1.03);
}
body.geopo .library-heraldry-caption {
    margin-top: 0.5rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    color: var(--gold, var(--arc-gold, #c9a84c));
    text-transform: uppercase;
}
/* Heraldry gallery (issue #209) */
body.geopo .heraldry-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
body.geopo .heraldry-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
body.geopo .heraldry-filter label {
    color: var(--color-text-primary);
    font-weight: bold;
}
body.geopo .heraldry-filter input {
    min-width: 220px;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--color-text-primary);
}
body.geopo .heraldry-actions {
    display: flex;
    gap: 0.5rem;
}
body.geopo .heraldry-filter-summary {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}
body.geopo .heraldry-kingdom {
    margin-bottom: 2rem;
}
body.geopo .heraldry-kingdom h2 {
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
}
body.geopo .heraldry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.25rem;
}
body.geopo .heraldry-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
body.geopo .heraldry-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
}
/* Logos render at half the guild-detail size (max 80px). */
body.geopo .heraldry-logo {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    transition: transform 0.15s ease;
}
body.geopo .heraldry-logo-link:hover .heraldry-logo {
    transform: scale(1.08);
}
body.geopo .heraldry-name {
    color: var(--color-text-primary);
    font-weight: bold;
    word-break: break-word;
}
/* Light gallery sheet — a lighter backdrop so that logos with a baked-in
   black background stay visible instead of vanishing into the dark page.
   Text inside the sheet is switched to dark ink to stay readable. */
body.geopo .heraldry-sheet {
    background: var(--color-heraldry-sheet);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-top: 1rem;
}
body.geopo .heraldry-sheet .heraldry-kingdom h2 {
    color: var(--color-heraldry-ink);
    border-bottom-color: rgba(45, 27, 105, 0.2);
    text-shadow: none;
}
body.geopo .heraldry-sheet .heraldry-name {
    color: var(--color-heraldry-ink);
    text-shadow: none;
}
body.geopo .heraldry-sheet .heraldry-name:hover {
    color: #000;
}
body.geopo .heraldry-sheet .heraldry-filter label {
    color: var(--color-heraldry-ink);
}
body.geopo .heraldry-sheet .heraldry-filter input {
    background: #fff;
    border-color: rgba(45, 27, 105, 0.3);
    color: var(--color-heraldry-ink);
}
body.geopo .heraldry-sheet .heraldry-filter-summary {
    color: var(--color-heraldry-ink);
}
body.geopo .heraldry-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}
body.geopo .heraldry-edit-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-heraldry-sheet);
    padding: 1.25rem;
    border-radius: var(--radius-md);
}
body.geopo .heraldry-edit-logo .heraldry-name {
    color: var(--color-heraldry-ink);
    text-shadow: none;
}
body.geopo .heraldry-edit-logo img {
    max-width: 320px;
    max-height: 320px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}
body.geopo .heraldry-edit-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 280px;
    flex: 1;
}
body.geopo .heraldry-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
body.geopo .heraldry-field label {
    color: var(--color-text-primary);
    font-weight: bold;
}
body.geopo .heraldry-field input {
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--color-text-primary);
}
body.geopo .heraldry-field .form-text {
    color: var(--color-text-muted);
}
body.geopo .heraldry-import-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
body.geopo .guild-resources-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}
/* Musical Archives (issue #225) */
body.geopo .music-header {
    margin-bottom: 1.5rem;
}
body.geopo .music-title-row {
    justify-content: center;
    text-align: center;
}
body.geopo .music-header-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
}
body.geopo .music-header-body .library-intro {
    text-align: center;
}
body.geopo .music-heraldry {
    flex: 0 0 auto;
    text-align: center;
}
@media (max-width: 600px) {
  body.geopo .music-header-body {
        flex-direction: column;
        text-align: center;
    }
}
body.geopo .music-grid {
    /* Flex rather than grid so a partly-filled last row stays centred. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}
body.geopo .music-card {
    position: relative; /* anchors the writer's guild crest in the corner */
    flex: 0 1 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: var(--transition-base);
}
body.geopo .music-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
}
body.geopo .music-card-heraldry {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: flex;
    gap: 0.25rem;
}
body.geopo .music-card-heraldry-shield {
    width: 34px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
body.geopo .music-card-glyph {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--gold, var(--arc-gold, #c9a84c));
}
body.geopo .music-card-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: var(--gold, var(--arc-gold, #c9a84c));
}
body.geopo .music-card-writers {
    margin: 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    color: var(--color-text-primary);
}
body.geopo .music-card-location {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary, #b9b0a0);
}
body.geopo .music-card-badge {
    margin: 0.25rem 0 0;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #b9b0a0);
}
body.geopo .music-empty {
    color: var(--color-text-secondary, #b9b0a0);
}
/* Music accordion on the geopo place pages */
body.geopo .music-piece-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.geopo .music-piece-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--glass-border);
}
body.geopo .music-piece-list li:last-child {
    border-bottom: none;
}
body.geopo .music-piece-writers {
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--color-text-secondary, #b9b0a0);
}
body.geopo .music-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--color-text-primary);
}
body.geopo .music-detail-location::before {
    content: '·';
    margin-right: 0.5rem;
    color: var(--gold, var(--arc-gold, #c9a84c));
}
/* The sheet-music link carries a staff-and-note glyph beside its label. */
body.geopo .btn-sheet-music {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
/* Masked rather than dropped in as an <img>: the source art is black ink,
   which would vanish against the dark page, and this way the glyph tracks
   the button's hover colour. */
body.geopo .btn-sheet-music__icon {
    flex: 0 0 auto;
    width: 1.86rem; /* the trimmed art is 1.38:1 */
    height: 1.35rem;
    background: currentColor;
    -webkit-mask: url("../images/staff-icon.fe3eac3dfb16.webp") no-repeat center / contain;
    mask: url("../images/staff-icon.fe3eac3dfb16.webp") no-repeat center / contain;
}
/* Each take on the piece: its own heading, cast and player. */
body.geopo .music-recording {
    margin: 1.5rem 0 2rem;
}
body.geopo .music-recording-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold, var(--arc-gold, #c9a84c));
}
body.geopo .music-recording-performers {
    margin: 0.25rem 0 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    color: var(--color-text-secondary, #b9b0a0);
}
body.geopo .music-recordings-empty {
    text-align: center;
    color: var(--color-text-secondary, #b9b0a0);
}
body.geopo .music-player {
    width: 100%;
    margin: 0.75rem 0 0;
}
/* Video takes keep the page's rhythm rather than growing to their own size. */
body.geopo .music-player-video {
    max-height: 60vh;
    background: #000;
}
body.geopo .music-lyrics-title {
    font-family: 'Cinzel', serif;
    color: var(--gold, var(--arc-gold, #c9a84c));
    text-align: center;
}
/* Verses read as a centred column, the way a songsheet sets them. */
body.geopo .music-lyrics {
    max-width: 60ch;
    margin-inline: auto;
    text-align: center;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}
body.geopo .music-lyrics-empty {
    text-align: center;
    color: var(--color-text-secondary, #b9b0a0);
}

/* ==== from cotsv curators.css ==== */
/* ---------- Base ---------- */
body.geopo.guild-body {
  margin:0;
  font-family:'EB Garamond', Georgia, serif;
  font-size:19px;
  line-height:1.72;
  color:var(--bone);
  background-color:var(--ink);
  background-image:
    radial-gradient(135% 100% at 50% 120%, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(120% 80% at 50% -10%, rgba(106,58,160,.30) 0%, rgba(106,58,160,0) 55%),
    radial-gradient(90% 60% at 85% 8%, rgba(122,47,110,.16) 0%, rgba(122,47,110,0) 50%),
    var(--veil-stars),
    var(--grain),
    var(--veil-ogee);
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat;
  background-size: auto, auto, auto, 600px 600px, 240px 240px, 88px 132px;
  min-height:100vh;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
/* current page = pressed-in tablet with gilt engraving */
body.geopo .nav .tablet.active {
  color:var(--gold-bright);
  background:var(--stone),
    linear-gradient(180deg,#262531 0%, #1c1b24 100%);
  background-size:90px 90px, auto;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(216,175,82,.22);
  text-shadow:0 1px 0 rgba(0,0,0,.8);
}
/* ---------- Buttons: burnt-edge parchment scroll ---------- */
body.geopo .btn {
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Cinzel', serif; font-weight:600;
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  padding:17px 38px; cursor:pointer;
  color:var(--ink-sepia); background:none; border:none;
  text-shadow:0 1px 0 rgba(255,250,230,.42);
  transition:transform .16s, filter .2s;
  text-decoration:none;
}
body.geopo .btn .lbl { position:relative; z-index:2; }
body.geopo .btn .face {
  position:absolute; inset:0; z-index:1; border-radius:6px;
  background:
    radial-gradient(70% 120% at 22% 12%, rgba(120,70,25,.10), transparent 60%),
    radial-gradient(60% 100% at 82% 92%, rgba(120,70,25,.16), transparent 55%),
    var(--vellum);
  box-shadow: inset 0 0 0 1px rgba(120,80,35,.30), inset 0 0 18px rgba(60,32,10,.5);
  filter:url(#deckle);
}
body.geopo .btn .char {
  position:absolute; inset:-3px; z-index:0; border-radius:9px;
  background:linear-gradient(180deg, #4a2c12, #1c0f06);
  filter:url(#deckleBurn);
  opacity:.95;
}
body.geopo .btn:hover { transform:translateY(-2px); }
body.geopo .btn:hover .face { filter:url(#deckle) brightness(1.04); }
body.geopo .btn:active { transform:translateY(0); }
/* ---------- Badges ---------- */
body.geopo .badge {
  display:inline-flex; align-items:center;
  font-family:'Cinzel', serif; font-weight:600;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px;
  border:1px solid var(--panel-line); color:var(--bone-dim);
}
body.geopo .badge.lead { border-color:rgba(139,84,201,.5); color:#c9a9f0; background:rgba(139,84,201,.12); }
body.geopo .badge.officer { border-color:rgba(216,175,82,.5); color:var(--gold-bright); background:rgba(216,175,82,.1); }
body.geopo .badge.war { border-color:rgba(200,70,70,.5); color:#f0a9a9; background:rgba(200,70,70,.12); }
body.geopo .badge.curator { border-color:rgba(122,47,110,.6); color:#e2a6d8; background:rgba(122,47,110,.16); }
body.geopo .badge.treasurer { border-color:rgba(80,160,150,.5); color:#9fe0cf; background:rgba(80,160,150,.12); }
@media (max-width:780px) {
  body.geopo.guild-body { font-size:18px; }
}
/* ============================================================
   AUTH / FORMS  — reskins the allauth pages and the guild
   register / invite / account Svelte forms by overriding the
   shared classes defined in guild.css (loaded earlier).
   ============================================================ */
/* page headings (account, invite, register, members, history…) */
body.geopo .page-title {
  font-family:'Grenze Gotisch', serif; font-weight:700;
  font-size:clamp(2.2rem,5vw,3.4rem);
  text-align:center; margin:0 0 2.2rem; letter-spacing:.01em;
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  text-shadow:none; filter:drop-shadow(0 2px 1px rgba(0,0,0,.6));
}
body.geopo .form-text,
body.geopo .help-text,
body.geopo .photo-hint {
  font-size:.86rem; color:var(--bone-faint); margin-top:.4rem;
}
/* primary action — forged bronze plaque */
body.geopo .form-submit,
body.geopo .btn-action {
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; margin-top:1rem; padding:1rem 2rem; cursor:pointer;
  font-family:'Cinzel', serif; font-weight:600;
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  color:#f6e3a6; text-decoration:none; text-shadow:0 1px 0 rgba(0,0,0,.55);
  border:1px solid #281d0d; border-radius:5px;
  background:linear-gradient(180deg,#705626 0%, #57411c 46%, #45341a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,228,156,.32),
    inset 0 -2px 3px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(0,0,0,.3);
  transition:transform .16s, filter .2s;
}
body.geopo .btn-action { width:auto; }
body.geopo .form-submit:hover:not(:disabled),
body.geopo .btn-action:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); box-shadow:
    inset 0 1px 0 rgba(255,228,156,.32),
    inset 0 -2px 3px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(0,0,0,.3); }
/* nothing to save yet — the plaque goes cold */
body.geopo .form-submit:disabled,
body.geopo .btn-action:disabled {
  cursor:not-allowed; opacity:.45; filter:grayscale(.55);
  color:var(--bone-faint); text-shadow:none;
}
/* secondary action — forged iron plaque with brass trim */
body.geopo .btn-back {
  display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 1.6rem; cursor:pointer;
  font-family:'Cinzel', serif; font-weight:600;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-bright); text-decoration:none;
  border-radius:5px; border:1px solid rgba(201,168,76,.4);
  background:linear-gradient(180deg, var(--arc-panel-lit, #1e1610), var(--arc-bg, #0e0b08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .16s, background .2s;
}
body.geopo .btn-back:hover { transform:translateY(-2px); background:linear-gradient(180deg, #241b12, var(--arc-panel, #16130e)); }