/* Documentation site layout shared by ios/ and android/. Not part of the design system. */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--m-type-body-1);
  letter-spacing: var(--m-tracking-body-1);
  color: var(--m-glyphs-default);
  background: var(--m-surface-page);
}

a { color: var(--m-glyphs-action); }
code { font: var(--m-type-numeric-2); background: var(--m-surface-sunken); padding: 0 var(--m-space-4); border-radius: var(--m-corner-m); }

.doc-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }

.doc-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: var(--m-space-24) var(--m-space-16);
  background: var(--m-surface-card);
  border-right: var(--m-stroke-s) solid var(--m-stroke-divider);
}
.doc-nav__brand { font: var(--m-type-heading-3); color: var(--m-glyphs-prominent); margin: 0 0 var(--m-space-4); }
.doc-nav__platform { font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); margin: 0 0 var(--m-space-16); }
.doc-nav__switch { display: block; margin-bottom: var(--m-space-24); font: var(--m-type-label-2-prominent); }
.doc-nav h2 { font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); text-transform: uppercase; color: var(--m-glyphs-secondary); margin: var(--m-space-16) 0 var(--m-space-4); }
.doc-nav ul { list-style: none; margin: 0; padding: 0; }
.doc-nav li a { display: block; padding: var(--m-space-4) var(--m-space-8); border-radius: var(--m-corner-m); color: var(--m-glyphs-default); text-decoration: none; font: var(--m-type-label-2); }
.doc-nav li a:hover { background: var(--m-fill-control-selected); }

.doc-main { padding: var(--m-space-40); max-width: 1280px; }
.doc-hero h1 { font: var(--m-type-heading-5); color: var(--m-glyphs-prominent); margin: 0 0 var(--m-space-8); }
.doc-hero p { font: var(--m-type-body-2); max-width: 760px; margin: 0 0 var(--m-space-16); }

.doc-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--m-space-8);
  margin: 0 calc(var(--m-space-16) * -1);
  padding: var(--m-space-12) var(--m-space-16);
  background: var(--m-surface-card);
  border-top: var(--m-stroke-s) solid var(--m-stroke-divider);
  border-bottom: var(--m-stroke-s) solid var(--m-stroke-divider);
}
.doc-toolbar__label { grid-column: 1 / -1; font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); text-transform: uppercase; color: var(--m-glyphs-secondary); }
.doc-toolbar button {
  font: var(--m-type-label-2-prominent);
  padding: var(--m-space-8);
  border-radius: var(--m-corner-l);
  border: var(--m-stroke-s) solid var(--m-stroke-action);
  background: var(--m-fill-secondary);
  color: var(--m-glyphs-action);
  cursor: pointer;
}
.doc-toolbar button[aria-pressed="true"] { background: var(--m-fill-primary); color: var(--m-glyphs-on-fill); }

.doc-footer { margin-top: var(--m-space-40); padding: var(--m-space-24) 0; border-top: var(--m-stroke-s) solid var(--m-stroke-divider); }
.doc-footer p { margin: 0; font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); }

.doc-section { padding: var(--m-space-32) 0; border-top: var(--m-stroke-s) solid var(--m-stroke-divider); }
.doc-section > h2 { font: var(--m-type-heading-4); color: var(--m-glyphs-prominent); margin: 0 0 var(--m-space-8); }
.doc-section > .doc-lede { font: var(--m-type-body-2); max-width: 760px; margin: 0 0 var(--m-space-24); }

.doc-component { display: grid; grid-template-columns: minmax(320px, 1fr) auto; gap: var(--m-space-32); padding: var(--m-space-32) 0; border-top: var(--m-stroke-s) solid var(--m-stroke-divider); }
.doc-component h3 { font: var(--m-type-heading-3); color: var(--m-glyphs-prominent); margin: 0 0 var(--m-space-4); }
.doc-component__meta { display: flex; flex-wrap: wrap; gap: var(--m-space-8); margin: 0 0 var(--m-space-12); }
.doc-component__usage { margin: 0 0 var(--m-space-16); }
.doc-component__usage li { margin-bottom: var(--m-space-4); }

