/* Sitemap (index.html) and the design-system pages (component library, app shell). Tokens only. */

/* =================== sitemap =================== */
.sm { min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); }
.sm-top, .sm-main, .sm-foot { width: 100%; max-width: var(--content-max); margin: 0 auto; padding-left: var(--s-10); padding-right: var(--s-10); }
.sm-skip { position: absolute; left: -9999px; top: var(--s-4); z-index: 20; padding: var(--s-2) var(--s-4); border-radius: var(--r-btn); background: var(--surface); border: 1px solid var(--line-strong); font-weight: 600; }
.sm-skip:focus { left: var(--s-4); }
.sm-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-6); padding-bottom: var(--s-6); }
.sm-logo { display: flex; align-items: center; }
.sm-logo img { height: 40px; width: auto; }
.sm-tools { display: flex; align-items: center; gap: var(--s-2); }
.sm-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s-12); padding-bottom: var(--s-12); outline: none; }
.sm-main > .tiles { margin-top: calc(var(--s-6) - var(--s-12)); }
.sm .help { color: var(--ink-600); }
.sm [hidden] { display: none !important; }
.sm-avatar-ic { width: 48px; height: 48px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--soft); color: var(--on-soft); }
.sm code { font-size: 12px; padding: 0 4px; border-radius: 4px; background: var(--field); color: var(--ink-900); }

/* hero: title and jump links left, who the demo is signed in as right */
.sm-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--s-8); align-items: end; padding-top: var(--s-4); }
.sm-hero-text { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.sm-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-600); }
.sm-title { font-size: 34px; line-height: 42px; font-weight: 700; letter-spacing: -.02em; }
.sm-lead { font-size: 15px; line-height: 23px; color: var(--ink-600); max-width: 620px; }
.sm-jump { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.sm-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface); color: var(--ink-900); font-size: 13px; font-weight: 600; text-decoration: none !important; }
.sm-jump a:hover { border-color: var(--primary); color: var(--primary); }
.sm-ctx-card { padding: var(--s-5); }
.sm-ctx { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.sm-ctx-ic { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--field); color: var(--ink-600); }
.sm-ctx-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sm-ctx-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-600); }
.sm-ctx-name { font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.sm-ctx-text a { text-decoration: underline; text-underline-offset: 2px; }
.sm-ctx-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* sections */
.sm-section { display: flex; flex-direction: column; gap: var(--s-5); scroll-margin-top: var(--s-6); }
.sm-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.sm-section-head > div:first-child { display: flex; flex-direction: column; gap: 4px; max-width: 720px; }
.sm-tabs { border-bottom: 0; gap: var(--s-5); }
.sm-tabs .tab { height: 40px; }
.sm-group-ic { width: 36px; height: 36px; border-radius: var(--r-btn); display: inline-flex; align-items: center; justify-content: center; background: var(--soft); color: var(--on-soft); flex-shrink: 0; }

/* people gallery: filters */
.sm-filters { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--shadow); }
.sm-filter-row { display: flex; gap: var(--s-3); align-items: center; }
.sm-search { flex: 1 1 auto; min-width: 0; }
.sm-selects { display: grid; grid-template-columns: repeat(2, 220px); gap: var(--s-3); }
.sm-selects > label { display: none; }
.sm-chips, .sm-presets { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sm-chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface); color: var(--ink-900); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sm-chip:hover { border-color: var(--primary); }
.sm-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sm-chip-n { font-weight: 500; color: var(--ink-600); }
.sm-chip[aria-pressed="true"] { background: var(--soft); border-color: var(--primary); color: var(--on-soft); }
.sm-chip[aria-pressed="true"] .sm-chip-n { color: var(--on-soft); }
.sm-count { margin-top: calc(var(--s-2) * -1); }

