/* Hub UX layer — tokens, a11y, responsive polish. Load last on every page. */
:root{
  --hub-bg:#040d0b;
  --hub-bg-elevated:#07120f;
  --hub-green:#041d17;
  --hub-green-mid:#143b2f;
  --hub-lime:#bded91;
  --hub-lime-strong:#c9f48b;
  --hub-cream:#f1f5ed;
  --hub-text:#e9f0ea;
  --hub-muted:#b8c9bc;
  --hub-line:#ffffff22;
  --hub-ink-on-cream:#123428;
  --hub-danger:#e8a090;
  --hub-danger-bg:#442624;
  --hub-focus:#c9f48b;
  --hub-width:1180px;
  --hub-radius-sm:8px;
  --hub-radius-md:13px;
  --hub-radius-pill:25px;
  --hub-space-1:8px;
  --hub-space-2:16px;
  --hub-space-3:24px;
  --hub-space-4:32px;
  --hub-space-5:48px;
  --hub-touch:44px;
  --hub-focus-ring:0 0 0 2px var(--hub-bg),0 0 0 4px var(--hub-focus);
  --hub-transition:160ms ease;
}

html{
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  touch-action:manipulation;
}
body{
  overflow-x:clip;
  touch-action:manipulation;
  overscroll-behavior-x:none;
  padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);
}
img,video,canvas,svg{max-width:100%;height:auto}
img[width][height]{height:auto}
@media (max-width:900px){
  html,body{overflow-x:clip;max-width:100vw}
  /* 16px+ inputs avoid iOS focus-zoom (viewport also locks scale) */
  input,select,textarea{font-size:16px!important}
  body>header,.inner-page>header{
    padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right));
    gap:10px;
  }
  .section,.hero,.studio,.partners,.footer-grid,main,#work,#services{
    padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));
  }
  .hero h1{letter-spacing:-1.5px!important;word-break:break-word}
  .hero-grid,.studio,.partners,.automation-grid,.footer-grid{
    grid-template-columns:1fr!important;
    gap:22px!important;
  }
  .support-panel{
    width:min(100vw - 24px,355px)!important;
    max-width:calc(100vw - 24px);
    inset-inline-end:0!important;
  }
  .code-editor{transform:none!important}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .section-head{
    text-align:center;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column;
  }
  .section-head p{margin-inline:auto;max-width:36ch}
}
@media (max-width:480px){
  .hero{padding-block:28px 20px!important;min-height:auto!important;text-align:center}
  .hero h1{font-size:clamp(36px,11vw,52px)!important;line-height:1.35!important}
  .hero .button,.hero .cta-row,.hero-actions{margin-inline:auto;justify-content:center;display:flex;flex-wrap:wrap}
  .section{padding-block:48px!important}
  .contact{font-size:11px;padding-inline:12px}
  .tools button{width:44px;height:44px}
}

/* Contrast: muted text on dark surfaces */
.section-head p,
.hero p,
.hero-bottom,
.caption,
.footer-grid a,
.footer-bottom,
.studio-copy>p,
.ai-copy>p,
.about p,
.globe-copy p,
.spotlight-copy>p,
.form-heading p,
.license-grid small,
#work .project-info span,
#work .caption,
.admin-notice,
header .brand small,
.partners-label>span{
  color:var(--hub-muted);
}
.footer-grid a:hover,
.text-link:hover,
nav a:hover{
  color:var(--hub-lime-strong);
}

/* Skip link */
.skip-link{
  position:absolute;
  inset-inline-start:12px;
  top:12px;
  z-index:200;
  padding:12px 18px;
  border-radius:var(--hub-radius-sm);
  background:var(--hub-cream);
  color:var(--hub-ink-on-cream);
  font-weight:600;
  font-size:14px;
  transform:translateY(-160%);
  transition:transform var(--hub-transition);
}
.skip-link:focus,
.skip-link:focus-visible{
  transform:translateY(0);
  outline:none;
  box-shadow:var(--hub-focus-ring);
}

/* Visible focus (keyboard) */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--hub-focus);
  outline-offset:3px;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--hub-focus);
  outline-offset:3px;
}
.button:focus-visible,
.contact:focus-visible,
.primary-action:focus-visible{
  outline-offset:4px;
  box-shadow:0 0 0 3px #041d1780;
}

