@import url('./tokens.css');

/* All public-surface styles scoped under .public-root — admin CSS cannot collide. */

.public-root {
    background: var(--public-page-bg);
    color: var(--public-ink);
    font-family: var(--font-public);
    font-size: var(--size-xs);         /* 12px — slightly above era-true for modern legibility */
    line-height: 1.5;
    min-height: 100vh;
    position: relative;
    padding: 0;
}

/* ── Vertical wood frames flanking the content column ───────────────────── */

.public-frame {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 64px;
    background: url('/img/wood-side.jpg?v=3') repeat-y center top;
    background-size: 64px auto;
    pointer-events: none;
    z-index: 0;
}
.public-frame-l { left:  calc(50% - 480px - 64px); }
.public-frame-r { right: calc(50% - 480px - 64px); transform: scaleX(-1); }

/* On narrow viewports, hide the side frames rather than overlap the content. */
@media (max-width: 1100px) {
    .public-frame { display: none; }
}

/* ── Centered content column (960px incl. frames, parchment core) ───────── */

.public-page {
    width: 960px;
    max-width: 100%;
    margin: 0 auto;
    background-color: var(--public-parchment);
    background-image: url('/img/parchment-tile.jpg?v=3');
    background-size: 512px 512px;
    position: relative;
    z-index: 1;
    border-left:  1px solid oklch(0.15 0.02 25);
    border-right: 1px solid oklch(0.15 0.02 25);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Banner (with wordmark, no copyrighted imagery) ─────────────────────── */

.public-banner {
    height: 260px;
    background: url('/img/banner.jpg?v=3') no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
    /* Seamless transition to the ribbon — no hard border, let the ribbon provide the seam. */
}
.public-banner-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 22%;     /* nudge logo right of center to balance the castle on the left */
    pointer-events: none;
}
.public-banner-title {
    display: block;
    width: 640px;
    max-width: 85%;
    height: 180px;
    background: url('/img/logo.png?v=3') no-repeat center center;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.85))
            drop-shadow(0 0 24px rgba(0,0,0,0.5));
}
.public-banner-tag,
.public-banner-sub {
    display: none;                  /* the logo asset carries the wordmark + "A 7.6 REALM" line */
}

/* ── Red ribbon strip under the banner ──────────────────────────────────── */

.public-ribbon {
    background:
        linear-gradient(180deg,
            oklch(0.38 0.14 25) 0%,
            oklch(0.28 0.13 25) 50%,
            oklch(0.16 0.12 25) 100%);
    color: oklch(0.97 0.04 75);
    text-align: center;
    font-size: var(--size-2xs);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 6px 0;
    border-top:    1px solid oklch(0.50 0.14 25);
    border-bottom: 1px solid oklch(0.10 0.10 25);
    box-shadow:
        0 -1px 0 oklch(0 0 0 / 0.6) inset,     /* top inner shadow separates from banner */
        0 1px 0 oklch(0.58 0.15 25) inset;     /* top inner highlight for the carved feel */
    text-shadow: 0 1px 0 oklch(0 0 0 / 0.65);
}

/* ── Horizontal top nav (dot-separated links) ───────────────────────────── */

.public-nav {
    background: var(--public-frame);
    color: var(--public-on-header);
    padding: 4px var(--space-md);
    text-align: center;
    font-size: var(--size-2xs);
    border-bottom: 1px solid #000;
}
.public-nav a {
    color: var(--public-on-header);
    text-decoration: none;
    padding: 0 var(--space-xs);
}
.public-nav a:hover { text-decoration: underline; }
.public-nav a + a::before {
    content: "·";
    color: oklch(0.62 0 0);
    margin-right: var(--space-xs);
    margin-left: calc(var(--space-xs) * -1);
}

/* ── Body = left sidebar + main content ─────────────────────────────────── */

.public-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0;
    flex: 1;
}

