/* ============================================================================
   style.css - O With Accent generator UI.
   Consumes tokens from assets/css/site.css. Styles the hero, the generator
   console that sits directly beneath it, the glyph grid, the live converter,
   the favourites shelf and the printable reference sheet.
   ============================================================================ */

:root{
  /* How far the tool console rides up into the hero. The hero reserves the
     same amount as extra bottom padding, so the two always meet exactly. */
  --tool-lift:clamp(52px,8vw,104px);
}

/* ---------------------------------------------------------------------------
   1 . HERO
   --------------------------------------------------------------------------- */
.tool-hero{position:relative;background:var(--grad-deep);color:#fff;
  padding:clamp(38px,5.5vw,66px) 0 calc(var(--tool-lift) + clamp(34px,4vw,56px));
  overflow:hidden;isolation:isolate}
.tool-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:16px 16px;pointer-events:none;z-index:-1}
.tool-hero::after{content:"";position:absolute;left:50%;top:-22%;width:min(1100px,124%);height:560px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(201,53,75,.26),rgba(201,53,75,0) 68%);pointer-events:none;z-index:-1}
.tool-hero .wrap{position:relative;z-index:1}
.hero-copy{max-width:900px;margin-inline:auto;text-align:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:var(--r-pill);
  background:var(--on-dark-fill);border:1px solid var(--on-dark-line);color:#fff;font-weight:700;font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px;backdrop-filter:blur(4px)}
.hero-eyebrow svg{width:15px;height:15px;fill:none;stroke:#FF9BA9;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool-hero h1{color:#fff;font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.08;margin-bottom:18px;letter-spacing:-.025em}
/* The gradient wordmark needs a painted fallback: if background-clip:text is
   unsupported the transparent fill would leave the headline invisible. */
.tool-hero h1 .brand-keyword{color:#FF9BA9;background:linear-gradient(120deg,#FF9BA9,#F5808F 55%,#E2707E);
  -webkit-background-clip:text;background-clip:text}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tool-hero h1 .brand-keyword{-webkit-text-fill-color:transparent}
}
.hero-lead{color:var(--on-dark-soft);font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.66;max-width:66ch;margin:0 auto}
.hero-lead-link{color:#FFB9C3;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600}
.hero-lead-link:hover{color:#fff}

/* Trust row under the lead */
.hero-points{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin-top:22px;padding:0;list-style:none}
.hero-points li{display:inline-flex;align-items:center;gap:8px;color:var(--on-dark-mute);font-size:.88rem;font-weight:600}
.hero-points svg{width:16px;height:16px;fill:none;stroke:#FF9BA9;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Glyph strip under the title */
.hero-glyphs{display:flex;justify-content:center;gap:clamp(8px,2vw,18px);flex-wrap:wrap;margin:26px 0 4px}
.hero-glyphs span{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.5vw,2.4rem);color:rgba(255,255,255,.92);
  text-shadow:0 2px 14px rgba(201,53,75,.55);animation:floaty 4s var(--ease) infinite}
.hero-glyphs span:nth-child(2n){animation-delay:.4s;color:#FF9BA9}
.hero-glyphs span:nth-child(3n){animation-delay:.8s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------------------------------------------------------------------------
   2 . TOOL SECTION - sits directly below the hero copy and lifts into it
   --------------------------------------------------------------------------- */
.tool-section{position:relative;z-index:2;margin-top:calc(-1 * var(--tool-lift));
  padding:0 0 clamp(44px,6vw,80px);background:transparent}
.app-shell{position:relative;scroll-margin-top:calc(var(--header-h) + 18px)}
.gen-window{border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--sh-lg);border:1px solid var(--line);background:var(--surface)}
[data-theme="dark"] .gen-window{border-color:var(--line-2)}
.gen-window-bar{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--grad-deep);border-bottom:1px solid rgba(255,255,255,.09)}
.gw-dots{display:inline-flex;gap:6px;flex:none}
.gw-dots i{width:11px;height:11px;border-radius:50%;display:block}
.gw-dots i:nth-child(1){background:#F0576F}.gw-dots i:nth-child(2){background:#F5C451}.gw-dots i:nth-child(3){background:#43C59E}
.gw-title{color:var(--on-dark-mute);font-family:var(--mono);font-size:.8rem;flex:1;text-align:center;letter-spacing:.02em}
.gw-badge{display:inline-flex;align-items:center;gap:6px;color:var(--on-dark-soft);font-size:.77rem;font-weight:600;white-space:nowrap}
.gw-badge svg{width:15px;height:15px;fill:none;stroke:#5FD8B0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (max-width:700px){.gw-title{display:none}.gen-window-bar{justify-content:space-between}}

.gen-card{padding:clamp(20px,3vw,32px);background:var(--surface)}
.gen-input-zone{margin-bottom:24px}
.gen-label{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--heading);font-size:.98rem;margin-bottom:11px}
.gen-label svg{width:19px;height:19px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gen-search-row{display:flex;gap:10px;align-items:stretch}
.gen-search-row input{flex:1;min-width:0;padding:15px 17px;border-radius:var(--r-lg);border:1.5px solid var(--line-2);
  background:var(--surface-2);color:var(--text);font-size:1.02rem;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease)}
.gen-search-row input::placeholder{color:var(--text-mute);opacity:1}
.gen-search-row input:focus{outline:none;border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px var(--brand-050)}
[data-theme="dark"] .gen-search-row input:focus{box-shadow:0 0 0 4px var(--brand-100)}
.gen-clear{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 17px;border-radius:var(--r-lg);
  border:1.5px solid var(--line-2);background:var(--surface);color:var(--text-soft);cursor:pointer;font-weight:600;font-size:.88rem;
  white-space:nowrap;transition:all var(--t) var(--ease)}
.gen-clear:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-050)}
.gen-clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}
@media (max-width:520px){.gen-clear{padding:0 14px}.gen-clear span{display:none}}
.field-hint{font-size:.84rem;color:var(--text-mute);margin-top:10px;line-height:1.55}

/* Filter chips */
.gen-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{padding:8px 15px;border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:var(--surface);
  color:var(--text-soft);cursor:pointer;font-weight:600;font-size:.85rem;white-space:nowrap;transition:all var(--t) var(--ease)}
.chip:hover{border-color:var(--brand-300);color:var(--brand);background:var(--brand-050)}
.chip.is-on{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:var(--sh-brand)}
/* Keep filters on one discoverable horizontal rail on tablets and phones. */
@media (max-width:1024px){
  .gen-chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;
    scrollbar-width:thin;scrollbar-color:var(--brand-300) var(--surface-3);padding:2px 0 10px}
  .gen-chips::-webkit-scrollbar{height:6px}
  .gen-chips::-webkit-scrollbar-track{background:var(--surface-3);border-radius:var(--r-pill)}
  .gen-chips::-webkit-scrollbar-thumb{background:var(--brand-300);border-radius:var(--r-pill)}
  .chip{flex:none}
}
@media (max-width:600px){
  .gen-chips{margin-inline:calc(-1 * clamp(20px,3vw,32px));
    padding-inline:clamp(20px,3vw,32px);scroll-padding-inline:clamp(20px,3vw,32px)}
}

