/* ===========================================================================
   POP — design system browser, page chrome only

   Everything the components themselves need already lives in the prototype's
   own stylesheets, which this page loads unchanged. Nothing in this file may
   style a component: if a swatch here made a button look different from the
   button in the app, the page would be lying, and a reference that lies is
   worse than no reference.

   So the rule is the same one the review chrome follows — this file styles the
   room, never the furniture.
   =========================================================================== */

.ds-page {
  font-family: var(--font-ui);
  color: var(--neutral-900);
  background: #f4f2f0;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
}

/* --- Side nav ------------------------------------------------------------- */
.ds-nav {
  position: sticky; top: 0; align-self: flex-start;
  width: 232px; flex: 0 0 auto; height: 100vh; overflow-y: auto;
  background: var(--neutral-0); border-right: 1px solid var(--neutral-200);
  padding: 22px 14px 40px;
}
.ds-nav h1 { font: 600 16px/22px var(--font-display); margin: 0 0 2px; }
.ds-nav__sub { font: var(--t-regular-12); color: var(--neutral-500); margin: 0 0 18px; }
.ds-nav__group {
  font: 700 10px/14px var(--font-ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--neutral-400); margin: 18px 0 6px; padding: 0 10px;
}
.ds-nav a {
  display: block; padding: 7px 10px; border-radius: 9px;
  font: var(--t-medium-13); color: var(--neutral-900); text-decoration: none;
}
.ds-nav a:hover { background: #f7f5f3; }
.ds-nav a.is-on { background: var(--beige-50); color: var(--orange-text); }
.ds-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  font: 600 12px/16px var(--font-ui); color: var(--neutral-500); text-decoration: none;
}
.ds-back:hover { color: var(--neutral-900); }

/* --- Main ----------------------------------------------------------------- */
.ds-main { flex: 1 1 auto; min-width: 0; padding: 30px 34px 120px; max-width: 1180px; }
.ds-intro { max-width: 640px; margin: 0 0 34px; }
.ds-intro h2 { font: 600 24px/30px var(--font-display); margin: 0 0 8px; }
.ds-intro p { font: var(--t-medium-15); color: var(--neutral-500); margin: 0 0 8px; }

.ds-sec { margin-bottom: 46px; scroll-margin-top: 20px; }
.ds-sec__h {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 8px; margin-bottom: 16px;
  border-bottom: 1px solid var(--neutral-200);
}
.ds-sec__h h3 { font: 600 20px/26px var(--font-display); margin: 0; }
.ds-sec__h span { font: var(--t-regular-12); color: var(--neutral-400); }
.ds-sec__note { font: var(--t-medium-13); color: var(--neutral-500); max-width: 620px; margin: -8px 0 16px; }

/* A specimen: one variant, its name, and the call that produced it. */
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ds-grid--wide { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.ds-grid--full { grid-template-columns: 1fr; }

.ds-item {
  background: var(--neutral-0); border: 1px solid var(--neutral-200);
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
}
.ds-item__stage {
  padding: 18px 16px; background: var(--surface-app);
  border-bottom: 1px solid var(--neutral-200);
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
}
.ds-item__stage > * { max-width: 100%; }
/* Left-aligned staging for anything that is a full-width row in the app —
   centring it would misrepresent how it actually sits. */
.ds-item__stage--fill { display: block; }
.ds-item__stage--dark { background: #2f2f2f; }
.ds-item__foot { padding: 9px 12px 11px; }
.ds-item__name { font: var(--t-semibold-15); font-size: 13px; }
.ds-item__code {
  font: 400 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--neutral-500); margin-top: 3px; word-break: break-word;
}
.ds-item__why { font: var(--t-regular-12); color: var(--neutral-500); margin-top: 5px; }

/* --- Token tables --------------------------------------------------------- */
.ds-table { width: 100%; border-collapse: collapse; font: var(--t-medium-13); }
.ds-table th {
  text-align: left; font: 700 10px/14px var(--font-ui); letter-spacing: .09em;
  text-transform: uppercase; color: var(--neutral-400);
  padding: 0 12px 7px 0; border-bottom: 1px solid var(--neutral-200);
}
.ds-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--neutral-200); vertical-align: middle; }
.ds-table code {
  font: 400 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--neutral-500);
}
.ds-sw { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); flex: 0 0 auto; }
.ds-swrow { display: flex; align-items: center; gap: 10px; }

/* --- Mini device, for anything that mounts into a viewport ---------------- */
.ds-device {
  width: 393px; height: 852px; flex: 0 0 auto;
  transform-origin: top left;
  border-radius: var(--r-device); overflow: hidden; position: relative;
  background: var(--surface-app);
  box-shadow: 0 0 0 8px #1c1c1e, 0 14px 34px rgba(0,0,0,.18);
}
/* Two thirds, so a whole sheet is legible without leaving the section. */
.ds-scale { height: 588px; overflow: hidden; }
.ds-scale .ds-device { transform: scale(.667); }
.ds-scale--half { height: 443px; }
.ds-scale--half .ds-device { transform: scale(.5); }
.ds-device .viewport { position: absolute; inset: 0; overflow: hidden; }

/* --- Flags ---------------------------------------------------------------- */
.ds-flag {
  display: inline-block; font: 700 9px/14px var(--font-ui); letter-spacing: .06em;
  text-transform: uppercase; border-radius: 100px; padding: 1px 7px; margin-left: 6px;
  vertical-align: middle;
}
.ds-flag--new { background: var(--beige-50); color: var(--orange-text); }
.ds-flag--unused { background: #f0f0f0; color: var(--neutral-500); }
.ds-flag--watch { background: #fbecea; color: #c43c2e; }

.ds-callout {
  background: var(--neutral-0); border: 1px solid var(--neutral-200);
  border-left: 3px solid var(--orange-500);
  border-radius: 10px; padding: 12px 14px; margin: 0 0 18px; max-width: 720px;
}
.ds-callout p { margin: 0; font: var(--t-medium-13); color: var(--neutral-900); }
.ds-callout p + p { margin-top: 6px; color: var(--neutral-500); }

@media (max-width: 900px) {
  .ds-nav { display: none; }
  .ds-main { padding: 20px; }
}