/* ============================================================
 * Tabletop styling pass. Mobile-first responsive rules below
 * still apply; this layer just changes typography, colors, and
 * texture to give the site a hand-crafted, parchment feel —
 * never gradients.
 *
 * Tweak the palette by editing the CSS custom properties below.
 * ========================================================== */

:root {
    --parchment:        #f0e3c4;
    --parchment-soft:   #f6ecd1;
    --parchment-edge:   #d9c393;
    --ink:              #2c1d0e;
    --ink-muted:        #6b4f2e;
    --leather:          #5d3a1a;
    --leather-dark:     #3f2510;
    --burgundy:         #7a1b1b;
    --burgundy-dark:    #5a1010;
    --gold:             #9c7a25;
    --gold-soft:        #c9a44a;
    --panel-shadow:     rgba(60, 36, 12, 0.20);
}

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

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

body {
    margin: 0;
    font-family: 'IM Fell DW Pica', 'EB Garamond', Georgia, serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    background-color: var(--parchment);
    /* Subtle paper grain — inline SVG fractal noise, no asset to ship. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.30 0 0 0 0 0.15 0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-repeat: repeat;
}

a {
    color: var(--burgundy);
    text-decoration-color: var(--gold-soft);
    text-underline-offset: 2px;
}
a:hover { color: var(--burgundy-dark); }

h1, h2, h3, h4 {
    font-family: 'Cinzel', 'IM Fell DW Pica', Georgia, serif;
    color: var(--leather-dark);
    letter-spacing: 0.04em;
    margin: 0 0 0.65rem;
    line-height: 1.2;
}
h1 {
    font-size: 1.7rem;
    border-bottom: 1px solid var(--parchment-edge);
    padding-bottom: 0.4rem;
}
h2 { font-size: 1.35rem; margin-top: 1.2rem; }
h3 { font-size: 1.1rem; margin-top: 0.9rem; }

p { margin: 0 0 0.75rem; }

/* Hand-drawn wavy divider — inline SVG so we don't need an asset. */
hr {
    border: 0;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'><path d='M0 6 Q 30 1 60 6 T 120 6 T 180 6 T 240 6' fill='none' stroke='%235d3a1a' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    margin: 1.5rem 0;
    opacity: 0.7;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--parchment-soft);
    color: var(--ink);
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--parchment-edge);
    border-radius: 3px;
    font-size: 0.92em;
}

/* ---------- Form controls ---------- */

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    font-size: 16px;
    padding: 0.55rem 0.7rem;
    background: var(--parchment-soft);
    border: 1px solid var(--ink-muted);
    border-radius: 3px;
    width: 100%;
    color: var(--ink);
    box-shadow: inset 0 1px 2px rgba(60, 36, 12, 0.08);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--leather);
    box-shadow: 0 0 0 2px rgba(156, 122, 37, 0.25);
}

button {
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    background: var(--leather);
    color: var(--parchment-soft);
    border: 1px solid var(--leather-dark);
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.15),
                0 1px 2px var(--panel-shadow);
}
button:hover { background: var(--burgundy); border-color: var(--burgundy-dark); }
button:active {
    background: var(--leather-dark);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}

.app-field { margin-bottom: 0.9rem; }
.app-field label {
    display: block;
    margin-bottom: 0.25rem;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--leather-dark);
}

.app-error {
    background: #faeae6;
    border: 1px solid var(--burgundy);
    color: var(--burgundy-dark);
    padding: 0.5rem 0.75rem;
    border-radius: 3px;
    margin-bottom: 0.75rem;
}
.app-notice {
    background: #f0eccc;
    border: 1px solid var(--gold);
    color: var(--leather-dark);
    padding: 0.5rem 0.75rem;
    border-radius: 3px;
    margin-bottom: 0.75rem;
}

/* ---------- Header ---------- */

.app-header {
    background: var(--parchment-soft);
    border-bottom: 3px double var(--leather);
    padding: 0.6rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: center;
    justify-content: space-between;
}
.app-header__brand {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--leather-dark);
}
.app-header__brand a { color: inherit; text-decoration: none; }

.app-header__nav,
.app-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    align-items: center;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.app-header__nav a,
.app-header__meta a {
    color: var(--burgundy);
    text-decoration: none;
    border-bottom: 1px dotted var(--gold-soft);
    padding-bottom: 1px;
}
.app-header__nav a:hover,
.app-header__meta a:hover {
    color: var(--burgundy-dark);
    border-bottom-color: var(--burgundy);
}
.app-header__meta em {
    color: var(--gold);
    font-style: normal;
}

