/* ============================================================
   Event Sections — CSS (D1: "The Codex")
   Extends the shared skill component system. Tokens/fonts/apparatus
   live in css/codex.css (event.php loads it). event.php sets an .ev-*
   class on .wrap, so section spines / pills / accents pick up the
   apparatus colour automatically.
   ============================================================ */

@import url('../skill/skill_sections.css');
@import url('../skill/skill_forms.css');

/* ---- Event header — dark editorial masthead, apparatus top rule ---- */
.eventHeader {
    background: linear-gradient(158deg, #23252e 0%, #14161c 100%);
    color: #f4f1ea;
    border: 1px solid #14161c;
    border-top: 4px solid var(--ev, var(--gold));
    border-radius: var(--r-lg);
}
.eventHeader .head { padding: 24px 24px 22px; border-bottom: none }
.eventHeader .title {
    margin: 0;
    font-family: var(--font-display); font-optical-sizing: auto;
    font-weight: 600; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.06;
    letter-spacing: -.015em; color: #fdfbf6;
}
.eventHeader .subtitle { color: rgba(244,241,234,.6); font-size: 15px; margin-top: 6px }
.eventHeader .breadcrumb {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
    text-transform: uppercase; color: rgba(244,241,234,.5); margin-bottom: 14px;
}
.eventHeader .breadcrumb a { color: var(--gold-bright); text-decoration: none }
.eventHeader .breadcrumb a:hover { color: #fff }
.eventHeader .breadcrumb .sep { color: rgba(244,241,234,.3) }
.eventHeader .headerActions { display: flex; gap: 8px; flex-shrink: 0 }
.eventHeader .headerBtn {
    display: inline-flex; align-items: center; gap: 4px;
    color: #f4f1ea; text-decoration: none; font-weight: 600; font-size: 12px;
    background: rgba(255,255,255,.1); padding: 7px 13px; border-radius: var(--r-sm);
    border: 1px solid rgba(255,255,255,.18); transition: background .15s;
}
.eventHeader .headerBtn:hover { background: rgba(255,255,255,.2) }

/* Event nav (apparatus of the page is fixed; tabs switch apparatus) */
.eventNav { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap }
.eventNav a {
    padding: 7px 14px; border-radius: var(--r-sm);
    background: rgba(255,255,255,.08); color: #f4f1ea; text-decoration: none;
    font-family: var(--font-display); font-optical-sizing: auto; font-size: 15px; font-weight: 600;
    border: 1px solid rgba(255,255,255,.16); transition: background .15s, border-color .15s;
}
.eventNav a:hover { background: rgba(255,255,255,.16) }
.eventNav a.active {
    /* X3: `--ev-on` follows the fill — white on an apparatus hue, dark ink on the gold fallback.
       The old flat #14161c scored 2.75:1 on Floor and 2.83:1 on Beam. See codex.css `.ev-*`. */
    background: var(--ev, var(--gold)); color: var(--ev-on, #14161c); border-color: transparent;
}

/* Quick stats */
.quickStats { display: flex; gap: 22px; margin-top: 18px; flex-wrap: wrap }
.quickStat { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: rgba(244,241,234,.65) }
.quickStat .num { font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--gold-bright) }

/* ---- Category labels ---- */
.categoryLabel {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: var(--paper-2); color: var(--ink-soft);
}
.categoryLabel.skill_requirement { background: var(--ev-bars-soft); color: var(--ev-bars); }
.categoryLabel.value_part { background: var(--gold-soft); color: var(--gold-deep); }
.categoryLabel.special_requirement { background: var(--ev-beam-soft); color: var(--ev-beam); }
.categoryLabel.time_limit { background: #ece3f2; color: #6d4b8a; }
.categoryLabel.sr_combination { background: var(--ev-floor-soft); color: var(--ev-floor); }
.categoryLabel.full_routine { background: var(--ev-bars-soft); color: var(--ev-bars); }

/* ---- Subsections within a section ---- */
.subsection { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line) }
.subsection:first-child { margin-top: 0; padding-top: 0; border-top: none }
.subsection-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px }
.subsection-title {
    font-family: var(--font-display); font-optical-sizing: auto;
    font-size: 16px; font-weight: 600; color: var(--ink);
}
.subsection-meta { display: flex; gap: 8px; align-items: center }
.subsection-meta .addBtn { background: var(--gold-soft); color: var(--gold-deep); border: 1px solid var(--gold-line) }
.subsection-meta .addBtn:hover { background: #f0e0b8 }
.subsection-meta .pillCount { background: var(--paper-2) !important; color: var(--ink-soft) !important; border: 1px solid var(--line) }

/* ---- Value-parts cards (was a purple gradient — now a warm value ramp) ---- */
.requirements-row { display: flex; gap: 20px; flex-wrap: wrap }
/* Columns in the row, not stacked sections — drop the divider/top-offset so
   Value Parts and Time Limits align at the same height. */
.requirements-row .subsection { flex: 1; min-width: 220px; margin-top: 0; padding-top: 0; border-top: none }
.value-parts-cards { display: flex; gap: 10px; flex-wrap: wrap }
.value-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: var(--r-md);
    padding: 14px 20px; text-align: center; min-width: 84px;
    box-shadow: var(--shadow-sm);
}
.value-card .count { font-family: var(--font-display); font-optical-sizing: auto; font-size: 30px; font-weight: 600; line-height: 1; color: var(--ink) }
.value-card .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 6px }

