/* ============================================================
 * base.css — flat layout, single file.
 *
 * Colors tuned for a small MC site: parchment + grass green +
 * bedrock grey. Reads cleanly on mobile and desktop.
 * ========================================================== */

:root {
    --bg:        #1f1d1a;
    --panel:     #2a2724;
    --panel-2:   #353129;
    --line:      #4a443c;
    --text:      #ece6dc;
    --muted:     #a59f93;
    --accent:    #6ab04c;   /* grass green */
    --accent-2:  #8fce6e;
    --danger:    #e07a5f;
    --warn:      #f2cc8f;
    --mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    color: var(--text);
    font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

body {
    background: var(--bg) url("/img/bg1.jpg") center / cover no-repeat;
    background-attachment: fixed;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

code { font-family: var(--mono); background: var(--panel-2); padding: 1px 5px; border-radius: 3px; }

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

/* ---------- topbar ---------- */
.topbar {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 10;
}
.topbar-inner {
    max-width: 980px; margin: 0 auto; padding: 12px 18px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 1.1rem; color: var(--accent-2); }
.nav { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.nav a { color: var(--text); }
.nav a:hover { color: var(--accent-2); text-decoration: none; }

/* ---------- main ---------- */
.main { max-width: 980px; margin: 24px auto; padding: 24px 24px 48px; background: var(--panel); border-radius: 6px; }

h1 { margin: 0 0 12px; font-size: 1.8rem; }
h2 { margin: 24px 0 10px; font-size: 1.3rem; }
h3 { margin: 18px 0 8px; font-size: 1.1rem; }
p  { margin: 8px 0; }

/* ---------- hero card ---------- */
.hero-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}
.hero-card h1 { margin-top: 0; }
.hero-tag { color: var(--muted); margin-top: 0; }

.server-line {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--panel-2); border: 1px solid var(--line);
    padding: 10px 14px; border-radius: 6px; margin: 14px 0;
}
.server-line .lbl { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.server-line code { font-size: 1.1rem; background: transparent; padding: 0; color: var(--accent-2); }

.copy-btn {
    background: var(--accent); color: #0c1a06; border: none;
    padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: 600;
}
.copy-btn:hover { background: var(--accent-2); }

/* ---------- status widget ---------- */
.status-widget {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 16px;
}
.status-widget[data-state="loading"] .big { color: var(--muted); }
.status-widget[data-state="error"]   .big { color: var(--danger); }

.status-count { display: flex; align-items: baseline; gap: 8px; }
.status-count .big { font-size: 2.4rem; font-weight: 700; }
.status-count .of { color: var(--muted); }
.status-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; color: var(--muted); font-size: 0.85rem; }
.status-error { color: var(--danger); }

.refresh-btn {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
}
.refresh-btn:hover { background: var(--panel-2); border-color: var(--accent); color: var(--accent-2); }
.refresh-btn:disabled { opacity: 0.5; cursor: progress; }
.refresh-btn.is-loading { animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.status-list-wrap { margin-top: 10px; }
.status-list-wrap summary { cursor: pointer; color: var(--muted); }
.online-list { columns: 2; column-gap: 24px; margin: 8px 0 0; padding: 0; list-style: none; }
.online-list li { padding: 2px 0; break-inside: avoid; }

/* ---------- cards / grid ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 18px; }
.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .grid.two { grid-template-columns: 1fr; } }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.join-steps { padding-left: 22px; }
.join-steps li { margin: 6px 0; }

/* ---------- articles ---------- */
.article-list { list-style: none; padding: 0; margin: 8px 0; }
.article-list li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.article-list li:last-child { border-bottom: none; }
.article-summary { color: var(--muted); margin: 4px 0 0; font-size: 0.9rem; }

/* ---------- feed (home page chronological list) ---------- */
.feed-list { list-style: none; padding: 0; margin: 8px 0 0; }
.feed-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.feed-item:last-child { border-bottom: none; }
.feed-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    text-decoration: none !important;
}
.feed-title { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.feed-link:hover .feed-title { color: var(--accent-2); }
.feed-meta { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.feed-summary { margin: 4px 0 0; color: var(--muted); font-size: 0.95rem; }

/* ---------- thumbs (left-side thumbnail on feed + category list) ----------
   Two sources, both rendered as a fixed square on the LEFT:
     1. thumb = relative path to /img/* or /img/category/* file → <img>
     2. emoji = single emoji glyph               → <span class="emoji">
   The wrapper is always .thumb; the inner tag is either .thumb-img or .thumb-emoji.
   Sized at 72px so it sits comfortably next to one or two text lines without
   pushing the title out of the column on the home feed. The category list uses
   a slightly smaller 56px because there are more rows and vertical density matters. */
.thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--panel-2);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}
.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.thumb-emoji {
    font-size: 2.2rem;
    line-height: 1;
    /* emoji glyphs render at the OS-native color font; this just keeps them centered */
    user-select: none;
}

/* feed-item becomes a 2-col layout: thumb on the left, text on the right.
   The link wraps around the title row only (the original markup), the summary
   sits below in the same right column. */
.feed-item {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.feed-item .feed-body {
    flex: 1 1 auto;
    min-width: 0;
}
.feed-item .feed-link { width: 100%; }

/* category-index list gets the same treatment, slightly smaller thumb */
.article-list li { display: flex; align-items: flex-start; gap: 0; }
.article-list li .article-body { flex: 1 1 auto; min-width: 0; }
.article-list .thumb { width: 56px; height: 56px; margin-right: 12px; }
.article-list .thumb-emoji { font-size: 1.7rem; }
.article-list li a { display: block; }   /* keep title on its own line under the thumb */

/* ---------- players page ---------- */
.page-header { margin-bottom: 24px; }
.players-section { margin-bottom: 32px; }
.players-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 6px 24px;
}
.players-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px dashed var(--line);
}
.player-name { font-weight: 500; }
.player-meta { color: var(--muted); font-size: 0.85rem; }
.player-online .player-name::before {
    content: '●';
    color: var(--accent);
    margin-right: 6px;
    font-size: 0.7em;
    vertical-align: middle;
}

