/* Portal-specific remainder. Everything shared (palette tokens, nav, cards,
   tables, forms, notices) lives in csen.css - the canonical design system at
   web/csen.css, symlinked into static/ and loaded BEFORE this file. Only
   classes unique to the portal surfaces belong here, and every color must be
   a var() token (exception below). */

/* Steam sign-in: Valve's own brand palette, kept verbatim on purpose - the
   ONE sanctioned foreign-color exception in the estate. */
.steam-btn { display: inline-block; background: #171a21; color: var(--bone);
        border: 1px solid #66c0f4; border-radius: var(--r-sm);
        padding: .55rem 1.1rem; text-decoration: none; font-weight: 600; }
.steam-btn:hover { background: #1b2838; text-decoration: none; }

/* mapper surface */
.uploader { display: flex; gap: .6rem; align-items: center; margin: 1rem 0; }
.st-installed, .st-published { color: var(--ok); }
.st-pending, .st-removing, .st-requested, .st-approved { color: var(--gold); }
.st-conflict, .st-rejected, .st-error, .st-denied, .st-failed {
        color: var(--bad); font-weight: 600; }

/* clans surface */
.clantag { font-weight: 700; color: var(--bone); }

/* primary nav links (selfserve host): bone, gold when active - csen.css nav a rules apply */
.nav-links { display: flex; flex-wrap: wrap; gap: var(--s4); margin-left: var(--s3); align-items: center; }
.nav-links a.active { color: var(--gold); border-bottom: 1px solid var(--gold); }

/* hub landing (my.csen.lt/, operator 2026-10-20): hero, game rows, latest docs - no cards.
   .hub-card/.chip below stay for the staff page and the docs/shop chip links */
.hub-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin: var(--s4) 0 0; }
.hub-actions .btn-primary { border: 1px solid var(--gold); border-radius: var(--r-sm); display: inline-block; }
.hub-quiet { display: inline-block; padding: .5rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--bone); }
.hub-quiet:hover { border-color: var(--gold); text-decoration: none; }
.hub-account { color: var(--ash); font-size: var(--text-sm); margin: var(--s4) 0 0; }
.hub-account strong { color: var(--bone); }
.home .hub-hero { padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.hub-section { max-width: var(--w-page); }
.hub-section h2 { color: var(--ash); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin: var(--s6) 0 var(--s2); }
.hub-games, .hub-updates { list-style: none; padding: 0; margin: 0; }
.hub-games li { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.hub-games li:last-child { border-bottom: none; }
.hub-game-head strong { color: var(--gold); font-size: var(--text-lg); margin-right: var(--s2); }
.hub-game-head span { color: var(--ash); font-size: var(--text-sm); }
.hub-games p { margin: var(--s1) 0 0; color: var(--bone); max-width: var(--w-text); }
.hub-games p.hub-servers { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); color: var(--ash); font-size: var(--text-sm); }
.hub-servers code { font-family: var(--font-mono); color: var(--bone); background: var(--box-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 .35rem; user-select: all; }
.hub-games p.hub-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s2); }
.hub-links a { font-weight: 600; font-size: var(--text-sm); }
.hub-links a.closed { color: var(--ash); font-weight: 500; }
.hub-updates li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; justify-content: space-between; }
.hub { max-width: 1100px; margin: 0 auto; }
.hub-hero { margin: var(--s5) 0 var(--s5); }
.hub-hero h1 { color: var(--gold); margin: .2rem 0 .4rem; }
.hub-hero .lede { max-width: 60ch; color: var(--bone); }
.hub-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.hub-card { max-width: none; margin: 0; display: flex; flex-direction: column; }
/* Play spans two grid columns (own token - NOT csen.css's .card.wide, which
   would also cap max-width); contents centre. Collapses to one column on a
   single-column grid. */
.hub-card h2 { margin: .1rem 0 .4rem; color: var(--gold); }
.hub-card .hub-blurb { color: var(--bone); margin: 0 0 .6rem; }
.hub-card .hub-status { color: var(--ash); font-size: var(--text-sm); margin: 0 0 .6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.chip { display: inline-block; padding: .45rem .8rem; border: 1px solid var(--gold); border-radius: var(--r-sm);
        color: var(--bone); text-decoration: none; font-weight: 600; }
.chip:hover { background: var(--gold); color: #111; text-decoration: none; }
.chip.closed { border-style: dashed; border-color: var(--line); color: var(--ash); font-weight: 500; }
.chip.closed small { color: var(--ash); }
.chip.quiet { border-color: var(--line); font-weight: 500; }

/* hub nav: HOME · <brand> dropdowns · PURCHASES · ADMIN (top level uppercase) */
/* every top-level item is one centred flex line, so a dropdown label (text +
   caret) sits on the same baseline as a plain link */
.nav-links > a, .nav-links .dd-label { text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-xs); font-weight: 600;
                                       display: inline-flex; align-items: center; line-height: 1.2; }
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd .dd-label { gap: .3rem; }
.nav-dd .dd-label small { font-size: .65em; line-height: 1; }
.nav-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 20; min-width: 14rem; padding: .4rem 0;
            background: var(--box); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
/* hover opens only where hover exists; touch devices toggle .open by tap
   (base.html script) - a hover-only menu flashes and navigates on a phone
   because the label is also the link to the first entry (operator 2026-09-06) */
@media (hover: hover) { .nav-dd:hover .nav-menu { display: block; } }
.nav-dd:focus-within .nav-menu, .nav-dd.open .nav-menu { display: block; }
.nav-menu a { display: block; padding: .45rem .9rem; white-space: nowrap; color: var(--bone); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 500; border-bottom: none; }
.nav-menu a:hover, .nav-menu a.active { color: var(--gold); background: var(--box-2); text-decoration: none; }
.nav-dd.active .dd-label { color: var(--gold); }
/* storefront modset switcher */
.scope-switch { margin: 0 0 var(--s4); }
.scope-switch a { display: inline-block; padding: .35rem .8rem; margin-right: .4rem; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--bone); text-decoration: none; }
.scope-switch a.active { border-color: var(--gold); color: var(--gold); }
.scope-switch a.closed { border-style: dashed; color: var(--ash); }

