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

/* ============================================================
   Design tokens — see design.md for the full design system.
   The spot color is the single accent color used across every
   actionable text link, primary CTA, focus ring, progress bar,
   active toggle and "popular plan" highlight. To rebrand the
   entire app, change --spot here once.
   ============================================================ */
:root {
  --spot:       #e8a838;
  --spot-hover: #f5b94a;
  --spot-soft:  rgba(232, 168, 56, 0.12);
}

/* ---- Two-Level Navigation ---- */
#tool-nav {
  background: #0b0d13;
  border-bottom: 1.5px solid #2a2d3a;
  position: relative;
  z-index: 10; /* stay above any ambient page glows painted below */
}

.nav-categories {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 20px;
  height: 48px;
  position: relative;
}
/* Favicon (left column, vertically centered in the bar) */
.nav-favicon-link {
  display: inline-flex;
  justify-self: start;
  align-self: center;
  flex-shrink: 0;
  border-radius: 50%;
}
.nav-favicon {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.nav-logo {
  display: none;
  height: 22px;
  width: auto;
}

/* Tabs group (middle column, centered both horizontally and vertically
   so the text sits on the same axis as the favicon and profile). */
.nav-tabs-group {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: center;
}

/* Legacy back-link (kept for 'Back to Courses' flow) */
.nav-home {
  display: inline-flex; align-items: center;
  padding: 7px 16px; border-radius: 12px; font-size: 0.82rem; font-weight: 700;
  color: #666; text-decoration: none; transition: all 0.2s;
}
.nav-home:hover { color: #bbb; }

/* Simple tab pills — all tabs share the same size, padding and vertical
   position. Active tab just gets a background, border and text colour. */
.nav-cat {
  display: flex;
  align-items: center;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #888;
  text-decoration: none;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 10px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.nav-cat:hover { color: #ccc; }
.nav-cat.active { color: #fff; }

/* Secondary row — tools within the active category (e.g. Learn →
   Circle of Fifths / Fretboard Tool / Library / Analysis / Glossary).
   Rendered as a continuation of the main nav row: no pills, no border,
   so the two rows read as one menu. Click the chevron lip (or the
   active category) to collapse/expand this row. */
.nav-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 2px 20px 8px;
}
#tool-nav.tools-collapsed .nav-tools { display: none; }
.nav-cat.active { cursor: pointer; }

/* Chevron "lip" hanging off the bottom-centre of the nav, like a
   pull-tab. Sits in its own little box outside the menu bar so the
   bar keeps its original height. The top of the lip is aligned with
   #tool-nav's border-bottom stroke via `top: 100%` + a -1.5px margin
   to land on the outer edge of the stroke. */
.nav-tools-toggle {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 38px;
  height: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2px 0 0;
  background: #0b0d13;
  border: 1.5px solid #2a2d3a;
  border-top: none;
  border-radius: 0 0 10px 10px;
  color: #888;
  cursor: pointer;
  z-index: 2;
}
.nav-tools-toggle svg {
  width: 12px;
  height: 8px;
  display: block;
  transition: transform 0.2s;
}
#tool-nav:not(.tools-collapsed) .nav-tools-toggle svg { transform: rotate(180deg); }

/* ---- Mobile hamburger + drawer ----
   Hamburger sits in its own wrapper so the drawer can be position:
   absolute relative to the trigger button — keeps the drawer top
   line up with the profile dropdown. */
.nav-hamburger-wrap {
  display: none;
  position: relative;
  align-items: center;
  align-self: center;
  justify-self: start;
  width: 36px;
  height: 38px; /* matches .user-menu height (trigger has 1px transparent border) */
}
.nav-hamburger {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 0;
}
.nav-hamburger svg { width: 22px; height: 16px; display: block; }
.nav-hamburger:hover { color: #fff; }

/* Drawer matches .user-menu-dropdown exactly (top, edge offset, width,
   colours, border, shadow, padding) so opening either gives the same
   visual frame. */
.nav-drawer {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: calc(100vw - 24px);
  max-width: 260px;
  box-sizing: border-box;
  background: #1a1d27;
  border: 1.5px solid #2a2d3a;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.nav-drawer.open { display: block; }
.nav-drawer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px;
  min-height: 44px;
  background: none;
  border: none;
  border-radius: 6px;
  color: #ccc;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-drawer-item:hover,
.nav-drawer-item:focus { color: #fff; }
.nav-drawer-chevron {
  width: 10px;
  height: 7px;
  flex-shrink: 0;
  color: #666;
  transition: transform 0.2s;
}
.nav-drawer-cat-btn.open .nav-drawer-chevron { transform: rotate(180deg); color: #ccc; }
.nav-drawer-cat-btn.active { color: #fff; background: #2a2d3a; }
.nav-drawer-tools { display: none; }
.nav-drawer-tools.open { display: block; }
/* Sub-tools: indented with a small dash prefix so they read as a level
   below the main items. No pill, no underline — current is just white. */
.nav-drawer-tool {
  display: block;
  width: 100%;
  padding: 10px 12px 10px 32px;
  min-height: 40px;
  position: relative;
  background: none;
  border: none;
  color: #aaa;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-drawer-tool::before {
  content: '–';
  position: absolute;
  left: 18px;
  color: #666;
  font-weight: 400;
}
.nav-drawer-tool:hover,
.nav-drawer-tool:focus { color: #fff; }
.nav-drawer-tool.current { color: #fff; font-weight: 700; }
.nav-tool {
  padding: 2px 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: #666;
  text-decoration: none;
  transition: color 0.15s;
}
.nav-tool:hover { color: #ccc; }
.nav-tool.active { color: #fff; font-weight: 700; }

/* ---- Site Header (hidden — favicon + profile now live in nav row) ---- */
.site-header { display: none !important; }
.site-header a { color: #fff; text-decoration: none; }
.site-header a:hover { color: #ccc; }
.site-title { font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: 0.03em; display: inline-flex; align-items: center; }
.site-logo { height: 22px; width: auto; display: block; }
.site-subtitle { font-size: 0.75rem; color: #7a8aaa; line-height: 1.5; max-width: 640px; margin: 4px auto 0; }

/* ---- Tool Page Layout ---- */
.tool-page {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.5rem 1rem; max-width: 960px; margin: 0 auto; min-height: calc(100vh - 200px);
}
.tool-page h1 {
  font-size: 1.4rem; font-weight: 600; letter-spacing: 0.05em;
  color: #fff; margin-bottom: 0.5rem; text-transform: uppercase;
}

/* ---- Page Title Row ---- */
.page-title-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding: 0;
}
.page-subtitle {
  text-align: center;
  color: #888;
  font-size: 0.82rem;
  margin: 0 auto 1rem;
  max-width: 800px;
  line-height: 1.4;
  white-space: nowrap;
}

/* "Select tool" label */
.page-menu-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.page-menu-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 2px;
}

/* Title is the dropdown trigger */
.page-menu-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 0 0 4px 0; border: none; background: none;
  font-size: 1.4rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff; cursor: pointer;
  transition: color 0.15s;
  position: relative;
}
.page-menu-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 28px;
  height: 2px;
  background: #7cb8ff;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.page-menu-btn:hover::after { transform: scaleX(1); }
.page-menu-btn:hover { color: #ccc; }
.page-menu-btn::after { background: #888; }
.page-menu-btn .page-menu-chevron {
  width: 18px; height: 18px;
  color: #666;
  transition: transform 0.2s, color 0.15s;
  flex-shrink: 0;
}
.page-menu-btn:hover .page-menu-chevron { color: #ccc; }
.page-menu-btn.open .page-menu-chevron { transform: rotate(180deg); color: #ccc; }

/* Dropdown — mirrors .user-menu-dropdown / .user-menu-item styling so
   the tool-picker looks identical to the profile menu on desktop and
   mobile (same bg, border, radius, padding, item size). */
.page-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1d27;
  border: 1.5px solid #2a2d3a;
  border-radius: 10px;
  padding: 6px;
  min-width: 220px;
  box-sizing: border-box;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.page-menu-dropdown.open { display: block; }
.page-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  color: #ccc;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.page-menu-item:hover { color: #fff; }
.page-menu-item.current { background: #2a2d3a; color: #fff; pointer-events: none; }

/* ---- Reset & Body ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Roboto', sans-serif;
  background: #0f1117;
  color: #e0e0e0;
  min-height: 100vh;
  overflow-x: hidden;
  user-select: none;
}

/* Ensure form elements inherit Roboto */
select, button, input, textarea, option, optgroup {
  font-family: inherit;
}

/* ---- Global Toolbar ---- */
.global-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 7px 16px;
  background: #0b0d13;
  border-bottom: 2px solid #2a2d3a;
  flex-wrap: wrap;
}
.gt-group { display: flex; align-items: center; gap: 5px; }
.gt-label { font-size: 0.62rem; color: #555; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; white-space: nowrap; }
.gt-select-wrap { position: relative; }
.gt-select {
  padding: 8px 32px 8px 12px; border: 1.5px solid #2a2d3a; border-radius: 10px;
  background: #1a1d27; color: #ccc; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; appearance: none; -webkit-appearance: none; outline: none;
  transition: border-color 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
.gt-select:hover, .gt-select:focus { border-color: #3a3d4a; color: #fff; }
.gt-bpm {
  width: 52px; padding: 5px 4px; border: 1.5px solid #2a2d3a; border-radius: 10px;
  background: #13151f; color: #fff; font-size: 0.82rem; font-weight: 700;
  text-align: center; outline: none;
}
.gt-bpm:focus { border-color: #3a3d4a; }
/* ---- Shared Controls ---- */
.cof-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.cof-pill-group { display: flex; gap: 0; border-radius: 10px; overflow: hidden; border: 1.5px solid #2a2d3a; }
.cof-pill { padding: 6px 14px; font-size: 0.78rem; background: #13151f; color: #888; border: none; cursor: pointer; transition: all 0.15s; font-family: inherit; font-weight: 600; }

.cof-pill.active { background: #2a2d3a; color: #ccc; }

/* Global action button */
.btn {
  padding: 7px 14px;
  border: 1.5px solid #2a2d3a;
  border-radius: 10px;
  background: #1a1d27;
  color: #ccc;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  white-space: nowrap;
}
.btn:hover { background: #252836; border-color: #555; color: #fff; }
.btn svg { width: 14px; height: 14px; fill: currentColor; }

/* ---- Tab Panels ---- */
.tab-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 160px);
  padding: 1rem;
}
.tab-panel.active {
  display: flex;
}

/* ---- Toolbar Icon Button (shared across all tools) ---- */
.lib-dice-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--icon-btn-size, 35px); height: var(--icon-btn-size, 35px);
  border-radius: 10px; border: 1.5px solid #2a2d3a; background: #13151f; color: #888;
  cursor: pointer; transition: all 0.2s; flex-shrink: 0; box-sizing: border-box;
}
.lib-dice-btn:hover { background: #1e2030; border-color: #3a3d4a; color: #ccc; }
.lib-dice-btn.active { background: #1e2030; border-color: #3a3d4a; color: #ccc; }
.lib-dice-btn svg { width: 16px; height: 16px; }

/* ---- Glossary Reference Link (shared across pages) ---- */
.lib-glossary-ref { margin-top: 12px; padding-top: 12px; border-top: 2px solid #2a2d3a; }
.lib-glossary-ref a {
  font-size: 0.75rem; color: #7cb8ff; text-decoration: none;
  font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.lib-glossary-ref a:hover { color: #a0d0ff; text-decoration: underline; }

/* ---- Subtle Product Links ---- */
.product-link { margin-top: 8px; }
.product-link a {
  font-size: 0.72rem; color: #8a8a9a; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.product-link a:hover { color: #7cb8ff; text-decoration: underline; }


/* Responsive */
@media (max-width: 700px) {
  /* Mobile nav: hamburger left, wordmark logo centred, profile right.
     Hide the desktop tab row, the tools sub-row and the chevron lip;
     all navigation happens via the hamburger drawer. */
  .nav-hamburger-wrap { display: flex; }
  .nav-favicon-link { justify-self: center; }
  .nav-favicon { display: none; }
  .nav-logo { display: block; }
  .nav-tabs-group { display: none; }
  .nav-tools { display: none !important; }
  .nav-tools-toggle { display: none !important; }
}

@media (max-width: 600px) {
  .page-subtitle { white-space: normal; }
  .global-toolbar { gap: 8px; padding: 5px 10px; }
  .gt-group { gap: 3px; }
  .gt-select { font-size: 0.75rem; padding: 6px 26px 6px 8px; }
  .gt-bpm { width: 46px; font-size: 0.76rem; }
  .nav-categories { padding: 0 10px; height: 44px; }
  .nav-tabs-group { gap: 2px; }
  .nav-cat { padding: 6px 12px; font-size: 0.74rem; }
  .nav-home { padding: 6px 12px; font-size: 0.74rem; }
  .tool-page { padding: 1rem 0.5rem; }
  .tool-page h1 { font-size: 1.1rem; }
  .page-menu-btn { font-size: 1.2rem; }
  .page-menu-dropdown { width: calc(100vw - 24px); max-width: 260px; }
  .page-menu-item { padding: 12px; min-height: 44px; }
  .cof-controls { gap: 4px; }
  .cof-pill { padding: 6px 10px; font-size: 0.7rem; }
  .site-header { padding: 8px 12px; }
  .site-title { font-size: 0.88rem; }
  .lib-dice-btn svg { width: 14px; height: 14px; }
}
@media (max-width: 400px) {
  .gt-select { font-size: 0.75rem; padding: 6px 26px 6px 8px; }
  .cof-pill { padding: 6px 10px; font-size: 0.7rem; }
  .nav-cat, .nav-home { padding: 5px 10px; font-size: 0.68rem; }
  .page-menu-btn { font-size: 1.2rem; gap: 6px; }
  .lib-dice-btn svg { width: 12px; height: 12px; }
}

/* ---- Shared A-Z Letter Bar ---- */
.lib-glossary-letters { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; justify-content: center; }
.lib-glossary-letter { width: 34px; height: 34px; border-radius: 0; font-size: 0.72rem; font-weight: 700; background: none; color: #888; border: none; cursor: pointer; transition: color 0.15s; display: flex; align-items: center; justify-content: center; font-family: inherit; padding: 0; }
.lib-glossary-letter:hover:not(.disabled) { color: #bbb; }
.lib-glossary-letter.active { color: #ccc; }
@media (max-width: 600px) {
  .lib-glossary-letters { display: none; }
}