/* ============================================================================
   GLOBAL PUBLIC CHROME — THE ONE SOURCE FOR HEADER, FOOTER AND PUBLIC TYPE.

   mixingandmastering.ai is two codebases: 321 static HTML pages and a React
   SPA. /signin lives in the SPA, every marketing page is static, and each had
   its own header and footer. That is why /signin read as a different website:
   body 15px against 16px, nav 13.5px against 19px, .phead/.pfoot markup
   against .nav/footer markup.

   This file is the single definition. It is:
     - served at /chrome.css and linked by the SPA, and
     - injected verbatim into every static page's inlined <style> as the
       managed block "=== GLOBAL CHROME ===" by apply-chrome.py.
   One source, two outputs. Never hand-edit either output.

   Tokens here are namespaced --mmc-* on purpose. The static site and the app
   each have their own --space-N and --text-N scales with DIFFERENT values, so
   shared file must not redefine those names or it would silently re-space one
   of the two trees.

   PERMANENT RULE: auth pages are part of this site, not a mini-site. They get
   the same header, footer, typography, buttons, spacing and logo as every
   other public route. Do not introduce auth-specific type sizes.
   ========================================================================= */

:root {
  --mmc-ff: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Public type scale. These are the visible reading sizes, matched to the
     static marketing pages and to the 17-18/18-20/16-18 bands in the brief. */
  --mmc-text-body: 17px;
  --mmc-text-nav: 19px;
  --mmc-text-btn: 17px;
  --mmc-text-label: 15.5px;
  --mmc-text-input: 17px;
  --mmc-text-support: 15.5px;
  --mmc-lh-body: 1.65;

  /* Shell. Identical to the static --content-max / --page-padding / --header-h
     so the two trees share one page rhythm and one width. */
  --mmc-shell: 1680px;
  --mmc-gutter: clamp(20px, 4vw, 80px);
  --mmc-header-h: 76px;

  /* Colour, copied from the static :root. */
  --mmc-bg: #070a13;
  --mmc-txt: #f8fafc;
  --mmc-mut: #8596ad;
  --mmc-dim: #5b606c;
  --mmc-line: #232834;
  --mmc-line2: #161b24;
  --mmc-cy: #00e5ff;
  --mmc-cy2: #99f6ff;
  --mmc-radius-sm: 10px;
  --mmc-btn-h: 54px;
}

/* --- public body type ------------------------------------------------------
   The root stays 16px. The app's CSS is full of rem values keyed to it, so
   moving the root would rescale the whole application; only the BODY size
   moves, which is the size a visitor actually reads. The static tree has no
   rem at all (verified: 0 occurrences), so it is unaffected either way. */
html body {
  font-family: var(--mmc-ff);
  font-size: var(--mmc-text-body);
  line-height: var(--mmc-lh-body);
  background: var(--mmc-bg);
  color: var(--mmc-txt);
}

/* ============================================================================
   HEADER — TRUE-CENTRED NAV
   The nav used to be a flex item with `margin-right:auto`, so it was pushed
   hard left and merely floated in the space left over by the logo and the
   buttons. Measured live: nav centre 676 against a viewport centre of 864,
   188px off. A three-column grid with two equal flexible edges centres the
   middle track on the VIEWPORT, so the logo and the CTAs can change width
   without ever moving the menu.
   ========================================================================= */
header.nav .navin,
.navin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  /* Not the full page gutter: at 1025px two 80px gaps plus the brand and the
     CTAs overflowed the row and the menu collided with both sides. */
  gap: clamp(16px, 2.5vw, 48px);
  width: 100%;
  max-width: var(--mmc-shell);
  min-height: var(--mmc-header-h);
  height: var(--mmc-header-h);
  margin-inline: auto;
  padding-inline: var(--mmc-gutter);
  box-sizing: border-box;
}

.navin > .brand {
  justify-self: start;
  margin-right: 0; /* the old flex spacer, meaningless in grid and harmful */
}

/* Measured off the static header so the app cannot drift: 26/700 with a 40px
   mark and a 12px gap in the header, 22/700 with the same mark in the footer.
   The mark is an <img> of favicon.svg, so no stylesheet can recolour it. */
.navin > .brand,
.navin > .brandlockup {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 12px);
  font-size: clamp(16px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--mmc-txt);
  text-decoration: none;
  white-space: nowrap;
}

.navin > .brand .brandmark,
.navin > .brandlockup .brandmark {
  width: clamp(30px, 4.6vw, 40px);
  height: clamp(30px, 4.6vw, 40px);
  flex: 0 0 auto;
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
}

footer .fbrand .brand,
footer .fbrand .brandlockup {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mmc-txt);
  text-decoration: none;
}

