/* ============================================================================
   FRAME — generator visual system (Phase 3B)
   Shared by the homepage and the 12 dedicated generator pages, loaded after
   every older stylesheet. Extracted from the approved Phase 3A homepage
   prototype; homepage-only marketing styles stay in home-premium.css.

   Scope: #generator — the <section class="hero" id="generator"> that wraps
   the page intro and the tool on all 13 pages. The id also gives these rules
   the specificity to override the older !important layers without touching
   them. The header sits outside the section and is reached with
   body:has(#generator). Article content below the tool is not styled here.

   Visual only: no layout logic, no QR rendering, no motion. The canvas is
   never styled; Phase 1 motion and Phase 2 interactions run on top.

   System
     accent   orange #DC9128 fill + near-black text (7.2:1) = primary action
              deep amber #B06E10 = focus, selected borders, open state (4.2:1)
              dark amber #7A4A08 = active text (6.4:1 on its tint)
     neutrals one warm grey family
     radius   6px controls · 10px grouped surfaces · 16px the workspace
     shadow   workspace (subtle) · menus (practical) · nothing else
     type     section title 16/600 · control 14/600 · label 13/600 ·
              helper/micro 12.5
   ========================================================================= */

:root{
  --fr-accent:#DC9128;
  --fr-accent-strong:#B06E10;
  --fr-accent-hover:#C98220;
  --fr-accent-ink:#7A4A08;
  --fr-accent-soft:#FBF3E4;
  --fr-ring:rgba(220,145,40,.28);
  --fr-ink:#16181D;
  --fr-ink-2:#4A4F57;
  --fr-dim:#6B6F76;
  --fr-line:#E8E6E1;
  --fr-line-strong:#D3CFC7;
  --fr-line-soft:#F0EEEA;
  --fr-hover:#F3F1EC;
  --fr-stage:#F7F6F3;
  --fr-r-sm:6px;--fr-r-md:10px;--fr-r-lg:16px;
}
/* the older shared tokens, remapped for the intro + tool only */
#generator{
  --accent:var(--fr-accent-strong);
  --accent-soft:var(--fr-accent-soft);
  --ink:var(--fr-ink);--ink-soft:var(--fr-ink-2);--ink-dim:var(--fr-dim);
  --border:var(--fr-line);--border-soft:var(--fr-line-soft);
  --ws-ink:var(--fr-ink);--ws-ink-2:var(--fr-ink-2);--ws-dim:var(--fr-dim);
  --ws-line:var(--fr-line);--ws-line-strong:var(--fr-line-strong);
  --ws-surface:var(--fr-stage);--ws-mist:var(--fr-stage);--ws-hover:var(--fr-hover);
  --ws-teal:var(--fr-ink);
}

