/* ============================================================
   Toolkit — Apple layer
   Loaded last. Follows Apple's Human Interface Guidelines:
   Clarity (large type, one idea per card), Deference (the page recedes),
   Depth (translucent materials, springs, layered sheets).
   Palette and documented tokens are untouched; this is feel and structure.
   ============================================================ */

/* ---------- motion: a real spring, with a safe fallback ---------- */
:root{
  --spring:cubic-bezier(.34,1.32,.64,1);
  --spring-soft:cubic-bezier(.22,1,.36,1);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.077 22%,1.121 24.5%,1.149 27.4%,1.159 29.8%,1.154 32.4%,1.131 35.5%,1.044 43.4%,.993 50.5%,.977 57%,.984 62.6%,1.004 71%,1.003 83%,1);
    --spring-soft:linear(0,.0019,.0078 1.6%,.0309 3.2%,.1235 6.5%,.2758 10.1%,.4583 14.2%,.6276 18.8%,.7743 23.9%,.8821 29.2%,.9506 34.7%,.9868 40.6%,1.0006 46.9%,1.0036 54%,1.002 65%,1);
  }
}

/* ---------- type: SF Pro on Apple devices, system font elsewhere ---------- */
html{-webkit-tap-highlight-color:transparent;text-size-adjust:100%;}
body{
  font-feature-settings:"kern","liga","calt";
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
}
button,a,input,select,textarea,summary,[role="button"]{touch-action:manipulation;}
::selection{background:color-mix(in srgb,var(--text) 18%,transparent);}
.page-title,.group-title,.tg-title{font-optical-sizing:auto;}

/* ---------- focus: a soft ring, like the system ---------- */
:focus-visible{outline:3px solid color-mix(in srgb,var(--focus-ring) 55%,transparent);outline-offset:2px;border-radius:inherit;}

/* ---------- materials ---------- */
:root{
  --material:color-mix(in srgb,var(--surface) 84%,transparent);
  --material-thick:color-mix(in srgb,var(--surface) 88%,transparent);
  --lift:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05);
  --lift-hover:0 2px 4px rgba(0,0,0,.05),0 18px 44px rgba(0,0,0,.10);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--lift:0 0 0 .5px rgba(255,255,255,.07);--lift-hover:0 0 0 .5px rgba(255,255,255,.14),0 18px 44px rgba(0,0,0,.5);}
}
[data-theme="dark"]{--lift:0 0 0 .5px rgba(255,255,255,.07);--lift-hover:0 0 0 .5px rgba(255,255,255,.14),0 18px 44px rgba(0,0,0,.5);}

/* ---------- top bar ---------- */
.topbar{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(200%) blur(28px);-webkit-backdrop-filter:saturate(200%) blur(28px);border-bottom-color:transparent;box-shadow:0 .5px 0 var(--hairline);}
.search{border-radius:14px;transition:background-color .25s var(--spring-soft),box-shadow .25s var(--spring-soft),transform .45s var(--spring);}
.search:focus-within{transform:scale(1.01);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus-ring) 35%,transparent),var(--lift);}
.topbar-saved,.topbar-add,.back-trigger,.menu-trigger{transition:background-color .2s var(--spring-soft),transform .4s var(--spring);}
.topbar-saved:active,.topbar-add:active,.back-trigger:active,.menu-trigger:active{transform:scale(.92);}
.topbar-add{border-radius:14px;}
.topbar-saved{border-radius:14px;}

/* ---------- sidebar (desktop): a source list ---------- */
.nav-label{padding:0 12px 6px;font-size:12px;letter-spacing:.01em;text-transform:none;font-weight:var(--weight-semibold);color:var(--text-tertiary);}
.nav{gap:18px;}
.nav-link{border-radius:10px;transition:background-color .2s var(--spring-soft),color .2s var(--spring-soft),transform .4s var(--spring),box-shadow .2s var(--spring-soft);}
.nav-link:active{transform:scale(.97);}
.nav-link[aria-current="page"]{background:var(--surface);box-shadow:var(--lift),0 0 0 .5px var(--hairline);}
.nav-link-main svg{transition:transform .5s var(--spring),color .2s;}
.nav-link:hover .nav-link-main svg{transform:scale(1.12);}

