/* Fonts are hosted on the site (and preloaded in each page's <head>) so text never snaps into a late font. */
@font-face {
  font-family: Manrope;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap; /* Always use Manrope once available, including a slow first visit. */
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: Manrope;
  src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --font-ui: Manrope, system-ui, sans-serif;
  color-scheme: dark;
  --bg: #0a0e16;
  --bg-alt: #0e1420;
  --panel: #131a28;
  --border: #222c3f;
  --text: #e6e9ef;
  --muted: #98a2b5;
  /* Neutral steel accent. Change both lines together to re-theme the whole site. */
  --accent: #b4c3d9;
  --accent-rgb: 180, 195, 217;
  --red: #e5383b;
  --red-text: #ff8a8c;
  --green: #3ddc84;
  --green-rgb: 61, 220, 132;
  --amber: #f5b942;
  --amber-rgb: 245, 185, 66;
  --nav-bg: rgba(10, 14, 22, .95);
  --welcome-from: #172034;
  --hover-border: #3a475e;
  --radius: 12px;
  --max: 1120px;
}

/* Reduce motion (Settings): no animations or page fades at all, whatever the device says. */
html[data-reduce-motion] { scroll-behavior: auto; }
[data-reduce-motion] *, [data-reduce-motion] *::before, [data-reduce-motion] *::after, [data-reduce-motion] *::backdrop {
  animation: none !important;
  transition: none !important;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Fade incoming content in place while keeping it available for interaction. */
@keyframes page-in { from { opacity: 0; } }
.fade-in { animation: fade-in .25s ease-out; }
@keyframes fade-in { from { opacity: 0; } }

/* Motion: one easing and a few durations, so everything moves the same way. */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* fast start, long soft landing */
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes backdrop-in { from { opacity: 0; } }

html.page-enter main, html.page-enter .footer { animation: page-in .32s ease-out; }

/* Dialogs scale up out of the page instead of popping. */
.editor[open], .unit-application-dialog[open] { animation: dialog-in .28s var(--ease-out); }
.editor[open]::backdrop, .unit-application-dialog[open]::backdrop { animation: backdrop-in .28s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .fade-in, .editor[open], .editor[open]::backdrop,
  .unit-application-dialog[open], .unit-application-dialog[open]::backdrop,
  html.page-enter main, html.page-enter .footer { animation: none; }
  .card:hover, html .unit-card:hover { transform: none; }
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Numeric content keeps its baseline and width as placeholders become live totals. */
.lb-stat strong, [data-home-stat], .countdown strong { font-variant-numeric:tabular-nums; }
.lb-stat strong { min-inline-size:2ch; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .5px;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px;
}

/* Buttons: a bright silver primary, a glassy secondary, and coloured ones only where the colour means something. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: #0b1018;
  background: linear-gradient(180deg, #f6f8fc 0%, #d8e0ec 100%);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}
.btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e3e9f3 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 4px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .35);
}
.btn[hidden] { display: none; }
.btn:active { transform: translateY(0); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 16px rgba(0, 0, 0, .25);
}
.btn-outline { color: var(--text); background: transparent; border-color: transparent; box-shadow: none; }
.btn-outline:hover { background: rgba(var(--accent-rgb), .1); box-shadow: none; }
.btn-small { padding: 7px 14px; font-size: 14px; border-radius: 8px; }

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 34px; height: 40px; }
.brand-text { font-family: var(--font-ui); font-weight: 700; font-size: 20px; letter-spacing: .5px; }
.brand-text span { color: var(--muted); font-weight: 600; }

.nav-menu { display: flex; align-items: center; gap: 20px; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.nav-link:hover, .dropdown.open > .nav-link { color: var(--text); background: var(--panel); }
.nav-link.active { color: var(--accent); }

.chev { width: 12px; height: 12px; transition: transform .15s; }
.dropdown.open .chev { transform: rotate(180deg); }

.dropdown { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 270px;
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.dropdown-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.dropdown.open .dropdown-menu { display: block; }

.dropdown-item { display: block; padding: 10px 12px; border-radius: 8px; transition: background .15s; }
.dropdown-item:hover, .dropdown-item.active { background: var(--bg-alt); }
.di-label { display: block; font-weight: 600; font-size: 14px; color: var(--text); }
.dropdown-item.active .di-label { color: var(--accent); }
.di-desc { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }

/* Account area in the nav */
.nav-account { display: flex; align-items: center; gap: 8px; }
.nav-account .btn-ghost { padding: 7px 14px; }
.account-toggle { padding: 4px 10px 4px 4px; }
.account-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  image-rendering: pixelated;
  background: var(--bg-alt);
  border: 1px solid transparent;
}
.account-name { color: var(--text); font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-right { left: auto; right: 0; min-width: 220px; }
button.dropdown-item { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (hover: hover) and (min-width: 761px) {
  .dropdown:hover .dropdown-menu { display: block; }
  .dropdown:hover .chev { transform: rotate(180deg); }
  .dropdown:hover > .nav-link { color: var(--text); background: var(--panel); }
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 88px;
  background:
    radial-gradient(ellipse 60% 70% at 85% 40%, rgba(var(--accent-rgb),.10), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  border-bottom: 1px solid var(--border);
}
.hero::before, .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .25;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  pointer-events: none;
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }

.eyebrow {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hero h1 { font-size: clamp(40px, 7vw, 68px); margin-bottom: 18px; }
.hero h1 span { color: var(--accent); }
.lead { color: var(--muted); font-size: 18px; max-width: 560px; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }

.stats { display: flex; gap: 40px; }
.stats dt { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.stats dd { font-family: var(--font-ui); font-weight: 700; font-size: 32px; color: var(--text); }

@keyframes float { 50% { transform: translateY(-10px); } }

/* Sections */
.section { padding: 88px 0; }
.section h2 { font-size: clamp(30px, 4.5vw, 42px); margin-bottom: 12px; }

.grid { display: grid; gap: 20px; margin-top: 36px; }

.card {
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: border-color .15s, transform .3s var(--ease-out);
}
.card:hover { transform: translateY(-2px); }
.card h3 { font-size: 22px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; }

/* Special units */

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.btn-disabled, .btn-disabled:hover {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
}
.tag {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 16px;
}

/* Command */
.person { text-align: center; }
.avatar {
  width: 96px; height: 110px;
  margin: 0 auto 16px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 32%, var(--border) 22%, transparent 23%),
    radial-gradient(ellipse 40% 34% at 50% 100%, var(--border) 98%, transparent 100%),
    var(--bg-alt);
  border: 1px solid transparent;
}
.role { color: var(--accent) !important; font-weight: 600; font-size: 14px !important; text-transform: uppercase; letter-spacing: 1px; }

/* Join steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.steps li {
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 26px 22px;
}
.step-num { font-family: var(--font-ui); font-weight: 700; font-size: 34px; color: var(--accent); opacity: .85; }
.steps h3 { font-size: 20px; margin: 6px 0 8px; }
.steps p { color: var(--muted); font-size: 15px; }
.steps strong { color: var(--text); }

/* Inner pages */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 44px;
  background:
    radial-gradient(ellipse 50% 90% at 90% 0%, rgba(var(--accent-rgb),.09), transparent 70%),
    var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.page-hero .container { position: relative; }
.page-hero h1 { font-size: clamp(34px, 6vw, 52px); margin-bottom: 12px; }
.page-hero .lead { margin-bottom: 0; }
.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { margin: 0 8px; opacity: .5; }
.chip { font-size: 13px; border: 1px solid transparent; background: var(--panel); border-radius: 999px; padding: 4px 12px; color: var(--muted); }
.chip strong { color: var(--text); font-weight: 600; }

/* Script pages */

.note {
  background: rgba(var(--accent-rgb),.07);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 40px;
}
.note var, .line var { font-style: normal; color: var(--accent); }

.hint { color: var(--muted); font-size: 15px; margin-bottom: 14px; }

.lines { list-style: none; display: grid; gap: 8px; }
.line {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 10px 10px 16px;
  font-size: 15px;
}
.copy-btn {
  flex-shrink: 0;
  background: var(--bg-alt);
  border: 1px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.copy-btn:hover { color: var(--text); }

/* Login / register */
.auth {
  display: grid;
  place-items: center;
  padding: 64px 16px 88px;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--accent-rgb),.08), transparent 70%);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 36px 28px;
}
.auth-logo { display: block; width: 48px; height: 56px; margin: 0 auto 16px; }
.auth-card h1 { text-align: center; font-size: 34px; }
.auth-sub { text-align: center; color: var(--muted); margin: 6px 0 28px; }
.auth-alt { text-align: center; margin-top: 22px; font-size: 14px; color: var(--muted); line-height: 1.9; }
.auth-alt a { color: var(--accent); }

.form { display: grid; gap: 16px; }
.form[hidden] { display: none; }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.form input, .form select {
  width: 100%;
  background: var(--bg);
  border: 1px solid transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
}
/* Our own dropdown look, so selects match the inputs instead of the system's style (which changes on hover). */
.form select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2398a2b5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
  transition: border-color .15s;
}
.form select option, .form select optgroup { background: var(--panel); color: var(--text); }
.form select option:disabled { color: var(--muted); }
.form input:focus, .form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15); }
.form .btn { width: 100%; cursor: pointer; font-family: inherit; font-size: 15px; }
.form .btn:disabled { opacity: .6; cursor: wait; transform: none; }
.form-error {
  background: rgba(229, 56, 59, .1);
  border: 1px solid transparent;
  color: var(--red-text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}
.code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg);
  border: 1px dashed transparent;
  border-radius: 10px;
  padding: 10px 10px 10px 16px;
}
.code { font-family:var(--font-ui); font-weight: 700; font-size: 28px; letter-spacing: 3px; color: var(--accent); }
.how { color: var(--muted); font-size: 14px; padding-left: 20px; display: grid; gap: 4px; }
.how strong { color: var(--text); }
.link-btn { justify-self: center; background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
.link-btn:hover { color: var(--text); }

/* Portal: sidebar + main area, under the site header */
:is(html.portal-page, body:has(.portal)) .nav-inner { max-width: none; padding: 0 24px; } /* header spans the full width like the portal */
/* On bigger screens: logo left, menu centred, account right, so dropdowns open in the middle instead of off the edge. */
@media (min-width: 761px) {
  :is(html.portal-page, body:has(.portal)) .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; }
  :is(html.portal-page, body:has(.portal)) .nav-menu { display: contents; }
  :is(html.portal-page, body:has(.portal)) .nav-list { grid-column: 2; }
  :is(html.portal-page, body:has(.portal)) .nav-account { grid-column: 3; justify-self: end; }
  :is(html.portal-page, body:has(.portal)) .brand-text { white-space: nowrap; }
}
/* Small laptops: keep just the first word of the name so the centred menu still fits. */
@media (min-width: 761px) and (max-width: 1000px) {
  :is(html.portal-page, body:has(.portal)) .brand-text span { display: none; }
}
.portal { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; align-content: start; }
.side-nav { display: grid; gap: 2px; }
.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
a.side-link:hover { color: var(--text); background: var(--panel); }
.side-link.active { color: var(--accent); background: rgba(var(--accent-rgb),.1); box-shadow: inset 3px 0 0 var(--accent); }
.side-link.soon { opacity: .5; cursor: default; }
/* Pages that aren't built yet, folded into one row. */
.icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.portal-main { min-width: 0; padding: 32px 32px 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; }
.portal-header h1 { font-size: clamp(32px, 4vw, 42px); }
.portal-header-sub { color: var(--muted); margin-top: 6px; }
.portal-header .eyebrow { margin-bottom: 8px; }
.muted { color: var(--muted); }

/* Dashboard welcome card */
.welcome {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 28px 28px 0;
  background:
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(var(--accent-rgb),.14), transparent 60%),
    linear-gradient(135deg, var(--welcome-from) 0%, var(--panel) 60%);
  background-origin: border-box;
  border: 1px solid transparent;
  border-radius: 16px;
}
.welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .25;
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  pointer-events: none;
}
.welcome > * { position: relative; }
.welcome-avatar { width: 110px; height: auto; image-rendering: pixelated; flex-shrink: 0; align-self: flex-end; }
.welcome-avatar:not([src]) { visibility: hidden; }
.welcome-text { flex: 1; min-width: 0; padding-bottom: 26px; }
.welcome-text .eyebrow { margin-bottom: 6px; }
.welcome h1 { font-size: clamp(30px, 4vw, 44px); }

/* Panels */
.panel { background: var(--panel); border: 1px solid transparent; border-radius: 14px; min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: 20px; }
.panel-icon { display: grid; place-items: center; color: var(--accent); }
.panel-count { margin-left: auto; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid transparent; color: var(--muted); }
.panel-empty { list-style: none; color: var(--muted); text-align: center; padding: 28px 16px; font-size: 15px; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(var(--green-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0); } }

.people { list-style: none; padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; transition: background .15s; }
.person-row:hover { background: var(--bg-alt); }
.person-row .member-avatar { width: 38px; height: 38px; }
.person-main { flex: 1; min-width: 0; }
.person-name { font-weight: 600; font-size: 15px; }
.person-sub { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-sub strong { color: var(--green); font-weight: 600; }
.person-when { text-align: right; font-size: 12px; color: var(--muted); line-height: 1.4; flex-shrink: 0; }
.person-when span { opacity: .75; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.online { color: var(--green); background: rgba(var(--green-rgb), .08); border-color: transparent; }

.table-wrap { overflow-x: auto; }
.staff-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.staff-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.staff-table td { padding: 10px 20px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.staff-table tbody tr:last-child td { border-bottom: 0; }
.staff-table tbody tr { transition: background .15s; }
.staff-table tbody tr:hover { background: var(--bg-alt); }
.table-person { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.table-person .member-avatar { width: 32px; height: 32px; }

/* Settings page */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.settings-grid .panel:first-child { grid-row: span 2; }
.settings-body { padding: 20px; display: grid; gap: 14px; justify-items: start; }
.settings-body.form { justify-items: stretch; }
.settings-body .btn { justify-self: start; }
.form.settings-body .btn { width: auto; }
.settings-hint { color: var(--muted); font-size: 13px; }
.settings-note { color: var(--muted); font-size: 13px; padding: 0 20px 20px; }
.account-card { grid-template-columns: auto 1fr; align-items: end; gap: 18px; }
.account-card-avatar { width: 64px; height: auto; image-rendering: pixelated; }
.account-card-avatar:not([src]) { visibility: hidden; }
.account-card-name { font-family: var(--font-ui); font-weight: 700; font-size: 26px; line-height: 1.1; }
.small { font-size: 13px; }
.account-card-name .tag { margin: 0; vertical-align: 4px; font-size: 12px; }
.tag-input { position: relative; }
.form .tag-field { text-transform: uppercase; letter-spacing: 2px; font-weight: 600; }
.form .tag-input input { text-transform: uppercase; letter-spacing: 2px; font-weight: 600; padding-right: 110px; }
.tag-status { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--muted); }
.tag-status.ok { color: var(--green); }
.tag-status.bad { color: var(--red-text); }
.settings-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.settings-actions[hidden], .form label[hidden], .settings-body p[hidden] { display: none; }
.tag-locked { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.tag-locked .tag { margin: 0; font-size: 16px; padding: 4px 12px; }
.form .settings-actions .btn { width: auto; }
@media (max-width: 1100px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-grid .panel:first-child { grid-row: auto; }
}
.settings-grid[hidden] { display: none; }
/* Only the Account tab has a tall first panel next to two short ones. */
.settings-grid:not([data-view="account"]) .panel:first-child { grid-row: auto; }
.settings-tabs { flex-wrap: wrap; justify-self: start; max-width: 100%; }
.seg [role="radio"][aria-checked="true"] { background: var(--bg-alt); color: var(--accent); }
.form textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  background: var(--bg);
  border: 1px solid transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}
.form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15); }
.char-count { justify-self: end; font-size: 12px; font-weight: 500; color: var(--muted); }
.char-count.bad { color: var(--red-text); }
.form .settings-body[hidden], .settings-body[hidden] { display: none; }
.date-preview { color: var(--muted); font-size: 14px; }
.date-preview strong { color: var(--text); font-weight: 600; }
.delete-pending {
  color: var(--amber);
  background: rgba(var(--amber-rgb), .08);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}

/* Online / offline / on leave, and good / bad results */
.status-pill.offline { color: var(--muted); }
.status-pill.leave { color: var(--amber); background: rgba(var(--amber-rgb), .08); border-color: transparent; }
.status-pill.bad { color: var(--red-text); background: rgba(229, 56, 59, .08); border-color: transparent; }
.panel-count + .panel-count { margin-left: 0; }
a.panel-count:hover { border-color: transparent; }

/* Devices and login history */
.device-list { list-style: none; padding: 8px; display: grid; gap: 2px; }
.device { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; }
.device:hover { background: var(--bg-alt); }
.device-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--accent-rgb), .1); color: var(--accent); flex-shrink: 0; }
.device-main { flex: 1; min-width: 0; }
.device-name { font-weight: 600; font-size: 15px; }
.device-sub { color: var(--muted); font-size: 13px; }
.device .btn { font-family: inherit; cursor: pointer; }

/* Links to profiles from people lists */
a.person-row { color: inherit; }
a.table-person:hover, a.person-row:hover .person-name { color: var(--accent); }

/* Profile page */
[data-p-part][hidden] { display: none; }
/* The hero card glows in the member's division colour (--div, set in profile.js; the accent if it has none). */
.profile-card {
  --tint: var(--div, rgb(var(--accent-rgb)));
  padding-bottom: 0;
  min-height: 220px;
  background:
    radial-gradient(ellipse 55% 140% at 0% 100%, color-mix(in srgb, var(--tint) 26%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 120% at 100% 0%, color-mix(in srgb, var(--tint) 12%, transparent), transparent 60%),
    linear-gradient(135deg, var(--welcome-from) 0%, var(--panel) 60%);
  background-origin: border-box;
  border-color: transparent;
}
.profile-card.profile-foundation { --tint: #e9b949; }
/* A soft spotlight on the floor under the avatar. */
.profile-card .welcome-avatar { width: 128px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.profile-card::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -30px;
  width: 170px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 45%, transparent), transparent);
  pointer-events: none;
}
.profile-card h1 .tag { margin: 0; font-size: 16px; vertical-align: 6px; }
.profile-bio { margin-top: 14px; font-size: 15.5px; line-height: 1.6; max-width: 600px; overflow-wrap: anywhere; color: color-mix(in srgb, var(--text) 88%, transparent); }
.profile-bio[hidden] { display: none; }
.profile-card .settings-hint { margin-top: 14px; }

/* Career paging: "Show [10]" in the header, "Showing 1 to 10 of 23 entries" and page buttons under the list. */
.career-show { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.career-show[hidden], .career-pager[hidden] { display: none; }
.career-show select { min-height: 32px; padding: 3px 26px 3px 10px; border: 1px solid transparent; border-radius: 6px; background: var(--bg-alt); color: var(--text); font: inherit; font-weight: 500; }
.career-show select:focus { outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 .2rem #0d6efd30; }
.career-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
/* The page buttons are Bootstrap's .pagination (colours in site-ui.css). */

/* Placeholders only show if loading takes a moment (site.js removes .loading-grace after 250ms), then fade in;
   a quick load never flashes them. */
:is(.profile-skeleton, .skeleton-row) { transition: opacity .2s ease; }
html.loading-grace :is(.profile-skeleton, .skeleton-row) { opacity: 0; }

/* Loading skeleton: Bootstrap placeholders laid out like the page (profile.html). */
.profile-skeleton { display: grid; gap: 24px; }
.profile-skeleton .placeholder { display: block; border-radius: 6px; opacity: .14; background-color: var(--text); }
.skeleton-hero { min-height: 220px; align-items: center; padding-bottom: 28px; }
.skeleton-hero .welcome-text { display: grid; gap: 12px; padding-bottom: 0; }
.skeleton-avatar { width: 96px; height: 150px; border-radius: 14px !important; flex-shrink: 0; }
.profile-skeleton .lb-stat > div { display: grid; gap: 8px; }
.skeleton-panel { display: grid; gap: 14px; padding: 18px 20px 22px; }
.skeleton-tabs { display: flex; gap: 8px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.skeleton-tabs .placeholder { flex-shrink: 1; min-width: 0; }
@media (max-width: 760px) { .skeleton-avatar { display: none; } .skeleton-hero { min-height: 0; } }

/* Loading rows in lists and tables everywhere (site.js turns each "Loading…" into these). */
.skeleton-row .placeholder { display: block; border-radius: 6px; opacity: .14; background-color: var(--text); }
li.skeleton-row { list-style: none; }
.skeleton-person { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.skeleton-face { width: 34px; height: 34px; border-radius: 50% !important; flex-shrink: 0; }
.skeleton-lines { flex: 1; display: grid; gap: 8px; max-width: 320px; }
.skeleton-log { display: grid; gap: 8px; padding: 14px 16px 14px 20px; border: 1px solid transparent; border-radius: 10px; background: var(--panel); }
.skeleton-card { display: grid; gap: 12px; padding: 20px; align-content: start; min-height: 260px; }

/* Units they're in, leaders first. */
.profile-unit-list { list-style: none; padding: 8px; display: grid; gap: 2px; }
.profile-unit { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: inherit; transition: background .15s; }
.profile-unit:hover { background: var(--bg-alt); }
.profile-unit .tag { margin: 0; min-width: 36px; text-align: center; }
.profile-unit-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; }

/* Under the rank: "● Online now · Joined 13 June 2026", or "On leave until …". */
.profile-meta { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.profile-meta li { display: inline-flex; align-items: center; gap: 7px; }
.profile-meta .icon { width: 15px; height: 15px; }
.profile-meta-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.profile-meta-online { color: var(--green); font-weight: 600; }
.profile-meta-online .profile-meta-dot { box-shadow: 0 0 0 3px rgba(var(--green-rgb), .2); }
.profile-meta-leave { color: var(--amber); font-weight: 600; }

/* Copy link, next to the name: small and quiet until hovered. */
.profile-name .profile-copy { margin-left: 12px; min-height: 30px; padding: 3px 10px; font-size: 12px; font-family: var(--font-ui); letter-spacing: 0; vertical-align: middle; }
.profile-copy .icon { width: 14px; height: 14px; }

/* From Habbo: their motto as a quote, then the badges they show off. */
.profile-habbo { margin-top: 14px; display: grid; gap: 10px; }
.profile-motto { font-size: 14px; color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
.profile-motto::before { content: "“"; } .profile-motto::after { content: "”"; }
.profile-motto[hidden] { display: none; }
.profile-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.profile-badges li { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid transparent; transition: transform .25s var(--ease-out), border-color .15s; }
.profile-badges li:hover { transform: translateY(-2px); }
.profile-badges img { image-rendering: pixelated; cursor: help; }

@media (max-width: 760px) {
  .profile-card { min-height: 0; }
  .profile-card .welcome-avatar { width: 56px; filter: none; }
  .profile-card::after { display: none; }
  .profile-card .profile-name { padding-right: 60px; }
}
.empty[hidden] { display: none; }

/* Notifications page */
.notify-list { padding: 12px; }
.notify-list .log-item.unread { border-color: transparent; background: rgba(var(--accent-rgb), .05); }
.notify-list .log-item.unread p:first-child::after {
  content: "New";
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0 5px;
  vertical-align: 2px;
}
.log-approved::before, .log-deletion_declined::before { background: var(--green); }
.log-deleted::before, .log-denied::before { background: var(--red); }

/* Compact mode (Settings): tighter spacing across the portal. */
[data-compact] .portal-main { padding: 20px 24px 48px; gap: 16px; }
[data-compact] .panel-head { padding: 10px 16px; }
[data-compact] .settings-body { padding: 14px 16px; gap: 10px; }
[data-compact] .settings-grid { gap: 16px; }
[data-compact] .staff-table th { padding-top: 8px; padding-bottom: 8px; }
[data-compact] .staff-table td { padding-top: 5px; padding-bottom: 5px; }
[data-compact] .person-row, [data-compact] .device { padding: 4px 8px; }
[data-compact] .member { padding: 6px 12px; }
[data-compact] .log-list { gap: 4px; }
[data-compact] .log-item { padding: 7px 14px 7px 18px; }
[data-compact] .side-link { padding: 6px 12px; }
[data-compact] .form { gap: 12px; }
[data-compact] .form .check { padding: 8px 12px; }

/* Approvals page */
.side-count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.seg-count:not(:empty) {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .16);
  color: var(--text);
  font-size: 11px;
}
.request-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.request {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 10px;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 12px;
  transition: border-color .15s;
}
.request-avatar { width: 46px; height: auto; image-rendering: pixelated; flex-shrink: 0; align-self: flex-end; margin-bottom: -4px; }
.request-main { flex: 1; min-width: 0; }
.request-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.request-when { color: var(--muted); font-size: 13px; }
.request-actions { display: flex; flex-direction: column; gap: 6px; }
.request-actions .btn { padding: 6px 14px; }
.request-actions .btn:disabled { opacity: .5; cursor: wait; transform: none; }
.request-list .empty { grid-column: 1 / -1; }

/* Register: request sent */

/* Promote page */
.btn-promote { color: #fff; background: linear-gradient(180deg, #2fbf74 0%, #1f9a5a 100%); border-color: transparent; }
.btn-promote:hover { background: linear-gradient(180deg, #38cc7f 0%, #22a862 100%); }
.btn-demote { color: var(--red-text); background: rgba(229, 56, 59, .06); border-color: transparent; box-shadow: none; }
.btn-demote:hover { background: rgba(229, 56, 59, .14); border-color: transparent; box-shadow: none; }
.btn-danger { color: #fff; background: linear-gradient(180deg, #ef4b4e 0%, #c4292c 100%); border-color: transparent; }
.btn-danger:hover { background: linear-gradient(180deg, #f45b5e 0%, #d03033 100%); }
.promo-actions { display: flex; gap: 6px; justify-content: flex-end; }
.promo-actions .btn { font-family: inherit; cursor: pointer; padding: 6px 12px; }
.promo-actions .btn:disabled { opacity: .3; cursor: not-allowed; transform: none; }
.promo-table td { vertical-align: middle; }
.promo-table th, .promo-table td { padding-left: 14px; padding-right: 14px; }
.status-pill.cooldown { color: var(--accent); background: rgba(var(--accent-rgb),.08); border-color: transparent; font-variant-numeric: tabular-nums; }

.confirm { width: min(480px, calc(100% - 32px)); }
.rank-move-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 14px 5px 10px;
  border-radius: 8px;
}
.badge svg { width: 18px; height: 15px; }
.text-link { color: var(--accent); }

/* Admin panel */
.admin { padding: 20px; }
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.seg { display: inline-flex; background: var(--panel); border: 1px solid transparent; border-radius: 10px; padding: 4px; }
.seg button {
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.seg button:hover { color: var(--text); }
.seg button[aria-selected="true"] { background: var(--bg-alt); color: var(--accent); }
.search {
  flex: 1;
  max-width: 340px;
  min-width: 0;
  background: var(--bg);
  border: 1px solid transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  font-size: 15px;
}
.search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15); }
.search[hidden] { display: none; }
.count { color: var(--muted); font-size: 14px; margin-bottom: 10px; }

.member-list { list-style: none; display: grid; gap: 8px; }
.member {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 14px;
}
.member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  image-rendering: pixelated;
  background: var(--bg-alt);
  border: 1px solid transparent;
}
.member-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.member-none { color: var(--muted); font-style: italic; }
.member-units { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.member-units:empty { display: none; }
.member-units .tag { margin: 0; }
.member .btn { font-family: inherit; cursor: pointer; }
.member-locked { color: var(--muted); font-size: 13px; padding: 0 14px; }
/* Edit / Locked always sits in the last column, even for members without units (whose units box is hidden). */
.member > .btn, .member > .member-locked { grid-column: -2 / -1; grid-row: 1; }
.empty {
  list-style: none;
  color: var(--muted);
  padding: 28px 16px;
  text-align: center;
  background: var(--panel);
  border: 1px dashed transparent;
  border-radius: var(--radius);
}

.log-list { list-style: none; display: grid; gap: 8px; }
.log-item {
  position: relative;
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 16px 12px 20px;
  font-size: 15px;
  color: var(--muted);
}
.log-item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.log-promoted::before { background: var(--green); }
.log-demoted::before, .log-rank_removed::before { background: var(--red); }
.log-item strong { color: var(--text); font-weight: 600; }
/* Ranks with their division labels, unit tags and the person's name (a link to their profile) inside the text. */
.log-item > p:first-child { line-height: 1.75; }
.log-item .member-rank { color: var(--text); font-weight: 600; }
.log-item .tag { margin: 0 1px; padding: 1px 6px; font-size: 11px; vertical-align: 1px; }
.log-actor { color: var(--text); font-weight: 600; }
.log-actor:hover { color: var(--accent); }
.log-note { font-size: 14px; margin-top: 2px; }
.log-note-label { color: var(--text); font-weight: 600; }
.log-item time { display: block; font-size: 12px; margin-top: 4px; opacity: .8; }

.editor {
  margin: auto;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  background: var(--panel);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.editor::backdrop { background: rgba(5, 8, 14, .72); backdrop-filter: blur(3px); }
.editor-head { display: flex; align-items: center; gap: 14px; }
.editor-head .eyebrow { margin-bottom: 2px; }
.editor-head h2 { font-size: 28px; overflow-wrap: anywhere; }
.editor-close {
  margin-left: auto;
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 8px;
}
.editor-close:hover { color: var(--text); background: var(--bg-alt); }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; border: 0; min-width: 0; }
.field legend { margin-bottom: 6px; }
.rank-quick-buttons { display: flex; gap: 8px; flex-shrink: 0; }
.form .btn-small:disabled { opacity: .4; cursor: not-allowed; }
.change-hint { font-size: 13px; font-weight: 500; color: var(--green); }
.change-hint.down { color: var(--red-text); }
.unit-pick { display: grid; gap: 6px; }
.form .unit-opt {
  grid-template-columns: 40px 1fr 150px;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 6px 6px 10px;
  transition: border-color .15s;
}
.form .unit-opt.in-unit { border-color: transparent; }
.unit-opt .tag { margin: 0; align-self: center; justify-self: start; min-width: 36px; text-align: center; }
.unit-opt-name { line-height: 1.3; }
.unit-opt-name .optional { display: block; font-size: 12px; }
.form .unit-opt select { padding-top: 7px; padding-bottom: 7px; background-color: var(--panel); }
.optional { color: var(--muted); font-weight: 400; }
.form .check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
}
.form .check[hidden] { display: none; }
.form .check input { width: 18px; height: 18px; margin-top: 2px; padding: 0; accent-color: var(--accent); cursor: pointer; }
.check-desc { display: block; color: var(--muted); font-weight: 400; font-size: 13px; line-height: 1.45; margin-top: 2px; }
.admin-chip {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb),.12);
  border-radius: 5px;
  padding: 1px 6px;
}
.user-tag { margin-left: 6px; font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 1px; color: var(--muted); border: 1px solid transparent; border-radius: 5px; padding: 0 5px; vertical-align: 1px; }
.log-admin_granted::before { background: var(--green); }
.log-admin_removed::before { background: var(--red); }
.editor-actions { display: flex; gap: 10px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid transparent;
  color: var(--text);
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  font-size: 14px;
  font-weight: 600;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Footer */
.footer { border-top: 1px solid var(--border); background: var(--bg-alt); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; padding-top: 48px; padding-bottom: 36px; }
.footer-about .disclaimer { margin-top: 14px; max-width: 360px; }
.footer-col h4 { font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); margin-bottom: 12px; }
.footer-col a { display: block; color: var(--muted); font-size: 14px; padding: 4px 0; transition: color .15s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 18px; padding-bottom: 24px; }
.disclaimer, .footer-bottom { color: var(--muted); font-size: 13px; }

/* Portal on smaller screens: the sidebar turns into a scrolling row of links under the header. */
@media (max-width: 900px) {
  .portal { grid-template-columns: 1fr; }
  .side-nav { display: flex; gap: 4px; }
  .side-link { white-space: nowrap; padding: 8px 12px; }
  .side-link.active { box-shadow: inset 0 -2px 0 var(--accent); }
  .side-link.soon { display: none; }
  .portal-main { padding: 24px 16px 56px; gap: 18px; }
}
@media (max-width: 760px) {
  .welcome { display: block; padding: 20px 20px 0; }
  .welcome-avatar { position: absolute; top: 14px; right: 14px; width: 56px; }
  .welcome-text { padding-bottom: 20px; }
  .welcome-text .eyebrow, .welcome h1 { padding-right: 60px; }
  .hide-sm { display: none; }
  .staff-table th, .staff-table td { padding-left: 12px; padding-right: 12px; }
  .staff-table td { white-space: normal; }

  /* Promote list: each member becomes a card (name + status, rank → next, then the buttons). */
  .promo-table, .promo-table tbody, .promo-table td { display: block; }
  .promo-table thead { display: none; }
  .promo-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 10px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
  }
  .promo-table tbody tr:last-child { border-bottom: 0; }
  .promo-table td { padding: 0; border: 0; }
  .promo-table td:nth-child(2) { display: none; }
  .promo-table td:nth-child(3) { grid-column: 1 / -1; font-size: 14px; }
  .promo-table td:nth-child(3)::before { content: "Rank: "; color: var(--muted); }
  .promo-table td:nth-child(4) { display: block; grid-column: 1 / -1; font-size: 14px; }
  .promo-table td:nth-child(4)::before { content: "Next: "; color: var(--muted); }
  .promo-table td:nth-child(5) { grid-column: 2; grid-row: 1; }
  .promo-table td:nth-child(6) { grid-column: 1 / -1; margin-top: 4px; }
  .promo-table .panel-empty { grid-column: 1 / -1; }
  .promo-actions { justify-content: stretch; }
  .promo-actions .btn { flex: 1; text-align: center; padding: 8px 10px; }
  .admin { padding: 14px; }
}

/* Responsive */
@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-menu {
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 16px 16px;
  }
  .nav-menu.open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--border); }
  .nav-link { width: 100%; justify-content: space-between; padding: 14px 4px; border-radius: 0; font-size: 16px; }
  .nav-link:hover, .dropdown.open > .nav-link { background: none; }
  .dropdown-menu { position: static; box-shadow: none; border: 0; background: none; padding: 0 0 10px; min-width: 0; }
  .dropdown-menu::before { display: none; }
  .dropdown-item { padding: 9px 12px; }
  .nav-account { flex-direction: column; align-items: stretch; margin-top: 14px; }
  .nav-account .btn { text-align: center; }
  .nav-account .dropdown { border-bottom: 1px solid var(--border); }
  .account-toggle { padding: 10px 4px; }
  .account-toggle .account-name { margin-right: auto; }

  .brand-text span { display: none; }

  .hero { padding: 64px 0; }
  .hero-inner { grid-template-columns: 1fr; }
  .stats { gap: 28px; }

  .section { padding: 64px 0; }
  .steps { grid-template-columns: 1fr; }
  .member { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px 12px; }
  .member-units { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; }
  .search { max-width: none; flex-basis: 100%; }
  .editor { padding: 20px 16px; }
  .rank-quick-buttons .btn { flex: 1; }
  .form .unit-opt { grid-template-columns: 40px 1fr; padding: 8px 10px; }
  .form .unit-opt select { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

/* Bootstrap v5.3.8 components. MIT License. Copyright 2011-2025 The Bootstrap Authors. */

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-color-rgb: 13, 110, 253;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #0a58ca;
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}

:root {
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-color-rgb: 222, 226, 230;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-color-rgb: 222, 226, 230;
  --bs-tertiary-bg: #2b3035;
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: #6ea8fe;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #161719;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #41464b;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
  --bs-link-color-rgb: 110, 168, 254;
  --bs-link-hover-color-rgb: 139, 185, 254;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: #664d03;
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}

:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search) {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search) {
    transition: none;
  }
}
html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search)[type=file] {
  overflow: hidden;
}
html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search)[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search):focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search)::-webkit-date-and-time-value {
  min-width: 85px;
  height: 1.5em;
  margin: 0;
}
html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search)::-webkit-datetime-edit {
  display: block;
  padding: 0;
}
html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search)::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}
html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search):disabled {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
}
html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search)::-webkit-file-upload-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--bs-border-width);
  border-radius: 0;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search)::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--bs-border-width);
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search)::-webkit-file-upload-button {
    -webkit-transition: none;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search)::file-selector-button {
    transition: none;
  }
}
html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search):hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: var(--bs-secondary-bg);
}
html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search):hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--bs-secondary-bg);
}

