/* Quartermaster design system
   Commit to: styles/quartermaster.css  (served at /styles/quartermaster.css)
   Load in every page BEFORE any page-level <style>. */

@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap");

:root {
  /* Surfaces, darkest to lightest */
  --qm-bg: #0B0817;
  --qm-surface-inset: #0F0A1D;
  --qm-surface: #150E26;
  --qm-surface-raised: #1A1130;
  --qm-surface-chip: #2A1F4A;
  --qm-panel-gradient: linear-gradient(160deg, #1A1130 0%, #150E26 70%);
  --qm-hero-gradient: linear-gradient(140deg, #1C1234 0%, #110A20 60%);

  /* Accent */
  --qm-accent: #BD6AD5;
  --qm-accent-hover: #D695E6;
  --qm-accent-ink: #1B0821;        /* text ON a filled accent surface */
  --qm-accent-soft: #C9A9E8;       /* accent-tinted text on dark */
  --qm-accent-deep: #360A68;       /* atmosphere only, never text */
  --qm-accent-wash: rgba(189,106,213,0.07);
  --qm-accent-wash-strong: rgba(189,106,213,0.14);
  --qm-accent-border: rgba(189,106,213,0.28);
  --qm-accent-border-strong: rgba(189,106,213,0.45);

  /* Text. Nothing dimmer than --qm-text-dim on --qm-surface (4.5:1 floor). */
  --qm-text: #E6EBF3;
  --qm-text-soft: #D9E1EE;
  --qm-text-muted: #97A3B9;        /* 5.33:1 on --qm-surface */
  --qm-text-dim: #7C89A0;          /* 5.33:1 on --qm-surface, dimmest allowed */

  /* Lines */
  --qm-border: rgba(255,255,255,0.08);
  --qm-border-strong: rgba(255,255,255,0.12);
  --qm-border-faint: rgba(255,255,255,0.05);

  /* Status */
  --qm-success: #63C08A;
  --qm-success-wash: rgba(99,192,138,0.12);
  --qm-warning: #E0A458;
  --qm-warning-wash: rgba(224,164,88,0.12);
  --qm-danger: #E0707A;
  --qm-danger-wash: rgba(224,112,122,0.12);

  /* Discord. Blurple is reserved for Discord actions and Discord-origin marks. */
  --qm-discord: #5865F2;
  --qm-discord-hover: #4752E0;
  --qm-discord-soft: #AEB6F8;
  --qm-discord-wash: rgba(88,101,242,0.18);

  /* Discord modal mock only */
  --qm-dsc-modal: #313338;
  --qm-dsc-input: #1E1F22;
  --qm-dsc-label: #B5BAC1;
  --qm-dsc-placeholder: #6D6F78;
  --qm-dsc-divider: #3F4147;
  --qm-dsc-title: #F2F3F5;

  /* Type */
  --qm-font-display: Barlow, system-ui, sans-serif;
  --qm-font-body: "IBM Plex Sans", system-ui, sans-serif;
  --qm-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --qm-size-h1: clamp(24px, 3.6vw, 32px);
  --qm-size-h2: 17px;
  --qm-size-h3: 15.5px;
  --qm-size-body: 14.5px;
  --qm-size-small: 13.5px;
  --qm-size-micro: 12.5px;
  --qm-size-eyebrow: 10px;

  /* Radii */
  --qm-r-sm: 8px;
  --qm-r-md: 10px;
  --qm-r-lg: 12px;
  --qm-r-card: 14px;
  --qm-r-section: 16px;
  --qm-r-pill: 999px;

  /* Space */
  --qm-pad-page: clamp(16px, 3vw, 28px);
  --qm-pad-card: 18px;
  --qm-pad-row: 14px 18px;
  --qm-gap: 12px;
  --qm-gap-lg: 16px;

  /* Chrome */
  --qm-sidebar-w: 248px;
  --qm-sidebar-w-collapsed: 76px;
  --qm-breakpoint: 900px;
  --qm-shadow: 0 24px 50px -20px rgba(0,0,0,0.9);
  --qm-hit: 44px;
  --qm-focus: 0 0 0 2px var(--qm-bg), 0 0 0 4px var(--qm-accent);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--qm-bg);
  color: var(--qm-text);
  font-family: var(--qm-font-body);
  font-size: var(--qm-size-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--qm-accent); text-decoration: none; }
a:hover { color: var(--qm-accent-hover); }
::selection { background: rgba(189,106,213,0.32); }
:focus-visible { outline: none; box-shadow: var(--qm-focus); border-radius: var(--qm-r-sm); }

h1, h2, h3 { font-family: var(--qm-font-display); letter-spacing: -0.015em; margin: 0; }
h1 { font-size: var(--qm-size-h1); font-weight: 700; }
h2 { font-size: var(--qm-size-h2); font-weight: 600; }
h3 { font-size: var(--qm-size-h3); font-weight: 600; }

.qm-eyebrow {
  font-family: var(--qm-font-mono);
  font-size: var(--qm-size-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qm-text-dim);
}
.qm-muted { color: var(--qm-text-muted); }
.qm-dim { color: var(--qm-text-dim); font-size: var(--qm-size-micro); }
.qm-mono { font-family: var(--qm-font-mono); }

/* Shell ------------------------------------------------------------------ */
.qm-app { display: flex; min-height: 100vh; }
.qm-sidebar {
  position: sticky; top: 0; height: 100vh; width: var(--qm-sidebar-w); flex: none;
  display: flex; flex-direction: column;
  background: var(--qm-surface-inset);
  border-right: 1px solid var(--qm-border);
  transition: transform 200ms ease;
}
.qm-sidebar[data-collapsed="true"] { width: var(--qm-sidebar-w-collapsed); }
.qm-sidebar[data-collapsed="true"] .qm-nav-item span,
.qm-sidebar[data-collapsed="true"] .qm-nav-heading { display: none; }

@media (max-width: 900px) {
  .qm-sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); }
  .qm-sidebar[data-open="true"] { transform: translateX(0); }
}

