@layer tokens, base, components, layouts, screens;

@layer tokens {
  /* The catalogue look of Attire: ink chrome from the design system; the only hues are the Wada
     colours of the garments. */
  :root {
    --screen-title: 2rem;
    --screen-title-phone: 1.5rem;
    --screen-title-weight: 300;
    --screen-title-track: -0.02em;
    --screen-title-leading: 1.1;
    --photo-ground: light-dark(#ffffff, #ececea);
    --grid-gap: 12px;
    --grid-gap-wide: 16px;
    --grid-row-gap-wide: 24px;
    --section-title: 1rem;
    /* The compact chips of the filters (Blanco): under --tap, as a second way to a choice. */
    --chip-compact: 36px;
    --title-row-space: 40px;
    --panel-width: 360px;
    /* The Photos or Colour switch over the cards (WAR-11). */
    --cards-switch-width: 256px;
    --band-pad: 14px;
    --field-tall: 280px;
    --field-short: 180px;
    --strip-height: 40px;
    /* The palettes of a row of the Fill tab (FIL-7). */
    --strip-small: 12px;
    --topbar-height: 56px;
    --nav-height: 56px;
    --wordmark: 1.375rem;
    --wordmark-track: 0.02em;
    --weight-book: 500;
    /* Blanco has no colour in the chrome: the checked state, the pills and the current version are
       ink on stone. */
    --done: var(--ink);
    --done-soft: var(--surface-2);
    /* The text on a field of a Wada colour (PAL-5): the same in both themes, since the field is data. */
    --on-field-dark: #141414;
    --on-field-light: #ffffff;
    --dot: 10px;
    --detail-gap: 48px;
    --combo-number: 88px;
    --combo-row: 72px;
    /* No rail (DSV-5): the start margin is the frame's side margin, as the end one. The frame is
       1200px wide, centred, from 1024px. */
    --rail-width: var(--frame-side);
    --frame-max: 1200px;
  }

  /* The column of Settings from 840px (SET-2). */
  :root {
    --settings-max: 1040px;
  }
}

@layer base {
  body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font: var(--text-m)/1.4 var(--font);
    -webkit-tap-highlight-color: transparent;
    /* The page keeps out of a cutout on either side (LAY-4). */
    padding-inline-start: env(safe-area-inset-left);
    padding-inline-end: env(safe-area-inset-right);
  }

  button,
  input {
    font: inherit;
    color: inherit;
  }

  /* From 600px the top bar and the content share the frame (DSV-5): the body pads the frame's side
     margins (LAY-4), and the content takes the full width of the frame. */
  @media (min-width: 600px) {
    body {
      --page-max: 100%;
      padding-left: calc(var(--rail-width) + env(safe-area-inset-left));
      padding-right: calc(var(--frame-side) + env(safe-area-inset-right));
    }
  }
}