html .form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: transparent;
  border: solid transparent;
  border-width: var(--bs-border-width) 0;
}
html .form-control-plaintext:focus {
  outline: 0;
}
html .form-control-plaintext.form-control-sm,html .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

html .form-control-sm {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}
html .form-control-sm::-webkit-file-upload-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
html .form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}

html .form-control-lg {
  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}
html .form-control-lg::-webkit-file-upload-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}
html .form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}

html textarea:is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search) {
  min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
}
html textarea.form-control-sm {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
}
html textarea.form-control-lg {
  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
}

html .form-control-color {
  width: 3rem;
  height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
  padding: 0.375rem;
}
html .form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}
html .form-control-color::-moz-color-swatch {
  border: 0 !important;
  border-radius: var(--bs-border-radius);
}
html .form-control-color::-webkit-color-swatch {
  border: 0 !important;
  border-radius: var(--bs-border-radius);
}
html .form-control-color.form-control-sm {
  height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
}
html .form-control-color.form-control-lg {
  height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
}

html :is(.form-select, .form select) {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  html :is(.form-select, .form select) {
    transition: none;
  }
}
html :is(.form-select, .form select):focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
html :is(.form-select, .form select)[multiple],html :is(.form-select, .form select)[size]:not([size="1"]) {
  padding-right: 0.75rem;
  background-image: none;
}
html :is(.form-select, .form select):disabled {
  background-color: var(--bs-secondary-bg);
}
html :is(.form-select, .form select):-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--bs-body-color);
}

html .form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}

html .form-select-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}

html [data-bs-theme=dark] :is(.form-select, .form select) {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html .btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
html .btn-check[disabled] + :is(.btn, .copy-btn),html .btn-check:disabled + :is(.btn, .copy-btn) {
  pointer-events: none;
  filter: none;
  opacity: 0.65;
}

html .was-validated :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search):valid,html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search).is-valid {
  border-color: var(--bs-form-valid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
html .was-validated :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search):valid:focus,html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search).is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

html .was-validated textarea:is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search):valid,html textarea:is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search).is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

html .was-validated :is(.form-select, .form select):valid,html :is(.form-select, .form select).is-valid {
  border-color: var(--bs-form-valid-border-color);
}
html .was-validated :is(.form-select, .form select):valid:not([multiple]):not([size]),html .was-validated :is(.form-select, .form select):valid:not([multiple])[size="1"],html :is(.form-select, .form select).is-valid:not([multiple]):not([size]),html :is(.form-select, .form select).is-valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
html .was-validated :is(.form-select, .form select):valid:focus,html :is(.form-select, .form select).is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

html .was-validated .form-control-color:valid,html .form-control-color.is-valid {
  width: calc(3rem + calc(1.5em + 0.75rem));
}

html .was-validated :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search):invalid,html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search).is-invalid {
  border-color: var(--bs-form-invalid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
html .was-validated :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search):invalid:focus,html :is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search).is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

html .was-validated textarea:is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search):invalid,html textarea:is(.form-control, :where(.form input:not([type="checkbox"]):not([type="radio"]), .form textarea), .search).is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

html .was-validated :is(.form-select, .form select):invalid,html :is(.form-select, .form select).is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}
html .was-validated :is(.form-select, .form select):invalid:not([multiple]):not([size]),html .was-validated :is(.form-select, .form select):invalid:not([multiple])[size="1"],html :is(.form-select, .form select).is-invalid:not([multiple]):not([size]),html :is(.form-select, .form select).is-invalid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
html .was-validated :is(.form-select, .form select):invalid:focus,html :is(.form-select, .form select).is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

html .was-validated .form-control-color:invalid,html .form-control-color.is-invalid {
  width: calc(3rem + calc(1.5em + 0.75rem));
}

html :is(.btn, .copy-btn) {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  html :is(.btn, .copy-btn) {
    transition: none;
  }
}
html :is(.btn, .copy-btn):hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
html .btn-check + :is(.btn, .copy-btn):hover {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
html :is(.btn, .copy-btn):focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
html .btn-check:focus-visible + :is(.btn, .copy-btn) {
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
html .btn-check:checked + :is(.btn, .copy-btn),html :not(.btn-check) + :is(.btn, .copy-btn):active,html :is(.btn, .copy-btn):first-child:active,html :is(.btn, .copy-btn).active,html :is(.btn, .copy-btn).show {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
html .btn-check:checked + :is(.btn, .copy-btn):focus-visible,html :not(.btn-check) + :is(.btn, .copy-btn):active:focus-visible,html :is(.btn, .copy-btn):first-child:active:focus-visible,html :is(.btn, .copy-btn).active:focus-visible,html :is(.btn, .copy-btn).show:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
html .btn-check:checked:focus-visible + :is(.btn, .copy-btn) {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
html :is(.btn, .copy-btn):disabled,html :is(.btn, .copy-btn).disabled,html fieldset:disabled :is(.btn, .copy-btn) {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}

html :is(.btn-primary, .btn:not(.btn-ghost):not(.btn-outline):not(.btn-promote):not(.btn-demote):not(.btn-danger):not(.btn-success):not(.btn-secondary):not(.btn-outline-danger):not(.btn-outline-secondary):not(.btn-outline-primary)) {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

html .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

html :is(.btn-success, .btn-promote) {
  --bs-btn-color: #fff;
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #146c43;
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #146c43;
  --bs-btn-active-border-color: #13653f;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #198754;
  --bs-btn-disabled-border-color: #198754;
}

html .btn-info {
  --bs-btn-color: #000;
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #31d2f2;
  --bs-btn-hover-border-color: #25cff2;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #3dd5f3;
  --bs-btn-active-border-color: #25cff2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}

html .btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffca2c;
  --bs-btn-hover-border-color: #ffc720;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffcd39;
  --bs-btn-active-border-color: #ffc720;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ffc107;
  --bs-btn-disabled-border-color: #ffc107;
}

html .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}

html .btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d3d4d5;
  --bs-btn-hover-border-color: #c6c7c8;
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c6c7c8;
  --bs-btn-active-border-color: #babbbc;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}

html .btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #424649;
  --bs-btn-hover-border-color: #373b3e;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d5154;
  --bs-btn-active-border-color: #373b3e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}

html .btn-outline-primary {
  --bs-btn-color: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0d6efd;
  --bs-btn-active-border-color: #0d6efd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0d6efd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0d6efd;
  --bs-gradient: none;
}

html :is(.btn-outline-secondary, .btn-ghost, .btn-outline, .copy-btn) {
  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-gradient: none;
}

html .btn-outline-success {
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #198754;
  --bs-btn-active-border-color: #198754;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-gradient: none;
}

html .btn-outline-info {
  --bs-btn-color: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #0dcaf0;
  --bs-btn-hover-border-color: #0dcaf0;
  --bs-btn-focus-shadow-rgb: 13, 202, 240;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #0dcaf0;
  --bs-btn-active-border-color: #0dcaf0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0dcaf0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0dcaf0;
  --bs-gradient: none;
}

html .btn-outline-warning {
  --bs-btn-color: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-focus-shadow-rgb: 255, 193, 7;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ffc107;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ffc107;
  --bs-gradient: none;
}

html :is(.btn-outline-danger, .btn-demote) {
  --bs-btn-color: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dc3545;
  --bs-btn-hover-border-color: #dc3545;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #dc3545;
  --bs-btn-active-border-color: #dc3545;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #dc3545;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #dc3545;
  --bs-gradient: none;
}

html .btn-outline-light {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f8f9fa;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f8f9fa;
  --bs-gradient: none;
}

html .btn-outline-dark {
  --bs-btn-color: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212529;
  --bs-btn-active-border-color: #212529;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #212529;
  --bs-gradient: none;
}

html .btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  text-decoration: underline;
}
html .btn-link:focus-visible {
  color: var(--bs-btn-color);
}
html .btn-link:hover {
  color: var(--bs-btn-hover-color);
}

html .btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

html .tabs-nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

html .tab-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--bs-nav-link-color);
  text-decoration: none;
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  html .tab-link {
    transition: none;
  }
}
html .tab-link:hover,html .tab-link:focus {
  color: var(--bs-nav-link-hover-color);
}
html .tab-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
html .tab-link.disabled,html .tab-link:disabled {
  color: var(--bs-nav-link-disabled-color);
  pointer-events: none;
  cursor: default;
}

html .nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: #0d6efd;
}
html .nav-pills .tab-link {
  border-radius: var(--bs-nav-pills-border-radius);
}
html .nav-pills .tab-link.active,html .nav-pills .show > .tab-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: var(--bs-nav-pills-link-active-bg);
}

html .pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #0d6efd;
  --bs-pagination-active-border-color: #0d6efd;
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}

html .page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--bs-pagination-color);
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  html .page-link {
    transition: none;
  }
}
html .page-link:hover {
  z-index: 2;
  color: var(--bs-pagination-hover-color);
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}
html .page-link:focus {
  z-index: 3;
  color: var(--bs-pagination-focus-color);
  background-color: var(--bs-pagination-focus-bg);
  outline: 0;
  box-shadow: var(--bs-pagination-focus-box-shadow);
}
html .page-link.active,html .active > .page-link {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
}
html .page-link.disabled,html .disabled > .page-link {
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
}

html .page-item:not(:first-child) .page-link {
  margin-left: calc(-1 * var(--bs-border-width));
}
html .page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}
html .page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}

html .pagination-lg {
  --bs-pagination-padding-x: 1.5rem;
  --bs-pagination-padding-y: 0.75rem;
  --bs-pagination-font-size: 1.25rem;
  --bs-pagination-border-radius: var(--bs-border-radius-lg);
}

html .pagination-sm {
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0.25rem;
  --bs-pagination-font-size: 0.875rem;
  --bs-pagination-border-radius: var(--bs-border-radius-sm);
}

html :is(.badge, .status, .status-pill, .chip, .tag, .admin-chip, .user-tag) {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 0.75em;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: var(--bs-border-radius);
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--bs-badge-border-radius);
}
html :is(.badge, .status, .status-pill, .chip, .tag, .admin-chip, .user-tag):empty {
  display: none;
}

html :is(.btn, .copy-btn) :is(.badge, .status, .status-pill, .chip, .tag, .admin-chip, .user-tag) {
  position: relative;
  top: -1px;
}
html .alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}
html .progress,html .progress-stacked {
  --bs-progress-height: 1rem;
  --bs-progress-font-size: 0.75rem;
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: var(--bs-border-radius);
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: #0d6efd;
  --bs-progress-bar-transition: width 0.6s ease;
  display: flex;
  height: var(--bs-progress-height);
  overflow: hidden;
  font-size: var(--bs-progress-font-size);
  background-color: var(--bs-progress-bg);
  border-radius: var(--bs-progress-border-radius);
}

html .progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--bs-progress-bar-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-progress-bar-bg);
  transition: var(--bs-progress-bar-transition);
}
@media (prefers-reduced-motion: reduce) {
  html .progress-bar {
    transition: none;
  }
}

html .progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: var(--bs-progress-height) var(--bs-progress-height);
}

html .progress-stacked > .progress {
  overflow: visible;
}

html .progress-stacked > .progress > .progress-bar {
  width: 100%;
}

html .progress-bar-animated {
  animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
  html .progress-bar-animated {
    animation: none;
  }
}

html .btn-close {
  --bs-btn-close-color: #000;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
  filter: var(--bs-btn-close-filter);
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-opacity);
}
html .btn-close:hover {
  color: var(--bs-btn-close-color);
  text-decoration: none;
  opacity: var(--bs-btn-close-hover-opacity);
}
html .btn-close:focus {
  outline: 0;
  box-shadow: var(--bs-btn-close-focus-shadow);
  opacity: var(--bs-btn-close-focus-opacity);
}
html .btn-close:disabled,html .btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: var(--bs-btn-close-disabled-opacity);
}

html .btn-close-white {
  --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

:root {
  --bs-btn-close-filter: ;
}

:root {
  --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}
html .toast-header .btn-close {
  margin-right: calc(-0.5 * var(--bs-toast-padding-x));
  margin-left: var(--bs-toast-padding-x);
}
html .modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
  margin-top: calc(-0.5 * var(--bs-modal-header-padding-y));
  margin-right: calc(-0.5 * var(--bs-modal-header-padding-x));
  margin-bottom: calc(-0.5 * var(--bs-modal-header-padding-y));
  margin-left: auto;
}
:root {
  --bs-carousel-indicator-active-bg: #fff;
  --bs-carousel-caption-color: #fff;
  --bs-carousel-control-icon-filter: ;
}
:root {
  --bs-carousel-indicator-active-bg: #000;
  --bs-carousel-caption-color: #000;
  --bs-carousel-control-icon-filter: invert(1) grayscale(100);
}
html .offcanvas-header .btn-close {
  padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
  margin-left: auto;
}

html .placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentcolor;
  opacity: 0.5;
}
html .placeholder:is(.btn, .copy-btn)::before {
  display: inline-block;
  content: "";
}

html .placeholder-xs {
  min-height: 0.6em;
}

html .placeholder-sm {
  min-height: 0.8em;
}

html .placeholder-lg {
  min-height: 1.2em;
}

html .placeholder-glow .placeholder {
  animation: placeholder-glow 2s ease-in-out infinite;
}
html .placeholder-wave {
  -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  animation: placeholder-wave 2s linear infinite;
}

