/*
 * Albion PvP Platform: base styles (Phase 1)
 * Direction: forged iron surfaces, parchment text, gilt and banner-red used sparingly.
 * The signature element is the swallowtail pennant used for King of the Kill tiers.
 */

@font-face {
    font-family: "Cinzel";
    src: url("../fonts/cinzel-latin-600-normal.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cinzel";
    src: url("../fonts/cinzel-latin-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Palette */
    --iron: #14181f;
    --plate: #1d232c;
    --plate-raised: #242b36;
    --rivet: #2f3743;
    --parchment: #ece4d2;
    --ash: #a7afba;
    --gilt: #c8a04f;
    --gilt-bright: #e0bb67;
    --banner-red: #a3312a;
    --banner-red-bright: #c9433a;

    /* Trophy tiers */
    --bronze: #b07a4a;
    --silver: #b9c0c8;
    --gold: #d4af37;

    /* Status */
    --ok: #6fae7c;
    --warn: #d9a441;
    --fail: #d65b52;

    /* Type */
    --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
    --font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
    --step--1: 0.875rem;
    --step-0: 1rem;
    --step-1: 1.25rem;
    --step-2: 1.563rem;
    --step-3: 1.953rem;
    --step-4: clamp(2.2rem, 1.6rem + 3vw, 3.5rem);

    /* Space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    --measure: 68ch;
    --page: 72rem;
    --radius-sm: 4px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--iron);
    color: var(--parchment);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    margin: 0 0 var(--space-4);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); margin-top: var(--space-7); }
h3 { font-size: var(--step-1); font-weight: 600; }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

a { color: var(--gilt-bright); text-underline-offset: 0.2em; }
a:hover { color: var(--parchment); }

:focus-visible {
    outline: 2px solid var(--gilt-bright);
    outline-offset: 3px;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--plate-raised);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}

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

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -3rem;
    padding: var(--space-2) var(--space-4);
    background: var(--gilt);
    color: var(--iron);
    font-weight: 600;
    z-index: 10;
}
.skip-link:focus { top: var(--space-4); }

/* Header */
.site-header {
    border-bottom: 1px solid var(--rivet);
    background: var(--plate);
}
.site-header__inner {
    max-width: var(--page);
    margin: 0 auto;
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--parchment);
    text-decoration: none;
}
.brand__crest { display: block; }
.brand__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-1);
    letter-spacing: 0.02em;
}
.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.site-nav__item {
    color: var(--ash);
    font-weight: 500;
    cursor: default;
    opacity: 0.7;
}

/* Main */
.site-main {
    flex: 1;
    width: 100%;
    max-width: var(--page);
    margin: 0 auto;
    padding: var(--space-7) var(--space-5) var(--space-8);
}
.section-lead { color: var(--ash); font-size: var(--step-1); line-height: 1.45; }

/* Home: hero */
.hero { max-width: 48rem; }
.hero__title { margin-bottom: var(--space-5); }
.hero__lead { font-size: var(--step-1); line-height: 1.5; }
.hero__status {
    color: var(--ash);
    border-left: 3px solid var(--banner-red);
    padding-left: var(--space-4);
}

/* Home: King of the Kill pennants (the signature element) */
.pennants {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}
.pennant {
    --tier: var(--gilt);
    position: relative;
    padding: var(--space-6) var(--space-5) var(--space-8);
    background: var(--plate);
    border-top: 6px solid var(--tier);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 2.5rem), 0 100%);
    min-height: 15rem;
}
.pennant::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--banner-red);
    opacity: 0.8;
}
.pennant--bronze { --tier: var(--bronze); }
.pennant--silver { --tier: var(--silver); }
.pennant--gold { --tier: var(--gold); }
.pennant__name {
    color: var(--tier);
    font-size: var(--step-2);
    margin-bottom: var(--space-2);
}
.pennant__period { color: var(--ash); margin-bottom: var(--space-5); }
.pennant__holder { font-weight: 600; margin: 0; }