/* Glyph grid: four on desktop, two on tablets and one on phones. */
.gen-results{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px}
@media (max-width:1100px){.gen-results{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1024px){.gen-results{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.gen-results{grid-template-columns:1fr}}

.glyph-card{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 15px 15px;display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t),background var(--t)}
.glyph-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--brand-200);background:var(--surface)}
.glyph-fav{position:absolute;top:7px;right:7px;width:34px;height:34px;border-radius:9px;border:none;background:transparent;
  cursor:pointer;display:grid;place-items:center;color:var(--silver);transition:color var(--t),transform var(--t) var(--spring)}
.glyph-fav svg{width:19px;height:19px;fill:currentColor}
.glyph-fav:hover{color:var(--brand-400);transform:scale(1.12)}
.glyph-fav.is-on{color:var(--gold-500)}
.glyph-glyph{font-family:var(--serif);font-weight:700;font-size:2.7rem;line-height:1;color:var(--brand);margin:8px 0 12px}
.glyph-name{font-size:.87rem;font-weight:600;color:var(--heading);margin-bottom:12px;min-height:2.4em;
  display:flex;align-items:center;line-height:1.35;letter-spacing:-.005em}
.glyph-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;width:100%;text-align:left;font-size:.76rem;margin-bottom:14px}
.glyph-meta dt{color:var(--text-mute);font-weight:600}
.glyph-meta dd{color:var(--text);font-family:var(--mono);font-size:.75rem;overflow-wrap:anywhere;margin:0}
.glyph-meta dd .muted{color:var(--text-mute);font-family:var(--font)}
.glyph-actions{display:flex;gap:7px;width:100%;margin-top:auto}
.glyph-copy{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px;
  border-radius:var(--r-md);border:none;background:var(--grad-brand);color:#fff;cursor:pointer;font-weight:700;font-size:.84rem;
  transition:transform var(--t) var(--spring),filter var(--t),background var(--t)}
