/* Generated by tools/build.py from web/src/sds.css (one part of core.css). Do not edit. */


/*
 * Signal and Echo design system: web component kit (contract v1, with the v1.1 components below).
 *
 * Load order in a game: dist/web/tokens.css, then this file, then the game's own CSS.
 * Or only what the game uses: dist/web/themes/<id>.css (its one theme) instead of tokens.css, and
 * dist/web/parts/core.css plus parts/<pack>.css for each v1.1 pack in its $packs (connect)
 * and parts/<group>.css for each v1.2 core group it uses (forms: stepper, hold-button,
 * assign-slot; layout: content-card, sheet, grid, carousel, pagination-dots, action-bar,
 * nav-rail, data-table, avatar, setting-detail; feedback: notice, spinner,
 * empty-state, change-readout, chart, stat, stat-breakdown, level-meter, gauge, sparkline; overlays: popover, context-menu,
 * timed-confirm, keyword-link, help-mark) instead of this file. The v1.2 amends and patterns
 * are in core. The parts are this file cut at its "sds-part" markers; a new rule goes inside
 * the part it belongs to. v1.2 pack kits are separate files (dist/web/packs/<pack>.css).
 * Every value here is a token (var(--sds-...)); the only literals are 0, 1px hairlines,
 * percentages, em multiples and unitless numbers.
 *
 * HOW A GAME OVERRIDES THE KIT: the four levels from the intent.
 *
 *   Level 1, values. Set token values for your theme and change nothing else:
 *       :root[data-sds-theme="my-game"] { --sds-color-accent: ...; --sds-button-radius: ...; }
 *     (In the studio repo a theme is a file in tokens/themes/; the build writes the CSS.)
 *
 *   Level 2, skin. Restyle a component in your own CSS file, keeping its class names,
 *     data attributes and states. Every rule in this file sits in a cascade layer
 *     (sds.reset, sds.components), and unlayered CSS beats every layer whatever its
 *     specificity, so a plain `.sds-button { ... }` in the game wins. No !important.
 *     If the game uses layers too, declare the order first: @layer sds, game;
 *
 *   Level 3, replace. Ship your own component under the same name (.sds-button with the
 *     same variants, sizes and states), and do not load this rule set for it. It must keep
 *     the contract: a visible :focus-visible ring, a hit area of var(--sds-touch-target),
 *     keyboard and controller use, and its sound slots (sds-sound.js plays a slot the game names).
 *
 *   Level 4, add. New components or roles the studio lacks, prefixed with the game's name:
 *       .dreamsong-scale-picker { ... }   --dreamsong-color-chord: ...;
 *
 * EXAMPLE, level 2: Smudge's Escape skins buttons as marker on paper.
 *
 *   .sds-button {
 *     border: var(--sds-border-thick) solid var(--sds-color-text);
 *     border-radius: var(--sds-radius-sm) var(--sds-radius-lg) var(--sds-radius-md) var(--sds-radius-lg);
 *     box-shadow: var(--sds-shadow-sm);
 *     font-family: var(--sds-font-display);
 *   }
 *   .sds-button[data-variant="primary"] { background: url("art/marker-fill.png") center / 100% 100%; }
 *   .sds-button:active { box-shadow: none; transform: translate(var(--sds-space-1), var(--sds-space-1)); }
 *
 * Specificity: kit selectors stay at one class plus attributes; variant and state selectors
 * use :where() so source order, not specificity, decides between them. Page-wide defaults
 * (the base font, [hidden]) are :where() rules with zero specificity.
 *
 * THE RULE: a kit class sets only what its contract needs (size, color, the focus ring, the
 * hit area) and never a layout property a game does not expect (no white-space, float,
 * vertical-align on text buttons, display on hosts the game lays out, UA max-width resets).
 *
 * LEVEL 2 OVER AN EXISTING SKIN: a game that adds .sds-button or .sds-dialog to markup it has
 * already styled gets these kit defaults too. Give any of them back in the game's CSS:
 *     .sds-button::before { content: none; }       the touch-target hit area (reaches past a
 *                                                  button smaller than --sds-touch-target)
 *     .sds-button { letter-spacing: normal; }      the theme's label tracking
 *     .sds-button { position: static; }            only with the hit area off: it anchors ::before
 *     .sds-dialog[open], .sds-dialog[open]::backdrop { animation: none; }   the grow-in
 *   [hidden] always hides a kit element (display: none !important in sds.reset): the kit hides
 *   controls with it, and the grown-up gate depends on it (issue #70).
 *
 * Sizes: no data-size means md, no data-variant means the first variant in the contract.
 *
 * v1.2 (contract-v1.md "v1.2 additions"): the core components in the forms, layout, feedback
 * and overlays parts, the amends (marked "@1.2" in the claims) and the drag-and-drop and
 * input-mode looks follow the same rules: one class plus :where() states, tokens only, the
 * touch target as hit area, a visible :focus-visible ring, reduced motion, and no layout
 * property on a host a game lays out. Accent text, lines and marks use color.accent-text;
 * color.accent is a fill under color.on-accent text (#75).
 */