/* people gallery: groups of cards */
.sm-pgroups { display: flex; flex-direction: column; gap: var(--s-8); }
.sm-pgroup { display: flex; flex-direction: column; gap: var(--s-4); }
.sm-pgroup-head { display: flex; align-items: center; gap: var(--s-3); }
.sm-pgroup-title { font-size: 16px; line-height: 22px; font-weight: 600; }
.sm-pgroup-text { flex: 1 1 auto; min-width: 0; }
.sm-pgroup-n { flex: none; min-width: 28px; height: 24px; padding: 0 var(--s-2); border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; background: var(--field); color: var(--ink-600); font-size: 12px; font-weight: 600; }
.sm-more { display: none; }
.sm-badges li.is-subject { background: var(--surface); border: 1px solid var(--line-strong); }
.sm-more[aria-expanded="true"] .sm-caret { transform: rotate(180deg); }
@media (max-width: 767px) {
  .sm-pgroups:not([data-filtering]) .sm-pgroup[data-collapsed] .sm-person:nth-child(n+3) { display: none; }
  .sm-pgroups:not([data-filtering]) .sm-more { display: inline-flex; width: 100%; min-height: 44px; justify-content: center; }
}
.sm-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--s-4); }
.sm-person { display: flex; min-width: 0; }
.sm-pcard { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--shadow); transition: border-color .15s ease, box-shadow .15s ease; }
.sm-pcard:hover, .sm-pcard:focus-within { border-color: var(--primary); box-shadow: var(--shadow-pop); }
.sm-phead { display: flex; align-items: flex-start; gap: var(--s-3); }
.sm-pid { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.sm-pname { font-size: 15px; line-height: 21px; font-weight: 600; }
.sm-prole { font-size: 13px; line-height: 19px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-prole-main { color: var(--ink-900); font-weight: 500; }
.sm-phead .pill { flex: none; }
.sm-pschool { display: flex; align-items: center; gap: var(--s-2); font-size: 13px; font-weight: 500; color: var(--ink-600); min-width: 0; }
.sm-pschool > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-pschool-ic { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--field); color: var(--ink-600); }
.sm-pblurb { font-size: 13px; line-height: 19px; color: var(--ink-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.sm-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sm-badges li { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--field); color: var(--ink-600); font-size: 12px; font-weight: 600; }
.sm-badges .ic { color: var(--ink-600); }
.sm-pnote { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-btn); background: var(--ae-bg); color: var(--ae-fg); font-size: 12px; line-height: 17px; font-weight: 500; }
.sm-pnote .ic { flex: none; margin-top: 1px; }
.sm-pfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.sm-pland { font-size: 12px; line-height: 17px; color: var(--ink-600); min-width: 0; }
.sm-pland b { color: var(--ink-900); font-weight: 600; }
.sm-open { flex: none; }
.sm-noresults { padding: var(--s-10) var(--s-6); }

/* guided journeys: one disclosure per story, numbered step cards inside */
.sm-journeys { display: flex; flex-direction: column; gap: var(--s-3); }
.sm-journey { padding: 0; overflow: hidden; }
.sm-jsum { list-style: none; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; min-height: 72px; padding: var(--s-4) var(--s-5); cursor: pointer; }
.sm-jsum::-webkit-details-marker { display: none; }
.sm-jsum:hover { background: var(--field); }
.sm-jsum:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sm-jic { width: 40px; height: 40px; border-radius: var(--r-btn); display: inline-flex; align-items: center; justify-content: center; background: var(--soft); color: var(--on-soft); }
.sm-jhead { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-jname { font-size: 15px; line-height: 21px; font-weight: 600; }
.sm-jlead { font-size: 13px; line-height: 19px; color: var(--ink-600); }
.sm-jmeta { display: flex; align-items: center; gap: var(--s-3); }
.sm-cast { display: flex; }
.sm-cast .avatar { box-shadow: 0 0 0 2px var(--surface); }
.sm-cast .avatar + .avatar { margin-left: -6px; }
.sm-caret { color: var(--ink-600); transition: transform .15s ease; }
.sm-journey[open] > .sm-jsum .sm-caret, .sm-planned[open] .sm-caret { transform: rotate(180deg); }
.sm-jsteps { list-style: none; margin: 0; padding: var(--s-4) var(--s-5) var(--s-5); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--s-3); }
.sm-jsteps > li { display: flex; min-width: 0; }
.sm-jstep { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: var(--s-2) var(--s-3); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); color: var(--ink-900); text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease; }
a.sm-jstep:hover { border-color: var(--primary); box-shadow: var(--shadow-pop); }
a.sm-jstep:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sm-jstep.is-off { background: var(--field); }
.sm-jnum { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--soft); color: var(--on-soft); font-weight: 700; font-size: 13px; }
.sm-jbody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sm-jwho { display: flex; align-items: center; gap: var(--s-2); font-size: 12px; line-height: 16px; color: var(--ink-600); min-width: 0; }
.sm-jwho > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-jwho b { color: var(--ink-900); font-weight: 600; }
.sm-jwho-any .ic { color: var(--ink-600); }
.sm-jtitle { font-size: 15px; line-height: 21px; font-weight: 600; margin-top: 2px; }
.sm-jtext { font-size: 13px; line-height: 19px; color: var(--ink-600); }
.sm-jwarn { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; padding: 4px var(--s-2); border-radius: var(--r-pill); background: var(--ae-bg); color: var(--ae-fg); font-size: 12px; font-weight: 500; }
.sm-jwarn .ic { flex: none; margin-top: 1px; }
.sm-jpage { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-600); min-width: 0; }
.sm-jpage-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-go { margin-left: auto; flex: none; transition: transform .15s ease; }
a.sm-jstep:hover .sm-jpage { color: var(--primary); }
a.sm-jstep:hover .sm-go { transform: translateX(2px); }

