/* ================================================================
   THREADWISE · GLOBAL SITE HEADER & NAVIGATION
   Shared across every page in the documentation site.
   Namespaced with a `tw-` prefix so it never collides with the
   original, self-contained styling already inside each document.
   ================================================================ */

:root{
  --tw-heritage:#8B2149;
  --tw-heritage-deep:#6E1838;
  --tw-rose-wash:#F4DEE6;
  --tw-gold:#C99A2E;
  --tw-cream:#FBF4E6;
  --tw-card:#FFFFFF;
  --tw-ink:#2A1810;
  --tw-muted:#5A4028;
  --tw-faint:#9C7B4E;
  --tw-line:#E4D4B4;
  --tw-serif:'Rozha One',Georgia,'Times New Roman',serif;
  --tw-sans:'Hind',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --tw-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --tw-header-h:64px;
}

.tw-skiplink{
  position:absolute;left:-999px;top:0;background:var(--tw-heritage);color:#fff;
  padding:8px 14px;border-radius:8px;z-index:1000;font-family:var(--tw-sans);text-decoration:none;
}
.tw-skiplink:focus{left:12px;top:12px}

/* ---------------------------------------------------------------
   HEADER SHELL
   --------------------------------------------------------------- */
.tw-header{
  position:sticky;top:0;z-index:500;
  background:rgba(251,244,230,.94);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--tw-line);
  font-family:var(--tw-sans);
}
.tw-header__bar{
  max-width:1280px;margin:0 auto;
  min-height:var(--tw-header-h);
  padding:8px 20px;
  display:flex;align-items:center;gap:6px;
}

/* brand / logo */
.tw-brand{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--tw-ink);
  font-family:var(--tw-serif);font-size:19px;letter-spacing:.4px;flex:0 0 auto;
  padding:6px 10px 6px 2px;border-radius:8px;
}
.tw-brand:hover{color:var(--tw-heritage)}
.tw-brand__mark{width:16px;height:26px;display:block;flex:0 0 auto}
.tw-brand__dot{color:var(--tw-heritage)}

/* ---------------------------------------------------------------
   DESKTOP NAV
   --------------------------------------------------------------- */
.tw-nav{
  display:flex;align-items:center;gap:2px;margin-left:12px;flex-wrap:nowrap;
}
.tw-nav__item{position:relative}

.tw-nav__link,
.tw-nav__button{
  appearance:none;background:none;border:1px solid transparent;cursor:pointer;
  font-family:var(--tw-sans);font-size:14.5px;font-weight:600;color:var(--tw-muted);
  text-decoration:none;white-space:nowrap;
  padding:9px 13px;border-radius:999px;
  display:inline-flex;align-items:center;gap:5px;
  line-height:1.2;
}
.tw-nav__link:hover,
.tw-nav__button:hover{color:var(--tw-heritage);background:var(--tw-card);border-color:var(--tw-line)}
.tw-nav__button:focus-visible,
.tw-nav__link:focus-visible,
.tw-brand:focus-visible,
.tw-burger:focus-visible,
.tw-accordion__trigger:focus-visible,
.tw-mobile-panel a:focus-visible{
  outline:2px solid var(--tw-heritage);outline-offset:2px;
}

.tw-caret{font-size:10px;transform:translateY(1px);transition:transform .15s ease}
.tw-nav__button[aria-expanded="true"] .tw-caret{transform:translateY(1px) rotate(180deg)}

/* active pill — Threadwise pink */
.tw-nav__link.is-active,
.tw-nav__button.is-active{
  color:var(--tw-heritage-deep);
  background:var(--tw-rose-wash);
  border-color:#E7C3D2;
}

/* dropdown panel */
.tw-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:220px;
  background:var(--tw-card);border:1px solid var(--tw-line);border-radius:14px;
  box-shadow:0 14px 32px rgba(42,24,16,.14);
  padding:8px;display:none;z-index:600;
}
.tw-nav__item.is-open .tw-dropdown{display:block}
.tw-dropdown--right{left:auto;right:0}

.tw-dropdown a{
  display:block;padding:10px 12px;border-radius:9px;text-decoration:none;
  color:var(--tw-ink);font-size:14px;font-weight:500;font-family:var(--tw-sans);
}
.tw-dropdown a:hover{background:var(--tw-rose-wash);color:var(--tw-heritage-deep)}
.tw-dropdown a.is-active{
  background:var(--tw-rose-wash);color:var(--tw-heritage-deep);font-weight:700;
}