.qm-scrim { position: fixed; inset: 0; background: rgba(5,3,12,0.72); z-index: 50; }
.qm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.qm-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--qm-gap);
  padding: 12px var(--qm-pad-page);
  background: rgba(11,8,23,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--qm-border);
}
.qm-content { flex: 1; padding: var(--qm-pad-page); display: grid; gap: 18px; align-content: start; }

.qm-nav-heading {
  font-family: var(--qm-font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--qm-text-dim); padding: 4px 10px 6px;
}
.qm-nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: transparent; border: 0; border-left: 2px solid transparent;
  border-radius: 9px; padding: 9px 10px; min-height: 40px;
  color: var(--qm-text-muted); font: inherit; font-size: 14px; font-weight: 500;
  text-align: left; cursor: pointer;
}
.qm-nav-item:hover { background: rgba(255,255,255,0.05); }
.qm-nav-item[aria-current="page"] {
  background: var(--qm-accent-wash-strong); border-left-color: var(--qm-accent); color: #FFFFFF;
}
.qm-nav-item svg { flex: none; width: 17px; height: 17px; }

/* Containers ------------------------------------------------------------- */
.qm-card {
  border: 1px solid var(--qm-border);
  background: var(--qm-surface);
  border-radius: var(--qm-r-card);
  padding: var(--qm-pad-card);
}
.qm-section {
  border: 1px solid var(--qm-border);
  background: var(--qm-surface);
  border-radius: var(--qm-r-section);
  overflow: hidden;
}
.qm-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--qm-gap);
  padding: 16px 18px; border-bottom: 1px solid var(--qm-border);
}
.qm-row { display: flex; align-items: center; gap: var(--qm-gap); padding: var(--qm-pad-row); border-top: 1px solid var(--qm-border-faint); }
.qm-row-button { width: 100%; background: transparent; border: 0; border-top: 1px solid var(--qm-border-faint); color: inherit; font: inherit; text-align: left; cursor: pointer; padding: var(--qm-pad-row); }
.qm-row-button:hover { background: var(--qm-accent-wash); }
.qm-row-button[aria-selected="true"] { background: rgba(189,106,213,0.1); box-shadow: inset 2px 0 0 var(--qm-accent); }