@layer components {
  /* List */

  /* @component swatch
     @summary A block of one palette colour. The code sets its background to the hex of the colour.
     @variant dot    A small round mark beside a name.
     @example <span class="swatch" style="background: #f9c1ce"></span>
     @example <span class="swatch dot" style="background: #ae5224"></span> */
  .swatch {
    display: inline-block;
    flex: none;
    width: var(--tap);
    height: var(--tap);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    vertical-align: middle;
  }

  .swatch.dot {
    width: var(--icon-s);
    height: var(--icon-s);
    border-radius: var(--radius-round);
  }

  /* @component strip
     @summary The colours of a combination as equal blocks in one row.
     @part strip-block  One colour. The code sets its background.
     @example <span class="strip"><span class="strip-block" style="background: #f9c1ce"></span><span class="strip-block" style="background: #2e5f8a"></span><span class="strip-block" style="background: #ae5224"></span></span> */
  .strip {
    display: inline-flex;
    flex: none;
    width: var(--tap-l);
    height: var(--icon-s);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    vertical-align: middle;
  }

  .strip-block {
    flex: 1;
  }

  /* @component color-fields
     @summary The colours of a combination in its detail: tall equal fields, each with its name and hex at the bottom, in dark or light text (data-ink, PAL-5).
     @part color-fields-item  One colour. The code sets its background.
     @part color-fields-hex   The hex of the colour.
     @state data-ink  On an item: dark or light, the colour of its text.
     @example <div class="color-fields" style="width: 100%"><div class="color-fields-item" data-ink="light" style="background: #7c4226"><span>Brown</span><span class="color-fields-hex">#7c4226</span></div><div class="color-fields-item" data-ink="dark" style="background: #ffdd00"><span>Apricot Yellow</span><span class="color-fields-hex">#ffdd00</span></div></div> */
  .color-fields {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    height: var(--field-short);
    margin-bottom: var(--space-4);
    overflow: hidden;
    border-radius: var(--radius-l);
  }

  .color-fields-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-half);
    min-width: 0;
    padding: var(--space-4);
    font-size: var(--text-s);
    overflow-wrap: anywhere;
  }

  .color-fields-item[data-ink="dark"] {
    color: var(--on-field-dark);
  }

  .color-fields-item[data-ink="light"] {
    color: var(--on-field-light);
  }

  .color-fields-hex {
    font-variant-numeric: tabular-nums;
  }

  @media (min-width: 840px) {
    .color-fields {
      height: var(--field-tall);
    }
  }

  /* @component swatch-grid
     @summary The colours of the palette as buttons that scroll. The chosen one has aria-pressed="true".
     @part swatch-grid-item  One colour. The code sets its background, and its name as aria-label.
     @example <div class="swatch-grid" style="width: 100%"><button class="swatch-grid-item" type="button" aria-label="Hermosa Pink" aria-pressed="true" style="background: #f9c1ce"></button><button class="swatch-grid-item" type="button" aria-label="Burnt Sienna" aria-pressed="false" style="background: #ae5224"></button></div> */
  .swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tap), 1fr));
    gap: var(--space-1);
    max-height: calc(var(--tap) * 4);
    margin: var(--space-3) 0;
    padding: var(--space-1);
    overflow-y: auto;
  }

  .swatch-grid-item {
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
  }

  .swatch-grid-item[aria-pressed="true"] {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  /* @component image-slider
     @summary The images of a garment in its detail, one at a time in a row that snaps: a swipe, or an arrow from 600px, shows the next. The colour band under it counts them.
     @part image-slider-track  The row of pictures, each the full width.
     @part image-slider-prev   The arrow to the image before, from 600px; it shows on hover or focus.
     @part image-slider-next   The arrow to the image after.
     @part image-slider-count  The place of the shown image and the count, in the colour band.
     @example <div class="image-slider" style="width: 240px"><div class="image-slider-track"><span class="garment-picture hero" style="background: #4b3317" role="img" aria-label="Chinos"></span><span class="garment-picture hero" style="background: #848061" role="img" aria-label="Chinos"></span></div><button class="image-slider-prev" type="button" aria-label="Previous image" disabled><svg class="icon" aria-hidden="true"><use href="icons.svg#back"/></svg></button><button class="image-slider-next" type="button" aria-label="Next image"><svg class="icon" aria-hidden="true"><use href="icons.svg#back"/></svg></button></div> */
  .image-slider {
    position: relative;
  }

  .image-slider-track {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .image-slider-track > .garment-picture {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .image-slider-prev,
  .image-slider-next {
    display: none;
  }

  @media (min-width: 600px) {
    .image-slider-prev,
    .image-slider-next {
      position: absolute;
      top: 50%;
      display: grid;
      place-items: center;
      width: var(--tap);
      height: var(--tap);
      padding: 0;
      border: 0;
      border-radius: var(--radius-round);
      background: var(--surface);
      box-shadow: var(--shadow-s);
      opacity: 0;
      translate: 0 -50%;
      transition: opacity var(--motion);
    }

    .image-slider-prev {
      left: var(--space-3);
    }

    .image-slider-next {
      right: var(--space-3);
    }

    .image-slider-next > .icon {
      transform: scaleX(-1);
    }

    .image-slider:hover > .image-slider-prev,
    .image-slider:hover > .image-slider-next,
    .image-slider-prev:focus-visible,
    .image-slider-next:focus-visible {
      opacity: 1;
    }

    .image-slider-prev:disabled,
    .image-slider-next:disabled {
      visibility: hidden;
    }
  }

  .image-slider-count {
    font-variant-numeric: tabular-nums;
  }

  /* @component image-grid
     @summary The images of a link in the garment sheet. A tap on one keeps it or drops it; a kept
       one shows a star, which is on for the main image.
     @part image-grid-item  One image and, once kept, its star.
     @part image-grid-pick  The button that keeps the image, with aria-pressed and a label.
     @part image-grid-img   The image.
     @part image-grid-main  The star: a button icon toggle, on for the main image.
     @example <div class="image-grid" style="width: 100%"><div class="image-grid-item"><button class="image-grid-pick" type="button" aria-pressed="true" aria-label="Image 1"><img class="image-grid-img" alt="" src="icons/logo.png"></button><button class="button icon toggle image-grid-main" type="button" aria-pressed="true" aria-label="Main"><svg class="icon" aria-hidden="true"><use href="icons.svg#star"/></svg></button></div><div class="image-grid-item"><button class="image-grid-pick" type="button" aria-pressed="false" aria-label="Image 2"><img class="image-grid-img" alt="" src="icons/icon-192.png"></button></div></div> */
  .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--tap-l) * 1.5), 1fr));
    gap: var(--space-2);
    max-height: calc(var(--tap-l) * 5);
    margin: var(--space-3) 0;
    padding: var(--space-1);
    overflow-y: auto;
  }

  .image-grid-item {
    position: relative;
  }

  .image-grid-pick {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--bg);
    opacity: 0.6;
  }

  .image-grid-pick[aria-pressed="true"] {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    opacity: 1;
  }

  .image-grid-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .image-grid-main {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    border-radius: var(--radius-round);
    background: var(--surface);
    box-shadow: var(--shadow-s);
  }

  .image-grid-main[aria-pressed="true"] .icon {
    fill: currentColor;
  }

  /* @component color-pick
     @summary The colour of a garment: the input of the phone, which snaps to the palette, and the name.
     @part color-pick-input  The native colour input.
     @part color-pick-name   The name of the chosen palette colour.
     @example <div class="color-pick"><input class="color-pick-input" type="color" value="#f9c1ce" aria-label="Colour"><span class="color-pick-name">Hermosa Pink</span></div> */
  .color-pick {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0 0;
  }

  .color-pick-input {
    flex: none;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: none;
  }

  .color-pick-name {
    font-weight: var(--weight-strong);
  }

  /* @component detail-back
     @scope wardrobe, combinations
     @summary The Back button of a detail where it shows alone: its arrow lines up with the content edge, and a space parts it from the head.
     @example <button class="button quiet pane-back detail-back" type="button"><svg class="icon" aria-hidden="true"><use href="icons.svg#back"/></svg><span>Back</span></button> */
  .detail-back {
    gap: var(--space-1);
    margin: 0 0 var(--space-3) calc(-1 * var(--space-2));
    padding-inline: var(--space-2) var(--space-3);
  }

  /* @component season-filter
     @summary The season filter of the details and the random panel: a group of compact outline chips, 4px apart; the pressed one is ink.
     @example <div class="cluster season-filter" role="group" aria-label="Season" style="width: 100%"><button class="chip surface" type="button" aria-pressed="true">Any</button><button class="chip surface" type="button" aria-pressed="false">Warm</button><button class="chip surface" type="button" aria-pressed="false">Cold</button></div> */
  .season-filter {
    gap: var(--space-1);
  }

  /* A compact chip keeps the tap height (TAP-1) and draws its outline and fill --chip-compact high
     inside it. */
  .season-filter > .chip,
  .size-filter > .chip {
    position: relative;
    isolation: isolate;
    padding: 0 var(--space-3);
    border: 0;
    background: none;
    font-size: var(--text-s);
  }

  .season-filter > .chip::before,
  .size-filter > .chip::before {
    content: '';
    position: absolute;
    inset: calc((var(--tap) - var(--chip-compact)) / 2) 0;
    z-index: -1;
    border: 1px solid var(--control);
    border-radius: var(--radius-control);
  }

  .season-filter > .chip[aria-pressed="true"]::before,
  .size-filter > .chip[aria-pressed="true"]::before {
    border-color: var(--ink);
    background: var(--ink);
  }

  /* @component outfits
     @summary The outfits of a detail: a head of the title and the count, the season filter, then the outfit cards.
     @part outfits-head   The title and the count, on one line.
     @part outfits-title  The title.
     @part outfits-count  The count of the outfits.
     @part outfits-list   The list of the cards.
     @example <div class="outfits" style="width: 100%"><div class="outfits-head"><h2 class="outfits-title">Outfits</h2><span class="outfits-count">1 outfit</span></div><ul class="outfits-list"><li class="look"><div class="look-head"><span class="look-number">No. 12</span></div></li></ul></div> */
  .outfits-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-5);
  }

  .outfits-title {
    margin: 0;
    font-size: var(--section-title);
    font-weight: var(--weight-book);
  }

  .outfits-count {
    color: var(--muted);
    font-size: var(--text-s);
  }

  .outfits-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* @component look
     @summary One outfit as a look on a card: its number and the exact mark, then its garments side by side, each with its picture, name and colour.
     @part look-head    The number and the exact mark.
     @part look-number  The number of the combination.
     @part look-row     The garments, side by side in equal columns.
     @part look-item    One garment.
     @part look-name    The name of the garment.
     @part look-color   A small dot and the name of the colour.
     @part look-added   The mark of a neutral that completion added (OUT-14).
     @example <ul class="outfits-list" style="width: 320px"><li class="look"><div class="look-head"><span class="look-number">No. 69</span><span class="pill">Exact</span></div><ul class="look-row"><li class="look-item"><span class="garment-picture worn" style="background: #a1a39a" aria-hidden="true"></span><span class="look-name">Jumper</span><span class="look-color"><span class="swatch dot" style="background: #a1a39a"></span>Warm Gray</span></li><li class="look-item"><span class="garment-picture worn" style="background: #111314" aria-hidden="true"></span><span class="look-name">Trousers</span><span class="look-color"><span class="swatch dot" style="background: #111314"></span>Black</span></li></ul></li></ul> */
  .look {
    padding: var(--space-4);
    border-radius: var(--radius-l);
    background: var(--surface);
  }

  .look-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .look-number {
    font-weight: var(--weight-book);
  }

  .look-row {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .look-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-half);
    min-width: 0;
  }

  .look-item > .garment-picture {
    margin-bottom: var(--space-1);
  }

  .look-name {
    font-weight: var(--weight-book);
    overflow-wrap: anywhere;
  }

  .look-color {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--muted);
    font-size: var(--text-s);
  }

  .look-color > .swatch.dot {
    width: var(--dot);
    height: var(--dot);
  }

  .look-added {
    color: var(--muted);
    font-size: var(--text-s);
    font-style: italic;
  }

  /* @component color-band
     @summary The colour of a garment under its picture: the colour name and its hex, in dark or light text by the luminance of the colour (data-ink, PAL-5).
     @part color-band-hex  The hex of the colour.
     @state data-ink  dark or light: the colour of the text.
     @example <div class="color-band" data-ink="light" style="background: #4b3317; width: 280px"><span>Vandyke Brown</span><span class="color-band-hex">#4b3317</span></div>
     @example <div class="color-band" data-ink="dark" style="background: #ffdd00; width: 280px"><span>Apricot Yellow</span><span class="color-band-hex">#ffdd00</span></div> */
  .color-band {
    display: flex;
    gap: var(--space-3);
    padding: var(--band-pad) var(--space-4);
    font-size: var(--text-s);
  }

  .color-band[data-ink="dark"] {
    color: var(--on-field-dark);
  }

  .color-band[data-ink="light"] {
    color: var(--on-field-light);
  }

  .color-band-hex {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
  }


  /* @extends switch */
  /* The track is --ink when on (Blanco), so the knob takes --on-ink to show in both themes. */
  .switch-input:checked::after {
    background: var(--on-ink);
  }

  /* @component phone-brand
     @summary The top bar of the phone: the wordmark over a --line rule. From 600px the top bar of nav-bar holds it.
     @example <div class="phone-brand" style="width: 100%">Attire</div> */
  .phone-brand {
    display: flex;
    align-items: center;
    min-height: calc(var(--topbar-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) var(--space-4) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--wordmark);
    font-weight: var(--weight-strong);
    letter-spacing: var(--wordmark-track);
    text-transform: uppercase;
  }

  @media (min-width: 600px) {
    .phone-brand {
      display: none;
    }
  }

  /* @extends nav-bar */
  /* Below 600px the bottom bar shows the sections as text: no icon, no pill, the current one in
     --text at weight --weight-book. */
  .nav-item > .icon {
    display: none;
  }

  .nav-item {
    font-size: var(--text-s);
  }

  .nav-item[aria-current="page"] {
    color: var(--text);
    font-weight: var(--weight-book);
  }

  /* From 600px the bar is a top bar across the frame (NAV-4, NAV-5): the wordmark, the sections as
     text, and the account foot at the end, over a --line rule. Below 600px it stays the bottom bar.
     These rules follow the shared ones of 600px and 1024px, so they win at both. */
  @media (min-width: 600px) {
    .nav-bar {
      position: static;
      order: -1;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: var(--space-6);
      width: auto;
      min-height: calc(var(--topbar-height) + env(safe-area-inset-top));
      padding: env(safe-area-inset-top) var(--gutter) 0;
      border: 0;
      border-bottom: 1px solid var(--line);
    }

    .nav-brand {
      display: flex;
      align-items: center;
      padding: 0;
      font-size: var(--wordmark);
      font-weight: var(--weight-strong);
      letter-spacing: var(--wordmark-track);
      text-transform: uppercase;
    }

    .nav-brand > img,
    .nav-item > .icon,
    .nav-bar > .nav-foot > .icon {
      display: none;
    }

    .nav-item,
    .nav-item:hover,
    .nav-item[aria-current="page"] {
      flex: none;
      flex-direction: row;
      gap: 0;
      height: var(--tap);
      padding: 0;
      border-radius: 0;
      background: none;
      font-size: var(--text-m);
    }

    .nav-item:hover {
      color: var(--text);
    }

    .nav-item[aria-current="page"] {
      font-weight: var(--weight-normal);
    }

    .nav-bar > .nav-foot:not([hidden]) {
      position: static;
      margin: 0 0 0 auto;
      padding: 0;
      font-size: var(--text-s);
    }

    .nav-foot-text {
      display: inline;
    }
  }

  /* @extends app-header */
  /* The title row of a view: a light title at --screen-title, the summary of the view, and Add
     garment at the end. From 600px it stands under the top bar, which takes the cutout at the top. */
  .app-header-title {
    font-size: var(--screen-title-phone);
    font-weight: var(--screen-title-weight);
    letter-spacing: var(--screen-title-track);
  }

  /* Below 600px the title row is a column: the title, the summary, then Add garment at full width
     (NAV-6). */
  .app-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-bottom: 0;
  }

  .app-header > .header-add:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .app-header-subtitle {
    margin-top: var(--space-2);
    font-size: var(--text-m);
  }

  .app-header-subtitle:empty {
    display: none;
  }

  @media (min-width: 600px) {
    .app-header {
      flex-direction: row;
      align-items: flex-end;
      padding-top: var(--space-7);
      padding-bottom: var(--title-row-space);
      border-bottom: 0;
    }

    .app-header-title {
      font-size: var(--screen-title);
    }
  }

  /* @component garment-picture
     @summary The picture of a garment: its main image whole on the photo ground, or the drawing of its shape in its colour (role img) when it has none or it fails to load (GAR-14).
     @part garment-picture-img  The image, contained in the box.
     @part garment-shape        The drawing of the shape, a symbol of icons.svg filled with the colour of the garment, with a --muted outline.
     @variant card  3:4, in a card of the grid.
     @variant hero  4:5, in the detail.
     @variant worn  3:4, in a look.
     @variant field  2:1, the colour only, in a card or a look under Colour (WAR-11).
     @example <span class="garment-picture card" style="width: 120px" aria-hidden="true"><svg class="icon garment-shape" aria-hidden="true" style="color: #a5c8d1"><use href="icons.svg#shape-shirt"/></svg></span>
     @example <span class="garment-picture card field" style="width: 120px; background: #a5c8d1" aria-hidden="true"></span>
     @example <span class="garment-picture hero" style="width: 200px"><img class="garment-picture-img" alt="Trousers" src="./icons/icon-192.png"></span> */
  .garment-picture {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--photo-ground);
  }

  .garment-picture.hero {
    aspect-ratio: 4 / 5;
  }

  .garment-picture.field {
    aspect-ratio: 2 / 1;
  }

  /* The drawing fills most of the box. */
  .garment-picture > .garment-shape {
    width: 76%;
    height: 76%;
    fill: currentColor;
    stroke: var(--muted);
    stroke-width: 0.75;
  }

  /* The line scales with the drawing: the detail draws it about 4 times larger than a card. */
  .garment-picture.hero > .garment-shape {
    stroke-width: 0.25;
  }

  .garment-picture-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--motion) var(--ease);
  }
}