/* ---------------------------------------------------------------
   BURGER (tablet / mobile)
   --------------------------------------------------------------- */
.tw-burger{
  display:none;margin-left:auto;flex:0 0 auto;
  width:44px;height:44px;border-radius:10px;border:1px solid transparent;
  background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.tw-burger:hover{background:var(--tw-card);border-color:var(--tw-line)}
.tw-burger span{
  display:block;width:20px;height:2px;background:var(--tw-ink);border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.tw-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.tw-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.tw-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------------
   MOBILE PANEL
   --------------------------------------------------------------- */
.tw-mobile-panel{
  display:none;
  max-width:1280px;margin:0 auto;padding:6px 14px 18px;
  border-top:1px solid var(--tw-line);
}
.tw-mobile-panel.is-open{display:block}

.tw-mobile-panel > a,
.tw-accordion__trigger{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;appearance:none;background:none;border:none;cursor:pointer;
  font-family:var(--tw-sans);font-size:16px;font-weight:600;color:var(--tw-ink);
  text-decoration:none;padding:14px 8px;border-bottom:1px solid var(--tw-line);
  min-height:44px;
}
.tw-mobile-panel > a.is-active,
.tw-accordion__trigger.is-active{color:var(--tw-heritage-deep)}
.tw-mobile-panel > a.is-active{background:var(--tw-rose-wash);border-radius:10px;border-bottom-color:transparent}

.tw-accordion__trigger .tw-caret{font-size:12px}

.tw-accordion__panel{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease;
  border-bottom:1px solid var(--tw-line);
}
.tw-accordion__panel.is-open{grid-template-rows:1fr}
.tw-accordion__panel > div{overflow:hidden}

.tw-accordion__panel a{
  display:block;padding:12px 8px 12px 20px;text-decoration:none;color:var(--tw-muted);
  font-family:var(--tw-sans);font-size:15px;font-weight:500;min-height:44px;
  display:flex;align-items:center;
}
.tw-accordion__panel a:hover{color:var(--tw-heritage)}
.tw-accordion__panel a.is-active{color:var(--tw-heritage-deep);font-weight:700}

/* ---------------------------------------------------------------
   BREAKPOINT — tablet & mobile switch to hamburger
   --------------------------------------------------------------- */
@media (max-width:1200px){
  .tw-nav{display:none}
  .tw-burger{display:flex}
}
@media (min-width:1201px){
  .tw-mobile-panel{display:none !important}
}

/* ---------------------------------------------------------------
   PROTOTYPE / EMBED WRAPPER PAGES
   (used by MVP Directions, Hi-Fi Screens, Interactive Prototype
   pages that embed a self-contained bundled prototype file)
   --------------------------------------------------------------- */
.tw-embed-shell{background:var(--tw-cream)}
.tw-embed-top{
  max-width:1280px;margin:0 auto;padding:18px 20px 14px;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 16px;
}
.tw-embed-crumb{
  font-family:var(--tw-mono);font-size:12px;letter-spacing:.06em;color:var(--tw-faint);
  text-transform:uppercase;
}
.tw-embed-crumb b{color:var(--tw-heritage)}
.tw-embed-open{
  font-family:var(--tw-mono);font-size:12.5px;color:var(--tw-heritage);
  text-decoration:none;border:1px solid var(--tw-line);border-radius:999px;
  padding:6px 13px;background:var(--tw-card);white-space:nowrap;
}
.tw-embed-open:hover{background:var(--tw-rose-wash);border-color:#E7C3D2}
.tw-embed-frame-wrap{
  max-width:1280px;margin:0 auto;padding:0 20px 24px;
}
.tw-embed-frame{
  width:100%;
  height:calc(100vh - var(--tw-header-h) - 92px);
  min-height:640px;
  border:1px solid var(--tw-line);
  border-radius:16px;
  background:#fff;
  display:block;
}
@media (max-width:1200px){
  .tw-embed-frame{height:calc(100vh - var(--tw-header-h) - 128px);min-height:560px}
}

/* ---------------------------------------------------------------
   PAGE SUB-NAV (used on the Design System page to preserve its
   original in-page section jump links below the global header)
   --------------------------------------------------------------- */
.tw-subnav-label{
  font-family:var(--tw-mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tw-faint);margin-right:10px;white-space:nowrap;
}

@media print{
  .tw-header,.tw-skiplink,.tw-mobile-panel{display:none !important}
}