/*
 * vocaid — the Vocaid community theme stylesheet for Janeway.
 *
 * Loaded LAST (after the stock material / admin sheets) by the two base-
 * template overrides in themes/vocaid/templates/, so plain source-order
 * cascade restyles every press-level page. Palette per the 2026-08-24
 * operator decision: gray/white dominant, light subtle gradients, purple
 * strictly as accent plus ONE tinted band.
 *
 * ADR §6: the values below are LITERAL MIRRORS of
 * design-system/tokens/design-tokens.json — the Janeway origin does not load
 * the Vocaid app's CSS custom properties, so each token value is restated
 * here under a --vocaid-* name with its token path noted. Change a token in
 * the JSON → update the mirror here. No colors outside the purple ramp, the
 * gray scale, and color.brand.primary-tint (enforced by
 * client/components/palette-guard.test.ts, which walks this directory).
 * Semantic status colors (error red, success green) are deliberately NOT
 * overridden — Janeway's own alert styling keeps carrying that signal
 * (design-system/README.md, "Palette scope", exception 1).
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
  /* color.brand.* */
  --vocaid-primary: #7c3aed;
  --vocaid-primary-hover: #8b5cf6;
  --vocaid-primary-dark: #6d28d9;
  --vocaid-primary-tint: #f7f5ff;
  /* color.surface.* */
  --vocaid-surface: #ffffff;
  --vocaid-surface-raised: #fafafa;
  --vocaid-surface-sunken: #f5f5f5;
  /* color.text.* */
  --vocaid-text: #1a1a1a;
  --vocaid-text-secondary: #6b6560;
  --vocaid-text-muted: #9b9590;
  --vocaid-text-inverse: #fafafa;
  /* color.border.* */
  --vocaid-border: #e5e7eb;
  --vocaid-border-light: #f3f4f6;
  --vocaid-border-strong: #d1d5db;
  /* gradient.* */
  --vocaid-gradient-surface-wash: linear-gradient(
    180deg,
    #ffffff 0%,
    #fafafa 55%,
    #f5f5f5 100%
  );
  --vocaid-gradient-hero-tint: linear-gradient(135deg, #ffffff 0%, #f7f5ff 100%);
  /* typography */
  --vocaid-font: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* ---------------------------------------------------------------- base */

html {
  font-family: var(--vocaid-font);
  color: var(--vocaid-text);
}

body {
  font-family: var(--vocaid-font);
  color: var(--vocaid-text);
  background: var(--vocaid-gradient-surface-wash) fixed;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--vocaid-font);
  color: var(--vocaid-text);
}

a {
  color: var(--vocaid-primary);
}

a:hover,
a:focus {
  /* primary-hover (#8b5cf6) measures 4.23:1 on white — below AA; darken */
  color: var(--vocaid-primary-dark);
}

::selection {
  /* primary at 22% — the tint alone is a 1.08:1 differential on white */
  background: rgba(124, 58, 237, 0.22);
  color: var(--vocaid-text);
}

:focus-visible {
  outline: 2px solid var(--vocaid-primary);
  outline-offset: 2px;
}

hr {
  border-top-color: var(--vocaid-border);
}

/* ------------------------------------------------- press site (material) */

/* The ONE branded band: the nav strip runs the hero tint under a 2px
   primary rule at the very top of the viewport. Everything below it is
   neutral. */
nav.header-overrides {
  background: var(--vocaid-gradient-hero-tint);
  border-top: 2px solid var(--vocaid-primary);
  border-bottom: 1px solid var(--vocaid-border);
  box-shadow: none;
  color: var(--vocaid-text-secondary);
}

nav.header-overrides ul a,
nav.header-overrides .sidenav-trigger,
.brand-logo {
  color: var(--vocaid-text-secondary);
}

nav.header-overrides ul a:hover {
  color: var(--vocaid-primary);
  background-color: transparent;
}

.brand-logo img.top-bar-image {
  max-height: 34px;
  min-height: 0; /* mat.css sets min-height: 75px, which beats max-height */
  width: auto;
  margin-top: 28px; /* centers the 34px wordmark in the 90px band */
}

/* Tile-styled nav (VOC-819) — the same treatment on press/nav.html and
   core/nav.html (journal), so the desktop nav reads identically on every
   surface: press homepage, journal home, articles, issues, submission,
   contact, become-a-reviewer. Materialize's own <li> is a plain 64px-tall
   flex item with no visual boundary; wrap each one in a small card instead
   of restyling <li> directly, so mat.css's own hover/click targets are
   untouched. Scoped to nav.header-overrides so it never reaches the
   Foundation-based admin nav (admin/core/nav.html, a separate override). */