/* ------------------------------------------------------------- 1. header */
body:has(#generator) .nav .nav-links a,body:has(#generator) .nav .nav-drop-btn{color:var(--fr-ink-2)!important;}
body:has(#generator) .nav .nav-links a:hover,body:has(#generator) .nav .nav-drop-btn:hover{color:var(--fr-ink)!important;}
body:has(#generator) .nav .nav-links a::after,body:has(#generator) .nav .nav-drop-btn::after{background:var(--fr-ink)!important;}
body:has(#generator) .nav .brand{color:var(--fr-ink)!important;}
body:has(#generator) .nav .brand-mark{background:var(--fr-ink)!important;}
body:has(#generator) .nav .brand-mark::after{background:#C98A1C!important;}
/* the header CTA is secondary to Download: quiet ink, never a second accent */
body:has(#generator) .nav .nav-cta{background:var(--fr-ink)!important;box-shadow:none!important;}
body:has(#generator) .nav .nav-cta:hover{background:#000!important;}
body:has(#generator) .nav{border-bottom-color:transparent!important;}

/* --------------------------------------------------------------- 2. hero */
/* neutral band instead of the teal/blue wash (Phase 1 still fades it) */
#generator::before{background:linear-gradient(180deg,#F6F4EF 0,#FAF9F6 55%,#FFFFFF 100%)!important;}
#generator .hero-head .eyebrow{
  background:none!important;border:0!important;padding:0!important;border-radius:0!important;
  font-size:13px!important;font-weight:500!important;color:var(--fr-dim)!important;letter-spacing:0!important;
}
#generator .hero-head .eyebrow::before,#generator .hero-head .eyebrow::after{display:none!important;}
#generator .hero-head h1{color:var(--fr-ink)!important;letter-spacing:-.025em;}
#generator .hero-head .hero-tagline{color:var(--fr-ink-2)!important;font-weight:600!important;}
#generator .hero-head .hero-tagline .accent{color:inherit!important;}
#generator .hero-head > p{color:var(--fr-ink-2)!important;max-width:600px;}
/* the three badges repeat the eyebrow line (and the trust strip below) */
#generator .hero-badges{display:none!important;}
#generator .hero-head{margin-bottom:30px!important;}
@media (max-width:900px){#generator .hero-head{margin-bottom:22px!important;}}

/* ---------------------------------------------- 3. workspace: one surface */
#generator .studio{
  border:1px solid var(--fr-line)!important;border-radius:var(--fr-r-lg)!important;
  box-shadow:0 1px 2px rgba(22,24,29,.04),0 18px 40px -28px rgba(22,24,29,.22)!important;
  background:#fff!important;
}
#generator .type-toolbar{border-radius:var(--fr-r-lg) var(--fr-r-lg) 0 0!important;border-bottom:1px solid var(--fr-line)!important;}
@media (min-width:901px){
  /* the stage tint separates the columns — no extra divider lines */
  #generator .controls,#generator .customize{border-right:0!important;}
  /* the taller preview column used to stretch BOTH left rows, opening an
     empty band under the fields; the customise row now takes the slack */
  #generator .studio{grid-template-rows:auto auto 1fr!important;}
  /* the preview column is sticky (content height), so its own tint stopped
     short whenever customise ran longer. The surface carries the stage tone;
     the left column paints itself white. */
  #generator .studio{background:var(--fr-stage)!important;}
  #generator .controls{background:#fff!important;}
  #generator .customize{align-self:stretch!important;}
  #generator .customize{border-radius:0 0 0 var(--fr-r-lg)!important;}
  #generator .preview{border-radius:0 0 var(--fr-r-lg) 0!important;background:var(--fr-stage)!important;}
}
@media (max-width:900px){
  #generator .preview{background:var(--fr-stage)!important;border-top:1px solid var(--fr-line)!important;border-bottom:1px solid var(--fr-line)!important;}
  #generator .customize{border-radius:0 0 var(--fr-r-lg) var(--fr-r-lg)!important;}
  /* the preview's bottom line already separates; no second rule under it */
  #generator .customize .cz-head{border-top:0!important;}
  /* the note was indented for the old 22px number chip */
  #generator .cz-head-note{margin-left:0!important;}
}

/* ------------------------------------------------- 4. QR type navigation */
#generator #typeToolbar .type-tab{
  font-size:13px!important;font-weight:500!important;color:var(--fr-dim)!important;
  border-radius:var(--fr-r-sm)!important;
}
#generator #typeToolbar .type-tab .type-tab-ico{opacity:.7;}
#generator #typeToolbar .type-tab:hover{background:var(--fr-hover)!important;color:var(--fr-ink)!important;}
#generator #typeToolbar .type-tab.active{color:var(--fr-accent-ink)!important;font-weight:600!important;}
#generator #typeToolbar .type-tab.active .type-tab-ico{opacity:1;}
#generator .type-tab-pill{background:var(--fr-accent-soft)!important;border:0!important;border-radius:var(--fr-r-sm)!important;}
/* "More" reads as a menu trigger by its caret, not by a box */
#generator #typeToolbar .type-tab-more{border-color:transparent!important;color:var(--fr-ink)!important;}
#generator #typeToolbar.open .type-tab-more{background:var(--fr-hover)!important;}
#generator .type-more-menu{
  border-color:var(--fr-line)!important;border-radius:var(--fr-r-md)!important;
  box-shadow:0 14px 32px -12px rgba(22,24,29,.22),0 2px 6px rgba(22,24,29,.06)!important;
}
#generator .type-more-item{border-radius:var(--fr-r-sm)!important;}
#generator .type-more-item:hover{border-color:transparent!important;background:var(--fr-hover)!important;}
/* the active type, when it lives in the menu (Telegram, Spotify, Facebook...) */
#generator .type-more-item.active{border-color:transparent!important;background:var(--fr-accent-soft)!important;color:var(--fr-accent-ink)!important;}
/* mobile: the row scrolls locally — a soft edge says "there is more" */
@media (max-width:900px){
  #generator #typeToolbar .type-tabs{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    scroll-padding-inline:18px;
  }
}

/* ----------------------------------------------------- 5. content inputs */
#generator .step-head{font-size:16px!important;font-weight:600!important;color:var(--fr-ink)!important;gap:9px!important;}
#generator .step-num{
  width:auto!important;height:auto!important;background:none!important;border-radius:0!important;
  color:var(--fr-dim)!important;font-size:13px!important;font-weight:600!important;
}
#generator .now-creating{font-size:12.5px!important;color:var(--fr-dim)!important;margin-bottom:14px!important;}
#generator .now-creating strong{color:var(--fr-ink-2)!important;font-weight:600!important;}
#generator .controls .field > label,#generator .cz-body .field > label,#generator .range-row > label,
#generator .res-label{font-size:13px!important;font-weight:600!important;color:var(--fr-ink)!important;margin-bottom:6px!important;}
#generator .controls input[type="text"],#generator .controls input[type="url"],#generator .controls input[type="email"],
#generator .controls input[type="tel"],#generator .controls input[type="number"],#generator .controls input[type="date"],
#generator .controls input[type="time"],#generator .controls textarea,#generator .controls select,
#generator .cz-body input[type="text"],#generator .cz-body input[type="url"],#generator .cz-body select,#generator .res-select{
  border:1px solid var(--fr-line-strong)!important;border-radius:var(--fr-r-sm)!important;
  box-shadow:none!important;background:#fff!important;color:var(--fr-ink)!important;
}
#generator .controls input:hover,#generator .controls select:hover,#generator .controls textarea:hover,
#generator .cz-body input[type="text"]:hover,#generator .cz-body select:hover,#generator .res-select:hover{border-color:#B9B4AA!important;}
#generator .controls input:focus,#generator .controls select:focus,#generator .controls textarea:focus,
#generator .cz-body input:focus,#generator .cz-body select:focus,#generator .res-select:focus{
  border-color:var(--fr-accent-strong)!important;box-shadow:0 0 0 3px var(--fr-ring)!important;
}
#generator .controls .field-hint,#generator .controls .hint,#generator .range-note{font-size:12.5px!important;color:var(--fr-dim)!important;}

/* ------------------------------------------------- 6. customise: optional */
#generator .cz-head{
  font-size:16px!important;font-weight:600!important;color:var(--fr-ink)!important;
  border-top:1px solid var(--fr-line)!important;padding:22px 0 6px!important;
}
#generator .cz-head-note{color:var(--fr-dim)!important;}
/* one hairline between rows (the heading above already draws the first) */
#generator .cz{border-top:0!important;}
#generator .cz + .cz{border-top:1px solid var(--fr-line-soft)!important;}
#generator .cz:last-of-type{border-bottom:0!important;}
#generator .cz > summary{min-height:54px!important;border-radius:var(--fr-r-sm)!important;}
#generator .cz > summary:focus-visible{outline-color:var(--fr-accent-strong)!important;border-radius:var(--fr-r-sm)!important;}
/* icons stay as quiet glyphs — no tile behind each one */
#generator .cz-icon{background:none!important;color:var(--fr-dim)!important;width:22px!important;}
#generator .cz > summary{grid-template-columns:22px minmax(0,1fr) 22px!important;}
#generator .cz[open]:not(.is-closing) > summary .cz-icon{background:none!important;color:var(--fr-accent-strong)!important;}
#generator .cz-title{font-family:'Inter',sans-serif!important;font-size:14px!important;font-weight:600!important;color:var(--fr-ink)!important;}
#generator .cz-hint{font-size:12.5px!important;color:var(--fr-dim)!important;}
/* advanced settings are visibly the least important row */
#generator .cz[data-cz="advanced"] .cz-title{font-weight:500!important;color:var(--fr-ink-2)!important;}

/* controls inside the panels: quiet at rest, one accent when selected */
/* (#fieldsHost .type-tab = Location's Address/Coordinates/Map-link and
   Image's upload/link mode tabs; #templateCats = the design gallery below
   the tool, which applies designs to the generator on every page) */
#generator .style-tab,#generator .quick-cat,#generator .shape-btn,#generator .frame-btn,
#generator #fieldsHost .type-tab,
body:has(#generator) #templateCats .type-tab{border-radius:var(--fr-r-sm)!important;border-color:var(--fr-line-strong)!important;color:var(--fr-ink-2)!important;}
#generator .style-tab.active,#generator .quick-cat.active,#generator .shape-btn.active,#generator .frame-btn.active,
#generator #fieldsHost .type-tab.active,
body:has(#generator) #templateCats .type-tab.active{
  background:var(--fr-accent-soft)!important;border-color:var(--fr-accent-strong)!important;color:var(--fr-accent-ink)!important;font-weight:600!important;
}
#generator .quick-swatch,#generator .social-logo-btn{border-radius:var(--fr-r-sm)!important;}
#generator .logo-zone{border-radius:var(--fr-r-md)!important;border-color:var(--fr-line-strong)!important;background:#fff!important;}
#generator .swatch-item input[type="color"]{border-radius:var(--fr-r-sm)!important;}

/* ----------------------------------------------------- 7. preview stage */
/* the tile is the QR's own white ground on the neutral stage — no card,
   border or shadow around it. The canvas itself is untouched. */
#generator .preview .frame{
  border:0!important;box-shadow:none!important;border-radius:var(--fr-r-md)!important;background:#fff!important;
}
#generator .preview .frame-inner{border-radius:var(--fr-r-sm)!important;}
#generator .qr-fx-ring{box-shadow:0 0 0 3px var(--fr-ring)!important;}
#generator .studio.qr-empty .qr-empty-state span{color:var(--fr-dim)!important;}

/* --------------------------------------------------------- 8. download */
#generator .preview .download-btn{
  min-height:46px!important;border-radius:var(--fr-r-sm)!important;
  background:var(--fr-accent)!important;color:#160F04!important;box-shadow:none!important;
  font-size:15px!important;font-weight:600!important;
}
#generator .preview .download-btn:hover{background:var(--fr-accent-hover)!important;box-shadow:none!important;}
#generator .preview .download-btn:focus-visible{outline:2px solid var(--fr-accent-strong)!important;outline-offset:2px;}
/* Phase 2 progress line: same behaviour, ink instead of teal so it reads on orange */
#generator .preview .download-btn::after{background:rgba(22,15,4,.55)!important;}
/* before a valid code: present but clearly not the next step */
#generator .studio.qr-empty .preview .download-btn{
  background:#fff!important;color:var(--fr-dim)!important;border:1px solid var(--fr-line-strong)!important;
}
#generator .studio.qr-empty .preview .download-btn:hover{background:#fff!important;}
/* one quiet status line under Download; the decorative repeat goes */
#generator .preview .download-btn + .preview-note{border-top:0!important;padding-top:2px!important;}
#generator .preview .download-btn ~ .preview-note + .preview-note{display:none!important;}