/* ---------- Layout ---------- */

main.app-main {
    max-width: 50rem;
    margin: 1.5rem auto;
    padding: 1.5rem 1.75rem;
    background: var(--parchment-soft);
    border: 1px solid var(--parchment-edge);
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255, 248, 220, 0.6) inset,
                0 2px 8px var(--panel-shadow);
}
.app-main--narrow { max-width: 28rem; }

/* ---------- Chat ---------- */

.chat-box {
    border: 1px solid var(--parchment-edge);
    background: var(--parchment);
    border-radius: 3px;
    padding: 0.6rem 0.85rem;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: inset 0 1px 3px var(--panel-shadow);
}
.chat-form { margin-top: 0.85rem; display: flex; gap: 0.5rem; }
.chat-form input { flex: 1; }
.chat-list { list-style: none; padding: 0; margin: 0; }
.chat-item {
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--parchment-edge);
}
.chat-item:last-child { border-bottom: none; }
.chat-author {
    color: var(--burgundy);
    font-weight: 700;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.03em;
}
.chat-time {
    color: var(--ink-muted);
    font-size: 0.82em;
    font-style: italic;
    margin-left: 0.5rem;
}
.chat-body {
    margin-top: 0.1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.chat-empty {
    color: var(--ink-muted);
    font-style: italic;
    margin: 0.5rem 0;
}
.chat-admin-tools {
    margin-top: 0.75rem;
    font-size: 0.85em;
    font-style: italic;
    text-align: right;
}

/* ---------- Wiki ---------- */

.wiki-list { list-style: none; padding: 0; margin: 0; }
.wiki-list__item {
    padding: 0.5rem 0;
    border-bottom: 1px dotted var(--parchment-edge);
}
.wiki-list__item a {
    font-family: 'Cinzel', serif;
    font-weight: 500;
    letter-spacing: 0.03em;
    font-size: 1.05rem;
}
.wiki-list__meta {
    display: block;
    color: var(--ink-muted);
    font-size: 0.85em;
    font-style: italic;
}

.wiki-breadcrumb {
    margin: 0 0 0.5rem;
    font-size: 0.9em;
    font-style: italic;
}
.wiki-meta {
    color: var(--ink-muted);
    font-size: 0.9em;
    font-style: italic;
}

.wiki-body { line-height: 1.7; word-wrap: break-word; overflow-wrap: anywhere; }
.wiki-body img { max-width: 100%; height: auto; }
.wiki-body pre {
    background: var(--parchment);
    border: 1px solid var(--parchment-edge);
    border-radius: 3px;
    padding: 0.6rem 0.85rem;
    overflow-x: auto;
    color: var(--ink);
}
.wiki-body code { font-size: 0.92em; }
.wiki-body pre code { background: transparent; padding: 0; border: 0; }
.wiki-body blockquote {
    border-left: 3px solid var(--gold-soft);
    margin: 0.6rem 0;
    padding: 0.1rem 0.85rem;
    color: var(--ink-muted);
    font-style: italic;
}
.wiki-body table {
    border-collapse: collapse;
    margin: 0.6rem 0;
    max-width: 100%;
}
.wiki-body th, .wiki-body td {
    border: 1px solid var(--ink-muted);
    padding: 0.35rem 0.55rem;
}
.wiki-body th {
    background: var(--parchment);
    font-family: 'Cinzel', serif;
    font-weight: 600;
}
.wiki-body h1::first-letter {
    /* Drop-cap on the first letter of an article. */
    font-family: 'Cinzel', serif;
    font-size: 1.6em;
    color: var(--burgundy);
}

.wiki-edit__body {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    min-height: 14rem;
    background: var(--parchment-soft);
}
.wiki-help { margin-top: 1rem; color: var(--ink-muted); }
.wiki-help summary {
    cursor: pointer;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.wiki-help pre {
    background: var(--parchment);
    border: 1px solid var(--parchment-edge);
    padding: 0.6rem 0.85rem;
    border-radius: 3px;
    margin-top: 0.5rem;
}

/* ---------- Small-screen tweaks ---------- */

@media (max-width: 480px) {
    body { font-size: 16px; }
    .app-header { padding: 0.5rem 0.75rem; }
    main.app-main {
        margin: 0.75rem auto;
        padding: 1rem 1rem;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    h1 { font-size: 1.4rem; }
    .chat-box { max-height: 55vh; }
}