/* Player+ only: secondary "bio" link to the curated /profile/<nickname>
 * endpoint. Sits inline next to the name on the same line, separated
 * by a "|" glyph (.player-name-sep). Same muted color as .player-meta
 * so it doesn't compete with the primary /detailed link. */
.player-bio-link {
    color: var(--muted);
    font-size: 0.8rem;
    text-decoration: none;
    border-bottom: 1px dotted var(--line);
    padding-bottom: 1px;
}
.player-bio-link:hover {
    color: var(--accent-2);
    border-bottom-color: var(--accent-2);
}
/* Literal "|" separator between the primary /detailed link and the
 * bio /profile link. Slightly muted, no extra weight, sits inline
 * between the two anchors. */
.player-name-sep {
    color: var(--muted);
    margin: 0 6px;
    font-weight: normal;
    user-select: none;
}
/* /players+ adds a "detailed" hint to the primary link via class —
 * same color as the public link, but underlined-on-hover so it's
 * clear they're not the same destination. */
.player-name-detailed:hover {
    text-decoration: underline;
}
/* Player name link uses an inline color set by player_name_color()
 * (PHP) / playerNameColor() (JS). Smooth the transition so the
 * live-refresh swap and any future range-boundary hover changes
 * animate instead of jumping. */
a.player-name-link {
    transition: color 200ms ease;
}


/* ---------- playtime legend (public /players) ----------
 * Visualizes the same color math as player_name_color() so visitors
 * can decode what color means what playtime. Anchors + tick layout
 * matches plans/playtime_color_ranges.md.
 */
