/* LMH Tools shared stylesheet. Added 2026-10-01. */
/* LMH Tools: shared phone header (390px). Added 2026-10-01. One row, no sideways scroll, 44px targets. */
@media (max-width:640px){
  html,body{max-width:100%;}
  body > header, header.topbar{flex-wrap:nowrap!important;gap:8px!important;padding-left:16px!important;padding-right:16px!important;min-width:0;}
  body > header .lmh-beta, header.topbar .lmh-beta,
  body > header .divider, body > header .nav-div, header.topbar .topbar-divider,
  body > header .nav-lmh, header.topbar .logo, body > header .brand > svg:first-of-type,
  body > header .n-web{display:none!important;}
  body > header .hleft, body > header .brand, header.topbar .pw-lock, body > header .nav-wm{min-width:0;flex-shrink:1;}
  body > header .header-actions, body > header .n-actions{gap:6px!important;flex-shrink:0;margin-left:auto;}
  /* text buttons collapse to their icon; the label stays as the accessible name */
  body > header .header-actions .btn, header.topbar .tbtn, body > header .btn-pdf, body > header .htr-launch{font-size:0!important;gap:0!important;padding:0!important;width:44px;height:44px;justify-content:center;flex-shrink:0;}
  body > header .htr-launch-lbl{display:none;}
  body > header .header-actions .btn svg, header.topbar .tbtn svg, body > header .btn-pdf svg, body > header .htr-launch svg{width:18px!important;height:18px!important;margin:0!important;}
  body > header .icon-btn, body > header .iconbtn, header.topbar .theme-orb, .lmh-share-btn, body > header .lmh-suite-back{min-width:44px;min-height:44px;}
  .lmh-share-pop, .share-pop{position:fixed!important;left:16px!important;right:16px!important;top:64px!important;width:auto!important;max-width:none!important;}
  /* Timeline top bar */
  .topbar .wrap{flex-wrap:nowrap!important;gap:8px!important;min-width:0;}
  .topbar .tb-logo, .topbar .tb-sep, .topbar .tb-plan, .topbar .lmh-beta, .topbar #printBtn, .topbar #resetBtn{display:none!important;}
  .topbar .tb-actions{gap:6px!important;flex-shrink:0;}
  .topbar .tb-wordmark{min-width:0;flex-shrink:1;}
  .topbar .btn{min-height:44px;}
  .topbar .btn-ico{min-width:44px;}
  .topbar #toggleAll{padding:0 12px!important;white-space:nowrap;}
  .topbar #dlTop{font-size:0!important;padding:0 12px!important;}
  .topbar #dlTop::after{content:"PDF";font-size:14px;font-weight:700;}
  /* Timeline download card */
  .dl-card .dl-btns{flex-direction:column!important;width:100%;}
  .dl-card .dl-btns > *{width:100%;justify-content:center;min-height:44px;}
}

/* =====================================================================
   LMH Tools design layer. 2026-10-01.
   Direction: Refined Dark, Warm Industrial. One accent (LMH yellow, always
   a fill with black on it), Radikal for everything, surfaces that have
   depth, controls that answer the hand. Works from the data-suite tags
   that suite.js sets; app styles still win on anything they set.
   ===================================================================== */
:root{
  --s-accent:#FFF200; --s-ink:#0C0C0C;
  --s-line:rgba(255,255,255,.075); --s-line-hi:rgba(255,255,255,.16);
  --s-glow:rgba(255,242,0,.10);
  --s-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -32px rgba(0,0,0,.9), 0 2px 6px -2px rgba(0,0,0,.6);
  --s-shadow-hi:0 1px 0 rgba(255,255,255,.07) inset, 0 32px 56px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,242,0,.08);
  --s-ease:cubic-bezier(.2,.7,.2,1);
}
html[data-theme="light"]{
  --s-line:rgba(12,12,12,.08); --s-line-hi:rgba(12,12,12,.22);
  --s-glow:rgba(255,242,0,.22);
  --s-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 20px 40px -28px rgba(12,12,12,.35), 0 1px 3px rgba(12,12,12,.08);
  --s-shadow-hi:0 1px 0 rgba(255,255,255,.9) inset, 0 28px 48px -26px rgba(12,12,12,.4), 0 0 0 1px rgba(12,12,12,.06);
}

