@layer components {

  /* Floor designer panel bits: floor list, measurements, the floating length editor. */
  /* Above the house's name: back to the list, and the house's documentation. */
  /* Back on the left; the documentation and the language on the right. */
  .panel__links {
    display: flex;
    align-items: baseline;
    gap: 10px;

    &> :first-child {
      margin-right: auto;
    }
  }

  .panel__back,
  button.panel__back {
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-ink-muted);
    text-decoration: none;

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

  .panel__title a {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  /* How several floors show in 3D (houses/_floor_layout): stacked or side by side, and the spread —
     at the bottom of the 3D view's left column. */
  .floor-layout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--color-ink-muted);
  }

  .floor-layout__spread input {
    width: 140px;
  }

  /* The house workspace's panel list of rooms (houses/_room_nav): a click focuses one. */
  .room-nav {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-line);
    font-size: 12px;
  }

  .room-nav__list {
    display: grid;
    gap: 1px;
    padding: 0 8px;
  }

  /* A room: its name (a click focuses it) and ✎ (its card), marked while the card is open. */
  .room-nav__row {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 6px;

    &:is(:hover, .is-picked) {
      background: var(--color-primary-surface);
    }
  }

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

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

  .room-nav__row:is(:hover, :focus-within, .is-picked) .room-nav__edit {
    visibility: visible;
  }

  .room-nav__room {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 4px 6px;
    text-align: left;
    color: var(--color-ink);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;

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

    & small {
      flex: none;
      font-variant-numeric: tabular-nums;
      color: inherit;
      opacity: 0.7;
    }
  }

  .room-nav__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .floor-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 14px;
  }

  .floor-row__select {
    flex: 1;
    text-align: left;
  }


  .floor-row__form {
    display: none;
  }

  .floor-row__copy,
  .floor-row__delete {
    color: var(--color-ink-muted);
  }

  /* As tall as the ⧉ and ✕ buttons beside it: the icon takes their 12px text's line (17px). */
  .floor-row__underlay {
    display: inline-grid;
    place-items: center;
    padding: 4px;
    color: var(--color-ink-muted);

    &:hover,
    &.is-on {
      color: var(--color-ink);
    }

    /* A plan underneath: marked like a pressed toggle, quieter. */
    &.is-on {
      border-color: var(--color-primary);
    }
  }

  .floor-row__icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .floor-row__height {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink-muted);
    text-decoration: none;
    white-space: nowrap;

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

  .measurements {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-line);
  }

  .measurements__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 0;
    padding: 0 14px;

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

    & dd {
      margin: 0;
    }

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

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

  .length-editor {
    position: fixed;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    transform: translate(-50%, calc(-100% - 10px));
  }

  .length-editor__field {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .length-editor__input {
    width: 6em;
    padding: 3px 6px;
    font: inherit;
    color: var(--color-ink);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-line);
    border-radius: 4px;

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

  /* A wall end the move tool drags (house_scene.js#cornerHandles): the canvas under it takes the pointer. */
  .corner-handle {
    width: 10px;
    height: 10px;
    pointer-events: none;
    background: var(--color-canvas);
    border: 2px solid var(--color-preview);
    border-radius: 2px;

    &.is-hot {
      background: var(--color-preview);
    }
  }

  /* Length label on a dimension line (and the live one while drawing). */
  .dim-tag {
    padding: 2px 5px;
    font: 600 11px/1 ui-monospace, monospace;
    color: var(--color-dimension);
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    background: color-mix(in oklch, var(--color-surface-sunken) 80%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-dimension) 55%, transparent);
    border-radius: 3px;
  }

  /* Area and covering of a room, at its centre (heating workspace); a click picks the covering. */
  .room-tag {
    --c: var(--color-ink-muted);
    padding: 2px 6px;
    font: 600 11px/1 ui-monospace, monospace;
    color: var(--c);
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    background: color-mix(in oklch, var(--color-surface-sunken) 70%, transparent);
    border: 1px solid color-mix(in oklch, var(--c) 50%, transparent);
    border-radius: 3px;

    &.is-guess {
      border-style: dashed;
      opacity: 0.8;
    }
  }

  .room-tag--tile {
    --c: var(--color-covering-tile);
  }

  .room-tag--wood {
    --c: var(--color-covering-wood);
  }

  /* The measurement the eraser would take (pointer.js#showEraseTarget). */
  .dim-tag.is-erasing {
    color: var(--color-danger-ink);
    border-color: var(--color-danger);
  }

  .dim-tag--preview {
    color: var(--color-preview);
    pointer-events: none;
    border-color: color-mix(in oklch, var(--color-preview) 55%, transparent);
  }
}