.playtime-legend {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}
.playtime-legend h3 {
    margin: 0 0 10px;
    font-size: 1.0rem;
    color: var(--accent-2);
}
.playtime-gradient {
    /* Equal-width visual stops. Six anchor colors occupy six equal
     * slots across the bar (each 20% wide), matching the label X
     * positions below so labels sit centered on their anchor's
     * solid-color band. Within each segment: hold the anchor across
     * 70% of its width, midpoint-lerp at 85%, transition to the next
     * anchor at 100%. Each anchor is visibly identifiable AND each
     * transition still blends smoothly.
     *
     * The actual playtime tick->color mapping (in player_name_color)
     * is NOT equal-width on a linear scale — it's log-compressed
     * because 0..600s and 600..3600s and 3600..7200s etc. live at
     * very different points in time. The bar here is a visual legend,
     * not a data plot, so equal-width stops serve it better.
     *
     * Anchors (same as player_name_color): see plans/playtime_color_ranges.md. */
    height: 24px;
    border-radius: 3px;
    border: 1px solid var(--line);
    background: linear-gradient(to right, #5c5c5c 0.00%, #988653 17.00%, #d4b04a 20.00%, #97ac55 37.00%, #5aa860 40.00%, #4a908c 57.00%, #3a78b8 60.00%, #485cb0 77.00%, #5540a8 80.00%, #783da8 97.00%, #9b3aa8 100.00%);
}
/* Wrap the gradient so labels can sit on top of it. .playtime-gradient
 * becomes the absolute-positioned background bar; the labels container
 * overlays at the same height with position:absolute spans pinned to
 * the X positions matching the gradient stops (log2(1+sec*0.005) scale,
 * same math as the gradient itself). */
.playtime-gradient-wrap {
    position: relative;
    width: 100%;
}
.playtime-gradient-wrap .playtime-gradient {
    position: relative; /* not absolute — bar still flows in the layout */
    height: 24px;
}
.playtime-gradient-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.gradient-label {
    position: absolute;
    top: 50%;
    /* Default: horizontally centered on its anchor position. */
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    /* White text with a layered text-shadow that paints a soft outline so
     * the label stays legible against any gradient color (grey, yellow,
     * green, blue, indigo, violet). Each shadow layer adds a half-pixel
     * stroke around every glyph; multiple layers blur into a 1px halo. */
    color: #fff;
    text-shadow:
        0 0 1px rgba(0, 0, 0, 0.95),
        0 0 2px rgba(0, 0, 0, 0.85),
        1px 1px 1px rgba(0, 0, 0, 0.9),
        -1px -1px 1px rgba(0, 0, 0, 0.9),
        1px -1px 1px rgba(0, 0, 0, 0.9),
        -1px 1px 1px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* Edge labels align flush: '0 min' (left=0) hugs the left edge; '24 h'
 * (left=100%) hugs the right. Otherwise centered labels at the boundary
 * would be half-clipped by the gradient wrap. */
.gradient-label.align-left  { transform: translate(3px, -50%); }
.gradient-label.align-right { transform: translate(calc(-100% - 3px), -50%); }

.playtime-ticks {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}
.playtime-ticks li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--text);
}
.tick-marker {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid var(--line);
}
.tick-label {
    font-weight: 500;
}
.tick-name {
    color: var(--muted);
    font-size: 0.78rem;
}
.playtime-note {
    margin-top: 12px;
    font-size: 0.85rem;
}

/* ---------- server info card (compact) ---------- */
.kv-extra { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 0.9rem; }

/* "What's the vibe" list inside the Server card. Sits between the
 * kv data and the Joining guide link. Kept tight so the card doesn't
 * get visually bloated — same color hierarchy as the kv (muted
 * label / accent-2 emphasis where it helps). */
.server-vibe {
    margin: 8px 0 14px;
    padding-left: 20px;
    list-style: disc;
}
.server-vibe li {
    padding: 2px 0;
    font-size: 0.92rem;
}

.article { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 28px; }
.article-header { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 16px; row-gap: 8px; }
.article-header .article-cat { grid-column: 1; grid-row: 1; }
.article-header .article-thumb-block { grid-column: 2; grid-row: 1; margin: 0; }
.article-header h1 { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.article-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--line); }
.article-footer .article-meta { margin: 0; }
.article-thumb-block .thumb { width: 72px; height: 72px; margin: 0; background: rgba(53, 49, 41, 0.36); border-color: transparent; }

/* ---------- profile page (two-column top, full-width sections below) ---------- */
.profile-top {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
}
.profile-meta {
    flex: 1 1 auto;
    min-width: 0;   /* allow text to shrink so long names wrap instead of overflow */
}
.profile-meta .article-cat { margin: 0 0 4px; }
.profile-meta h1 { margin: 0 0 16px; }
.profile-section-inline {
    /* The Overview section lives inside the left column. No top border —
    it visually belongs with the heading above it, not as a separate
    card. */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}