nav.header-overrides ul.vocaid-nav-tiles {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-right: 0.5rem;
}

nav.header-overrides li.vocaid-nav-tile {
  display: flex;
  align-items: center;
  height: auto;
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

nav.header-overrides li.vocaid-nav-tile:hover,
nav.header-overrides li.vocaid-nav-tile:focus-within {
  background-color: var(--vocaid-surface);
  border-color: var(--vocaid-border-light);
}

nav.header-overrides li.vocaid-nav-tile > a {
  padding: 0;
  line-height: 1.4;
}

/* Materialize's own dropdown-content panels (the "Account"/nav_block
   dropdowns) stay exactly as vocaid.css already themes them above — the
   tile treatment is for the top-level bar only, not its submenus. */

/* Materialize resets: teal buttons, blue links, pink nav → neutral/purple. */
.btn,
.btn-large,
.btn-small,
.btn-floating {
  background-color: var(--vocaid-primary);
  font-family: var(--vocaid-font);
}

.btn:hover,
.btn-large:hover,
.btn-small:hover,
.btn-floating:hover,
.btn:focus,
.btn-large:focus,
.btn-small:focus,
.btn-floating:focus {
  /* white label on primary-hover fails AA; darken on hover/focus */
  background-color: var(--vocaid-primary-dark);
}

.btn-flat {
  color: var(--vocaid-primary);
}

.card,
.card-panel {
  background-color: var(--vocaid-surface);
  border: 1px solid var(--vocaid-border-light);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.05);
}

.card .card-title {
  color: var(--vocaid-text);
}

.collection,
.collection .collection-item {
  background-color: var(--vocaid-surface);
  border-color: var(--vocaid-border-light);
}

.dropdown-content {
  background-color: var(--vocaid-surface);
  border: 1px solid var(--vocaid-border);
  box-shadow: 0 4px 12px rgba(26, 26, 26, 0.08);
}

.dropdown-content li > a,
.dropdown-content li > span {
  color: var(--vocaid-text);
}

.dropdown-content li:hover,
.dropdown-content li.active {
  background-color: var(--vocaid-surface-sunken);
}

.sidenav {
  background-color: var(--vocaid-surface);
}

.sidenav li > a {
  color: var(--vocaid-text);
}

.page-footer {
  background: var(--vocaid-surface-raised);
  border-top: 1px solid var(--vocaid-border);
  color: var(--vocaid-text-secondary);
}

.page-footer .footer-copyright {
  background: transparent;
  color: var(--vocaid-text-secondary);
}

.vocaid-footer-wordmark {
  max-height: 22px;
  min-height: 0;
  width: auto;
  margin: 12px 0;
  opacity: 0.75;
}

.tabs {
  background-color: transparent;
}

.tabs .tab a {
  color: var(--vocaid-text-secondary);
}

.tabs .tab a:hover,
.tabs .tab a.active {
  color: var(--vocaid-primary);
  background-color: transparent;
}

.tabs .tab a:focus,
.tabs .tab a:focus.active {
  background-color: var(--vocaid-primary-tint);
}

.tabs .indicator {
  background-color: var(--vocaid-primary);
}

.pagination li.active {
  background-color: var(--vocaid-primary);
}

.pagination li a {
  color: var(--vocaid-text-secondary);
}

.badge,
.chip {
  background-color: var(--vocaid-surface-sunken);
  color: var(--vocaid-text-secondary);
}

.progress {
  background-color: var(--vocaid-primary-tint);
}

.progress .determinate,
.progress .indeterminate {
  background-color: var(--vocaid-primary);
}

.spinner-layer {
  border-color: var(--vocaid-primary);
}

/* Materialize form focus (teal by default). */
.input-field input:focus,
.input-field textarea:focus {
  border-bottom: 1px solid var(--vocaid-primary) !important;
  box-shadow: 0 1px 0 0 var(--vocaid-primary) !important;
}

.input-field input:focus + label,
.input-field textarea:focus + label {
  color: var(--vocaid-primary) !important;
}