.glyph-copy:hover{transform:translateY(-1px);filter:brightness(1.06)}
.glyph-copy.copied{background:var(--ok);filter:none}
.glyph-copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.glyph-copy-alt{padding:10px 13px;border-radius:var(--r-md);border:1.5px solid var(--line-2);background:var(--surface);
  color:var(--text-soft);cursor:pointer;font-weight:700;font-size:.76rem;font-family:var(--mono);letter-spacing:.02em;
  transition:all var(--t) var(--ease)}
.glyph-copy-alt:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-050)}

/* More bar */
.gen-more{text-align:center;margin-top:26px}
.gen-more-note{color:var(--text-mute);font-size:.88rem;margin-bottom:15px}
.gen-more-note b{color:var(--text);font-family:var(--mono)}
#owaToggleAll{margin-inline:auto}
#owaToggleAll .ico-less{display:none}
#owaToggleAll[aria-expanded="true"] .ico-more{display:none}
#owaToggleAll[aria-expanded="true"] .ico-less{display:block}
@media (max-width:420px){#owaToggleAll{width:100%}}

/* Stat strip beneath the console */
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:22px;text-align:center;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm)}
.hero-stat{background:var(--surface);padding:18px 12px}
.hero-stat b{display:block;font-family:var(--mono);font-size:clamp(1.2rem,3vw,1.55rem);font-weight:700;color:var(--brand);line-height:1.2}
.hero-stat span{display:block;font-size:.8rem;color:var(--text-soft);letter-spacing:.02em;margin-top:4px;font-weight:600}

/* ---------------------------------------------------------------------------
   3 . FAVOURITES SHELF
   --------------------------------------------------------------------------- */
.fav-shell{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(20px,2.4vw,24px);box-shadow:var(--sh-sm)}
.fav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.fav-head h2{display:inline-flex;align-items:center;gap:9px;font-size:1.06rem;color:var(--heading)}
.fav-head h2 svg{width:20px;height:20px;fill:var(--gold-500);stroke:none;flex:none}
.fav-clear{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-pill);border:1.5px solid var(--line-2);
  background:var(--surface);color:var(--text-soft);cursor:pointer;font-weight:600;font-size:.83rem;transition:all var(--t) var(--ease)}
.fav-clear:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-050)}
.fav-clear svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fav-empty{color:var(--text-mute);font-size:.92rem}
.fav-list{display:flex;gap:10px;flex-wrap:wrap}
.fav-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--surface-2);cursor:pointer;transition:all var(--t) var(--ease)}
.fav-chip:hover{border-color:var(--brand);background:var(--brand-050);transform:translateY(-2px)}
.fav-glyph{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--brand);line-height:1}
.fav-name{font-size:.83rem;color:var(--text-soft);font-weight:600}

/* ---------------------------------------------------------------------------
   4 . LIVE CONVERTER
   --------------------------------------------------------------------------- */
.convert-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);
  padding:clamp(22px,3vw,34px);box-shadow:var(--sh-sm);max-width:840px;margin:0 auto}
.convert-row{display:grid;grid-template-columns:1fr minmax(200px,auto);gap:14px;align-items:end;margin-bottom:16px}
@media (max-width:600px){.convert-row{grid-template-columns:1fr}}
.convert-field label{display:block;font-weight:700;color:var(--heading);font-size:.92rem;margin-bottom:9px}
.convert-field input,.convert-field select{width:100%;padding:14px 16px;border-radius:var(--r-lg);border:1.5px solid var(--line-2);
  background:var(--surface-2);color:var(--text);font-size:1rem;font-family:inherit;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.convert-field select{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:42px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(50% + 2px),calc(100% - 16px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.convert-field input:focus,.convert-field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-050)}
[data-theme="dark"] .convert-field input:focus,[data-theme="dark"] .convert-field select:focus{box-shadow:0 0 0 4px var(--brand-100)}
.convert-out-wrap{display:flex;gap:12px;align-items:stretch;margin-top:8px}
@media (max-width:560px){.convert-out-wrap{flex-direction:column}}
.convert-out{flex:1;min-width:0;min-height:60px;padding:15px 18px;border-radius:var(--r-lg);border:1.5px dashed var(--line-2);
  background:var(--surface-2);font-size:1.3rem;color:var(--text);display:flex;align-items:center;overflow-wrap:anywhere}
.convert-out.is-placeholder{color:var(--text-mute);font-size:1rem;font-style:italic}
.convert-copy{padding:14px 22px;border-radius:var(--r-lg);border:none;background:var(--grad-brand);color:#fff;cursor:pointer;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--sh-brand);
  transition:transform var(--t) var(--spring),filter var(--t)}
.convert-copy:hover{transform:translateY(-2px);filter:brightness(1.05)}
.convert-copy svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------------------------------------------------------------------------
   5 . PRINT PANEL
   --------------------------------------------------------------------------- */
.print-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);
  padding:clamp(22px,3vw,32px);box-shadow:var(--sh-sm);max-width:840px;margin:0 auto}
