/* per-page polish: design-system
   Scope: everything under .ds (the page wrapper) to avoid global collisions.
   CRITICAL: .sw .c must NOT inherit spacebg cloud styles ,  they share the class 'c'.
   Fix: reset cloud styles on .sw .c explicitly.
*/

/* -- Nav: this page uses .nav (not .topbar) ,  already handled in space-ds -- */

/* -- Page container: CANON spacing scale (64 not 72). -- */
.ds {
  padding-top: 64px !important;
}

/* -- Hero: CANON sec 10 app-page h1 = 28/660/-.025em. -- */
.ds .ds-hero .display {
  font-size: 28px !important;
  font-weight: 660 !important;
  letter-spacing: -.025em !important;
  line-height: 1.12 !important;
}
.ds .ds-hero p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--ink-soft) !important;
  margin-top: 12px !important;
}

/* -- Section eyebrows: CANON sec 10 (.12em). -- */
.ds .sec > .eyebrow {
  font-size: 10.5px !important;
  letter-spacing: .12em !important;
  font-weight: 500 !important;
  color: var(--ink-mute) !important;
  margin-bottom: 16px !important;
}

/* -- Swatch grid -- */
.ds .sw-grid {
  gap: 12px !important;
}
/* CRITICAL: neutralise spacebg .c cloud blur/position that would apply to .sw .c */
.ds .sw .c {
  position: static !important;
  border-radius: var(--r-md) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 60px !important;
  left: auto !important;
  top: auto !important;
  background: inherit !important; /* let the inline style win */
}
.ds .sw {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  background: var(--paper) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.ds .sw .n {
  padding: 9px 12px !important;
  border-top: 1px solid var(--line) !important;
}
.ds .sw .n strong {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ink) !important;
}
.ds .sw .n span {
  font-size: 11.5px !important;
  color: var(--ink-mute) !important;
}

/* -- Typography card: CANON sec 1 glass. -- */
.ds .type-card {
  background: var(--surface-3) !important;
  backdrop-filter: saturate(1.5) blur(20px) !important;
  -webkit-backdrop-filter: saturate(1.5) blur(20px) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line)) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--r-lg) !important;
}
.ds .type-card .display {
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}

/* -- Button states cards: cleaner layout -- */
.ds .states {
  gap: 14px !important;
}
.ds .stbox {
  gap: 14px !important;
  padding: 18px !important;
}
.ds .stbox .dl {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .12em !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
  margin-bottom: 0 !important;
}

/* -- Input + chip demo -- */
.ds .demo {
  border-radius: var(--r-lg) !important;
  padding: 22px 24px !important;
}
.ds .demo .dl {
  margin-bottom: 16px !important;
}

/* -- CMD strip: CANON sec 9 code block (bg-2 / line / r-lg / 14-16 pad). -- */
.ds .cmd {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 14px 16px !important;
  font-size: 12.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.ds .cmd .pr {
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.ds .cmd .cp {
  margin-left: auto !important;
  font-size: 11px !important;
  color: var(--ink-mute) !important;
  cursor: pointer !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  padding: 3px 8px !important;
  background: var(--paper) !important;
  transition: color .15s, border-color .15s !important;
}
.ds .cmd .cp:hover {
  color: var(--accent) !important;
  border-color: var(--accent-line) !important;
}

/* -- Surface depth row: align-items stretch so cards are equal height -- */
.ds .sec .row {
  gap: 14px !important;
}
.ds .sec .row .card {
  padding: 18px 20px !important;
}
.ds .sec .row .card .dl {
  font-size: 10px !important;
  margin-bottom: 8px !important;
}

/* -- Tabs panel demo -- */
.ds .panel {
  border-radius: var(--r-lg) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)) !important;
  overflow: hidden !important;
}
.ds .panel .tabs {
  padding: 0 14px !important;
  border-bottom: 1px solid var(--line) !important;
}
.ds .panel-body {
  padding: 16px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* -- Section dividers: slightly softer -- */
.ds .sec {
  padding-top: 28px !important;
  margin-top: 48px !important;
}
.ds .sec:first-of-type {
  padding-top: 0 !important;
  margin-top: 32px !important;
  border-top: none !important;
}

/* -- Footer -- */
.ds ~ .footer {
  color: var(--ink-mute) !important;
  font-size: 12.5px !important;
}

/* -- Mobile ( <= 640 ): single-column, contained padding, no overflow.
   The auto-fit grids (.sw-grid/.states) already collapse to one
   column at 390; this trims the wide desktop card padding and the
   hero so design-system reads correctly at 390. All selectors are
   scoped under .ds. -- */
@media (max-width: 640px) {
  .ds {
    padding-top: 40px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* R1: mobile h1 = 24, not 23. */
  .ds .ds-hero .display {
    font-size: 24px !important;
    line-height: 1.18 !important;
  }
  .ds .ds-hero p {
    font-size: 13.5px !important;
  }
  .ds .type-card,
  .ds .demo {
    padding: 18px 16px !important;
  }
  .ds .states {
    grid-template-columns: 1fr !important;
  }
  .ds .sec .row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ds .sec .row .card {
    width: 100% !important;
  }
  .ds .sw-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ds .cmd {
    flex-wrap: wrap !important;
  }
  .ds .cmd .cp {
    margin-left: 0 !important;
  }
}

/* -- Design system text note: can't fix "forest-green" body copy (frozen HTML),
   but we can add a note-style override box to draw attention to the token name -- */
/* NOTE: .ds-hero p still says "muted forest-green accent" ,  frozen proto content.
   Per ISSUES.md [OPEN] item. Not fixable via CSS; noted as residual. */