/* Materialize's FormSelect JS only adds .active to a <select>'s label in
   response to a user-driven selection change — a field that already has a
   value at initial render (e.g. contact.html's recipient field: a single
   choice with no blank option) never fires that event, so the label never
   floats and sits directly on top of the select's displayed value instead.
   A <select> can never be meaningfully empty the way a text input can, so
   its label should always render floated. Force the same transform
   Materialize's own `.input-field>label.active` rule applies (verified
   against materialize@1.2.2's shipped CSS), scoped to any label
   immediately followed by a select-wrapper — covers every Materialize
   select in this theme, not just contact.html's. */
.input-field label:has(+ .select-wrapper) {
  -webkit-transform: translateY(-14px) scale(0.8);
  transform: translateY(-14px) scale(0.8);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

[type="checkbox"]:checked + span:not(.lever):before {
  border-right-color: var(--vocaid-primary);
  border-bottom-color: var(--vocaid-primary);
}

[type="radio"]:checked + span:after {
  background-color: var(--vocaid-primary);
  border-color: var(--vocaid-primary);
}

/* ------------------------------------------- admin set (login/register/
   profile/dashboard chrome — foundation-based admin/css/*.css) */

/* The band again, same recipe, on the admin header. Upstream locks it at
   60px while the press name can wrap to two lines at sidebar-constrained
   widths and spill past the band — let it grow instead. */
header.main-header {
  background: var(--vocaid-gradient-hero-tint);
  border-top: 2px solid var(--vocaid-primary);
  border-bottom: 1px solid var(--vocaid-border);
  height: auto;
  min-height: 60px;
}

header.main-header h1 {
  margin: 0;
  padding: 19px 0; /* centers one 20px line in the 60px band; band grows if it wraps */
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

header.main-header h1 a {
  font-family: var(--vocaid-font);
  font-weight: 600;
  color: var(--vocaid-text);
}

/* Foundation buttons ship blue (primary) / navy (secondary). Primary action
   → purple ramp; secondary → quiet neutral. */
.button,
.button.primary {
  background-color: var(--vocaid-primary);
  font-family: var(--vocaid-font);
}

.button:hover,
.button:focus,
.button.primary:hover,
.button.primary:focus {
  background-color: var(--vocaid-primary-hover);
}

.button.secondary {
  background-color: var(--vocaid-surface-sunken);
  color: var(--vocaid-text);
}

.button.secondary:hover,
.button.secondary:focus {
  background-color: var(--vocaid-border);
  color: var(--vocaid-text);
}

.button.hollow,
.button.hollow.primary {
  border-color: var(--vocaid-primary);
  color: var(--vocaid-primary);
  background-color: transparent;
}

.button.hollow:hover,
.button.hollow:focus,
.button.hollow.primary:hover,
.button.hollow.primary:focus {
  border-color: var(--vocaid-primary-dark);
  color: var(--vocaid-primary-dark);
}

.badge.secondary,
.label.secondary {
  background-color: var(--vocaid-surface-sunken);
  color: var(--vocaid-text-secondary);
}

.breadcrumbs li,
.breadcrumbs li a {
  color: var(--vocaid-text-secondary);
}

.breadcrumbs li a:hover {
  color: var(--vocaid-primary);
}

/* Foundation off-canvas menu + admin content panels → light neutral. */
.off-canvas {
  background: var(--vocaid-surface-raised);
  border-right: 1px solid var(--vocaid-border);
}

.off-canvas .vertical.menu a {
  color: var(--vocaid-text-secondary);
}

.off-canvas .vertical.menu a:hover {
  color: var(--vocaid-primary);
}

.off-canvas .close-button {
  color: var(--vocaid-text-secondary);
}

.off-canvas .vertical.menu a:hover {
  background-color: var(--vocaid-surface-sunken);
}

.off-canvas .vertical.menu li.title a,
.off-canvas .vertical.menu li.subtitle a {
  color: var(--vocaid-text);
  font-weight: 600;
  /* admin app.css paints the title row dark; neutralize it */
  background: transparent;
}

.callout {
  background-color: var(--vocaid-surface);
  border-color: var(--vocaid-border);
}

.dropdown-pane {
  background-color: var(--vocaid-surface);
  border-color: var(--vocaid-border);
}

table thead {
  background: var(--vocaid-surface-raised);
  color: var(--vocaid-text);
}

table tbody tr:nth-child(even) {
  background-color: var(--vocaid-surface-raised);
}

/* Foundation input focus (blue by default). */
input:not([type]):focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--vocaid-primary);
  box-shadow: 0 0 4px var(--vocaid-primary-tint);
}