/* Interactive states */
button:disabled,
.button:disabled,
input:disabled,
textarea:disabled,
select:disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}
.button,
.contact,
.primary-action,
.support-launcher,
.tools button,
nav a,
.nav-dropdown summary,
.text-link,
.user-entry{
  transition:color var(--hub-transition),background var(--hub-transition),border-color var(--hub-transition),opacity var(--hub-transition),transform var(--hub-transition);
}
.button:active,
.primary-action:active,
.contact:active{
  transform:translateY(1px);
}
.tools button,
#language{
  min-width:var(--hub-touch);
  min-height:var(--hub-touch);
  width:auto;
  height:auto;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
}
.menu-toggle{
  min-width:var(--hub-touch);
  min-height:var(--hub-touch);
  width:auto;
  height:auto;
  place-items:center;
  border-radius:999px;
}

/* Forms */
.brief-form label span,
form label>span,
form label:not(:has(span)){
  display:block;
  margin-bottom:6px;
  font-size:13px;
  color:var(--hub-muted);
}
.brief-form input,
.brief-form textarea,
.panel input,
.panel textarea,
.panel select,
form input,
form textarea,
form select{
  border-radius:var(--hub-radius-sm);
  min-height:var(--hub-touch);
  transition:border-color var(--hub-transition),box-shadow var(--hub-transition);
}
.brief-form textarea,
.panel textarea,
form textarea{min-height:96px}
.brief-form input:user-invalid,
.brief-form textarea:user-invalid,
form input:user-invalid,
form textarea:user-invalid,
form select:user-invalid{
  border-color:var(--hub-danger)!important;
  box-shadow:0 0 0 1px var(--hub-danger);
}
.brief-form input:user-valid,
.brief-form textarea:user-valid{
  border-color:#6fa87a80;
}
#brief-status,
[role="status"],
.form-status{
  display:block;
  margin-top:10px;
  font-size:13px;
  line-height:1.8;
  color:var(--hub-lime);
  min-height:1.5em;
}
.form-error{
  color:var(--hub-danger);
  font-size:12px;
  margin-top:6px;
}

/* Header / mobile nav */
body>header,
.inner-page>header{
  gap:16px;
}
header nav[aria-label]{min-width:0}
.tools button.menu-toggle,
button.menu-toggle{
  display:none;
  border:1px solid #ffffff40;
  background:transparent;
  color:inherit;
  font-size:13px;
  font-weight:600;
  padding:0 14px;
  cursor:pointer;
}
.tools button.menu-toggle[aria-expanded="true"],
button.menu-toggle[aria-expanded="true"]{
  background:var(--hub-cream);
  color:var(--hub-ink-on-cream);
  border-color:transparent;
}
.nav-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:#0008;
  z-index:40;
  border:0;
  padding:0;
  cursor:pointer;
}
.nav-backdrop.is-open{display:block}
.user-entry{
  font-size:12px;
  padding:8px 4px;
  min-height:var(--hub-touch);
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}
.nav-dropdown summary{cursor:pointer;list-style:none}
.nav-dropdown summary::-webkit-details-marker{display:none}
.nav-mega a:focus-visible{outline-offset:2px}

