/* components.css — styling for every uyl-* custom element (light DOM, FE-2.2/FE-6).
   Porcelain pass (13 §0): hairline rules carry the structure, overlays keep the one
   whisper of shadow the system allows, mono is confined to numerals and metadata.
   Appearance only — no element's behaviour changes (CM-0.7). */

uyl-autocomplete,
uyl-recipe-card,
uyl-match-panel,
uyl-star-rating,
uyl-pagination,
uyl-tag-picker,
uyl-image-upload,
uyl-qty-unit,
uyl-prep-picker,
uyl-feedback,
uyl-toast,
uyl-confirm {
  display: block;
}

/* ---------- uyl-autocomplete (FE-6.1) ---------- */

uyl-autocomplete {
  position: relative;
}
uyl-autocomplete .ac-input-wrap {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
uyl-autocomplete input[type="text"] {
  flex: 1 1 auto;
}
uyl-autocomplete .ac-list {
  position: absolute;
  z-index: 35;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 16rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-1);
  margin: 0;
  list-style: none;
}
uyl-autocomplete .ac-list[hidden] {
  display: none;
}
uyl-autocomplete .ac-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  min-height: var(--tap);
  border-radius: var(--radius);
  cursor: pointer;
}
uyl-autocomplete .ac-opt[aria-selected="true"],
uyl-autocomplete .ac-opt:hover {
  background: var(--accent-soft);
}
uyl-autocomplete .ac-cat {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: var(--tx--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
uyl-autocomplete .ac-chosen {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius);
}
uyl-autocomplete .ac-propose {
  border-top: 1px solid var(--border);
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
}
uyl-autocomplete .ac-form {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  margin-top: var(--sp-2);
}

/* ---------- uyl-recipe-card (FE-6.2) ---------- */

uyl-recipe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  transition: border-color var(--motion) ease;
}
uyl-recipe-card:hover {
  border-color: var(--accent);
}
uyl-recipe-card .rc-thumb {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  background: var(--surface-2);
}
uyl-recipe-card .rc-thumb-empty {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--tx-3);
}
uyl-recipe-card .rc-body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 auto;
}
uyl-recipe-card .rc-title {
  font-family: var(--font-display);
  font-size: var(--tx-1);
  font-weight: var(--weight-heading);
  letter-spacing: -0.012em;
  line-height: 1.25;
}
uyl-recipe-card .rc-title a {
  color: var(--accent);
  text-decoration: none;
}
uyl-recipe-card .rc-title a:hover {
  text-decoration: underline;
}
uyl-recipe-card .rc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: var(--tx--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
uyl-recipe-card .rc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: auto;
}
uyl-recipe-card .rc-info {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  border-radius: var(--radius);
  width: 28px;
  height: 28px;
  cursor: pointer;
  line-height: 1;
}
uyl-recipe-card .rc-pop {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: var(--sp-3);
  margin-top: var(--sp-2);
}
uyl-recipe-card .rc-pop[hidden] {
  display: none;
}

/* ---------- uyl-match-panel (FE-6.3) ---------- */

uyl-match-panel .mp-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
uyl-match-panel h3 {
  font-size: var(--tx-0);
  margin-bottom: var(--sp-1);
}
uyl-match-panel section {
  margin-bottom: var(--sp-3);
}
uyl-match-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
uyl-match-panel li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--tx--1);
}
uyl-match-panel .mp-breakdown {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--tx--1);
  font-variant-numeric: tabular-nums;
}

/* ---------- uyl-star-rating (FE-6.4) ---------- */

uyl-star-rating .sr-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
uyl-star-rating[readonly] .sr-star {
  font-size: var(--tx-0);
  color: var(--brass);
}
uyl-star-rating .sr-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
uyl-star-rating .sr-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  font-size: var(--tx-2);
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius);
}
uyl-star-rating .sr-label.on {
  color: var(--brass);
}
uyl-star-rating .sr-radio:focus-visible + .sr-label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- uyl-toast (FE-6.5) ---------- */

uyl-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--nav-h) + var(--sp-3));
  z-index: 60;
  width: min(28rem, calc(100vw - var(--sp-4) * 2));
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}
@media (min-width: 768px) {
  uyl-toast {
    bottom: var(--sp-4);
  }
}
uyl-toast .toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-3);
}
uyl-toast .toast.error {
  border-left-color: var(--danger);
}
uyl-toast .toast.success {
  border-left-color: var(--ok);
}
/* CM-0.1: no green enters the scheme, so success is cobalt PLUS a glyph — colour
   is never the only channel. */
uyl-toast .toast.success .toast-msg::before {
  content: "✓ ";
  color: var(--ok);
  font-weight: 700;
}
uyl-toast .toast-msg {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--tx--1);
}

/* ---------- uyl-confirm (FE-6.6) ---------- */