/* ── Public landing (press_index.html) + form feedback ──────────────────
 * Added for the public go-live: the press homepage became a program landing
 * (see themes/vocaid/templates/press/press_index.html). Every value below is
 * a --vocaid-* custom property from the :root block above — no new colors
 * may be introduced here (palette-guard walks this file).
 */
.vocaid-hero {
  background: var(--vocaid-gradient-hero-tint);
  border: 1px solid var(--vocaid-border-light);
  border-radius: 8px;
  padding: 3rem 1.5rem 2.5rem;
  margin: 1rem 0 0.5rem;
  border-top: 2px solid var(--vocaid-primary);
}
.vocaid-hero-title {
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: var(--vocaid-text);
}
.vocaid-hero-lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--vocaid-text-secondary);
  max-width: 46rem;
  margin: 0 0 1.5rem;
}
.vocaid-hero-ctas .btn {
  margin-right: 0.75rem;
}
.vocaid-cta-secondary {
  color: var(--vocaid-primary);
}
/* Full-width banner, ABOVE and OUTSIDE the .vocaid-hero panel (moved out of
 * the row on request — was previously a side column sharing the hero panel
 * with the title/CTAs). Full-bleed within the page's own margins: 100% width
 * of its container, not the row's grid. */
.vocaid-hero-banner {
  position: relative;
  width: 100%;
  margin: 1rem 0 1.5rem;
}
/* Soft brand glow behind the banner — same "glow-brand" idea the client uses
 * behind hero visuals (design-system/tokens/design-tokens.json), built here
 * from --vocaid-primary rather than a new color. Sits behind the image
 * (z-index 0) so it reads as ambient light around the banner, not a border. */
.vocaid-hero-banner::before {
  content: "";
  position: absolute;
  inset: -16px;
  background: var(--vocaid-primary);
  opacity: 0.22;
  filter: blur(56px);
  border-radius: 20px;
  z-index: 0;
}
.vocaid-hero-banner-image {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 480px;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.vocaid-landing-section {
  padding: 1.75rem 0 0.75rem;
}
.vocaid-landing-section h2 {
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
  color: var(--vocaid-text);
}
.vocaid-landing-section p {
  color: var(--vocaid-text-secondary);
  line-height: 1.65;
  max-width: 46rem;
}
.vocaid-landing-alt {
  background: var(--vocaid-surface-raised);
  border: 1px solid var(--vocaid-border-light);
  border-radius: 8px;
  padding: 1.75rem 1.5rem 1rem;
}
.vocaid-cycle {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: vocaid-cycle;
}
.vocaid-cycle > li {
  position: relative;
  padding: 0 0 1rem 2.5rem;
  counter-increment: vocaid-cycle;
}
.vocaid-cycle > li::before {
  content: counter(vocaid-cycle);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--vocaid-primary-tint);
  color: var(--vocaid-primary-dark);
  font-weight: 600;
  text-align: center;
  line-height: 1.6rem;
}
.vocaid-cycle > li p {
  margin: 0.15rem 0 0;
}
.vocaid-landing-cta-line {
  margin-top: 1.25rem;
}
/* Per-field error line rendered by press/journal/contact.html */
.vocaid-field-error {
  display: block;
  color: var(--vocaid-primary-dark);
  font-size: 0.9rem;
  margin: 0.25rem 0 0;
}

/* A <select> always displays its selected option, so its materialize floating
   label has to start in the raised position. Materialize only raises a label
   once it carries `.active`, which its JS sets on interaction and never for a
   select — whose visible control is an `input.select-dropdown` inside a
   sibling `.select-wrapper`, not the label's own input. Left alone the label
   renders ON TOP of the selected option text (/contact/'s recipient field).
   `!important` for the same reason as the focus overrides above: materialize's
   own `.input-field > label` rule ships later in the cascade. */
.input-field > label:has(+ .select-wrapper) {
  transform: translateY(-14px) scale(0.8) !important;
}

/* The wrapped-label branch of press/journal/contact.html — see that template's
   header comment. Its label CONTAINS the control, so it cannot use
   `input-field`: that label is absolutely positioned and overlaps whatever
   follows it (the submit button). Static flow, normal spacing. */
.vocaid-wrapped-field {
  margin: 1rem 0;
}
.vocaid-wrapped-field > label {
  display: block;
}