.profile-section-inline h2 {
    /* Smaller h2 inside the left column — feels like a label, not a section */
    font-size: 1rem;
    margin: 0 0 8px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.profile-avatar-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}
.profile-avatar {
    width: auto;
    height: auto;
    max-width: 160px;
    image-rendering: pixelated;   /* Minecraft pixel art looks better crisp */
    border-radius: 4px;
}
/* Narrow viewport: stack the columns vertically so the layout doesn't
   squish text beside the avatar. */
@media (max-width: 640px) {
    .profile-top { flex-direction: column; }
    .profile-avatar-wrap { justify-content: flex-start; }
}
.article-thumb-block .thumb-emoji { font-size: 2.2rem; }
.article-cat { color: var(--accent-2); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; margin: 0; }
.article-cat a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--accent-2); padding-bottom: 1px; }
.article-cat a:hover { border-bottom-style: solid; }
.article-meta { color: var(--muted); font-size: 0.85rem; margin: 0 0 16px; }
.article-body h1, .article-body h2, .article-body h3 { margin-top: 18px; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body code { background: var(--panel-2); padding: 2px 6px; border-radius: 3px; }
.article-body pre { background: var(--panel-2); padding: 12px; border-radius: 6px; overflow: auto; }
.back-link { margin-top: 20px; }

/* ---------- contact form ---------- */
.contact-form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.contact-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--muted); }
.contact-form input, .contact-form textarea, .contact-form select {
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-radius: 4px;
    padding: 8px 10px; font: inherit;
}
.contact-form button {
    align-self: flex-start; background: var(--accent); color: #0c1a06;
    border: none; padding: 10px 18px; border-radius: 4px; cursor: pointer;
    font-weight: 600;
}
.contact-form button:hover { background: var(--accent-2); }
.contact-form .hp { position: absolute; left: -9999px; opacity: 0; }
.flash { background: var(--panel-2); border-left: 3px solid var(--accent); padding: 10px 14px; }

/* ---------- donate button ---------- */
.donate-btn {
    display: inline-block;
    background: #ffc439;          /* PayPal-ish yellow */
    color: #003087 !important;    /* PayPal-ish dark blue */
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none !important;
}
.donate-btn:hover { background: #ffb73d; }

/* ---------- footer ---------- */
.footer { text-align: center; color: var(--muted); padding: 32px 18px; margin: 24px auto 0; max-width: 980px; background: var(--panel); border-radius: 6px; }
.footer-meta { font-size: 0.85rem; }
.footer code { background: transparent; padding: 0; }
/* ---------- admin badge (Players+ header) ---------- */
.admin-badge {
    display: inline-block;
    background: var(--accent);
    color: #0c1a06;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
    margin-left: 6px;
}

/* ---------- mask badge (rows that are masked in public view) ---------- */
.mask-badge {
    display: inline-block;
    background: var(--warn);
    color: #2a1a00;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 6px;
    vertical-align: middle;
}
.is-masked .player-name { font-style: italic; }

/* ---------- players+ table ---------- */
.players-plus-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}
.players-plus-table th,
.players-plus-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: 0.92rem;
}
.players-plus-table th {
    background: var(--panel-2);
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}
.players-plus-table tr:last-child td { border-bottom: none; }
.players-plus-table tr.is-masked { background: rgba(242, 204, 143, 0.06); }

/* ---------- admin tickets table (contact inbox) ---------- */
.tickets-table { table-layout: auto; }
.tickets-table .ticket-when    { white-space: nowrap; width: 110px; }
.tickets-table .ticket-cat     { white-space: nowrap; }
.tickets-table .ticket-from    { white-space: nowrap; }
.tickets-table .ticket-preview { color: var(--muted); font-size: 0.9rem; }
.ticket-cat {
    display: inline-block;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--line);
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 0.8rem;
}
.ticket-cat-chip {
    display: inline-block;
    background: var(--panel-2);
    color: var(--muted);
    border: 1px solid var(--line);
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 0.75rem;
    margin-right: 6px;
}
.ticket-toggle {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
}
.ticket-toggle:hover { background: var(--panel-2); border-color: var(--accent); }
.ticket-toggle[aria-expanded="true"] { background: var(--panel-2); color: var(--accent-2); }
.ticket-detail td { padding: 14px 12px; background: rgba(106, 176, 76, 0.04); }
.ticket-detail-body h4 { margin: 0 0 8px; font-size: 0.95rem; color: var(--accent-2); }
.ticket-body {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 12px;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--mono);
    font-size: 0.88rem;
    color: var(--text);
    max-height: 320px;
    overflow: auto;
}