/* ---- Time-limit cards (was a green gradient — now clean cards) ---- */
.time-cards { display: flex; gap: 10px; flex-wrap: wrap }
.time-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 18px; text-align: center; min-width: 104px;
}
.time-card .time-value { font-family: var(--font-body); font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: var(--ink) }
.time-card .time-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 6px }

/* ---- Difficulty restrictions ---- */
.restrictions-list {
    margin: 0; padding: 14px 16px 14px 34px;
    background: var(--bad-soft); border-radius: var(--r-md);
    border-left: 4px solid var(--bad);
}
.restrictions-list li { color: #8a3320; margin-bottom: 6px }
.restrictions-list li:last-child { margin-bottom: 0 }

.static-content { padding: 12px 16px; background: var(--paper); border-radius: var(--r-md); font-size: 15px }

/* ---- Skills list in routines (monospace "spec sheet") ---- */
.skills-list-display {
    font-family: var(--font-mono); font-size: 12.5px;
    background: var(--paper); border: 1px solid var(--line);
    padding: 12px 14px; border-radius: var(--r-md); margin-top: 10px;
    white-space: pre-wrap; color: var(--ink-soft); line-height: 1.7;
}
.skills-list-display .skill-link {
    color: var(--gold-deep); font-weight: 700; text-decoration: none;
    border-bottom: 1px solid var(--gold-line);
}
.skills-list-display .skill-link:hover { border-bottom-color: var(--gold) }

/* ============================================================
   YouTube embed
   ============================================================ */
.youtube-embed {
    position: relative; width: 100%; padding-bottom: 56.25%;
    margin-bottom: 16px; background: #000; border-radius: var(--r-md); overflow: hidden;
}
.youtube-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none }
.tag-video { background: var(--bad-soft) !important; color: var(--bad) !important }
.routine-description { margin: 12px 0; line-height: 1.6; color: var(--ink-soft) }

/* ============================================================
   Routine comments (threaded)
   ============================================================ */
