/* ============================================================================
   LAYER HANDOFFS

   Everything below gives a property back to @layer makeover rather than
   setting one. This file is in @layer components and the order statement puts
   it after `makeover`, so every rule here wins over the design system whatever
   the specificity -- including the bare `button`, `a` and `input` rules further
   up, which carry no class and so reach every described component the site
   renders. That is the whole reason this section exists: without it a described
   act takes this file's chrome instead of the one makeover drew for it, and the
   difference is invisible in the source of either file.

   `revert-layer` is the deferral. It names no value, so the design system can
   change what a chip looks like without this file learning about it.

   Two rules govern how these are written, and both are load-bearing:

     - Hand a property back on the arms makeover actually paints, not on the
       plain class. Makeover gives a chip a colour only when it is disabled, so
       `.chip { color: revert-layer }` would roll a live chip back past this
       file's `button { color }` to the UA default rather than to anything
       makeover chose.
     - Outrank the rule being deferred past. Both rules are this file's and both
       are in the same layer, so that contest is decided by specificity and then
       by source order. `.field` does not beat `input[type="text"]`, which is
       why the field handoffs are element-qualified, and this section sits at
       the end of the file so an equal-specificity handoff still wins.

   makeover-build's check_vocabulary reads both halves and fails the build on a
   pair that has neither a handoff nor a reviewed exception, so this section
   cannot fall behind the design system without somebody being told.
   ============================================================================ */

/* The surfaces a bare `button` was taking. `.card`, `.tab` and the two facet
   controls are all rendered as buttons by the described screens. */
.card,
.tab,
.facet-take,
.facet-prune {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
  box-shadow: revert-layer;
}

.card:hover,
.tab:hover,
.facet-take:hover,
.facet-prune:hover {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
}

.card:active,
.tab:active,
.facet-take:active,
.facet-prune:active {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
  box-shadow: revert-layer;
}

/* A facet control's colour is makeover's in every state: muted when disabled,
   secondary when the value it names is not standing, inherited otherwise.
   There is no arm of it this file has an opinion about. */
.facet-take,
.facet-prune {
  /* respec-ok: a layer handoff, not a value. */
  color: revert-layer;
}

/* The disabled arm. Makeover paints all four properties here -- muted text, the
   not-allowed cursor, and the surface it keeps rather than dropping -- and this
   file's `button:disabled` was taking every one of them. */
.button:disabled,
.button[aria-disabled="true"],
.card:disabled,
.card[aria-disabled="true"],
.chip:disabled,
.chip[aria-disabled="true"],
.tab:disabled,
.tab[aria-disabled="true"],
.segment:disabled,
.segment[aria-disabled="true"],
.toggle:disabled,
.toggle[aria-disabled="true"],
.field:disabled,
.field[aria-disabled="true"],
.facet-take:disabled,
.facet-take[aria-disabled="true"],
.facet-prune:disabled,
.facet-prune[aria-disabled="true"] {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
  box-shadow: revert-layer;
  color: revert-layer;
  cursor: revert-layer;
}

/* The focus ring. Makeover insets a field's so it does not collide with the
   bevel and leaves every other one outside, and this file's `:focus-visible`
   rules were flattening the distinction on every described control. */
.button:focus-visible,
.card:focus-visible,
.chip:focus-visible,
.link:focus-visible,
.tab:focus-visible,
.segment:focus-visible,
.toggle:focus-visible,
.facet-take:focus-visible,
.facet-prune:focus-visible {
  /* respec-ok: a layer handoff, not a value. */
  outline: revert-layer;
  outline-offset: revert-layer;
}

/* A described field is an `<input>`, a `<select>` or a `<textarea>`, and the
   rules for those three carry an attribute, so the handoff has to as well: a
   bare `.field` is the weaker selector and loses inside this layer. The `:focus`
   arm is here because this file sets `outline: none` on it, which removes the
   ring makeover draws on `:focus-visible` rather than replacing it. */
input.field,
select.field,
textarea.field,
input.field:hover,
select.field:hover,
textarea.field:hover,
input.field:active,
select.field:active,
textarea.field:active {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
  box-shadow: revert-layer;
}

input.field:focus,
select.field:focus,
textarea.field:focus,
input.field:focus-visible,
select.field:focus-visible,
textarea.field:focus-visible {
  /* respec-ok: a layer handoff, not a value. */
  outline: revert-layer;
  outline-offset: revert-layer;
}

/* A described toggle is an `<input>` too. The hover and active arms are here
   for the same reason as the field's: this file dresses `input[type="submit"]`
   as a raised button in every state, and a toggle is an input. */
input.toggle,
input.toggle:hover,
input.toggle:active,
input.toggle:focus,
input.toggle:focus-visible {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
  box-shadow: revert-layer;
  outline: revert-layer;
  outline-offset: revert-layer;
}

/* A described link on hover. `.link` above hands the resting colour back; this
   file's `a:hover` is the more specific of the two and was taking the hover
   colour and the underline with it. */
.link:hover {
  /* respec-ok: a layer handoff, not a value. */
  color: revert-layer;
  text-decoration: revert-layer;
}

/* Text makeover mutes: a facet's name, and the line a placeholder shows when
   there is nothing to list. This file's bare `p` rule was giving both the body
   colour. */
.facet-name,
.placeholder-text {
  /* respec-ok: a layer handoff, not a value. */
  color: revert-layer;
}

/* ===========================================
   DESCRIBED MODAL (quasi RegionKind::Modal)
   ===========================================
   The first described modal on this host is the media picker; these two rules
   are what "modal" means here, and every one after it gets them for free. The
   description says the region IS a modal and says nothing about where it sits,
   which is the division the vocabulary draws: `role="dialog" aria-modal="true"`
   comes off the renderer, and a dialog that lays out in flow would make that
   attribute a lie.

   Two boxes because a scrim and a panel are two boxes: the modal region covers
   the viewport and takes the presses the page behind it must not get, and the
   region inside it is the panel. */
.region.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
}

.region.modal > .region {
  position: relative;
  z-index: var(--z-modal);
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--gap-section);
  background: var(--surface-overlay);
  box-shadow: var(--elevation-overlay);
}

/* ===========================================
   MEDIA PICKER (crate::quasi::media_picker)
   ===========================================
   Addressed by the widget names the description carries, not by ids: a document
   holds one picker per markdown editor and their ids differ by destination,
   while what they are drawn like is the same assembly every time. */
[data-widget="media-picker-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--gap-peer);
  margin-top: var(--gap-section);
}

/* The tile IS the control, since quasi 0.69.0 (`Act::shows`). It was a
   `media-tile` region holding a picture and a button as siblings, and only the
   button answered a press; a reader aiming at the thumbnail hit nothing. The
   widget name went with the region, so the tile is addressed as the button
   inside the grid. */
[data-widget="media-picker-grid"] .button {
  display: flex;
  flex-direction: column;
  gap: var(--gap-peer);
  min-width: 0;
  /* The file name wraps rather than pushing the tile wide. */
  overflow-wrap: anywhere;
  text-align: left;
  font-size: var(--text-note);
}

/* A cap, not a height, and never a bare `img`. The design system already sets
   the picture's width, height and background, and an app rule taking any of
   those wins over `@layer makeover` silently — which is what `makeover-build`'s
   drift check refuses, and it is right to. `max-height` is not one of them, and
   it is all this needs: `Fit::Contain` is in the description, so a capped
   picture letterboxes inside the cap rather than being cropped or stretched. */
[data-widget="media-picker-grid"] .picture-img {
  max-height: 80px;
}