/* Web Component Styling */
/* Default styling for site-header, site-footer, spiral-header components */

/* Loading states */
site-header:not(:defined),
site-footer:not(:defined),
spiral-header:not(:defined) {
  display: block;
  min-height: 60px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  position: relative;
}

site-header:not(:defined)::before,
site-footer:not(:defined)::before,
spiral-header:not(:defined)::before {
  content: "Loading...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #64748b;
  font-size: 0.875rem;
}

/* Error states */
.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
}

/* Active navigation states */
[aria-current="page"],
.is-active {
  font-weight: 600;
  color: #9333ea !important;
}

/* Dropdown functionality */
.dropdown {
  position: relative;
}

.dropdown-trigger:hover + .dropdown-menu,
.dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu {
  transform: translateY(-10px);
}

/* Framed inside the Create page's player panel (Oct 1 2026): the editor is
   the page's chrome there, so the viewer drops the shell's header and footer.
   `html.editor-embed` is set by each viewer's head bootstrap (view.html for
   embed=editor; grammar-viewer, tree-viewer and study-viewer when framed). */
html.editor-embed site-header,
html.editor-embed site-footer {
  display: none !important;
}

/* "Ask the assistant" buttons (Oct 2 2026, her words: "the ai button in cards
   should redirect to assistant within page, not to open a full journal page.
   And this should be the behavior across."). A control carrying
   data-assistant-ask opens the in-page assistant (js/assistant-launcher.js),
   so it is shown only while an assistant will take the click: the launcher's
   init() sets html.rec-assistant-on and destroy() removes it, and inside the
   Create editor's player panel the editor's handshake sets
   html.rec-assistant-dock (the click goes to the editor's own assistant).
   That hides the button behind the Focus wall (view.html destroys the
   launcher there), in any other frame, with ?embed=1, and on Print. */
html:not(.rec-assistant-on):not(.rec-assistant-dock) [data-assistant-ask] {
  display: none !important;
}

/* Smooth transitions for component loading */
site-header,
site-footer,
spiral-header {
  transition: opacity 0.3s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  site-header:not(:defined),
  spiral-header:not(:defined) {
    min-height: 120px;
  }
}

/* ── View Mode Dropdown (shared across all viewers) ── */
.vmd-wrapper {
  position: relative;
  display: inline-block;
}
.vmd-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 0.375rem;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s;
}
.vmd-trigger:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.5);
}

/* ── Star button (shared across every viewer, Oct 2026 — star-button.js) ──
   Same chrome language as .vmd-trigger (the eye) so the two sit as a pair;
   the count makes this wider than a plain icon button, so it is its own
   shape rather than reusing .vmd-trigger's fixed 32x32 square. */
.star-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 32px;
  padding: 0 0.6rem;
  border: none;
  border-radius: 0.375rem;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}
.star-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.5);
}
/* Purple, not yellow (CLAUDE.md: no yellow chrome anywhere on the platform —
   yellow reads as "incomplete/warning", and this is a status, not a notice). */
.star-btn.is-starred {
  color: #a855f7;
}
.star-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.star-btn-count {
  min-width: 1ch;
}
/* The page's help in the site header (Oct 7 2026; view.html's player guide
   moves into `site-header [data-header-help]`). Flow's HelpButton, drawn the
   same: a bare question mark, no ring, a 32px target, purple on hover. */
.header-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.15s;
}
.header-help-btn:hover { color: #7c3aed; }
.header-help-btn:focus-visible { outline: 2px solid #a78bfa; outline-offset: 1px; }
.header-help-btn svg { width: 24px; height: 24px; }
.vmd-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  min-width: 120px;
  max-width: calc(100vw - 16px);
  background: #1a1a24;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 0.25rem;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.vmd-hidden {
  display: none;
}
.vmd-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-radius: 0.25rem;
  transition: all 0.15s;
}
.vmd-option:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.vmd-active {
  color: #fff;
  background: rgba(139, 92, 246, 0.3);
}
/* Child entries — Thumbnails under Cards, Performance under Sequence.
   Indented + tree corner glyph signals the parent/child relationship.
   May 24 2026. */
.vmd-option.vmd-child {
  padding-left: 1.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}
.vmd-tree-corner {
  display: inline-block;
  color: rgba(255, 255, 255, 0.35);
  margin-right: 0.25rem;
  user-select: none;
}
.vmd-tag {
  display: inline-block;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.35rem;
  margin-left: 0.35rem;
  border-radius: 0.25rem;
  background: rgba(190, 24, 93, 0.4);
  color: rgba(251, 207, 232, 1);
  font-weight: 500;
  vertical-align: middle;
}

/* ── Node Context Menu (right-click on items) ── */
.ncm-menu {
  position: fixed;
  min-width: 160px;
  background: #1a1a24;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 0.25rem;
  z-index: 2000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.ncm-hidden {
  display: none;
}
.ncm-option {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-radius: 0.25rem;
  transition: all 0.15s;
}
.ncm-option:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
/* ── The one header row (Oct 8 2026, PROPOSAL-one-navigation §2) ──────────
   site-shell-inline.js HEADER_HTML: spiral · Explore · Play · Create ···
   ? · search · Sign In / person circle, the same row at every width, as in
   flow's Header.tsx. Plain CSS because the prebuilt tailwind.css lacks most
   of these utilities. Phone (< 640px): each word is its icon over a small
   label and the spiral is 36px; from 640px the label with the icon beside it
   (flex-direction: row-reverse keeps one DOM order), the spiral 56px. */
site-header .nav1-left { gap: 0.25rem; min-width: 0; }
site-header .nav1-words { gap: 0.125rem; }
site-header .nav1-right { gap: 0.25rem; flex-shrink: 0; }
site-header .nav1-spiral { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
site-header .nav1-word {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.125rem;
  padding: 0.25rem 0.5rem; border-radius: 0.5rem; transition: color 0.15s;
}
site-header .nav1-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
site-header .nav1-label { font-size: 11px; line-height: 1; }
site-header .nav1-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 0.375rem; background: transparent; border: 0; cursor: pointer;
}
site-header .nav1-iconbtn svg { width: 18px; height: 18px; }
site-header .nav1-signin { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem; }
site-header .nav1-signin.hidden { display: none; }
site-header .nav1-signin-icon { width: 1.75rem; height: 1.75rem; }
site-header .nav1-signin-label { display: none; }
@media (max-width: 359px) {
  site-header .nav1-word { padding-left: 0.3rem; padding-right: 0.3rem; }
}
@media (min-width: 640px) {
  site-header .nav1-left { gap: 1.5rem; }
  site-header .nav1-words { gap: 1.25rem; }
  site-header .nav1-right { gap: 0.75rem; }
  site-header .nav1-spiral { width: 3.5rem; height: 3.5rem; }
  site-header .nav1-word { flex-direction: row-reverse; gap: 0.25rem; padding: 0; }
  site-header .nav1-icon { width: 0.875rem; height: 0.875rem; }
  site-header .nav1-label { font-size: 1rem; line-height: 1.5rem; }
  site-header .nav1-signin-icon { display: none; }
  site-header .nav1-signin-label { display: inline; }
}
@media (min-width: 1024px) {
  site-header .nav1-iconbtn { display: none; }
  site-header #header-search-panel { display: none; }
}