/* ---------------------------------------------------------------
   Design system page chrome.
   Everything a specimen shows comes from tokens.css and global.css
   (synced from the site). This file only lays out the page around
   them, and copies in the few scoped styles (nav tab, form fields)
   that live inside Astro components on the site.
   --------------------------------------------------------------- */

:root {
  --ds-panel: #0a0a0a;
  --ds-panel-2: #141414;
  --ds-side: 248px;
}

html {
  scroll-padding-top: var(--space-xl);
}

.ds {
  display: grid;
  grid-template-columns: var(--ds-side) minmax(0, 1fr);
  min-height: 100dvh;
}

/* --- Sidebar --- */

.ds-side {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  padding: var(--space-l) var(--space-m);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.ds-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.ds-brand .mark {
  height: 20px;
  color: var(--blue);
}

.ds-toc {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.ds-toc h2 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
  padding-inline: 12px;
}

.ds-toc ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-toc a {
  display: block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.ds-toc a:hover {
  color: var(--ink);
  background: var(--wash);
}

.ds-toc a[aria-current="true"] {
  color: #050505;
  background: #fff;
}

.ds-side__foot {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

.ds-side__foot code {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* --- Main column --- */

.ds-main {
  min-width: 0;
  padding: var(--space-3xl) clamp(1.25rem, 4vw, 4.5rem) var(--space-3xl);
  max-width: 1160px;
}

.ds-hero {
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid var(--line);
}

.ds-hero h1 {
  font-size: var(--step-7);
  letter-spacing: -0.045em;
  line-height: 1;
}

.ds-hero p {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 46ch;
}

.ds-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-l);
}

.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}

.ds-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.ds-section {
  padding-block: var(--space-3xl) 0;
}

.ds-section > h2 {
  font-size: var(--step-5);
  letter-spacing: -0.04em;
}

.ds-section > .ds-lede {
  margin-top: var(--space-xs);
  font-size: var(--step-0);
  color: var(--ink-2);
  max-width: 56ch;
}

.ds-group {
  margin-top: var(--space-xl);
}

.ds-group > h3 {
  font-size: var(--step-1);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-s);
}

.ds-group > h3 + .ds-note {
  margin-top: calc(var(--space-s) * -0.5);
  margin-bottom: var(--space-s);
}

.ds-note {
  font-size: 14px;
  color: var(--ink-2);
  max-width: 60ch;
}

.ds-note code,
.ds-lede code,
.ds-rule code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--wash);
  border: 1px solid var(--line);
}

/* A specimen panel: a neutral stage for live components. */
.ds-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--ds-panel);
  padding: var(--space-xl) var(--space-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}

.ds-stage--light {
  background: var(--intro-bg);
  color: var(--intro-ink);
  border-color: transparent;
}

.ds-stage--canvas {
  background: var(--canvas);
}

.ds-stage--center {
  justify-content: center;
}

.ds-stage__label {
  position: absolute;
  top: 12px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.ds-stage--light .ds-stage__label {
  color: var(--intro-muted);
}

/* --- Code snippet with copy --- */

.ds-code {
  position: relative;
  margin-top: var(--space-2xs);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #050505;
}

.ds-code pre {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  padding-right: 88px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  scrollbar-width: thin;
}

.ds-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--ds-panel-2);
  font-size: 12px;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.ds-copy:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.ds-copy.is-done {
  color: #050505;
  background: #fff;
  border-color: #fff;
}

/* --- Logo --- */

.ds-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-s);
}

.ds-logo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.ds-logo__art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
}

.ds-logo__art .mark {
  height: 38%;
}

.ds-logo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding: 10px 12px 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--ds-panel);
  font-size: 13px;
  color: var(--ink-2);
}

.ds-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.57em;
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.ds-lockup .mark {
  height: 1.14em;
}

/* --- Colour swatches --- */

.ds-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: var(--space-s);
}

.ds-swatch {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--ds-panel);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.ds-swatch:hover {
  border-color: var(--line-strong);
}

.ds-swatch__chip {
  height: 92px;
  /* A checker under translucent tokens so their alpha reads. */
  background-image:
    linear-gradient(var(--c), var(--c)),
    repeating-conic-gradient(#1b1b1b 0% 25%, #101010 0% 50%);
  background-size: auto, 14px 14px;
  border-bottom: 1px solid var(--line);
}

.ds-swatch__body {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-swatch__name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
}

.ds-swatch__value {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  word-break: break-all;
}

.ds-swatch__use {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}

.ds-swatch__ratio {
  margin-top: 6px;
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
}

.ds-swatch__ratio.is-pass {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--ink);
}

.ds-swatches--legacy .ds-swatch {
  opacity: 0.55;
}

.ds-swatches--legacy .ds-swatch__name {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

.ds-gradients {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-s);
}

.ds-gradients .ds-swatch__chip {
  height: 180px;
  background-image: var(--c);
  background-size: auto;
}

/* --- Type --- */