@layer layouts {
  /* @extends pane
     @variant wide    Combinations: from 840px the list and the detail share the width 5 to 7.
     @variant single  The detail shows alone at every width, with its Back, and takes the full width;
                      with no entry open there is no detail. Wardrobe from 1024px: the grid and the random
                      panel side by side. */
  /* Below 600px main has no side padding, so the grid takes it here. */
  .pane.single,
  .pane.wide {
    max-width: none;
    padding: var(--space-4) var(--space-4) 0;
  }

  @media (min-width: 600px) {
    .pane.single,
    .pane.wide {
      padding: 0;
    }
  }

  /* From 840px the list and the detail of the wide variant share the width 5 to 7, and the detail
     stands on the page, not on a card. */
  @media (min-width: 840px) {
    .pane.wide {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      column-gap: var(--space-7);
    }

    .pane.wide > .pane-detail {
      margin-block: 0;
      padding: 0 0 var(--space-4);
      background: none;
    }
  }

  .pane.single:not([data-detail]) > .pane-detail,
  .pane.single[data-detail] > .pane-list {
    display: none;
  }

  .pane.single > .pane-detail,
  .pane.wide > .pane-detail {
    padding: 0 0 var(--space-4);
  }

  @media (min-width: 840px) {
    .pane.single {
      display: block;
    }

    .pane.single > .pane-detail {
      position: static;
      margin: 0;
      padding: 0 0 var(--space-4);
      border-radius: 0;
      background: none;
    }

    .pane.single .pane-back {
      display: inline-flex;
    }
  }

  @media (min-width: 1024px) {
    .pane.single:not([data-detail]) > .pane-list {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--panel-width);
      align-items: start;
      column-gap: var(--space-7);
    }
  }
}

