/* ================================================================
   Bullets — Global stylesheet
   Loaded by every page. Holds the design tokens, reset, page shell,
   footer nav, icon buttons, the hamburger drawer and the confirm
   takeover — the chrome that exists on every screen.
   Form fields, buttons, rows and other content primitives live in
   css/components.css; page-specific rules live in css/pages/*.css.

   PLACEHOLDER PALETTE: no Figma mocks yet. Every colour is a token
   below, so re-skinning once the mocks land should be a token swap,
   not a hunt through component rules.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  /* Brand */
  --accent:        #c2410c;   /* primary action colour (placeholder) */
  --accent-hover:  #9a3412;
  --accent-soft:   rgba(194, 65, 12, 0.12);
  --on-accent:     #ffffff;
  --secondary:     #1f3a3d;   /* labels / quiet accent (placeholder) */

  /* Surfaces & text */
  --bg:            #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f3f3f3;   /* highlighted row, recap banner */
  --text:          #0d0d0d;
  --text-muted:    #8a8a8a;
  --text-soft:     #404040;

  /* Fields & controls */
  --field-bg:          #ffffff;
  --field-border:      #ababab;
  --field-disabled:    #f0f0f0;
  --control-disabled:  #d9d9d9;
  --line:              #cfcfcf;   /* dividers, radio borders */
  --line-strong:       #0d0d0d;   /* section heading rule */

  /* Status */
  --success:     #2f8f46;
  --success-bg:  #e3f4e7;
  --error:       #d64545;
  --error-bg:    #fbe3e3;
  --warn:        #b7791f;
  --warn-bg:     #fdf1dc;
  --alert:       #ff0000;   /* "action needed" footer square */

  /* Footer nav */
  --nav-bg:          #ffffff;
  --nav-btn:         #a9a79e;
  --nav-btn-active:  #ffffff;
  --nav-icon:        #f2ebdc;
  --nav-icon-active: var(--accent);

  /* Layout */
  --footer-h:    86px;
  --page-w:      520px;   /* phone-first content column */
  --wide-w:      960px;   /* opt-in wide layout (.bl-page.is-wide) */
  --gutter:      24px;
  --radius:      6px;
  --radius-lg:   12px;
  --transition:  150ms ease;

  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-ui);   /* swap once a display face is chosen */
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family:      var(--font-ui);
  font-size:        16px;
  line-height:      1.5;
  color:            var(--text);
  background-color: var(--bg);
  min-height:       100dvh;
  overflow-x:       hidden;
}
/* Pages with the footer nav pad their bottom so content never hides behind it. */
body.has-footer-nav { padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px)); }

img, svg { display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }

/* ── Page shell ─────────────────────────────────────────────────── */
.bl-page {
  max-width:  var(--page-w);
  margin:     0 auto;
  padding:    var(--gutter) var(--gutter) calc(var(--gutter) + 16px);
}
.bl-page.is-wide { max-width: var(--wide-w); }

.bl-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.bl-header-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.bl-logo { width: 240px; height: auto; display: block; }
.bl-logo.small { width: 150px; }

.bl-back { color: rgba(0, 0, 0, .75); font-size: 15px; white-space: nowrap; padding-top: 6px; }
.bl-back:hover { text-decoration: none; }
.bl-back .arrow { color: var(--accent); margin-right: 4px; }
.bl-back .text { text-decoration: underline; }

.bl-title { font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1.15; margin: 24px 0 20px; color: var(--text); }
.bl-eyebrow { font-size: 14px; color: var(--text-muted); margin: 24px 0 -16px; }

/* ── Footer nav ─────────────────────────────────────────────────────
   Icon-only square buttons (js/footer-nav.js). Icons are inline SVG
   using currentColor, so each state is just a colour change:
     default  — neutral square, cream icon
     active   — white square + shadow, accent icon (current page)
     locked   — neutral square, faint icon, not interactive
     alert    — red square, white icon (something needs doing)
   ------------------------------------------------------------------ */
.footer-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  height: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--nav-bg);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .08);
  display: flex; align-items: center; justify-content: center;
}
.footer-nav-inner { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: var(--page-w); padding: 8px 14px; }