/* ---------- ticket actions column (toggle + delete buttons) ---------- */
.ticket-actions {
    white-space: nowrap;
    width: 1%;
    text-align: right;
}
.ticket-actions .refresh-btn { margin-left: 4px; }
.ticket-delete {
    color: var(--muted);
    border-color: var(--line);
}
.ticket-delete:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

/* ---------- confirmation popup ---------- */
.ticket-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.ticket-confirm {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 22px 24px;
    max-width: 440px;
    width: calc(100% - 36px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.ticket-confirm h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: var(--text);
}
.ticket-confirm p {
    margin: 0 0 18px;
    line-height: 1.45;
    white-space: pre-line;
    color: var(--muted);
    font-size: 0.92rem;
}
.ticket-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.ticket-confirm-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.ticket-confirm-danger:hover {
    background: #c4644c;
    border-color: #c4644c;
}

/* ---------- toast ---------- */
.ticket-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--accent);
    border-left-width: 3px;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 0.9rem;
    z-index: 110;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    max-width: 360px;
    animation: ticket-toast-in 0.15s ease-out;
}
.ticket-toast.is-error {
    border-color: var(--danger);
}
@keyframes ticket-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- detailed forensics page ---------- */
/* Used by /detailed/<nickname>. Mirrors .article chrome but with
 * per-section spacing tuned for the four forensics sources. */

.detailed {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 28px;
}

.detailed h1 {
    margin: 0 0 6px;
}

.detailed .article-cat {
    margin: 0 0 6px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
}

.detailed-section {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}

.detailed-section:first-of-type {
    border-top: none;
    padding-top: 8px;
}

.detailed-section h2 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    color: var(--accent-2);
}

.detailed-section h2 .muted {
    font-weight: normal;
    font-size: 0.85rem;
    margin-left: 6px;
}

.detailed-collapse {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel-2);
}

.detailed-collapse summary {
    padding: 8px 14px;
    cursor: pointer;
    color: var(--text);
    font-weight: 500;
    list-style-position: inside;
}

.detailed-collapse[open] summary {
    border-bottom: 1px dashed var(--line);
}

.detailed-collapse table.detailed-table,
.detailed-collapse table.kv {
    margin: 8px 14px 14px;
    max-width: calc(100% - 28px);
}

.detailed-collapse table.detailed-table th,
.detailed-collapse table.detailed-table td,
.detailed-collapse table.kv th,
.detailed-collapse table.kv td {
    padding: 4px 8px;
    font-size: 0.88rem;
}

.adv-list {
    list-style: none;
    padding: 8px 14px 14px;
    margin: 0;
    column-width: 320px;
    column-gap: 12px;
}

.adv-list li {
    padding: 2px 0;
    font-size: 0.85rem;
}

/* Standalone table style for the Plan sessions / kill-history /
 * nicknames tables. The .kv class on <dl> elements is grid-based;
 * we use this class on <table> so display falls back to table layout
 * (rows stack horizontally, headers in a <thead>, etc.). */
.detailed-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.88rem;
}

.detailed-table th,
.detailed-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.detailed-table thead th {
    border-bottom: 2px solid var(--line);
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.detailed-table tbody tr:last-child td {
    border-bottom: none;
}

.detailed-table tbody tr:hover {
    background: rgba(106, 176, 76, 0.04);
}

.detailed .warn {
    color: var(--danger);
    font-weight: 600;
}

.detailed-errors ul {
    color: var(--danger);
}

.detailed-section .kv dd.muted,
.detailed-section .kv dd .muted {
    margin-left: 6px;
    font-weight: normal;
}