/* ---------- page: large title ---------- */
.page-title{letter-spacing:-.034em;}
.page-intro{letter-spacing:-.01em;}
.page:not([hidden]){animation:page-in .6s var(--spring-soft) both;}
@keyframes page-in{from{opacity:0;transform:translateY(14px) scale(.995);}to{opacity:1;transform:none;}}

/* ---------- segmented control with a sliding thumb ---------- */
.filter-bar{position:relative;isolation:isolate;border-radius:var(--radius-full);}
.filter-bar button{position:relative;z-index:1;transition:color .2s var(--spring-soft),transform .4s var(--spring);}
.filter-bar button:active{transform:scale(.95);}
.filter-bar.has-thumb button[aria-pressed="true"]{background:transparent;box-shadow:none;}
.seg-thumb{
  position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:var(--w,0);
  transform:translateX(var(--x,0));border-radius:var(--radius-full);
  background:var(--segment-on);box-shadow:var(--segment-shadow);pointer-events:none;
  transition:transform .55s var(--spring),width .55s var(--spring);
}
.seg-thumb.no-anim{transition:none;}

/* ---------- cards: soft depth, they answer your finger ---------- */
.card{box-shadow:var(--lift);transition:transform .5s var(--spring),box-shadow .35s var(--spring-soft);}
@media (hover:hover){
  .saved-card:hover,.ref-card:hover,.principle-card:hover,.component-card:hover,.tool-guide:hover{box-shadow:var(--lift-hover);}
  .saved-card:hover,.ref-card:hover,.principle-card:hover{transform:translateY(-3px);}
}
.saved-card:active,.ref-card:active,.principle-card:active{transform:scale(.99);}
.stage,.doc-demo{transition:background-color .3s var(--spring-soft);}

/* cards reveal as they scroll into view (browsers without scroll-driven animations just show them) */
@supports (animation-timeline:view()){
  .card,.group-header,.tg-group{
    animation:reveal linear backwards;animation-timeline:view();animation-range:entry 0% entry 40%;
  }
  @keyframes reveal{from{opacity:0;transform:translateY(28px) scale(.97);}to{opacity:1;transform:none;}}
}

/* ---------- buttons: pressed means smaller ---------- */
.btn{transition:background-color var(--duration-instant) var(--ease-standard),border-color var(--duration-instant) var(--ease-standard),color var(--duration-instant) var(--ease-standard),transform .45s var(--spring),box-shadow .3s var(--spring-soft);}
.btn:not(:disabled):not([aria-disabled="true"]):active{transform:scale(.95);}
.badge,.tg-chips li{transition:transform .4s var(--spring);}
@media (hover:hover){.tg-chips li:hover{transform:scale(1.06);}}

/* ---------- dialogs: sheets ---------- */
.save-dialog{border:0;border-radius:28px;background:var(--material-thick);backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);box-shadow:0 0 0 .5px var(--hairline),0 30px 80px rgba(0,0,0,.35);}
.save-dialog::backdrop{background:rgba(0,0,0,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.save-dialog[open]{animation:dialog-pop .55s var(--spring) both;}
.save-dialog[open]::backdrop{animation:fade-in .3s var(--spring-soft) both;}
@keyframes dialog-pop{from{opacity:0;transform:translateY(24px) scale(.94);}to{opacity:1;transform:none;}}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes sheet-up{from{transform:translateY(100%);}to{transform:none;}}
.input,.save-dialog select{border-radius:12px;transition:box-shadow .25s var(--spring-soft),border-color .2s,background-color .2s;}
.input:focus,.input:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-ring) 25%,transparent);}

/* ---------- toast: a floating capsule ---------- */
.save-toast{border:0;border-radius:var(--radius-full);padding:12px 18px;background:var(--material-thick);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);box-shadow:0 0 0 .5px var(--hairline),0 14px 40px rgba(0,0,0,.28);animation:toast-in .6s var(--spring) both;}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,24px) scale(.92);}to{opacity:1;transform:translate(-50%,0);}}