@media (max-width:900px){
  .tools button.menu-toggle,
  button.menu-toggle{display:inline-grid}
  body>header>nav,
  .inner-page>header>nav{
    position:fixed;
    inset-block:0;
    inset-inline-end:0;
    inset-inline-start:auto;
    z-index:60;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    width:min(100%,360px);
    max-height:100dvh;
    overflow:auto;
    padding:72px 20px 28px;
    background:#07140fd4;
    backdrop-filter:blur(18px);
    border-inline-start:1px solid var(--hub-line);
    transform:translateX(110%);
    visibility:hidden;
    transition:transform 200ms ease,visibility 200ms;
  }
  html[dir="rtl"] body>header>nav,
  html[dir="rtl"] .inner-page>header>nav{
    transform:translateX(-110%);
  }
  html[dir="ltr"] body>header>nav,
  html[dir="ltr"] .inner-page>header>nav{
    border-inline-start:0;
    border-inline-end:1px solid var(--hub-line);
    transform:translateX(110%);
  }
  body.nav-open>header>nav{
    transform:translateX(0);
    visibility:visible;
  }
  body.nav-open{overflow:hidden}
  body>header>nav a,
  .inner-page>header>nav a,
  body>header>nav .nav-dropdown summary,
  .inner-page>header>nav .nav-dropdown summary{
    padding:12px 10px;
    min-height:var(--hub-touch);
    display:flex;
    align-items:center;
    font-size:15px;
  }
  .nav-mega{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:4px 0 8px;
  }
  .tools{gap:8px;flex-wrap:nowrap;justify-content:flex-end;align-items:center}
  .contact{min-height:var(--hub-touch);display:inline-flex;align-items:center;padding-inline:14px;font-size:11px;white-space:nowrap}
  .user-entry{
    display:inline-flex;
    font-size:11px;
    max-width:9.5em;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
@media (max-width:480px){
  header .brand>span{font-size:24px}
  .contact{padding-inline:10px;font-size:10px}
}

/* Tables / panels overflow */
main,aside,.panel,.admin-grid,.metrics{min-width:0}
.panel,.record,.metrics article{
  overflow-wrap:anywhere;
}
.workspace-dialog{
  border:1px solid var(--hub-line);
  border-radius:var(--hub-radius-md);
  background:#0f2119;
  color:var(--hub-text);
  padding:0;
  max-width:min(560px,calc(100vw - 32px));
}
.workspace-dialog::backdrop{background:#000a}
.workspace-dialog .dialog-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--hub-line);
}
.workspace-dialog .dialog-header button{
  min-width:var(--hub-touch);
  min-height:var(--hub-touch);
  border:0;
  background:transparent;
  color:var(--hub-text);
  font-size:22px;
}
aside nav button{
  min-height:var(--hub-touch);
}
aside nav button[aria-current="page"],
aside nav button.active{
  font-weight:600;
}

/* Decorative icons */
.license-icon,
.brand-symbol,
.nav-icon,
.support-launcher>span[aria-hidden="true"]{
  user-select:none;
}

/* Support widget safe area */
.support-widget{
  inset-inline-end:max(14px,env(safe-area-inset-right));
  bottom:max(14px,env(safe-area-inset-bottom));
}
html[dir="ltr"] .support-widget{right:max(14px,env(safe-area-inset-right));left:auto}
html[dir="rtl"] .support-widget{left:auto;right:max(14px,env(safe-area-inset-right))}
.support-launcher{
  min-height:var(--hub-touch);
  gap:10px;
}
.support-launcher .support-icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  color:var(--hub-lime-strong);
}
.support-launcher .support-icon svg{width:20px;height:20px;display:block}
.support-chips button{
  min-height:36px;
  padding:8px 12px;
}

/* Gallery pause control */
.gallery-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.gallery-controls button{
  min-width:var(--hub-touch);
  min-height:var(--hub-touch);
}

/* Empty / loading helpers for panels */
.empty{
  padding:28px 18px;
  border:1px dashed #35523b80;
  border-radius:var(--hub-radius-sm);
  text-align:center;
  color:var(--hub-muted);
}
.is-loading{opacity:.7;pointer-events:none}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
  .brand-track{animation:none!important}
  .menu-toggle,~nav,
  body>header>nav,
  .inner-page>header>nav{transition:none!important}
}

@media (max-width:850px){
  .footer-grid{gap:28px 18px}
  .brief-form{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body:has(aside):not(.hub-dashboard){
    grid-template-columns:1fr!important;
  }
  body:has(aside):not(.hub-dashboard) aside{
    position:relative;
    height:auto;
    width:100%;
  }
  body:has(aside):not(.hub-dashboard) aside nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  body:has(aside):not(.hub-dashboard) main{padding:18px 16px}
  body:not(.hub-dashboard) .metrics{grid-template-columns:1fr}
  body:not(.hub-dashboard) .dashboard-welcome{flex-direction:column;align-items:flex-start}
  .hub-dashboard .dashboard-welcome{flex-direction:column;align-items:flex-start}
}