/* JJ FORMAT KIT — layout layers per chosen format. v2 2026-11-14 (welcome voice)
   Per-site accents via CSS vars: --fmt-accent, --fmt-bg, --fmt-ink (set in format-site.css). */
:root{ --fmt-accent:#b08d3e; --fmt-bg:#0e0e10; --fmt-ink:#f4efe6; }

/* ---------- Welcome gate ---------- */
#fmt-gate{ position:fixed; inset:0; z-index:99990; display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,8,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:1; transition:opacity .4s ease; padding:18px; }
#fmt-gate.fmt-hide{ opacity:0; pointer-events:none; }
#fmt-gate .fmt-card{ width:min(560px,94vw); max-height:92vh; overflow:auto; text-align:center;
  background:var(--fmt-bg); color:var(--fmt-ink); border:1px solid var(--fmt-accent);
  border-radius:18px; padding:34px 30px 28px; box-shadow:0 30px 80px rgba(0,0,0,.55);
  font-family:Georgia,'Times New Roman',serif; }
#fmt-gate .fmt-brand{ font-size:clamp(22px,4.5vw,32px); letter-spacing:.04em; color:var(--fmt-accent); margin-bottom:10px; }
#fmt-gate .fmt-q{ font-size:clamp(18px,3.4vw,23px); margin-bottom:6px; }
#fmt-gate .fmt-sub{ font-size:14.5px; opacity:.78; margin-bottom:22px; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; }
#fmt-gate .fmt-opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ #fmt-gate .fmt-opts{ grid-template-columns:1fr; } }
#fmt-gate .fmt-opt{ appearance:none; cursor:pointer; text-align:left; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.05); color:var(--fmt-ink); border-radius:12px; padding:14px 16px;
  transition:border-color .2s, background .2s, transform .2s; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; }
#fmt-gate .fmt-opt:hover,#fmt-gate .fmt-opt:focus-visible{ border-color:var(--fmt-accent); background:rgba(255,255,255,.1); transform:translateY(-1px); outline:none; }
#fmt-gate .fmt-opt-name{ display:block; font-size:17px; font-weight:600; }
#fmt-gate .fmt-opt-sub{ display:block; font-size:12.5px; opacity:.72; margin-top:3px; }

/* ---------- Welcome voice controls ---------- */
#fmt-gate .fmt-greet{ font-size:15.5px; line-height:1.5; opacity:.92; margin:0 auto 14px; max-width:46ch; }
#fmt-gate .fmt-voice{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:22px; }
#fmt-gate .fmt-hear{ appearance:none; cursor:pointer; border:1px solid var(--fmt-accent); color:var(--fmt-accent);
  background:transparent; border-radius:999px; padding:9px 18px; font-size:14px; letter-spacing:.02em;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif; transition:background .2s,color .2s; }
#fmt-gate .fmt-hear:hover,#fmt-gate .fmt-hear:focus-visible{ background:var(--fmt-accent); color:var(--fmt-bg); outline:none; }
#fmt-gate .fmt-mute{ appearance:none; cursor:pointer; border:1px solid rgba(255,255,255,.25); color:var(--fmt-ink);
  background:rgba(255,255,255,.05); border-radius:50%; width:38px; height:38px; font-size:16px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:border-color .2s; }
#fmt-gate .fmt-mute:hover,#fmt-gate .fmt-mute:focus-visible{ border-color:var(--fmt-accent); outline:none; }

/* ---------- Format switcher ---------- */
#fmt-switch{ cursor:pointer; font:inherit; }
#fmt-switch.fmt-switch-pill{ position:fixed; left:50%; transform:translateX(-50%); bottom:10px; z-index:9990;
  background:rgba(10,10,12,.82); color:#eee; border:1px solid rgba(255,255,255,.25); border-radius:999px;
  padding:6px 14px; font-size:12.5px; font-family:system-ui,sans-serif; }
#fmt-switch.fmt-switch-infoot{ display:inline-block; margin:10px auto; background:none; border:none;
  color:inherit; opacity:.75; text-decoration:underline; font-size:13px; }