/* ---------- empty states ---------- */
.saved-empty{border:0;background:var(--fill);border-radius:28px;}

/* ---------- scroll: quiet, overlay-style bars ---------- */
@media (hover:hover){
  *{scrollbar-width:thin;scrollbar-color:var(--fill-strong) transparent;}
}

/* ============================================================
   Phones and small tablets: menu + search + saved on the top bar.
   The menu opens a bottom sheet of grouped lists.
   ============================================================ */
@media (max-width:960px){
  /* the top bar is menu, search, saved: the title and the + button step aside */
  .topbar-add,.topbar-title{display:none !important;}
  .topbar-inner{gap:10px;}
  .search{flex:1 1 0;}

  .main{padding-bottom:calc(56px + var(--safe-bottom));}
  .save-toast{bottom:calc(28px + var(--safe-bottom));}

  /* the menu becomes a bottom sheet of grouped lists */
  .sidebar{
    inset:auto 0 0 0;width:100%;min-width:0;max-width:none;height:auto;max-height:88dvh;
    padding:22px 14px calc(22px + var(--safe-bottom));gap:16px;z-index:50;
    border-radius:30px 30px 0 0;background:var(--material-thick);
    backdrop-filter:saturate(200%) blur(34px);-webkit-backdrop-filter:saturate(200%) blur(34px);
    box-shadow:0 0 0 .5px var(--hairline),0 -18px 60px rgba(0,0,0,.3);
    transform:translateY(105%);
    transition:transform .6s var(--spring-soft),visibility 0s linear .6s;
  }
  .sidebar::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:var(--fill-strong);}
  .is-nav-open .sidebar{transform:none;}
  .scrim{z-index:48;background:rgba(0,0,0,.32);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
  .sidebar-head{padding:6px 6px 0;}
  .nav{gap:14px;}
  .nav-group{padding:6px;border-radius:20px;background:var(--surface);box-shadow:var(--lift);}
  .nav-label{padding:8px 12px 4px;}
  .nav-link{height:var(--touch-min);border-radius:14px;}
  .nav-link[aria-current="page"]{background:var(--fill-strong);box-shadow:none;}
  .nav-link:active{transform:scale(.98);background:var(--fill);}
}

/* dialogs become bottom sheets on phones */
@media (max-width:640px){
  .save-dialog{
    width:100%;max-width:none;margin:auto 0 0;max-height:92dvh;
    padding:26px 20px calc(24px + var(--safe-bottom));border-radius:30px 30px 0 0;
  }
  .save-dialog[open]{animation:sheet-up .6s var(--spring-soft) both;}
  .save-dialog::before{content:"";display:block;width:38px;height:5px;margin:-14px auto 16px;border-radius:3px;background:var(--fill-strong);}
}

/* ---------- reduced motion: keep the layout, drop the movement ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .card,.group-header,.tg-group{animation:none !important;}
}

/* ---------- the Web / Mobile switch: the same segmented capsule ---------- */
.platform-bar .btn-group{display:inline-flex;gap:2px;padding:3px;border-radius:var(--radius-full);background:var(--fill);}
.platform-bar .btn-group .btn{height:34px;padding:0 18px;border:0;border-radius:var(--radius-full);background:transparent;color:var(--text-secondary);box-shadow:none;font-weight:var(--weight-medium);}
.platform-bar .btn-group .btn:hover{color:var(--text);}
.platform-bar .btn-group .btn[aria-pressed="true"]{background:var(--segment-on);color:var(--text);font-weight:var(--weight-semibold);box-shadow:var(--segment-shadow);}
@media (max-width:960px){.platform-bar .btn-group .btn{height:var(--touch-min);}}

/* ---------- Account page ---------- */
.account-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}
.account-actions .btn{height:var(--touch-min);padding:0 24px;border-radius:14px;}

/* ============================================================
   Plain-language explainers — styled like Apple's Settings:
   coloured icon tiles, soft tinted rows, a friendly headline.
   ============================================================ */