/* ---- the ground: a horizon glow and a whisper of grain, same sky as the landing page ---- */
@media screen{
  body{position:relative;}
  body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(60% 38% at 50% -6%, var(--s-glow), transparent 70%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:1;}
  html[data-theme="light"] body::before{background-image:radial-gradient(60% 38% at 50% -6%, var(--s-glow), transparent 70%);}
  /* zero specificity: an app's own position (sticky header, fixed overlay) always wins */
  :where(body > *){position:relative;z-index:1;}
  body > script, body > style{position:static;}
}

/* ---- type: tiny caps labels come up to 12px, with the suite's tracking ---- */
[data-suite="eyebrow"]{font-size:12px!important;letter-spacing:.16em!important;font-weight:700!important;}

/* ---- selection, scrollbars ---- */
::selection{background:var(--s-accent);color:var(--s-ink);}
@media (pointer:fine){
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:rgba(128,128,128,.28);border:3px solid transparent;border-radius:999px;background-clip:padding-box;}
  ::-webkit-scrollbar-thumb:hover{background:var(--s-accent);background-clip:padding-box;}
}

/* ---- the main header: a yellow hairline that fades out, like the horizon ---- */
[data-suite="head"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg, var(--s-accent) 0, rgba(255,242,0,.35) 28%, transparent 70%);opacity:.9;}

/* ---- panels: depth, a lit top edge, a lift when they're clickable ---- */
[data-suite="panel"]{
  border-color:var(--s-line);
  box-shadow:var(--s-shadow);
  transition:box-shadow .35s var(--s-ease), border-color .35s var(--s-ease), transform .35s var(--s-ease);
}
[data-suite="panel"]:not([data-suite-img]){
  background-image:linear-gradient(180deg, rgba(255,255,255,.028) 0, rgba(255,255,255,0) 38%);
}
html[data-theme="light"] [data-suite="panel"]:not([data-suite-img]){
  background-image:linear-gradient(180deg, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 40%);
}
[data-suite="panel"]:hover{border-color:var(--s-line-hi);}
[data-suite="panel"][data-suite-click]:hover{transform:translateY(-2px);box-shadow:var(--s-shadow-hi);}
[data-suite="panel"][data-suite-click]:active{transform:translateY(0) scale(.995);transition-duration:.08s;}
/* arrive: a short fade-up, staggered, once */
@media screen and (prefers-reduced-motion:no-preference){
  html[data-suite-ready] [data-suite="panel"]{animation:suiteRise .6s var(--s-ease) both;animation-delay:calc(var(--suite-i,0) * 45ms);}
  @keyframes suiteRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
}

/* ---- buttons: everything answers the hand; yellow ones glow ---- */
:where(button,[role=button],a.btn,.btn,.tbtn,.rbtn,.cbtn,.icon-btn,.lmh-share-btn,.theme-orb,.lmh-suite-back){
  transition:transform .18s var(--s-ease), box-shadow .25s var(--s-ease), background-color .2s, border-color .2s, color .2s, filter .2s;
}
:where(button,[role=button],a.btn,.btn,.tbtn,.rbtn,.cbtn,.icon-btn,.lmh-share-btn,.theme-orb,.lmh-suite-back):not(:disabled):active{transform:scale(.965);transition-duration:.06s;}
[data-suite="primary"]{
  box-shadow:0 10px 26px -10px rgba(255,242,0,.55), 0 1px 0 rgba(255,255,255,.35) inset;
  text-shadow:none;
}
[data-suite="primary"]:not(:disabled):hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 14px 32px -10px rgba(255,242,0,.7), 0 1px 0 rgba(255,255,255,.35) inset;}
[data-suite="primary"]:not(:disabled):active{transform:translateY(0) scale(.965);box-shadow:0 4px 14px -8px rgba(255,242,0,.6);}
[data-suite="primary"]:disabled{box-shadow:none;}

/* ---- inputs: a quieter rest state, an unmistakable focus ---- */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),select,textarea){
  transition:border-color .2s, box-shadow .25s var(--s-ease), background-color .2s;
}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),select,textarea):hover{border-color:var(--s-line-hi);}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),select,textarea):focus{
  outline:none;border-color:var(--s-accent)!important;box-shadow:0 0 0 3px rgba(255,242,0,.22), 0 0 0 1px var(--s-accent);
}
:where(input[type=checkbox],input[type=radio]){accent-color:var(--s-accent);}
:where(input[type=range]){accent-color:var(--s-accent);}

