/* Ticket RF16b: the D-MISC pages (design/brand/proposed/misc-pages, PR #327): Operations, Copy to other
   outlets, New customer, the refusal pages. Every rule is scoped to .misc (or a misc- class) because this
   file loads on every page. Tokens only; cards, buttons, chips, alerts and empty states are the web base's. */

/* The page: header, then a column of cards 24 apart. */
.misc { display: grid; gap: var(--g-space-24); min-width: 0; }
.misc > *, .misc-stack > * { min-width: 0; margin-top: 0; margin-bottom: 0; }
.misc .dset-tabs { margin: 0; }
.misc .alert { margin: 0; }
.misc .alert p { margin: 0; }
.misc .alert p + p, .misc .alert ul + p { margin-top: var(--g-space-8); }
.misc-stack { display: grid; gap: var(--g-space-16); align-content: start; }
.misc .card + .card { margin-top: 0; }
.misc-card { display: grid; gap: var(--g-space-24); }
.misc-card > * { margin: 0; min-width: 0; }
.misc h1, .misc h2, .misc p, .misc label, .misc summary { overflow-wrap: anywhere; }

/* The mint page header: a small line, the h1, one line under it, Pakcu on the right. */
.misc-header { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-24); padding: var(--g-space-24); border-radius: var(--g-radius-hero); background: var(--g-color-mint); color: var(--g-color-navy); }
.misc-header > div { min-width: 0; }
.misc-header h1 { margin: 0; }
.misc-header p { margin: var(--g-space-8) 0 0; }
.misc-header__eyebrow { font-size: var(--g-font-size-small); }
.misc-header .misc-header__eyebrow { margin: 0 0 var(--g-space-8); }
.misc-header__pose { flex: none; width: calc(var(--g-size-primary) * 2); height: calc(var(--g-size-primary) * 3); object-fit: contain; }

/* Fields: two columns that fold to one, label above, hint and error below. */
.misc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-size-phone)), 1fr)); gap: var(--g-space-24); }
.misc-field { display: grid; gap: var(--g-space-8); align-content: start; min-width: 0; }
.misc-field > * { margin: 0; min-width: 0; }
.misc-field input:not([type=checkbox]), .misc-field select, .misc-field textarea { width: 100%; min-width: 0; }
.misc-label { display: block; font-size: var(--g-font-size-small); font-weight: 600; }
.misc-choice { display: flex; align-items: center; gap: var(--g-space-12); min-height: var(--g-size-touch); cursor: pointer; }
.misc-choice:has(input:focus-visible) { outline: var(--g-space-4) solid var(--g-color-navy); outline-offset: var(--g-space-4); }

/* Operations: the plain disclosure, as drawn (Devan's pick). */
.misc-details > summary { min-height: var(--g-size-touch); padding: var(--g-space-12) 0; cursor: pointer; font-weight: 600; }
.misc-details > div { margin-top: var(--g-space-16); }
.misc-details p { margin: 0; }

/* Pakcu's moment in an empty or refusal state. */
.misc-moment { justify-content: flex-start; }
.misc-moment__pose { flex: none; width: calc(var(--g-size-primary) * 2); height: calc(var(--g-size-primary) * 3); object-fit: contain; }

/* Refusal Back buttons are content width (Devan's pick). */
.misc .misc-fit { width: auto; justify-self: start; }

/* Copy to other outlets: one ivory row per outlet; every chip aligned right (Devan's pick). */
.misc-replaces { display: grid; gap: var(--g-space-8); justify-items: start; }
.misc-outlet { display: grid; gap: var(--g-space-8); padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-ivory); }
.misc-outlet > * { margin: 0; min-width: 0; }
.misc-outlet__row { display: flex; align-items: center; gap: var(--g-space-12); min-height: var(--g-size-touch); flex-wrap: wrap; }
.misc-outlet__row strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.misc-outlet__row .chip { margin-inline-start: auto; white-space: normal; }
.misc-outlet__note { font-size: var(--g-font-size-small); color: var(--g-color-muted); }
.misc-outlet__note--indent { margin-inline-start: calc(var(--g-space-24) + var(--g-space-12)); }

/* What happened: warnings keep their control, the grey list is ivory and muted. */
.misc-banner { display: grid; gap: var(--g-space-12); justify-items: start; }
.misc-banner form { margin: 0; }
.misc-neutral { padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-ivory); color: var(--g-color-muted); }
.misc-neutral p { margin: 0 0 var(--g-space-8); }
.misc-neutral ul { margin: 0; padding-inline-start: var(--g-space-24); }
.misc-neutral li + li { margin-top: var(--g-space-8); }

/* New customer, created: the one banner, the password large, Copy a secondary button (Devan's pick). */
.misc-created p { margin: 0; }
.misc-created p + p { margin-top: var(--g-space-8); }
.misc-created__row { display: flex; align-items: center; gap: var(--g-space-12); flex-wrap: wrap; margin-top: var(--g-space-8); }
.misc-created__password { font-size: var(--g-font-size-metric); line-height: var(--g-line-height-heading); overflow-wrap: anywhere; }
.misc-created .misc-created__copy { background: var(--g-color-white); min-height: var(--g-size-touch); }

/* Phone: the header stacks with a smaller Pakcu; the indented notes line up with the edge. */
@media (max-width: 390px) {
  .misc-header { flex-direction: column; align-items: flex-start; padding: var(--g-space-16); gap: var(--g-space-12); }
  .misc-header__pose, .misc-moment__pose { width: var(--g-size-primary); height: calc(var(--g-size-primary) * 1.5); }
  .misc-moment { flex-direction: column; align-items: flex-start; padding: var(--g-space-16); gap: var(--g-space-16); }
  .misc-outlet__note--indent { margin-inline-start: 0; }
}