/* sds-claims: level-meter gauge sparkline stepper content-card sheet grid spinner empty-state pagination-dots action-bar notice data-table change-readout hold-button stat-breakdown keyword-link help-mark carousel avatar context-menu popover assign-slot nav-rail chart timed-confirm setting-detail stat */
/* sds-claims: slider@1.2 toast@1.2 tabs@1.2 tooltip@1.2 list-item@1.2 progress-bar@1.2 icon-button@1.2 caption@1.2 badge@1.2 panel@1.2 */
/* sds-claims: ghost-marker pin-mark grab-switch button@1.9 toggle@1.9 chip@1.9 */
/* sds-claims: icon-button@1.6 badge@1.6 social-links@1.6 eyebrow caption@1.7 popover@1.9 */
/* sds-claims: knob slider@1.9 button@1.9 icon-button@1.9 */

@layer sds.reset, sds.components;

/* ------------------------------------------------------------------ reset */

@layer sds.reset {

  /* [hidden] hides every kit element: a kit display rule (.sds-button's inline-flex) would
     otherwise beat the UA's [hidden] { display: none } and show a hidden control, such as the
     grown-up gate's Continue button (issue #70). */
  :where([class*="sds-"])[hidden] {
    display: none !important;
  }

  :where(.sds-keycap),
  :where(.sds-social-link),
  :where(.sds-contact-card),
  :where(.sds-feedback-form),
  :where(.sds-rating-prompt),
  :where(.sds-newsletter-signup),
  :where(.sds-link-row),
  :where(.sds-qr-code),
  :where(.sds-reaction),
  :where(.sds-social-link)::before {
    box-sizing: border-box;
  }

  :where(.sds-qr-code) {
    margin: 0;
    padding: 0;
  }
}

/* ------------------------------------------------------------- components */