/* ---------- MOBILE format: phone column, single stack, big tap targets ---------- */
html[data-fmt="mobile"] body{ max-width:480px; margin-left:auto; margin-right:auto; }
html[data-fmt="mobile"] [class*="grid"],html[data-fmt="mobile"] [class*="cards"],
html[data-fmt="mobile"] [class*="cols"],html[data-fmt="mobile"] [class*="tiles"],
html[data-fmt="mobile"] [class*="wall"]{ grid-template-columns:1fr !important; }
html[data-fmt="mobile"] img,html[data-fmt="mobile"] video{ max-width:100%; height:auto; }
html[data-fmt="mobile"] a,html[data-fmt="mobile"] button{ min-height:44px; }
html[data-fmt="mobile"]{ font-size:17px; }

/* ---------- TABLET format: mid column, two-up ---------- */
html[data-fmt="tablet"] body{ max-width:900px; margin-left:auto; margin-right:auto; }
html[data-fmt="tablet"] [class*="grid"],html[data-fmt="tablet"] [class*="cards"],
html[data-fmt="tablet"] [class*="cols"],html[data-fmt="tablet"] [class*="tiles"],
html[data-fmt="tablet"] [class*="wall"]{ grid-template-columns:repeat(2,1fr) !important; }
html[data-fmt="tablet"] img,html[data-fmt="tablet"] video{ max-width:100%; height:auto; }
html[data-fmt="tablet"] a,html[data-fmt="tablet"] button{ min-height:42px; }

/* ---------- COMPUTER (Windows/desktop) format ---------- */
html[data-fmt="pc"] body{ font-family:'Segoe UI',system-ui,Tahoma,sans-serif; }
html[data-fmt="pc"] ::-webkit-scrollbar{ width:12px; }
html[data-fmt="pc"] ::-webkit-scrollbar-thumb{ background:var(--fmt-accent); border-radius:6px; }

/* ---------- MAC format ---------- */
html[data-fmt="mac"] body{ font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
  -webkit-font-smoothing:antialiased; }
html[data-fmt="mac"] ::-webkit-scrollbar{ width:10px; }
html[data-fmt="mac"] ::-webkit-scrollbar-thumb{ background:rgba(140,140,150,.55); border-radius:5px; }

/* ---------- Floating-button discipline (JJ spec 2026-11-14) ----------
   Emergency float: SMALL, fixed TOP-LEFT. Assistant launcher: SMALL, fixed BOTTOM-RIGHT. */
html[data-fmt] .fmt-emergency-float{ position:fixed !important; top:12px !important; left:12px !important;
  right:auto !important; bottom:auto !important; z-index:9995 !important;
  width:auto !important; height:auto !important; max-width:46vw;
  padding:8px 13px !important; font-size:13.5px !important; line-height:1.15 !important; border-radius:999px !important; }
html[data-fmt] .fmt-assistant-float{ position:fixed !important; bottom:14px !important; right:14px !important;
  top:auto !important; left:auto !important; z-index:9995 !important;
  width:54px !important; height:54px !important; max-width:54px; border-radius:50% !important; overflow:hidden; }
html[data-fmt] .fmt-assistant-float img{ width:100% !important; height:100% !important; object-fit:cover; }

/* ---------- Animated logo (JJ 2026-11-14): subtle gleam, artwork never distorts ---------- */
@keyframes fmtGleam{ 0%,100%{ filter:brightness(1) drop-shadow(0 0 0 rgba(255,215,130,0)); }
  50%{ filter:brightness(1.13) drop-shadow(0 0 7px rgba(255,215,130,.35)); } }
html[data-fmt] img.fmt-logo,
html[data-fmt] .fmt-logo img,
html[data-fmt] header img[class*="logo"],html[data-fmt] footer img[class*="logo"],html[data-fmt] img.brand-emblem,html[data-fmt] img.brand-logo,
html[data-fmt] [class*="logo"]>img,html[data-fmt] a[class*="brand"]>img,
html[data-fmt] .brand-link img,html[data-fmt] .site-logo img{
  animation:fmtGleam 5.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  html[data-fmt] img.fmt-logo,html[data-fmt] .fmt-logo img,
  html[data-fmt] header img[class*="logo"],html[data-fmt] footer img[class*="logo"],html[data-fmt] img.brand-emblem,html[data-fmt] img.brand-logo,
  html[data-fmt] [class*="logo"]>img,html[data-fmt] a[class*="brand"]>img,
  html[data-fmt] .brand-link img,html[data-fmt] .site-logo img{ animation:none; } }