.ds-type {
  border-top: 1px solid var(--line);
}

.ds-type__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-m);
  align-items: baseline;
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--line);
}

.ds-type__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

.ds-type__meta span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
}

.ds-type__sample {
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-families {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
}

.ds-family {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--ds-panel);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.ds-family__aa {
  font-size: 96px;
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: -0.05em;
}

.ds-family__name {
  font-size: 15px;
  font-weight: 500;
}

.ds-family__meta {
  font-size: 13px;
  color: var(--ink-2);
}

.ds-styles {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.ds-style {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--ds-panel);
  padding: var(--space-l);
}

.ds-style__tag {
  display: block;
  margin-bottom: var(--space-s);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
}

/* --- Spacing, radius, elevation --- */

.ds-space {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-space__row {
  display: grid;
  grid-template-columns: 120px 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-mono);
  font-size: 12px;
}

.ds-space__row span:nth-child(2) {
  color: rgba(255, 255, 255, 0.45);
}

.ds-space__bar {
  height: 14px;
  width: var(--w);
  border-radius: 3px;
  background: var(--blue);
}

.ds-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-s);
}

.ds-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.ds-tile__art {
  height: 120px;
  border: 1px solid var(--line-strong);
  background: var(--ds-panel-2);
}

.ds-tile__meta {
  font-family: var(--font-mono);
  font-size: 12px;
}

.ds-tile__meta span {
  display: block;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
}

.ds-elev {
  background: #1c1c1c;
  border-radius: var(--radius-l);
  padding: var(--space-xl) var(--space-l);
}

.ds-elev .ds-tile__art {
  border: 1px solid var(--line);
  background: #262626;
  border-radius: var(--radius-m);
}

/* --- Motion --- */

.ds-motion {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.ds-ease {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-m);
}

.ds-ease__track {
  position: relative;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--ds-panel);
  border: 1px solid var(--line);
}

.ds-ease__dot {
  position: absolute;
  top: 50%;
  left: 6px;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: left 1.1s var(--e);
}

.ds-motion.is-on .ds-ease__dot {
  left: calc(100% - 32px);
}

.ds-durations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-s);
}

/* --- Components --- */

.ds-specimen + .ds-specimen {
  margin-top: var(--space-m);
}

/* Form fields: StartForm.astro's scoped styles. */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
  flex: 1 1 240px;
}

.field__label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.field__hint {
  margin-left: 4px;
  font-weight: 400;
  color: var(--muted);
}

.field__label em {
  font-style: normal;
  color: var(--blue-text);
  margin-left: 2px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--wash);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 0.6em 0.8em;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.field textarea {
  resize: vertical;
  min-height: 96px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.field .is-focus {
  outline: none;
  border-color: var(--blue);
  background: var(--wash-blue);
}

.field [aria-invalid="true"] {
  border-color: var(--danger);
}

.field__error {
  font-size: 12.5px;
  color: var(--danger);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239aa5c1' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
  padding-right: 2.2em;
}

.ds-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  width: 100%;
}

/* Choice pills: the house rule for chips, toggles and segments. */
.ds-choices {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ds-choice {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  font-size: 14px;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.ds-choice:hover {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.4);
}

.ds-choice[aria-pressed="true"] {
  background: #fff;
  border-color: #fff;
  color: #050505;
}

/* Nav tab: Nav.astro's docked tab, frozen open. */
.ds-navstage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--space-l) var(--space-2xl);
  min-height: 160px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--canvas);
  overflow: hidden;
}

.nav-tab {
  --tab-bg: var(--blue);
  --tab-link: rgba(255, 255, 255, 0.78);
  --tab-link-hover: rgba(255, 255, 255, 0.14);
  --tab-r: 28px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 14px 12px;
  border-radius: 0 0 var(--tab-r) var(--tab-r);
  background: var(--tab-bg);
}

.nav-tab--black {
  --tab-bg: #000;
  --tab-link: rgba(255, 255, 255, 0.65);
  --tab-link-hover: rgba(255, 255, 255, 0.06);
}

.nav-tab--notch {
  --tab-bg: var(--intro-ink);
  --tab-r: 14px;
  padding: 8px 28px 10px;
}

.nav-tab::before,
.nav-tab::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--tab-r);
  height: var(--tab-r);
  background-color: var(--tab-bg);
  pointer-events: none;
}