footer .fbrand .brandmark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.navin > .navlinks {
  justify-self: center;
  display: flex;
  align-items: center;
  /* The brief asks for 40-48px. A fixed value crowds at 1025px, where the
     desktop nav first appears, and the standing responsive rule says clamp the
     gap before the header can collide. This sits inside the 40-48 band on any
     normal desktop (43px at 1440, the full 48 from 1600 up) and eases off on a
     small laptop, where the 1025-1240 band below takes over. */
  gap: clamp(24px, 3vw, 48px);
  margin: 0; /* kills `margin-right:auto`, the actual cause of the offset */
  font-size: var(--mmc-text-nav);
  font-weight: 500;
  white-space: nowrap;
}

.navin > .navlinks a {
  font-size: var(--mmc-text-nav);
  font-weight: 500;
  color: var(--mmc-mut);
  text-decoration: none;
}

.navin > .navlinks a:hover,
.navin > .navlinks a[aria-current] {
  color: var(--mmc-txt);
}

/* One wrapper holds everything on the right. Without it the two CTAs and the
   burger are three separate grid children and the three-column layout breaks. */
.navin > .navcta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.navin > .navcta > .btn {
  margin-left: 0;
  font-size: var(--mmc-text-btn);
}

/* --- small laptops: 1025 to 1240 -------------------------------------------
   The desktop nav first appears at 1025px, and at that width the full-size
   brand (26px + a 40px mark) and both CTAs leave the five menu items nowhere
   to go: measured, the row overflowed and the menu collided with both sides.
   Everything tightens a step here so the menu stays centred and clear. The
   nav never drops below 18px, the floor in the brief. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .navin > .brand,
  .navin > .brandlockup { font-size: 20px; gap: 10px; }
  .navin > .brand .brandmark,
  .navin > .brandlockup .brandmark { width: 32px; height: 32px; }
  .navin > .navlinks { gap: 20px; }
  .navin > .navlinks a { font-size: 18px; }
  .navin > .navcta { gap: 8px; }
  .navin > .navcta > .btn { padding-inline: 14px; font-size: 16px; }
}

/* --- mobile: brand left, burger right, always ----------------------------- */
@media (max-width: 1024px) {
  header.nav .navin,
  .navin {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    height: 72px;
    min-height: 72px;
    padding-inline: 20px;
  }
  .navin > .navlinks {
    display: none;
  }
  .navin > .navcta {
    justify-self: end;
  }
  /* The CTAs live in the drawer on a phone; only the burger stays in the row. */
  .navin > .navcta > .btn {
    display: none;
  }
}

/* ============================================================================
   FOOTER — same size on every public route, auth included
   ========================================================================= */
footer > .wrap,
.pfoot > .wrap {
  width: 100%;
  max-width: var(--mmc-shell);
  margin-inline: auto;
  padding-inline: var(--mmc-gutter);
  box-sizing: border-box;
}

footer .fgrid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 64px;
}

footer .fbrand .brand {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

footer .fbrand p {
  font-size: var(--mmc-text-body);
  line-height: var(--mmc-lh-body);
  color: var(--mmc-mut);
  max-width: 42ch;
}

footer .fgrid h4 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--mmc-txt);
}

footer .fgrid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer .fgrid a {
  font-size: 16px;
  line-height: 2;
  color: var(--mmc-mut);
  text-decoration: none;
}

footer .fgrid a:hover {
  color: var(--mmc-txt);
}

footer .fbot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-top: 48px;
  padding-block: 24px;
  border-top: 1px solid var(--mmc-line2);
  font-size: var(--mmc-text-support);
  color: var(--mmc-dim);
}

footer .fbot a,
footer .fbot .cookiebtn {
  font-size: var(--mmc-text-support);
  color: var(--mmc-dim);
  text-decoration: none;
}

footer .fbot a:hover,
footer .fbot .cookiebtn:hover {
  color: var(--mmc-txt);
}

.flegal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

@media (max-width: 1024px) {
  footer .fgrid { grid-template-columns: 1fr 1fr; gap: 48px; }
}

@media (max-width: 640px) {
  footer .fgrid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  footer .fbot { justify-content: flex-start; }
}

/* ============================================================================
   BUTTONS — one size band across public routes
   ========================================================================= */
.nav .btn,
.navcta .btn,
footer .btn {
  font-size: var(--mmc-text-btn);
}