.doc-tag { font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); padding: var(--m-space-2) var(--m-space-8); border-radius: var(--m-corner-pill); background: var(--m-fill-neutral); color: var(--m-glyphs-default); }
.doc-tag--decimal { background: var(--m-fill-info); color: var(--m-glyphs-info); }
.doc-tag--new { background: var(--m-fill-success); color: var(--m-glyphs-success); }
.doc-tag--native { background: var(--m-fill-warning); color: var(--m-glyphs-warning); }
.doc-tag--confirm { background: var(--m-fill-danger); color: var(--m-glyphs-danger); }

.spec-table { width: 100%; border-collapse: collapse; font: var(--m-type-label-2); letter-spacing: var(--m-tracking-label-2); background: var(--m-surface-card); border-radius: var(--m-corner-l); overflow: hidden; }
.spec-table th,
.spec-table td { text-align: left; padding: var(--m-space-8) var(--m-space-12); border-bottom: var(--m-stroke-s) solid var(--m-stroke-divider); vertical-align: top; }
.spec-table th { font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); background: var(--m-surface-sunken); }
.spec-table td:last-child { font: var(--m-type-numeric-2); }
.spec-table td:nth-child(2) { white-space: nowrap; }
.spec-table tr:last-child td { border-bottom: 0; }

.coverage-status { font: var(--m-type-label-1-prominent); }
.coverage-status--built { color: var(--m-glyphs-success); }
.coverage-status--system { color: var(--m-glyphs-info); }
.coverage-status--na { color: var(--m-glyphs-secondary); }

/* Foundations */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--m-space-12); }
.swatch { border-radius: var(--m-corner-l); overflow: hidden; background: var(--m-surface-card); border: var(--m-stroke-s) solid var(--m-stroke-divider); }
.swatch__chip { height: 56px; border-bottom: var(--m-stroke-s) solid var(--m-stroke-divider); }
.swatch__body { padding: var(--m-space-8) var(--m-space-12); }
.swatch__name { font: var(--m-type-label-2-prominent); color: var(--m-glyphs-prominent); }
.swatch__token { font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); word-break: break-all; }

.type-row { display: grid; grid-template-columns: 200px 1fr 220px; gap: var(--m-space-16); align-items: baseline; padding: var(--m-space-12) 0; border-bottom: var(--m-stroke-s) solid var(--m-stroke-divider); }
.type-row__role { font: var(--m-type-label-2-prominent); color: var(--m-glyphs-prominent); }
.type-row__spec { font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); }

.space-row { display: flex; align-items: center; gap: var(--m-space-16); padding: var(--m-space-4) 0; }
.space-row__bar { height: 16px; background: var(--m-fill-primary); border-radius: var(--m-corner-s); }
.space-row__label { font: var(--m-type-label-2); width: 220px; }

.elevation-grid { display: flex; gap: var(--m-space-24); flex-wrap: wrap; }
.elevation-card { width: 160px; height: 96px; border-radius: var(--m-corner-l); background: var(--m-surface-card); display: flex; align-items: center; justify-content: center; font: var(--m-type-label-2); }

.doc-callout { padding: var(--m-space-16); border-radius: var(--m-corner-l); background: var(--m-fill-warning); border-left: var(--m-stroke-l) solid var(--m-stroke-warning); margin: 0 0 var(--m-space-24); }
.doc-callout p { margin: 0 0 var(--m-space-8); }
.doc-callout p:last-child { margin: 0; }
.doc-questions li { margin-bottom: var(--m-space-8); }

@media (max-width: 1100px) {
  .doc-shell { grid-template-columns: 1fr; }
  .doc-nav { position: static; height: auto; }
  .doc-component { grid-template-columns: 1fr; }
  .doc-main { padding: var(--m-space-16); }
}