@layer sds.components {
  /* --- base text: what a game puts inside a kit container reads in the theme's body font and
     text color, headings in its display font (issue #61). Zero specificity: any game rule wins. */

  :where(.sds-screen),
  :where([data-sds-screen]),
  :where(.sds-contact-card),
  :where(.sds-feedback-form),
  :where(.sds-newsletter-signup),
  :where(.sds-share-sheet),
  :where(.sds-rating-prompt) {
    font-family: var(--sds-font-body);
    color: var(--sds-color-text);
  }

  .sds-social-link::before,
  .sds-carousel-previous::before,
  .sds-carousel-next::before,
  .sds-sheet-handle::before,
  .sds-stepper-decrement::before,
  .sds-stepper-increment::before,
  .sds-hold-button::before,
  .sds-help-mark::before,
  .sds-keyword-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--sds-touch-target));
    height: max(100%, var(--sds-touch-target));
    transform: translate(-50%, -50%);
  }

  :is(.sds-hold-button):where(:not([data-size]), [data-size="md"]) {
    min-height: var(--sds-button-md-height);
    padding: 0 var(--sds-button-md-padding-x);
    font-size: calc(var(--sds-button-md-font-size) * var(--sds-type-scale));
  }

  :is(.sds-hold-button):where([data-size="xs"]) {
    min-height: var(--sds-button-xs-height);
    padding: 0 var(--sds-button-xs-padding-x);
    font-size: calc(var(--sds-button-xs-font-size) * var(--sds-type-scale));
  }

  :is(.sds-hold-button):where([data-size="sm"]) {
    min-height: var(--sds-button-sm-height);
    padding: 0 var(--sds-button-sm-padding-x);
    font-size: calc(var(--sds-button-sm-font-size) * var(--sds-type-scale));
  }

  :is(.sds-hold-button):where([data-size="lg"]) {
    min-height: var(--sds-button-lg-height);
    padding: 0 var(--sds-button-lg-padding-x);
    font-size: calc(var(--sds-button-lg-font-size) * var(--sds-type-scale));
  }

  @keyframes sds-dialog-in {
    from {
      opacity: 0;
      transform: translateY(var(--sds-space-5)) scale(0.96);
    }
  }

  @keyframes sds-toast-out {
    to {
      opacity: 0;
      transform: translateY(var(--sds-space-3));
    }
  }

  @keyframes sds-dwell {
    to {
      transform: scaleX(0);
    }
  }

  /* --- icon (inline svg with <use>) -------------------------------------- */

  .sds-icon {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
    overflow: visible;
  }

  /* --- motion shared by several components: the glow pulse and the entrance keyframes */

  /* The glow pulse (issue 168): reduced motion keeps the strong glow, static. */
  @media (prefers-reduced-motion: reduce) {

    :is(.sds-content-card):where([data-sds-glow], [data-sds-glow] *) {
      animation: none;
    }
  }

  :root[data-sds-motion="reduce"] :is(.sds-content-card):where([data-sds-glow], [data-sds-glow] *) {
    animation: none;
  }

  @keyframes sds-glow-pulse {
    from { box-shadow: var(--sds-glow-strong); }
    to { box-shadow: var(--sds-glow-soft); }
  }

  @keyframes sds-fade-in {
    from {
      opacity: 0;
    }
  }

  @keyframes sds-toast-in {
    from {
      opacity: 0;
      transform: translateY(var(--sds-space-5));
    }
  }

  @keyframes sds-pending-count {
    to { background-size: 100% var(--sds-border-thick); }
  }

  @keyframes sds-pending-landed {
    from { box-shadow: var(--sds-glow-strong); }
  }

  /* ======================================================================
   * Contract v1.1 components. Packs: core, connect.
   * Every kit builds every pack; a game uses the ones in its theme's $packs.
   *
   * Text sizes multiply by --sds-type-scale (the player's text size); captions do not.
   * States: native selectors first (:checked, :indeterminate, :disabled, [open], :focus-within,
   * [aria-pressed], [aria-invalid]), data-state where HTML has none (listening, conflict, low,
   * critical, locked, copied, sent ...). Parts the contract does not name (-fill, -title ...)
   * are internal to this kit.
   * ====================================================================== */

  /* sds-claims: field-row checkbox radio-group select text-input choice-tile section-header divider list-item scroll-area disclosure progress-bar badge chip caption back-button close-button screen-header */
  /* sds-claims: keycap rebind-row */
  /* sds-claims: social-links share-sheet contact-card feedback-form rating-prompt newsletter-signup link-row qr-code */

  /* --- shared ------------------------------------------------------------ */

  .sds-visually-hidden,
  .sds-chart-table,
  .sds-social-links:where([data-variant="icon-only"]) .sds-social-link-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* An input inside a label-shaped control: invisible, but it covers the control, so it takes
     clicks, focus and the arrow keys natively (segmented radios, single tiles, chips, reactions). */
  :is(.sds-radio-group[data-variant="segmented"] .sds-radio, .sds-choice-tile, .sds-chip, .sds-reaction) > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }

  .sds-social-link,
  .sds-link-row,
  .sds-reaction,
  .sds-keycap {
    transition:
      background-color var(--sds-motion-fast) var(--sds-ease-standard),
      border-color var(--sds-motion-fast) var(--sds-ease-standard),
      color var(--sds-motion-fast) var(--sds-ease-standard),
      box-shadow var(--sds-motion-fast) var(--sds-ease-standard),
      transform var(--sds-motion-fast) var(--sds-ease-standard);
  }

  /* Focus: always visible on keyboard and controller focus. */
  .sds-checkbox:focus-visible,
  .sds-select:focus-visible,
  .sds-text-input:focus-visible,
  .sds-choice-tile:focus-visible,
  .sds-list-item > :is(button, a):focus-visible,
  .sds-scroll-area:focus-visible,
  .sds-disclosure > summary:focus-visible,
  .sds-chip:focus-visible,
  .sds-chip > button:focus-visible,
  .sds-back-button:focus-visible,
  .sds-close-button:focus-visible,
  .sds-social-link:focus-visible,
  .sds-link-row:focus-visible,
  .sds-contact-address:focus-visible,
  .sds-radio > input:focus-visible,
  .sds-radio-group[data-variant="segmented"] .sds-radio:has(> input:focus-visible),
  .sds-choice-tile:has(> input:focus-visible),
  .sds-chip:has(> input:focus-visible),
  .sds-reaction:has(> input:focus-visible) {
    outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
    outline-offset: var(--sds-focus-ring-offset);
  }

  /* --- eyebrow (issue 164, pack site): the kicker above a title, in the eyebrow role, with an optional
     index ("01"). */

  .sds-eyebrow {
    display: block;
    margin-block: 0;
    color: var(--sds-color-text-muted);
    font-family: var(--sds-font-ui);
    font-size: calc(var(--sds-type-eyebrow-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-eyebrow-weight);
    letter-spacing: var(--sds-type-eyebrow-tracking);
    line-height: var(--sds-type-eyebrow-line-height);
    text-transform: var(--sds-type-eyebrow-transform);
  }

  .sds-eyebrow-index {
    margin-inline-end: var(--sds-space-3);
    color: var(--sds-color-accent-text);
    font-variant-numeric: tabular-nums;
  }

  .sds-list-item > :is(button, a) > :last-child:is(.sds-icon, .sds-badge, span):not(:first-child, .sds-list-item-value + *) {
    margin-inline-start: auto;
  }

  @keyframes sds-progress-slide {
    from {
      background-position: -100% 0;
    }

    to {
      background-position: 200% 0;
    }
  }

  .sds-screen-header > :is(.sds-back-button, .sds-close-button):first-child {
    grid-area: back;
  }

  /* --- keycap: kbd (keyboard label) or span > svg (device glyph) ------------- */

  .sds-keycap {
    position: relative; /* holds the glyph's visually hidden label inside its own box */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: var(--sds-keycap-md-size);
    height: var(--sds-keycap-md-size);
    padding: 0 var(--sds-space-3);
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-bottom-width: var(--sds-border-heavy);
    border-radius: var(--sds-keycap-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-mono);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }

  .sds-keycap:where([data-size="sm"]) {
    min-width: var(--sds-keycap-sm-size);
    height: var(--sds-keycap-sm-size);
    padding: 0 var(--sds-space-2);
    border-bottom-width: var(--sds-border-thick);
    font-size: calc(var(--sds-type-min-size) * var(--sds-type-scale));
  }

  .sds-keycap:where([data-size="lg"]) {
    min-width: var(--sds-keycap-lg-size);
    height: var(--sds-keycap-lg-size);
    padding: 0 var(--sds-space-4);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
  }

  .sds-keycap:where([data-variant="keyboard"]) {
    text-transform: none;
  }

  /* Device glyphs: the glyph is the whole cap (Kenney glyphs carry their own outline). */
  .sds-keycap:where([data-variant="mouse"], [data-variant="xbox"], [data-variant="playstation"], [data-variant="switch"], [data-variant="touch"]):has(> .sds-keycap-glyph) {
    width: var(--sds-keycap-md-size);
    min-width: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
  }

  .sds-keycap:where([data-size="sm"]):has(> .sds-keycap-glyph) {
    width: var(--sds-keycap-sm-size);
  }

  .sds-keycap:where([data-size="lg"]):has(> .sds-keycap-glyph) {
    width: var(--sds-keycap-lg-size);
  }

  .sds-keycap-glyph {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: none;
  }

  .sds-keycap:where([data-state="pressed"]) {
    border-bottom-width: var(--sds-border-thin);
    border-color: var(--sds-color-accent-text);
    color: var(--sds-color-text);
    transform: translateY(var(--sds-space-1));
  }

  .sds-keycap:where([data-state="unbound"]) {
    border-style: dashed;
    border-bottom-width: var(--sds-border-thin);
    background-color: transparent;
    color: var(--sds-color-text-faint);
  }

  /* --- rebind-row (a field-row whose control captures the next input) -------- */

  .sds-rebind-row .sds-field-row-control > button {
    min-width: calc(var(--sds-touch-target) * 3);
  }

  .sds-rebind-prompt {
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
  }

  .sds-rebind-row:not([data-state="listening"]) .sds-rebind-prompt,
  .sds-rebind-row:where([data-state="listening"]) .sds-field-row-control > button > .sds-keycap {
    display: none;
  }

  .sds-rebind-row:where([data-state="listening"]) {
    background-color: var(--sds-color-accent-soft);
  }

  .sds-rebind-row:where([data-state="listening"]) .sds-field-row-control > button {
    border-color: var(--sds-color-accent-text);
    animation: sds-pulse calc(var(--sds-motion-slow) * 3) var(--sds-ease-standard) infinite;
  }

  .sds-rebind-row:where([data-state="conflict"]) {
    background-color: var(--sds-color-danger-soft);
    box-shadow: inset var(--sds-border-heavy) 0 0 var(--sds-color-danger);
  }

  .sds-rebind-row:where([aria-disabled="true"]) .sds-keycap {
    color: var(--sds-color-on-disabled);
  }

  /* Reduced motion: no pulse. */
  @media (prefers-reduced-motion: reduce) {
    .sds-rebind-row .sds-field-row-control > button {
      animation: none;
    }
  }

  :root[data-sds-motion="reduce"] .sds-rebind-row .sds-field-row-control > button {
    animation: none;
  }

  @keyframes sds-pulse {
    50% {
      opacity: var(--sds-opacity-muted);
    }
  }

  :where(.sds-drop-target) {
    position: relative;
  }

  :where(:root[data-sds-input="gamepad"]),
  :where(:root[data-sds-input="gamepad"] *) {
    cursor: none;
  }

  :root[data-sds-motion="reduce"] .sds-drag-ghost {
    transform: translate(var(--_x, 0px), var(--_y, 0px));
  }
}