/* per-type "Generate" buttons (Google Form, Google Review, Spotify,
   Telegram): primary only while no code exists, then a quiet secondary */
#generator #fieldsHost .generate-btn{
  background:#fff!important;color:var(--fr-ink)!important;border:1px solid var(--fr-line-strong)!important;
  border-radius:var(--fr-r-sm)!important;box-shadow:none!important;font-weight:600!important;
}
#generator #fieldsHost .generate-btn:hover{border-color:#B9B4AA!important;background:#fff!important;}
#generator .studio.qr-empty #fieldsHost .generate-btn{
  background:var(--fr-accent)!important;color:#160F04!important;border-color:var(--fr-accent)!important;
}
#generator .studio.qr-empty #fieldsHost .generate-btn:hover{background:var(--fr-accent-hover)!important;border-color:var(--fr-accent-hover)!important;}
#generator #fieldsHost .generate-btn:focus-visible{outline:2px solid var(--fr-accent-strong)!important;outline-offset:2px;}

/* breadcrumbs above the intro on dedicated pages: neutral, not teal */
body:has(#generator) .crumbs{color:var(--fr-dim)!important;}
body:has(#generator) .crumbs a{color:var(--fr-ink-2)!important;}
body:has(#generator) .crumbs a:hover{color:var(--fr-ink)!important;}
body:has(#generator) .crumbs [aria-current]{color:var(--fr-ink)!important;}
body:has(#generator) .crumbs span{color:#B9B4AA!important;}

body:has(#generator) .mobile-menu-cta{background:var(--fr-accent)!important;color:#160F04!important;}

/* -------------------------------------------------------- motion safety */
@media (prefers-reduced-motion:reduce){
  #generator .preview .download-btn,#generator .type-tab-pill{transition:none!important;}
}