.footer-btn {
  position: relative; flex: 1 1 0; max-width: 64px; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--nav-btn); color: var(--nav-icon);
  border: 0; border-radius: 14px; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition), box-shadow var(--transition), color var(--transition);
}
.footer-btn:hover { text-decoration: none; }
.footer-btn svg { width: 58%; height: 58%; pointer-events: none; }
.footer-btn.is-active,
.footer-btn:not(.is-locked):hover { background: var(--nav-btn-active); color: var(--nav-icon-active); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.footer-btn.is-locked { cursor: default; color: rgba(242, 235, 220, .3); }
.footer-btn.is-alert,
.footer-btn.is-alert:hover { background: var(--alert); color: #fff; box-shadow: none; }

.footer-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff; pointer-events: none;
}

/* ── Icon buttons ───────────────────────────────────────────────────
   One shared 30x30 square button for every icon action (close, menu,
   add, select, manage, sign out, copy, delete…). Hover/active flips it
   to the accent colour; the glyph is recoloured by filter for <img>
   icons and by currentColor for inline SVG.
   ------------------------------------------------------------------ */
.icon-btn {
  position: relative; flex: none;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--text);
  border: 1px solid rgba(0, 0, 0, .33); border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.icon-btn img { max-width: 18px; max-height: 18px; transition: filter var(--transition); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover:not(:disabled),
.icon-btn.is-active { background: var(--accent); border-color: rgba(0, 0, 0, .2); color: var(--on-accent); text-decoration: none; }
.icon-btn:hover:not(:disabled) img,
.icon-btn.is-active img { filter: brightness(0) invert(1); }
.icon-btn:disabled,
.icon-btn.is-disabled { background: var(--control-disabled); border-color: rgba(0, 0, 0, .15); color: #9a9a9a; cursor: default; }
.icon-btn:disabled img,
.icon-btn.is-disabled img { filter: grayscale(1) opacity(.5); }
.icon-btn.is-loading img { animation: spin 700ms linear infinite; }

/* Accent-filled variant — the "+" beside a section heading. */
.icon-btn-add { background: var(--accent); border-color: var(--accent); }
.icon-btn-add img { filter: brightness(0) invert(1); }
.icon-btn-add:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ── Drawer (hamburger panel, js/site-nav.js) ───────────────────────
   Full-screen white overlay rather than a side sheet — it holds the
   Games/Characters picker and account settings, and reads as a page of
   its own on a phone.
   ------------------------------------------------------------------ */
.bl-drawer-overlay { position: fixed; inset: 0; z-index: 900; background: var(--bg); overflow-y: auto; color: var(--text); }
.bl-drawer-inner { max-width: var(--page-w); margin: 0 auto; padding: var(--gutter) var(--gutter) calc(var(--footer-h) + 40px); }
.bl-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.bl-drawer-header-left { display: flex; flex-direction: column; gap: 6px; }
.bl-drawer-logo { width: 150px; height: auto; }
.bl-drawer-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.bl-drawer-breadcrumb-home { background: none; border: 0; padding: 0; font-size: 15px; font-weight: 700; text-decoration: underline; color: var(--accent); }
.bl-drawer-breadcrumb-home:hover { color: var(--accent-hover); }
.bl-drawer-breadcrumb-sep,
.bl-drawer-breadcrumb-current { color: var(--text-muted); }
.bl-drawer-close { display: flex; align-items: center; gap: 10px; background: none; border: 0; font-size: 15px; color: var(--text); }
.bl-drawer-close:hover .icon-btn { background: var(--accent); border-color: rgba(0, 0, 0, .2); color: var(--on-accent); }
.bl-drawer-welcome { margin-bottom: 26px; }
.bl-drawer-welcome h2 { font-size: 20px; font-weight: 800; }
.bl-drawer-welcome .name { color: var(--accent); }
.bl-drawer-section { margin-bottom: 22px; }
.bl-drawer-section h3 { font-size: 17px; font-weight: 800; margin: 0 0 10px; }

/* ── Confirm takeover (BL.confirm(), js/app.js) ─────────────────── */
.bl-confirm-overlay { position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.bl-confirm-card { width: min(92vw, 356px); background: #fff; border: 1px solid rgba(1, 1, 1, .15); border-radius: var(--radius-lg); box-shadow: 0 0 8px rgba(0, 0, 0, .25); padding: 32px 24px; text-align: center; }
.bl-confirm-title { font-size: 20px; font-weight: 800; line-height: 1.3; margin: 0 0 28px; }
.bl-confirm-card .bl-btn + .bl-btn { margin-top: 14px; }

/* ── Notice / flash messages (BL.setNotice) ─────────────────────── */
.notice { display: none; padding: 12px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 18px; border: 1px solid transparent; }
.notice.error   { display: block; background: var(--error-bg);   color: var(--error);   border-color: rgba(214, 69, 69, .25); }
.notice.success { display: block; background: var(--success-bg); color: var(--success); border-color: rgba(47, 143, 70, .25); }
.notice.info    { display: block; background: var(--accent-soft); color: var(--accent); border-color: rgba(194, 65, 12, .2); }
.notice.warn    { display: block; background: var(--warn-bg);    color: var(--warn);    border-color: rgba(183, 121, 31, .25); }

/* ── Spinners ───────────────────────────────────────────────────── */
.bl-page-spinner { display: flex; align-items: center; justify-content: center; min-height: 50vh; }
.bl-page-spinner img { width: 100px; height: 100px; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Utilities ──────────────────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Responsive ─────────────────────────────────────────────────────
   Phone-first. Breakpoints:
     ≤480px  small phone — tighter gutters, smaller title/logo
     ≥768px  tablet — wide pages gain breathing room
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .bl-title { font-size: 28px; }
  .bl-logo { width: 200px; }
  .bl-logo.small { width: 140px; }
}
@media (min-width: 768px) {
  .bl-page.is-wide { padding-left: 32px; padding-right: 32px; }
}