/* JTLS UI Polish — "refined depth" layer. Jamie Thompson Learning Studio, Jul 30 2026.
   CHROME ONLY: sets no palette colour, no font family, size or weight.
   Brand Kit v3.2 governs those and is untouched. Remove the one <link>
   that pulls this file and every page reverts exactly as it was. */

:root{
  --jt-e: cubic-bezier(.2,0,0,1);
  --jt-sh-1: 0 1px 2px rgba(15,30,46,.08), 0 2px 6px rgba(15,30,46,.06);
  --jt-sh-2: 0 2px 4px rgba(15,30,46,.10), 0 8px 20px rgba(15,30,46,.10);
  --jt-sh-3: 0 4px 8px rgba(15,30,46,.12), 0 16px 36px rgba(15,30,46,.14);
  --jt-gloss: inset 0 1px 0 rgba(255,255,255,.20);
  --jt-gloss-soft: inset 0 1px 0 rgba(255,255,255,.85);
}

/* 1. Buttons — .btn.link is a text link and is deliberately excluded */
.btn:not(.link), .chip, button.send, .reset, a.launch, nav a.cta{
  transition: transform .16s var(--jt-e), box-shadow .22s var(--jt-e),
              background-color .16s var(--jt-e), border-color .16s var(--jt-e),
              filter .16s var(--jt-e);
  will-change: transform;
}
.btn.solid, button.send, nav a.cta, .nav a.cta, .btn.btn-solid{
  background-image: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.06) 100%);
  box-shadow: var(--jt-sh-2), var(--jt-gloss);
}
.btn.solid:hover, button.send:hover, nav a.cta:hover, .nav a.cta:hover, .btn.btn-solid:hover{
  transform: translateY(-1px); box-shadow: var(--jt-sh-3), var(--jt-gloss);
}
.btn.solid:active, button.send:active, nav a.cta:active, .nav a.cta:active, .btn.btn-solid:active{
  transform: translateY(0) scale(.985); box-shadow: var(--jt-sh-1), var(--jt-gloss);
}
.btn.invert{
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 100%);
  box-shadow: var(--jt-sh-2), var(--jt-gloss-soft);
}
.btn.invert:hover{ transform: translateY(-1px); box-shadow: var(--jt-sh-3), var(--jt-gloss-soft); }
.btn.invert:active{ transform: translateY(0) scale(.985); box-shadow: var(--jt-sh-1), var(--jt-gloss-soft); }
.btn.ghost, .btn.line, .chip{ box-shadow: var(--jt-sh-1); }
.btn.ghost:hover, .btn.line:hover, .chip:hover{ transform: translateY(-1px); box-shadow: var(--jt-sh-2); }
.btn.ghost:active, .btn.line:active, .chip:active{ transform: translateY(0) scale(.985); box-shadow: none; }
.btn[disabled], button[disabled], button.send[disabled]{
  transform:none !important; box-shadow: var(--jt-sh-1) !important; filter: saturate(.6);
}

/* 2. Sticky nav — deeper blur, hairline appears only once scrolled */
header.nav, header.jtls-nav, header.site-nav{
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s var(--jt-e), border-color .25s var(--jt-e);
}
header.nav.jt-scrolled, header.jtls-nav.jt-scrolled, header.site-nav.jt-scrolled{
  border-bottom-color: rgba(15,30,46,.10);
  box-shadow: 0 1px 0 rgba(15,30,46,.04), 0 8px 24px rgba(15,30,46,.06);
}

/* 3. Surfaces */
.chatcard, .primer, .safe, .note, .card, .workcard, .panel{
  box-shadow: var(--jt-sh-1);
  transition: box-shadow .25s var(--jt-e), transform .25s var(--jt-e);
}
.chatcard{ box-shadow: var(--jt-sh-2); }
a.art{ transition: transform .16s var(--jt-e), box-shadow .22s var(--jt-e); }
a.art:hover{ transform: translateY(-1px); box-shadow: var(--jt-sh-2); }
a.art:active{ transform: translateY(0) scale(.99); box-shadow: var(--jt-sh-1); }
.msg .bub{ box-shadow: 0 1px 2px rgba(15,30,46,.05); }

/* 4. Inputs */
#msg, input[type="text"], input[type="email"], input[type="tel"], textarea, select{
  box-shadow: inset 0 1px 2px rgba(15,30,46,.05);
  transition: box-shadow .18s var(--jt-e), border-color .18s var(--jt-e);
}
#msg:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
textarea:focus, select:focus{
  box-shadow: inset 0 1px 2px rgba(15,30,46,.04), 0 0 0 4px rgba(55,108,251,.14);
}

/* 5. Focus — keep the AA-visible ring, soften its edge. Never remove it. */
:focus-visible{ outline: 3px solid #376CFB; outline-offset: 3px; border-radius: 6px; }

/* 6. Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn:not(.link), .chip, button.send, .reset, a.launch, a.art,
  nav a.cta, header.nav, header.jtls-nav, .chatcard, .primer, .safe, .note{ transition: none !important; }
  .btn:hover, .btn:active, .chip:hover, .chip:active, button.send:hover, button.send:active,
  a.art:hover, a.art:active, nav a.cta:hover, nav a.cta:active{ transform: none !important; }
}

/* 7. Portable nav links — used on subpages that carry the studio bar.
   Self-contained so a page does not need the homepage stylesheet.
   Sizes/weights match the homepage nav; no palette value is invented. */
.jt-navlinks{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.jt-navlinks a{
  font-family:'Outfit',system-ui,sans-serif; font-weight:600; font-size:15px; line-height:20px;
  color:#26333F; text-decoration:none; padding:12px 2px; min-height:44px; display:inline-flex; align-items:center;
}
.jt-navlinks a:hover{ color:#2B58D4; }
.jt-navlinks a.jt-cta{
  color:#fff; background:#0F1E2E; border-radius:999px; padding:12px 22px; min-height:44px;
  background-image: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.06) 100%);
  box-shadow: var(--jt-sh-2), var(--jt-gloss);
  transition: transform .16s var(--jt-e), box-shadow .22s var(--jt-e);
}
.jt-navlinks a.jt-cta:hover{ color:#fff; transform:translateY(-1px); box-shadow: var(--jt-sh-3), var(--jt-gloss); }
.jt-navlinks a.jt-cta:active{ transform:translateY(0) scale(.985); box-shadow: var(--jt-sh-1), var(--jt-gloss); }
@media (max-width:720px){
  .jt-navlinks{ gap:16px; }
  .jt-navlinks a:not(.jt-cta){ font-size:14px; }
}
@media (prefers-reduced-motion: reduce){
  .jt-navlinks a.jt-cta{ transition:none !important; }
  .jt-navlinks a.jt-cta:hover, .jt-navlinks a.jt-cta:active{ transform:none !important; }
}

/* 8. Screen-reader-only text. Used to announce links that open a new tab
   (WCAG 3.2.5 / technique G201) without adding visible clutter. */
.jt-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px; }