html .border {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

html .border-0 {
  border: 0 !important;
}

html .border-top {
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

html .border-top-0 {
  border-top: 0 !important;
}

html .border-end {
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

html .border-end-0 {
  border-right: 0 !important;
}

html .border-bottom {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

html .border-bottom-0 {
  border-bottom: 0 !important;
}

html .border-start {
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

html .border-start-0 {
  border-left: 0 !important;
}

html .border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}

html .border-secondary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
}

html .border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

html .border-info {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
}

html .border-warning {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
}

html .border-danger {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
}

html .border-light {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
}

html .border-dark {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
}

html .border-black {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important;
}

html .border-white {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
}

html .border-primary-subtle {
  border-color: var(--bs-primary-border-subtle) !important;
}

html .border-secondary-subtle {
  border-color: var(--bs-secondary-border-subtle) !important;
}

html .border-success-subtle {
  border-color: var(--bs-success-border-subtle) !important;
}

html .border-info-subtle {
  border-color: var(--bs-info-border-subtle) !important;
}

html .border-warning-subtle {
  border-color: var(--bs-warning-border-subtle) !important;
}

html .border-danger-subtle {
  border-color: var(--bs-danger-border-subtle) !important;
}

html .border-light-subtle {
  border-color: var(--bs-light-border-subtle) !important;
}

html .border-dark-subtle {
  border-color: var(--bs-dark-border-subtle) !important;
}

html .border-1 {
  border-width: 1px !important;
}

html .border-2 {
  border-width: 2px !important;
}

html .border-3 {
  border-width: 3px !important;
}

html .border-4 {
  border-width: 4px !important;
}

html .border-5 {
  border-width: 5px !important;
}

html .border-opacity-10 {
  --bs-border-opacity: 0.1;
}

html .border-opacity-25 {
  --bs-border-opacity: 0.25;
}

html .border-opacity-50 {
  --bs-border-opacity: 0.5;
}

html .border-opacity-75 {
  --bs-border-opacity: 0.75;
}

html .border-opacity-100 {
  --bs-border-opacity: 1;
}

html .text-body-emphasis {
  --bs-text-opacity: 1;
  color: var(--bs-emphasis-color) !important;
}

html .text-primary-emphasis {
  color: var(--bs-primary-text-emphasis) !important;
}

html .text-secondary-emphasis {
  color: var(--bs-secondary-text-emphasis) !important;
}

html .text-success-emphasis {
  color: var(--bs-success-text-emphasis) !important;
}

html .text-info-emphasis {
  color: var(--bs-info-text-emphasis) !important;
}

html .text-warning-emphasis {
  color: var(--bs-warning-text-emphasis) !important;
}

html .text-danger-emphasis {
  color: var(--bs-danger-text-emphasis) !important;
}

html .text-light-emphasis {
  color: var(--bs-light-text-emphasis) !important;
}

html .text-dark-emphasis {
  color: var(--bs-dark-text-emphasis) !important;
}

html .bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
}

html .bg-secondary-subtle {
  background-color: var(--bs-secondary-bg-subtle) !important;
}

html .bg-success-subtle {
  background-color: var(--bs-success-bg-subtle) !important;
}

html .bg-info-subtle {
  background-color: var(--bs-info-bg-subtle) !important;
}

html .bg-warning-subtle {
  background-color: var(--bs-warning-bg-subtle) !important;
}

html .bg-danger-subtle {
  background-color: var(--bs-danger-bg-subtle) !important;
}

html .bg-light-subtle {
  background-color: var(--bs-light-bg-subtle) !important;
}

html .bg-dark-subtle {
  background-color: var(--bs-dark-bg-subtle) !important;
}

@keyframes progress-bar-stripes {
  0% {
    background-position-x: var(--bs-progress-height);
  }
}

@keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}

@keyframes placeholder-wave {
  100% {
    -webkit-mask-position: -200% 0%;
    mask-position: -200% 0%;
  }
}
/* Shared ASB navigation: glass, blue accents and one workspace across every page. */
html.unified-navigation { --menu-glass:var(--panel); --nav-highlight:#6ea8fe; --nav-hover-bg:rgba(126,164,227,.09); }
html.unified-navigation .nav {
  background:var(--bg);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:1px solid var(--border);
  box-shadow:none;
}
html.unified-navigation .nav-inner { width:100%; max-width:none; padding:0 32px; gap:20px; }
html.unified-navigation .brand { min-width:0; }
html.unified-navigation .brand-logo { filter:drop-shadow(0 0 10px #72a5ff28); }
html.unified-navigation .brand-text { font-size:17px; letter-spacing:-.3px; white-space:nowrap; }
html.unified-navigation .nav-list { gap:5px; }
html.unified-navigation .nav-link { padding:9px 12px; border-radius:10px; font-size:13px; font-weight:600; white-space:nowrap; transition:none; }
html.unified-navigation .nav-link:hover { color:var(--text); background:var(--nav-hover-bg); }
html.unified-navigation .nav-link.active {
  color:var(--nav-highlight); background:rgba(13,110,253,.1); box-shadow:none;
}
html.unified-navigation .nav-link.active:hover { color:var(--nav-highlight); background:rgba(13,110,253,.16); }
html.unified-navigation .dropdown.open > .nav-link:not(.active) {
  color:var(--text); background:var(--panel); box-shadow:none;
}
html.unified-navigation .nav-link:focus-visible,
html.unified-navigation .tools-link:focus-visible,
html.unified-navigation .header-notifications:focus-visible,
html.unified-navigation .nav-toggle:focus-visible { outline:2px solid var(--nav-highlight); outline-offset:3px; }
html.unified-navigation .member-navigation { display:flex; align-items:center; gap:5px; }
html.unified-navigation .member-navigation:empty { display:none; }
.portal-nav-label { display:inline-flex; align-items:center; gap:7px; }
html.unified-navigation .nav-account { gap:10px; }
html.unified-navigation .account-toggle { min-height:42px; gap:9px; padding:5px 11px 5px 5px; border:1px solid transparent; border-radius:10px; }
html.unified-navigation .account-avatar { width:30px; height:30px; border-radius:9px; }
html.unified-navigation .account-name { font-size:13px; color:inherit; }
html.unified-navigation .header-notifications {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 9px; gap:6px; flex-shrink:0; border:1px solid transparent; border-radius:6px; color:var(--muted);
}
html.unified-navigation .header-notifications:hover { color:var(--nav-highlight); background:#609bff12; }
html.unified-navigation .header-notifications.has-unread { color:#fff; background:#0d6efd; }
html.unified-navigation .header-notifications.has-unread:hover { color:#fff; background:#0b5ed7; }
html.unified-navigation .header-notifications .icon { display:block; width:17px; height:17px; flex-shrink:0; }
html.unified-navigation .header-notification-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:20px; padding:0 4px; border-radius:4px; background:#ffffff26; color:#fff; font-size:11px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
/* Site search: a button left of the bell (or Log in); its box lists the pages you can open. */
html.unified-navigation .site-search { position:relative; }
html.unified-navigation .header-search-toggle {
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0;
  border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer;
}
html.unified-navigation .header-search-toggle::after { display:none; }
html.unified-navigation .header-search-toggle:hover, html.unified-navigation .site-search.open .header-search-toggle { color:var(--nav-highlight); background:#609bff12; }
html.unified-navigation .header-search-toggle:focus-visible { outline:2px solid var(--nav-highlight); outline-offset:3px; }
html.unified-navigation .header-search-toggle .icon { width:17px; height:17px; }
html.unified-navigation .search-menu { width:min(380px,calc(100vw - 32px)); left:auto; right:0; padding:8px; }
html.unified-navigation .search-input { min-height:38px; font-size:13px; background-color:var(--bg-alt); border-color:transparent; }
.search-results { display:grid; gap:2px; margin-top:6px; }
.search-hint { margin:0; padding:10px 11px; color:var(--muted); font-size:13px; }
.search-result { display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:var(--control-radius); color:var(--text); }
.search-result:hover, .search-result:focus-visible { color:var(--text); background:var(--nav-hover-bg); outline:none; }
.search-result.active { color:var(--nav-highlight); background:rgba(13,110,253,.1); }
.search-result > .icon { width:16px; height:16px; flex-shrink:0; color:var(--muted); }
.search-result-text { display:grid; min-width:0; }
.search-result-label { font-size:13px; font-weight:600; }
.search-result-desc { overflow:hidden; color:var(--muted); font-size:12px; white-space:nowrap; text-overflow:ellipsis; }
@media(max-width:1000px) {
  html.unified-navigation .site-search { order:-1; flex-basis:100%; }
  html.unified-navigation .header-search-toggle { display:none; }
  html.unified-navigation .dropdown.site-search > .dropdown-menu.search-menu { display:block; width:100%; margin:0 0 10px; padding:0; background:transparent; }
}
html.unified-navigation .dropdown:not(.open) > .dropdown-menu { display:none; }
html.unified-navigation .dropdown:not(.open):hover .chev { transform:none; }
html.unified-navigation .dropdown-menu {
  top:calc(100% + 6px); background:var(--panel);
  border:0; border-radius:12px;
  box-shadow:0 12px 28px #00000030; padding:8px;
  max-height:calc(100dvh - 86px); overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#46546b transparent;
}
html.unified-navigation .dropdown-menu::-webkit-scrollbar { width:8px; }
html.unified-navigation .dropdown-menu::-webkit-scrollbar-thumb { background:#46546b; border:2px solid var(--panel); border-radius:8px; }
html.unified-navigation .dropdown-menu::-webkit-scrollbar-track { background:transparent; }
html.unified-navigation .dropdown-item { border-radius:var(--control-radius); transition:none; }
html.unified-navigation .dropdown-item:hover { color:var(--text); background:var(--nav-hover-bg); }
html.unified-navigation .dropdown-item.active { background:rgba(13,110,253,.1); color:var(--nav-highlight); }
html.unified-navigation .dropdown-item.active:hover { background:rgba(13,110,253,.16); }
html.unified-navigation .dropdown-item.active .di-label { color:var(--nav-highlight); }
html.unified-navigation .dropdown-item.active .di-desc { color:var(--muted); }
html.unified-navigation .account-menu { min-width:200px; padding:8px; }
html.unified-navigation .account-menu .dropdown-item { display:flex; align-items:center; gap:10px; min-height:36px; padding:9px 11px; }
html.unified-navigation .account-menu .di-label { font-size:13px; font-weight:500; }
html.unified-navigation .account-menu .icon { width:16px; height:16px; color:var(--muted); flex-shrink:0; }
html.unified-navigation .account-menu .dropdown-item.active :is(.icon,.di-label) { color:var(--nav-highlight); }
.account-menu-separator { height:1px; margin:6px 7px; background:var(--border); }
.dropdown-group-heading { margin:7px 4px 3px; padding:11px 8px 4px; border-top:1px solid var(--border); color:var(--muted); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
html.unified-navigation .dropdown-compact .dropdown-item { display:flex; align-items:center; min-height:36px; padding:9px 11px; border-radius:var(--control-radius); }
html.unified-navigation .dropdown-compact .di-label { font-size:13px; font-weight:500; }
.dropdown-compact .dropdown-group-heading { margin:5px 2px 2px; padding:8px 8px 3px; font-size:9px; }
@media(min-width:1001px) {
  html.unified-navigation .dropdown-compact > .dropdown-menu { min-width:210px; width:220px; }
}
@media(max-width:1000px) {
  html.unified-navigation .dropdown-compact .dropdown-item { min-height:44px; }
}
html.unified-navigation .tools-menu { width:min(420px,calc(100vw - 32px)); left:auto; right:0; padding:8px; }
.tools-grid { display:grid; gap:8px; }
.tools-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; align-content:start; gap:4px 6px; }
.tools-group + .tools-group { border-top:1px solid var(--border); padding-top:8px; }
.tools-heading { grid-column:1/-1; margin:3px 9px 5px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.tools-link { display:flex; align-items:center; gap:9px; min-height:36px; padding:9px 11px; border-radius:var(--control-radius); color:var(--text); font-size:13px; font-weight:500; line-height:1.5; }
.tools-link > .icon { width:16px; height:16px; color:var(--muted); }
.tools-link { transition:none; }
.tools-link:hover { color:var(--text); background:var(--nav-hover-bg); }
.tools-link.active { color:var(--nav-highlight); background:rgba(13,110,253,.1); box-shadow:none; }
.tools-link.active:hover { color:var(--nav-highlight); background:rgba(13,110,253,.16); }
.tools-link.active > .icon { color:var(--nav-highlight); }
.tools-count { margin-left:auto; min-width:16px; padding:1px 4px; border-radius:5px; background:#0d6efd; color:#fff; font-size:10px; font-weight:700; text-align:center; }
html.unified-navigation .portal { display:block; }
html.unified-navigation .portal-main { max-width:1560px; margin:0 auto; padding:32px 32px 72px; }
@media(min-width:1001px) {
  html.unified-navigation .nav-inner { display:grid; grid-template-columns:1fr auto 1fr; }
  html.unified-navigation .nav-menu { display:contents; }
  html.unified-navigation .nav-list { grid-column:2; }
  html.unified-navigation .nav-account { grid-column:3; justify-self:end; }
}
@media(min-width:1001px) and (max-width:1280px) {
  html.unified-navigation .brand-text span { display:none; }
}
@media(max-width:1000px) {
  html.unified-navigation .nav-inner { display:flex; padding:0 20px; justify-content:space-between; }
  html.unified-navigation .nav-toggle { display:block; border:1px solid transparent; border-radius:10px; }
  html.unified-navigation .nav-menu {
    display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    padding:12px 16px 20px; max-height:calc(100dvh - 64px); overflow-y:auto;
    background:var(--menu-glass); border-bottom:1px solid var(--border); box-shadow:0 24px 40px #0003;
  }
  html.unified-navigation .nav-menu.open { display:flex; }
  html.unified-navigation .nav-list { display:flex; flex-direction:column; align-items:stretch; gap:3px; }
  html.unified-navigation .nav-list > li { border:0; }
  html.unified-navigation .nav-link { width:100%; min-height:44px; justify-content:space-between; padding:12px; font-size:14px; }
  html.unified-navigation .member-navigation { display:flex; flex-direction:column; align-items:stretch; gap:3px; }
  html.unified-navigation .dropdown-menu { position:static; min-width:0; max-height:none; width:100%; margin:4px 0 10px; border:1px solid transparent; box-shadow:none; padding:8px; }
  html.unified-navigation .dropdown-menu::before { display:none; }
  html.unified-navigation .tools-menu { width:100%; padding:8px; }
  html.unified-navigation .nav-account { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:14px; margin-top:12px; }
  html.unified-navigation .account { flex:1; }
  html.unified-navigation .account-toggle { padding:5px 10px 5px 5px; }
  html.unified-navigation .account .dropdown-menu { width:100%; }
  html.unified-navigation .portal-main { padding:24px 20px 56px; }
}
@media(max-width:600px) {
  html.unified-navigation .brand-text { font-size:15px; }
  html.unified-navigation .brand-text span { display:none; }
  .tools-link { min-height:44px; font-size:12px; }
  html.unified-navigation .portal-main { padding:20px 16px 48px; }
}

/* Shared design refinements. Existing component hooks keep working on every page. */
html .hero .home-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding-top:20px; border-top:1px solid var(--border); }
@media (min-width:541px) { html .hero .home-stats.stats-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } } /* Registered users hidden (home.js) */
html .hero .home-stats > div { min-width:0; }
html .hero .home-stats dt { min-height:36px; font-size:12px; font-weight:500; line-height:18px; letter-spacing:0; text-transform:none; }
html .hero .home-stats dd { margin:8px 0 0; font-size:30px; line-height:38px; font-variant-numeric:tabular-nums; }
html .hero .home-stats dd.is-unavailable { font-size:12px; font-weight:400; color:var(--muted); }
.home-stat-placeholder { display:inline-block; width:48px; height:26px; border-radius:4px; background:var(--border); vertical-align:middle; }
.home-stats-note { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-top:12px; color:var(--muted); font-size:11px; line-height:1.6; }
.home-stats-note button { border:0; background:none; padding:0; font:inherit; cursor:pointer; }
.home-stats-note button[hidden] { display:none; }
@media(max-width:540px) {
  html .hero .home-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
  html .hero .home-stats dt { min-height:0; }
  html .hero .home-stats dd { margin-top:4px; }
}
:root {
  --control-radius:.375rem;
  --bs-font-sans-serif: var(--font-ui);
  --bs-body-font-family: var(--font-ui);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg-alt);
  --bs-border-color: #334056;
  --bs-border-radius: .375rem;
  --bs-border-radius-sm: .3rem;
  --bs-primary-rgb: 13, 110, 253;
}
/* Bootstrap's scoped promotion stylesheet must use the same family as the site. */
html .promotion-ui { --bs-font-sans-serif:var(--font-ui); --bs-body-font-family:var(--font-ui); }
html body :is(.btn, .copy-btn) {
  background-image:none !important; box-shadow:none; transform:none !important;
  font-family:inherit; font-weight:500; letter-spacing:0; text-transform:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--control-radius); text-decoration:none; min-height:40px;
  transition:none;
}
html body :is(.btn, .copy-btn):hover { box-shadow:none; }
/* Flat button edges across Bootstrap controls, custom buttons and icon actions.
   Keep the transparent border space so control sizes stay consistent. */
html body :is(button,[role="button"],.btn,.copy-btn,.page-link,.header-notifications) { border-color:transparent !important; border-radius:var(--control-radius) !important; }
html body :is(.btn, .copy-btn):focus-visible { outline:0; box-shadow:0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb,13,110,253),.4); }
html body :is(.btn, .copy-btn):disabled { opacity:.55; cursor:not-allowed; }
html body :is(.btn-disabled,.btn-disabled:hover) { background-color:#263246; border-color:transparent; color:#a9b4c6; pointer-events:none; opacity:.65; }
html body :is(.btn-small,.btn-sm,.copy-btn) { min-height:36px; font-size:.8125rem; line-height:1.5; padding:.375rem .75rem; }
html body .btn[hidden] { display:none; }
html [hidden]:not([hidden="until-found"]) { display:none !important; }
html body :is(.btn-outline-secondary,.btn-ghost,.btn-outline,.copy-btn) {
  --bs-btn-color:#c3cddd; --bs-btn-bg:rgba(126,164,227,.09); --bs-btn-border-color:#46546b;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#293448; --bs-btn-hover-border-color:#61728c;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#293448; --bs-btn-active-border-color:#61728c;
}
/* Secondary blue actions use a soft fill, then solid blue on hover. */
html body .btn-outline-primary {
  --bs-btn-color:#6ea8fe; --bs-btn-bg:rgba(13,110,253,.1); --bs-btn-border-color:#3d8bfd;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#0d6efd; --bs-btn-hover-border-color:#0d6efd;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#0b5ed7; --bs-btn-active-border-color:#0a58ca;
}
/* Demote, Decline, Deny and Remove: solid red, the counterpart of the solid green Promote / Accept / Approve. */
html body :is(.btn-outline-danger,.btn-demote) {
  --bs-btn-color:#fff; --bs-btn-bg:#dc3545; --bs-btn-border-color:#dc3545;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#bb2d3b; --bs-btn-hover-border-color:#b02a37;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#b02a37; --bs-btn-active-border-color:#a52834;
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#dc3545; --bs-btn-disabled-border-color:#dc3545;
}
html :is(.badge,.status,.status-pill,.chip,.tag,.admin-chip,.user-tag) {
  font-family:inherit; font-size:11px; line-height:1.35; font-weight:600; letter-spacing:.015em;
  text-transform:none; vertical-align:middle; border-radius:.375rem;
  padding:.35em .65em; width:fit-content; gap:6px;
  background-color:#b4c3d912; border:1px solid transparent; color:#bfcbdc;
}
html body :is(.badge,.status,.status-pill,.chip,.tag,.admin-chip,.user-tag,.division-badge,.crown-badge,.unit-role,.profile-unit-pos) { border-color:transparent !important; }
html :is(.status-open,.status-pill.online) { color:#75b798; background-color:#051b11; border-color:transparent; }
html :is(.status,.status-pill)::before { box-shadow:none; }
html .badge svg { width:15px; height:15px; }
html :is(button,input,select,textarea,optgroup,option) { font-family:var(--font-ui); }
html :is(.form input:not([type=checkbox]):not([type=radio]),.form textarea,.form select,.search) {
  min-height:42px; font-family:inherit; font-size:14px; font-weight:400; line-height:1.5;
  border-radius:.375rem; background-color:var(--bg-alt); border-color:transparent;
}
html :is(.form input:not([type=checkbox]):not([type=radio]),.form textarea,.form select,.search):focus {
  background-color:var(--bg-alt); border-color:#86b7fe; outline:0;
  box-shadow:0 0 0 .25rem #0d6efd30;
}
html :is(.form label,.field) { font-size:13px; font-weight:500; gap:8px; }
html :is(.form .optional,.member-field-label) { font-size:12px; color:var(--muted); }
html .form { gap:20px; }
html .form .check { align-items:flex-start; }
html .form .check input { flex-shrink:0; accent-color:#0d6efd; }
html .form .tag-input input { padding-right:110px; }
html .seg { gap:4px; padding:4px; border-radius:.5rem; background:var(--bg-alt); align-items:center; }
html .seg button { min-height:34px; border-radius:.375rem; padding:7px 14px; font-size:13px; line-height:1.5; }
html .seg button[aria-selected=true] { color:#fff; background:#0d6efd; }
html :is(.admin-bar,.panel-head,.page-meta) { gap:16px; align-items:center; }
html .admin-bar { margin-bottom:24px; }
html .search { padding:9px 12px; }
html .panel { border-radius:12px; }
html .panel-head { padding:20px 24px; }
html .staff-table :is(th,td) { padding:14px 16px; vertical-align:middle; }
html .staff-table th { color:#a9b7cb; font-size:11px; font-weight:600; letter-spacing:.08em; }
html .staff-table td { font-size:14px; }
html :is(.settings-actions,.request-actions,.editor-actions,.confirm-actions) { gap:10px; align-items:center; }
html .request-actions .btn { width:100%; }
html :is(.editor,.confirm) { border-radius:12px; padding:24px; }
html .editor-close { display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; }
html .rank-move-label { margin-bottom:5px; font-size:10px; letter-spacing:.08em; }
html .form-error { border-radius:.375rem; }
@media(max-width:760px) {
  html body :is(.btn,.copy-btn) { min-height:44px; }
  html .admin-bar { align-items:stretch; gap:12px; }
  html .admin-bar .search { max-width:none; flex-basis:100%; }
  html .seg { max-width:100%; overflow-x:auto; }
  html .seg button { white-space:nowrap; min-height:40px; }
  html .panel-head { padding:16px; flex-wrap:wrap; }
  html :is(.editor,.confirm) { padding:20px; }
  html .staff-table :is(th,td) { padding:12px; }
  html .promo-table td { padding:0; }
  html .request-actions { align-items:stretch; }
}
@media(prefers-reduced-motion:reduce) { html body :is(.btn,.copy-btn) { transition:none; } }
html .seg [role="radio"][aria-checked="true"] { color:#fff; background:#0d6efd; }

/* Division labels use solid fills, distinct from subtle status and requirement markers. */
/* Portal admin marker in the admin members list: a quiet outlined tag with a blue shield, so it reads as a marker,
   not a division label or a warning. */
html .member-name .admin-chip {
  display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:1px 8px 1px 5px; vertical-align:middle;
  font-size:11px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--muted); background:transparent; border:1px solid transparent; border-radius:999px;
}
html .admin-chip-icon { width:12px; height:12px; stroke-width:2; color:#6ea8fe; }
/* Name, rank, user tag and Admin badge share one centred line (spaced by .name-with-rank's gap). */
html .member-name { display:flex; align-items:center; flex-wrap:wrap; row-gap:4px; }
html .member-name .user-tag { margin-left:8px; }
html .member-name.name-with-rank :is(.user-tag, .admin-chip) { margin-left:0; }
html .member-rank { color:var(--text); font-weight:500; }
html :is(.division-badge,.crown-badge) {
  display:inline-flex; align-items:center; justify-content:center; align-self:center; gap:5px;
  height:24px; min-height:24px; padding:0 7px; font-family:var(--font-ui);
  font-size:11px; line-height:1.35; font-weight:600; letter-spacing:.015em;
  border-radius:.375rem; border:1px solid transparent; white-space:nowrap; flex-shrink:0; vertical-align:middle;
}
html :is(.division-badge,.crown-badge) { color:var(--text); background:#0b111c; }
html .rank-line { display:inline-flex; align-items:center; gap:6px; vertical-align:middle; }
html :is(.welcome-meta, [data-role], [data-p-role]) { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }

/* Polished gold is reserved for Foundation's custom five-point crown. */
html .crown-badge .foundation-crown {
  width:18px; height:18px; flex-shrink:0; display:block;
  filter:drop-shadow(0 1px 1px rgb(0 0 0 / 35%));
}
/* Online / Offline / On leave right after a name in the dashboard lists. */
/* On the profile the status sits after the big name, so it's a little larger there. */
html .profile-name { display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; }
html .profile-name .tag { margin:0 0 0 8px; }

html .promo-from { color:var(--muted); margin-right:2px; }
/* Unit management page. */
html .unit-tabs:not([hidden]) {
  display:flex; flex-wrap:wrap; gap:8px; justify-self:stretch;
  padding:0; border:0; border-radius:0; background:transparent;
}
html .unit-tabs button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px 16px; text-align:center; line-height:1.4;
  border:1px solid transparent; border-radius:10px; background:var(--panel);
}
html .unit-tabs button:hover { background:var(--bg-alt); }
html .unit-tabs button[aria-selected="true"] {
  color:#fff; border-color:transparent; background:#0d6efd; box-shadow:none;
}
html .unit-tabs button[aria-selected="true"]:hover {
  color:#fff; border-color:transparent; background:#0b5ed7;
}
html .unit-tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
html .unit-tab-name { overflow-wrap:anywhere; }
html .unit-tabs .seg-count { flex-shrink:0; margin:0; }
@media(max-width:540px) {
  html .unit-tabs button { flex:1 1 160px; padding:10px 12px; }
}
html .unit-manage { display:grid; gap:24px; }
html .unit-head { flex-wrap:wrap; }
html .unit-head .tag { margin:0; align-self:center; flex-shrink:0; }
html .unit-head h2 { margin:0; }
html .unit-role { font-size:12px; font-weight:600; color:var(--muted); border:1px solid transparent; border-radius:999px; padding:1px 9px; }
html .unit-open { margin-left:auto; display:flex; flex-direction:column; align-items:center; gap:5px; }
html .unit-app-status { font-size:12px; color:var(--muted); white-space:nowrap; }
html .unit-open .btn { min-width:88px; }
@media(max-width:540px) {
  html .unit-open { margin-left:0; }
}
html .unit-section { padding:16px 20px 12px; }
html .unit-section h3 { font-size:15px; display:flex; align-items:center; gap:6px; margin-bottom:6px; }
html .unit-add { display:flex; flex-wrap:wrap; gap:8px; padding:16px 20px; border-bottom:1px solid var(--border); }
html .unit-add :is(input, select) { min-height:36px; padding:6px 10px; border:1px solid transparent; border-radius:6px; background:var(--bg-alt); color:var(--text); font:inherit; font-size:14px; }
html .unit-add input { flex:1; min-width:180px; }
html .unit-position { min-height:32px; padding:4px 26px 4px 8px; border:1px solid transparent; border-radius:6px; background:var(--bg-alt); color:var(--text); font:inherit; font-size:13px; }
html .unit-position-fixed { font-weight:600; }
/* Name with the agency rank (division label or crown) underneath. */
html .person-stack { display:flex; align-items:center; gap:10px; }
html .person-stack .member-avatar { width:34px; height:34px; flex-shrink:0; }
html .person-stack-name { font-weight:600; display:block; }
html .person-stack-name:hover { color:var(--accent); }
html :is(.person-stack-rank, .leave-request-rank) { display:flex; align-items:center; margin-top:3px; }
html .unit-remove { text-align:right; white-space:nowrap; }
html .unit-remove .btn + .btn { margin-left:8px; }

/* Special Units cards, on the portal page and the homepage: one card per unit. */
html .unit-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,300px), 1fr)); gap:20px; }
/* Each card is a subgrid of 4 rows (name, about, leaders, buttons), so those line up across a row of cards. */
html .unit-card { padding:20px; display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:12px; align-content:start; transition:border-color .15s ease, transform .3s var(--ease-out); }
/* Optional leaders and actions keep their own rows, so a missing block cannot shift a button upward. */
html .unit-card > :is(h2,h3) { grid-row:1; }
html .unit-card > p.muted { grid-row:2; }
html .unit-card > .unit-leaders { grid-row:3; }
html .unit-card > .unit-card-action { grid-row:4; }
html .unit-card .unit-leaders { align-self:start; }
html .unit-card:hover { transform:none; box-shadow:none; }
html .unit-card :is(h2,h3) { font-size:22px; margin:0; }
html .unit-card p.muted { font-size:14px; margin:0; line-height:1.55; }
html .unit-leaders { list-style:none; margin:0; padding:10px 12px; display:grid; gap:6px; border-radius:.5rem; background:color-mix(in srgb, var(--text) 4%, transparent); }
/* "1iC · Name" on one baseline, so the label and the name line up. */
html .unit-leaders li { display:flex; align-items:baseline; gap:8px; min-height:28px; font-size:13.5px; line-height:28px; }
html .unit-leader-pos { flex:none; font-weight:700; color:var(--muted); }
html .unit-leader-pos::after { content:"·"; margin-left:8px; font-weight:400; }
html .unit-leader-name { display:inline-flex; align-items:center; gap:6px; color:var(--text); font-weight:600; text-decoration:none; }
html .unit-leader-name:hover { color:var(--accent); }
html .unit-leader-vacant { color:var(--muted); }
/* Buttons stacked full width: Apply / Applications closed, then any second action under it. */
html .unit-card-action { display:flex; flex-direction:column; gap:8px; padding-top:4px; }
html .unit-card-action .btn { width:100%; text-align:center; justify-content:center; }
html .unit-card-action .status-pill { align-self:flex-start; }
html .unit-declined { width:100%; font-size:13px; color:#ea868f; }

/* Leaves page: Requests tab for Foundation. */
html .leave-tabs { justify-self:start; }
html .leave-requests { list-style:none; display:grid; gap:2px; padding:8px; }
html .leave-request { display:flex; align-items:center; gap:14px; padding:12px; border-radius:10px; }
html .leave-request:hover { background:var(--bg-alt); }
html .leave-request .member-avatar { width:40px; height:40px; flex-shrink:0; }
html .leave-request-main { flex:1; min-width:0; display:grid; gap:3px; }
html .leave-request-name { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-weight:600; }
html .leave-request-when { font-size:13px; color:var(--muted); }
html .leave-request-when strong { color:var(--text); }
html .leave-request-reason { font-size:14px; overflow-wrap:anywhere; }
html .leave-request-actions { display:flex; gap:8px; flex-shrink:0; }
html .leave-request.is-locked { opacity:.75; }
html .leave-request-actions .member-locked { align-self:center; padding:0 6px; }
@media(max-width:760px) {
  html .leave-request { flex-wrap:wrap; }
  html .leave-request-actions { width:100%; }
  html .leave-request-actions .btn { flex:1; }
}

/* Leave requests: "Waiting for Foundation" pill, and the note when a request was turned down. */
html .status-pill.pending { color:#6ea8fe; background-color:#031633; border-color:transparent; }
html .leave-denied { font-size:13px; color:#ea868f; background:#2c0b0e; border:1px solid transparent; border-radius:.375rem; padding:8px 12px; }
/* Leave starts / Back on side by side; stacked on phones. */
html .leave-dates { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; }
html .leave-dates label[hidden] { display:none; }

/* Promote / demote confirm window: Now → New as division labels or crowns, green for up, red for down. */
html .confirm-kind { color:#75b798; }
html .confirm-kind.is-down { color:#ea868f; }
html .rank-change { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:stretch; gap:10px; }
html .rank-change-side { display:grid; gap:8px; align-content:start; padding:14px 16px; border:1px solid transparent; border-radius:10px; background:var(--bg); min-width:0; }
html .rank-change-new { border-color:transparent; background:#051b11; }
html .rank-change.is-down .rank-change-new { border-color:transparent; background:#2c0b0e; }
html .rank-change-title { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-weight:600; font-size:15px; overflow-wrap:anywhere; }
html .rank-change-title .member-rank { font-weight:600; }
/* "Promotion moves them from [Security] to [Trainer]": labels sit inline in the sentence. */
html [data-c-division-note] :is(.division-badge, .crown-badge) { vertical-align:1px; margin:0 2px; }
html .division-badge { white-space:nowrap; flex-shrink:0; overflow-wrap:normal; }
html .rank-change-arrow { align-self:center; --arrow-size:20px; }
@media(max-width:560px) {
  html .rank-change { grid-template-columns:minmax(0,1fr); }
  html .rank-change-arrow { justify-self:center; transform:rotate(90deg); }
}

/* Promote page: note while your own 5-minute promotion cooldown runs. */
html .promo-my-cooldown { margin-top:12px; display:inline-block; font-size:13px; color:#ffda6a; background:#332701; border:1px solid transparent; border-radius:.375rem; padding:6px 12px; }
html .promo-my-cooldown strong { font-variant-numeric:tabular-nums; }

/* Dashboard: Online now and Recently active stacked in the left column. */
/* The half-width table is narrower, so Last seen sits tighter. */
/* Promotions that change division are long, so they may wrap instead of being cut off. */
html [data-promotions] .person-sub { white-space:normal; overflow:visible; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
html [data-promotions] .promo-from { display:inline-flex; align-items:center; gap:6px; margin-right:0; }
/* The old rank is always grey, with or without its division label, so the new rank stands out on every row. */
html [data-promotions] .promo-from .member-rank { color:inherit; font-weight:inherit; }


/* Bootstrap pagination in the site's colours (profile Career pages). */
html .pagination {
  --bs-pagination-color:var(--text); --bs-pagination-bg:transparent; --bs-pagination-border-color:var(--border);
  --bs-pagination-hover-color:var(--text); --bs-pagination-hover-bg:var(--bg-alt); --bs-pagination-hover-border-color:#61728c;
  --bs-pagination-focus-color:var(--text); --bs-pagination-focus-bg:var(--bg-alt); --bs-pagination-focus-box-shadow:0 0 0 .2rem rgba(13,110,253,.35);
  --bs-pagination-active-color:#fff; --bs-pagination-active-bg:#0d6efd; --bs-pagination-active-border-color:#0d6efd;
  --bs-pagination-disabled-color:var(--muted); --bs-pagination-disabled-bg:transparent; --bs-pagination-disabled-border-color:var(--border);
  margin:0; list-style:none;
}
html .pagination .page-link { font-family:inherit; cursor:pointer; min-width:34px; text-align:center; }
html .pagination .disabled .page-link { cursor:default; }

/* Bootstrap nav pills (imported as .tabs-nav / .tab-link, see build-site-ui.mjs): the profile's tabs. Muted when
   off, Bootstrap blue when on, with a small count after the label. On phones they scroll sideways. */
html .tabs-nav.nav-pills {
  --bs-nav-link-padding-x:.85rem; --bs-nav-link-padding-y:.45rem; --bs-nav-link-font-size:14px; --bs-nav-link-font-weight:600;
  --bs-nav-link-color:var(--muted); --bs-nav-link-hover-color:var(--text);
  --bs-nav-pills-border-radius:.5rem; --bs-nav-pills-link-active-color:#fff; --bs-nav-pills-link-active-bg:#0d6efd;
  gap:4px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; min-width:0;
}
html .tabs-nav::-webkit-scrollbar { display:none; }
html .tabs-nav .tab-link { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-family:inherit; cursor:pointer; }
html .tabs-nav .tab-link:not(.active):hover { background:var(--bg-alt); }
html .tabs-nav .tab-link:focus-visible { outline:0; box-shadow:0 0 0 .2rem rgba(13,110,253,.4); }
html .tabs-nav .tab-link .icon { width:16px; height:16px; }
html .tab-count { font-size:11.5px; font-weight:700; line-height:1; padding:3px 7px; border-radius:999px; background:color-mix(in srgb, var(--text) 10%, transparent); }
html .tab-link.active .tab-count { background:rgba(255,255,255,.22); }
html .profile-tabs-head { padding-top:12px; padding-bottom:12px; }
html .profile-tabs .tabs-nav { align-items:center; }
html .profile-tabs .tabs-nav > li { display:flex; align-items:center; }
html .profile-tabs .tab-link { min-height:36px; line-height:20px; }
html .profile-tabs .tab-link [data-icon] { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex-shrink:0; line-height:1; }
html .profile-tabs .tab-link .icon { display:block; }
html .profile-tabs .tab-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; line-height:1; font-variant-numeric:tabular-nums; }
html .profile-tabs .tab-count[hidden] { display:none; }
html .profile-tabs [data-tab-panel="units"] .profile-unit-list { padding:10px; }
/* Promotions given: the dashboard's promotion rows, wrapping when the ranks are long. */
html .profile-given { padding:8px; }
html .profile-given .person-sub { white-space:normal; overflow:visible; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
html .profile-given .promo-from { display:inline-flex; align-items:center; gap:6px; margin-right:0; color:var(--muted); }
html .profile-given .promo-from .member-rank { color:inherit; font-weight:inherit; }

/* Name with the rank right after it on the same line (online list, unit members, leave and unit requests). */
html .name-with-rank { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
html :is(.name-with-rank, .leave-request-name) .rank-line { font-size:13.5px; font-weight:400; color:var(--muted); }
html :is(.request-name, .sc-name) a:hover { color:var(--accent); }

/* Security Check page: one centred column. */
html .sc > * { width:100%; max-width:720px; justify-self:center; }
html .sc-header { text-align:center; display:grid; justify-items:center; padding-top:8px; }
html .sc-badge { display:grid; place-items:center; width:56px; height:56px; margin-bottom:14px; border-radius:16px; color:#6ea8fe; background:#031633; border:1px solid transparent; }
html .sc-badge .icon { width:28px; height:28px; }
html .sc-search { display:flex; gap:12px; padding:16px; }
html .sc-input { position:relative; flex:1; min-width:0; }
html .sc-input-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); display:grid; color:var(--muted); pointer-events:none; }
html body .form .sc-input input:not([type=checkbox]) { width:100%; min-height:48px; padding-left:44px; font-size:15px; }
html .form.sc-search .btn { width:auto; min-height:48px; padding-left:28px; padding-right:28px; font-size:15px; }
html .sc-hint { padding:18px 20px; font-size:14px; color:var(--muted); }
html .sc-hint strong { color:var(--text); font-weight:600; }
html .sc-hint ul { list-style:none; display:grid; gap:8px; margin-top:12px; }
html .sc-hint li { display:flex; align-items:center; gap:10px; }
html .sc-hint .sc-dot { flex-shrink:0; }
html .sc-verdict { display:flex; align-items:center; gap:14px; margin:20px; padding:16px; border-radius:10px; border:1px solid transparent; background:var(--bg-alt); }
html .sc-verdict .member-avatar { width:52px; height:52px; }
html .sc-verdict.sc-online { border-color:transparent; background:#051b11; }
html .sc-verdict.sc-leave { border-color:transparent; background:#332701; }
html .sc-verdict.sc-bad { border-color:transparent; background:#2c0b0e; }
html .sc-verdict-main { flex:1; min-width:0; }
html .sc-name { font-family:var(--font-ui); font-weight:700; font-size:22px; line-height:1.2; }
html .sc-reason { color:var(--muted); font-size:13px; }
html .sc-rows { margin:0 20px 8px; }
html .sc-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); }
html .sc-row:last-child { border-bottom:0; }
html .sc-row dt { color:var(--muted); font-size:13px; font-weight:500; }
html .sc-row dd { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; margin:0; font-weight:500; text-align:right; }
html .sc-motto { font-family:var(--font-ui); font-size:13px; padding:4px 8px; border-radius:.375rem; border:1px solid transparent; background:var(--bg); color:var(--text); overflow-wrap:anywhere; }
html .status-pill.bad { color:#ea868f; background-color:#2c0b0e; border-color:transparent; }
html .status-pill.leave { color:#ffda6a; background-color:#332701; border-color:transparent; }
html .sc-clear { margin-left:auto; }
html .sc-recent { display:flex; flex-wrap:wrap; gap:8px; padding:16px 20px 20px; }
html .sc-chip { display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:13px; font-weight:500; color:var(--text); background:var(--bg-alt); border:1px solid transparent; border-radius:.375rem; padding:6px 12px; cursor:pointer; }
html .sc-dot { width:7px; height:7px; border-radius:50%; background:var(--muted); }
html .sc-dot.sc-online { background:#75b798; }
html .sc-dot.sc-leave { background:#ffda6a; }
html .sc-dot.sc-bad { background:#ea868f; }
@media(max-width:760px) {
  html .sc-search { padding:12px; gap:8px; }
  html .form.sc-search .btn { padding-left:18px; padding-right:18px; }
  html .sc-verdict { margin:16px; flex-wrap:wrap; }
  html .sc-rows { margin:0 16px 8px; }
  html .sc-row { flex-direction:column; align-items:flex-start; gap:6px; }
  html .sc-row dd { justify-content:flex-start; text-align:left; }
}

/* A quiet separator keeps the member's name distinct from their agency rank. */
html .name-with-rank { column-gap:12px; align-items:center; line-height:1.5; }
html .name-with-rank > .rank-line::before {
  content:''; display:block; flex:0 0 3px; width:3px; height:3px;
  align-self:center; border-radius:50%; background:var(--muted);
}
html .name-with-rank > .rank-line { flex-wrap:wrap; gap:4px 12px; line-height:1.5; }

/* Member editing follows the portal's Bootstrap controls, badges and rank previews. */
html .admin-editor { width:min(720px, calc(100% - 32px)); padding:0; overflow:auto; }
html .admin-editor > .form { padding:24px; gap:20px; }
html .admin-editor .editor-head { padding-bottom:18px; border-bottom:1px solid var(--border); }
html .admin-editor .editor-head > div { flex:1; min-width:0; }
html .admin-editor .editor-head .member-avatar { flex-shrink:0; }
html .admin-editor-description { color:var(--muted); font-size:13px; line-height:1.6; margin-top:-8px; }
html .admin-member-badges { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:8px; }
html .admin-member-badges:empty { display:none; }
html .admin-member-badges :is(.user-tag,.admin-chip) { margin:0; display:inline-flex; align-items:center; }
html .admin-editor-section { display:grid; gap:14px; min-width:0; padding:18px; background:var(--bg-alt); border:1px solid transparent; border-radius:8px; }
html .admin-editor-section h3, html .admin-editor-section legend {
  font:600 14px/1.5 var(--font-ui); letter-spacing:0; margin:0;
}
html fieldset.admin-editor-section { display:block; }
html fieldset.admin-editor-section legend { float:left; width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 0 10px; }
html fieldset.admin-editor-section > .optional { clear:both; font-size:12px; margin-bottom:14px; }
html .admin-rank-preview { margin:0; padding:14px; gap:12px; background:var(--panel); border-radius:6px; }
html .admin-rank-preview .rank-change-side { min-width:0; }
html .admin-rank-preview .rank-line { flex-wrap:wrap; line-height:1.5; }
html .admin-rank-preview .rank-change-title { font-family:inherit; font-size:14px; font-weight:500; line-height:1.5; }
html .admin-editor .rank-quick-buttons { justify-content:flex-end; }
html .admin-editor .rank-quick-buttons .btn { width:auto; min-width:110px; }
html .admin-editor .unit-opt { grid-template-columns:44px minmax(0,1fr) 155px; padding:10px; gap:10px; border-radius:6px; background:var(--panel); }
html .admin-editor .unit-opt select { width:100%; min-width:0; }
html .admin-editor .unit-opt.in-unit { border-color:transparent; }
html .admin-editor .unit-opt:hover { box-shadow:none; transform:none; }
html .admin-editor :is(input,select,textarea):focus:not(:focus-visible) { box-shadow:none; }
html .admin-editor .unit-opt-name { font-size:13px; }
html .admin-editor .admin-access { border-radius:8px; background:var(--bg-alt); padding:16px 18px; }
html .admin-access-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
html .admin-access-title .admin-chip { display:inline-flex; align-items:center; margin:0; gap:5px; }
html .admin-access-title .icon { width:13px; height:13px; }
html .admin-editor-footer { position:sticky; bottom:-24px; margin:0 -24px -24px; padding:16px 24px; border-top:1px solid var(--border); background:var(--panel); z-index:1; }
html .admin-editor-footer > .optional { margin-right:auto; font-size:12px; }
html .form .admin-editor-footer .btn { width:auto; flex-shrink:0; }
html .admin-editor .change-hint { line-height:1.5; }
html .admin-editor .change-hint:not(.down) { color:#75b798; }
/* Ranks above are locked until a training is logged as Passed (src/training-requirements.js). */
@media(max-width:600px) {
  html .admin-editor { width:calc(100% - 20px); max-height:calc(100dvh - 20px); }
  html .admin-editor > .form { padding:16px; gap:16px; }
  html .admin-editor-section { padding:14px; }
  html .admin-editor .unit-opt { grid-template-columns:44px minmax(0,1fr); }
  html .admin-editor .unit-opt select { grid-column:1 / -1; }
  html .admin-editor .rank-quick-buttons .btn { flex:1; min-width:0; }
  html .admin-rank-preview { grid-template-columns:minmax(0,1fr); }
  html .admin-rank-preview .rank-change-arrow { display:none; }
  html .admin-editor-footer { bottom:-16px; margin:0 -16px -16px; padding:14px 16px; flex-wrap:wrap; }
  html .admin-editor-footer > .optional { width:100%; }
  html .form .admin-editor-footer .btn { flex:1; }
}

/* Admin workspace: quiet surfaces, a compact directory and a focused member editor. */
html .admin-workspace { gap:26px; }
html .admin-page-header { display:flex; align-items:center; justify-content:space-between; gap:24px; }
html .admin-page-header h1 { font-family:var(--font-ui); font-size:34px; letter-spacing:-1.2px; line-height:1.2; margin:8px 0 10px; }
html .admin-page-header .portal-header-sub { font-size:14px; }
html .admin-page-header .eyebrow { color:var(--muted); font-size:10px; letter-spacing:2px; }
html .admin-workspace .admin { padding:0; overflow:hidden; border-radius:14px; }
html .admin-workspace .admin-bar { margin:0; padding:16px 22px; border-bottom:1px solid var(--border); gap:20px; flex-wrap:wrap; }
html .admin-workspace .seg { background:transparent; border:0; padding:0; gap:6px; }
html .admin-workspace .seg button { min-height:38px; font-size:13px; padding:8px 14px; }
html .admin-workspace .seg button[aria-selected=true] { background:color-mix(in srgb,#7c9df6 12%,var(--panel)); color:#a9c1ff; }
html .admin-tools { display:flex; align-items:center; gap:10px; margin-left:auto; }
html .admin-tools .form-select { width:196px; flex-shrink:0; height:42px; min-height:42px; background-color:var(--bg-alt); color:var(--text); border-color:transparent; font-size:12px; }
html .admin-search { display:flex; align-items:center; position:relative; }
html .admin-search > .icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); pointer-events:none; }
html .admin-search .search { width:360px; padding-left:36px; height:42px; min-height:42px; font-size:12px; background:var(--bg-alt); border-color:transparent; }
html .admin-directory-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 22px 18px; }
html .admin-directory-heading h2 { font:600 16px/1.5 var(--font-ui); letter-spacing:-.2px; }
html .admin-directory-heading p { color:var(--muted); font-size:12px; margin-top:3px; }
html .admin-workspace .member-list { gap:0; padding:0 22px 8px; }
html .admin-workspace .member { grid-template-columns:44px minmax(0,1fr) minmax(140px,220px) 104px; align-items:center; min-height:80px; border:0; border-top:1px solid var(--border); border-radius:0; padding:18px 0; column-gap:16px; background:transparent; }
html .admin-workspace .member-main { min-width:0; }
html .admin-workspace .member-units { align-items:center; justify-content:flex-start; min-width:0; }
html .unit-assignment-badge { display:inline-flex; align-items:center; min-height:26px; padding:4px 8px; font-size:11px; line-height:1.4; white-space:nowrap; }
html .profile-unit { justify-content:flex-start; flex-wrap:wrap; gap:8px; }
html .profile-unit-name { flex:0 1 auto; line-height:1.5; overflow-wrap:anywhere; }
html .admin-workspace .admin-bar .seg[role="tablist"] button { min-height:42px; }
html .admin-workspace .member-name { font-size:14px; line-height:1.6; }
html .admin-workspace .member-name .rank-line { font-size:12px; }
html .admin-row-markers { display:flex; align-items:center; gap:6px; margin-top:6px; }
html .admin-row-markers:empty { display:none; }
html .admin-row-markers :is(.user-tag,.admin-chip) { display:inline-flex; align-items:center; margin:0; font-size:10px; padding:2px 6px; background:transparent; }
html .admin-row-markers .admin-chip { gap:4px; color:var(--muted); }
html .admin-no-units { color:var(--muted); font-size:11px; }
html .admin-workspace .member > .btn { width:104px; min-height:36px; align-self:center; font-size:11px; border-color:transparent; }
html .admin-workspace .member > .btn .icon { width:13px; height:13px; }
html .admin-workspace .member-locked { font-size:11px; text-align:center; }
html .admin-workspace [data-view=log] { padding:22px; }
html .admin-workspace .member .member-avatar { width:44px; height:44px; border-radius:14px; }

html .admin-editor { width:min(1000px,calc(100% - 40px)); max-height:calc(100dvh - 48px); overflow:hidden; border-radius:18px; border-color:transparent; }
html .admin-editor > .form { display:flex; flex-direction:column; padding:0; gap:0; max-height:calc(100dvh - 50px); }
html .admin-editor .editor-head { flex-shrink:0; margin:0; padding:24px 28px; background:var(--panel); border-bottom:1px solid var(--border); gap:18px; }
html .admin-editor .editor-head .member-avatar { width:64px; height:72px; border-radius:16px; background:var(--bg-alt); }
html .admin-editor .editor-head h2 { font-family:var(--font-ui); font-size:26px; line-height:1.3; letter-spacing:-.7px; }
html .admin-editor .editor-head .eyebrow { font-size:9px; color:var(--muted); letter-spacing:1.8px; margin-bottom:5px; }
html .admin-editor-heading-rank { display:flex; align-items:center; margin-top:5px; font-size:12px; }
html .admin-member-badges { margin-top:7px; }
html .admin-editor .editor-close { align-self:flex-start; border:1px solid transparent; border-radius:10px; font-size:23px; min-width:32px; min-height:32px; }
html .admin-editor-body { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); min-height:0; overflow-y:auto; overscroll-behavior:contain; background:var(--bg-alt); }
html .admin-editor-main,html .admin-editor-aside { display:flex; flex-direction:column; gap:20px; min-width:0; padding:24px; }
html .admin-editor-main { border-right:1px solid var(--border); }
html .admin-editor-aside { background:color-mix(in srgb,var(--panel) 55%,var(--bg-alt)); }
html .admin-editor-description { margin:0; font-size:12px; }
html .admin-editor-section { border:0; border-radius:0; padding:0; background:transparent; gap:14px; }
html .admin-editor-section h3,html .admin-section-title { display:flex; align-items:center; gap:9px; }
html .admin-section-icon { display:inline-flex; align-items:center; color:#8baaf6; }
html .admin-section-icon .icon { width:16px; height:16px; }
html .admin-rank-preview { padding:0; gap:10px; background:transparent; border:0; }
html .admin-rank-preview .rank-change-side { padding:14px; background:var(--panel); border:1px solid transparent; border-radius:10px; }
html .admin-rank-preview .rank-change-side:last-child { border-color:transparent; }
html .admin-rank-preview .rank-move-label { font-size:9px; letter-spacing:1.2px; color:var(--muted); }
html .admin-editor .rank-quick-buttons { gap:8px; }
html .admin-editor .rank-quick-buttons .btn { flex:1; min-height:36px; font-size:12px; }
html .admin-editor .unit-pick { gap:8px; }
html .admin-editor .unit-opt { grid-template-columns:36px minmax(0,1fr) 124px; gap:10px; border:1px solid transparent; padding:10px; border-radius:9px; background:var(--panel); }
html .admin-editor .unit-opt.in-unit { border-color:transparent; }
html .admin-editor .unit-opt .tag { min-width:0; font-size:10px; }
html .admin-editor .unit-opt-name { font-size:12px; }
html .admin-editor .unit-opt { display:grid; }
html .admin-editor .unit-opt-name .optional { font-size:10px; margin-top:3px; }
html .admin-editor .unit-opt select { min-height:36px; font-size:12px; }
html .admin-editor-aside > * + * { padding-top:20px; border-top:1px solid var(--border); }
html .admin-editor .admin-access { display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; background:transparent; border:0; border-top:1px solid var(--border); border-radius:0; padding:20px 0 0; }
html .admin-editor .admin-access input { width:16px; height:16px; }
html .admin-editor .check-desc { font-size:12px; line-height:1.7; }
html .admin-reason > label { display:flex; justify-content:flex-start; align-items:center; gap:6px; font-weight:600; }
html .admin-editor .admin-reason input { font-size:12px; }
html .admin-editor-footer { position:static; flex-shrink:0; margin:0; padding:16px 24px; border-top:1px solid var(--border); background:var(--panel); }
html .admin-editor-footer > .optional { display:flex; align-items:center; gap:7px; font-size:11px; }
html .admin-editor-footer > .optional::before { content:''; width:5px; height:5px; background:#7c9df6; border-radius:50%; }
html .admin-editor-footer .btn { font-size:12px; min-height:38px; padding:8px 16px; }
@media(max-width:1100px) {
  html .admin-page-header { align-items:flex-start; }
  html .admin-tools { width:100%; margin-left:0; }
  html .admin-search { flex:1; }
  html .admin-search .search { max-width:none; width:100%; }
}
@media(max-width:760px) {
  html .admin-workspace .admin-bar,html .admin-directory-heading { padding:16px; }
  html .admin-workspace .member-list { padding:0 16px 8px; }
  html .admin-workspace .member { grid-template-columns:44px minmax(0,1fr); gap:10px; }
  html .admin-workspace .member-units { grid-column:2; justify-content:flex-start; }
  html .admin-workspace .member > .btn,html .admin-workspace .member > .member-locked { grid-column:2; grid-row:auto; justify-self:start; }
  html .admin-editor { width:calc(100% - 20px); max-height:calc(100dvh - 20px); border-radius:14px; }
  html .admin-editor > .form { max-height:calc(100dvh - 22px); }
  html .admin-editor .editor-head { padding:18px; gap:12px; }
  html .admin-editor .editor-head .member-avatar { width:48px; height:56px; border-radius:12px; }
  html .admin-editor .editor-head h2 { font-size:22px; }
  html .admin-editor-body { grid-template-columns:minmax(0,1fr); }
  html .admin-editor-main,html .admin-editor-aside { padding:18px; }
  html .admin-editor-main { border-right:0; }
  html .admin-editor-aside { border-top:1px solid var(--border); }
  html .admin-editor-footer { margin:0; padding:14px 18px; }
}
@media(max-width:480px) {
  html .admin-tools { flex-direction:column; align-items:stretch; }
  html .admin-tools .form-select { width:100%; }
  html .admin-editor .unit-opt { grid-template-columns:36px minmax(0,1fr); }
  html .admin-editor .unit-opt select { grid-column:1 / -1; }
  html .admin-rank-preview { grid-template-columns:minmax(0,1fr); }
  html .admin-editor-footer > .optional { width:100%; }
}

/* Shared controls for compact, sortable portal tables. */
html .training-page { min-width:0; }
html .training-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
html .training-header h1 { font-family:var(--font-ui); font-size:30px; letter-spacing:-.8px; margin:6px 0 10px; }
html .training-header .eyebrow { font-size:10px; color:var(--muted); letter-spacing:1.6px; }
html .training-header .portal-header-sub { font-size:14px; }
html .training-header > .btn { flex-shrink:0; font-size:13px; padding:9px 16px; }
html .training-panel { padding:22px 24px 18px; border-radius:12px; min-width:0; }
html .training-table-wrap { position:relative; min-width:0; width:100%; max-width:100%; overflow-x:auto; }
html .training-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
html .training-toolbar label { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:500; color:var(--text); }
html .training-show .form-select { width:72px; }
html .training-filters { display:flex; align-items:center; gap:16px; }
html .training-toolbar > .training-filters:only-child { margin-left:auto; }
html .training-panel > .training-save-note { margin:-8px 0 20px; max-width:80ch; }
html .training-filters > .form-select { width:144px; }
html .training-search input { width:230px; }
html .training-toolbar :is(input,select) { min-height:38px; background-color:var(--bg-alt); border-color:transparent; color:var(--text); font-size:12px; border-radius:6px; }
html .training-table { width:100%; min-width:560px; border-collapse:collapse; }
/* Every table uses this one look (first used on Discipline): names, who logged it, one key fact, then Manage or Details. */
html .training-table td a { color:inherit; font-weight:600; }
html .training-table td a:hover { color:var(--accent); }
html .training-table :is(th,td) { padding:13px 14px; vertical-align:middle; font-size:12px; border-bottom:1px solid var(--border); }
html .training-table th { background:var(--bg-alt); font-size:10px; font-weight:600; letter-spacing:.07em; }
html .training-table th button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; background:none; border:0; padding:0; color:inherit; text-align:left; font:inherit; letter-spacing:inherit; text-transform:uppercase; cursor:pointer; }
html .training-table th button span { color:var(--muted); font-size:13px; }
html .training-table th[aria-sort] button span { color:var(--accent); }
html .training-table th button:focus-visible { outline:2px solid #8baaf6; outline-offset:4px; border-radius:2px; }
html .training-table td strong { font-weight:600; }
html .training-table td.training-date { white-space:nowrap; color:var(--muted); font-variant-numeric:tabular-nums; }
html .training-table th:nth-child(1) { width:18%; }
html .training-table th:nth-child(2) { width:18%; }
html .training-table th:nth-child(3) { width:24%; }
html .training-table th:nth-child(4) { width:12%; }
html .training-table .training-detail-cell { text-align:right; }
html .training-table .training-detail-cell .btn { font-size:11px; min-height:30px; padding:4px 9px; }
/* A labelled rank change in lists (rankChange in site.js): "Previous rank → New rank". */
html .rank-change-line { display:inline-flex; align-items:flex-end; flex-wrap:wrap; gap:4px 10px; max-width:100%; }
html .rank-change-line > .site-arrow { color:var(--muted); margin-bottom:1px; }
html .rank-step { display:inline-grid; gap:1px; min-width:0; }
html .rank-step-label { font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); line-height:1.3; }
html .rank-step .member-rank { color:var(--text); }
html .profile-given .person-sub { white-space:normal; overflow:visible; }
/* Training status and New division labels (trainingBadge / newDivisionBadge in site.js). */
html body .badge.badge.new-division-badge { color:#cbd2dc; background:#2b3240; border:0; font-weight:600; }
/* Shared Details button and pop-up (showDetails in site.js). */
html .details-btn { flex-shrink:0; white-space:nowrap; font-size:11px; min-height:30px; padding:4px 10px; }
html .details-cell { width:1%; text-align:right; white-space:nowrap; }
html .details-dialog .editor-head .member-avatar { flex-shrink:0; width:48px; height:56px; border-radius:12px; background:var(--bg-alt); object-fit:cover; object-position:top; }
html .details-dialog .details-section-body { color:var(--muted); font-size:13px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
html .details-dialog .editor-actions { justify-content:flex-end; }
@media (max-width:520px) { html .details-dialog .training-details-grid { grid-template-columns:1fr; } }
/* Same size as every other status badge (the shared .badge size). */
html .training-status { font-weight:600; }
/* One status palette across the portal (Discipline, Training, Transfers, Sales, Requests): solid badges, and the
   same colour always means the same thing. Waiting: blue. Done/approved: green. Denied/failed: red.
   Needs attention: yellow. Closed without a decision (cancelled, expired): grey. Lifted early: purple. */
html body .badge:is(.training-status,.request-history-status) { color:#fff; border-color:transparent; }
html body .badge:is(.training-status,.request-history-status):is(.is-passed,.is-approved) { background-color:#198754; }
html body .badge:is(.training-status,.request-history-status):is(.is-failed,.is-denied) { background-color:#dc3545; }
html body .badge:is(.training-status,.request-history-status).is-pending { background-color:#0d6efd; }
html body .badge:is(.training-status,.request-history-status):is(.is-neutral,.is-cancelled,.is-other) { background-color:#6c757d; }
html body .badge.training-status.is-incomplete { color:#1a1305; background-color:#ffc107; }
/* Requests history: the coloured bar on each entry follows its status badge, so they never disagree. */
html .log-item:has(> p .request-history-status.is-approved)::before { background:#198754; }
html .log-item:has(> p .request-history-status.is-denied)::before { background:#dc3545; }
html .log-item:has(> p .request-history-status.is-pending)::before { background:#0d6efd; }
html .log-item:has(> p .request-history-status:is(.is-cancelled,.is-other))::before { background:#6c757d; }
html .training-pager { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:20px; color:var(--muted); font-size:12px; }
html .training-pager .pagination { display:flex; list-style:none; margin:0; padding:0; gap:4px; }
html .training-pager .page-link { min-height:34px; min-width:34px; padding:6px 10px; border-radius:6px; color:var(--text); background:var(--bg-alt); border:1px solid transparent; font:inherit; cursor:pointer; }
html .training-pager .active .page-link { color:#fff; background:#0d6efd; border-color:transparent; }
html .training-pager .page-link:disabled,html .training-pager .disabled .page-link { opacity:.45; cursor:default; }
html .training-error { margin-bottom:16px; }
html .training-table .panel-empty { padding:52px 20px; text-align:center; color:var(--muted); }
html .training-empty-hint { display:block; margin-top:7px; font-size:12px; font-weight:400; }
html .training-table [aria-busy=true] { opacity:.65; }
html .transfers-table :is(td:nth-child(2),td:nth-child(3)) { overflow-wrap:anywhere; max-width:240px; }
html .editor:is(.transfer-editor,.transfer-details) { width:min(680px,calc(100% - 32px)); }
html .discipline-user-search { position:relative; display:grid; gap:8px; min-width:0; }
html .discipline-review-note { max-width:230px; margin:8px 0 0; line-height:1.5; }
html body .badge.discipline-status { color:#fff; }
html body .badge.discipline-status[data-status="pending"] { background-color:#0d6efd; }
html body .badge.discipline-status[data-status="approved"] { background-color:#198754; }
html body .badge.discipline-status[data-status="denied"] { background-color:#dc3545; }
/* Solid like the strike statuses: Lifted (ended early by Foundation) purple, Expired (ran out) grey. */
html body .badge.discipline-status[data-status="lifted"] { color:#fff; background-color:#6f42c1; }
html body .badge.discipline-status[data-status="expired"] { color:#fff; background-color:#6c757d; }
html .discipline-page[data-discipline-view="bans"] [data-add], html .discipline-page[data-discipline-view="requests"] [data-ban-add] { display:none; }
/* Pages with tabs: the tabs and that page's main action (Submit action, Log purchase…) share one row above the content. */
html .page-tabs-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
html .page-tabs-row > .seg { margin:0; }
html .page-tabs-row > .sales-header-actions { display:flex; gap:10px; margin-left:auto; }
html .sc-ban-reason { margin-top:6px; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; }
html .sc-row dt { flex-shrink:0; white-space:nowrap; }
/* Other agencies' listings and the list status: reason and source sit on their own lines under the pill. */
html .sc-row dd :is(.sc-ban-reason,.sc-source) { flex-basis:100%; margin-top:0; }
html .sc-row dd .sc-ban-reason { font-size:13px; font-weight:400; }
html .sc-source { font-size:12px; font-weight:400; overflow-wrap:anywhere; }
html .sc-listed { color:var(--muted); font-size:13px; font-weight:400; }
html body [data-review-dialog] .btn-outline-danger {
  --bs-btn-color:#fff; --bs-btn-bg:#dc3545; --bs-btn-border-color:#dc3545;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#bb2d3b; --bs-btn-hover-border-color:#bb2d3b;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#bb2d3b;
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#dc3545;
}
html .discipline-user-search p { margin:0; }
html :is(.discipline-user-results,.award-picker-results) { max-height:180px; overflow:auto; background:var(--panel, #18202c); border-radius:8px; box-shadow:0 10px 24px #0004; }
html :is(.discipline-user-results,.award-picker-results) button { display:flex; align-items:center; gap:6px; width:100%; min-width:0; padding:8px 10px; background:transparent; color:var(--text); border:0; text-align:left; font:12px/18px var(--font-ui); cursor:pointer; }
html .discipline-user-results :is(.discipline-match-name,.discipline-match-rank) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
html .discipline-user-results .discipline-match-name { flex:0 1 auto; }
html .discipline-user-results .discipline-match-rank { flex:0 1 auto; color:var(--muted); }
html .discipline-user-results .discipline-match-separator { color:var(--muted); flex-shrink:0; }
html .discipline-user-results :is(.division-badge,.crown-badge) { flex-shrink:0; font-size:10px; }
html :is(.discipline-user-results,.award-picker-results) button:is(:hover,[aria-selected="true"]) { background:#ffffff0d; }
html .transfer-form-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
html .transfer-form-pair label { min-width:0; }
html .transfer-review { display:grid; gap:16px; padding-top:20px; border-top:1px solid var(--border); }
html .transfer-review h3 { font:600 14px/1.5 var(--font-ui); margin:0; }
html .transfer-settings-change { display:grid; gap:14px; padding:16px; border:1px solid transparent; border-radius:8px; background:color-mix(in srgb,#ffda6a 5%,var(--bg-alt)); }
html .transfer-settings-change h3 { font:600 14px/1.5 var(--font-ui); margin:0; }
html .transfer-settings-change :is(p,li) { color:var(--muted); font-size:12px; line-height:1.6; }
html .transfer-settings-change ul { padding-left:18px; }
html .transfer-offer-comparison { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
html .transfer-offer-comparison > div { min-width:0; padding:12px; border:1px solid transparent; border-radius:6px; background:var(--panel); }
html .transfer-offer-comparison h4 { font:600 12px/1.5 var(--font-ui); margin-bottom:10px; }
html .transfer-offer-comparison dt { color:var(--muted); font-size:10px; margin-top:8px; }
html .transfer-offer-comparison dd { margin:2px 0 0; font-size:12px; overflow-wrap:anywhere; }
html .form .transfer-confirm-settings { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid transparent; border-radius:6px; background:var(--bg-alt); font-size:12px; }
html .transfer-confirm-settings input { flex-shrink:0; width:16px; height:16px; margin-top:2px; accent-color:#0d6efd; }
html .transfer-placement { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; min-width:0; }
html .transfer-placement > strong { font-size:15px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
html .transfer-placement :is(.division-badge,.crown-badge) { margin:0; }
html .transfer-status-summary { display:flex; align-items:center; gap:12px; padding:12px; background:var(--bg-alt); border:1px solid transparent; border-radius:8px; }
html .transfer-status-summary .badge { flex-shrink:0; }
html .transfer-status-summary p { margin:0; font-size:12px; line-height:1.6; color:var(--muted); }
html .transfer-offer-summary { display:grid; gap:12px; }
html .transfer-offer-summary > div { padding:16px; border:1px solid transparent; border-radius:8px; background:var(--bg-alt); }
html .transfer-offer-summary h3 { font:500 11px/1.5 var(--font-ui); color:var(--muted); margin:0 0 8px; }
html .transfer-offer-summary p { color:var(--muted); font-size:11px; line-height:1.6; margin-top:8px; }
html .transfer-offer-summary .transfer-approved-placement { border-color:transparent; }
html .transfer-rank-preview { display:grid; gap:8px; padding:14px; background:var(--bg-alt); border:1px solid transparent; border-radius:8px; }
html .transfer-rank-preview > :is(span,p) { font-size:12px; line-height:1.6; color:var(--muted); }
html .transfer-apply-preview { border-color:transparent; }
html .transfer-access-note { margin-top:10px; }
html .transfer-header-actions { display:flex; flex-wrap:wrap; gap:8px; }
html .transfer-header-actions .btn { font-size:13px; padding:9px 16px; }
html .transfer-suggestion { border:1px solid transparent; border-radius:10px; background:var(--bg-alt); overflow:hidden; }
html .transfer-calculator-body { display:grid; gap:14px; padding:0 16px 16px; }
html .transfer-calculator-body p { font-size:12px; color:var(--muted); line-height:1.6; margin:0; }
html .transfer-calculator-body > .btn { width:auto; justify-self:start; padding:8px 14px; font-size:12px; }
html .transfer-suggestion-result { justify-items:start; display:grid; gap:8px; padding-top:14px; border-top:1px solid var(--border); font-size:12px; }
html .transfer-suggestion-result:empty { display:none; }
html .transfer-wizard-step { display:grid; gap:20px; border:0; margin:0; padding:0; min-width:0; }
html .transfer-wizard-progress { display:flex; gap:24px; list-style:none; padding:0; margin:0; }
html .transfer-wizard-progress li { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
html .transfer-wizard-progress li > span { display:grid; place-items:center; width:25px; height:25px; border:1px solid transparent; border-radius:50%; font-size:11px; font-weight:600; }
html .transfer-wizard-progress [aria-current="step"] { color:var(--text); font-weight:600; }
html .transfer-wizard-progress [aria-current="step"] > span { background:#0d6efd; color:#fff; border-color:transparent; }
html .transfer-wizard-progress .is-complete > span { color:#6ea8fe; border-color:transparent; }
html .transfer-wizard-calculator .transfer-calculator-body { padding:18px; gap:16px; }
html .transfer-source-ladder { display:grid; gap:16px; }
/* Calculator result: the suggested offer is the highlighted card; a capped offer shows match → offer and why. */
html .transfer-suggestion-result { gap:10px; transition:opacity .15s ease; }
html .transfer-suggestion-result.is-updating { opacity:.5; pointer-events:none; }
/* Pin the Add Transfer box to the top so it grows downward instead of re-centring (and jumping) as content changes. */
html dialog.transfer-editor { margin-top:max(24px,6vh); }
html .transfer-offer-flow { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:8px; width:100%; }
html .transfer-offer-arrow { align-self:center; --arrow-size:28px; }
html .transfer-offer-card { display:grid; align-content:start; gap:10px; min-width:0; width:100%; padding:14px; border:1px solid transparent; border-radius:10px; background:var(--panel); }
html .transfer-offer-card.is-suggested { border-color:transparent; background:linear-gradient(180deg,rgba(13,110,253,.12),rgba(13,110,253,.03)); }
html .transfer-offer-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 8px; }
html .transfer-offer-eyebrow { color:var(--muted); font:700 10.5px/1.4 var(--font-ui); letter-spacing:.07em; text-transform:uppercase; }
html .transfer-offer-card.is-suggested .transfer-offer-eyebrow { color:#6ea8fe; }
html .transfer-offer-tag { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font:600 11px/1.5 var(--font-ui); white-space:nowrap; }
html .transfer-offer-tag svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
html .transfer-offer-tag.is-ok { color:var(--green); background:rgba(var(--green-rgb),.12); }
html .transfer-offer-tag.is-capped { color:#f0b429; background:rgba(240,180,41,.12); }
html .transfer-suggestion-result .transfer-offer-why { display:flex; align-items:flex-start; gap:8px; width:100%; padding:10px 12px; border:1px solid transparent; border-radius:8px; background:rgba(240,180,41,.07); color:var(--text); }
html .transfer-offer-why svg { flex-shrink:0; width:16px; height:16px; margin-top:1px; fill:none; stroke:#f0b429; stroke-width:2; stroke-linecap:round; }
html .transfer-suggestion-result .transfer-offer-meta { font-size:11.5px; }
@media(max-width:540px) { html .transfer-offer-flow { grid-template-columns:1fr; } html .transfer-offer-arrow { justify-self:center; transform:rotate(90deg); } }
@media(max-width:540px) { html .transfer-form-pair { grid-template-columns:1fr; gap:16px; } }
html .training-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html :is(.training-editor,.training-details) { width:min(520px,calc(100% - 32px)); border-radius:12px; }
html :is(.training-editor,.training-details) h2 { font-family:var(--font-ui); font-size:22px; letter-spacing:-.4px; }
html :is(.training-editor,.training-details) .editor-head { padding-bottom:18px; border-bottom:1px solid var(--border); }
html .training-trainer { color:var(--muted); font-size:12px; padding:10px 12px; border:1px solid transparent; border-radius:6px; background:var(--bg-alt); }
html .training-trainer strong { color:var(--text); font-weight:500; }
html .training-save-note { font-size:11px; line-height:1.6; color:var(--muted); }
html .training-editor .editor-actions .btn { font-size:13px; }
html .training-details-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
html .training-details-grid dt { color:var(--muted); font-size:11px; margin-bottom:5px; }
html .training-details-grid dd { margin:0; font-size:13px; overflow-wrap:anywhere; }
html .training-notes-section { padding-top:18px; border-top:1px solid var(--border); }
html .training-notes-section h3 { font:600 13px/1.5 var(--font-ui); letter-spacing:0; margin-bottom:8px; }
html .training-notes-section p { color:var(--muted); font-size:13px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
html .training-history-section { padding-top:18px; border-top:1px solid var(--border); }
html .training-history-section h3 { font:600 13px/1.5 var(--font-ui); letter-spacing:0; margin-bottom:12px; }
html .training-history-section ol { list-style:none; display:grid; gap:12px; padding:0; margin:0; }
html .training-history-section li { padding:12px; background:var(--bg-alt); border:1px solid transparent; border-radius:7px; }
html .training-history-section .training-history-empty { padding:0; border:0; background:none; font-size:12px; color:var(--muted); }
html .training-history-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:5px 12px; font-size:12px; }
html .training-history-heading strong { font-weight:500; }
html .training-history-heading time { font-size:10px; color:var(--muted); }
html .training-history-reason { color:var(--muted); font-size:12px; margin:7px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
html .training-history-section summary { color:var(--muted); font-size:11px; cursor:pointer; margin-top:8px; }
html .training-history-section dl { display:grid; gap:10px; margin-top:12px; }
html .training-history-section dt { color:var(--muted); font-size:10px; margin-bottom:3px; }
html .training-history-section dd { margin:0; font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
html .training-history-before { color:var(--muted); }
@media(max-width:760px) {
  html .training-header { flex-wrap:wrap; align-items:flex-start; }
  html .training-header h1 { font-size:27px; }
  html .training-panel { padding:16px; }
  html .training-toolbar { gap:14px; margin-bottom:18px; }
  html .training-filters { width:100%; flex-wrap:wrap; gap:12px; }
  html .training-filters > .form-select { width:130px; }
  html .training-search { flex:1; min-width:180px; }
  html .training-search input { flex:1; width:100%; min-width:0; }
  html .training-pager { align-items:flex-start; flex-direction:column; }
  html .training-pager .page-link { min-height:40px; }
}

html .transfer-editor label > span > .optional { margin-inline-start:5px; }

/* One clear right arrow across links, logs and before/after comparisons. */
html .site-arrow {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:var(--arrow-size,16px); height:var(--arrow-size,16px); margin-inline:3px;
  vertical-align:middle; color:var(--muted); font-size:0; line-height:1; text-decoration:none;
}
html .site-arrow::before {
  content:''; display:block; width:100%; height:100%; background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-theme] .btn .site-arrow { color:inherit; }

/* Profile identity uses the same name, separator and rank layout as user lists. */
html .profile-name > .profile-title-rank { font-size:16px; }
html .profile-title-rank > .rank-line { flex-wrap:wrap; }
html .profile-name .tag { margin-left:0; }
html .profile-card .profile-name { font-size:28px; line-height:1.25; letter-spacing:-.5px; padding-right:0; gap:8px 12px; }
html .profile-name > .profile-title-rank { align-items:center; line-height:1.35; letter-spacing:0; }
html .profile-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
html .profile-card .profile-actions .btn { gap:6px; margin:0; min-height:32px; padding:4px 10px; font-size:12px; line-height:1.5; letter-spacing:0; }
html .profile-actions [data-icon] { display:inline-flex; align-items:center; }
html .profile-actions .icon { display:block; width:14px; height:14px; }

/* Portal page rhythm: shared headings and navigation controls. */
html .portal-main .portal-header h1 {
  font-family:var(--font-ui); font-size:clamp(28px,2.5vw,32px);
  font-weight:700; line-height:1.2; letter-spacing:-.8px; margin:6px 0 10px;
}
html .portal-main .portal-header .eyebrow { font-size:11px; line-height:1.5; letter-spacing:1.5px; margin:0 0 6px; }
html .portal-main .portal-header-sub { font-size:14px; line-height:1.65; max-width:72ch; }
html :is(.portal-main,.bans-panel) :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"]) {
  display:flex; align-items:center; flex-wrap:nowrap; gap:6px; max-width:100%; min-width:0;
  padding:0; border:0; border-radius:0; background:transparent; overflow-x:auto; scrollbar-width:none;
}
html :is(.portal-main,.bans-panel) :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"])::-webkit-scrollbar { display:none; }
html :is(.portal-main,.bans-panel) :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"]) :is(button,.tab-link) {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  min-height:38px; gap:8px; padding:8px 14px; border:1px solid transparent; border-radius:8px;
  color:var(--muted); background:transparent; font-family:inherit; font-size:13px;
  font-weight:600; line-height:20px; white-space:nowrap; cursor:pointer;
  transition:none;
}
html :is(.portal-main,.bans-panel) :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"]) :is(button,.tab-link):hover { color:var(--text); background:var(--bg-alt); }
html :is(.portal-main,.bans-panel) :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"]) :is([aria-selected="true"],[aria-checked="true"]) {
  color:#fff; background:#0d6efd; border-color:transparent; box-shadow:none;
}
html :is(.portal-main,.bans-panel) :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"]) :is([aria-selected="true"],[aria-checked="true"]):hover { color:#fff; background:#0b5ed7; border-color:transparent; }
html :is(.portal-main,.bans-panel) :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"]) :is(button,.tab-link):focus-visible { outline:2px solid #86b7fe; outline-offset:-2px; }
html :is(.portal-main,.bans-panel) :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"]) [data-icon] { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex-shrink:0; }
html :is(.portal-main,.bans-panel) :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"]) .icon { display:block; width:16px; height:16px; }
html :is(.portal-main,.bans-panel) :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"]) :is(.seg-count:not(:empty),.tab-count) {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  min-width:20px; height:20px; margin:0; padding:0 6px; border-radius:999px;
  font-size:11px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
  color:var(--text); background:color-mix(in srgb,var(--text) 10%,transparent);
}
html :is(.portal-main,.bans-panel) :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"]) :is([aria-selected="true"],[aria-checked="true"]) :is(.seg-count,.tab-count) { color:#fff; background:#08234b; }
html .unit-add { align-items:center; }
html .unit-add :is(input,select,.btn) { min-height:40px; }
@media(max-width:760px) {
  html .portal-main :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"]) :is(button,.tab-link) { min-height:44px; padding:10px 12px; }
  html .portal-main :is(.admin-tools,.training-toolbar) :is(input,select) { min-height:44px; }
  html .unit-add :is(input,select,.btn), html .unit-position { min-height:44px; }
  html .unit-add { padding:16px; gap:10px; }
}
@media(max-width:540px) {
  html .unit-add { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  html .unit-add input { grid-column:1 / -1; min-width:0; width:100%; }
  html .unit-add select { min-width:0; width:100%; }
  html .training-header { gap:14px; }
}

/* Shared field typography prevents native controls and placeholders from drifting apart. */
html :is(input,select,textarea) { font-family:var(--font-ui); font-weight:400; font-style:normal; letter-spacing:normal; }
html :is(input,textarea)::placeholder { font-family:inherit; font-size:inherit; font-weight:inherit; font-style:normal; letter-spacing:inherit; color:var(--muted); opacity:1; }
html .portal-main :is(.training-toolbar,.promo-bar,.admin-tools,.career-show,.unit-add,.promotion-list-controls),
html .portal-main .admin-search input.search,
html .portal-main :is(.training-toolbar,.promo-bar,.admin-tools,.career-show,.unit-add,.promotion-list-controls) :is(label,input,select) {
  font-family:var(--font-ui); font-size:13px; font-weight:400;
  font-style:normal; line-height:1.5; letter-spacing:normal;
}

/* Sales: a clear quote, a separate payment record, and a fulfilment queue. */
html .sales-header-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
html .sales-calculator-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr); gap:24px; align-items:start; }
html .sales-calculator,.sales-price-guide { min-width:0; }
html .sales-calculator-form { padding:24px; }
html .sales-calculator-form > .btn { justify-self:start; }
html .sales-price-guide { padding:24px; display:grid; gap:16px; }
html .sales-price-guide h2 { font-size:20px; line-height:1.4; letter-spacing:-.4px; }
html .sales-price-guide > p { color:var(--muted); font-size:13px; line-height:1.7; }
html .sales-price-line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); font-size:12px; }
html .sales-price-line > span:last-child { text-align:right; }
html .sales-price-line .optional { display:block; margin-top:4px; font-size:11px; }
html .sales-flow-note { display:flex; align-items:flex-start; gap:10px; padding-top:4px; }
html .sales-flow-note .icon { flex-shrink:0; margin-top:3px; }
html .sales-quote { padding:24px; border-top:1px solid var(--border); background:var(--bg-alt); border-radius:0 0 12px 12px; display:grid; gap:20px; }
html .sales-rank-flow { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
html .sales-rank-flow > div { flex:1; min-width:130px; }
html .sales-rank-flow .rank-line { flex-wrap:wrap; }
html .sales-overline { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:8px; }
html .sales-price-calculation { display:grid; gap:10px; }
html .sales-price-calculation > div { display:flex; justify-content:space-between; gap:16px; font-size:13px; color:var(--muted); }
html .sales-price-calculation .sales-total { padding-top:16px; margin-top:4px; border-top:1px solid var(--border); color:var(--text); font-weight:600; align-items:center; }
html .sales-total strong { font-size:30px; line-height:1.2; letter-spacing:-.7px; font-variant-numeric:tabular-nums; }
html .sales-breakdown { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
html .sales-breakdown li { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; }
html .sales-page [data-sales-view="history"]:not([hidden]) { display:grid; gap:20px; }
html .sales-page .sales-overview { margin:0; }
html .sales-page .training-toolbar h2 { font-size:15px; letter-spacing:0; }
html .sales-table td { vertical-align:middle; }
html .sales-table .rank-line { flex-wrap:wrap; }
html .sales-record-id { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
html .sales-money { white-space:nowrap; font-variant-numeric:tabular-nums; }
html .sales-editor { width:min(580px,calc(100% - 32px)); }
html .sales-detail-title { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:20px; }
html .sales-detail-title > span { color:var(--muted); font-size:12px; }
html .sales-detail-item { margin:12px 0; }
html .sales-detail-status { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
html .sales-detail-status > strong { margin-left:auto; font-size:22px; }
html .sales-detail-facts { display:grid; gap:14px; margin:20px 0; }
html .sales-detail-facts dt { color:var(--muted); font-size:11px; margin-bottom:4px; }
html .sales-detail-facts dd { font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; }
html .sales-review-note { border:1px solid transparent; border-radius:8px; padding:12px; font-size:12px; color:var(--muted); }
html .sales-perk-removal { display:grid; gap:8px; margin:14px 0; padding:12px; border:1px solid var(--border); border-radius:8px; }
html .sales-perk-removal legend { padding:0 5px; font-size:13px; font-weight:650; }
html .sales-perk-removal label { display:flex; align-items:center; gap:8px; }
html [data-renew-reference] { margin-bottom:12px; }
html .sales-history-label { font-size:13px; margin:20px 0 12px; }
html .sales-events { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
html .sales-events li { border-left:2px solid var(--border); padding-left:12px; font-size:12px; }
html .sales-events li > span { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
html .sales-events p { margin-top:6px; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
html .sales-log-rank { padding:12px; border:1px solid transparent; border-radius:8px; background:var(--bg-alt); }
html .sales-editor .editor-actions { flex-wrap:wrap; }
html .sales-editor .editor-actions .btn { flex:1; }
@media(max-width:1000px) { html .sales-calculator-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:760px) {
 html .sales-header-actions { width:100%; }
 html .sales-calculator-form,html .sales-quote,html .sales-price-guide { padding:18px; }
 html .sales-editor .transfer-form-pair { grid-template-columns:minmax(0,1fr); }
}

html .sales-rank-flow > .site-arrow { align-self:flex-end; margin-bottom:-1px; }

html :is(.sales-table,.sales-rank-price-table) :is(th,td) { text-align:left; }

@media(max-width:600px) {
 html .sales-rank-flow { display:grid; grid-template-columns:minmax(0,1fr); }
 html .sales-rank-flow > .site-arrow { justify-self:center; align-self:center; transform:rotate(90deg); margin:0; }
}

/* Pricing workspace: division defaults, clear totals and a live upgrade example. */
html .admin-workspace:has([data-sales-pricing-tab][aria-selected="true"]) .admin-overview { display:none; }

/* Focused pricing editor: one main surface, clear hierarchy, optional product settings. */

/* Leave status: approved dates and pending requests are distinct, readable cards. */
html .leave-self-panel > .panel-head h2 { font-size:18px; }
html .leave-self-layout { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr)); gap:20px; padding:24px; align-items:stretch; }
html .leave-summary-card { display:flex; flex-direction:column; gap:22px; padding:22px; border:1px solid transparent; border-radius:10px; background:var(--bg-alt); min-width:0; }
html .leave-summary-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
html .leave-summary-heading h3 { font-size:15px; font-weight:600; line-height:1.4; }
html .leave-summary-heading .status-pill { flex-shrink:0; }
html .leave-summary-dates { display:flex; flex-wrap:wrap; gap:20px 32px; margin:0; }
html .leave-summary-dates > div { min-width:0; }
html .leave-summary-dates dt { font-size:11px; color:var(--muted); margin-bottom:6px; }
html .leave-summary-dates dd { font-size:19px; font-weight:600; line-height:1.4; letter-spacing:-.3px; margin:0; }
html .leave-summary-reason > span { display:block; font-size:11px; color:var(--muted); margin-bottom:6px; }
html .leave-summary-reason p { font-size:13px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
html .leave-summary-pending { border-color:transparent; }
html .leave-pending-note { font-size:12px; color:var(--muted); line-height:1.7; padding:12px 14px; border:1px solid transparent; border-radius:8px; background:var(--panel); }
html .leave-summary-actions { margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; }
html .leave-summary-actions .btn { font-size:13px; min-height:38px; }
html .leave-request-form { min-width:0; max-width:760px; width:100%; padding:0; }
html .leave-self-layout:has(> .leave-request-form:not([hidden])) { grid-template-columns:minmax(0,1fr); }
html .leave-form-intro h3 { font-size:16px; margin-bottom:6px; }
html .leave-form-intro p { color:var(--muted); font-size:13px; line-height:1.7; }
@media(max-width:760px) { html .leave-self-layout { padding:16px; gap:16px; } html .leave-summary-card { padding:18px; gap:18px; } html .leave-summary-dates dd { font-size:17px; } html .leave-summary-actions .btn { min-height:44px; } }

html .leave-request-kind { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:3px 0; font-size:11px; }
html .leave-request-kind .badge { background:var(--bg-alt); color:var(--text); border-color:transparent; font-size:10px; }
html .leave-pending-limit { font-size:12px; color:var(--muted); line-height:1.6; }

/* Account access uses neutral status badges; destructive actions remain explicit. */
.account-disabled-badge { color:var(--bs-secondary-color,#aeb8c9); background:rgba(148,163,184,.1); border:1px solid transparent; }
.account-danger { border-top:1px solid var(--border,#273348); padding-top:20px; }
.account-danger p { margin-bottom:12px; }
.account-action-dialog { max-width:560px; width:calc(100% - 32px); }
.account-action-body { padding:24px; display:grid; gap:20px; }
.account-action-body p { margin:0; line-height:1.65; }
.account-action-body label { display:grid; gap:8px; }
.account-action-dialog .editor-actions { padding:16px 24px; }
.training-result.is-failed { color:#ea868f; }
.training-result.is-incomplete { color:#e6bd73; }
.training-result.is-passed { color:#75b798; }
.training-confirm { display:flex; align-items:flex-start; gap:8px; margin-top:8px; font-weight:500; cursor:pointer; }
.training-confirm[hidden] { display:none; }
.training-confirm input { width:auto; margin-top:4px; flex-shrink:0; }
html body label.training-confirm:not([hidden]) { display:flex; flex-direction:row; align-items:flex-start; gap:10px; }
html body label.training-confirm input[type="checkbox"] { width:18px; min-width:18px; height:18px; margin:2px 0 0; flex-shrink:0; }
/* Test mode switch in the admin panel header (owner only). */
html .admin-test-mode { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; background:var(--panel); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
html .admin-test-mode[hidden] { display:none; }
html .admin-test-mode.is-on { background:rgba(255,193,7,.12); box-shadow:inset 0 0 0 1px rgba(255,193,7,.45); }
html .admin-test-mode input { width:18px; height:18px; margin:0; }
html .admin-test-mode small { display:block; color:var(--muted); font-weight:400; font-size:12px; }
.account-action-body p .rank-line { display:inline-flex; vertical-align:middle; }

/* ---------- Leaderboards ---------- */
.lb-page { --lb-ease:cubic-bezier(.22,1,.36,1); --lb-radius:18px; }
.lb-toolbar { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-bottom:14px; }

.lb-blurb { color:var(--muted); font-size:14px; margin:0 0 18px; min-height:1.5em; }

/* Summary tiles: icon, small label, number. The one stat style, shared by Leaderboards, Activity Tracker, profiles
   and the homepage. .stats-4 is a row of four (two a row on phones). */
.lb-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:26px; }
.lb-stats:is(.stats-3,.stats-4) { margin-bottom:0; }
.lb-stats.stats-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.lb-stats > .lb-stat[hidden] { display:none; }
.lb-stat { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--lb-radius,18px); min-width:0;
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.07),transparent 55%),var(--panel); border:0;
  transition:transform .35s var(--lb-ease,cubic-bezier(.22,1,.36,1)), border-color .25s; }
.lb-stat:hover { transform:translateY(-2px); }
.lb-stat-icon { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  color:var(--accent); background:rgba(var(--accent-rgb),.1); }
.lb-stat-icon .icon { width:20px; height:20px; }
.lb-stat > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.lb-stat-label { color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-stat strong { font-size:26px; line-height:1.15; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.lb-stat strong sup { font-size:13px; top:-.7em; margin-left:1px; }
.lb-stat strong small { font-size:13px; font-weight:500; color:var(--muted); margin-left:6px; letter-spacing:0; }

/* Medal colours */
.lb-gold { --medal:#f7c948; --medal-rgb:247,201,72; --medal-2:#f59e0b; }
.lb-silver { --medal:#cbd5e1; --medal-rgb:203,213,225; --medal-2:#94a3b8; }
.lb-bronze { --medal:#e0965a; --medal-rgb:224,150,90; --medal-2:#b45309; }
.lb-medal { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; font-weight:800; font-size:13.5px; color:#1a1305;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),transparent 42%),linear-gradient(145deg,var(--medal),var(--medal-2));
  box-shadow:0 6px 16px rgba(var(--medal-rgb),.35); }
.lb-medal-small { width:26px; height:26px; font-size:12px; }

/* Podium */
.lb-podium { position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:end; margin-bottom:26px; }
.lb-podium[data-count="1"] { grid-template-columns:minmax(0,340px); justify-content:center; }
.lb-podium[data-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lb-podium-card { --mx:50%; --my:0px; position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px;
  padding:22px 16px 20px; border-radius:22px; color:inherit; text-decoration:none; overflow:hidden;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(var(--medal-rgb),.14),transparent 70%),
    linear-gradient(180deg,rgba(var(--medal-rgb),.13),rgba(var(--medal-rgb),.02) 55%),var(--panel);
  border:0;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transition:transform .5s var(--lb-ease), box-shadow .5s var(--lb-ease), border-color .3s; }
a.lb-podium-card:hover { transform:translateY(-6px); box-shadow:0 22px 50px rgba(0,0,0,.2),0 10px 30px rgba(0,0,0,.25); }
.lb-podium-card.lb-gold { padding-top:34px; padding-bottom:28px; }
.lb-podium-card .lb-medal { position:absolute; top:14px; left:14px; }
.lb-podium-card.lb-gold .lb-medal { width:38px; height:38px; font-size:16px; }
/* A light sweep across the winner's card every few seconds. */
.lb-shine { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; border-radius:inherit; }
.lb-gold .lb-shine::after { content:""; position:absolute; top:-50%; left:-60%; width:40%; height:200%; transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,236,170,.12),transparent); animation:lb-sweep 5.5s var(--lb-ease) 1.2s infinite; }
@keyframes lb-sweep { 0% { left:-60%; } 35%,100% { left:130%; } }
.lb-podium-avatar { position:relative; width:100px; height:100px; border-radius:50%; display:grid; place-items:end center; margin-bottom:10px;
  background:radial-gradient(circle at 50% 38%,rgba(var(--medal-rgb),.38),rgba(var(--medal-rgb),.05) 72%);
  box-shadow:inset 0 0 0 2px rgba(var(--medal-rgb),.55); overflow:hidden; }
.lb-gold .lb-podium-avatar { width:122px; height:122px; box-shadow:inset 0 0 0 2px rgba(var(--medal-rgb),.7); }
.lb-podium-avatar img { width:64px; height:110px; object-fit:cover; object-position:top; image-rendering:pixelated; margin-bottom:-14px;
  transition:transform .6s var(--lb-ease); transform-origin:50% 100%; }
.lb-gold .lb-podium-avatar img { margin-bottom:-2px; }
.lb-podium-card:hover .lb-podium-avatar img { transform:translateY(-4px) scale(1.06); }
.lb-podium-name { font-weight:700; font-size:17px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; margin:0; letter-spacing:-.01em; }
.lb-podium-score { margin:10px 0 0; display:flex; align-items:baseline; gap:6px; color:var(--muted); font-size:13px; }
.lb-podium-score strong { font-size:32px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  background:linear-gradient(180deg,var(--medal),var(--medal-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lb-gold .lb-podium-score strong { font-size:40px; }
.lb-podium-extra { margin:0; color:var(--muted); font-size:12px; padding:3px 10px; border-radius:99px; background:rgba(var(--medal-rgb),.08); }

/* Ranked list */
.lb-panel { border-radius:var(--lb-radius); overflow:hidden; }
.lb-panel .panel-count:empty { display:none; }
.lb-list { padding:8px; display:flex; flex-direction:column; gap:4px; }
.lb-row { --mx:50%; --my:50%; position:relative; display:grid; grid-template-columns:40px 42px minmax(0,1.3fr) minmax(80px,1fr) auto; align-items:center; gap:14px;
  padding:10px 15px; border-radius:14px; color:inherit; text-decoration:none; border:0;
  transition:background-color .25s, border-color .25s, transform .4s var(--lb-ease); }
.lb-row:hover { background:radial-gradient(320px circle at var(--mx) var(--my),rgba(var(--accent-rgb),.08),transparent 70%),var(--bg-alt); transform:translateX(3px); }
.lb-row.lb-gold, .lb-row.lb-silver, .lb-row.lb-bronze { background:linear-gradient(90deg,rgba(var(--medal-rgb),.08),rgba(var(--medal-rgb),.02)); }
.lb-row.lb-gold:hover, .lb-row.lb-silver:hover, .lb-row.lb-bronze:hover {
  background:radial-gradient(320px circle at var(--mx) var(--my),rgba(var(--medal-rgb),.14),transparent 70%),rgba(var(--medal-rgb),.06); }
.lb-place { text-align:center; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.lb-row .member-avatar { width:42px; height:42px; border-radius:50%; background:var(--bg-alt); object-fit:cover; object-position:center 30%;
  box-shadow:inset 0 0 0 1px var(--border); transition:transform .4s var(--lb-ease); }
.lb-row:hover .member-avatar { transform:scale(1.08); }
.lb-who { min-width:0; }
.lb-name { margin:0; font-weight:700; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-bar { height:6px; border-radius:99px; background:rgba(var(--accent-rgb),.08); overflow:hidden; }
.lb-bar span { display:block; width:0; height:100%; border-radius:inherit; background:#3d8bfd;
  transition:width .9s var(--lb-ease); }
.lb-row.lb-gold .lb-bar span, .lb-row.lb-silver .lb-bar span, .lb-row.lb-bronze .lb-bar span {
  background:linear-gradient(90deg,var(--medal-2),var(--medal)); box-shadow:0 0 12px rgba(var(--medal-rgb),.45); }
.lb-score { text-align:right; display:flex; flex-direction:column; line-height:1.2; min-width:110px; }
.lb-score strong { font-size:20px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.lb-score span { font-size:11.5px; color:var(--muted); }
.lb-tag { font-size:10.5px; padding:1px 6px; margin:0; }
.lb-gap { text-align:center; color:var(--muted); letter-spacing:.3em; padding:2px 0; }
.lb-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:44px 16px; color:var(--muted); text-align:center; }
.lb-empty strong { color:var(--text); font-size:16px; }
.lb-empty-icon { width:44px; height:44px; padding:10px; margin-bottom:6px; border-radius:14px; box-sizing:content-box;
  background:rgba(var(--accent-rgb),.07); stroke-width:1.5; opacity:.8; }

/* Loading placeholders */
.lb-skel { --medal-rgb:var(--accent-rgb); min-height:230px; justify-content:center; gap:12px; }
.lb-skel-first { min-height:270px; }
.lb-skel-face { width:96px; height:96px; border-radius:50%; }
.lb-skel-row { display:flex; align-items:center; gap:14px; padding:12px 14px; }
.lb-skel-dot { width:22px; height:22px; border-radius:50%; }
.lb-skel-face-sm { width:42px; height:42px; border-radius:50%; }
.lb-skel-lines { flex:1; display:flex; flex-direction:column; gap:7px; }
.lb-loading .lb-stage { opacity:.6; transition:opacity .3s; }

@media (prefers-reduced-motion: reduce) {
  .lb-page *, .lb-page *::after { transition:none !important; animation:none !important; }
}
@media (max-width: 760px) {
  html .table-wrap td.panel-empty { text-align:left; padding-left:16px; padding-right:16px; }
  .lb-toolbar .seg { width:100%; overflow-x:auto; scrollbar-width:none; }
  .lb-toolbar .seg button { flex:1 0 auto; justify-content:center; white-space:nowrap; }
  .lb-stats, .lb-stats:is(.stats-3,.stats-4) { grid-template-columns:1fr 1fr; }
  .lb-stats.stats-3 > :last-child:nth-child(odd) { grid-column:1 / -1; }
  /* The homepage with Registered users hidden: three tiles, the last one full width. */
  .lb-stats.stats-3 > .lb-stat[hidden]:first-child ~ :last-child:nth-child(even) { grid-column:1 / -1; }
  .lb-podium, .lb-podium[data-count="2"] { grid-template-columns:1fr; }
  .lb-podium-card.lb-gold { order:-1; }
  .lb-row { grid-template-columns:28px 38px minmax(0,1fr) auto; gap:10px; padding:8px; }
  .lb-row:hover { transform:none; }
  .lb-bar { display:none; }
  .lb-score { min-width:0; }
}

/* ---------- Activity Tracker (builds on the Leaderboards styles above) ---------- */
/* One control height and one inner gutter, so every row of controls and the table's first column line up. */
.portal-main.at-page { --at-ctl:40px; --at-gutter:20px; }
.at-range { display:inline-flex; align-items:center; height:36px; padding:0 14px; color:var(--muted); font-size:13px; font-weight:600; white-space:nowrap;
  border-radius:99px; background:rgba(var(--accent-rgb),.06); border:1px solid transparent; }
.at-stats { grid-template-columns:1.25fr repeat(3,minmax(0,1fr)); }
.at-stats .lb-stat { min-height:84px; gap:12px; padding:14px 16px; }
.at-stats .lb-stat-icon { width:38px; height:38px; border-radius:11px; }
.at-stats .lb-stat-label { letter-spacing:.05em; }
.at-stats .lb-stat:hover { transform:none; }
.at-stat-active { background:linear-gradient(160deg,rgba(var(--green-rgb),.1),transparent 60%),var(--panel); border-color:transparent; }
.at-ring { flex:none; width:42px; height:42px; transform:rotate(-90deg); }
.at-ring circle { fill:none; stroke-width:5; stroke:rgba(var(--green-rgb),.14); }
.at-ring circle + circle { stroke:var(--green); stroke-linecap:round; transition:stroke-dashoffset 1s var(--lb-ease); }
.at-stat-active strong small { font-size:15px; font-weight:600; margin-left:2px; }

/* Filter bar: search, division, show and export all sit on one 40px line. */
.at-filters { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:16px var(--at-gutter); border-bottom:1px solid var(--border); }
.at-search { position:relative; flex:1 1 260px; max-width:420px; display:flex; align-items:center; margin:0; }
.at-search .icon { position:absolute; left:13px; color:var(--muted); pointer-events:none; width:16px; height:16px; }
html .at-search input { box-sizing:border-box; width:100%; height:var(--at-ctl); padding:0 12px 0 38px; border-radius:12px; border:1px solid transparent;
  background:var(--bg-alt); color:var(--text); font:inherit; font-size:14px; transition:border-color .2s, box-shadow .2s; }
html .at-search input:focus { outline:none; border-color:rgba(13,110,253,.6); box-shadow:0 0 0 4px rgba(13,110,253,.14); }
html .at-filters .at-select { box-sizing:border-box; flex:0 0 200px; width:200px; height:var(--at-ctl); padding-top:0; padding-bottom:0; border-radius:12px; font-size:14px; }
.at-filters .at-show { box-sizing:border-box; height:var(--at-ctl); padding:3px; border-radius:12px; align-items:stretch; }
.at-filters .at-show button { padding:0 14px; border-radius:9px; font-size:13px; }
html .at-export { box-sizing:border-box; display:inline-flex; align-items:center; gap:7px; height:var(--at-ctl); padding:0 14px; margin-left:auto; border-radius:12px; font-size:13px; }
.at-export .icon { width:16px; height:16px; }

/* Table: fixed column widths, numbers centred under their headings. */
.at-table-wrap { overflow-x:auto; overflow-y:hidden; } /* sideways only: a vertical scrollbar must never appear */
.at-table { width:100%; min-width:820px; table-layout:fixed; border-collapse:separate; border-spacing:0; }
.at-col-staff { width:27%; }
.at-col-details { width:11%; }
.at-col-num { width:10%; }
.at-col-total { width:11%; }
.at-col-last { width:11%; }
.at-table th, .at-table td { box-sizing:border-box; }
.at-table thead th { background:var(--panel); padding:0; border-bottom:1px solid var(--border); white-space:nowrap; text-align:left; }
.at-table thead th button { all:unset; box-sizing:border-box; display:flex; align-items:center; width:100%; height:42px; padding:0 14px; cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); transition:color .2s; }
.at-table thead th.at-num button { justify-content:center; padding:0 4px; font-size:10.5px; letter-spacing:.03em; }
.at-table thead th button span { position:relative; }
/* The sort arrow hangs off the label, so it never pushes the heading off-centre. */
.at-table thead th button span::after { content:""; position:absolute; left:calc(100% + 7px); top:50%; width:6px; height:6px; margin-top:-5px;
  border:solid currentColor; border-width:0 1.6px 1.6px 0; opacity:0; transform:rotate(45deg); transition:opacity .2s, transform .3s var(--lb-ease); }
.at-table thead th button:hover span::after { opacity:.35; }
.at-table thead th[aria-sort] button span::after { opacity:1; }
.at-table thead th[aria-sort="ascending"] button span::after { transform:rotate(-135deg); margin-top:-1px; }
.at-table thead th button:hover, .at-table thead th[aria-sort] button { color:var(--text); }
.at-table thead th button:focus-visible { outline:2px solid rgba(var(--accent-rgb),.6); outline-offset:-2px; border-radius:8px; }
.at-table tbody td { height:60px; padding:0 14px; border-bottom:1px solid rgba(var(--accent-rgb),.07); vertical-align:middle; overflow:hidden; }
.at-table th:first-child button, .at-table td:first-child { padding-left:var(--at-gutter); }
.at-table th:last-child button, .at-table td:last-child { padding-right:var(--at-gutter); }
.at-table tbody tr:last-child td { border-bottom:0; }
.at-table tbody tr[data-href] { cursor:pointer; transition:background-color .2s; }
.at-table tbody tr[data-href]:hover { background:rgba(var(--accent-rgb),.05); }
.at-table tbody tr.is-quiet .at-person { opacity:.72; }
.at-person { display:flex; align-items:center; gap:12px; min-width:0; max-width:100%; color:inherit; text-decoration:none; }
.at-avatar { position:relative; flex:none; display:block; width:38px; height:38px; }
.at-person .member-avatar { display:block; width:38px; height:38px; border-radius:50%; background:var(--bg-alt); object-fit:cover; object-position:center 30%;
  box-shadow:inset 0 0 0 1px var(--border); }
.at-dot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; border:2px solid transparent; }
.at-dot.online { background:var(--green); box-shadow:0 0 8px rgba(var(--green-rgb),.7); }
/* "Name · Rank [Division]" on one line, like every other list (name-with-rank in the shared styles). */
.at-who { display:flex; align-items:center; flex-wrap:wrap; min-width:0; font-size:14px; }
.at-name { display:inline-flex; align-items:center; gap:6px; min-width:0; font-weight:700; white-space:nowrap; }
.at-who .rank-line { font-size:13px; }
.at-num { text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; }
.at-zero { color:var(--muted); opacity:.45; }
.at-count { display:inline-block; box-sizing:border-box; min-width:34px; height:26px; line-height:26px; padding:0 8px; border-radius:8px; font-weight:700; text-align:center;
  background:rgba(13,110,253,var(--heat)); box-shadow:inset 0 0 0 1px rgba(110,168,254,calc(var(--heat) * 1.2)); }
.at-total { display:inline-block; box-sizing:border-box; min-width:46px; height:28px; line-height:28px; padding:0 12px; border-radius:99px; font-weight:800; text-align:center;
  color:#fff; background:#0d6efd; }
.at-total.none { color:var(--muted); background:rgba(var(--accent-rgb),.07); box-shadow:inset 0 0 0 1px var(--border); font-weight:600; font-size:12px; }
.at-last { white-space:nowrap; font-size:13px; }

.at-foot { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; min-height:64px; padding:12px var(--at-gutter); border-top:1px solid var(--border); }
.at-size { display:inline-flex; align-items:center; gap:8px; margin:0; color:var(--muted); font-size:13px; }
html .at-size select { box-sizing:border-box; width:auto; height:36px; padding-top:0; padding-bottom:0; border-radius:10px; font-size:13px; }
.at-showing { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.at-pages { display:flex; align-items:center; gap:4px; margin-left:auto; }
.at-pg { min-width:36px; height:36px; padding:0 8px; border-radius:10px; border:1px solid transparent; background:none; color:var(--muted);
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s; }
.at-pg:hover:not(:disabled) { color:var(--text); background:var(--bg-alt); border-color:transparent; }
.at-pg.on { color:#fff; background:#0d6efd; }
.at-pg:disabled { opacity:.35; cursor:default; }
.at-ellipsis { color:var(--muted); padding:0 2px; }
.at-pg:focus-visible { outline:2px solid rgba(var(--accent-rgb),.6); outline-offset:1px; }

@media (max-width: 1100px) {
  .at-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .at-stat-active { grid-column:1 / -1; }
}
@media (max-width: 760px) {
  .portal-main.at-page { --at-gutter:14px; }
  :is(.at-stats,.stats-3,.stats-4) .lb-stat { gap:10px; padding:12px 14px; }
  :is(.at-stats,.stats-3,.stats-4) .lb-stat-icon { width:32px; height:32px; border-radius:9px; }
  :is(.at-stats,.stats-3,.stats-4) .lb-stat-label { letter-spacing:.02em; }
  :is(.stats-3,.stats-4) .lb-stat-label { white-space:normal; line-height:1.3; }
  html .at-export { margin-left:0; }
  html .at-filters .at-select { flex:1 1 160px; width:auto; }
  .at-search { max-width:none; }
  .at-pages { margin-left:0; }
  /* Phones: the hidden columns drop out, so let the rest size themselves. */
  .at-table { min-width:0; table-layout:auto; }
  .at-table col { width:auto; }
  .at-table tbody td { height:56px; padding:0 10px; }
  .at-table thead th button { padding:0 10px; }
}

/* ---------- Settings account card: "Name • Rank [Division] TAG" on one line, like the profile header ---------- */
html .account-card-name.name-with-rank { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
html .account-card-name > .account-card-rank { font-family:var(--font-ui); font-size:16px; font-weight:400; line-height:1.35; letter-spacing:0; }
html .account-card-rank > .rank-line { flex-wrap:wrap; }
html .account-card-rank:empty { display:none; }
html .account-card-name .tag { margin:0; vertical-align:0; }

/* ---------- Big name + rank lines (profile header, Settings account card) ---------- */
/* Profile headers centre the smaller rank beside the name. The Settings
   account card retains its baseline alignment; badges centre within the rank. */
html .profile-name { align-items:center; }
html .profile-name > .rank-line { align-items:center; }
html .account-card-name.name-with-rank { align-items:baseline; }
html .account-card-name > .rank-line { align-items:baseline; }
html :is(.profile-name, .account-card-name) > .rank-line > .rank-line { align-items:center; } /* rank text and its badge, centred together */
html :is(.profile-name, .account-card-name) > .tag { align-self:center; }

/* ---------- Ranks inside a sentence ("Promoted from Junior Agent [Security] to Founder [Foundation]") ---------- */
/* Sit the rank on the sentence's baseline rather than its middle, so the rank text lines up with the words around
   it; the division badge stays centred on the rank text. (A rank-line inside a flex row ignores this.) */
html .rank-line { vertical-align:baseline; }

/* One application popup for homepage and Special Units cards. */
html:has(.unit-application-dialog[open]) { overflow:hidden; scrollbar-gutter:stable; }
.unit-application-dialog { width:min(620px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:28px; border:0; border-radius:18px; background:var(--panel); color:var(--text); box-shadow:0 24px 80px #0008; overflow-y:auto; overscroll-behavior:contain; }
.unit-application-dialog::backdrop { background:#05080fc4; backdrop-filter:blur(5px); }
.unit-application-dialog .form { gap:20px; }
.unit-application-header { display:flex; align-items:center; gap:14px; }
.unit-application-header h2 { flex:1; min-width:0; font-size:22px; line-height:1.35; letter-spacing:-.5px; }
.unit-application-icon { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; border-radius:12px; background:#0d6efd1a; color:#6ea8fe; }
.unit-application-icon .icon { width:21px; height:21px; }
.unit-application-close { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font:26px/1 var(--font-ui); }
.unit-application-close:hover { color:var(--text); background:var(--nav-hover-bg); }
.unit-application-description { margin:0; color:var(--muted); font-size:12px; line-height:1.8; }
.unit-application-dialog [data-unit-fields] { display:grid; gap:20px; }
.unit-application-intro { color:var(--muted); font-size:11px; line-height:1.7; }
.unit-application-question { display:grid; gap:9px; min-width:0; }
.unit-application-dialog .unit-application-question > label { display:block; font-size:13px; font-weight:600; line-height:1.6; }
.unit-experience-details { padding-top:4px; }
html .unit-application-dialog textarea { min-height:76px; padding:12px; resize:vertical; border-color:transparent; border-radius:10px; font-size:13px; line-height:1.7; }
html .unit-application-dialog :is(input,select) { font-size:13px; }
.unit-application-hint { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:10px; line-height:1.6; }
.unit-application-hint > span:last-child { flex-shrink:0; font-variant-numeric:tabular-nums; }
.unit-application-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:2px; }
.unit-application-state { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:20px; border-radius:12px; background:var(--bg-alt); }
.unit-application-state > strong { font-size:16px; font-weight:600; }
.unit-application-state > p { color:var(--muted); font-size:12px; line-height:1.8; }
.unit-application-state > .btn { margin-top:4px; }
.unit-application-success { display:grid; place-items:center; order:-1; width:36px; height:36px; border-radius:50%; background:#19875426; color:#75b798; }
.unit-application-dialog :is(button,a):focus-visible { outline:2px solid #86b7fe; outline-offset:3px; }
@media(max-width:540px) {
  .unit-application-dialog { padding:22px 18px; border-radius:16px; }
  .unit-application-header { gap:10px; }
  .unit-application-header h2 { font-size:19px; }
  .unit-application-icon { width:36px; height:36px; }
  .unit-application-actions > .btn { flex:1; padding-left:10px; padding-right:10px; font-size:12px; }
}

/* Unit names lead their compact badge throughout cards, records and management. */
.unit-title { display:inline-flex; align-items:center; gap:8px; max-width:100%; min-width:0; vertical-align:baseline; }
.unit-title > .unit-name { min-width:0; overflow-wrap:anywhere; }
html .unit-title > .unit-tag { flex-shrink:0; min-width:0; margin:0; padding:3px 6px; font-size:11px; font-weight:700; line-height:1.3; letter-spacing:.02em; vertical-align:middle; }
/* Preserve subtle neutral badges; selected/filled actions get a darker chip
   with bright text so the badge stays distinct against the blue selection. */
html body :is([aria-selected="true"],[aria-checked="true"],.btn-primary,.btn-success,.btn-danger) :is(.tag,.badge) { color:#fff; background-color:#08234b; }
:is(.log-item,.log-change) .unit-title > .unit-name { color:var(--text); font-weight:600; }
html .unit-card h2 { font-size:21px; }
html .grid > .unit > h3 { font-size:21px; }
html .unit-head h2 { min-width:0; }
html body .unit-application-closed { color:var(--muted); background-color:rgba(126,164,227,.07); cursor:default; pointer-events:none; opacity:1; }
html .admin-editor .unit-opt { grid-template-columns:minmax(0,1fr) 124px; }
html .admin-editor .unit-opt-name { min-width:0; }
/* Resting fields use a lighter fill. Only keyboard/pointer focus gets the
   darkest fill; hovering alone leaves the resting colour unchanged. */
html body .admin-editor :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  width:100%; min-width:0; min-height:44px; padding:10px 12px;
  background-color:var(--field-rest); color:var(--text); font-size:13px; line-height:1.5;
}
html body .admin-editor :is(input,textarea)::placeholder { color:var(--muted); opacity:1; }
html body .admin-editor :is(input:not([type="checkbox"]):not([type="radio"]),textarea):focus { background-color:var(--bg) !important; }
html body .admin-editor [data-ed-rank] { font-size:14px; }
html .admin-editor .unit-opt { grid-template-columns:minmax(0,1fr) 150px; align-items:center; gap:16px; padding:12px; }
html .admin-editor .unit-opt-name { display:flex; align-items:center; }
html .admin-editor .unit-editor-badge { display:inline-flex; align-items:center; justify-content:center; min-height:26px; min-width:34px; margin:0; padding:4px 8px; font-size:11px; font-weight:700; line-height:1.4; }
html .admin-editor .rank-change-title { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:28px; }
html .admin-editor .admin-access-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:18px; }
html .admin-editor .admin-access input { margin-top:0; }
html .admin-editor .admin-editor-identity { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
html .admin-editor .admin-editor-identity .admin-editor-heading-rank { display:inline-flex; align-items:center; gap:10px; margin:0; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:0; }
html .admin-editor .admin-editor-identity .admin-editor-heading-rank::before { content:""; display:block; flex:0 0 3px; width:3px; height:3px; align-self:center; border-radius:50%; background:var(--muted); }
html .admin-editor .admin-editor-identity > [data-ed-name] { line-height:1.25; }
html .admin-editor .admin-editor-heading-rank > .rank-line { align-items:center; }
@media(max-width:540px) {
  html .admin-editor .unit-opt { grid-template-columns:minmax(0,1fr); }
  .unit-application-header h2 .unit-title { font-size:18px; }
}

/* Labels, counters and badges share the standard button radius and flat edges. */
html body :is(.badge,.status,.status-pill,.chip,.tag,.admin-chip,.user-tag,.division-badge,.crown-badge,.unit-role,.profile-unit-pos,.panel-count,.seg-count,.side-count,.tools-count,.tab-count,.dash-request-count,.dash-online-count,.step-badge,.soon-chip,.sc-badge,.sc-chip,.training-status,.transfer-offer-tag,.sales-rank-count,.account-disabled-badge,.lb-medal,.lb-podium-extra,.at-count,.at-total,.at-range,.profile-badges li) {
  border-color:transparent !important; border-radius:var(--control-radius) !important; box-shadow:none !important;
}
html .panel-count:not(.panel-count-green),html .unit-role { background-color:rgba(126,164,227,.09); }
html body :is(.nav-link,.tools-link,.dropdown-item,.tab-link) { border-radius:var(--control-radius) !important; }
html .pagination { gap:4px; }
html .pagination .page-item .page-link { margin-left:0; }

/* Fields separate themselves with a fill; focus changes the fill instead of drawing an outline. */
html .admin-editor { --field-rest:var(--surface-inset,var(--bg-alt)); }
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea) {
  border-color:var(--border) !important; border-radius:var(--control-radius) !important; box-shadow:none; outline:0;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
/* Explicit hover styling also suppresses browser-native field hover fills.
   Only focus, never pointer proximity, activates a field. */
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea):not(:focus) {
  background-color:var(--field-rest,var(--bg-alt)) !important;
}
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea):focus {
  background-color:var(--field-focus,var(--bg)) !important;
}
/* Opening a dropdown changes its menu, not the closed control's fill. */
html body select {
  background-color:var(--field-rest,var(--bg-alt)) !important;
  white-space:nowrap;
}

html [data-u-apps] .leave-request-reason { white-space:pre-line; font-size:13px; line-height:1.75; }

/* Preference rows and check controls use fills, including the unchecked state. */
html body .form .check { border-color:transparent; }
html body input:is([type="checkbox"],[type="radio"]) {
  appearance:none; width:18px; height:18px; min-height:18px; flex-shrink:0;
  padding:0; border:0; border-radius:3px; background:#293448;
  background-position:center; background-repeat:no-repeat; background-size:14px;
  box-shadow:none; vertical-align:middle; cursor:pointer;
}
html body input[type="radio"] { border-radius:50%; }
html body input:is([type="checkbox"],[type="radio"]):checked { background-color:#0d6efd; }
html body input[type="checkbox"]:checked {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html body input[type="checkbox"]:indeterminate {
  background-color:#0d6efd;
  background-image:linear-gradient(#fff,#fff); background-size:10px 2px;
}
html body input[type="radio"]:checked { background-image:radial-gradient(circle,#fff 0 3px,transparent 3.5px); }
html body input:is([type="checkbox"],[type="radio"]):focus-visible { outline:2px solid #86b7fe; outline-offset:3px; }
html body input:is([type="checkbox"],[type="radio"]):disabled { opacity:.55; cursor:not-allowed; }
@media (forced-colors:active) {
  html body input:is([type="checkbox"],[type="radio"]) { appearance:auto; }
}

/* Style the real select popup like the navigation menu. Keeping the select
   preserves labels, form validation, keyboard selection and dynamic options.
   Browsers without customizable-select support retain their standard picker. */
@supports (appearance:base-select) {
  html body select:not([multiple]):not([size]),
  html body select[size="1"] {
    appearance:base-select; background-image:none; padding-inline-end:12px;
    display:inline-flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer;
  }
  html body select:not([multiple]):not([size])::picker(select),
  html body select[size="1"]::picker(select) {
    appearance:base-select;
    background:var(--panel); color:var(--text); border:0;
    border-radius:12px; padding:8px; margin-block:6px;
    /* Try below first, rather than the browser's default of choosing the
       side with the most space. Flip upward only to avoid overflow. */
    inset:auto; position-area:block-end span-inline-end;
    position-try-order:normal;
    position-try-fallbacks:flip-inline,flip-block,flip-block flip-inline;
    box-shadow:0 12px 28px #00000030;
    font-family:var(--font-ui); font-size:13px; line-height:1.5;
    max-block-size:min(320px,60dvh); max-inline-size:calc(100vw - 24px);
    overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:#46546b transparent;
  }
  html body select::picker-icon {
    content:""; display:block; align-self:center; width:7px; height:7px; flex-shrink:0; margin-inline-start:auto; margin-block:0;
    border:solid var(--muted); border-width:0 1.6px 1.6px 0;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .14s ease;
  }
  html body select:open::picker-icon { transform:translateY(2px) rotate(225deg); }
  html body select:disabled { cursor:not-allowed; opacity:.55; }
  html body select option {
    min-block-size:36px; padding:9px 11px; border:0; border-radius:var(--control-radius);
    background:transparent; color:var(--text); font:inherit;
    white-space:normal; overflow-wrap:anywhere; cursor:pointer; gap:10px;
  }
  html body select option:is(:hover,:focus-visible) { background:var(--nav-hover-bg,rgba(126,164,227,.09)); outline:0; }
  html body select option:checked { color:#6ea8fe; background:rgba(13,110,253,.1); }
  html body select option:disabled { color:var(--muted); opacity:.6; cursor:not-allowed; background:transparent; }
  html body select option::checkmark { color:#6ea8fe; margin-inline-start:auto; order:1; }
  html body select optgroup { margin-block-start:6px; padding:6px 0 0; border-block-start:1px solid var(--border); background:transparent; color:var(--muted); font-weight:400; }
  html body select optgroup:first-child { margin-block-start:0; padding-block-start:0; border-block-start:0; }
  html body select optgroup > legend { display:block; float:none; width:100%; margin:0; padding:8px 11px 5px; color:var(--muted); font-size:10px; line-height:1.5; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
  html body select optgroup option { font-weight:400; }
  html body select::picker(select)::-webkit-scrollbar { width:8px; }
  html body select::picker(select)::-webkit-scrollbar-thumb { background:#46546b; border:2px solid var(--panel); border-radius:8px; }
  html body select::picker(select)::-webkit-scrollbar-track { background:transparent; }
}

/* Edit-user dialog: aligned columns, compact unit rows and clear control states. */
html .admin-editor .editor-head { padding:22px 24px; align-items:center; }
html .admin-editor .editor-head .member-avatar { width:56px; height:64px; border-radius:12px; }
html .admin-editor .editor-head h2 { font-size:24px; }
html .admin-editor .admin-editor-description { margin:8px 0 0; line-height:1.6; }
html .admin-editor .admin-member-badges:empty { display:none; }
html .admin-editor-main,html .admin-editor-aside { gap:24px; }
html .admin-editor-main,html .admin-editor-aside { background:var(--panel); }
html .admin-editor .admin-editor-section { gap:12px; }
html .admin-editor .admin-editor-section h3,
html .admin-editor .admin-editor-section legend { font-size:14px; line-height:24px; }
html .admin-editor .optional { line-height:1.6; }
html .admin-editor .admin-rank-preview { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
html .admin-editor .rank-change-side { padding:12px; gap:6px; background:var(--bg-alt); }
html .admin-editor .rank-move-label { margin:0; }
html .admin-editor .rank-change-title { min-height:28px; }
html .admin-editor .rank-quick-buttons .btn { width:0; min-width:0; min-height:40px; }
html body .admin-editor .rank-quick-buttons .btn:disabled {
  color:#99a7bc; background:#202b3c; opacity:1; cursor:not-allowed;
}
html .admin-editor .unit-opt {
  grid-template-columns:minmax(0,1fr) 196px; align-items:center; gap:12px;
  padding:5px 10px; background:#1a2333; border-radius:8px;
}
html .admin-editor .unit-pick { gap:6px; }
html .admin-editor fieldset.admin-editor-section legend { padding-bottom:6px; justify-content:flex-start; gap:8px; }
html .admin-editor fieldset.admin-editor-section > .optional { margin-bottom:8px; }
html .admin-editor .unit-opt.in-unit { background:#17263b; }
html .admin-editor .unit-opt-name { gap:10px; min-width:0; }
html .admin-editor .unit-editor-badge { flex-shrink:0; min-height:22px; min-width:28px; padding:3px 6px; color:#c4d2e5; background:#29364b; }
html .admin-editor .unit-opt.in-unit .unit-editor-badge { color:#a9cbff; background:#24436b; }
html .admin-editor .unit-editor-name { font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
html body .admin-editor select { padding-block:10px; padding-inline:12px 36px; }
/* One shared component for the directory filter and unit positions. Override
   the editor's general 44px fields so both selects have identical metrics. */
html body :is(.admin-tools,.admin-editor .unit-opt) .admin-dropdown.form-select {
  --field-rest:var(--bg-alt);
  height:42px; min-height:42px; padding:9px 12px;
  font-family:var(--font-ui); font-size:13px; font-weight:400;
  line-height:1.5; letter-spacing:normal; color:var(--text);
}
html .admin-editor .admin-access { grid-template-columns:18px minmax(0,1fr); gap:12px; }
html body .admin-editor .admin-access input { width:18px; height:18px; margin:4px 0 0; }
html .admin-editor .admin-access-title { min-height:26px; margin:0 0 6px; }
html .admin-editor .admin-editor-field { display:grid; gap:8px; min-width:0; font-size:13px; }
html .admin-editor .admin-editor-field > label { width:fit-content; }
html .admin-editor .admin-rank-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
html .admin-editor .admin-reason > label { width:fit-content; min-height:24px; }
html body .admin-editor :is(input:not([type="checkbox"]),select,textarea):focus-visible {
  outline:2px solid #86b7fe !important; outline-offset:2px !important;
}
html .admin-editor .editor-close:focus-visible { outline:2px solid #86b7fe; outline-offset:2px; }
@supports (appearance:base-select) {
  html body .admin-editor select:not([multiple]):not([size]) {
    display:flex; align-items:center; justify-content:space-between; padding-inline:12px;
  }
}
@media(max-width:760px) {
  html .admin-editor .editor-head { padding:18px; }
  html .admin-editor .admin-editor-identity .admin-editor-heading-rank { font-size:12px; }
}
@media(max-width:540px) {
  html .admin-editor .admin-rank-fields { grid-template-columns:minmax(0,1fr); }
  html .admin-editor .unit-opt { grid-template-columns:minmax(0,1fr) 130px; gap:8px; }
  html .admin-editor .unit-opt select { grid-column:auto; }
  html .admin-editor .unit-editor-name { font-size:11px; }
  html .admin-editor .admin-rank-preview { grid-template-columns:minmax(0,1fr); }
  html .admin-editor .admin-rank-preview .rank-change-arrow { display:none; }
  html .admin-editor-footer { flex-wrap:wrap; }
  html .admin-editor-footer > .optional { width:100%; }
}

/* Optional markers belong beside their field title, never at the far edge. */
html .settings-grid > .account-leave-panel:first-child { grid-column:1 / -1; grid-row:auto; }
html .settings-grid [data-account-leave] + .panel { grid-row:span 2; }
.account-leave-panel .settings-body { justify-items:start; }
.account-leave-panel [data-account-leave-dates] { font-weight:600; }
.account-leave-change { width:100%; max-width:560px; padding-top:16px; border-top:1px solid var(--border); }
.account-leave-change .settings-actions .btn { width:auto; }
.account-leave-request { display:grid; justify-items:start; gap:12px; width:100%; padding-top:16px; border-top:1px solid var(--border); }
.account-leave-request p { margin:0; }
.leave-access-notice { display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; margin:20px auto; padding:16px 20px; max-width:1408px; background:var(--panel); border-radius:12px; color:var(--muted); font-size:13px; line-height:1.6; }
.leave-access-notice a { display:inline-flex; align-items:center; gap:8px; color:#6ea8fe; }
.test-mode-notice { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; margin:16px auto; padding:12px 18px; max-width:1408px; border-radius:12px; background:rgba(255,193,7,.1); border-left:3px solid #ffc107; color:var(--text); font-size:14px; }
.test-mode-links { display:inline-flex; flex-wrap:wrap; gap:8px 18px; }
.test-mode-notice a { display:inline-flex; align-items:center; gap:6px; color:#6ea8fe; }
html body :is(.account-leave-badge,.profile-leave-badge) { display:inline-flex; align-items:center; color:#f5c65d; background:#f5b94218; font-size:10px; font-weight:600; line-height:1.5; padding:3px 7px; white-space:nowrap; letter-spacing:0; }
html body .profile-leave-badge { font-size:11px; align-self:center; }
/* Name and rank share a size; supporting badges stay compact. */
html body .profile-card .profile-name { min-height:32px; align-items:center; font-size:16px; line-height:24px; letter-spacing:0; }
html body .profile-name > [data-p-name] { font-size:inherit; line-height:inherit; font-weight:700; text-box:normal; }
html body .profile-name > .profile-title-rank { display:flex; align-items:center; gap:8px; font-size:inherit; line-height:inherit; }
html body .profile-name .profile-rank-text { display:block; font-size:inherit; line-height:inherit; font-weight:500; text-box:normal; }
html body .profile-name :is(.division-badge,.crown-badge,.tag,.profile-leave-badge) { font-size:11px; line-height:20px; height:24px; min-height:24px; padding:1px 7px; letter-spacing:0; }
html body .profile-name > .profile-title-rank::before { margin-inline:0 2px; }
html body .profile-name .profile-leave-badge { justify-content:center; }
html body .profile-name .profile-leave-badge > span { display:block; line-height:inherit; text-box:normal; }
/* Profile sections share a gutter, while sentences follow one natural text baseline. */
html .profile-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
html .profile-heading .profile-name { min-width:0; }
html .profile-heading .profile-name > [data-p-name] { min-width:0; max-width:100%; overflow-wrap:anywhere; }
html .profile-heading .profile-actions { flex-shrink:0; margin-top:0; padding-top:2px; }
html .profile-card .welcome-text { flex:1; min-width:0; }
html .profile-tabs-head { padding-inline:24px; gap:12px 20px; flex-wrap:wrap; }
html .profile-tabs .career-table-wrap { padding:20px 24px 24px; }
html .profile-tabs .career-log { min-width:0; }
html .career-log td:is(:first-child,.log-change) { white-space:normal; overflow-wrap:anywhere; }
@media (max-width:600px) {
  html .career-log :is(th,td):first-child:not([colspan]) { display:none; }
  html .career-log td.training-date { white-space:normal; }
}
html .profile-tabs .career-pager { padding:16px 24px; }
html .profile-given .person-row { align-items:center; }
html .profile-given .person-main { min-width:0; }
html .profile-given .person-sub .rank-line { flex-wrap:wrap; }
@media(max-width:640px) {
  html .profile-heading { display:block; padding-inline-end:64px; }
  html .profile-heading .profile-actions { margin-top:10px; padding-top:0; }
  html .profile-tabs-head,html .profile-tabs .career-table-wrap,html .profile-tabs .career-pager { padding-inline:16px; }
  html .portal-main .profile-tabs .tabs-nav { flex:1 1 100%; width:100%; flex-wrap:wrap; overflow:visible; gap:4px; }
  html .portal-main .profile-tabs .tabs-nav > li { flex:0 1 auto; }
  html .portal-main .profile-tabs .tab-link { white-space:normal; }
  html .profile-tabs .career-show { margin-left:0; }
  html .profile-given .person-row { display:grid; grid-template-columns:40px minmax(0,1fr); align-items:start; gap:4px 12px; }
  html .profile-given .person-row > a:first-child { grid-row:span 3; }
  html .profile-given .person-row > a:first-child .member-avatar { width:40px; height:48px; margin-top:2px; }
  html .profile-given .person-when { grid-column:2; justify-self:start; margin-left:0; text-align:left; }
  html .profile-given .details-btn { grid-column:2; justify-self:start; }
}
html .profile-given .person-name a { color:inherit; }
html .profile-given .person-name a:hover { color:var(--accent); }
html .profile-meta-text { display:block; text-box:trim-both cap alphabetic; }
html body :is(.form,.unit-application-question) label > span:has(> .optional),
html body :is(.form,.unit-application-question) label[for]:has(> .optional) {
  display:flex; align-items:baseline; justify-content:flex-start;
  flex-wrap:wrap; gap:4px 6px; width:fit-content; max-width:100%;
}
html body :is(.form,.unit-application-question) label .optional { margin-inline-start:0; }
/* Labels still supply accessible names. Only controls and real actions receive
   pointer clicks; titles, helper copy and grid gaps do not focus/open a field. */
html body label.field-label-hit-area { pointer-events:none; }
html body label.field-label-hit-area :is(input,select,textarea,button,a,[role="button"]) { pointer-events:auto; }
html body label.field-label-hit-area > .field-label-title,
html body label[for]:not(:has(input,select,textarea)) { width:fit-content; max-width:100%; }
html .requests-workspace [data-view=log] { padding:22px; }
html body .request-history-filter { display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:13px; }
html body .request-history-filter select { width:180px; max-width:100%; }
.request-history-status { margin-right:8px; }

/* Public Ban list (/bans). */
html .bans-section { padding-top:8px; }
html .bans-panel { padding:20px; }
html .bans-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:16px; }
html .bans-search { max-width:280px; min-height:38px; background-color:var(--bg-alt); border-color:transparent; font-size:13px; }
html .bans-name { display:inline-flex; align-items:center; gap:10px; font-weight:600; }
html .bans-name img { width:33px; height:33px; flex-shrink:0; border-radius:9px; background:var(--bg-alt); object-fit:none; object-position:center 30%; }
html .bans-count { margin:14px 0 0; font-size:12px; }
html .bans-note { margin:18px 0 0; font-size:13px; }
@media (max-width: 760px) {
  html .bans-search { max-width:none; width:100%; }
  html .bans-panel { padding:14px; }
  html .bans-table :is(th,td):nth-child(3) { display:none; }
  html .bans-table :is(th,td) { white-space:normal; padding:12px 6px; }
  html .bans-table :is(th,td):first-child { padding-left:4px; }
  html .bans-name { gap:8px; }
  html .bans-name img { width:28px; height:28px; }
}

/* Punishment types explained the same way on the public page and in Discipline. */
html .punish-types { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
html .punish-type { padding:18px 20px; border-radius:14px; background:var(--panel); border-left:3px solid #dc3545; }
html .punish-type[data-kind="dnh"] { border-left-color:#ffc107; }
html .punish-type header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
html .punish-type-title { color:var(--text); font-size:15px; font-weight:700; }
html .punish-type-count { font-size:12px; font-weight:600; color:var(--muted); }
html .punish-type p { margin:0; font-size:14px; line-height:1.55; }
html .punish-type-what { color:var(--text); }
html .punish-type-do { margin-top:10px !important; padding-top:10px; border-top:1px solid var(--border); color:var(--muted); }
html .punish-type-do strong { display:block; margin-bottom:2px; color:var(--text); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
html .punish-intro { margin-bottom:22px; }
html .punish-intro .punish-type { background:var(--bg-alt); }
html .punish-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; counter-reset:step; }
html .punish-steps li { position:relative; padding:0 0 0 38px; font-size:13px; line-height:1.5; color:var(--muted); counter-increment:step; }
html .punish-steps li::before { content:counter(step); position:absolute; left:0; top:0; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(13,110,253,.15); color:#6ea8fe; font-size:12px; font-weight:700; }
html .punish-steps strong { display:block; color:var(--text); font-size:14px; }
html .punish-pick { margin:0; padding:0; border:0; display:grid; gap:8px; }
html .punish-pick legend { margin-bottom:8px; padding:0; font-size:inherit; font-weight:600; }
html .punish-option { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:10px; background:var(--bg-alt); border:1px solid transparent; cursor:pointer; }
html .punish-option:has(input:checked) { border-color:#0d6efd; background:rgba(13,110,253,.08); }
html .punish-option input { margin-top:3px; accent-color:#0d6efd; }
html .punish-option > span { display:grid; gap:2px; justify-items:start; }
html .punish-option strong { color:var(--text); font-size:14px; }
html .punish-option small { color:var(--muted); font-size:12.5px; font-weight:400; line-height:1.45; }
html .punish-optional { margin-left:6px; color:var(--muted); font-size:12px; font-weight:400; }
html .punish-detail-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
html body .badge.discipline-status[data-status="active"] { color:#fff; background-color:#198754; }
@media (max-width: 760px) {
  html .punish-types, html .punish-steps { grid-template-columns:1fr; }
}

/* Punishment details popup. */
html .punish-detail { display:grid; gap:18px; }
html .punish-detail-who { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--text); }
html .punish-detail-who .punish-kind-text { color:var(--muted); font-size:14px; }
html .punish-detail-name { margin-right:4px; font-size:22px; font-weight:700; letter-spacing:-.3px; }
html .punish-detail-who a { color:inherit; text-decoration:none; }
html .punish-detail-who a:hover { text-decoration:underline; }
html .punish-detail-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
html .punish-detail-facts > div { padding:10px 12px; border-radius:10px; background:var(--bg-alt); }
html .punish-detail-facts > div:only-child { grid-column:1 / -1; }
html .punish-detail-facts dt { margin-bottom:6px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
html .punish-detail-facts dd { margin:0; font-size:14px; color:var(--text); }
html .punish-detail :is(.punish-detail-reason,.punish-detail-history) > span { display:block; margin-bottom:8px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
html .punish-detail-reason p { margin:0; padding:12px 14px; border-radius:10px; background:var(--bg-alt); color:var(--text); font-size:14px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
html .punish-detail-history ol { margin:0; padding:0; list-style:none; display:grid; gap:14px; }
html .punish-history-step { position:relative; padding-left:22px; }
html .punish-history-step::before { content:""; position:absolute; left:3px; top:6px; width:9px; height:9px; border-radius:50%; background:#0d6efd; }
html .punish-history-step:not(:last-child)::after { content:""; position:absolute; left:7px; top:19px; bottom:-12px; width:1px; background:var(--border); }
/* Same colours as the status badges: Pending blue, Approved/Active green, Denied red, Lifted purple. */
html .punish-history-step[data-step="approved"]::before { background:#198754; }
html .punish-history-step[data-step="denied"]::before { background:#dc3545; }
html .punish-history-step[data-step="lifted"]::before { background:#6f42c1; }
html .punish-history-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 6px; font-size:14px; color:var(--muted); }
html .punish-history-line strong { color:var(--text); }
html .punish-history-line time { margin-left:auto; font-size:12px; }
html .punish-history-note { margin:6px 0 0; padding:8px 12px; border-radius:8px; background:var(--bg-alt); font-size:13px; line-height:1.5; color:var(--text); overflow-wrap:anywhere; }
html .punish-history-note span { display:block; margin-bottom:2px; color:var(--muted); font-size:11px; }
html .punish-detail-blocked { margin:0; color:var(--muted); font-size:13px; }

/* Discipline demotion: Division and Rank side by side, like the Admin panel. */
html .discipline-rank-pick { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
html .discipline-rank-pick[hidden] { display:none; }
@media (max-width: 480px) { html .discipline-rank-pick { grid-template-columns:1fr; } }

/* Portal consistency (measured across every page): one size for tabs, panels' corners, tables, toolbar fields,
   header buttons and "nothing here" messages. */
html body .portal-main :is(.seg[role="tablist"],.tabs-nav[role="tablist"],.portal-pills[role="radiogroup"]) :is(button,.tab-link) { height:38px; min-height:38px; }
html body .portal-main .panel.admin { border-radius:12px; }
html body .portal-main table:is(.staff-table,.training-table) thead th { font-size:10px; letter-spacing:.07em; color:#a9b7cb; }
html body .portal-main table:is(.staff-table,.training-table) tbody td:not(.panel-empty) { font-size:13px; }
html body .portal-main :is(.panel-empty,.empty) { font-size:14px; }
html .training-header :is(.sales-header-actions,.transfer-header-actions) .btn { font-size:13px; padding:9px 16px; }
@media (min-width: 761px) {
  html body .portal-main :is(.at-filters,.admin-tools,.promo-bar,.training-toolbar) :is(input,select) { height:38px; min-height:38px; font-size:13px; }
  html body .portal-main .admin-tools :is(.admin-dropdown.form-select,input) { height:38px; min-height:38px; }
}

/* Resources pages (/resources): Rank List, Rank Calculator, Promotion Requirements. */
html .res-section { padding-top:8px; }
html .res-panel { padding:20px; }
html .res-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
html .res-card { display:grid; gap:6px; padding:20px 22px; border-radius:14px; background:var(--panel); border:1px solid transparent; color:var(--text); transition:border-color .15s, background .15s; }
html .res-card:hover { border-color:var(--hover-border); background:var(--bg-alt); }
html .res-card strong { font-size:16px; }
html .res-card span { color:var(--muted); font-size:14px; }
html .res-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
html .res-search { max-width:280px; min-height:38px; background-color:var(--bg-alt); border-color:transparent; font-size:13px; }
html .res-count { font-size:12px; }
html .res-panel[data-rank-list] { max-width:800px; }
html .res-divisions { display:grid; gap:8px; }
html .res-division { padding:10px 14px 6px; border-radius:10px; background:var(--bg-alt); scroll-margin-top:90px; }
html .res-division-head { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding-bottom:8px; border-bottom:1px solid var(--border); }
html .res-division-meta { color:var(--muted); font-size:12px; }
html .res-training { margin-left:auto; font-size:12px; font-weight:600; color:#6ea8fe; }
html .res-ranks { margin:0; padding:0; list-style:none; }
html .res-ranks li { display:flex; align-items:center; gap:10px; padding:6px 2px; border-bottom:1px solid var(--border); font-size:13px; }
html .res-ranks li:last-child { border-bottom:0; }
html .res-rank-level { flex-shrink:0; width:24px; color:var(--muted); font-size:11px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
html .res-rank-name { font-weight:500; color:var(--text); }
html .res-rank-name mark { padding:0 1px; border-radius:3px; color:inherit; background:rgba(13,110,253,.35); }
html .res-note { margin:18px 0 0; font-size:13px; }
/* Roles & Approvals (/portal/roles). */
html .roles-page { max-width:1100px; }
html .roles-rule { margin:0 0 8px; padding:14px 18px; border-radius:12px; background:rgba(13,110,253,.08); border-left:3px solid #0d6efd; }
html .roles-rule strong { display:block; margin-bottom:4px; font-size:15px; }
html .roles-rule p, html .roles-note { margin:0; font-size:14px; line-height:1.55; color:var(--muted); }
html body .roles-table th[scope="row"] { font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text); white-space:nowrap; }
html body .roles-table td { color:var(--muted); white-space:normal; min-width:160px; }
html .res-calc-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr); gap:24px; align-items:start; }
html .res-calc-form { display:grid; gap:16px; }
html .res-calc-form label { display:grid; gap:6px; }
html .res-calc-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
html .res-calc-help { margin:-6px 0 0; font-size:12px; }
html .res-quote:not(:empty) { margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
html .res-quote .eyebrow { margin-bottom:4px; }
html .res-price { margin:0 0 4px; font-size:36px; font-weight:800; color:var(--text); }
html .res-quote-note { margin:0; color:var(--muted); }
html .res-breakdown { margin:12px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
html .res-breakdown li { display:flex; justify-content:space-between; gap:12px; padding:8px 12px; border-radius:8px; background:var(--bg-alt); font-size:14px; }
html .res-calc-guide h2 { font-size:20px; margin-bottom:8px; }
html .res-calc-guide p { font-size:14px; line-height:1.55; }
html .purchase-options { align-items:stretch; }
html .res-section.purchase-current { padding-bottom:36px; }
html .res-note + .purchase-options { margin-top:14px; }
html .purchase-option {
  --purchase-accent:#75a8ff;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  align-content:start;
  gap:12px;
}
html .purchase-option-gold { --purchase-accent:#f7c46a; }
html .purchase-option-steel { --purchase-accent:#b5c6e2; }
html .purchase-option-cyan { --purchase-accent:#48d8f7; }
html .purchase-option-violet { --purchase-accent:#b598ff; }
html .purchase-option-bundle { --purchase-accent:#8cb1ff; }
html .purchase-art {
  display:grid;
  place-items:center;
  min-height:132px;
  border:1px solid color-mix(in srgb, var(--purchase-accent) 24%, transparent);
  border-radius:10px;
  background:
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--purchase-accent) 22%, transparent), transparent 72%),
    linear-gradient(158deg, rgba(255,255,255,.075), transparent 45%),
    var(--bg-alt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
html .purchase-art img {
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.48));
}
html .purchase-option-bundle .purchase-art {
  background:
    radial-gradient(ellipse at 32% 52%, rgba(72,216,247,.2), transparent 58%),
    radial-gradient(ellipse at 72% 38%, rgba(181,152,255,.24), transparent 60%),
    var(--bg-alt);
}
html .purchase-option :is(h2, h3) { font-size:20px; }
html .purchase-option p { color:var(--muted); }
html .purchase-option .purchase-price { font-weight:700; color:var(--text); }
html #report-a-concern ~ p + p { margin-top:10px; }
html .res-heading { margin:28px 0 12px; font-size:18px; font-weight:700; }
html .res-section .container > .res-heading:first-child { margin-top:0; }
html .res-training-link { color:#6ea8fe; text-decoration:none; }
html .res-training-link:hover { text-decoration:underline; }
html .res-row-training td:first-child { box-shadow:inset 3px 0 #0d6efd; }
html .res-rules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
html .res-rule { padding:18px 20px; border-radius:14px; background:var(--panel); border-left:3px solid #0d6efd; }
html .res-rule strong { display:block; margin-bottom:6px; font-size:15px; }
html .res-rule p { margin:0; font-size:14px; line-height:1.55; color:var(--muted); }
@media(max-width:860px) {
  html .res-calc-grid, html .res-rules { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
  html .res-cards { grid-template-columns:minmax(0,1fr); }
  html .res-calc-pair { grid-template-columns:minmax(0,1fr); }
  html .res-search { max-width:none; width:100%; }
  html .res-training { margin-left:0; }
  html .res-panel { padding:14px; }
  html .res-table :is(th,td) { white-space:normal; padding:12px 8px; }
}

/* Public pages' headers (breadcrumb, title, intro, "Used by" tag) are centered, with the glow centered above them.
   What's under the header stays left-aligned: text, tables and forms read better from a straight left edge. */
html .page-hero { text-align:center;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(var(--accent-rgb),.1), transparent 70%), var(--bg-alt); }
html .page-hero .lead { max-width:600px; margin-left:auto; margin-right:auto; }
html .page-hero .page-meta { margin-top:16px; }
/* Content columns narrower than the page sit in the middle under that header (their text stays left-aligned):
   the role guides, the Rank List and the appeal form on Punishments. */
html :is(.guide-page, .appeal-panel) { margin-left:auto; margin-right:auto; }
html [data-rank-list], html [data-rank-list] + .res-note { margin-left:auto; margin-right:auto; }
html [data-rank-list] + .res-note { max-width:800px; }

/* Public Command Chain page (/command-chain, public/assets/command-chain.js): a centered header, then each iC division
   top down, linked by a fading line. Each division has a tone (gold Foundation, silver Ambassador) that tints its
   badge glow, cards and rank tags. No outlines; light rounding. */
html .cc-eyebrow { margin:0 0 10px; color:#83b6ff; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
html .hc-section { padding-top:12px; }
html .hc-chain { display:grid; gap:72px; max-width:1000px; margin:0 auto; text-align:center; }
html .cc-division { --tone:131,182,255; position:relative; }
html .cc-division[data-tone=gold] { --tone:255,196,64; }
html .cc-division[data-tone=silver] { --tone:196,210,232; }
/* The chain: a short line fading from one division down into the next. */
html .cc-division + .cc-division::before { content:''; position:absolute; top:-60px; left:50%; width:2px; height:48px; transform:translateX(-50%);
  background:linear-gradient(rgba(255,255,255,.04), rgba(var(--tone),.45)); border-radius:2px; }
html .cc-head { display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:26px; }
html .cc-emblem { display:grid; place-items:center; width:84px; height:84px; margin-bottom:6px; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--tone),.24), rgba(var(--tone),.06) 55%, transparent 72%); }
html .cc-emblem img { width:46px; height:46px; filter:drop-shadow(0 4px 14px rgba(var(--tone),.45)); }
html .cc-title { margin:0; font-size:clamp(26px,4vw,34px); font-weight:700; letter-spacing:-.8px; }
html .cc-about { margin:0; max-width:420px; color:var(--muted); font-size:14px; line-height:1.6; }
html .cc-count { margin-top:6px; padding:3px 10px; border-radius:4px; background:rgba(var(--tone),.1); color:rgb(var(--tone)); font-size:12px; font-weight:600; }
/* Habbo's full avatar image has ~40px of empty space above the head, so the stage starts above the card: normal
   avatars sit near the top edge and tall headwear or effects poke out over it, instead of every card being tall. */
html .cc-people { margin:0; padding:32px 0 0; list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:40px 14px; }
html .cc-person { display:flex; flex-direction:column; align-items:center; width:172px; padding:0 10px 16px; border-radius:8px;
  background:linear-gradient(180deg, rgba(var(--tone),.11), rgba(var(--tone),.02) 55%), var(--panel);
  box-shadow:0 12px 32px -18px rgba(0,0,0,.7); transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
html .cc-person:hover { transform:translateY(-4px); box-shadow:0 20px 40px -18px rgba(var(--tone),.35);
  background:linear-gradient(180deg, rgba(var(--tone),.16), rgba(var(--tone),.03) 60%), var(--panel); }
/* The avatar stands on a soft spotlight. */
html .cc-stage { position:relative; display:grid; place-items:end center; width:128px; height:220px; margin:-32px 0 6px; }
html .cc-stage::before { content:''; position:absolute; inset:18% 0 4%; border-radius:50%; background:radial-gradient(closest-side, rgba(var(--tone),.16), transparent); }
html .cc-stage::after { content:''; position:absolute; bottom:6px; left:50%; width:74px; height:14px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }
html .cc-stage img { position:relative; z-index:1; width:128px; height:220px; object-fit:contain; image-rendering:pixelated;
  /* Habbo cuts wide effects off at the image edge: fade the sides so it does not end in a hard line. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
html .cc-name { font-size:17px; font-weight:700; overflow-wrap:anywhere; }
html .cc-rank { margin-top:6px; padding:3px 9px; border-radius:4px; background:rgba(var(--tone),.12); color:rgb(var(--tone)); font-size:12px; font-weight:600; }
@media (max-width:480px) {
  html .hc-chain { gap:56px; }
  html .cc-people { gap:40px 10px; }
  html .cc-person { width:calc(50% - 5px); padding:0 8px 14px; }
}
@media (prefers-reduced-motion:reduce) { html .cc-person { transition:none; } html .cc-person:hover { transform:none; } }

/* ---------- Pop-ups: one clean layout for every dialog ----------
   Header (eyebrow, title, status, close) over a divider; facts as soft cards in two columns; labelled sections;
   buttons right-aligned at their natural width over a divider. The admin editor keeps its own full-height layout. */
html dialog.editor:not(.admin-editor) { padding:28px 30px 24px; border-radius:18px; border:1px solid rgba(255,255,255,.05); box-shadow:0 28px 80px rgba(0,0,0,.6); }
html dialog.editor:not(.admin-editor) > .form { gap:22px; }
html dialog.editor:not(.admin-editor) .editor-head { display:flex; align-items:center; gap:14px; padding:0 0 20px; margin:0; border-bottom:1px solid var(--border); }
html dialog.editor:not(.admin-editor) .editor-head .editor-title, html dialog.editor:not(.admin-editor) .editor-head > div:not([class]) { flex:1; min-width:0; }
html dialog.editor:not(.admin-editor) .editor-head .eyebrow { margin:0 0 6px; color:var(--muted); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
html dialog.editor:not(.admin-editor) .editor-head h2 { margin:0; font-family:var(--font-ui); font-size:22px; font-weight:700; line-height:1.25; letter-spacing:-.4px; overflow-wrap:anywhere; }
html dialog.editor .editor-head h2 a { color:inherit; text-decoration:none; }
html dialog.editor .editor-head h2 a:hover { color:var(--accent); }
html dialog.editor .editor-status { flex-shrink:0; display:inline-flex; gap:6px; }
html dialog.editor .editor-status:empty { display:none; }
html dialog.editor .editor-status + .editor-close { margin-left:0; }
html dialog.editor:not(.admin-editor) .editor-head .member-avatar { flex-shrink:0; width:48px; height:56px; border-radius:12px; background:var(--bg-alt); object-fit:cover; object-position:top; }
html dialog.editor:not(.admin-editor) .editor-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin:0; padding-top:20px; border-top:1px solid var(--border); }
html dialog.editor:not(.admin-editor) .editor-actions:empty { display:none; }
html dialog.editor:not(.admin-editor) .editor-actions .btn { flex:0 0 auto; width:auto; min-width:96px; min-height:38px; padding:8px 16px; font-size:13px; }
html dialog.editor .editor-actions > a.btn:first-child { margin-right:auto; }
/* Facts: soft cards, two per row; a long one (notes) spans the row. */
html dialog.editor :is(.training-details-grid,.punish-detail-facts,.sales-detail-facts) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
html dialog.editor :is(.training-details-grid,.punish-detail-facts,.sales-detail-facts) > div { padding:14px 16px; border-radius:12px; background:var(--bg-alt); min-width:0; }
html dialog.editor :is(.training-details-grid,.punish-detail-facts,.sales-detail-facts) > :is(.fact-wide,div:only-child) { grid-column:1 / -1; }
html dialog.editor :is(.training-details-grid,.punish-detail-facts,.sales-detail-facts) dt { margin:0 0 6px; color:var(--muted); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
html dialog.editor :is(.training-details-grid,.punish-detail-facts,.sales-detail-facts) dd { margin:0; color:var(--text); font-size:14px; line-height:1.45; overflow-wrap:anywhere; white-space:normal; }
html dialog.editor .fact-sub { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:400; }
/* Sections: a small label, then the text in a soft card. */
html dialog.editor :is(.training-notes-section,.training-history-section) { padding:0; border:0; }
html dialog.editor :is(.training-notes-section,.training-history-section) h3,
html dialog.editor .punish-detail :is(.punish-detail-reason,.punish-detail-history) > span,
html dialog.editor .sales-history-label { margin:0 0 10px; color:var(--muted); font:600 10.5px/1.4 var(--font-ui); letter-spacing:.08em; text-transform:uppercase; }
html dialog.editor .training-notes-section > :is(p,.details-section-body),
html dialog.editor .punish-detail-reason p { margin:0; padding:14px 16px; border-radius:12px; background:var(--bg-alt); color:var(--text); font-size:14px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
html dialog.editor .punish-detail { gap:22px; }
html dialog.editor .training-save-note { margin:0; color:var(--muted); font-size:12.5px; line-height:1.55; }
/* History: a clear timeline, each note tucked under its step. */
html dialog.editor .punish-detail-history ol { gap:16px; }
html dialog.editor .punish-history-step { padding-left:24px; }
html dialog.editor .punish-history-step::before { top:5px; width:10px; height:10px; box-shadow:0 0 0 3px var(--panel); }
html dialog.editor .punish-history-step:not(:last-child)::after { left:7.5px; top:20px; bottom:-14px; }
html dialog.editor .punish-history-line { font-size:13.5px; }
html dialog.editor .punish-history-line time { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
html dialog.editor .punish-history-note { margin-top:8px; padding:10px 14px; border-radius:10px; font-size:13.5px; }
html dialog.editor .punish-history-note span { margin-bottom:3px; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
html dialog.editor .sales-events { margin:0; }
@media (max-width:560px) {
  html dialog.editor:not(.admin-editor) { padding:22px 18px 18px; }
  html dialog.editor :is(.training-details-grid,.punish-detail-facts,.sales-detail-facts) { grid-template-columns:1fr; }
  html dialog.editor:not(.admin-editor) .editor-actions .btn { flex:1 1 auto; }
  html dialog.editor .editor-head { flex-wrap:wrap; }
}
/* One width for every standard pop-up; Transfers keeps its wider calculator. */
html dialog.editor:is(.training-editor,.training-details,.confirm,.details-dialog):not(.transfer-editor):not(.transfer-details) { width:min(560px,calc(100% - 32px)); }
html .page-tabs-row .sales-header-actions .btn { font-size:13px; padding:9px 16px; }
/* Pop-up header: the status badge and the close button sit on one line, centred on the title block. */
html dialog.editor:not(.admin-editor) .editor-head > :is(.editor-status,.editor-close) { align-self:center; margin-top:0; margin-bottom:0; }
html dialog.editor:not(.admin-editor) .editor-head .editor-close { width:36px; height:36px; padding:0; font-size:24px; line-height:1; border-radius:10px; }
/* Admin account access uses the shared dialog layout. */
html dialog.editor.account-action-dialog > .form { gap:0; }
html dialog.editor.account-action-dialog .account-action-body { padding:22px 0 0; gap:18px; }
html dialog.editor.account-action-dialog .editor-actions { margin-top:22px; padding:20px 0 0; }

/* Admin › Users as a table: the name with its small markers (Disabled, tag, Admin) on one line. */
html .admin-user-cell { display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
html .admin-user-cell .admin-row-markers { display:inline-flex; flex-wrap:wrap; gap:6px; margin:0; }
html .admin-users-table td .unit-assignment-badge { margin:2px 4px 2px 0; }

/* Logs as tables (renderLog in activity.js): the change gets the room. */
html .log-table th:nth-child(1) { width:16%; }
html .log-table th:nth-child(2) { width:auto; }
html .log-table th:nth-child(3) { width:14%; }
html .log-table th:nth-child(4) { width:1%; }
html .log-table td.log-change { line-height:1.55; }
html .log-table td.log-change strong { font-weight:600; }

/* Activity Tracker in the shared table style: the header band, roomier rows and plain names (a green dot when
   online). Its coloured counts and sortable headers stay. */
html .at-table thead th { background:var(--bg-alt); border-bottom:1px solid var(--border); }
html .at-table thead th button { height:auto; padding:13px 14px; font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#a9b7cb; }
html .at-table thead th.at-num button { padding:13px 4px; font-size:10px; letter-spacing:.07em; }
html .at-table tbody td { height:auto; padding:13px 14px; border-bottom:1px solid var(--border); font-size:13px; }
html .at-table tbody tr:last-child td { border-bottom:1px solid var(--border); }
html .at-person { gap:8px; font-weight:600; }
html .at-online { flex:none; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 6px rgba(var(--green-rgb),.6); }
html .at-who { font-size:13px; }
html .at-name { font-weight:600; }

/* Profile: active strikes, for the member and Foundation only. */
html .profile-meta .profile-meta-strikes, html .profile-meta [data-kind="strikes"] { color:#f1aeb5; }

/* Activity Tracker: members quiet for 14+ days (src/weekly-report.js). */
html .at-quiet { margin-left:6px; background:rgba(255,193,7,.14); color:#ffc107; font-size:11px; font-weight:600; }

/* Profile awards (src/awards.js). */
html .profile-awards { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0; list-style:none; }
html .profile-award { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:5px 10px; background:rgba(255,193,7,.12); color:#ffda6a; font-size:12px; font-weight:600; text-align:left; white-space:normal; overflow-wrap:anywhere; cursor:default; }
html .profile-award .icon { flex:none; width:13px; height:13px; }
html .profile-award.award-medal { background:rgba(13,110,253,.14); color:#8bb9fe; }
html .profile-award:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
html .award-tooltip {
  position:fixed; inset:0 auto auto 0; z-index:60; display:grid; gap:6px;
  width:max-content; max-width:min(270px,calc(100vw - 16px)); padding:10px 12px;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:8px; box-shadow:0 10px 24px #0006;
  color:var(--muted); font-size:12px; font-weight:500; line-height:1.45;
}
html .award-tooltip-description { color:var(--text); font-size:13px; white-space:pre-wrap; }
html .award-tooltip-note { white-space:pre-wrap; }
html .award-tooltip-detail { border-top:1px solid var(--border); padding-top:6px; font-size:11px; }
html .award-picker-control { position:relative; }
html .award-picker-control .form-control { padding-inline-end:42px; }
html .award-picker-toggle {
  position:absolute; inset:4px 4px 4px auto; display:grid; place-items:center; width:34px;
  border:0; border-radius:6px; background:none; color:var(--muted); cursor:pointer;
}
html .award-picker-toggle:hover, html .award-picker-toggle[aria-expanded="true"] { background:#ffffff0d; color:var(--text); }
html .award-picker-toggle[aria-expanded="true"] .chev { transform:rotate(180deg); }
html .award-picker-results {
  padding:4px; border:1px solid var(--border);
}
html .award-picker-results button { border-radius:6px; font-size:13px; }

/* Announcements (src/announcements.js): Dashboard card and homepage News. */
html .announcements { display:grid; gap:10px; }
html .dash-news .announcements { padding:0 var(--dash-gutter, 24px) 22px; }
html .announcement { padding:16px 18px; border-radius:6px; background:var(--bg-alt); }
html .home-news .announcement { background:var(--panel); }
html .announcement header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin-bottom:8px; }
html .announcement h3 { margin:0; font-size:16px; font-weight:700; }
html .announcement time { color:var(--muted); font-size:12px; }
html .announcement-body p { margin:0 0 8px; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
html .announcement footer { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; }
html .announcement-empty { margin:0; font-size:13px; }
html .home-news .home-section-heading { margin-bottom:24px; }
html .home-news .announcements { max-width:860px; }
/* Homepage: the next event and the newest announcement in the hero, and Coming up (public/assets/upcoming.js). */
html .home-pills { display:flex; flex-wrap:wrap; gap:8px; margin:-12px 0 24px; }
html .home-pills:not(:has(> a:not([hidden]))) { display:none; }
html .home-event-tag { background:#ffc107; color:#1a1300; }
html .home-pill-when { flex:none; color:#ffda6a; font-weight:600; font-variant-numeric:tabular-nums; }
html .home-latest { display:inline-flex; align-items:center; gap:10px; max-width:100%; padding:6px 14px 6px 6px; border-radius:6px; background:rgba(131,182,255,.08); color:#dbe7f8; font-size:13px; text-decoration:none; transition:background .15s; }
html .home-latest[hidden] { display:none; }
html .home-latest:hover, html .home-latest:focus-visible { background:rgba(131,182,255,.14); color:#fff; }
html .home-latest-tag { flex:none; padding:2px 8px; border-radius:4px; background:#0d6efd; color:#fff; font-size:11px; font-weight:700; }
html .home-latest-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
html .home-events .home-section-heading { margin-bottom:24px; }
/* Events then News: one gap between them, not two. */
html .home-page .home-events:not([hidden]) + .home-news { padding-top:0; }
html .upcoming { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; }
html .upcoming-item { display:flex; gap:16px; align-items:flex-start; padding:16px 18px; border-radius:6px; background:var(--panel); }
html .upcoming-when { display:flex; flex-direction:column; flex:none; min-width:84px; font-size:12px; color:var(--muted); }
html .upcoming-when strong { color:var(--text, #fff); font-size:14px; }
html .upcoming-main { min-width:0; }
html .upcoming-main h3 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 4px; font-size:15px; overflow-wrap:anywhere; }
html .upcoming-main p { margin:0; font-size:13px; }
html .upcoming-more { margin:18px 0 0; font-size:14px; }
html .upcoming-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:2px 0 4px !important; color:var(--text, #fff); }
html .upcoming-feature { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; margin-bottom:12px; padding:26px 28px; border-radius:8px; background:linear-gradient(135deg, rgba(255,193,7,.08), var(--panel) 55%); }
html .upcoming-feature[hidden] { display:none; }
html .upcoming-feature-label { margin:0 0 6px; color:#ffda6a; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
html .upcoming-feature h3 { margin:0 0 10px; font-size:24px; font-weight:700; letter-spacing:-.4px; overflow-wrap:anywhere; }
html .upcoming-feature-body p { margin:0 0 8px; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
html .upcoming-feature-text > .muted { margin:0 0 16px; font-size:13px; }
html .countdown { display:flex; gap:10px; }
html .countdown > div { display:flex; flex-direction:column; align-items:center; min-width:74px; padding:14px 8px 10px; border-radius:6px; background:var(--bg-alt); }
html .countdown strong { font-size:32px; line-height:1; font-weight:700; font-variant-numeric:tabular-nums; }
html .countdown span { margin-top:6px; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
html .countdown-live { display:flex; align-items:center; gap:10px; margin:0; color:#75b798; font-size:20px; font-weight:700; }
html .countdown-live span { width:10px; height:10px; border-radius:50%; background:#75b798; box-shadow:0 0 0 4px rgba(117,183,152,.2); }
@media (max-width:760px) {
  html .upcoming-feature { grid-template-columns:1fr; padding:22px 20px; gap:20px; }
  html .countdown > div { flex:1; min-width:0; }
  html .countdown strong { font-size:26px; }
}
/* Admin panel: Announcements tab (public/assets/admin.js). */
html .announcement h3.admin-news-title { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
html .cal-kind-announcement { background:rgba(111,66,193,.22); color:#c29ffa; }
html .admin-news-form { display:grid; gap:14px; max-width:860px; padding:0 22px 24px; }
html .admin-news-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
html .admin-news-actions .btn { width:auto; flex:none; margin:0; }
html .admin-news-note { margin:0; font-size:12px; }
html .admin-news-current { max-width:860px; padding:20px 22px 24px; border-top:1px solid var(--border); }
html .admin-news-current h3 { margin:0 0 12px; font-size:14px; font-weight:600; }

/* Unit Management: Events (public/assets/unit-management.js). */
html .um-events { margin-bottom:24px; }
html .um-events .panel-head { display:flex; align-items:center; gap:12px; }
html .um-events .panel-head h2 { margin:0; }
html .um-events-new { margin-left:auto; }
html .um-events-new[hidden] { display:none; }
html .um-events-sub { margin:0; padding:0 24px 14px; font-size:13px; }
html .um-events-list { padding:0 24px 24px; }
/* Kind labels: Announcement and Event. */
html .cal-kind { font-size:11px; font-weight:600; }
html .cal-kind-event { background:rgba(255,193,7,.14); color:#ffda6a; }

/* Punishment appeals (src/appeals.js): the public form on /bans and Foundation's list on Discipline. */
html .appeal-panel { margin-top:28px; padding:22px 24px; max-width:720px; scroll-margin-top:90px; }
html .appeal-panel h2 { margin:0 0 6px; font-size:20px; }
html .appeal-panel > p { margin:0 0 16px; font-size:14px; }
html .appeal-form { display:grid; gap:14px; }
html .appeal-form > .btn { justify-self:start; }
html .appeal-code-line { margin:0; font-size:14px; line-height:1.6; }
html .appeal-code { padding:2px 8px; border-radius:6px; background:rgba(13,110,253,.16); color:#8bb9fe; font-family:ui-monospace,monospace; letter-spacing:.5px; }
html .appeal-actions { display:flex; gap:8px; }
html .appeal-done { margin:0; padding:12px 14px; border-radius:10px; background:rgba(25,135,84,.14); color:#75b798; font-size:14px; }
html .appeals-review { margin-bottom:16px; }
html .appeals-list { display:grid; gap:8px; padding:14px 16px 16px; }
html .appeal { padding:14px 16px; border-radius:10px; background:var(--bg-alt); }
html .appeal header { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:6px; font-size:14px; }
html .appeal header time { margin-left:auto; font-size:12px; }
html .appeal-reason, html .appeal-outcome { margin:0 0 6px; font-size:12px; }
html .appeal-message { margin:0 0 10px; font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
html .appeal-decide { display:flex; flex-wrap:wrap; gap:8px; }
html .appeal-decide input { flex:1 1 240px; min-height:34px; font-size:13px; }
html .appeal:not(.pending) { opacity:.8; }
html .at-quiet.at-quiet-strike { background:rgba(220,53,69,.16); color:#ea868f; }

/* Role guides (/guides). */
html .guide-page { max-width:900px; display:grid; gap:14px; }
html .guide-jumps { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; }
html .guide-card { padding:18px 22px; }
html .guide-card h2 { margin:0 0 10px; font-size:18px; }
html .guide-card :is(ul, ol) { margin:0; padding-left:18px; display:grid; gap:8px; font-size:14px; line-height:1.55; }
html .guide-card p { margin:0 0 12px; font-size:14px; line-height:1.55; }
html .guide-topics { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; }
html .guide-script-group { margin-top:20px; }
html .guide-script-group h3 { margin:0 0 8px; font-size:15px; }
html .guide-lines { display:grid; gap:2px; overflow:hidden; border-radius:10px; }
html .guide-script { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; background:var(--bg-alt); }
html .guide-script :is(h3, h4) { margin:0 0 2px; font-weight:650; font-size:13px; }
html .guide-script p { margin:0; overflow-wrap:anywhere; }
html .guide-script [data-guide-copy] { min-width:76px; min-height:36px; }
html .guide-script [data-copy-status] { font-size:12px; }
html .guide-script [data-copy-status]:empty { position:absolute; }
.standard-guide .guide-notice {
  --notice-color:#6ea8fe;
  padding:10px 12px;
  border-inline-start:3px solid var(--notice-color);
  border-radius:6px;
  background:color-mix(in srgb, var(--notice-color) 12%, var(--panel));
}
.standard-guide .guide-notice-quiz { --notice-color:#ffc107; }
.standard-guide .guide-notice-pass { --notice-color:#75d8a2; }
.standard-guide .guide-notice-fail { --notice-color:#ff969e; }
.standard-guide .guide-script small { display:block; margin-top:4px; }
.standard-guide .guide-script small strong { color:var(--text); }
html .guide-quiz { scroll-margin-top:90px; }
html .guide-quiz-form:not([hidden]) { display:grid; gap:16px; }
html .guide-question { border:0; margin:0; padding:0; min-width:0; }
html .guide-question legend { font-weight:650; margin-bottom:5px; }
html .guide-question label { display:flex; align-items:baseline; gap:9px; padding-block:4px; cursor:pointer; }
html .guide-question input { margin:0; accent-color:var(--accent); }
html .guide-quiz-form button { justify-self:start; }

/* Page not found (404.html). */
html .not-found {
  padding-block:clamp(52px,9vh,96px);
  border-bottom:0;
  background:radial-gradient(ellipse 65% 85% at 50% 0%, rgba(var(--accent-rgb),.09), transparent 72%), var(--bg);
}
html .not-found-content { max-width:880px; }
html .not-found-search { max-width:440px; margin:26px auto 0; text-align:left; }
html .not-found-field { position:relative; }
html .not-found-field .icon { position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
html.unified-navigation .not-found-field .search-input { --field-rest:var(--panel); --field-focus:var(--welcome-from); min-height:48px; padding-inline-start:42px; font-size:15px; }
html .not-found-search .search-results { padding:6px; border-radius:12px; background:var(--panel); }
html .not-found-links { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:30px; text-align:left; }
html .not-found-links .res-card { align-content:start; }
html .not-found-links .res-card:hover { border-color:transparent; background:var(--welcome-from); }
html .not-found-links .res-card:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:680px) {
  html .not-found-links { grid-template-columns:minmax(0,1fr); max-width:440px; margin-inline:auto; }
}
html .search-hint kbd { padding:1px 6px; border:1px solid var(--border); border-radius:5px; background:var(--bg-alt); color:var(--text); font:inherit; font-size:12px; }
/* Profile › Getting started: the four steps to a first rank, for members who don't have one yet. */
html .getting-started { margin-bottom:16px; }
html .getting-started-steps { list-style:none; counter-reset:step; margin:0; padding:4px 20px 8px; display:grid; gap:12px; }
html .getting-started-steps li { counter-increment:step; display:grid; grid-template-columns:28px 1fr; column-gap:12px; align-items:start; }
html .getting-started-steps li::before { content:counter(step); grid-row:span 2; display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--bg-alt); color:var(--accent); font-size:13px; font-weight:700; }
html .getting-started-steps strong { font-size:14.5px; }
html .getting-started-steps span { color:var(--muted); font-size:13.5px; }

/* Agency Events and News reuse the public page layout and the existing published feeds. */
html .agency-feed { max-width:900px; }
html .agency-feed-list { display:grid; gap:16px; }
html .agency-feed-note { margin:0 0 20px; color:var(--muted); font-size:13px; text-align:center; }
html .agency-feed-loading { display:grid; align-content:center; gap:16px; padding:28px; min-height:210px; }
html .agency-feed-feedback { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:20px; padding:22px; border-radius:10px; background:var(--panel); }
html .agency-feed-feedback[hidden] { display:none; }
html .agency-feed-feedback p { margin:0; color:var(--muted); font-size:14px; }
html .agency-feed-empty { display:grid; justify-items:center; align-content:center; gap:12px; min-height:240px; padding:32px; text-align:center; }
html .agency-feed-empty h2 { margin:0; font-size:21px; }
html .agency-feed-empty p { max-width:460px; margin:0; color:var(--muted); font-size:14px; }
html .agency-feed-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:4px; border-radius:10px; color:var(--accent); background:rgba(var(--accent-rgb),.08); }
html .agency-feed-icon .icon { width:21px; height:21px; }
html .agency-event { display:grid; grid-template-columns:66px minmax(0,1fr); gap:22px; padding:26px; scroll-margin-top:90px; }
html .agency-event-date { display:grid; justify-items:center; align-content:center; gap:4px; align-self:start; padding:13px 8px; border-radius:8px; background:var(--bg-alt); }
html .agency-event-date span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
html .agency-event-date strong { font-size:27px; line-height:1.1; font-variant-numeric:tabular-nums; }
html .agency-event-copy { min-width:0; }
html .agency-event-copy header { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
html .agency-event h2,html .agency-news h2 { margin:0; font-size:22px; line-height:1.35; letter-spacing:-.3px; overflow-wrap:anywhere; }
html .agency-event-time { margin:8px 0 0; color:var(--accent); font-size:13px; }
html .agency-event-description { margin-top:18px; font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
html .agency-event-description p { margin:0 0 10px; }
html .agency-event-host { margin:18px 0 0; color:var(--muted); font-size:12px; }
html .agency-event-host strong { color:var(--text); font-weight:600; overflow-wrap:anywhere; }
html .agency-news { padding:28px; scroll-margin-top:90px; }
html .agency-news header { display:grid; gap:10px; margin-bottom:20px; }
html .agency-news time { color:var(--muted); font-size:12px; }
html .agency-news .announcement-body p { margin-bottom:14px; line-height:1.8; }
html .agency-news footer { margin-top:22px; padding-top:16px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
html .agency-news footer strong { color:var(--text); font-weight:600; overflow-wrap:anywhere; }
@media(max-width:600px) {
  html .agency-event { grid-template-columns:48px minmax(0,1fr); gap:14px; padding:20px 16px; }
  html .agency-event-date { padding:10px 4px; }
  html .agency-event-date strong { font-size:23px; }
  html .agency-event h2,html .agency-news h2 { font-size:19px; }
  html .agency-news { padding:22px 20px; }
  html .agency-feed-empty { padding:26px 20px; }
}

/* Radio: a round button bottom right on every page; the panel opens above it. */
html .radio { position:fixed; right:20px; bottom:20px; z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:10px; font-family:var(--font-ui); }
html .radio button { font-family:inherit; }
html .radio svg { display:block; }
html .radio :is(button,input,a):focus-visible { outline:2px solid #6ea8fe; outline-offset:2px; }

/* The round button */
html .radio-toggle {
  position:relative; display:grid; place-items:center; width:48px; height:48px; padding:0; border-radius:50%;
  color:var(--muted); background:var(--panel); border:0; box-shadow:0 10px 28px #0007; cursor:pointer;
  transition:color .15s, background-color .15s, transform .15s;
}
html .radio-toggle:hover, html .radio.open .radio-toggle { color:var(--text); background:#1a2336; }
html .radio-toggle:active { transform:scale(.94); }
html .radio-toggle svg { width:22px; height:22px; }
html .radio-bars { display:none; align-items:flex-end; gap:3px; height:18px; }
html .radio-bars i { width:4px; height:100%; border-radius:2px; background:currentColor; transform-origin:bottom; animation:radio-bar 1s ease-in-out infinite; }
html .radio-bars i:nth-child(2) { animation-delay:-.35s; }
html .radio-bars i:nth-child(3) { animation-delay:-.7s; }
@keyframes radio-bar { 0%,100% { transform:scaleY(.3); } 50% { transform:scaleY(1); } }
html .radio.playing .radio-toggle { color:#fff; background:#0d6efd; box-shadow:0 10px 28px rgba(13,110,253,.35); }
html .radio.playing .radio-toggle .radio-icon { display:none; }
html .radio.playing .radio-bars { display:flex; }
html .radio.loading .radio-bars i { animation-duration:2.4s; opacity:.6; }

/* The panel */
html .radio-panel {
  position:relative; overflow:hidden; box-sizing:border-box; width:320px; max-width:calc(100vw - 28px); padding:14px 16px 16px;
  border-radius:16px; background:var(--panel); border:0; box-shadow:0 22px 50px #000a;
  animation:radio-open .18s var(--ease-out, ease-out);
}
html .radio-panel[hidden] { display:none; }
@keyframes radio-open { from { opacity:0; transform:translateY(8px) scale(.98); } }
html .radio-panel > :not(.radio-backdrop) { position:relative; }
/* The song's cover, blurred, behind the top of the panel. */
html .radio-backdrop {
  position:absolute; inset:0 0 auto; height:170px; opacity:0; background:center / cover no-repeat;
  filter:blur(30px) saturate(1.4); transform:scale(1.4); transition:opacity .5s;
  -webkit-mask-image:linear-gradient(#000 30%, transparent); mask-image:linear-gradient(#000 30%, transparent);
}
html .radio.has-cover .radio-backdrop { opacity:.4; }

html .radio-head { display:flex; align-items:center; justify-content:space-between; margin:0 -6px 14px 0; }
html .radio-live {
  display:inline-flex; align-items:center; gap:7px; padding:5px 10px 5px 9px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); background:#ffffff0d;
}
html .radio.playing .radio-live { color:var(--text); }
html .radio-dot { width:7px; height:7px; border-radius:50%; background:var(--muted); opacity:.6; }
html .radio.playing .radio-dot { opacity:1; background:var(--green); animation:radio-pulse 2s ease-out infinite; }
html .radio.loading .radio-dot { opacity:1; background:var(--amber); }
@keyframes radio-pulse { 0% { box-shadow:0 0 0 0 rgba(var(--green-rgb),.55); } 70%,100% { box-shadow:0 0 0 7px rgba(var(--green-rgb),0); } }
html .radio-close {
  display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:8px;
  color:var(--muted); background:none; cursor:pointer;
}
html .radio-close svg { width:16px; height:16px; }
html .radio-close:hover { color:var(--text); background:#ffffff12; }

/* Now playing: cover, song, play button */
html .radio-now { display:grid; grid-template-columns:64px minmax(0,1fr) 46px; align-items:center; gap:14px; margin-bottom:18px; }
html .radio-cover {
  position:relative; display:grid; place-items:center; width:64px; height:64px; overflow:hidden; border-radius:10px;
  color:#6ea8fe; background:linear-gradient(135deg,#1c2b47,#0d2a5c); box-shadow:0 8px 20px #0006;
}
html .radio-cover svg { width:28px; height:28px; }
html .radio-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html .radio-track { display:grid; gap:4px; min-width:0; }
html .radio-track strong {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  font-size:15px; font-weight:700; line-height:1.25; color:var(--text); overflow-wrap:anywhere;
}
html .radio-track span { font-size:12.5px; line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html .radio-play {
  display:grid; place-items:center; width:46px; height:46px; padding:0; border:0; border-radius:50%;
  color:#fff; background:#0d6efd; box-shadow:0 8px 20px rgba(13,110,253,.35); cursor:pointer; transition:background-color .15s, transform .15s;
}
html .radio-play:hover { background:#2b7fff; }
html .radio-play:active { transform:scale(.94); }
html .radio-play svg { width:20px; height:20px; }

/* Stations */
html .radio-stations { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-bottom:16px; }
html .radio-station {
  height:32px; padding:0 2px; border-radius:8px; border:0; background:var(--bg-alt);
  font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
  transition:color .15s, background-color .15s;
}
html .radio-station:hover { color:var(--text); background:#1a2336; }
html .radio-station[aria-pressed="true"] { color:#fff; background:#0d6efd; }

/* Volume */
html .radio-volume { display:flex; align-items:center; gap:8px; margin-left:-6px; }
html .radio-mute {
  flex-shrink:0; display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:8px;
  color:var(--muted); background:none; cursor:pointer;
}
html .radio-mute:hover { color:var(--text); background:#ffffff12; }
html .radio-mute svg { width:18px; height:18px; }
html .radio-volume input[type=range] {
  flex:1; min-width:0; height:4px; margin:0; border-radius:999px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background:linear-gradient(to right, #0d6efd var(--level, 50%), var(--border) var(--level, 50%));
}
html .radio-volume input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%; border:0; background:#fff; box-shadow:0 1px 4px #0008;
}
html .radio-volume input[type=range]::-moz-range-track { height:4px; background:transparent; border:0; }
html .radio-volume input[type=range]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; border:0; background:#fff; box-shadow:0 1px 4px #0008; }

html[data-reduce-motion] .radio :is(.radio-bars i,.radio-dot,.radio-panel) { animation:none; }
html[data-reduce-motion] .radio-bars i { transform:scaleY(.7); }
@media (prefers-reduced-motion:reduce) {
  html .radio :is(.radio-bars i,.radio-dot,.radio-panel) { animation:none; }
  html .radio-bars i { transform:scaleY(.7); }
}
@media (max-width:600px) { html .radio { right:14px; bottom:14px; } html .radio-toggle { width:44px; height:44px; } }
@media print { html .radio { display:none; } }

/* Header search: no outline, resting or typing; its darker fill already marks it. Specific enough to beat the
   site-wide field border above (html body :is(input…), which is !important). */
html body .nav .site-search input.search-input[data-site-search][type="search"] { border-color:transparent !important; box-shadow:none; outline:0; }

/* Filled surfaces and controls use spacing and colour for separation. */
html body :is(.panel,.card,.res-card,.unit-card,.dropdown-menu,.lb-stat,.editor,.unit-application-dialog,.form-control,.form-select,.btn-outline,.btn-outline-primary,.btn-outline-secondary,.btn-outline-danger,.btn-ghost,.copy-btn),
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea) {
  border-color:transparent !important;
}
html body :is(.form-control,.form-select,input,select,textarea):focus-visible,
html body .nav .site-search input.search-input[data-site-search][type="search"]:focus-visible {
  outline:2px solid #86b7fe;
  outline-offset:2px;
}