/* ============================================================================
   AUTH — a public page with one narrow column, not a separate mini-site

   /signin and /signin?mode=signup inherit the global header, footer,
   typography, buttons, spacing and logo. The ONLY thing that is auth-specific
   is the width of the form column.

   This replaced a two-column shell (a marketing panel left, the form right).
   Measured live at 1728: the grid was `536px 560px` in a 1320px cap and the
   card sat at 920..1440 while the page centre was 864 - the form was pinned to
   the right-hand third of the screen, which is what made signup read as a
   different product. One centred column now, in the same container as every
   other public page.

   Everything is raised with `html ` because the app's own auth rules are the
   same specificity, and which stylesheet Vite injects last would otherwise
   decide the outcome.
   ========================================================================= */

html .authshell {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: var(--mmc-shell);
  margin-inline: auto;
  padding-inline: var(--mmc-gutter);
  padding-block: clamp(48px, 7vw, 96px);
  box-sizing: border-box;
}

/* The form column. 520px on desktop, full width on a phone. */
html .authshell > .auth__card,
html .auth__card {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

/* The two-column remnants. The markup no longer renders them, but a stale
   bundle or a cached chunk must not be able to re-create the split. */
html .auth {
  display: block;
  max-width: none;
  padding: 0;
}

html .auth__brand,
html .auth__panel {
  display: contents;
}

/* --- type: the public scale, never an auth-specific one ------------------ */

html .auth__card h1 {
  /* 40-48 on desktop, 32-38 on a phone. Was a flat 34px. */
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 18px;          /* heading -> supporting line, 16-20 band */
}

html .auth__card > p,
html .auth__card > .alert {
  margin: 0 0 30px;          /* supporting line -> Google, 28-32 band */
  font-size: var(--mmc-text-support);
  line-height: 1.55;
}

html .auth__card label,
html .auth__card .field__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--mmc-text-label);
  font-weight: 600;
}

html .auth__card input,
html .auth__card select {
  width: 100%;
  min-height: 52px;
  font-family: var(--mmc-ff);
  font-size: var(--mmc-text-input);
  box-sizing: border-box;
}

html .auth__card .field {
  margin-bottom: 18px;       /* field -> field, 16-20 band */
}

html .auth__card .field__hint,
html .auth__card .field__error,
html .auth__card .small,
html .auth__card .sub {
  font-size: var(--mmc-text-support);
  line-height: 1.55;
}

/* --- controls: the shared buttons, full width ---------------------------- */

html .auth__card form > .btn,
html .auth__card button[type="submit"],
html .auth__standalone {
  width: 100%;
  min-height: 52px;
  margin-top: 10px;          /* 18 + 10 = 28, the last field -> CTA band */
  font-size: var(--mmc-text-btn);
}

/* Google sits full width like every other control, not centred at its own
   intrinsic size with a gap either side. */
html .authgoogle,
html .authgoogle > div,
html .authgoogle iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
}

html .authgoogle {
  margin: 0 0 12px;
}

html .authgoogle__note,
html .authsep {
  margin: 0 0 22px;
  font-size: var(--mmc-text-support);
}

html .auth__card > form + p,
html .auth__card > form + .small {
  margin: 22px 0 0;          /* CTA -> helper text, 20-24 band */
}

/* --- phone ---------------------------------------------------------------- */
@media (max-width: 640px) {
  html .authshell {
    padding-inline: 20px;    /* the 20px gutter from the brief */
    padding-block: 32px 48px;
  }
  html .auth__card {
    max-width: none;
  }
}

/* ============================================================================
   CENTRING — HARD RULE
   Button rows and their supporting line sit on the page centreline, on every
   page, always. This is a global rule and not a per-page fix because that is
   exactly how it drifted: the hero row was centred earlier but `.hero .cta`
   was the selector, so the SECOND row further down every tool page kept
   flex's default `justify-content: normal` and hugged the left edge. Measured
   on /suno-shimmer-remover at 1440: buttons at 58..418, centre 238 against a
   page centre of 720, 482px out.

   `.hero .cta` is (0,2,0) and still wins where it sets something different
   (its row-gap of 0, its 32px top margin), so the hero keeps its exact ladder.
   ========================================================================= */
.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 16px;
  row-gap: 12px;
}

/* Inside an article the CTA is a card - a heading, a line of copy and a button
   row - not a bare row of buttons. Centre its contents rather than turning the
   card itself into a flex row. */
.art .cta {
  display: block;
  text-align: center;
}

.cta-row,
.art .cta .cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* A trailing legal or trademark note belongs under the block it qualifies,
   centred on the same line, not stranded against the left margin. */
.disclaimer {
  margin-inline: auto;
  text-align: center;
}

/* Article body copy is reading text: it must not be bundled with the 14px
   supporting-text sizes on a phone. The public scale puts body at 17px. */
@media (max-width: 768px) {
  html .art {
    font-size: 17px;
    line-height: 1.7;
  }
}