/* ---- drop zones: they light up when a file comes near ---- */
[data-suite="drop"]{transition:border-color .25s, background-color .25s, box-shadow .3s var(--s-ease), transform .3s var(--s-ease);}
[data-suite="drop"]:hover,[data-suite="drop"].dragover,[data-suite="drop"].drag,[data-suite="drop"].over,[data-suite="drop"].is-over,[data-suite="drop"].active{
  border-color:var(--s-accent)!important;background-color:rgba(255,242,0,.05);box-shadow:0 0 0 6px rgba(255,242,0,.08), 0 24px 48px -30px rgba(255,242,0,.35);
}
[data-suite="drop"].dragover,[data-suite="drop"].drag,[data-suite="drop"].over,[data-suite="drop"].is-over{transform:scale(1.01);}

/* ---- one focus ring everywhere ---- */
:where(a[href],button,input,select,textarea,summary,[role=button],[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--s-accent);outline-offset:2px;box-shadow:0 0 0 4px var(--s-ink);}
html[data-theme="light"] :where(a[href],button,input,select,textarea,summary,[role=button],[tabindex]:not([tabindex="-1"])):focus-visible{box-shadow:0 0 0 4px #fff;}

/* ---- motion, touch floors, phone sheets ---- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}
@media (max-width:640px){
  :where(button,[role=button],select,summary):not(.bird){min-height:44px;}
  :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden])){min-height:44px;}
  :where(input[type=checkbox],input[type=radio]){min-width:20px;min-height:20px;}
  :where(input[type=range]){height:44px;}
  .tut-panel{width:100vw!important;}
  [data-suite="panel"][data-suite-click]:hover{transform:none;}
}
@media print{body::before{display:none;}[data-suite="panel"]{box-shadow:none;animation:none;}}

/* ---- shared header pill: 14px like every other control ---- */
html body > header .lmh-suite-back{font-size:14px;}

/* =====================================================================
   Section jump bar. 2026-10-01. Long pages (Brand Assets, Blueprint) carry
   <nav class="suite-jump">; Showcase pins its category chips with
   data-suite-stick. suite.js sets --suite-hdr (height of a sticky page
   header, else 0) and --suite-jump-offset (header + bar) and marks the
   section in view with aria-current.
   ===================================================================== */
html{scroll-padding-top:calc(var(--suite-jump-offset,0px) + 12px);}
.suite-jump, [data-suite-stick]{
  position:sticky!important;top:var(--suite-hdr,0px);z-index:45!important;
  background:rgba(12,12,12,.86);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--s-line);
}
html[data-theme="light"] .suite-jump, html[data-theme="light"] [data-suite-stick]{background:rgba(255,255,255,.9);}
.suite-jump{margin:0;padding:10px clamp(16px,4vw,48px);}
.suite-jump ol{list-style:none;margin:0 auto;padding:2px 0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 16px,#000 calc(100% - 24px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 16px,#000 calc(100% - 24px),transparent 100%);
  padding-right:24px;}
.suite-jump ol::-webkit-scrollbar{display:none;}
.suite-jump li{flex:0 0 auto;}
.suite-jump a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border-radius:999px;
  border:1px solid var(--s-line-hi);color:inherit;text-decoration:none;white-space:nowrap;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;opacity:.82;
  transition:background-color .2s, border-color .2s, color .2s, opacity .2s;}
.suite-jump a .n{font-size:12px;font-weight:700;letter-spacing:.06em;opacity:.6;font-variant-numeric:tabular-nums;}
.suite-jump a:hover{opacity:1;border-color:var(--s-accent);}
.suite-jump a[aria-current="true"]{opacity:1;background:var(--s-accent);border-color:var(--s-accent);color:var(--s-ink);}
.suite-jump a[aria-current="true"] .n{opacity:.7;}
/* Showcase chips row when pinned */
[data-suite-stick]{padding-top:12px!important;padding-bottom:12px!important;}
@media (max-width:640px){
  .suite-jump{padding-top:8px;padding-bottom:8px;}
  .suite-jump a{min-height:44px;}
  [data-suite-stick]{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;}
  [data-suite-stick]::-webkit-scrollbar{display:none;}
  [data-suite-stick] > *{flex:0 0 auto;}
}
@media print{.suite-jump{display:none!important;}[data-suite-stick]{position:static!important;}}

