/* css/oops.css : the styling for what core/oops.js emits. The error modal, the success toast
   and the tick-less note.

   NO BRAND COLOURS. Every colour is a neutral behind a variable with a neutral fallback, the
   same variable names css/core.css uses, so an app sets its palette once on :root and never
   edits this file. Load it AFTER css/core.css (the z-index ladder lives there) and BEFORE the
   app's own stylesheet, and cache-bust the link (?v=<build>): Pages caches CSS for four hours.

   Every z-index here is a rung of the ONE ladder in css/core.css. Register #99: a booking
   overlay at 200 hid the error modal at 135, so failures behind it were invisible. There is
   no bare number in this file, and core/oops.js writes the same rung inline from core.ui.Z so
   the modal is on top even while a stale copy of this stylesheet is being served.

   Ids and classes, for the integrator:
     #oopsHost  .oops  .oops__card  .oops__title  .oops__what  .oops__cause  .oops__foot
     .oops__btn  .oops__btn--primary  .oops__btn--full  .oops__link
     .oops__report  .oops__input  .oops__note  .oops__sent
     #oopsToasts  .oops-toasts  .oops-toast  .oops-toast--ok  .oops-toast--note
   Variables an app may set (all optional):
     --core-scrim  --core-surface-1  --core-surface-2  --core-line  --core-line-2
     --core-text-1  --core-text-2  --core-text-3  --core-accent  --core-on-accent
     --core-toast-bg  --core-toast-text  --core-ok  --core-warn
*/

/* ---------- the modal ---------- */

.oops {
  position: fixed;
  inset: 0;
  z-index: var(--z-error);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + var(--safe-b, 0px));
  background: var(--core-scrim, rgba(0, 0, 0, 0.55));
  /* A drag beside the card must never move the page behind it (24 Aug: "the only thing that
     should be moving is the box that's up on the screen"). The card takes pan-y back so a
     long cause line on a short phone can still be read. */
  touch-action: none;
  overscroll-behavior: contain;
}

.oops__card {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  touch-action: pan-y;
  padding: 20px;
  border-radius: calc(var(--core-radius, 10px) + 4px);
  border: 1px solid var(--core-line, rgba(127, 127, 127, 0.35));
  background: var(--core-surface-1, #ffffff);
  color: var(--core-text-1, #17171b);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.oops__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  line-height: 1.25;
}

/* `what` can hold something a person typed: a long unbroken word must wrap, not push the
   card wider than the phone (the 1 Sep phantom scrollbar hunt, from the other direction). */
.oops__what,
.oops__cause,
.oops__note,
.oops__sent {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.oops__what { font-weight: 600; }
.oops__cause { color: var(--core-text-2, #5c5c66); }

.oops__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--core-gap, 10px);
  margin-top: 16px;
}

.oops__btn {
  flex: 1 1 0;
  min-width: 0;
  /* 44px is the smallest target a thumb hits reliably on a phone. */
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--core-radius, 10px);
  border: 1px solid var(--core-line-2, rgba(127, 127, 127, 0.5));
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.oops__btn--primary {
  border-color: transparent;
  background: var(--core-accent, #17171b);
  color: var(--core-on-accent, #ffffff);
}
.oops__btn--full {
  flex: 0 0 auto;
  width: 100%;
  margin-top: var(--core-gap, 10px);
}
/* Never opacity alone: a faded button with no words reads as broken (#181). core/oops.js
   relabels it ("Trying...", "Sending...") at the same moment it disables it. */
.oops__btn:disabled {
  cursor: progress;
  opacity: 0.6;
}

.oops__link {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--core-text-2, #5c5c66);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  cursor: pointer;
}

.oops__report:empty { display: none; }
.oops__report { margin-top: 12px; }

.oops__input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--core-radius, 10px);
  border: 1px solid var(--core-line-2, rgba(127, 127, 127, 0.5));
  background: var(--core-surface-2, rgba(127, 127, 127, 0.08));
  color: inherit;
  font: inherit;
  /* 16px or iOS zooms the page when the box takes focus, and the modal slides off screen. */
  font-size: 1rem;
  line-height: 1.4;
  resize: vertical;
}

/* Why the report did not send. It has to be SEEN: it is the only place that failure is said. */
.oops__note {
  margin: 8px 0 0;
  color: var(--core-warn, #b4802a);
  font-weight: 600;
}
.oops__note:empty { display: none; }
.oops__sent {
  margin: 0;
  color: var(--core-ok, #2f7d4f);
  font-weight: 600;
}

/* ---------- toast and note ---------- */

/* Register #74: a success toast overwrote a failure toast because they shared one slot. This
   host is a STACK (nothing replaces anything), it is a different element from the modal's
   host, and core/oops.js paints nothing into it while a modal is open. */
.oops-toasts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h, 64px) + var(--safe-b, 0px) + 12px);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  /* A toast is a receipt, never a control: taps go through to the page under it. */
  pointer-events: none;
}

.oops-toast {
  box-sizing: border-box;
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--core-toast-bg, #17171b);
  color: var(--core-toast-text, #ffffff);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  animation: oops-rise 0.18s ease-out;
}
.oops-toast--ok::before {
  content: "\2713";
  margin-right: 8px;
  color: var(--core-ok, #6fcf97);
}
/* Tick-less on purpose: "Kept 3 sets, the box was empty" is not a success and must not
   look like one. */
.oops-toast--note {
  border-radius: var(--core-radius, 10px);
  border: 1px solid var(--core-warn, #b4802a);
}

@keyframes oops-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .oops-toast { animation: none; }
}