/* all screens: route cards (masonry columns) and the by-person picker */
.sm-groups { columns: 3; column-gap: var(--s-4); }
.sm-group { break-inside: avoid; display: flex; flex-direction: column; margin: 0 0 var(--s-4); padding: var(--s-2) 0; }
.sm-group-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); }
.sm-group-title { font-size: 15px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.sm-routes { list-style: none; margin: 0; padding: 0 var(--s-2); }
.sm-route { display: flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-btn); color: var(--ink-900); font-weight: 500; text-decoration: none !important; }
.sm-route .ic { color: var(--ink-600); }
.sm-as { flex: none; font-size: 12px; font-weight: 500; color: var(--ink-600); background: var(--field); border-radius: var(--r-full); padding: 2px var(--s-2); }
.sm-route:hover { background: var(--field); }
.sm-route:hover .ic { color: var(--primary); }
.sm-route:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sm-empty { padding: 0 var(--s-5) var(--s-2); font-size: 13px; color: var(--ink-600); }
.sm-planned { margin: var(--s-2) var(--s-5) var(--s-2); border-top: 1px solid var(--line); padding-top: var(--s-2); }
.sm-planned summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 13px; font-weight: 600; color: var(--ink-600); cursor: pointer; }
.sm-planned summary::-webkit-details-marker { display: none; }
.sm-planned ul { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sm-planned li { display: flex; justify-content: space-between; gap: var(--s-3); font-size: 13px; color: var(--ink-600); }
.sm-pick { max-width: 460px; margin-bottom: var(--s-4); }
.sm-who { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); }
.sm-who-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sm-who-name { font-size: 15px; font-weight: 600; }
.sm-who-name .muted { font-weight: 500; }
.sm-who-note { margin: var(--s-3) 0 var(--s-4); }

/* demo clock */
.sm-tool { padding: var(--s-5) var(--s-6); }
.sm-clock { display: flex; flex-direction: column; gap: var(--s-4); }
.sm-clock-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
@media (max-width: 767px) { .sm-presets .sm-chip { white-space: normal; text-align: left; padding-top: var(--s-2); padding-bottom: var(--s-2); max-width: 100%; } }
.sm-clock-err { font-size: 13px; font-weight: 500; color: var(--be-fg); }
.sm-clock-err:empty { display: none; }
.sm-clock-actions { display: flex; justify-content: flex-end; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* footer: one muted line */
.sm-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-6); flex-wrap: wrap; padding-top: var(--s-5); padding-bottom: var(--s-6); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-600); }
.sm-foot-links { display: flex; align-items: flex-start; gap: var(--s-5); flex-wrap: wrap; }
.sm-foot-links summary { list-style: none; cursor: pointer; font-weight: 600; color: var(--link); }
.sm-foot-links summary::-webkit-details-marker { display: none; }
.sm-foot-links details p { max-width: 320px; margin-top: 4px; }
.sm-foot-links a { font-weight: 600; }