/* the host word next to the CSEN brand reads in the same uppercase (was "CSEN hub") */
nav .host { text-transform: uppercase; letter-spacing: .08em; font-size: var(--text-xs); }
/* mapper rules list: short lines instead of a paragraph */
.rules { margin: 0 0 var(--s4); padding-left: 1.2rem; color: var(--bone); }
.rules li { margin: .2rem 0; }

/* hub docs (app/docs.py): plain, readable prose */
.docs .doc-list h2 { color: var(--gold); margin: 0 0 .5rem; }
.docs ul.plain { list-style: none; padding: 0; margin: 0; }
.docs ul.plain li { padding: .45rem 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; }
.docs ul.plain li:last-child { border-bottom: none; }
.doc .doc-date { margin-top: -.4rem; }
.doc-body { line-height: 1.55; color: var(--bone); }
.doc-body h2, .doc-body h3, .doc-body h4 { color: var(--gold); margin: 1.3rem 0 .4rem; }
.doc-body h2 { font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase; }
.doc-body h3 { font-size: 1.05rem; }
.doc-body p { margin: .5rem 0; }
.doc-body ul, .doc-body ol { padding-left: 1.3rem; margin: .4rem 0; }
.doc-body li { margin: .25rem 0; }
.doc-body blockquote { border-left: 3px solid var(--gold); margin: .6rem 0; padding: .1rem .9rem; color: var(--ash); }
.doc-body pre { background: var(--box-2); padding: .7rem .9rem; border-radius: var(--r-sm); overflow-x: auto; }
.doc-body hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
/* two fixed halves: long titles wrap inside their own column, both stay top-aligned */
.doc-nav { margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.doc-nav a { min-width: 0; overflow-wrap: anywhere; }
.doc-nav small { display: block; color: var(--ash); font-size: .8em; margin-bottom: .15rem; }
.doc-nav .older { grid-column: 2; text-align: right; }
@media (max-width: 560px) { .doc-nav { grid-template-columns: 1fr; gap: .9rem; } .doc-nav .older { grid-column: 1; } }
.doc-admin { margin-top: 1.2rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* generic stacked form (docs editor, staff page): label above, control full width */
.dform label { display: block; margin: var(--s3) 0; font-size: var(--text-sm); color: var(--ash); }
.dform label > input:not([type=checkbox]), .dform label > select, .dform label > textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: var(--s1); color: var(--bone); font-size: 1rem; padding: .5rem .65rem; }
.dform label > textarea { min-height: 22rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; line-height: 1.45; resize: vertical; }
.dform small { display: block; color: var(--ash); font-size: var(--text-xs); margin-top: var(--s1); }
.dform .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--s4); align-items: end; }
.dform .check { display: flex; align-items: center; gap: var(--s2); color: var(--bone); }
.dform .check input { width: auto; margin: 0; }
.dform .actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: var(--s3); }
.dform .actions button { padding: .5rem 1rem; }
.dform .actions button.primary { border-color: var(--gold); color: var(--gold); }

/* manage docs table: fits the card, actions wrap */
.doc-table td, .doc-table th { vertical-align: top; }
.doc-table td.actions { white-space: nowrap; }
.doc-table td.actions a { margin-right: .5rem; }
.doc-table .title { max-width: 26ch; overflow-wrap: anywhere; }
.discord-embed { border-left: 4px solid #e08b1f; background: var(--box-2); padding: .6rem 1rem; border-radius: var(--r-sm); margin: .6rem 0 1rem; }

/* staff page (app/staff.py) */
.staff-status { color: var(--bone); margin: 0 0 var(--s3); }

/* chip-styled buttons (staff page toggles) */
button.chip { font: inherit; background: transparent; color: var(--bone); cursor: pointer; line-height: inherit; }
/* hover = the same gold fill + dark text every link chip gets (.chip:hover);
   an earlier button.chip:hover override painted the text gold on gold */
button.chip:hover { background: var(--gold); color: #111; border-color: var(--gold); }
form.chips { margin-top: auto; }