.print-head{display:flex;gap:15px;align-items:flex-start;margin-bottom:22px}
.p-ico{width:50px;height:50px;border-radius:var(--r-lg);background:var(--brand-050);display:grid;place-items:center;flex:none}
.p-ico svg{width:24px;height:24px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.print-head h3{font-size:1.16rem;margin-bottom:5px}
.print-head p{color:var(--text-soft);font-size:.92rem;line-height:1.6}
.print-fieldset{border:none;padding:0;margin:0 0 22px;min-width:0}
.print-legend{font-weight:700;color:var(--heading);font-size:.93rem;margin-bottom:12px;padding:0}
.print-opts{display:flex;gap:10px;flex-wrap:wrap}
.print-opt{display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border-radius:var(--r-lg);border:1.5px solid var(--line-2);
  background:var(--surface-2);color:var(--text-soft);cursor:pointer;font-weight:600;font-size:.88rem;transition:all var(--t) var(--ease)}
.print-opt svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.print-opt:hover{border-color:var(--brand-300);color:var(--brand);background:var(--brand-050)}
.print-opt.is-on{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:var(--sh-brand)}
.print-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.print-summary{color:var(--text-mute);font-size:.89rem;margin:0}
@media (max-width:480px){
  .print-opt{flex:1 1 calc(50% - 5px);justify-content:center}
  .print-actions .btn{width:100%}
  .print-summary{width:100%;text-align:center}
}

/* Print sheet (hidden until printing).
   The page is only swapped for the reference sheet while .printing-sheet is on
   the body, which script.js sets around its own window.print() call. Without
   that gate an ordinary Ctrl+P would print a blank page, because the sheet has
   no content until the Print Reference Sheet button builds it. */
.print-sheet{display:none}
@media print{
  body.printing-sheet>*{display:none!important}
  body.printing-sheet .print-sheet{display:block!important;position:static;color:#000;background:#fff;padding:0;font-family:var(--serif)}
  .print-sheet h1{font-size:22pt;margin-bottom:4pt;color:#000}
  .print-sheet .ps-sub{font-size:10pt;color:#444;margin-bottom:16pt}
  .print-sheet table{width:100%;border-collapse:collapse;font-size:10pt}
  .print-sheet th,.print-sheet td{border:1px solid #999;padding:5pt 8pt;text-align:left}
  .print-sheet th{background:#eee}
  .print-sheet .ps-glyph{font-size:18pt;font-weight:700;text-align:center}
}

/* Showcase strip on home */
.glyph-showcase{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media (max-width:900px){.glyph-showcase{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.glyph-showcase{grid-template-columns:repeat(3,1fr)}}
.showcase-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 10px;text-align:center;
  box-shadow:var(--sh-sm);transition:transform var(--t) var(--ease),border-color var(--t)}
.showcase-tile:hover{transform:translateY(-3px);border-color:var(--brand-200)}
.showcase-tile .st-glyph{font-family:var(--serif);font-weight:700;font-size:2rem;color:var(--brand);line-height:1}
.showcase-tile .st-name{font-size:.74rem;color:var(--text-mute);margin-top:6px;font-weight:600}
.showcase-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---------------------------------------------------------------------------
   6 . Small screens
   --------------------------------------------------------------------------- */
@media (max-width:640px){
  /* The console loses its lift on phones: overlapping a full width card into
     the hero leaves too little breathing room above the search field. */
  :root{--tool-lift:34px}
  .hero-glyphs{gap:10px;margin-top:22px}
  .hero-points{gap:8px 16px}
  .hero-stat{padding:15px 8px}
  .hero-stat span{font-size:.74rem;line-height:1.35}
}
/* Preserve comfortable card proportions in the phone's single-column grid. */
@media (max-width:460px){
  .glyph-card{padding:20px 16px 16px}
  .glyph-name{min-height:0}
}
/* Stack the compact stat strip where three cells become too narrow. */
@media (max-width:400px){
  .hero-stats{grid-template-columns:1fr}
  .hero-stat{display:flex;align-items:baseline;justify-content:center;gap:10px;padding:13px}
  .hero-stat span{margin-top:0}
}
@media (max-width:359px){
  .glyph-actions{flex-direction:column}
  .glyph-copy-alt{width:100%}
}