/* Home: facts */
.facts { margin: var(--space-5) 0 0; }
.facts__row {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--rivet);
}
.facts__row:last-child { border-bottom: 1px solid var(--rivet); }
.facts dt { font-weight: 600; color: var(--gilt); }
.facts dd { margin: 0; max-width: var(--measure); }

/* Panels, forms, buttons */
.panel {
    background: var(--plate);
    border: 1px solid var(--rivet);
    border-radius: var(--radius-sm);
    padding: var(--space-6);
}
.panel--narrow { max-width: 30rem; }
.form { display: grid; gap: var(--space-3); }
.form label { font-weight: 600; }
.form input {
    font: inherit;
    color: var(--parchment);
    background: var(--iron);
    border: 1px solid var(--rivet);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}
.form input:focus-visible { border-color: var(--gilt); }
.button {
    font: inherit;
    font-weight: 600;
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    background: var(--banner-red);
    color: var(--parchment);
    border: 1px solid var(--banner-red-bright);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
}
.button:hover { background: var(--banner-red-bright); color: var(--parchment); }
.button--ghost { background: transparent; border-color: var(--rivet); }
.button--ghost:hover { background: var(--plate-raised); }

/* Notices and flashes */
.flashes { max-width: var(--page); margin: var(--space-4) auto 0; padding: 0 var(--space-5); }
.flash, .notice {
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--ash);
    background: var(--plate);
    max-width: none;
}
.flash--success { border-color: var(--ok); }
.flash--error, .notice--error { border-color: var(--fail); }
.notice--warn { border-color: var(--warn); }

/* Operations */
.ops__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.table-scroll { overflow-x: auto; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-3) 0 var(--space-5);
    font-size: var(--step--1);
}
.data-table th, .data-table td {
    text-align: left;
    vertical-align: top;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--rivet);
}
.data-table thead th { color: var(--ash); font-weight: 600; }
.data-table tbody th { font-weight: 600; white-space: nowrap; }
.data-table .wrap { word-break: break-word; }
.status { font-weight: 600; white-space: nowrap; }
.status--ok { color: var(--ok); }
.status--warn { color: var(--warn); }
.status--fail { color: var(--fail); }
.status--info { color: var(--ash); }

/* Errors */
.error-page { max-width: 36rem; }
.error-page__code {
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 1;
    color: var(--banner-red);
    margin-bottom: var(--space-3);
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--rivet);
    background: var(--plate);
    color: var(--ash);
    font-size: var(--step--1);
}
.site-footer__inner {
    max-width: var(--page);
    margin: 0 auto;
    padding: var(--space-5);
}
.site-footer p { margin-bottom: var(--space-2); }

/* Tablet */
@media (max-width: 900px) {
    .pennants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pennant--gold { grid-column: 1 / -1; }
}

/* Phone */
@media (max-width: 600px) {
    .site-header__inner { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
    .site-nav ul { gap: var(--space-4); font-size: var(--step--1); }
    .site-main { padding: var(--space-6) var(--space-4) var(--space-7); }
    .pennants { grid-template-columns: minmax(0, 1fr); }
    .pennant { min-height: 0; padding-bottom: var(--space-8); }
    .facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .panel { padding: var(--space-5); }
    .site-footer__inner, .flashes { padding-left: var(--space-4); padding-right: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Phase 2: operations forms */
.form--wide { max-width: 48rem; }
.form fieldset { border: 1px solid var(--rivet); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin: 0; }
.form legend { font-weight: 600; padding: 0 var(--space-2); }
.choice { display: block; font-weight: 400; padding: var(--space-1) 0; }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: var(--space-2) var(--space-4); align-items: center; }
.field-grid label { font-weight: 500; }
.form select { font: inherit; color: var(--parchment); background: var(--iron); border: 1px solid var(--rivet); border-radius: var(--radius-sm); padding: var(--space-3); }
.form--inline { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.form--inline label { width: 100%; margin-bottom: calc(-1 * var(--space-2)); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
@media (max-width: 600px) {
    .field-grid { grid-template-columns: minmax(0, 1fr); }
}