/* Chitmunk shell: the band shared by /home, /app.html and /playtest.html.
   Every class is namespaced cm-* because this sheet loads next to either
   home.css or style.css, which define colliding generic classes (.btn, .modal).
   Colours come from tokens.css; the walnut band tokens are defined there. */

.cm-band {
  --cm-h: 48px;
  position: relative;
  z-index: 120;
  display: grid;
  /* Each side zone is at least as wide as its content, so the right zone can
     never spill under the centred tabs; the tabs stay centred while there is
     room and slide left when a zone needs more. */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: end;
  height: var(--cm-h);
  padding: 0 12px;
  background: var(--walnut, #2B1F17);
  color: var(--walnut-ink, #F3E9DD);
  font: 600 13px/1.3 var(--font-body, 'Nunito', system-ui, sans-serif);
  user-select: none;
}
.cm-band *, .cm-band *::before, .cm-band *::after { box-sizing: border-box; }
/* The element resets are wrapped in :where() so they carry NO specificity of
   their own. Without it `.cm-band button` (0,1,1) outranked every single-class
   component rule below it — `.cm-btn`, `.cm-menu-i`, `.cm-avatar`,
   `.cm-deckpick` — and silently stripped their padding, background and font.
   Menu rows lost their 10px inset and sat 10px left of their own headings.
   Keep :where() here: any new .cm-* rule in this sheet must be able to win. */
.cm-band :where(a) { color: inherit; text-decoration: none; }
.cm-band :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* No border-radius here: the ring follows each control's own radius, so it
   stays round on the avatar and pill-shaped on the chips. */
.cm-band :where(button, a):focus-visible { outline: 2px solid var(--amber, #E8913A); outline-offset: 2px; }
.cm-zone { display: flex; align-items: center; gap: 4px; height: var(--cm-h); min-width: 0; }
.cm-zone.cm-r { justify-content: flex-end; }
.cm-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cm-ico.cm-f { fill: currentColor; stroke: none; }
.cm-vsep { width: 1px; height: 22px; background: rgba(255,255,255,0.14); margin: 0 4px; flex: none; }

/* Brand / back.
   Band inset rule: every band control carries a 10px inner inset, reduced to
   8px on a side that leads with an icon or a dot (optical compensation — an
   icon's bounding box already carries its own air). Icon-to-label gap is 6px
   throughout the band; a trailing caret sits 4px after its label. */
.cm-brand, .cm-back {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px;
  border-radius: var(--radius); color: var(--walnut-ink-2, #C9B9A6); font-weight: 800; font-size: 12px; white-space: nowrap;
}
.cm-brand:hover, .cm-back:hover { background: rgba(255,255,255,0.07); color: var(--walnut-ink, #F3E9DD); }
.cm-brand .cm-ico, .cm-back .cm-hex { color: var(--amber, #E8913A); width: 18px; height: 18px; }
.cm-logo { width: 20px; height: 20px; flex: none; display: block; }
.cm-back .cm-ico:first-child { width: 14px; height: 14px; }

/* Game name + deck picker */
.cm-gname {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--radius);
  font-family: var(--font-heading, 'Bricolage Grotesque', 'Nunito', sans-serif); font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  color: var(--walnut-ink, #F3E9DD); max-width: 300px;
}
.cm-gname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-gname:hover, .cm-gname.cm-on { background: rgba(255,255,255,0.08); }
.cm-gname .cm-caret { width: 12px; height: 12px; color: var(--walnut-ink-2, #C9B9A6); flex: none; }
/* M-8: the name itself opens Game details; the caret alone opens the menu. */
.cm-gwrap { display: inline-flex; align-items: center; min-width: 0; }
.cm-gwrap .cm-gname { padding-right: 4px; }
.cm-gcaret {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 32px; border-radius: var(--radius); color: var(--walnut-ink-2, #C9B9A6);
}
.cm-gcaret:hover, .cm-gcaret.cm-on { background: rgba(255,255,255,0.08); color: var(--walnut-ink, #F3E9DD); }
.cm-gcaret .cm-caret { width: 12px; height: 12px; flex: none; }
.cm-crumb { color: var(--walnut-ink-2, #C9B9A6); font-weight: 700; padding: 0 2px; }
.cm-deckpick {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: var(--radius);
  background: none; color: var(--walnut-ink, #F3E9DD); font-weight: 700; font-size: 13px; white-space: nowrap; max-width: 260px;
}
.cm-deckpick:hover, .cm-deckpick.cm-on { background: rgba(255,255,255,0.08); }
.cm-deckpick:focus-visible { outline: 2px solid var(--amber, #E8913A); outline-offset: -2px; }
.cm-deckpick .cm-name { overflow: hidden; text-overflow: ellipsis; }
.cm-deckpick .cm-kind { color: var(--walnut-ink-2, #C9B9A6); font-weight: 600; font-size: 11px; }
.cm-deckpick .cm-caret { margin-left: -2px; width: 11px; height: 11px; color: var(--walnut-ink-2, #C9B9A6); flex: none; }
.cm-deckpanel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 130; min-width: 300px; padding: 6px; border-radius: 10px;
  background: var(--bg-primary, #fff); color: var(--text, #1A1815); border: 1px solid var(--border, #E3DFD7); box-shadow: 0 1px 2px rgba(26,24,21,.08), 0 10px 28px -8px rgba(26,24,21,.22); }
.cm-deckpanel .cm-menu-h { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; color: var(--text-muted, #7A7368); }

/* Stage / account tabs (folder tabs) */
.cm-tabs { display: flex; align-items: flex-end; gap: 4px; height: var(--cm-h); }
.cm-tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--radius) var(--radius) 0 0;
  color: var(--walnut-ink-2, #C9B9A6); font-family: var(--font-heading, 'Bricolage Grotesque', 'Nunito', sans-serif); font-weight: 700; font-size: 14px; letter-spacing: -0.005em; white-space: nowrap;
}
.cm-tab .cm-ico { width: 15px; height: 15px; }
.cm-tab:hover { color: var(--walnut-ink, #F3E9DD); background: rgba(255,255,255,0.06); }
.cm-tab.cm-on { background: var(--cm-page-bg, var(--bg-secondary, #F7F6F3)); color: var(--text, #1A1815); }
.cm-tab .cm-badge { font-family: var(--font-body, 'Nunito', sans-serif); font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--warn, #D9962B); color: #1A1000; }

/* Buttons in the band */
.cm-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 6px;
  color: var(--walnut-ink-2, #C9B9A6); font-weight: 700; font-size: 12px; white-space: nowrap;
}
.cm-btn:hover, .cm-btn.cm-on { background: rgba(255,255,255,0.08); color: var(--walnut-ink, #F3E9DD); }
.cm-btn.cm-icon { width: 30px; padding: 0; justify-content: center; }
.cm-btn.cm-primary { background: var(--amber, #E8913A); color: #1A1000; }
.cm-btn.cm-primary:hover { background: var(--amber-hover, #D5802E); color: #1A1000; }
.cm-btn .cm-caret { width: 10px; height: 10px; margin-left: -2px; }
.cm-btn[disabled] { opacity: .35; cursor: default; }
.cm-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--amber, #E8913A); color: #1A1000; display: grid; place-items: center; font-weight: 800; font-size: 12px; overflow: hidden; }
.cm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Trial countdown chip (H-3). Inline in the right zone on every page that
   renders the band, so the days-left number and its Subscribe action are
   never more than one click from anywhere. */
.cm-trial {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 26px; padding: 0 3px 0 10px; border-radius: 999px;
  background: rgba(232, 145, 58, 0.18); color: var(--walnut-ink, #F3E9DD);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.cm-trial:hover { background: rgba(232, 145, 58, 0.3); }
.cm-trial.cm-trial-soon { background: rgba(201, 71, 60, 0.26); }
.cm-trial .cm-trial-cta {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  background: var(--amber, #E8913A); color: #1A1000; font-size: 11px; font-weight: 800;
}

/* Search slot (account mode, plus the /home game-mode routes) */
.cm-search { position: relative; display: inline-flex; align-items: center; height: 32px; width: 280px; max-width: 32vw; border-radius: 8px; background: rgba(255,255,255,0.07); color: var(--walnut-ink-2, #C9B9A6); }
/* Game mode shares its zone with Share + the menus, so it runs narrower. */
.cm-search.cm-search-game { width: 260px; }
/* home.js hands the band a wrapper node holding the icon + the search input
   (initGlobalSearch mounts into it), so the input sits one level deeper than
   in the band's own fallback markup — it has to fill the pill itself. */
.cm-search .cm-search-mount { display: flex; align-items: center; width: 100%; position: relative; }
.cm-search .global-search-wrapper { display: flex; align-items: center; width: 100%; height: 32px; padding: 0; position: relative; }
.cm-search input.global-search-input { display: block; width: 100%; height: 32px; padding: 0 10px 0 34px; border: 0; border-radius: 8px; background: transparent; color: var(--walnut-ink, #F3E9DD); font: 600 12.5px var(--font-body, 'Nunito', sans-serif); }
.cm-search input.global-search-input::placeholder { color: var(--walnut-ink-2, #C9B9A6); }
/* Focus ring belongs to the pill, not the input inside it: the input's own
   outline sat outside the pill with a different radius. The placeholder
   ellipsises instead of cutting mid-word. */
.cm-search input.global-search-input { text-overflow: ellipsis; }
.cm-search input.global-search-input:focus { outline: none; }
.cm-search:focus-within { background: rgba(255,255,255,0.11); box-shadow: 0 0 0 2px var(--amber, #E8913A); }
.cm-search .cm-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; color: var(--walnut-ink-2, #C9B9A6); }
/* The dropdown hung off the wrapper's old 12px padding box; anchor it to
   the pill instead, at the same 6px offset the band's own menus use. */
.cm-search .global-search-dropdown { top: calc(100% + 6px); left: 0; right: 0; color: var(--text, #1A1815); }

/* Menus */
.cm-menuwrap { position: relative; }
.cm-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 130; min-width: 260px; padding: 6px; border-radius: 10px;
  background: var(--bg-primary, #fff); color: var(--text, #1A1815); border: 1px solid var(--border, #E3DFD7);
  box-shadow: 0 1px 2px rgba(26,24,21,.08), 0 10px 28px -8px rgba(26,24,21,.22);
  font-family: var(--font-body, 'Nunito', sans-serif);
}
.cm-menu.cm-right { left: auto; right: 0; }
.cm-menu-h { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; color: var(--text-muted, #7A7368); }
.cm-menu-h b { display: block; font-size: 13px; color: var(--text, #1A1815); font-weight: 800; }
.cm-menu-i { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 10px; border-radius: 6px; text-align: left; color: var(--text, #1A1815); font-weight: 600; font-size: 13px; white-space: nowrap; }
.cm-menu-i:hover { background: var(--bg-hover, rgba(0,0,0,.04)); }
.cm-menu-i .cm-sub { margin-left: auto; padding-left: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--text-muted, #7A7368); font-weight: 600; }
.cm-menu-i.cm-danger { color: var(--danger, #C9473C); }
.cm-menu-i .cm-ico { width: 15px; height: 15px; color: var(--text-secondary, #4A453D); }
/* Even 6px above and below, inset to the same 10px column as the headings
   and the rows, so the rule starts exactly under the first letter. */
.cm-menu-sep { height: 1px; margin: 6px 10px; background: var(--border, #E3DFD7); }
.cm-menu-note { padding: 4px 10px 8px; font-size: 12px; color: var(--text-muted, #7A7368); }
.cm-chip { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--bg-tertiary, #E8E5E0); color: var(--text-secondary, #4A453D); }
.cm-chip.cm-warn { background: rgba(217,150,43,.16); color: var(--warn, #C98A1E); }
/* A chip used as a row's label carries its own 8px padding, which pushed its
   text 8px right of every plain label. Pull it back so the words line up;
   the chip's pill still sits inside the row's hover rect. */
.cm-menu-i > .cm-chip:first-child { margin-left: -8px; }
.cm-meter { height: 5px; border-radius: 4px; background: var(--border, #E3DFD7); overflow: hidden; margin-top: 4px; }
.cm-meter i { display: block; height: 100%; background: var(--amber, #E8913A); }
.cm-menu-i .cm-toggle { margin-left: auto; width: 28px; height: 16px; border-radius: 999px; background: var(--border-light, #CFC9BF); position: relative; }
.cm-menu-i .cm-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; }
.cm-menu-i .cm-toggle.cm-on { background: var(--amber, #E8913A); } .cm-menu-i .cm-toggle.cm-on::after { left: 14px; }

/* Mid widths: the game-mode right zone runs out of room before the tabs do. */
@media (max-width: 1100px) {
  .cm-band .cm-hide-md { display: none; }
}

/* Mobile: collapse the tab row into a menu */
.cm-more { display: none; }
@media (max-width: 900px) {
  /* Keep the Subscribe action, drop the days-left words. */
  .cm-trial .cm-trial-d { display: none; }
  .cm-trial { padding-left: 3px; }
  .cm-band { grid-template-columns: 1fr auto; }
  .cm-tabs { display: none; }
  .cm-more { display: inline-flex; }
  .cm-search { display: none; }
  .cm-band .cm-hide-sm { display: none; }
}

/* Page sub-navigation (home) */
/* Underline tabs, not padded pills: the labels sit on the page's own text
   column (a 12px inner inset used to push the first tab off the heading
   above it) and each underline hugs its own word. Separation is the gap. */
.cm-subnav { display: flex; gap: 24px; align-items: center; margin: 0 0 16px; border-bottom: 1px solid var(--border, #E3DFD7); position: sticky; top: 0; z-index: 5; background: var(--bg-secondary, #F7F6F3); }
.cm-subnav a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0; color: var(--text-muted, #7A7368); font-weight: 700; font-size: 13px; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.cm-subnav a:hover { color: var(--text, #1A1815); }
.cm-subnav a.cm-on { color: var(--text, #1A1815); border-bottom-color: var(--amber, #E8913A); }
.cm-subnav .cm-cnt { font-size: 11px; color: var(--text-dim, #A29B90); }

@media (prefers-reduced-motion: reduce) { .cm-band * { transition: none !important; } }

/* ── Deck colours ────────────────────────────────────────────
   Every deck carries a colour; this dot shows it next to the deck's
   name wherever the name appears. Callers set --dot (and a size when
   the default 8px is wrong). */
.cm-deck-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, var(--text-dim, #A29B90));
  flex: none;
}
/* A dot you can click to change the colour (Game details). */
.cm-deck-dotbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: -3px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer; flex: none;
}
.cm-deck-dotbtn:hover { background: var(--bg-hover, rgba(0, 0, 0, .06)); }
.cm-deck-dotbtn:focus-visible { outline: 2px solid var(--amber, #E8913A); outline-offset: 1px; }

/* Swatch popover, shared by Game details and the deck context menu. */
.cm-deckcolor {
  position: fixed; z-index: 1200; padding: 10px; border-radius: 10px;
  background: var(--bg-primary, #fff); color: var(--text, #1A1815);
  border: 1px solid var(--border, #E3DFD7);
  box-shadow: 0 1px 2px rgba(26, 24, 21, .08), 0 10px 28px -8px rgba(26, 24, 21, .22);
}
.cm-deckcolor-h { font-size: 11px; font-weight: 700; color: var(--text-muted, #7A7368); margin-bottom: 8px; }
.cm-deckcolor-grid { display: grid; grid-template-columns: repeat(4, 22px); gap: 8px; }
.cm-deckcolor-sw {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--sw, #888); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border, #E3DFD7);
}
.cm-deckcolor-sw:hover { box-shadow: 0 0 0 2px var(--text-muted, #7A7368); }
.cm-deckcolor-sw.is-on { border-color: var(--bg-primary, #fff); box-shadow: 0 0 0 2px var(--amber, #E8913A); }
.cm-deckcolor-sw:focus-visible { outline: 2px solid var(--amber, #E8913A); outline-offset: 2px; }
.cm-deckcolor-custom {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle, var(--border, #E3DFD7));
  font-size: 12px; font-weight: 600; color: var(--text-secondary, #4A453D);
}
.cm-deckcolor-custom input { width: 34px; height: 24px; padding: 0; border: 1px solid var(--border, #E3DFD7); border-radius: 6px; background: none; cursor: pointer; }

/* Account mode between the mobile fold (900px) and ~1100px — a half-screen
   window on a 1080p display is 960px: the search pill and the tabs give up
   width before anything is pushed off the band. */
@media (max-width: 1100px) {
  .cm-search { width: 200px; }
}
@media (max-width: 1000px) {
  .cm-search { width: 160px; }
  .cm-tab { padding: 0 12px; gap: 6px; }
  .cm-tabs { gap: 2px; }
  .cm-tab .cm-ico { display: none; }
  .cm-brand { padding: 0 8px 0 6px; }
}

/* Leaving the editor: the cloud upload of unsaved edits runs first (capped),
   so the pointer says "busy" until the document is replaced. */
html.cm-leaving, html.cm-leaving * { cursor: progress !important; }

/* Phones: every band control gets a 44px hit area. The bar stays 48px (44 fits
   inside it); the avatar keeps its 30px disc through a content-box background. */
@media (max-width: 640px) {
  .cm-band .cm-btn, .cm-band .cm-trial { min-height: 44px; }
  .cm-band .cm-btn.cm-icon { width: 44px; min-width: 44px; }
  .cm-band .cm-brand, .cm-band .cm-back { height: 44px; min-width: 44px; }
  .cm-band .cm-avatar { box-sizing: border-box; width: 44px; height: 44px; padding: 7px; background-clip: content-box; }
  .cm-band .cm-avatar img { border-radius: 50%; }
}

/* Menu rows that exist only while the band is too narrow for the Beta chip (band.js). */
.cm-menu .cm-md-only { display: none; }
@media (max-width: 900px) {
  .cm-menu .cm-menu-i.cm-md-only { display: flex; }
  .cm-menu .cm-menu-sep.cm-md-only, .cm-menu .cm-menu-h.cm-md-only { display: block; }
}