/* Inbox Zero — widget-local styles. Shared chrome (HUD chips, overlays,
   score form, leaderboard) lives in ../../style.css; this file is the inbox
   stack, the email cards with their category tints, the swipe/keyboard
   affordances, and the avalanche. Category is never colour-alone: every
   card carries an icon and its sender/subject flavour too. */

:root {
  --iz-card-bg: #ffffff;
  --iz-card-line: #d7deeb;
  --iz-ink: #1b2740;
  --iz-muted: #5c6a85;
  --iz-junk: #c96a3b;
  --iz-junk-soft: #f8e9e0;
  --iz-fyi: #4a7dc4;
  --iz-fyi-soft: #e6eefb;
  --iz-boss: #8a5bd6;
  --iz-boss-soft: #efe7fc;
  --iz-trash-hint: #f3d9cf;
  --iz-archive-hint: #d9e7f9;
  --iz-doom: #d64545;
  --iz-inbox-bg: #eef1f7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --iz-card-bg: #202a3e;
    --iz-card-line: #33405c;
    --iz-ink: #e8edf7;
    --iz-muted: #93a1bd;
    --iz-junk: #e08a5a;
    --iz-junk-soft: #3a2c22;
    --iz-fyi: #6f9fe0;
    --iz-fyi-soft: #1f2c44;
    --iz-boss: #ab84ea;
    --iz-boss-soft: #2e2344;
    --iz-trash-hint: #4a3128;
    --iz-archive-hint: #24344f;
    --iz-doom: #e46262;
    --iz-inbox-bg: #171e2e;
  }
}

.arena-iz {
  height: auto;
  min-height: 0;
  padding: 14px 0 18px;
  position: relative;
}

/* --- the stack ------------------------------------------------------------------ */

.iz-inbox {
  position: relative;
  width: min(100%, 520px);
  height: 520px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background: var(--iz-inbox-bg);
  border-radius: 14px;
  overflow: hidden;
}

/* Cards are positioned by JS (--iz-y) so drags can compose with stacking.
   touch-action pan-y: vertical stays the browser's (page scroll), horizontal
   is ours — the axis lock in widget.js decides within ~10px. */
.iz-card {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 8px;
  height: 56px;
  padding: 7px 12px 7px 14px;
  box-sizing: border-box;
  background: var(--iz-card-bg);
  border: 1px solid var(--iz-card-line);
  border-left-width: 5px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(15, 22, 38, 0.10);
  transform: translateY(var(--iz-y, 0px));
  transition: transform 190ms ease, opacity 190ms ease;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

.iz-card.iz-dragging {
  transition: none;
  cursor: grabbing;
  z-index: 5;
}

.iz-card .iz-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

/* reserve the top-right icon's space so a long subject truncates before it
   rather than sliding under it (seen on narrow phones) */
.iz-card .iz-row:not(.iz-preview) {
  padding-right: 22px;
}

.iz-card .iz-sender {
  font-size: 12px;
  font-weight: 700;
  color: var(--iz-muted);
  flex: none;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iz-card .iz-subject {
  font-size: 14px;
  font-weight: 600;
  color: var(--iz-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

.iz-card .iz-preview {
  font-size: 12px;
  color: var(--iz-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.iz-card .iz-ico {
  position: absolute;
  top: 7px;
  right: 9px;
  width: 18px;
  height: 18px;
}

.iz-card .iz-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cat-junk { border-left-color: var(--iz-junk); }
.cat-fyi { border-left-color: var(--iz-fyi); }

/* The boss is unmissable: heavier border all round, tinted surface, crown. */
.cat-boss {
  border-color: var(--iz-boss);
  border-left-color: var(--iz-boss);
  background: var(--iz-boss-soft);
}
.cat-boss .iz-subject { font-weight: 800; }

/* drag direction hints: the card telegraphs which bucket it is over */
.iz-card.iz-hint-left { background: var(--iz-trash-hint); }
.iz-card.iz-hint-right { background: var(--iz-archive-hint); }

.iz-card.iz-locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.iz-card.iz-shake {
  animation: iz-shake 340ms ease;
}

@keyframes iz-shake {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -7px; }
  50% { margin-left: 6px; }
  75% { margin-left: -3px; }
}

/* keyboard cursor */
.iz-card.iz-focus {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

/* fly-off on correct triage (JS sets the transform; this eases it) */
.iz-card.iz-fly {
  transition: transform 260ms ease-in, opacity 260ms ease-in;
  opacity: 0;
}

/* the avalanche: staggered by --iz-d per card */
.iz-card.iz-avalanche {
  transition: transform 700ms cubic-bezier(0.5, 0, 0.9, 0.4), opacity 700ms ease;
  transition-delay: var(--iz-d, 0ms);
  opacity: 0.15;
}

.iz-toast {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 16px;
  background: var(--iz-ink);
  color: var(--iz-card-bg);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(15, 22, 38, 0.25);
  z-index: 12;
  pointer-events: none;
  white-space: nowrap;
}

/* --- HUD danger telegraph -------------------------------------------------------- */

.hud-chip.iz-warn { background: #f6e3c6; border-color: #dfb877; }
.hud-chip.iz-alarm {
  background: #f7d3d3;
  border-color: var(--iz-doom);
  animation: iz-pulse 900ms ease infinite;
}

@media (prefers-color-scheme: dark) {
  .hud-chip.iz-warn { background: #3d321a; border-color: #8a6a35; }
  .hud-chip.iz-alarm { background: #4a2626; }
}

@keyframes iz-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* --- the fail screen -------------------------------------------------------------- */

.iz-doom {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--iz-muted);
}

.iz-doom-badge {
  display: inline-block;
  min-width: 2.2em;
  padding: 6px 16px;
  background: var(--iz-doom);
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  margin-right: 8px;
}

.iz-tier {
  font-style: italic;
  color: var(--iz-muted);
  margin-top: 2px;
}

.iz-beststreak { color: var(--iz-muted); font-size: 0.9em; }

/* phones can't fit the tall overlay inside the inbox — the results replace
   the inbox entirely (house "ended" pattern) */
.arena-iz.ended .iz-inbox,
.arena-iz.ended .iz-toast { display: none; }
.arena-iz.ended { height: auto; }
.arena-iz.ended .overlay { position: static; min-height: 0; }

/* --- toolbar (house pattern, sound only) ------------------------------------------ */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tool[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.tool svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool svg .fill { fill: currentColor; stroke: none; }

#soundBtn .icon-when-on { display: none; }
#soundBtn[aria-pressed="true"] .icon-when-on { display: initial; }
#soundBtn[aria-pressed="true"] .icon-when-off { display: none; }

.toolbar-spacer { flex: 1; }

.toolbar .hud-chip strong { font-variant-numeric: tabular-nums; }

#unreadMax { color: var(--muted); font-size: 0.85em; }

/* start-overlay legend */
.iz-rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
  text-align: left;
}

.iz-rule { white-space: nowrap; }

.iz-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}

.iz-dot-junk { background: var(--iz-junk); }
.iz-dot-fyi { background: var(--iz-fyi); }
.iz-dot-boss { background: var(--iz-boss); }

kbd {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  font-size: 0.85em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .iz-card { transition: opacity 150ms ease; }
  .iz-card.iz-shake { animation: none; }
  .iz-card.iz-fly { transition: opacity 150ms ease; }
  .iz-card.iz-avalanche { transition: opacity 300ms ease; transition-delay: 0ms; }
  .hud-chip.iz-alarm { animation: none; }
}