@media (max-width: 1100px) {
  .sm-hero { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .sm-groups { columns: 2; }
  .sm-filter-row { flex-wrap: wrap; }
  .sm-search { flex-basis: 100%; }
  .sm-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; }
}
@media (max-width: 767px) {
  .sm-top, .sm-main, .sm-foot { padding-left: var(--s-4); padding-right: var(--s-4); }
  .sm-top { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .sm-logo img { height: 32px; }
  .sm-reset { width: 44px; padding: 0; }
  .sm-reset-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sm-main { gap: var(--s-10); }
  .sm-main > .tiles { margin-top: calc(var(--s-6) - var(--s-10)); }
  .sm-hero { gap: var(--s-5); padding-top: var(--s-2); }
  .sm-title { font-size: 28px; line-height: 34px; }
  .sm-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--s-4) * -1); margin-right: calc(var(--s-4) * -1); padding: 0 var(--s-4); }
  .sm-jump::-webkit-scrollbar, .sm-chips::-webkit-scrollbar { display: none; }
  .sm-jump a, .sm-chip, .sm-ctx-actions .btn, .sm-open, .sm-who .btn, .sm-clock-actions .btn { min-height: 44px; }
  .sm-jump a { flex: none; }
  .sm-ctx-actions .btn { flex: 1 1 0; }
  .sm-filters { padding: var(--s-3); }
  .sm-selects { gap: var(--s-2); }
  .sm-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--s-3) * -1); padding: 0 var(--s-3); }
  .sm-chip { flex: none; }
  .sm-pgroups { gap: var(--s-6); }
  .sm-pcard { padding: var(--s-4); }
  .sm-pblurb { min-height: 0; }
  .sm-jsum { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-2) var(--s-3); padding: var(--s-4); }
  .sm-jmeta { grid-column: 2; justify-content: space-between; }
  .sm-jsteps { padding: var(--s-3); }
  /* a shared mobile touch-target rule makes links flex; step cards keep their grid */
  #app .sm-jstep { display: grid !important; }
  .sm-route { min-height: 44px; }
  .sm-section-head > .btn, .sm-tabs { width: 100%; }
  .sm-tabs .tab { flex: 1 1 0; height: 44px; }
  .sm-groups { columns: 1; }
  .sm-who { flex-wrap: wrap; padding: var(--s-4); }
  .sm-who .btn { width: 100%; justify-content: center; }
  .sm-pick { max-width: none; }
  .sm-tool { padding: var(--s-4); }
  .sm-clock-fields { grid-template-columns: minmax(0, 1fr); }
  .sm-presets .sm-chip { flex: 1 1 auto; justify-content: space-between; }
  .sm-clock-actions { flex-direction: column-reverse; }
  .sm-clock-actions .btn { width: 100%; justify-content: center; }
  .sm-foot { flex-direction: column; }
}

/* =================== component library =================== */
.cl { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--s-6); align-items: start; }
.cl-sections { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.cl-sections > section { scroll-margin-top: calc(var(--topbar-h) + var(--s-4)); }
.cl-nav { position: sticky; top: calc(var(--topbar-h) + var(--s-6)); display: flex; flex-direction: column; gap: 2px; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); }
.cl-nav-title { font-size: var(--fs-th); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); padding: 0 var(--s-3) var(--s-2); }
.cl-nav a { display: flex; align-items: center; min-height: 34px; padding: 0 var(--s-3); border-radius: var(--r-btn); color: var(--ink-600); font-weight: 500; font-size: 13px; text-decoration: none !important; }
.cl-nav a:hover { background: var(--field); color: var(--ink-900); }
.cl-nav a[aria-current="true"] { background: var(--soft); color: var(--on-soft); font-weight: 600; }
.cl-jump { display: none; }

/* colour tokens: family label left, swatches in a row */
.tok-families { display: flex; flex-direction: column; }
.tok-family { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-4) 0; }
.tok-family + .tok-family { border-top: 1px solid var(--line); }
.tok-family-name { font-weight: 600; }
.tok-family-name .t-meta { display: block; font-weight: 500; margin-top: 2px; }
.tok-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.tok-swatch { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tok-chip { height: 56px; border-radius: var(--r-btn); border: 1px solid var(--line-strong); }
.tok-name { font-size: 12px; font-weight: 600; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok-hex { font-size: 11px; color: var(--ink-400); font-variant-numeric: tabular-nums; text-transform: uppercase; }

/* type scale rows */
.type-rows { display: flex; flex-direction: column; }
.type-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; }
.type-row + .type-row { border-top: 1px solid var(--line); }
.type-row .t-meta { text-align: right; font-variant-numeric: tabular-nums; }

/* spec rows (label left, demo right) used by buttons, pills, forms */
.spec-rows { display: flex; flex-direction: column; }
.spec-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-4) 0; }
.spec-row + .spec-row { border-top: 1px solid var(--line); }
.spec-label { font-size: 13px; font-weight: 600; color: var(--ink-600); }

.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.icon-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s-3) var(--s-2); border: 1px solid var(--line); border-radius: var(--r-btn); text-align: center; }
.icon-cell .t-meta { font-size: 12px; word-break: break-word; }

@media (max-width: 1100px) {
  .cl { grid-template-columns: minmax(0, 1fr); }
  .cl-nav { display: none; }
  .cl-jump { display: flex; flex-direction: column; gap: 6px; position: sticky; top: calc(var(--topbar-h) + var(--s-2)); z-index: 5; padding: var(--s-3); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--shadow); }
  .tok-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tok-family, .spec-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .type-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .type-row .t-meta { text-align: left; }
  .cl-jump { top: calc(var(--topbar-h) - var(--s-2)); }
}

/* =================== app shell anatomy =================== */
.anat { display: flex; flex-direction: column; gap: var(--s-6); }
.anat-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.anat-legend li { display: flex; gap: var(--s-3); align-items: flex-start; }
.anat-legend .anat-key { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--soft); color: var(--on-soft); font-size: 13px; font-weight: 700; }
.anat-legend p { font-size: 13px; color: var(--ink-600); }
.anat-legend strong { display: block; color: var(--ink-900); font-size: 14px; }
.anat-frame { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--canvas); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); overflow: hidden; }
.anat-tag { position: absolute; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700; z-index: 1; }
.anat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); position: relative; }
.anat-head-text { display: flex; flex-direction: column; gap: var(--s-2); flex: 1 1 auto; }
.anat-btns { display: flex; gap: var(--s-2); }
.anat-btn { width: 96px; height: 36px; border-radius: var(--r-btn); background: var(--skeleton); }
.anat-btn.is-primary { background: var(--primary); opacity: .85; }
.anat-tiles { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.anat-tile, .anat-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.anat-tile .skel:nth-child(2) { height: 20px; width: 50%; }
.anat-cols { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-4); }
.anat-card { gap: var(--s-3); }
.anat-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.anat-line { display: grid; grid-template-columns: 32px minmax(0, 1fr) 64px; gap: var(--s-3); align-items: center; }
.anat-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--skeleton); }
.anat-note { font-size: 13px; color: var(--ink-600); }
.anat .skel { animation: none; }
@media (max-width: 1100px) { .anat-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .anat-legend { grid-template-columns: minmax(0, 1fr); }
  .anat-frame { padding: var(--s-4); }
  .anat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .anat-cols { grid-template-columns: minmax(0, 1fr); }
  .anat-head { flex-direction: column; align-items: stretch; }
  .anat-btn { flex: 1 1 0; width: auto; }
}

.tok-family:first-child, .spec-row:first-child, .type-row:first-child { padding-top: 0; }
.tok-family:last-child, .spec-row:last-child, .type-row:last-child { padding-bottom: 0; }
.anat-cols { align-items: start; }

/* ---------- design round r2: token families fill the card, tiles 2x2, table rules ---------- */
.tok-families { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-8); }
.tok-family { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: 0; align-items: start; }
.tok-family + .tok-family { border-top: 0; }
.tok-family-name { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.tok-family-name .t-meta { display: inline; margin-top: 0; text-align: right; }
.tok-swatches { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: var(--s-2); }
.tok-chip { height: 64px; }
.cl-tiles .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-note { margin-top: var(--s-3); }
.cl-rules { list-style: none; margin: 0; padding: var(--s-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); border-radius: var(--r-btn); background: var(--field); font-size: 13px; color: var(--ink-600); line-height: 19px; }
.cl-rules b { display: block; color: var(--ink-900); font-size: 14px; margin-bottom: 2px; }
.cl-rules code { font-size: 12px; padding: 0 4px; border-radius: 4px; background: var(--surface); color: var(--ink-900); }
.cl-row-demo { width: auto; }
@media (max-width: 1100px) {
  .tok-swatches { grid-template-columns: none; }
  .cl-rules { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .tok-families { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .tok-chip { height: 48px; }
  .tok-swatches:has(> :nth-child(5)) { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-3); }
  .tok-name { font-size: 11px; }
  .cl-tiles .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-row-demo { width: auto; }
}

.type-row { grid-template-columns: minmax(0, 1fr) 240px; }
.type-row > p { text-align: left; }
@media (max-width: 767px) { .type-row { grid-template-columns: minmax(0, 1fr); } }
.cl-state-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.segmented .cl-seg { display: inline-flex; align-items: center; height: 34px; padding: 0 var(--s-3); border-radius: 6px; color: var(--ink-600); font-size: 13px; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.segmented .cl-seg:hover { color: var(--ink-900); }
.segmented .cl-seg[aria-current="page"] { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow); }
@media (max-width: 767px) {
  .cl-state-row .segmented { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .segmented .cl-seg { height: 44px; justify-content: center; padding: 0 4px; font-size: 12px; }
}