@layer components {

  /* Floor designer: heating items — add picker, kind layers, the floor's item list, batch edit. */
  .items {
    padding-bottom: 10px;
  }

  .items__hint {
    margin: 0 14px 6px;
    font-size: 11px;
    color: var(--color-ink-muted);
  }

  /* The hint beside the undo button (houses/_items). */
  .items__head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 14px 6px;

    & .items__hint {
      flex: 1;
      margin: 0;
    }
  }

  .items__undo {
    flex: none;
    white-space: nowrap;

    & kbd {
      color: var(--color-ink-muted);
    }
  }

  .items__list:empty::before {
    content: attr(data-empty);
    display: block;
    padding: 4px 14px;
    font-size: 12px;
    color: var(--color-ink-muted);
  }

  /* A floor's item: show/hide, the item (selects it), edit. */
  .item-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 8px;

    &:hover {
      background: color-mix(in oklch, var(--color-surface), var(--color-ink) 8%);
    }

    &:has(.item-row__select[aria-pressed="true"]) {
      background: var(--color-primary-surface);
    }

    /* Hidden on the plan: still listed, to bring it back. */
    &.is-hidden .item-row__select {
      opacity: 0.5;
    }
  }

  .item-row__select {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 2.3em 1fr;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0;

    &[aria-pressed="true"] {
      color: var(--color-ink);
    }
  }

  .item-row__edit {
    width: 22px;
    height: 22px;
    padding: 0;
    color: var(--color-ink-muted);
    background: none;
    border: 0;
    cursor: pointer;
    visibility: hidden;

    &:hover {
      color: var(--color-ink);
    }
  }

  /* ✎ shows on the row under the pointer, the selected one and while it's focused. */
  .item-row:is(:hover, :focus-within, :has(.item-row__select[aria-pressed="true"])) .item-row__edit {
    visibility: visible;
  }

  .item-row__code {
    font: 600 12px ui-monospace, monospace;
  }

  .item-row__name {
    font-size: 12px;

    & small {
      display: block;
      font-size: 11px;
      color: var(--color-ink-muted);
    }
  }

  .panel__add-floor {
    padding: 4px 14px 8px;
  }

  /* Add menu (items/_add_menu), opened at the pointer with A. */
  .add-menu {
    position: fixed;
    z-index: 30;
    width: 240px;
    display: grid;
    gap: 6px;
    padding: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-edge);
    border-radius: 8px;
    box-shadow: 0 10px 30px color-mix(in oklch, var(--black) 40%, transparent);
  }

  .add-menu__title {
    padding: 2px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
  }

  .picker__filter {
    padding: 5px 8px;
    font: inherit;
    color: var(--color-ink);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-line);
    border-radius: 4px;
  }

  .picker__options {
    display: grid;
    max-height: 260px;
    overflow: auto;
  }

  .picker__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: 13px;
    text-align: left;
    background: transparent;
    border: 0;

    &[aria-selected="true"],
    &:hover {
      background: var(--color-primary-surface);
    }
  }

  /* An option's key (picker_controller): at the row's end, only while nothing's typed. */
  .picker__key {
    margin-left: auto;
    color: var(--color-ink-muted);

    &:empty {
      display: none;
    }
  }

  .picker__empty {
    margin: 0;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--color-ink-muted);
  }

  /* Batch edit of the selected items. */
  /* Card beside the selected object in the 3D view (houses/_inspector), placed each frame. */
  .inspector {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    width: 270px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 10px;
    box-shadow: 0 10px 30px color-mix(in oklch, var(--black) 35%, transparent);

    /* Out of the way while a device is being dragged. */
    &.is-passive {
      visibility: hidden;
    }
  }

  /* (i) beside the selected item: opens its card (placed each frame like the card). */
  .inspector-toggle {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    font: italic 700 13px/1 Georgia, serif;
    color: var(--color-ink);
    background: var(--color-line);
    border: 1px solid var(--color-ink-muted);
    border-radius: 50%;
    box-shadow: 0 2px 8px color-mix(in oklch, var(--black) 40%, transparent);
    cursor: pointer;

    &:hover {
      background: color-mix(in oklch, var(--color-line), var(--white) 12%);
    }
  }

  .inspector__room {
    display: grid;
    gap: 8px;
  }

  /* The room's name, editable in place: reads as a title until focused. */
  .inspector__name {
    flex: 1;
    min-width: 0;
    padding: 2px 4px;
    margin-left: -4px;
    font: inherit;
    font-weight: 600;
    color: var(--color-ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;

    &:hover {
      border-color: var(--color-line);
    }

    &:focus {
      background: var(--color-surface-sunken);
      border-color: var(--color-primary);
      outline: none;
    }

    &::placeholder {
      color: var(--color-ink);
    }
  }

  .inspector__details {
    font-size: 12px;
    color: var(--color-ink-muted);
  }

  .item-batch {
    display: grid;
    gap: 8px;
  }

  .item-batch__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .item-batch__clear {
    background: transparent;
    border: 0;
  }

  .item-batch__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .item-batch__actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  /* Rooms of the active floor (houses/_rooms), with their covering switch. */
  .rooms {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-line);
  }

  .rooms__list:empty::before {
    content: attr(data-empty);
    display: block;
    padding: 4px 14px;
    font-size: 12px;
    color: var(--color-ink-muted);
  }

  .room-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;

    &:hover {
      background: color-mix(in oklch, var(--color-surface), var(--color-ink) 8%);
    }
  }

  /* The climate workspace's rooms (houses/_climate): the name and its figures only. */
  .room-row--climate {
    grid-template-columns: 1fr;
  }

  /* A button: a click focuses the room (pressed while focused). */
  .room-row__name {
    padding: 0;
    font: inherit;
    font-size: 12px;
    text-align: left;
    color: var(--color-ink);
    background: none;
    border: 0;
    cursor: pointer;

    &:hover [data-field=name] {
      text-decoration: underline;
    }

    &[aria-pressed="true"] [data-field=name] {
      font-weight: 600;
      color: var(--color-primary);
    }

    & small {
      display: block;
      font-size: 11px;
      color: var(--color-ink-muted);
    }
  }

  /* A room's heat loss beside its heating (plan/heat_loss.js): a warning when it falls short. */
  .room-heat.is-short,
  .room-row__name small.room-heat.is-short,
  .items__hint.room-heat.is-short {
    color: var(--color-warning);
  }

  /* Computed circuits of the active floor (houses/_pipes). */
  .pipes {
    padding-bottom: 8px;
  }

  /* System layers (houses/_layers): one toggle per system (heating, water; sewerage to come). */
  /* Room above each row for the chips' "only" badges. */
  .layers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 6px;
    padding: 8px 14px 6px;
  }

  /* A layer's chip: its toggle, and over its top-right corner its "only" — while pointed at or focused,
     and always (as "all") on the layer shown alone, the way back (houses/_layer_solo). */
  .layer-chip {
    position: relative;
    display: inline-flex;
  }

  .layer-solo {
    position: absolute;
    top: -8px;
    right: -4px;
    z-index: 1;
    padding: 1px 6px;
    font-size: 10px;
    line-height: 14px;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    visibility: hidden;

    &:hover {
      background: color-mix(in oklch, var(--color-primary), var(--white) 15%);
    }
  }

  .layer-chip:is(:hover, :focus-within, .is-alone) .layer-solo {
    visibility: visible;
  }

  .layer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-size: 12px;
    color: var(--color-ink-muted);
    background: transparent;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    cursor: pointer;

    & .swatch {
      width: 10px;
      height: 10px;
      opacity: 0.35;
    }

    &[aria-pressed="true"] {
      color: var(--color-ink);
      background: color-mix(in oklch, var(--color-surface), var(--color-ink) 10%);

      & .swatch {
        opacity: 1;
      }
    }

    &:disabled {
      cursor: default;
      opacity: 0.5;
    }
  }

  .pipes__issue {
    margin: 0 14px 6px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--color-warning);
    background: color-mix(in oklch, var(--color-warning) 12%, transparent);
    border-radius: 4px;
  }

  .pipes__list:empty::before {
    content: attr(data-empty);
    display: block;
    padding: 4px 14px;
    font-size: 12px;
    color: var(--color-ink-muted);
  }

  .pipe-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;

    &.is-highlighted {
      background: color-mix(in oklch, var(--color-surface), var(--color-ink) 8%);
    }

    /* The manifold heads its circuits: it's what this stage moves. */
    &.pipe-row--manifold {
      cursor: default;
      font-weight: 600;
      border-bottom: 1px solid var(--color-line);
    }

    &.is-unreachable {
      color: var(--color-warning);
    }
  }

  .pipe-row__name {
    font-size: 12px;

    & small {
      display: block;
      font-size: 11px;
      color: var(--color-ink-muted);
    }
  }

  .pipe-row__length {
    font: 12px ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .pipes__totals {
    margin-top: 6px;
  }

  /* Panel tables (pipe per diameter): edge to edge, text aligned with the rows by the end
     cells' padding. */
  .panel-table {
    width: 100%;
    margin-top: 8px;
    font-size: 12px;
    border-collapse: collapse;

    & th,
    & td {
      padding: 4px 6px;
      text-align: left;
      font-weight: 400;
      border-bottom: 1px solid var(--color-line);
    }

    & :is(th, td):first-child {
      padding-left: 14px;
    }

    & :is(th, td):last-child {
      padding-right: 14px;
    }

    & thead th {
      font-size: 11px;
      color: var(--color-ink-muted);
    }

    & tfoot :is(th, td) {
      font-weight: 600;
      border-bottom: 0;
    }

    & .table__qty {
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    & .table__num {
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
  }
}