/* =====================================================================
   Tabs and dock. 2026-10-02. One pattern for dense panels (Brand Analyzer
   source + results, Blueprint client builder), modelled on the Map
   Generator panel: numbered step tabs with a yellow underline, panes that
   fade in, a count pill, a nudge when a tab has something new, and a dock
   that keeps the panel's main action in reach.
   Markup:  <div data-suite-tabs="storage-key">
              <div class="suite-tabs" role="tablist" aria-label="…">
                <button role="tab" id="t-a" aria-controls="p-a" data-tab="a"><b>1</b>Label<span class="t-n"></span></button>
              </div>
              <div class="suite-pane" role="tabpanel" id="p-a" aria-labelledby="t-a">…</div>
              <div class="suite-dock">…</div>
            </div>
   suite.js wires clicks, arrow keys, memory and window.suiteTabs.
   ===================================================================== */
.suite-tabs{display:flex;gap:4px;margin:0;padding:0;border-bottom:1px solid var(--s-line-hi);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.suite-tabs::-webkit-scrollbar{display:none;}
.suite-tabs [role=tab]{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  min-height:48px;margin:0;padding:0 14px;background:none;border:0;border-radius:0;box-shadow:none;
  color:inherit;opacity:.64;font-family:inherit;font-size:14px;font-weight:700;line-height:1;letter-spacing:.005em;
  white-space:nowrap;cursor:pointer;transition:opacity .2s, color .2s;}
.suite-tabs [role=tab][hidden]{display:none;}
.suite-tabs [role=tab]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;
  background:var(--s-accent);transform:scaleX(0);transform-origin:50% 50%;transition:transform .3s var(--s-ease);}
.suite-tabs [role=tab]:hover{opacity:1;}
.suite-tabs [role=tab][aria-selected=true]{opacity:1;}
.suite-tabs [role=tab][aria-selected=true]::after{transform:scaleX(1);}
.suite-tabs [role=tab]:active{transform:none;}
.suite-tabs [role=tab] > b{position:relative;flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  font-size:12px;font-weight:800;line-height:1;border:1px solid var(--s-line-hi);
  transition:background-color .25s var(--s-ease), color .25s, border-color .25s, transform .25s var(--s-ease);}
.suite-tabs [role=tab][aria-selected=true] > b{background:var(--s-accent);border-color:var(--s-accent);color:var(--s-ink);transform:scale(1.06);}
.suite-tabs .t-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  font-size:12px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--s-line-hi);color:inherit;}
.suite-tabs .t-n:empty{display:none;}
.suite-tabs .t-s{display:none;}
.suite-tabs [role=tab][aria-selected=true] .t-n{background:var(--s-accent);color:var(--s-ink);}
.suite-tabs [role=tab].nudge > b::before{content:"";position:absolute;inset:-1px;border-radius:50%;animation:suiteNudge 1.6s var(--s-ease) infinite;}
.suite-tabs [role=tab].nudge:not([aria-selected=true]){opacity:1;}
@keyframes suiteNudge{0%{box-shadow:0 0 0 0 rgba(255,242,0,.65);}100%{box-shadow:0 0 0 10px rgba(255,242,0,0);}}
.suite-pane[hidden], [data-suite-tabs] [role=tabpanel][hidden]{display:none!important;}
@media (prefers-reduced-motion:no-preference){
  .suite-pane.is-in{animation:suitePaneIn .32s var(--s-ease) both;}
  @keyframes suitePaneIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
}
.suite-pane-intro{margin:0 0 16px;font-size:14px;line-height:1.5;opacity:.78;max-width:72ch;}
.suite-pane-intro b{opacity:1;}

/* the dock: the panel's main action, always in reach */
.suite-dock{position:sticky;bottom:0;z-index:30;display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;
  margin:0;padding:14px 18px;border-top:1px solid var(--s-line-hi);
  background:var(--suite-dock-bg, rgba(12,12,12,.92));
  -webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);
  box-shadow:0 -16px 28px -18px rgba(0,0,0,.75);}
html[data-theme="light"] .suite-dock{background:var(--suite-dock-bg, rgba(255,255,255,.94));box-shadow:0 -14px 24px -18px rgba(12,12,12,.25);}
.suite-dock .sd-spacer{flex:1 1 auto;}
.suite-dock .sd-status{font-size:14px;line-height:1.4;min-width:0;}
@media (max-width:640px){
  .suite-tabs [role=tab]{padding:0 10px;min-height:48px;}
  .suite-tabs .t-x{display:none;}   /* long half of a tab label, dropped on phones */
  .suite-tabs .t-s{display:inline;}  /* a short phone-only label */
  .suite-dock{padding:12px 16px;}
}
@media print{.suite-tabs,.suite-dock{display:none!important;}.suite-pane[hidden]{display:block!important;}}