@layer screens {
  /* @component version-status
     @scope settings
     @summary The state of the installed version: a sign, and a text for the outdated state only.
     @part version-status-text  The text of the state. With a sign it stays for screen readers only.
     @example <span class="version-status" data-status="current" role="status"><svg data-for="current" class="icon small" aria-hidden="true"><use href="icons.svg#check-circle"/></svg><span class="version-status-text">Up to date</span></span> */
  /* Relative, so the hidden text stays inside the scrolling main and does not scroll the page. */
  .version-status {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .version-status [data-for] {
    display: none;
  }

  .version-status[data-status='checking'] [data-for='checking'],
  .version-status[data-status='current'] [data-for='current'],
  .version-status[data-status='outdated'] [data-for='outdated'],
  .version-status[data-status='unknown'] [data-for='unknown'] {
    display: block;
  }

  .version-status[data-status='checking'] .icon {
    animation: spin var(--motion-slow) linear infinite;
  }

  .version-status[data-status='current'] {
    color: var(--done);
  }

  .version-status[data-status='outdated'] {
    flex-basis: 100%;
    justify-content: center;
    color: var(--warning);
  }

  .version-status[data-status='unknown'] {
    color: var(--danger);
  }

  .version-status:not([data-status='outdated']) .version-status-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }

  /* @component combo-row
     @scope combinations
     @summary A combination of the list: its number, its colours as one bar and the count of its outfits, 72px high, a --line between rows. The open one has aria-current="true" on --secondary.
     @part combo-list         The list of the rows.
     @part combo-list-item    One row of the list.
     @part combo-row-number   The number of the combination.
     @part combo-row-count    The count of its outfits.
     @example <ul class="item-list combo-list" style="width: 100%"><li class="combo-list-item"><button class="combo-row" type="button" aria-current="true"><span class="combo-row-number">No. 110</span><span class="strip"><span class="strip-block" style="background: #7c4226"></span><span class="strip-block" style="background: #4b3317"></span></span><span class="combo-row-count">1 outfit</span></button></li><li class="combo-list-item"><button class="combo-row" type="button"><span class="combo-row-number">No. 119</span><span class="strip"><span class="strip-block" style="background: #a5c8d1"></span><span class="strip-block" style="background: #12354e"></span></span><span class="combo-row-count">20+ outfits</span></button></li></ul> */
  .combo-list {
    margin-top: var(--space-2);
  }

  .combo-list-item + .combo-list-item {
    border-top: 1px solid var(--line);
  }

  .combo-row {
    display: grid;
    grid-template-columns: var(--combo-number) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    min-height: var(--combo-row);
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-s);
    background: none;
    text-align: start;
    cursor: pointer;
  }

  .combo-row:hover,
  .combo-row[aria-current="true"] {
    background: var(--secondary);
  }

  .combo-row > .strip {
    width: 100%;
    height: var(--strip-height);
    border: 0;
    border-radius: 0;
  }

  .combo-row-count {
    color: var(--muted);
    font-size: var(--text-s);
  }

  /* @component combo-head
     @scope combinations
     @summary The head of a combination detail: its number and the count of its colours.
     @part combo-head-title  The number.
     @part combo-head-count  The count of colours.
     @example <div class="combo-head" style="width: 100%"><h2 class="combo-head-title">No. 110</h2><span class="combo-head-count">2 colours</span></div> */
  .combo-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .combo-head-title {
    margin: 0;
    font-size: var(--text-m);
    font-weight: var(--weight-book);
  }

  .combo-head-count {
    color: var(--muted);
    font-size: var(--text-s);
  }

  /* @component family-pick
     @scope combinations
     @summary The select of the palette family in use, at the top of the list of Combinations (CMB-5).
     @example <select class="select family-pick" aria-label="Palette family" style="width: 100%"><option>Sanzo Wada</option><option>Complementary</option></select> */
  .family-pick {
    margin-bottom: var(--space-3);
  }

  /* @component size-filter
     @scope combinations
     @summary The chips of the size filter of Combinations: a scroll cluster of compact outline chips (as season-filter); the pressed one is ink.
     @example <div class="cluster scroll size-filter" style="width: 100%"><button class="chip surface" type="button" aria-pressed="true">All</button><button class="chip surface" type="button" aria-pressed="false">2 colours</button></div> */
  .size-filter {
    margin-bottom: var(--space-3);
  }

  /* @component wearable-switch
     @scope combinations
     @summary The switch "only the ones I can wear" of Combinations: a plain row on the page, with no card.
     @example <label class="switch wearable-switch" style="width: 100%"><span>Only the ones I can wear</span><input class="switch-input" type="checkbox" role="switch" checked></label> */
  .wearable-switch {
    padding: 0;
  }

  /* @component wardrobe-cards
     @scope settings
     @summary The switch of the cards of the wardrobe, a row of Preferences in Settings: Photos shows the main image of each garment, Colour shows the field of its colour only (WAR-11).
     @example <div class="segmented wardrobe-cards" role="group" aria-label="Show" style="width: 100%"><button class="segment" type="button" aria-pressed="true">Photos</button><button class="segment" type="button" aria-pressed="false">Colour</button></div> */
  /* @extends segmented */
  .wardrobe-cards {
    flex: 1 1 auto;
    max-width: var(--cards-switch-width);
    margin: var(--space-2) 0 var(--space-2) auto;
  }

  .settings-row:has(> .wardrobe-cards) > .settings-row-label {
    flex: none;
  }

  /* @component garment-groups
     @scope wardrobe
     @summary The garments by slot, each slot a head with its count over a grid of cards: 2 columns, 4 from 600px.
     @part garment-groups-group  One slot.
     @part garment-groups-head   The name of the slot and its count, on one line.
     @part garment-groups-title  The name of the slot.
     @part garment-groups-count  The count of its garments.
     @part garment-groups-grid   The cards of the slot.
     @example <div class="garment-groups" style="width: 100%"><section class="garment-groups-group"><div class="garment-groups-head"><h2 class="garment-groups-title">Tops</h2><span class="garment-groups-count">2 garments</span></div><ul class="garment-groups-grid"><li class="garment-card"><button class="garment-card-open" type="button"><span class="garment-picture card" style="background: #a5c8d1" aria-hidden="true"></span><span class="garment-card-name">Shirt</span><span class="garment-card-color"><span class="swatch dot" style="background: #a5c8d1"></span>Light Glaucous Blue</span><span class="garment-card-meta">Sfera · Size M · 1 outfit</span></button></li><li class="garment-card"><button class="garment-card-open" type="button"><span class="garment-picture card" style="background: #ffdd00" aria-hidden="true"></span><span class="garment-card-name">Jumper</span><span class="garment-card-color"><span class="swatch dot" style="background: #ffdd00"></span>Apricot Yellow</span><span class="garment-card-meta">0 outfits</span></button></li></ul></section></div> */
  .garment-groups-group + .garment-groups-group {
    margin-top: var(--space-7);
  }

  .garment-groups-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .garment-groups-title {
    margin: 0;
    font-size: var(--section-title);
    font-weight: var(--weight-book);
  }

  .garment-groups-count {
    color: var(--muted);
    font-size: var(--text-s);
  }

  .garment-groups-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 600px) {
    .garment-groups-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .garment-groups-grid {
      gap: var(--grid-row-gap-wide) var(--grid-gap-wide);
    }
  }

  /* @component garment-card
     @scope wardrobe
     @summary A garment of the grid: one button with its picture, its name, its colour and a line of brand, size and count of outfits.
     @part garment-card-open   The button that opens the detail.
     @part garment-card-name   The name of the garment.
     @part garment-card-color  A small dot and the name of the colour.
     @part garment-card-meta   The brand, the size and the count of outfits.
     @example <ul class="garment-groups-grid" style="width: 200px"><li class="garment-card"><button class="garment-card-open" type="button"><span class="garment-picture card" style="background: #7c4226" aria-hidden="true"></span><span class="garment-card-name">Polo</span><span class="garment-card-color"><span class="swatch dot" style="background: #7c4226"></span>Brown</span><span class="garment-card-meta">20+ outfits</span></button></li></ul> */
  .garment-card-open {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
    cursor: pointer;
  }

  .garment-card-open > .garment-picture {
    margin-bottom: var(--space-2);
  }

  .garment-card-open:hover .garment-picture-img {
    transform: scale(1.03);
  }

  .garment-card-name {
    font-weight: var(--weight-book);
    overflow-wrap: anywhere;
  }

  .garment-card-color,
  .garment-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--muted);
    font-size: var(--text-s);
  }

  .garment-card-color > .swatch.dot {
    width: var(--dot);
    height: var(--dot);
  }

  /* @component wardrobe-side
     @scope wardrobe
     @summary The side of the wardrobe: the random outfit. After the grid or the empty state, and from 1024px a column beside it that stays in sight.
     @example <div class="wardrobe-side" style="width: 360px"><aside class="random-panel"><div class="random-panel-head"><h2 class="random-panel-title">Random outfit</h2></div><p class="empty-state inline">No outfit with these garments.</p></aside></div> */
  .wardrobe-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    margin-top: var(--space-7);
  }

  .wardrobe-side:not(:has(> :not([hidden]))) {
    display: none;
  }

  @media (min-width: 1024px) {
    .wardrobe-side {
      position: sticky;
      top: var(--space-4);
      margin-top: 0;
    }
  }

  /* @component random-panel
     @scope wardrobe
     @summary The random outfit of the wardrobe: its head with the season filter, one outfit and Another. The first part of wardrobe-side.
     @part random-panel-head   The title and the season filter.
     @part random-panel-title  The title.
     @example <aside class="random-panel" style="width: 360px"><div class="random-panel-head"><h2 class="random-panel-title">Random outfit</h2></div><p class="empty-state inline">No outfit with these garments.</p></aside> */
  .random-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .random-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .random-panel-head > .season-filter,
  .outfits-head > .season-filter {
    margin: 0;
  }

  .random-panel-title {
    margin: 0;
    font-size: var(--section-title);
    font-weight: var(--weight-book);
  }

  /* @component basics-panel
     @scope wardrobe
     @summary The rows of a list of garments to add: a hint, and one row for each, a swatch of its colour, its name and a line of slot and season. A tap opens a new garment filled with it. The Fill tab builds on it.
     @part basics-panel-hint   The hint over the rows.
     @part basics-panel-list   The rows.
     @part basics-panel-row    One row of the list.
     @part basics-panel-item   Its button.
     @part basics-panel-name   The name of the garment.
     @part basics-panel-meta   Its slot and its season.
     @example <div style="width: 360px"><p class="basics-panel-hint">Tap one to add it.</p><ul class="basics-panel-list"><li class="basics-panel-row"><button class="basics-panel-item" type="button"><span class="swatch" style="background: #12354e"></span><span class="basics-panel-name">Jeans</span><span class="basics-panel-meta">Bottom · All year</span></button></li><li class="basics-panel-row"><button class="basics-panel-item" type="button"><span class="swatch" style="background: #ffffff"></span><span class="basics-panel-name">White sneakers</span><span class="basics-panel-meta">Shoes · All year</span></button></li></ul></div> */
  .basics-panel-hint {
    margin: 0;
    color: var(--muted);
  }

  .basics-panel-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .basics-panel-row + .basics-panel-row {
    border-top: 1px solid var(--line);
  }

  .basics-panel-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-4);
    align-items: center;
    width: 100%;
    min-height: var(--combo-row);
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-s);
    background: none;
    color: inherit;
    text-align: start;
    cursor: pointer;
  }

  .basics-panel-item:hover {
    background: var(--secondary);
  }

  .basics-panel-item > .swatch {
    grid-row: 1 / 3;
  }

  .basics-panel-name {
    align-self: end;
    overflow-wrap: anywhere;
  }

  .basics-panel-meta {
    align-self: start;
    color: var(--muted);
    font-size: var(--text-s);
  }

  /* @component fill
     @scope fill
     @summary The Fill tab: the season filter, a hint, and one row for each suggestion, a missing basic or a colour in a slot that completes sets of the family in use. A row is a basics-panel-item with the outfits it adds on the end, a tag, and for such a colour up to three palettes it completes, the added colour outlined. A tap opens a new garment filled with it.
     @part fill-page      The column of the tab.
     @part fill-hint      The hint over the list.
     @part fill-list      The rows.
     @part fill-item      The button of one row.
     @part fill-gain      The outfits that it adds.
     @part fill-tag       Básico, or the count of palettes that it completes.
     @part fill-palettes  The palettes that it completes.
     @part fill-palette   One palette: its number and its colours.
     @state set           On fill-tag: the tag of a colour that completes sets.
     @state new           On a strip-block of fill-palette: the colour that the row adds.
     @example <ul class="basics-panel-list fill-list" style="width: 360px"><li class="basics-panel-row"><button class="basics-panel-item fill-item" type="button"><span class="swatch" style="background: #ebd3a2"></span><span class="basics-panel-name">Top Ivory Buff</span><span class="fill-gain">+9</span><span class="basics-panel-meta">Top · All year</span><span class="fill-tag set">Completes 2 palettes</span><span class="fill-palettes"><span class="fill-palette"><span>Nº 11</span><span class="strip"><span class="strip-block new" style="background: #ebd3a2"></span><span class="strip-block" style="background: #12354e"></span></span></span><span class="fill-palette"><span>Nº 94</span><span class="strip"><span class="strip-block" style="background: #2b3a4a"></span><span class="strip-block new" style="background: #ebd3a2"></span></span></span></span></button></li><li class="basics-panel-row"><button class="basics-panel-item fill-item" type="button"><span class="swatch" style="background: #12354e"></span><span class="basics-panel-name">Jeans</span><span class="fill-gain">+7</span><span class="basics-panel-meta">Bottom · All year</span><span class="fill-tag">Basic</span></button></li></ul> */
  .fill-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .fill-hint {
    margin: 0;
  }

  /* The Fill tab is one column at every width: the grid of Wardrobe from 1024px is not for it. */
  @media (min-width: 1024px) {
    .pane.single:not([data-detail]) > .fill-page {
      display: flex;
      align-items: stretch;
      max-width: calc(2 * var(--panel-width));
    }
  }

  .fill-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: none;
    row-gap: var(--space-1);
    padding-block: var(--space-3);
  }

  .fill-item > .swatch {
    grid-row: 1 / 4;
    align-self: start;
  }

  .fill-item > .basics-panel-name {
    grid-column: 2;
    grid-row: 1;
  }

  .fill-item > .basics-panel-meta {
    grid-column: 2;
    grid-row: 2;
  }

  .fill-gain {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    font-weight: 600;
  }

  .fill-tag {
    grid-column: 2;
    justify-self: start;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--secondary);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
  }

  .fill-tag.set {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
  }

  .fill-palettes {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2 / -1;
    gap: var(--space-1) var(--space-3);
    color: var(--muted);
    font-size: var(--text-xs);
  }

  .fill-palette {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
  }

  .fill-palette > .strip {
    height: var(--strip-small);
  }

  .fill-palette .strip-block.new {
    outline: 2px solid var(--text);
    outline-offset: -2px;
  }

  /* @component fit-pick
     @scope garment-sheet
     @summary The fit of the garment sheet: a segmented control of four, each segment an icon over a short label, in one line.
     @part fit-pick-label  The name of the fit, under its icon.
     @example <div class="segmented fit-pick" style="width: 100%"><button class="segment" type="button" aria-pressed="true"><svg class="icon" aria-hidden="true"><use href="icons.svg#fit-unknown"/></svg><span class="fit-pick-label">Not said</span></button><button class="segment" type="button" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="icons.svg#check-circle"/></svg><span class="fit-pick-label">Fits</span></button><button class="segment" type="button" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="icons.svg#fit-small"/></svg><span class="fit-pick-label">Too small</span></button><button class="segment" type="button" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="icons.svg#fit-large"/></svg><span class="fit-pick-label">Too large</span></button></div> */
  /* @extends segmented */
  .fit-pick {
    border-radius: var(--radius-l);
  }

  /* The shared control counts up to three segments: the fourth one is this app's. */
  .fit-pick:has(> .segment:nth-child(4)) {
    --segment-count: 4;
  }

  .fit-pick:has(> .segment:nth-child(4)[aria-pressed="true"]) {
    --segment-index: 3;
  }

  .fit-pick::before {
    border-radius: var(--radius-m);
  }

  .fit-pick .segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: var(--space-1) 2px;
    border-radius: var(--radius-m);
  }

  .fit-pick-label {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* @component measure-lines
     @scope garment-sheet
     @summary The measures of the garment sheet: one line each, with the name, the value, the unit and a button that removes the line.
     @part measure-line        One measure.
     @part measure-line-name   The name of the measure; it takes the free width.
     @part measure-line-value  The value, a number.
     @part measure-line-unit   The unit.
     @example <div class="measure-lines" style="width: 100%"><div class="measure-line"><input class="input measure-line-name" type="text" value="Waist"><input class="input measure-line-value" type="text" value="84"><input class="input measure-line-unit" type="text" value="cm"><button class="button icon" type="button" aria-label="Remove measure"><svg class="icon" aria-hidden="true"><use href="icons.svg#trash"/></svg></button></div></div> */
  .measure-lines {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0;
  }

  /* The value and the unit are short: a narrow padding keeps their placeholders whole at 360px. */
  .measure-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4rem 5.5rem var(--tap);
    gap: var(--space-2);
    align-items: center;
  }

  .measure-line .input {
    min-width: 0;
    padding-inline: var(--space-2);
  }

  /* @component garment-form
     @scope garment-sheet
     @summary The body of the garment sheet. A wide button and an input row carry no margin of their own, so the form gives them the space between two controls, and the last control keeps a space above the foot.
     @example <div class="garment-form" style="width: 100%"><label class="field"><input class="input field-input" type="url" placeholder="Link"><span class="field-label">Link</span></label><button class="button outline wide" type="button">Load images</button><div class="input-row"><input class="input" type="url" placeholder="Image URL"><button class="button outline" type="button">Add</button></div></div> */
  .garment-form {
    padding-bottom: var(--space-4);
  }

  .garment-form > .button.wide,
  .garment-form > .input-row {
    margin-top: var(--space-3);
  }

  /* @component brand-suggestions
     @scope garment-sheet
     @summary The brands that the brand field suggests, a plain list-group under the field; its rows start where the text of the field starts.
     @example <ul class="list-group plain brand-suggestions" style="width: 100%"><li><button class="list-row" type="button">Zara</button></li><li><button class="list-row" type="button">Zegna</button></li></ul> */
  .list-group.plain.brand-suggestions .list-row {
    width: 100%;
    padding-inline: var(--space-3);
  }

  /* @component garment-facts
     @scope garment-detail
     @summary The size, the fit, the measures and the dates of a garment in its detail: two columns, each fact a muted label over its value.
     @part garment-facts-item  One fact: its term and its value.
     @example <dl class="garment-facts" style="width: 100%"><div class="garment-facts-item"><dt>Size</dt><dd>32</dd></div><div class="garment-facts-item"><dt>Waist</dt><dd>84 cm</dd></div></dl> */
  .garment-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
    margin: var(--space-6) 0;
  }

  .garment-facts dt {
    color: var(--muted);
    font-size: var(--text-s);
  }

  .garment-facts dd {
    margin: 0;
    font-size: var(--text-m);
    overflow-wrap: anywhere;
  }

  /* @component garment-detail
     @scope wardrobe
     @summary The detail of a garment, alone: Back, then the media (its picture, colour band and image strip) and the info, actions and outfits. From 1024px two columns, 7 to 5, the media in sight while the rest scrolls.
     @part garment-detail-media     The picture or the image slider, and the colour band.
     @part garment-detail-info      The name, the meta line and the facts.
     @part garment-detail-title     The name of the garment.
     @part garment-detail-meta      The slot, the brand and the season.
     @part garment-detail-actions   Edit, Open link and Delete.
     @part garment-detail-outfits   The outfits that contain the garment.
     @example <article class="garment-detail" style="width: 100%"><div class="garment-detail-media"><span class="garment-picture hero" style="background: #4b3317" role="img" aria-label="Chinos, Vandyke Brown"></span><div class="color-band" data-ink="light" style="background: #4b3317"><span>Vandyke Brown</span><span class="color-band-hex">#4b3317</span></div></div><div class="garment-detail-info"><h2 class="garment-detail-title">Chinos</h2><p class="garment-detail-meta">Bottom · Sfera · All year</p></div><div class="cluster garment-detail-actions"><button class="button primary" type="button">Edit</button><button class="button quiet danger" type="button">Delete</button></div></article> */
  .garment-detail-media {
    margin-bottom: var(--space-6);
  }

  .garment-detail-title {
    margin: 0;
    font-size: var(--screen-title-phone);
    font-weight: var(--screen-title-weight);
    letter-spacing: var(--screen-title-track);
    line-height: var(--screen-title-leading);
    overflow-wrap: anywhere;
  }

  .garment-detail-meta {
    margin: var(--space-2) 0 0;
    color: var(--muted);
  }

  .garment-detail-actions {
    margin-bottom: var(--space-7);
  }

  .garment-detail-actions > .danger {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .garment-detail-outfits {
    display: grid;
    gap: var(--space-4);
  }

  @media (min-width: 600px) {
    .garment-detail-title {
      font-size: var(--screen-title);
    }
  }

  @media (min-width: 1024px) {
    .garment-detail {
      column-gap: var(--detail-gap);
    }

    .pane.single[data-detail] > .garment-detail {
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      align-content: start;
    }

    .garment-detail > .pane-back {
      grid-column: 1 / -1;
      justify-self: start;
    }

    .garment-detail-media {
      grid-column: 1;
      grid-row: 2 / span 3;
      position: sticky;
      top: var(--space-4);
      align-self: start;
      margin-bottom: 0;
    }

    .garment-detail-info,
    .garment-detail-actions,
    .garment-detail-outfits {
      grid-column: 2;
    }
  }

  /* @component settings
     @scope settings
     @summary The Settings section: groups of settings rows (list-group) under a list-group-head, then the about lines. One centred column from 600px. A row of Preferences holds a real select laid over it, so a tap opens the native picker.
     @part settings-hint    A line of help below a group head.
     @part settings-section A group head, its hint and its group. From 840px (SET-2) the head and the hint form a column beside the group.
     @example <section class="settings" style="width: 100%"><h2 class="list-group-head">Preferences</h2><div class="list-group"><div class="settings-row"><span class="settings-row-label">Language</span><span class="settings-row-value">English</span><span class="chevron" aria-hidden="true">›</span><select class="select" aria-label="Language"><option>English</option></select></div></div></section> */
  /* The groups are rounded cards on --surface with the margin of the page at every width. */
  .settings {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  .settings-section > .list-group-head {
    margin-inline: 0;
    font-size: var(--text-m);
    font-weight: var(--weight-book);
  }

  .settings .settings-row.danger {
    font-weight: var(--weight-normal);
  }

  .settings-section > .list-group {
    border: 0;
    border-radius: var(--radius-l);
  }

  .settings-hint {
    margin: 0;
    padding: 0 0 var(--space-2);
    color: var(--muted);
    font-size: var(--text-s);
    text-align: start;
    hyphens: auto;
  }

  /* From 840px (SET-2) Settings is a column of at most --settings-max at the start of the frame,
     under the title, and each section is a row: its head and its hint at the left, its group at the
     right, sections split by a line. */
  @media (min-width: 840px) {
    .settings {
      max-width: var(--settings-max);
      margin-inline: 0;
      padding-inline: 0;
    }

    .settings-section {
      display: grid;
      grid-template-columns: var(--panel-width) minmax(0, 1fr);
      grid-template-rows: auto 1fr;
      column-gap: var(--detail-gap);
      align-items: start;
      padding-block: var(--space-7);
    }

    .settings-section + .settings-section {
      border-top: 1px solid var(--line);
    }

    .settings-section > .list-group-head,
    .settings-section > .settings-hint {
      grid-column: 1;
      padding-inline: 0;
    }

    .settings-section > .list-group-head {
      margin: var(--space-4) 0 var(--space-1);
    }

    .settings-section > .list-group {
      grid-column: 2;
      grid-row: 1 / span 2;
    }
  }

  /* @extends list-group */
  .settings .settings-row {
    position: relative;
  }

  /* A row that holds one action button: the button fills the row, with the same inset on each side. */
  .settings .settings-row:has(> .button) {
    padding: var(--space-3);
  }

  .settings .settings-row > .button {
    flex: 1;
  }

  /* The select is invisible: the row shows the ring when the select has the keyboard focus. */
  .settings .settings-row:has(> .select:focus-visible) {
    outline: 2px solid var(--text);
    outline-offset: -2px;
  }

  .settings .settings-row > .select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  /* @component whatsnew
     @scope whatsnew
     @summary The release notes in a sheet: one block for each version, newest first.
     @part whatsnew-body     The body of the sheet, with the blocks.
     @part whatsnew-entry    One version: its line and its notes.
     @part whatsnew-version  The version and its day.
     @part whatsnew-notes    The notes of a version, as a list.
     @example <section class="whatsnew-entry"><h3 class="whatsnew-version">Version 1.2.0 · 20 October 2026</h3><ul class="whatsnew-notes"><li>A new menu.</li></ul></section> */
  .whatsnew-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .whatsnew-version {
    margin: 0 0 var(--space-2);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
  }

  .whatsnew-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding-left: var(--space-5);
  }

  /* @component about
     @scope settings
     @summary The version lines at the end of Settings.
     @part about-line  One line: the version and its state.
     @example <footer class="about"><p class="about-line"><span>Version 0.1.0</span></p></footer> */
  .about {
    margin: var(--space-6) var(--space-3) 0;
    color: var(--muted);
    font-size: var(--text-xs);
    text-align: center;
  }

  .about-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
  }

  /* @component dust
     @scope nav
     @summary The canvas of the dust effect of a nav item that goes away or comes back.
     @example <p>The dust canvas is drawn by dust.js; it has no example of its own.</p> */
  .dust {
    position: fixed;
    z-index: 40;
    pointer-events: none;
  }

  /* @component onboarding
     @scope onboarding
     @summary The walkthrough of the first start, over the full app: a page, the dots, the buttons.
     @variant move             The screen of the old address (ADDR-1): over every layer, the account screen too.
     @part onboarding-logo     The app icon, in the middle of the band above the page. It stays while the pages change.
     @part onboarding-page     The page in view: its drawing, its title and its text.
     @part onboarding-title    The title of a page.
     @part onboarding-text     The text of a page.
     @part onboarding-key      A control named in a text, such as ↻ or +: a key with a border, as inline code.
     @part onboarding-dots     One dot for each page.
     @part onboarding-dot      One dot.
     @part onboarding-actions  Saltar and the next button, side by side. On the last page the next button fills the bar.
     @state on                 On onboarding-dot: the page in view.
     @state enter-next         On onboarding-page: it comes in from the right.
     @state enter-previous     On onboarding-page: it comes in from the left.
     @example <div class="onboarding-actions" style="width: 100%"><button class="button outline quiet" type="button">Skip</button><button class="button primary" type="button">Next</button></div>
     @example <div class="onboarding-dots"><span class="onboarding-dot on"></span><span class="onboarding-dot"></span><span class="onboarding-dot"></span></div> */
  .onboarding {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: calc(var(--space-5) + env(safe-area-inset-top)) calc(var(--space-5) + env(safe-area-inset-right))
      calc(var(--space-5) + env(safe-area-inset-bottom)) calc(var(--space-5) + env(safe-area-inset-left));
    background: var(--bg);
    /* A horizontal slide changes the page, so the browser must not take it. */
    touch-action: pan-y;
    overflow: hidden auto;
  }
  /* ADDR-1: the move screen covers the account screen (z-index 50) too. */
  .onboarding.move {
    z-index: 60;
  }


  /* The free space of the layer is three equal margins: above the logo, below it and below the
     page. The logo thus sits in the middle of the band above the drawing. */
  .onboarding-logo {
    flex: none;
    align-self: center;
    margin-block: auto;
    width: var(--logo);
    height: var(--logo);
  }

  .onboarding-page {
    display: flex;
    flex: none;
    margin-bottom: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    text-align: center;
  }

  .onboarding-page.enter-next,
  .onboarding-page.enter-previous {
    animation: enter var(--motion) ease-out;
  }

  .onboarding-page.enter-next {
    --enter-from: 48px;
  }

  .onboarding-page.enter-previous {
    --enter-from: -48px;
  }

  /* A title can take two lines in some catalogs. It keeps the room of two, with its last line
     next to the text, so the drawing does not move. */
  .onboarding-title {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 2lh;
    margin: 0 0 var(--space-2);
    font-size: var(--text-l);
  }

  /* The longest text of a page, in any catalog, is five lines at 32ch. The text keeps room for
     five, so each page has the same height and the drawing and the logo do not move. */
  .onboarding-text {
    max-width: 32ch;
    /* A line break of a catalog text starts a new line. */
    white-space: pre-line;
    min-height: 5lh;
    margin: 0;
    color: var(--muted);
  }

  .onboarding-key {
    padding: 0 var(--space-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-mono);
    white-space: nowrap;
  }

  /* The icon of a key sits on the line of the text, with a small gap before its text. */
  .onboarding-key > .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: var(--space-1);
    vertical-align: -0.2em;
  }

  .onboarding-key > .icon:only-child {
    margin-right: 0;
  }

  .onboarding-dots {
    display: flex;
    flex: none;
    justify-content: center;
    gap: var(--space-2);
  }

  .onboarding-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-round);
    background: var(--line);
  }

  .onboarding-dot.on {
    background: var(--ink);
  }

  /* Saltar sits beside the next button, on the side away from the thumb. */
  .onboarding-actions {
    display: flex;
    flex: none;
    gap: var(--space-2);
  }

  .onboarding-actions > .button {
    flex: 1 1 50%;
  }

  /* @component onboarding-art
     @scope onboarding
     @summary The line drawing of a walkthrough page, inline in the page. Its shapes take these parts.
     @part art-card     A card shape, filled with --surface.
     @part art-accent   A --primary stroke.
     @part art-soft     A --done-soft fill with a --primary stroke.
     @part art-solid    A solid --primary fill.
     @part art-on-solid A stroke on a solid fill.
     @example <div class="onboarding-art"><svg viewBox="0 0 240 160" aria-hidden="true"><rect class="art-card art-accent" x="20" y="20" width="90" height="120" rx="10"/><circle class="art-solid" cx="160" cy="80" r="13"/><path class="art-on-solid" d="M160 74v12M154 80h12"/></svg></div> */
  .onboarding-art > svg {
    display: block;
    width: min(var(--art-width), 70vw);
    height: auto;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .art-card {
    fill: var(--surface);
  }

  .art-accent {
    stroke: var(--primary);
  }

  .art-soft {
    fill: var(--done-soft);
    stroke: var(--primary);
  }

  .art-solid {
    fill: var(--primary);
    stroke: none;
  }

  .art-on-solid {
    stroke: var(--on-primary);
  }

  /* @component account-row
     @scope settings
     @summary The row Account (ACC-8): the email, and the last sync under it in the muted style. A long email breaks anywhere, not at a hyphen.
     @example <div class="settings-row account-row" style="width: 100%"><span class="settings-row-label">ciro@example.test</span><span class="settings-row-value">Última sincronización: 31/10/26, 18:37</span></div> */
  .settings .settings-row.account-row {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-1);
    padding-block: var(--space-2);
  }

  .settings .settings-row.account-row > .settings-row-label,
  .settings .settings-row.account-row > .settings-row-value {
    flex: none;
    overflow-wrap: anywhere;
    hyphens: none;
  }

  .settings .settings-row.account-row > .settings-row-value {
    font-size: var(--text-s);
  }

  /* @component sync-note
     @scope wardrobe, combinations
     @summary The note over the sections while the sync cannot reach the server (SYNC-11): the changes stay saved on the device.
     @example <p class="sync-note"><svg class="icon small" aria-hidden="true"><use href="icons.svg#offline"/></svg><span>Sin conexión · cambios guardados</span></p> */
  .sync-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-4);
    color: var(--muted);
    font-size: var(--text-s);
  }

  /* @component account
     @scope account
     @summary The screens of the account over the full app (ACC-2): Sign in and Waiting for approval.
       One page shows at a time, in the width of the column, centred. Over the walkthrough.
     @part account-page    One screen.
     @part account-logo    The app icon, at the top of Sign in.
     @part account-title   The name of the screen.
     @part account-text    The line below the title.
     @part account-wait    The large icon of Waiting for approval.
     @example <div class="account-page" style="width: 100%"><h2 class="account-title">Iniciar sesión</h2><p class="account-text">El administrador aprueba cada cuenta nueva.</p><button class="button tonal wide" type="button"><svg class="icon small" aria-hidden="true"><use href="icons.svg#google"/></svg>Continuar con Google</button></div> */
  .account {
    position: fixed;
    inset: 0;
    /* Over the walkthrough and the dust: the sign-in of a first start comes first. */
    z-index: 50;
    display: flex;
    flex-direction: column;
    padding: calc(var(--space-5) + env(safe-area-inset-top)) calc(var(--space-5) + env(safe-area-inset-right))
      calc(var(--space-5) + env(safe-area-inset-bottom)) calc(var(--space-5) + env(safe-area-inset-left));
    background: var(--bg);
    overflow: hidden auto;
  }

  @media (min-width: 600px) {
    .account {
      padding-left: max(var(--space-5) + env(safe-area-inset-left), (100% - var(--content-max)) / 2);
      padding-right: max(var(--space-5) + env(safe-area-inset-right), (100% - var(--content-max)) / 2);
    }
  }

  .account-page {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
  }

  .account-logo {
    align-self: center;
    width: var(--logo);
    height: var(--logo);
  }

  .account-title {
    margin: 0;
    font-size: var(--text-l);
    text-align: center;
  }

  .account-title:focus {
    outline: none;
  }

  .account-text {
    margin: 0 0 var(--space-2);
    color: var(--muted);
    text-align: center;
  }

  .account-wait {
    align-self: center;
    width: var(--logo);
    height: var(--logo);
    color: var(--muted);
  }

  .account-page > .button.accent {
    align-self: center;
  }
}