dialog.uyl-dialog {
  width: min(30rem, calc(100vw - var(--sp-4) * 2));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: var(--sp-5);
  box-shadow: var(--shadow-pop);
}
dialog.uyl-dialog::backdrop {
  background: var(--scrim);
}
dialog.uyl-dialog h2 {
  font-size: var(--tx-1);
  margin-bottom: var(--sp-3);
}
dialog.uyl-dialog .dlg-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

/* ---------- uyl-pagination (FE-6.7) ---------- */

uyl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-variant-numeric: tabular-nums;
}
uyl-pagination[hidden] {
  display: none;
}

/* ---------- uyl-tag-picker (FE-6.8) ---------- */

uyl-tag-picker {
  position: relative;
}
uyl-tag-picker .tp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}
uyl-tag-picker .tp-chip button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0 0 0 var(--sp-1);
  color: inherit;
}
uyl-tag-picker .tp-pop {
  position: absolute;
  z-index: 35;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 18rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-2);
}
uyl-tag-picker .tp-pop[hidden] {
  display: none;
}
uyl-tag-picker .tp-group-label {
  font-family: var(--font-mono);
  font-size: var(--tx--1);
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--sp-1) var(--sp-2);
}

/* ---------- uyl-qty-unit (FE-6.10) ---------- */

uyl-qty-unit .qu-row {
  display: flex;
  gap: var(--sp-2);
}
uyl-qty-unit input {
  flex: 1 1 5rem;
  min-width: 4rem;
  font-variant-numeric: tabular-nums;
}
uyl-qty-unit select {
  flex: 1 1 7rem;
  min-width: 6rem;
}

/* ---------- uyl-prep-picker (CM-2.3) ----------
   The DM-1.27 preparation vocabulary as a chip picker, with the free-text "more
   detail" field disclosed behind it (OV-P1.2). */

uyl-prep-picker .pp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
uyl-prep-picker .pp-chip {
  min-height: 32px;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--tx--1);
  cursor: pointer;
  transition: background-color var(--motion) ease, border-color var(--motion) ease;
}
uyl-prep-picker .pp-chip:hover {
  border-color: var(--accent);
}
uyl-prep-picker .pp-chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
uyl-prep-picker .pp-more {
  margin-top: var(--sp-2);
}
uyl-prep-picker .pp-more > summary {
  cursor: pointer;
  min-height: 32px;
  display: flex;
  align-items: center;
  font-size: var(--tx--1);
  color: var(--link);
}
uyl-prep-picker .pp-rest[hidden] {
  display: none;
}

/* ---------- uyl-image-upload (FE-6.9) ---------- */

uyl-image-upload .iu-drop {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  text-align: center;
  background: var(--surface-2);
}
uyl-image-upload .iu-drop.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
uyl-image-upload .iu-preview img {
  max-height: 12rem;
  border-radius: var(--radius);
}
uyl-image-upload[inert] .iu-drop,
.iu-inert {
  opacity: 0.6;
}

/* ---------- uyl-feedback (FE-6.11) ---------- */

uyl-feedback {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--nav-h) + var(--sp-3));
  z-index: 50;
}
@media (min-width: 768px) {
  uyl-feedback {
    bottom: var(--sp-4);
  }
}
uyl-feedback .fb-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: var(--shadow-pop);
  cursor: pointer;
}
dialog.fb-sheet {
  width: min(32rem, calc(100vw - var(--sp-3) * 2));
  margin-inline: auto;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: var(--sp-5);
  box-shadow: var(--shadow-pop);
}
dialog.fb-sheet::backdrop {
  background: var(--scrim);
}
.fb-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.fb-kind {
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
}
.fb-kind[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ---------- uyl-image-upload: compact variant (editor step rows) ---------- */

uyl-image-upload.iu-compact .iu-drop {
  padding: var(--sp-3);
}
uyl-image-upload.iu-compact .iu-preview img {
  max-height: 6rem;
}

/* ---------- uyl-recipe-card: the [M3] overflow menu (BN-1.4) ---------- */

uyl-recipe-card {
  position: relative;
}
uyl-recipe-card .rc-overflow {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-end: var(--sp-2);
  z-index: 1;
}
uyl-recipe-card .rc-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--accent);
  font-size: var(--tx-1);
  line-height: 1;
  cursor: pointer;
}
uyl-recipe-card .rc-more:hover {
  border-color: var(--accent);
}
uyl-recipe-card .rc-menu {
  position: absolute;
  inset-block-start: calc(var(--tap) + var(--sp-1));
  inset-inline-end: 0;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
uyl-recipe-card .rc-menu[hidden] {
  display: none;
}
uyl-recipe-card .rc-menu-item {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: 0;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}
uyl-recipe-card .rc-menu-item:hover {
  background: var(--accent-soft);
}