.public-sidebar {
    background:
        linear-gradient(180deg,
            oklch(0.88 0.05 75) 0%,
            oklch(0.82 0.06 75) 100%);
    border-right: 1px solid oklch(0.55 0.05 75);
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.public-side-block {
    border: 1px solid oklch(0.55 0.05 75);
    background: var(--public-parchment);
}
.public-side-head {
    background: linear-gradient(180deg,
        oklch(0.38 0.13 25) 0%,
        oklch(0.22 0.13 25) 100%);
    color: var(--public-on-header);
    font-weight: 700;
    font-size: var(--size-xs);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-bottom: 1px solid oklch(0.12 0.10 25);
    box-shadow:
        0 1px 0 oklch(0.52 0.14 25) inset,
        0 -1px 0 oklch(0 0 0 / 0.35) inset;
    text-shadow: 0 1px 0 oklch(0 0 0 / 0.6);
}
.public-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.public-side-list li {
    position: relative;
    padding: 6px 10px 6px 34px;
    border-bottom: 1px solid color-mix(in oklch, var(--public-rule) 30%, transparent);
    font-size: var(--size-2xs);
    min-height: 28px;
    line-height: 18px;
}
.public-side-list li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('/img/sidebar-icons.png?v=3');
    background-repeat: no-repeat;
    background-size: 144px 24px;
    background-position: -1000px 0;
}
.public-side-list li:last-child { border-bottom: 0; }

.public-side-list li.ico-scroll::before    { background-position:    0 0; }
.public-side-list li.ico-brazier::before   { background-position: -24px 0; }
.public-side-list li.ico-helmet::before    { background-position: -48px 0; }
.public-side-list li.ico-banner::before    { background-position: -72px 0; }
.public-side-list li.ico-house::before     { background-position: -96px 0; }
.public-side-list li.ico-tombstone::before { background-position: -120px 0; }
.public-side-list a { display: block; color: var(--public-link); text-decoration: none; }
.public-side-list a:hover { text-decoration: underline; }
.public-side-muted { color: var(--public-ink-soft); font-style: italic; }

/* ── Main content area ──────────────────────────────────────────────────── */

.public-main {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ── Panels (three-piece header: left cap + body + right cap) ───────────── */

.public-panel {
    border: 1px solid oklch(0.25 0.05 25);
    background: var(--public-parchment);
    background-image: url('/img/parchment-tile.jpg?v=3');
    background-size: 512px 512px;
    box-shadow: 0 1px 0 oklch(1 0 0 / 0.4) inset;
}

.public-panel-head {
    display: flex;
    align-items: stretch;
    height: 36px;                     /* taller so the new chunkier caps have room to breathe */
    background: transparent;
    padding: 0;
    margin: 0;
}
.public-panel-head::before,
.public-panel-head::after {
    content: "";
    width: 32px;
    flex: 0 0 32px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 32px 36px;
}
.public-panel-head::before { background-image: url('/img/header-cap-left.svg'); }
.public-panel-head::after  { background-image: url('/img/header-cap-right.svg'); }

.public-panel-head-title {
    flex: 1 1 auto;
    background:
        linear-gradient(180deg,
            oklch(0.42 0.15 25) 0%,
            oklch(0.30 0.14 25) 50%,
            oklch(0.18 0.13 25) 100%);
    color: var(--public-on-header);
    font-family: var(--font-public-head);
    font-weight: 700;
    font-size: var(--size-md);
    letter-spacing: 0.03em;
    line-height: 36px;
    padding: 0 var(--space-md);
    text-shadow: 0 1px 0 oklch(0 0 0 / 0.65);
    border-top:    1px solid oklch(0.52 0.15 25);
    border-bottom: 1px solid oklch(0.12 0.10 25);
}

.public-panel-body {
    padding: var(--space-sm) var(--space-md);
}
.public-panel-body p {
    max-width: 65ch;
    margin: 0 0 var(--space-sm);
}
.public-panel-body p:last-child { margin-bottom: 0; }

.public-empty {
    color: var(--public-ink-soft);
    font-style: italic;
    text-align: center;
    padding: var(--space-md) 0;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

.public-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-2xs);
    font-family: var(--font-public);
}
.public-table thead th {
    background: var(--public-parchment-tan);
    color: var(--public-ink);
    text-align: left;
    font-weight: 700;
    padding: 4px 8px;
    border-bottom: 1px solid oklch(0.45 0.05 75);
}
.public-table tbody td {
    padding: 3px 8px;
    border-bottom: 1px solid color-mix(in oklch, var(--public-rule) 35%, transparent);
}
.public-table tbody tr:nth-child(even) td { background: var(--public-parchment-alt); }
.public-table tbody tr:hover td           { background: oklch(0.85 0.07 75); }
.public-table tbody tr:last-child td      { border-bottom: 0; }
.public-table .num                        { text-align: right; font-variant-numeric: tabular-nums; }

