/* ========================================
   Rungalan v2 — Typographic Design System
   ======================================== */

html { scroll-behavior: smooth; background: #0A0805; }

html, body {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    min-height: 100vh;
}

body {
    font-family: 'Source Serif 4', Georgia, serif;
    background: #0A0805;
    color: #E6DAC2;
    font-feature-settings: "kern", "liga", "onum";
    -webkit-font-smoothing: antialiased;
    hyphens: auto;
}

/* Remove focus outline on headings (Blazor FocusOnNavigate) */
h1:focus, h2:focus, h3:focus { outline: none; }

/* Force dark inputs globally — prevents Tailwind preflight / UA overrides */
input, textarea, select {
    background-color: transparent !important;
    color: inherit;
    color-scheme: dark;
}

/* Thin gold-toned lines */
.hr { border-color: rgba(201, 162, 75, 0.18); }
.hr-strong { border-color: rgba(201, 162, 75, 0.32); }

/* Uppercase labels — IBM Plex Mono */
.label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: #9C8F75;
}
.label-gold { color: #C9A24B; }

/* Drop cap initial */
.dropcap::first-letter {
    font-family: 'Source Serif 4', serif;
    font-size: 5.2rem;
    line-height: 0.85;
    float: left;
    padding: 0.4rem 0.7rem 0 0;
    color: #C9A24B;
    font-weight: 300;
}
@media (max-width: 640px) {
    .dropcap::first-letter { font-size: 3.5rem; }
}

/* Justified body text — left-align on small screens for readability */
.justify { text-align: justify; }
@media (max-width: 640px) {
    .justify { text-align: left; }
}

/* Dot-leader rows */
.dotrow { display: flex; align-items: baseline; gap: 1rem; }
.dotrow .dots {
    flex: 1;
    border-bottom: 1px dotted rgba(201, 162, 75, 0.28);
    transform: translateY(-0.35em);
}
@media (max-width: 640px) {
    .dotrow { flex-wrap: wrap; gap: 0.4rem; }
    .dotrow .dots { display: none; }
}

/* Archive table */
.archive { width: 100%; border-collapse: collapse; }
.archive th, .archive td {
    padding: 1.05rem 0.75rem;
    text-align: left;
    vertical-align: baseline;
    border-bottom: 1px solid rgba(201, 162, 75, 0.12);
}
.archive th {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9C8F75;
    font-weight: 500;
    border-bottom-color: rgba(201, 162, 75, 0.32);
    padding-top: 0;
}
.archive tbody tr { transition: background-color 0.15s ease; }
.archive tbody tr:hover { background: rgba(201, 162, 75, 0.04); }

/* Mobile: stack table cells as cards */
@media (max-width: 640px) {
    .archive, .archive thead, .archive tbody, .archive th, .archive td, .archive tr {
        display: block;
    }
    .archive thead { display: none; }
    .archive tbody tr {
        border-bottom: 1px solid rgba(201, 162, 75, 0.18);
        padding: 1rem 0;
    }
    .archive td {
        padding: 0.2rem 0;
        border-bottom: none;
    }
    .archive td:first-child {
        font-size: 1.1rem;
        padding-bottom: 0.3rem;
    }
}

/* Form fields — paper card style */
.field {
    padding: 0.9rem 1rem 1rem;
    border-bottom: 1px solid rgba(201, 162, 75, 0.18);
}
.field:has(input:focus),
.field:has(textarea:focus),
.field:has(select:focus) { background: rgba(201, 162, 75, 0.04); }
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea,
.field select {
    width: 100%;
    background: transparent !important;
    background-color: transparent !important;
    border: 0;
    outline: 0;
    color: #F2EAD9 !important;
    font-family: 'Source Serif 4', serif;
    font-size: 1.0625rem;
    padding: 0.25rem 0;
}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #F2EAD9;
    -webkit-box-shadow: 0 0 0 1000px #0A0805 inset;
    transition: background-color 5000s ease-in-out 0s;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(155, 143, 117, 0.5); font-style: italic; }
.field select { appearance: none; cursor: pointer; }

/* Plate image placeholder */
.plate {
    position: relative;
    background:
        repeating-linear-gradient(45deg, rgba(201,162,75,0.04) 0 1px, transparent 1px 18px),
        #14100B;
    border: 1px solid rgba(201, 162, 75, 0.2);
}
.plate::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(201, 162, 75, 0.1);
    pointer-events: none;
}

/* Folio bar text */
.folio {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9C8F75;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; background: #0A0805; }
::-webkit-scrollbar-thumb { background: rgba(201, 162, 75, 0.18); }

/* Roman numeral display */
.roman { font-variant-numeric: oldstyle-nums; }

/* Asterism markers */
.asterism { color: #C9A24B; letter-spacing: 0.5em; }

/* Nav link transitions */
.nav-link { transition: color 0.2s ease; }
.nav-link:hover { color: #F2EAD9; }

/* Blazor error UI */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #333;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred." }
.validation-message { color: #8A2633; }

/* Identity form fields — reuse v2 design system */
.input-gold {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(201, 162, 75, 0.18);
    color: #F2EAD9;
    font-family: 'Source Serif 4', serif;
    font-size: 1.0625rem;
    padding: 0.5rem 0;
    transition: all 0.2s ease;
}
.input-gold:focus {
    outline: none;
    border-bottom-color: #C9A24B;
    background: rgba(201, 162, 75, 0.04);
}
.input-gold::placeholder { color: rgba(155, 143, 117, 0.5); font-style: italic; }

/* Button styles */
.btn-gold {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0.75rem 2rem;
    border: 1px solid #C9A24B;
    color: #FAF6ED;
    background: transparent;
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}
.btn-gold:hover {
    background: #C9A24B;
    color: #0A0805;
}

.btn-ghost {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0.75rem 2rem;
    border: 1px solid rgba(201, 162, 75, 0.25);
    color: #E6DAC2;
    background: transparent;
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}
.btn-ghost:hover {
    border-color: rgba(201, 162, 75, 0.5);
    color: #F2EAD9;
}

/* Eyebrow — alias for label (used in Identity pages) */
.eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: #9C8F75;
}

/* Admin card */
.admin-card {
    border: 1px solid rgba(201, 162, 75, 0.18);
    padding: 2rem;
}

/* Hairline — horizontal gold rule */
.hairline {
    height: 1px;
    background: rgba(201, 162, 75, 0.18);
}