.qm-grid-cards { display: grid; gap: var(--qm-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr)); }
.qm-grid-panels { display: grid; gap: var(--qm-gap-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.qm-split { display: flex; flex-wrap: wrap; gap: var(--qm-gap-lg); align-items: flex-start; }
.qm-split > .qm-split-list { flex: 1 1 320px; min-width: 0; }
.qm-split > .qm-split-detail { flex: 2.1 1 420px; min-width: 0; display: grid; gap: var(--qm-gap-lg); }

/* Controls --------------------------------------------------------------- */
.qm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--qm-r-md); padding: 11px 16px; min-height: var(--qm-hit);
  background: var(--qm-accent); color: var(--qm-accent-ink);
  font-family: var(--qm-font-display); font-weight: 600; font-size: var(--qm-size-body);
  cursor: pointer;
}
.qm-btn:hover { background: var(--qm-accent-hover); }
.qm-btn-ghost { background: transparent; border: 1px solid var(--qm-border-strong); color: var(--qm-text); }
.qm-btn-ghost:hover { background: transparent; border-color: var(--qm-accent-border-strong); color: #FFFFFF; }
.qm-btn-danger { background: transparent; border: 1px solid rgba(224,112,122,0.5); color: var(--qm-danger); }
.qm-btn-danger:hover { background: var(--qm-danger-wash); }
.qm-btn-discord { background: var(--qm-discord); color: #FFFFFF; box-shadow: 0 10px 26px rgba(88,101,242,0.3); }
.qm-btn-discord:hover { background: var(--qm-discord-hover); }
.qm-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.qm-input, .qm-select {
  background: var(--qm-surface-inset);
  border: 1px solid var(--qm-border-strong);
  border-radius: var(--qm-r-md);
  padding: 11px 12px; min-height: var(--qm-hit);
  color: var(--qm-text); font: inherit; outline: none; width: 100%;
}
.qm-input:focus, .qm-select:focus { border-color: var(--qm-accent-border-strong); }
.qm-label { display: grid; gap: 7px; }
.qm-label > span:first-child { font-family: var(--qm-font-display); font-weight: 600; font-size: var(--qm-size-h3); }

.qm-toggle {
  width: 52px; height: 30px; flex: none; display: flex; padding: 3px; cursor: pointer;
  border-radius: var(--qm-r-pill); border: 1px solid var(--qm-border-strong);
  background: rgba(255,255,255,0.07); justify-content: flex-start;
}
.qm-toggle[aria-checked="true"] { background: var(--qm-accent); justify-content: flex-end; }
.qm-toggle > span { width: 22px; height: 22px; border-radius: var(--qm-r-pill); background: var(--qm-text-muted); display: block; }
.qm-toggle[aria-checked="true"] > span { background: var(--qm-accent-ink); }

.qm-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--qm-border); }
.qm-tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 12px; min-height: 40px; color: var(--qm-text-muted);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.qm-tab[aria-selected="true"] { border-bottom-color: var(--qm-accent); color: #FFFFFF; }

.qm-chip {
  background: transparent; border: 1px solid var(--qm-border-strong); border-radius: var(--qm-r-pill);
  padding: 8px 14px; min-height: 38px; color: var(--qm-text-muted); font: inherit; font-size: 13px; cursor: pointer;
}
.qm-chip[aria-pressed="true"] { background: var(--qm-accent-wash-strong); border-color: var(--qm-accent-border-strong); color: #FFFFFF; }

/* Marks and pills -------------------------------------------------------- */
.qm-pill {
  font-family: var(--qm-font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: var(--qm-r-pill); padding: 4px 9px; white-space: nowrap;
}
.qm-pill-success { color: var(--qm-success); background: var(--qm-success-wash); }
.qm-pill-warning { color: var(--qm-warning); background: var(--qm-warning-wash); }
.qm-pill-danger { color: var(--qm-danger); background: var(--qm-danger-wash); }
.qm-pill-discord { color: var(--qm-discord-soft); background: var(--qm-discord-wash); }
.qm-pill-web { color: var(--qm-accent-soft); background: var(--qm-accent-wash-strong); }

.qm-tag {
  font-size: 11.5px; color: var(--qm-accent-soft);
  background: var(--qm-accent-wash-strong); border: 1px solid var(--qm-accent-border);
  border-radius: var(--qm-r-pill); padding: 2px 8px; white-space: nowrap;
}

/* Avatars. Real images come from Discord, monogram is the fallback only. */
.qm-avatar {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--qm-r-pill);
  background: var(--qm-surface-chip); object-fit: cover;
  font-family: var(--qm-font-display); font-weight: 600; font-size: 12.5px; color: #D9CCF0;
}
.qm-avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.qm-avatar-lg { width: 46px; height: 46px; font-size: 16px; }
.qm-server-icon {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--qm-r-sm);
  background: linear-gradient(140deg, var(--qm-accent-deep), var(--qm-accent));
  object-fit: cover; font-family: var(--qm-font-display); font-weight: 600; font-size: 12px; color: #FFFFFF;
}

/* Tables ----------------------------------------------------------------- */
.qm-table-scroll { overflow-x: auto; }
.qm-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.qm-table th {
  text-align: left; font-family: var(--qm-font-mono); font-size: var(--qm-size-eyebrow);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--qm-text-dim);
  font-weight: 500; padding: 12px 16px; border-bottom: 1px solid var(--qm-border);
}
.qm-table th[data-tracker] { color: var(--qm-accent-soft); }  /* guild-defined columns */
.qm-table td { padding: 13px 16px; border-bottom: 1px solid var(--qm-border-faint); font-size: var(--qm-size-small); color: var(--qm-text-muted); }
.qm-table td[data-primary] { font-size: var(--qm-size-body); color: var(--qm-text); }

/* Feedback --------------------------------------------------------------- */
.qm-meter { height: 8px; border-radius: var(--qm-r-pill); background: rgba(255,255,255,0.07); overflow: hidden; }
.qm-meter > span { display: block; height: 100%; background: var(--qm-accent); }

.qm-empty { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 48px 24px; }
.qm-empty-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--qm-r-lg); background: rgba(255,255,255,0.04); border: 1px solid var(--qm-border);
}

.qm-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 10px;
  background: var(--qm-surface-raised); border: 1px solid var(--qm-accent-border-strong);
  border-radius: var(--qm-r-lg); padding: 12px 18px; box-shadow: var(--qm-shadow);
  font-size: 14px; max-width: calc(100vw - 32px);
}

.qm-notice { border: 1px solid var(--qm-accent-border); background: var(--qm-accent-wash); border-radius: var(--qm-r-section); padding: var(--qm-pad-card); }
.qm-notice-danger { border-color: rgba(224,112,122,0.3); background: rgba(224,112,122,0.05); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}