.nav-tab::before {
  right: 100%;
  -webkit-mask: radial-gradient(circle farthest-side at 0 100%, transparent calc(100% - 0.5px), #000 100%);
  mask: radial-gradient(circle farthest-side at 0 100%, transparent calc(100% - 0.5px), #000 100%);
}

.nav-tab::after {
  left: 100%;
  -webkit-mask: radial-gradient(circle farthest-side at 100% 100%, transparent calc(100% - 0.5px), #000 100%);
  mask: radial-gradient(circle farthest-side at 100% 100%, transparent calc(100% - 0.5px), #000 100%);
}

.nav-tab__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-inline: 8px 18px;
  color: #fff;
  text-decoration: none;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.nav-tab__brand .mark {
  height: 24px;
}

.nav-tab--notch .nav-tab__brand {
  margin: 0;
  font-size: 18px;
}

.nav-tab--notch .nav-tab__brand .mark {
  height: 21px;
}

.nav-tab__link {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tab-link);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-spring);
}

.nav-tab__link:hover {
  color: #fff;
  background: var(--tab-link-hover);
}

.nav-tab .btn {
  margin-left: 8px;
}

.nav-tab:not(.nav-tab--black) .btn--primary {
  background: #fff;
  border-color: transparent;
  color: var(--blue);
  box-shadow: none;
}

/* Card demo */
.ds-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-s);
  width: 100%;
}

.ds-card {
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-height: 210px;
  text-decoration: none;
  color: inherit;
}

.ds-card__art {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: auto;
  border: 1px solid var(--line-strong);
}

.ds-card__art--focal {
  border: 0;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(150, 195, 255, 0.55), transparent 60%),
    linear-gradient(180deg, #1f74ff 0%, #005ae6 52%, #0047bd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ds-card h4 {
  margin-top: var(--space-l);
  font-size: var(--step-1);
}

.ds-card p {
  font-size: 14px;
  color: var(--ink-2);
}

/* --- Rules --- */

.ds-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
}

.ds-rule {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--ds-panel);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ds-rule h3 {
  font-size: var(--step-1);
  letter-spacing: -0.025em;
}

.ds-rule p {
  font-size: 14.5px;
  color: var(--ink-2);
}

.ds-dd {
  display: grid;
  gap: 6px;
  margin-top: var(--space-2xs);
  font-size: 14px;
}

.ds-dd li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--space-2xs);
  align-items: baseline;
}

.ds-dd b {
  font-weight: 500;
  font-size: 12px;
  font-family: var(--font-mono);
}

.ds-dd .do b {
  color: var(--blue-text);
}

.ds-dd .dont b {
  color: rgba(255, 255, 255, 0.45);
}

.ds-dd .dont span {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

.ds-foot {
  margin-top: var(--space-3xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

/* --- Small screens: the sidebar becomes a scrolling pill bar --- */

@media (max-width: 960px) {
  .ds {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-side {
    position: sticky;
    z-index: var(--z-nav);
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: rgba(1, 1, 1, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
  }

  .ds-brand span {
    display: none;
  }

  .ds-toc {
    flex-direction: row;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    mask: linear-gradient(90deg, #000 85%, transparent);
  }

  .ds-toc h2 {
    display: none;
  }

  .ds-toc ul {
    flex-direction: row;
  }

  .ds-toc a {
    white-space: nowrap;
  }

  .ds-side__foot {
    display: none;
  }

  .ds-main {
    padding: var(--space-2xl) 16px;
  }

  .ds-gradients,
  .ds-cards,
  .ds-rules,
  .ds-families {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-logos {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-durations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .ds-type__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .ds-ease {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .ds-space__row {
    grid-template-columns: 96px 48px minmax(0, 1fr);
  }

  .ds-stage {
    padding: var(--space-xl) var(--space-s) var(--space-l);
  }

  .ds-family__aa {
    font-size: 72px;
  }

  .ds-navstage {
    justify-content: flex-start;
    padding-inline: var(--space-l);
  }
}

/* The flat variant, scoped to one stage instead of <html>. Mirrors the
   html[data-exp-buttons="flat"] block in global.css. */
[data-flat] .btn--lit {
  background: var(--blue);
  box-shadow: none;
  text-shadow: none;
}

[data-flat] .btn--lit:hover {
  background: var(--blue-hover);
}

[data-flat] .btn--lit-dark {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  text-shadow: none;
}

[data-flat] .btn--lit-dark:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

[data-flat] .btn--lit::after,
[data-flat] .btn--lit-dark::after {
  display: none;
}

button.ds-space__row,
button.ds-type__meta {
  width: 100%;
  text-align: left;
  color: inherit;
}

/* Geist Mono joins "--" into one dash when letter-spacing is normal,
   which turns --step-0 into -step-0. Token names need both dashes. */
.ds code,
.ds pre,
.ds-type__meta,
.ds-tile__meta,
.ds-space__row,
.ds-swatch__name,
.ds-swatch__value,
.ds-style__tag {
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
}

.ds-logo__bar .ds-copy {
  position: static;
}

/* Marks never shrink in a tight flex row. */
.ds-brand,
.ds-brand .mark,
.nav-tab__brand .mark,
.nav-tab > * {
  flex: none;
}

/* On a phone the open tab keeps the brand and the button, as the site
   does; the links move into the menu there. */
@media (max-width: 600px) {
  .nav-tab__link {
    display: none;
  }

  .nav-tab__brand {
    font-size: 18px;
    margin-inline: 4px 6px;
  }

  .nav-tab__brand .mark {
    height: 21px;
  }

  .ds-navstage {
    justify-content: center;
  }
}