/* TMS design system: Torn-native dark. Tokens first, then components. */
/* Themes: <html data-theme="default|cyan|red|yellow|black"> (set server-side by layout.php from the viewer's faction).
   Accent tokens: --accent (fills, borders), --accent-bright (text/lines on dark), --accent-dim (dark tint fills),
   --accent-glow (box-shadow/text glow), --accent-contrast (text on --btn-accent-* buttons), --topo-rgb (contour lines "r,g,b"). */
:root, :root[data-theme="default"] {
  --bg: #191919; --bg-2: #222; --panel: #2e2e2e; --panel-2: #333;
  --border: #444; --border-soft: #3a3a3a;
  --text: #ddd; --text-dim: #999; --text-faint: #777;
  --title-grad: linear-gradient(180deg, #555 0%, #333 100%);
  --btn-grad: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 100%);
  --btn-grad-hover: linear-gradient(180deg, #666 0%, #444 100%);
  --row-a: #2a2a2a; --row-b: #303030; --row-hover: #3a3a3a;
  --accent: #85b200; --accent-bright: #99cc00; --accent-dim: #2e4a00; --accent-glow: rgba(153,204,0,.45); --accent-contrast: #10160a;
  --btn-accent-top: #99cc00; --btn-accent-bot: #6a8c00; --btn-accent-border: #4a6200; --btn-accent-top-h: #b4e000; --btn-accent-bot-h: #7aa000;
  --link: #74b5e0; --link-hover: #a6d3f0; --focus: #74b5e0;
  --topo-rgb: 153,204,0; --topo-glow-rgb: 153,204,0;
  --bg-top: #1b1d17; --bg-bottom: #121212; --bg-glow-a: rgba(133,178,0,.10); --bg-glow-b: rgba(116,181,224,.04);
  --heat-0: #262626; --heat-1: #2f3d0a; --heat-2: #475f06; --heat-3: #628500; --heat-4: #85b200; --heat-5: #b4e000;
  --danger: #e54c19; --danger-bg: #3a2420; --btn-danger-top: #e54c19; --btn-danger-bot: #a02f0c; --btn-danger-border: #6a1e07; --btn-danger-top-h: #ff5f2b; --btn-danger-bot-h: #b8350e;
}
:root[data-theme="cyan"] {
  --bg: #0a1316; --bg-2: #0f1c21; --panel: #1b2a2f; --panel-2: #213338;
  --border: #2f4a52; --border-soft: #263c43;
  --text: #dbe7ea; --text-dim: #93aab0; --text-faint: #6f878d;
  --title-grad: linear-gradient(180deg, #35545c 0%, #1f343a 100%);
  --btn-grad: linear-gradient(180deg, #3b5860 0%, #25393f 100%);
  --btn-grad-hover: linear-gradient(180deg, #476a74 0%, #2d464e 100%);
  --row-a: #17252a; --row-b: #1c2d33; --row-hover: #25404a;
  --accent: #22d3ee; --accent-bright: #67e8f9; --accent-dim: #0b4a57; --accent-glow: rgba(34,211,238,.5); --accent-contrast: #03171c;
  --btn-accent-top: #67e8f9; --btn-accent-bot: #06b6d4; --btn-accent-border: #0e7490; --btn-accent-top-h: #a5f3fc; --btn-accent-bot-h: #22d3ee;
  --link: #67e8f9; --link-hover: #a5f3fc; --focus: #67e8f9;
  --topo-rgb: 34,211,238; --topo-glow-rgb: 103,232,249;
  --bg-top: #0b1a1f; --bg-bottom: #070d10; --bg-glow-a: rgba(34,211,238,.14); --bg-glow-b: rgba(14,116,144,.12);
  --heat-0: #1a2a2f; --heat-1: #0e3a45; --heat-2: #0e5a6b; --heat-3: #0891b2; --heat-4: #22d3ee; --heat-5: #a5f3fc;
}
:root[data-theme="red"] {
  --bg: #140a0b; --bg-2: #1d0f11; --panel: #2b1a1c; --panel-2: #331f22;
  --border: #4f2e32; --border-soft: #3f2528;
  --text: #ecdcdd; --text-dim: #b39a9c; --text-faint: #8a7173;
  --title-grad: linear-gradient(180deg, #5a3438 0%, #37201f 100%);
  --btn-grad: linear-gradient(180deg, #5e3b3f 0%, #3b2325 100%);
  --btn-grad-hover: linear-gradient(180deg, #6e464b 0%, #482b2e 100%);
  --row-a: #251517; --row-b: #2b1a1d; --row-hover: #3a2327;
  --accent: #ef4444; --accent-bright: #f87171; --accent-dim: #5a1a1c; --accent-glow: rgba(239,68,68,.5); --accent-contrast: #fff;
  --btn-accent-top: #dc2626; --btn-accent-bot: #b91c1c; --btn-accent-border: #7f1d1d; --btn-accent-top-h: #ef4444; --btn-accent-bot-h: #c62828;
  --link: #fca5a5; --link-hover: #fecaca; --focus: #fca5a5;
  --topo-rgb: 239,68,68; --topo-glow-rgb: 248,113,113;
  --bg-top: #1c0c0e; --bg-bottom: #0d0607; --bg-glow-a: rgba(239,68,68,.14); --bg-glow-b: rgba(127,29,29,.16);
  --heat-0: #2a1a1c; --heat-1: #4a1a1d; --heat-2: #7f1d1d; --heat-3: #b91c1c; --heat-4: #ef4444; --heat-5: #fca5a5;
  /* the accent is red, so danger becomes a distinct hot magenta, and always carries a warning icon / heavier border */
  --red: #ff4fa3; --danger: #ff4fa3; --danger-bg: #3d1630;
  --btn-danger-top: #db2777; --btn-danger-bot: #9d174d; --btn-danger-border: #f9a8d4; --btn-danger-top-h: #ec4899; --btn-danger-bot-h: #be185d;
}
:root[data-theme="yellow"] {
  --bg: #12100a; --bg-2: #1a170d; --panel: #29241a; --panel-2: #302a1e;
  --border: #4d4326; --border-soft: #3d351f;
  --text: #ebe6d6; --text-dim: #b0a78a; --text-faint: #867e66;
  --title-grad: linear-gradient(180deg, #5a4e26 0%, #37301a 100%);
  --btn-grad: linear-gradient(180deg, #5e5129 0%, #3c3320 100%);
  --btn-grad-hover: linear-gradient(180deg, #6e5f31 0%, #483d26 100%);
  --row-a: #221e14; --row-b: #282318; --row-hover: #352e1c;
  --accent: #facc15; --accent-bright: #fde047; --accent-dim: #4d3f05; --accent-glow: rgba(250,204,21,.5); --accent-contrast: #1a1400;
  --btn-accent-top: #fde047; --btn-accent-bot: #eab308; --btn-accent-border: #a16207; --btn-accent-top-h: #fef08a; --btn-accent-bot-h: #facc15;
  --link: #fde047; --link-hover: #fef08a; --focus: #fde047;
  --topo-rgb: 250,204,21; --topo-glow-rgb: 253,224,71;
  --bg-top: #1a160a; --bg-bottom: #0d0b06; --bg-glow-a: rgba(250,204,21,.12); --bg-glow-b: rgba(161,98,7,.14);
  --heat-0: #26221a; --heat-1: #453a0a; --heat-2: #6b5a07; --heat-3: #a17f0a; --heat-4: #facc15; --heat-5: #fef08a;
}
:root[data-theme="black"] {
  --bg: #060607; --bg-2: #0c0c0e; --panel: #151517; --panel-2: #1b1b1e;
  --border: #34343a; --border-soft: #26262b;
  --text: #e4e4e7; --text-dim: #a1a1aa; --text-faint: #71717a;
  --title-grad: linear-gradient(180deg, #3a3a3f 0%, #1c1c20 100%);
  --btn-grad: linear-gradient(180deg, #3f3f45 0%, #26262a 100%);
  --btn-grad-hover: linear-gradient(180deg, #4d4d54 0%, #2f2f34 100%);
  --row-a: #101012; --row-b: #151518; --row-hover: #222226;
  --accent: #e5e7eb; --accent-bright: #ffffff; --accent-dim: #3f4147; --accent-glow: rgba(255,255,255,.5); --accent-contrast: #0a0a0b;
  --btn-accent-top: #ffffff; --btn-accent-bot: #c4c7cd; --btn-accent-border: #6b7280; --btn-accent-top-h: #ffffff; --btn-accent-bot-h: #e5e7eb;
  --link: #ffffff; --link-hover: #d4d4d8; --focus: #ffffff;
  --topo-rgb: 214,218,228; --topo-glow-rgb: 255,255,255;
  --bg-top: #0d0d10; --bg-bottom: #030304; --bg-glow-a: rgba(255,255,255,.07); --bg-glow-b: rgba(160,165,185,.06);
  --heat-0: #1b1b1e; --heat-1: #2d2e33; --heat-2: #51535b; --heat-3: #7c7f89; --heat-4: #c4c7cd; --heat-5: #ffffff;
}
:root {
  --green: #85b200; --green-bright: #9c0; --red: #e54c19; --orange: #f5a623; --blue: #74b5e0; --gold: #d4af37;
  --online: #85b200; --idle: #f5a623; --offline: #777;
  --radius: 5px; --font: Arial, Helvetica, sans-serif; --font-mono: "Courier New", monospace;
  --topbar-h: 38px; --sidebar-w: 190px; --gap: 10px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg-bottom); color: var(--text); font: 13px/1.45 var(--font); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--link-hover); }
h1, h2, h3 { margin: 0 0 8px; font-weight: bold; line-height: 1.2; }
h1 { font-size: 18px; } h2 { font-size: 15px; } h3 { font-size: 13px; }
p { margin: 0 0 8px; }
hr { border: 0; border-top: 1px solid var(--border-soft); margin: 10px 0; }
code, .mono { font-family: var(--font-mono); font-size: 12px; }
.sr-only { position: absolute; left: 0; margin: -1px; padding: 0; border: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dim, .muted { color: var(--text-dim); } .faint { color: var(--text-faint); }
.text-right { text-align: right; } .text-center { text-align: center; } .nowrap { white-space: nowrap; }
.green { color: var(--green-bright); } .red { color: var(--red); } .orange { color: var(--orange); } .gold { color: var(--gold); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---- top bar ---- */
.topbar { height: var(--topbar-h); background: var(--title-grad); border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--accent-dim), 0 2px 14px -4px var(--accent-glow); display: flex; align-items: center; gap: 14px; padding: 0 12px; position: sticky; top: 0; z-index: 50; }
.brand { color: #fff; font-weight: bold; font-size: 17px; letter-spacing: 1px; display: flex; align-items: baseline; gap: 8px; }
.brand:hover { text-decoration: none; color: var(--accent-bright); }
.brand-sub { font-size: 10px; font-weight: normal; color: var(--text-dim); letter-spacing: 0; text-transform: uppercase; }
.nav { display: flex; gap: 2px; }
.nav a, .brand, .usermenu summary { white-space: nowrap; }
/* mobile-only chrome (hamburger, drawer header/main/account blocks, backdrop, top bar name): hidden on desktop */
.nav-toggle, .topbar-user, .drawer-head, .drawer-faction, .drawer-main, .drawer-account, .drawer-backdrop { display: none; }
.nav a { color: var(--text); padding: 0 11px; line-height: var(--topbar-h); display: block; font-weight: bold; }
.nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.nav a.active { color: var(--accent-bright); box-shadow: inset 0 -2px 0 var(--accent); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.faction-switch { margin: 0; }
/* a long faction name must not push the bar past the viewport: the closed select is capped, the option list stays full width */
.topbar-right .faction-switch .select { max-width: 170px; text-overflow: ellipsis; }
.usermenu { position: relative; }
.usermenu summary { cursor: pointer; list-style: none; padding: 4px 8px; border-radius: var(--radius); color: var(--text); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu[open] summary, .usermenu summary:hover { background: rgba(255,255,255,.1); }
.usermenu-pop { position: absolute; right: 0; top: 100%; min-width: 170px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 0; box-shadow: 0 4px 12px rgba(0,0,0,.6); }
.usermenu-pop a, .usermenu-pop .linklike { display: block; width: 100%; text-align: left; padding: 6px 12px; color: var(--text); background: none; border: 0; font: inherit; cursor: pointer; }
.usermenu-pop a:hover, .usermenu-pop .linklike:hover { background: var(--panel-2); text-decoration: none; }
.usermenu-pop form { margin: 0; }

/* ---- layout ---- */
.shell { flex: 1; display: flex; align-items: flex-start; width: 100%; max-width: 1500px; margin: 0 auto; }
.sidebar { width: var(--sidebar-w); flex: none; padding: var(--gap); position: sticky; top: var(--topbar-h); }
.side-title { font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); margin: 8px 0 4px; padding: 0 8px; }
.side-title:first-child { margin-top: 0; }
.side-link { display: block; padding: 6px 8px; border-radius: var(--radius); color: var(--text); border-left: 3px solid transparent; }
a.side-link:hover { background: var(--panel); text-decoration: none; }
.side-link.active { background: var(--panel); border-left-color: var(--accent); box-shadow: -6px 0 14px -8px var(--accent-glow); color: #fff; font-weight: bold; }
.side-link.disabled { color: var(--text-faint); cursor: not-allowed; }
.soon { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: #666; }
.content { flex: 1; min-width: 0; padding: var(--gap); }
.content.wide { max-width: none; }
body.guest .shell { justify-content: center; }
body.guest .content { max-width: 720px; }
.footer { text-align: center; font-size: 11px; color: var(--text-faint); padding: 14px 10px; border-top: 1px solid var(--border-soft); margin-top: 16px; }
.page-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--gap); }
.page-title h1 { margin: 0; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.toolbar .spacer { margin-left: auto; }
.grid { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- panel ---- */
.panel { background: var(--panel); background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--gap); overflow: hidden; }
.panel-title { background: var(--title-grad); color: #fff; font-weight: bold; font-size: 12px; padding: 5px 10px; border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 var(--accent-dim); text-shadow: 0 1px 0 #000; display: flex; align-items: center; gap: 8px; }
.panel-title .right { margin-left: auto; font-weight: normal; font-size: 11px; color: var(--text-dim); }
.panel-body { padding: 10px; }
.panel-body.flush { padding: 0; }
.panel-foot { padding: 6px 10px; border-top: 1px solid var(--border-soft); background: var(--bg-2); font-size: 11px; color: var(--text-dim); }
.stat { background: var(--panel); background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
.stat .num { font-size: 20px; font-weight: bold; color: #fff; line-height: 1.1; }
.stat .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); }

/* ---- buttons ---- */
.btn { display: inline-block; background: var(--btn-grad); color: var(--text); border: 1px solid #222; border-radius: var(--radius); padding: 5px 12px; font: bold 12px var(--font); cursor: pointer; text-align: center; text-shadow: 0 1px 0 #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.btn:hover { background: var(--btn-grad-hover); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-green { background: linear-gradient(180deg, var(--btn-accent-top) 0%, var(--btn-accent-bot) 100%); color: var(--accent-contrast); border-color: var(--btn-accent-border); text-shadow: none; }
.btn-green:hover { background: linear-gradient(180deg, var(--btn-accent-top-h) 0%, var(--btn-accent-bot-h) 100%); color: var(--accent-contrast); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 12px -2px var(--accent-glow); }
.btn-red { background: linear-gradient(180deg, var(--btn-danger-top) 0%, var(--btn-danger-bot) 100%); color: #fff; border-color: var(--btn-danger-border); }
.btn-red:hover { background: linear-gradient(180deg, var(--btn-danger-top-h) 0%, var(--btn-danger-bot-h) 100%); }
.btn-sm { padding: 2px 8px; font-size: 11px; }
.btn-block { display: block; width: 100%; }
.linklike { background: none; border: 0; color: var(--link); cursor: pointer; padding: 0; font: inherit; }

/* ---- forms ---- */
label { display: block; font-weight: bold; font-size: 12px; margin-bottom: 3px; }
.input, .select, textarea.input { background: var(--bg-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 8px; font: 13px var(--font); width: 100%; max-width: 100%; }
.input:focus, .select:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 2px var(--accent-dim); }
.input.mono { letter-spacing: 1px; }
.select { width: auto; padding: 4px 6px; }
.select-sm, .input-sm { padding: 2px 6px; font-size: 12px; }
.form-row { margin-bottom: 10px; }
.form-row .hint { color: var(--text-dim); font-size: 11px; margin-top: 3px; }
.form-inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.form-inline .form-row { margin: 0; }
.input-filter { width: 220px; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* ---- tables ---- */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table th { background: var(--title-grad); color: #ddd; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; position: sticky; top: 0; }
.table tbody tr:nth-child(odd) { background: var(--row-a); }
.table tbody tr:nth-child(even) { background: var(--row-b); }
.table tbody tr:hover { background: var(--row-hover); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table th[data-sort] { cursor: pointer; user-select: none; }
.table th[data-sort]::after { content: "\2195"; margin-left: 4px; color: #777; font-size: 10px; }
.table th[data-sort].sort-asc::after { content: "\25B2"; color: var(--accent-bright); }
.table th[data-sort].sort-desc::after { content: "\25BC"; color: var(--accent-bright); }
.table tr.hidden-row { display: none; }
.table-compact td, .table-compact th { padding: 2px 6px; font-size: 12px; }

/* ---- pills, badges ---- */
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: bold; color: #fff; line-height: 1.5; white-space: nowrap; }
.pill-online { background: var(--online); } .pill-idle { background: var(--idle); color: #222; } .pill-offline { background: var(--offline); }
.pill-hospital, .pill-jail { background: var(--red); } .pill-travel { background: var(--blue); color: #112; }
.badge { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 10px; font-weight: bold; text-transform: uppercase; line-height: 1.6; background: #444; color: #ddd; white-space: nowrap; }
.badge-ok { background: #2e4a00; color: var(--green-bright); } .badge-warn { background: #5a3d00; color: var(--orange); }
.badge-alert { background: #5a1c08; color: #ff7a4d; } .badge-info { background: #1f3a4d; color: var(--blue); } .badge-gold { background: #4a3d0c; color: var(--gold); }

/* ---- tabs ---- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--gap); overflow-x: auto; }
.tab { padding: 6px 14px; background: var(--panel-2); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; color: var(--text-dim); font-weight: bold; white-space: nowrap; }
.tab:hover { color: #fff; text-decoration: none; }
.tab.active { background: var(--panel); color: var(--accent-bright); box-shadow: inset 0 2px 0 var(--accent); }

/* ---- heatmap (7 rows x 24 cols; classes heat-0 .. heat-5 by intensity) ---- */
.heatmap { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 10px; align-items: center; }
.heat-label { color: var(--text-dim); text-align: right; padding-right: 4px; }
.heat-hour { color: var(--text-faint); text-align: center; white-space: nowrap; overflow: visible; min-width: 0; }
.heat { height: 18px; border-radius: 2px; background: var(--heat-0); }
.heat-0 { background: var(--heat-0); } .heat-1 { background: var(--heat-1); } .heat-2 { background: var(--heat-2); }
.heat-3 { background: var(--heat-3); } .heat-4 { background: var(--heat-4); } .heat-5 { background: var(--heat-5); box-shadow: 0 0 6px -1px var(--accent-glow); }
.heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: 10px; color: var(--text-dim); margin-top: 6px; }
.heat-legend .heat { width: 14px; height: 10px; }
.heatmap-scroll { max-width: 100%; }

/* ---- alerts, flash, empty ---- */
.flash, .alert { padding: 8px 12px; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); background: var(--panel); margin-bottom: var(--gap); }
.flash-success, .alert-success { border-left-color: var(--green); }
.flash-error, .alert-error { border-left-color: var(--red); background: var(--danger-bg); }
.flash-warn, .alert-warn { border-left-color: var(--orange); background: #39301e; }
.flash-info, .alert-info { border-left-color: var(--blue); }
.empty { text-align: center; color: var(--text-dim); padding: 24px 10px; }
.empty strong { display: block; color: var(--text); margin-bottom: 4px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; }
.kv dt { color: var(--text-dim); } .kv dd { margin: 0; }

/* ---- responsive (mobile first fixes; desktop >= 1100px unchanged) ---- */
.only-mobile { display: none; }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-sub { display: none; }
}
@media (max-width: 720px) {
  /* The shell stacks; children MUST stretch (align-items:flex-start would size .content to its widest table). */
  .shell { flex-direction: column; align-items: stretch; }
  .content { width: 100%; max-width: 100%; }
  body.guest .content { max-width: 100%; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .input-filter { width: 100%; }
  .hide-mobile { display: none !important; }
  .only-mobile { display: inline-block; }

  /* readable text and finger-sized controls */
  .panel-title { font-size: 13px; padding: 8px 10px; flex-wrap: wrap; }
  .panel-title .right { font-size: 12px; }
  .panel-foot, .sync-note, .form-row .hint, .footer { font-size: 12px; }
  .pill { font-size: 12px; } .badge { font-size: 11px; }
  .stat .lbl { font-size: 11px; }
  label { font-size: 13px; }
  .btn { min-height: 44px; padding: 8px 14px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 44px; padding: 6px 12px; font-size: 13px; }
  .input, .select, .select-sm, .input-sm { min-height: 40px; font-size: 16px; padding: 6px 10px; } /* 16px stops iOS focus-zoom */
  .select, .input { max-width: 100%; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; vertical-align: middle; }
  .tab { padding: 10px 14px; min-height: 44px; }
  /* finger-sized: checkbox rows, disclosure summaries and text-style buttons (QA pass, 390 px) */
  label:has(> input[type=checkbox]), label:has(> input[type=radio]) { display: flex; align-items: center; gap: 8px; min-height: 40px; }
  summary.panel-title { min-height: 40px; }
  details > summary:not(.panel-title) { padding-top: 12px; padding-bottom: 12px; }
  .linklike { min-height: 44px; padding: 0 6px; }
  .linklike.red { min-width: 40px; }
  .toolbar { gap: 6px; }
  .toolbar > form, .page-title > form { width: 100%; flex-wrap: wrap !important; }
  .toolbar .select, .page-title .select { width: 100%; }
  .page-title { gap: 4px 10px; }

  /* forms stack; buttons full width */
  .form-inline { flex-direction: column; align-items: stretch; }
  .form-inline > *, .form-inline .form-row { width: 100%; }
  .panel-body:not(.flush) form > .btn, .panel-body:not(.flush) .form-inline > .btn { width: 100%; }
  .panel-body:not(.flush) > p > .btn { display: flex; width: 100%; }
  .flash, .alert { overflow-wrap: anywhere; }
  .kv { grid-template-columns: max-content minmax(0, 1fr); }
  .kv dd { min-width: 0; overflow-wrap: anywhere; }

  /* tables: only the .table-wrap scrolls; first column stays visible */
  .table th, .table td { padding: 8px 8px; }
  .table, .table-compact td, .table-compact th { font-size: 12px; }
  .table th { font-size: 12px; }
  .table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
  .table-wrap .table td:first-child, .table-wrap .table th:first-child { position: sticky; left: 0; z-index: 2; background-color: var(--row-a); box-shadow: 1px 0 0 var(--border); }
  .table-wrap .table tbody tr:nth-child(even) td:first-child { background-color: var(--row-b); }
  .table-wrap .table th:first-child { background: var(--border); z-index: 3; }
  .table-wrap .table td:first-child { max-width: 46vw; overflow-wrap: break-word; }
  #member-table td:first-child { min-width: 112px; }
  #member-table td:nth-child(2) { min-width: 84px; }
  .table .form-inline { flex-direction: row; flex-wrap: nowrap !important; align-items: center; }
  .table .form-inline > * { width: auto; }
  .table .select { width: auto; min-width: 120px; }
  .table .input-sm { width: 76px !important; }
}
/* ---- mobile nav: hamburger + off-canvas drawer (the desktop aside.sidebar re-used, so every link list is rendered once) ----
   Breakpoint 1100 (was 1024): the widest desktop bar (owner: 7 links incl. Guides + faction switcher + user menu) needs ~1000 px,
   so below 1100 the hamburger takes over instead of letting the bar wrap or overflow. app.js initDrawer() uses the same number. */
@media (max-width: 1099px) {
  :root { --topbar-h: 56px; }
  .topbar { gap: 4px; padding: 0 8px 0 4px; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius); color: var(--text); }
  .nav-toggle:hover { background: rgba(255,255,255,.08); text-decoration: none; }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 22px; height: 2px; border-radius: 1px; background: currentColor; }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -7px; } .nav-toggle-bars::after { top: 7px; }
  .brand { min-width: 0; }
  .brand-sub { display: none; }
  .nav, .topbar-right .faction-switch, .usermenu { display: none; }
  .topbar-user { display: block; min-width: 0; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }

  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(86vw, 320px); max-width: none; padding: calc(var(--gap) + env(safe-area-inset-top)) calc(var(--gap) + 0px) calc(var(--gap) + env(safe-area-inset-bottom)) calc(var(--gap) + env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; background: var(--bg-2); border-right: 1px solid var(--border); box-shadow: 8px 0 28px rgba(0,0,0,.55); transform: translateX(-102%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  @supports (backdrop-filter: blur(1px)) { .sidebar { background: color-mix(in srgb, var(--bg-2) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
  .sidebar.is-open, .sidebar:target { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.6); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
  .sidebar.is-open + .drawer-backdrop, .sidebar:target + .drawer-backdrop { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
  body.nav-open { overflow: hidden; }

  .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
  .drawer-user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; }
  .drawer-close { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius); color: var(--text); font-size: 28px; line-height: 1; }
  .drawer-close:hover { background: rgba(255,255,255,.08); text-decoration: none; }
  .drawer-faction { display: block; margin-bottom: 8px; }
  .drawer-faction .faction-switch { display: block; }
  .drawer-faction .select { width: 100%; min-height: 44px; text-overflow: ellipsis; }
  .drawer-main, .drawer-account { display: block; }
  .drawer-main { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border-soft); }
  .drawer-account { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--border-soft); }
  .drawer-account form { margin: 0; }
  .sidebar .side-link { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
  .sidebar button.side-link { width: 100%; text-align: left; background: none; border-top: 0; border-right: 0; border-bottom: 0; color: var(--text); }
  .sidebar button.side-link:hover { background: var(--panel); }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar.is-open, .sidebar:target, .drawer-backdrop, .sidebar.is-open + .drawer-backdrop, .sidebar:target + .drawer-backdrop { transition: none; }
}
@media (max-width: 600px) {
  .table .col-more { display: none; }
  .table-wrap.show-more .table .col-more { display: table-cell; }
}
@media (max-width: 480px) {
  .content { padding: 8px; }
  .panel-body { padding: 8px; }
  .grid-2, .grid-3, .grid-4 { gap: 8px; }
}

/* ---- incomplete API key banner (rendered by layout.php on every page) ---- */
.key-banner { border: 1px solid var(--orange); border-left-width: 6px; border-radius: var(--radius); background: #39301e; padding: 12px 14px; margin-bottom: var(--gap); }
.key-banner p { margin: 4px 0 10px; }
.key-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.key-banner-actions .btn-green { font-size: 14px; padding: 9px 16px; }
.key-banner-hide { margin: 0; }
@media (max-width: 720px) { .key-banner-actions .btn { flex: 1 1 100%; } .key-banner-hide { flex: 1 1 100%; text-align: center; } }
.feature-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.feature-list li { padding: 4px 6px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 3px; overflow-wrap: anywhere; }

/* ---- theme extras ---- */
:root[data-theme="red"] .flash-error::before, :root[data-theme="red"] .alert-error::before { content: "\26A0\FE0E  "; color: var(--red); font-weight: bold; }
:root[data-theme="red"] .flash-error, :root[data-theme="red"] .alert-error { border-width: 1px 1px 1px 6px; border-color: var(--red); }
:root[data-theme="red"] .btn-red::before { content: "\26A0\FE0E "; }
:root[data-theme="red"] .badge-alert { background: #4d1537; color: #ff8cc4; border: 1px solid #ff4fa3; }
:root[data-theme="red"] .red { font-weight: bold; }
:root[data-theme="black"] .content a:not([class]) { text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 2px; }
:root[data-theme="black"] .panel-title { text-shadow: 0 0 8px rgba(255,255,255,.25); }
:root[data-theme="red"] .pill-hospital, :root[data-theme="red"] .pill-jail { background: #db2777; }

/* ---- tap targets (QA pass): at least 44px on touch and narrow screens, still compact with a mouse ---- */
.btn, .tab, .chip, .linklike, .brand { min-height: 32px; }
.linklike { padding: 4px 6px; }
.brand { align-items: center; padding: 0 6px; }
.footer a { display: inline-block; padding: 14px 6px; }
.btn[hidden] { display: none !important; }
@media (pointer: coarse), (max-width: 720px) {
  .btn, .btn-sm, .tab, .chip, .linklike, .brand { min-height: 44px; }
  .btn, .btn-sm { display: inline-flex; align-items: center; justify-content: center; padding-top: 8px; padding-bottom: 8px; }
  .tab { display: inline-flex; align-items: center; }
  .chip { display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
  .linklike { padding: 0 8px; }
  .footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}
/* tab strips that scroll sideways: a soft fade on the edge that has more tabs behind it */
.tabs.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.tabs.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.tabs.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }