/* GEM Design System offline viewer. Reads every value from project/tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--surface-canvas);color:var(--text-primary)}
body{margin:0;background:var(--surface-canvas);color:var(--text-primary);font:var(--text-body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-underline-offset:4px}
:focus-visible{outline:var(--focus-width) solid var(--focus-light);outline-offset:var(--focus-offset)}
.skip{position:absolute;inset-inline-start:-999px;top:0;background:var(--action-background);color:var(--action-foreground);padding:var(--space-12) var(--space-16);z-index:10}
.skip:focus{inset-inline-start:var(--space-16)}

.shell{display:grid;grid-template-columns:288px minmax(0,1fr);min-height:100vh}
.topbar{display:none}
.nav{grid-row:1;background:var(--surface-signature);color:var(--text-inverse);position:sticky;top:0;height:100vh;overflow:auto;padding:var(--space-32) var(--space-24) var(--space-48)}
.nav :focus-visible{outline-color:var(--focus-dark)}
.nav .logo{display:block;margin:0 0 var(--space-8)}
.nav .logo img{width:150px;display:block}
.nav .tag{font:var(--text-tagline);letter-spacing:.18em;color:var(--text-signatureAccent);margin:var(--space-16) 0 var(--space-4);text-transform:uppercase;font-size:11px}
.nav .ver{font:var(--text-caption);font-size:12px;color:var(--text-signatureAccent);margin:0 0 var(--space-32)}
.nav h2{font:var(--text-labelSmall);letter-spacing:.08em;text-transform:uppercase;color:var(--text-signatureAccent);margin:var(--space-24) 0 var(--space-8);padding-top:var(--space-16);border-top:var(--border-hairline) solid rgba(188,172,167,.35)}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{display:flex;align-items:center;min-height:36px;padding:6px var(--space-8);text-decoration:none;color:var(--text-inverse);font:var(--text-caption);border-inline-start:var(--border-emphasis) solid transparent}
.nav a:hover{color:var(--text-signatureAccent)}
.nav a[aria-current="page"]{border-inline-start-color:var(--beige);color:var(--text-signatureAccent)}
.nav .sub a{padding-inline-start:var(--space-16);font-size:13px;min-height:32px}
.nav .grp{font:var(--text-caption);font-size:12px;color:var(--text-signatureAccent);margin:var(--space-12) 0 var(--space-4);padding-inline-start:var(--space-8)}

.main{min-width:0;padding:var(--space-48) var(--space-48) var(--space-96)}
.main:focus{outline:none}
.page{max-width:var(--max-content)}
.eyebrow{font:var(--text-eyebrow);letter-spacing:.16em;text-transform:uppercase;margin:0 0 var(--space-12)}
.page h1.title{font:var(--text-h1);letter-spacing:.02em;margin:0 0 var(--space-16)}
.lede{font:var(--text-body);max-width:var(--max-reading);margin:0 0 var(--space-32)}
.status{display:inline-block;font:var(--text-labelSmall);letter-spacing:.08em;text-transform:uppercase;border:var(--border-emphasis) dashed var(--border-essential);padding:2px 8px;margin:0 var(--space-8) var(--space-8) 0}
.status.ok{background:var(--action-background);color:var(--action-foreground);border-style:solid}
.status.c{border-style:solid}
.status.r{border-style:dotted}

/* markdown */
.md{max-width:var(--max-content)}
.md > *:first-child{margin-top:0}
.md h1{font:var(--text-h1);letter-spacing:.02em;margin:0 0 var(--space-24)}
.md h2{font:var(--text-h2);letter-spacing:.01em;margin:var(--space-48) 0 var(--space-16);padding-top:var(--space-24);border-top:var(--border-hairline) solid var(--border-decorative)}
.md h3{font:var(--text-h3);margin:var(--space-32) 0 var(--space-12)}
.md h4{font:var(--text-label);margin:var(--space-24) 0 var(--space-8)}
.md p,.md li{max-width:var(--max-reading)}
.md p{margin:0 0 var(--space-16)}
.md ul,.md ol{padding-inline-start:var(--space-24);margin:0 0 var(--space-16)}
.md li{margin:0 0 var(--space-4)}
.md hr{border:0;border-top:var(--border-hairline) solid var(--border-decorative);margin:var(--space-48) 0}
.md code{font:400 0.88em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:rgba(188,172,167,.22);padding:1px 5px}
.md pre{background:var(--surface-signature);color:var(--text-inverse);padding:var(--space-16) var(--space-24);overflow:auto;margin:0 0 var(--space-24)}
.md pre code{background:none;padding:0;color:inherit;font-size:13px;line-height:1.6}
.tbl{overflow-x:auto;margin:0 0 var(--space-24);border-block:var(--border-hairline) solid var(--border-essential)}
.md table{border-collapse:collapse;width:100%;font:var(--text-caption)}
.md th,.md td{text-align:start;vertical-align:top;padding:10px var(--space-12) 10px 0;border-top:var(--border-hairline) solid var(--border-decorative)}
.md thead th{border-top:0;font:var(--text-labelSmall);letter-spacing:.08em;text-transform:uppercase}
.md blockquote{margin:0 0 var(--space-16);padding-inline-start:var(--space-16);border-inline-start:var(--border-emphasis) solid var(--beige)}
.md img{max-width:100%;height:auto}

/* cards */
.card{border:var(--border-hairline) solid var(--border-decorative);margin:0 0 var(--space-32)}
.card-head{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-16);align-items:baseline;justify-content:space-between;padding:var(--space-12) var(--space-16);border-bottom:var(--border-hairline) solid var(--border-decorative)}
.card-head .n{font:var(--text-label)}
.card-head .s{font:var(--text-caption)}
.card iframe{display:block;width:100%;border:0;background:var(--surface-canvas)}
.card-foot{padding:var(--space-8) var(--space-16);border-top:var(--border-hairline) solid var(--border-decorative);font:var(--text-caption)}
.cover{margin:0 0 var(--space-48);border:var(--border-hairline) solid var(--border-decorative);max-width:962px;overflow:hidden}
.cover iframe{display:block;width:100%;border:0}

/* component index */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-16);margin:0 0 var(--space-32)}
.tile{display:block;border:var(--border-hairline) solid var(--border-essential);padding:var(--space-16);text-decoration:none;min-height:var(--target-min)}
.tile:hover{background:var(--surface-selected)}
.tile .n{font:var(--text-label);display:block;margin:0 0 var(--space-4)}
.tile .s{font:var(--text-caption);display:block}
.tabs{display:flex;gap:var(--space-24);border-bottom:var(--border-hairline) solid var(--border-decorative);margin:0 0 var(--space-24)}
.tabs button{appearance:none;background:none;border:0;border-bottom:var(--border-emphasis) solid transparent;min-height:var(--target-min);padding:0;font:var(--text-label);color:inherit;cursor:pointer}
.tabs button[aria-selected="true"]{border-bottom-color:var(--border-essential)}

/* assets */
.assets{display:grid;gap:var(--space-16);margin:0 0 var(--space-32)}
.assets.l{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.assets.m{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.assets.s,.assets.xs{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.asset{border:var(--border-hairline) solid var(--border-decorative);display:flex;flex-direction:column}
.asset .pic{display:flex;align-items:center;justify-content:center;padding:var(--space-16);aspect-ratio:4/3;background:var(--surface-canvas)}
.asset .pic.dark{background:var(--surface-signature)}
.asset .pic{position:relative;overflow:hidden}
.asset .pic.photo{padding:0;background:var(--surface-signature)}
.asset .pic.photo img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover}
.asset .pic img{max-height:100%;object-fit:contain}
.assets.s .asset .pic,.assets.xs .asset .pic{aspect-ratio:1}
.asset .meta{padding:var(--space-8) var(--space-12);border-top:var(--border-hairline) solid var(--border-decorative);font:var(--text-caption);font-size:12px;line-height:16px;word-break:break-all;display:flex;justify-content:space-between;gap:var(--space-8)}
.asset .meta a{white-space:nowrap}
.filelist{font:var(--text-caption);columns:2 320px;margin:0 0 var(--space-32);padding:0;list-style:none}
.filelist li{break-inside:avoid;padding:4px 0;border-top:var(--border-hairline) solid var(--border-decorative);display:flex;justify-content:space-between;gap:var(--space-12)}
.filelist .sz{white-space:nowrap}

/* tokens */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-16);margin:0 0 var(--space-32)}
.sw{border:var(--border-hairline) solid var(--border-decorative)}
.sw .chip{height:88px;border-bottom:var(--border-hairline) solid var(--border-decorative)}
.sw .t{padding:var(--space-8) var(--space-12);font:var(--text-caption);font-size:12px;line-height:17px}
.sw .t b{font:var(--text-label);font-size:14px;display:block}
.spec{border-top:var(--border-hairline) solid var(--border-decorative);padding:var(--space-16) 0;display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-16);align-items:baseline}
.spec .k{font:var(--text-caption)}
.spec .v{overflow:hidden;text-overflow:ellipsis}
.bar{height:16px;background:var(--surface-signature)}
.note{font:var(--text-caption);max-width:var(--max-reading)}

@media (max-width: 1023px){
  .shell{grid-template-columns:1fr}
  .topbar{display:flex;align-items:center;justify-content:space-between;background:var(--surface-signature);padding:var(--space-12) var(--space-24);position:sticky;top:0;z-index:5}
  .topbar .brand img{height:32px;display:block}
  .menu-btn{appearance:none;background:none;border:var(--border-hairline) solid var(--white);color:var(--text-inverse);min-height:var(--target-min);min-width:var(--target-min);padding:0 var(--space-16);font:var(--text-label);border-radius:var(--radius-control);cursor:pointer}
  .menu-btn:focus-visible{outline-color:var(--focus-dark)}
  .nav{display:none;position:static;height:auto;grid-row:auto}
  .nav.open{display:block}
  .nav .logo{display:none}
  .main{padding:var(--space-32) var(--space-24) var(--space-64)}
  .page h1.title,.md h1{font:var(--text-h2)}
  .spec{grid-template-columns:1fr}
}
@media (max-width: 719px){
  .md table{width:max-content;min-width:100%}
  .md th,.md td{min-width:96px;max-width:240px}
  .tbl{-webkit-overflow-scrolling:touch}
  .spec .v.sample{white-space:normal!important}
  .card-head{flex-direction:column;gap:2px}
  .swatches{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .sw .chip{height:56px}
}
@media (max-width: 479px){ .main{padding:var(--space-24) var(--space-16) var(--space-48)} }
@media (prefers-reduced-motion: reduce){ *{transition-duration:0ms!important;animation-duration:0ms!important} }