/* Key/value table (character profile, server status) */
.public-kv {
    border-collapse: collapse;
    font-size: var(--size-xs);
}
.public-kv td {
    padding: 3px 12px 3px 0;
    vertical-align: top;
}
.public-kv td:first-child {
    color: var(--public-ink-soft);
    white-space: nowrap;
    padding-right: var(--space-lg);
}

/* Inline form (character search) */
.public-inline-form {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
}
.public-inline-form label { color: var(--public-ink-soft); }
.public-inline-form input[type="text"] {
    background: oklch(0.98 0.01 75);
    color: var(--public-ink);
    border: 1px solid var(--public-rule);
    padding: 4px 8px;
    font: inherit;
    min-width: 220px;
}
.public-inline-form input[type="text"]:focus {
    outline: none;
    border-color: var(--public-accent);
}
.public-toolbar {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}
.public-pager {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    font-size: var(--size-2xs);
}
.public-pager a {
    padding: 2px 8px;
    border: 1px solid var(--public-rule);
    background: var(--public-parchment-alt);
}
.public-pager a:hover {
    background: var(--public-parchment-tan);
    text-decoration: none;
}
.public-submit {
    background: linear-gradient(180deg, oklch(0.38 0.14 25) 0%, oklch(0.22 0.13 25) 100%);
    color: var(--public-on-header);
    border: 1px solid oklch(0.12 0.10 25);
    padding: 5px 14px;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
}
.public-submit:hover { filter: brightness(1.1); }

/* Tabs under a panel header */
.public-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--public-rule);
}
.public-tab {
    color: var(--public-ink);
    background: var(--public-parchment-alt);
    border: 1px solid var(--public-rule);
    border-bottom: none;
    padding: 4px 10px;
    text-decoration: none;
    font-size: var(--size-xs);
}
.public-tab:hover { background: var(--public-parchment-tan); text-decoration: none; }
.public-tab.is-active {
    background: var(--public-header-red);
    color: var(--public-on-header);
    border-color: oklch(0.12 0.10 25);
    text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
}
.public-tab.is-active:visited,
.public-tab.is-active:hover {
    color: var(--public-on-header);
}

.public-tabs-sub {
    margin-top: var(--space-sm);
    margin-bottom: 0;
}

.public-subtle { color: var(--public-ink-soft); font-style: italic; }

/* ── Links ──────────────────────────────────────────────────────────────── */

.public-root a {
    color: var(--public-link);
    text-decoration: none;
}
.public-root a:hover    { text-decoration: underline; }
.public-root a:visited  { color: var(--public-link-visited); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.public-footer {
    background: linear-gradient(180deg, oklch(0.18 0 0), oklch(0.08 0 0));
    color: oklch(0.78 0 0);
    text-align: center;
    font-size: var(--size-2xs);
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid oklch(0.30 0 0);
    line-height: 1.5;
}
.public-footer a { color: oklch(0.85 0 0); }
.public-footer-fine {
    color: oklch(0.55 0 0);
    font-size: 10px;
    margin-top: 4px;
}

/* ── Narrow viewport tweaks ─────────────────────────────────────────────── */

@media (max-width: 720px) {
    .public-body { grid-template-columns: 1fr; }
    .public-sidebar { order: 2; border-right: 0; border-top: 1px solid oklch(0.55 0.05 75); }
}