.explain-heading{
  display:flex;align-items:center;gap:10px;margin:6px 0 2px;
  font-size:var(--title-size);line-height:var(--title-line);font-weight:var(--weight-bold);
  letter-spacing:-.018em;color:var(--text);text-wrap:balance;
}
.explain-spark{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:#fff;
  background:linear-gradient(135deg,#FF9F0A 0%,#FF375F 100%);
  box-shadow:0 6px 16px rgba(255,95,60,.35);
  transition:transform .6s var(--spring);
}
.explain-spark svg{width:18px;height:18px;}
@media (hover:hover){.card:hover .explain-spark,.explain-wrap:hover .explain-spark{transform:rotate(14deg) scale(1.12);}}

.explain-wrap{display:flex;flex-direction:column;gap:10px;margin:-12px 0 4px;}
.explain-wrap .explain-heading{margin:0;font-size:var(--h3-size);line-height:var(--h3-line);}

.explain{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch;
  margin:8px 0 0;padding:0;background:none;box-shadow:none;
}
.explain > div{
  --c:#0A84FF;
  display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;row-gap:10px;align-content:start;align-items:center;
  padding:14px;border-radius:20px;
  background:color-mix(in srgb,var(--c) 12%,transparent);
  box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--c) 22%,transparent);
  transition:transform .5s var(--spring),background-color .25s var(--spring-soft);
  animation:ex-in .7s var(--spring-soft) both;
}
.explain > .ex-when{--c:#30B455;animation-delay:.08s;}
.explain > .ex-why{--c:#FF9F0A;animation-delay:.16s;}
@keyframes ex-in{from{opacity:0;transform:translateY(12px) scale(.97);}to{opacity:1;transform:none;}}
.ex-icon{
  display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--c);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--c) 38%,transparent);
  transition:transform .55s var(--spring);
}
.ex-icon svg{width:19px;height:19px;}
.explain dt{
  font-size:12px;line-height:16px;font-weight:var(--weight-bold);letter-spacing:.07em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c) 62%,var(--text));
}
.explain dd{grid-column:1 / -1;margin:0;font-size:15px;line-height:22px;color:var(--text);text-wrap:pretty;overflow-wrap:anywhere;}
/* Definition, When to use and Why use it always sit side by side; only on phones do they stack */
@media (max-width:640px){.explain{grid-template-columns:minmax(0,1fr);}}
@media (hover:hover){
  .explain > div:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--c) 17%,transparent);}
  .explain > div:hover .ex-icon{transform:rotate(-8deg) scale(1.1);}
}
/* the older, more technical one-liner is replaced by the plain-language text */
.has-explainer .doc-text,.has-explainer .ref-text,.has-explainer .motion-caption,.has-explainer > p:not(.explain-heading){display:none;}
.has-explainer .doc-body > p:not(.explain-heading){display:none;}

/* ---------- Explainer tiles always sit side by side ----------
   Three tiles in a row need roughly 600px, so any grid whose cards carry an explainer shows one card per row. */
:is(.grid,.type-grid,.motion-grid,.principles-grid,.ref-grid):has(> .has-explainer){grid-template-columns:minmax(0,1fr);}
.accent-hero > .explain,.accent-hero > .explain-heading{grid-column:1 / -1;margin-left:24px;margin-right:24px;}
.accent-hero > .explain{margin-top:24px;margin-bottom:24px;}

/* ---------- Principle cards: [icon] Title on one row, a small description, then Definition / When / Why ---------- */
.principle-card:has(> .principle-visual:not(.principle-visual--law)){
  display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:10px;align-content:start;
}
.principle-card:has(> .principle-visual:not(.principle-visual--law)) > .principle-visual{grid-column:1;grid-row:1;width:40px;height:40px;}
.principle-card:has(> .principle-visual:not(.principle-visual--law)) > .doc-title{grid-column:2;grid-row:1;align-self:center;margin:0;}
.principle-card:has(> .principle-visual:not(.principle-visual--law)) > :not(.principle-visual):not(.doc-title){grid-column:1 / -1;}
.principle-card .explain-heading{
  margin:0;font-size:var(--body-lg-size);line-height:24px;font-weight:var(--weight-regular,400);letter-spacing:0;color:var(--text-secondary);
}
.principle-card .explain-spark{display:none;}
.principle-card .explain{margin-top:6px;}