.routine-comments-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line) }
.routine-comments-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px }
.routine-comments-title { font-family: var(--font-display); font-optical-sizing: auto; font-size: 15px; font-weight: 600; color: var(--ink) }
.btnAddComment {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; font-size: 12px; font-weight: 600;
    color: var(--gold-deep); background: var(--gold-soft);
    border: 1px solid var(--gold-line); border-radius: var(--r-sm);
    cursor: pointer; transition: background .15s;
}
.btnAddComment:hover { background: #f0e0b8 }
.routine-comment-form-wrap { margin-bottom: 16px }
.routine-comments-list { display: flex; flex-direction: column; gap: 8px }
.routine-comment {
    display: flex; gap: 8px; padding: 11px 13px;
    background: var(--paper); border-radius: var(--r-md);
    border-left: 3px solid var(--line-2);
}
.routine-comment .vote { flex-shrink: 0 }
.routine-comment .comment-content { flex: 1; min-width: 0 }
.routine-comment .comment-text { margin: 0 0 8px 0; font-size: 14px; line-height: 1.55; color: var(--ink) }
.routine-comment .comment-meta { display: flex; gap: 12px; align-items: center; font-size: 12px }
.routine-comment .contributor-name { color: var(--gold-deep); font-weight: 600 }
.btnReply {
    padding: 2px 9px; font-size: 11px; font-weight: 600;
    color: var(--muted); background: transparent;
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    cursor: pointer; transition: all .15s;
}
.btnReply:hover { background: var(--paper-2); color: var(--ink-soft); border-color: var(--muted) }
.reply-form-wrap { margin-top: 10px }
.no-comments { font-size: 13px; color: var(--muted); padding: 12px; text-align: center; background: var(--paper); border-radius: var(--r-md); font-style: italic }

/* Inline form actions */
.formActionsInline { display: flex; gap: 8px; justify-content: flex-start }
.formActionsInline .btnSubmit { padding: 7px 14px; font-size: 12px }
.formActionsInline .btnCancel { padding: 7px 10px; font-size: 12px }
.routineCommentForm { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px }
.routineCommentForm .formField { margin-bottom: 8px }
.routineCommentForm textarea { font-size: 13px }

/* ============================================================
   E2 — Special Requirements as numbered mini-sections
   (each SR is the heart of the page: a number badge + a visible
   "Show matching skills" toggle revealing the fulfilling skills)
   ============================================================ */
.sr-list { display: flex; flex-direction: column; gap: 10px }
.sr-mini {
    border: 1px solid var(--line);
    border-left: 3px solid var(--ev, var(--gold));
    border-radius: var(--r-md);
    background: var(--card);
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.sr-mini:hover { border-color: var(--line-2) }
.sr-mini[open] { box-shadow: var(--shadow-sm) }
.sr-mini-summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 13px;
    padding: 13px 15px;
}
.sr-mini-summary::-webkit-details-marker { display: none }
.sr-num {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: var(--ev-soft, var(--gold-soft));
    color: var(--ev, var(--gold-deep));
    border: 1px solid var(--ev-line, var(--gold-line));
    font-family: var(--font-mono); font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.sr-mini-head { flex: 1; min-width: 0 }
.sr-mini-title {
    margin: 0; font-family: var(--font-display); font-optical-sizing: auto;
    font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--ink);
}
.sr-mini-sub {
    margin: 4px 0 0; font-family: var(--font-body);
    font-size: 13px; line-height: 1.45; color: var(--ink-soft);
}
.sr-toggle {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: var(--r-pill);
    border: 1px solid var(--ev-line, var(--gold-line));
    background: var(--ev-soft, var(--gold-soft));
    color: var(--ev, var(--gold-deep));
    font-size: 12px; font-weight: 600; white-space: nowrap;
    transition: filter .15s;
}
.sr-mini-summary:hover .sr-toggle { filter: brightness(.97) }
.sr-toggle-count {
    font-family: var(--font-mono); font-weight: 700; font-size: 11px;
    background: var(--ev, var(--gold)); color: #fff;
    border-radius: var(--r-pill); padding: 1px 7px; line-height: 1.5;
}
.sr-toggle-chev { font-size: 9px; transition: transform .2s }
.sr-mini[open] .sr-toggle-chev { transform: rotate(180deg) }
.sr-toggle-hide { display: none }
.sr-mini[open] .sr-toggle-show { display: none }
.sr-mini[open] .sr-toggle-hide { display: inline }
.sr-mini-body { padding: 14px 16px 16px; border-top: 1px solid var(--line) }

.sr-description { margin: 0 0 12px; color: var(--ink-soft) }
.sr-skills { margin-top: 10px }
.sr-skills-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px }
.sr-skills-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.btnAddSrSkill {
    border: 1px dashed var(--gold-line); background: var(--card); color: var(--gold-deep);
    font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-sm);
    cursor: pointer; transition: border-color .15s, background .15s;
}
.btnAddSrSkill:hover { border-color: var(--gold); background: var(--gold-soft) }
.srSkillFormWrap { margin-bottom: 12px }
.sr-skills-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.sr-skill {
    display: flex; align-items: center; gap: 10px; padding: 7px 11px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
}
.sr-skill .skill-link { color: var(--gold-deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold-line) }
.sr-skill .skill-link:hover { border-bottom-color: var(--gold) }
.sr-skills-empty { margin: 0; font-size: 13px; color: var(--muted); font-style: italic }

/* A7 (B3) — level+event with no requirements entered yet (Copper at launch). Deliberately warmer
   than .emptyState's grey italics: this is "coming soon", not "nothing here". */
.reqEmpty {
    padding: 30px 24px; text-align: center;
    background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--r-md);
}
.reqEmpty-title {
    margin: 0 0 6px; font-family: var(--font-display); font-size: 17px; font-weight: 600;
    color: var(--gold-deep);
}
.reqEmpty-sub {
    margin: 0 auto; max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--ink-soft);
}

/* Responsive */
@media (max-width: 600px) {
    .eventHeader .title { font-size: 22px }
    .eventNav, .quickStats { flex-wrap: wrap }
    .quickStats { gap: 14px }
    .reqEmpty { padding: 22px 16px }
}

/* #2 (2026-07 audit) — event Q&A accept control (question-author only). Mirrors
   skill/question.php's .acceptBtn, laid out for the event answer-content block. */
.answer-content .acceptBtn{display:inline-block;margin-top:10px;white-space:nowrap;padding:6px 12px;font-size:12px;font-weight:600;color:var(--good);background:var(--card);border:1px solid var(--good);border-radius:var(--r-sm);cursor:pointer;transition:background .15s,color .15s}
.answer-content .acceptBtn:hover{background:var(--good-soft)}
.answer-content .acceptBtn.is-accepted{background:var(--good);color:#fff}
.answer-content .acceptBtn.is-accepted:hover{filter:brightness(.92)}