@layer utilities {

  /* A field being typed in shows by its background, not the browser's focus ring: above every layer, so a
     component's own background doesn't hide it. Checkboxes, radios and sliders keep their ring. */
  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea):focus {
    outline: none;
    background-color: var(--color-field-focus);
  }

  /* Editing controls: not on phones (they only view) nor through a house's read-only link. */
  @media (max-width: 760px) {
    .edit-only {
      display: none;
    }
  }

  [data-read-only] .edit-only {
    display: none;
  }

  /* A linked project (House#link!): the building's controls stay with its original. */
  [data-linked] .building-only {
    display: none;
  }

  /* Panel parts of one workspace (data-workspace-only) hide while another is active
     (data-workspace on the designer root, set by floor_designer_controller); "elements" parts show in
     either stage that places elements. */
  [data-workspace]:not([data-workspace="house"]) [data-workspace-only="house"],
  [data-workspace]:not([data-workspace="heating"]) [data-workspace-only="heating"],
  [data-workspace]:not([data-workspace="climate"]) [data-workspace-only="climate"],
  [data-workspace]:not([data-workspace="heating"], [data-workspace="climate"]) [data-workspace-only="elements"],
  [data-workspace]:not([data-workspace="pipes"]) [data-workspace-only="pipes"] {
    display: none;
  }

  /* The heating and climate panels' pages (houses/_heating_tabs): the other page's parts hide, and the
     headings the tabs already name. Other workspaces show every part. */
  :is([data-workspace="heating"], [data-workspace="climate"]):not([data-heating-tab="floors"]) [data-heating-tab-only="floors"],
  :is([data-workspace="heating"], [data-workspace="climate"]):not([data-heating-tab="items"]) [data-heating-tab-only="items"],
  :is([data-workspace="heating"], [data-workspace="climate"]) .panel__floor--tabbed {
    display: none;
  }
}