/* Autopilot Cloud Board — handcrafted overrides on top of Tailwind CDN.
 * Phone-first: 44px+ tap targets, no hover-only states, swipe-friendly cards.
 * Light theme only. Background matches v2 board: #f7f5ef with #1a1a1a text.
 */

/* ---------------- 1. Phone hardening ---------------- */

html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  /* Prevent iOS rubber-band exposing dark void */
  background-color: #f7f5ef;
  /* Respect notch / home indicator */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Make all interactive elements meet 44px minimum on phones, even
 * if a Tailwind utility forgot. */
@media (max-width: 767px) {
  button, [role="button"], summary {
    min-height: 44px;
  }
}

/* On phones, hover styles are misleading (the tap "sticks"). Disable hover-only
 * affordances; keep :active / :focus-visible. */
@media (hover: none) {
  .shift-card:hover { box-shadow: none; }
}

/* Bigger, finger-friendly form controls on phones. */
@media (max-width: 767px) {
  textarea.prompt-edit { font-size: 14px; }
}

/* Avoid iOS zoom-on-focus for the prompt textarea. */
textarea.prompt-edit { font-size: 16px; }

/* Don't render the default disclosure triangle (we draw our own ›). */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ---------------- 2. Mode chip ---------------- */

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; min-height: 22px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Mode pill — dark text on tinted backgrounds, NEVER pure black-on-color. */
.badge-mode { background: #e8eef9; color: #1a73e8; border-color: #cfdcf3; }
.badge-mode[data-mode="NORMAL"]      { background: #e6f4ea; color: #137333; border-color: #c8e6cf; }
.badge-mode[data-mode="MAX-EFFORT"]  { background: #fef7e0; color: #a06000; border-color: #f5e3a8; }
.badge-mode[data-mode="PAUSED"]      { background: #f1f3f4; color: #5f6368; border-color: #dadce0; }
.badge-mode[data-mode="FROZEN"]      { background: #fce8e6; color: #c5221f; border-color: #f4c4be; }

/* ---------------- 3. Status badges (match v2 board names) ---------------- */
/* Colors borrowed from Material 3 muted Google semantic tokens — same as
 * apps/wholesale-dashboard so the v2 board and this cloud board feel like
 * one product. */

.badge-running    { background: #e8f0fe; color: #1a73e8; border-color: #cfdcf3; }
.badge-pending    { background: #f1f3f4; color: #5f6368; border-color: #dadce0; }
.badge-completed  { background: #e6f4ea; color: #137333; border-color: #c8e6cf; }
.badge-approved   { background: #e6f4ea; color: #137333; border-color: #c8e6cf; }
.badge-skipped    { background: #f1f3f4; color: #5f6368; border-color: #dadce0; }
.badge-denied     { background: #fce8e6; color: #c5221f; border-color: #f4c4be; }
.badge-failed     { background: #fce8e6; color: #c5221f; border-color: #f4c4be; }
.badge-killed     { background: #fce8e6; color: #c5221f; border-color: #f4c4be; }
.badge-unknown    { background: #f1f3f4; color: #80868b; border-color: #dadce0; }

/* Risk tags inside cards. */
.badge-risk-low      { background: #e6f4ea; color: #137333; border-color: #c8e6cf; }
.badge-risk-med      { background: #fef7e0; color: #a06000; border-color: #f5e3a8; }
.badge-risk-high     { background: #fce8e6; color: #c5221f; border-color: #f4c4be; }
.badge-risk-unknown  { background: #f1f3f4; color: #5f6368; border-color: #dadce0; }

/* ---------------- 4. Card stack ergonomics ---------------- */

.shift-card {
  /* Allow operator to swipe cards without iOS bouncing past them. */
  touch-action: pan-y;
  /* Prevent layout pop when toggling <details>. */
  contain: layout style;
}

/* Soften focus rings so they don't strobe on the cream background. */
*:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible { outline-offset: 3px; }

/* ---------------- 5. Token bar polish ---------------- */
#token-bar-fill { transition: width 400ms ease, background-color 200ms ease; }

/* ---------------- 6. Toast ---------------- */
#toast {
  /* Stay above iOS home indicator. */
  margin-bottom: env(safe-area-inset-bottom);
}