/* ==========================================================================
   Enemy Checklist — page styles on top of system.css.
   Motif: case files. Each dungeon/path is a collapsible dossier; the frame
   (headers, stamps) is loud, the shadow rows stay level and scannable.
   ========================================================================== */

/* ---- Toolbar -------------------------------------------------------------- */

.toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.toolbar .field { flex: 1 1 14rem; max-width: 24rem; }

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.toolbar-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--smoke-lift);
  flex: none;
}

/* The mobile-only reveal for everything below the search field */
.filters-toggle { display: none; }

@media (max-width: 640px) {
  .filters-toggle { display: inline-block; }
  .toolbar .field { max-width: none; }
  .toolbar-filters { display: none; flex-direction: column; gap: var(--space-3); }
  .toolbar-filters.is-open { display: flex; }
}

/* ---- Case-file sections ---------------------------------------------------- */

.area { border: 1px solid var(--line); }
.area + .area { margin-top: var(--space-4); }
/* A finished dossier recedes a little */
.area.is-cleared { border-color: var(--line); }

.area-head {
  position: relative;
  isolation: isolate;
  width: 100%;
  border: none;
  font: inherit;
  color: var(--paper);
  background: var(--panel);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  min-height: 44px;
}
.area-head::before {
  /* The blood slash — same mark as .sec-h, so sections read as one family */
  content: "";
  width: 0.55em;
  height: 1.1em;
  background: var(--blood);
  transform: skewX(var(--slant));
  flex: none;
}
.area-head::after {
  /* Hover sweep, same move as the front-page menu */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--maroon);
  transform: skewX(var(--slant)) scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-med) var(--ease-swift);
}
.area-head:hover::after { transform: skewX(var(--slant)) scaleX(1.04); }
.area-head:hover .area-avail,
.area-head:hover .area-code { color: var(--paper); }

.area-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
}
.area-code {
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-base);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out);
}
/* Once revealed, the real name takes the lead and the codename steps back */
.area.is-revealed .area-code {
  font-size: var(--text-xs);
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--smoke-lift);
}
.area-name {
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--text-base);
  display: none;
}
.area.is-revealed .area-name { display: inline; }

.area-avail {
  font-size: var(--text-xs);
  color: var(--smoke-lift);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out);
}

.area-spacer { flex: 1; }

.area-head .counter { font-size: var(--text-base); }

.area-chev {
  flex: none;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid var(--smoke-lift);
  border-bottom: 2px solid var(--smoke-lift);
  transform: rotate(-45deg);
  transition: transform var(--t-med) var(--ease-swift);
}
.area.is-open .area-chev { transform: rotate(45deg); }

/* CLEARED — the earned stamp */
.area-stamp {
  flex: none;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blood);
  border: 2px solid var(--blood);
  padding: 0.1em 0.6em;
  transform: skewX(var(--slant)) rotate(-3deg);
  display: none;
}
.area.is-cleared .area-stamp { display: inline-block; }
.area.is-cleared .area-head .counter .done { color: var(--blood); }

/* Empty late paths: a quiet dossier — the tap only trades codename for name */
.area-note { font-size: var(--text-sm); color: var(--smoke-lift); font-style: italic; }

/* ---- Section body ----------------------------------------------------------- */

.area-body { border-top: 1px solid var(--line); padding: 0 var(--space-4) var(--space-2); }
.area:not(.is-open):not(.is-peek) .area-body { display: none; }

/* Column headers (desktop only) */
.row-head {
  display: grid;
  grid-template-columns: 1.75rem minmax(11rem, 1.3fr) 6rem 2.75rem minmax(7.5rem, 1fr) minmax(7.5rem, 1fr) minmax(12rem, 1.6fr);
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-bottom: 2px solid var(--line-strong);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--smoke-lift);
}

/* ---- Shadow rows (the calm content) ------------------------------------------ */

.enemy-row.check-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(11rem, 1.3fr) 6rem 2.75rem minmax(7.5rem, 1fr) minmax(7.5rem, 1fr) minmax(12rem, 1.6fr);
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-2);
}
.enemy-row input[type="checkbox"] { margin-top: 0.15rem; }

.enemy-name { display: block; min-width: 0; }
.enemy-name .check-label { font-weight: 700; }
.enemy-persona {
  display: block;
  font-size: var(--text-sm);
  color: var(--smoke-lift);
}

.enemy-arcana { font-size: var(--text-sm); color: var(--smoke-lift); padding-top: 0.1rem; }
.enemy-lv {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-top: 0.1rem;
}

/* Element / guard chips: rectangular and level — data, not frame */
.el-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); align-content: start; }
.el {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.12em 0.5em;
  white-space: nowrap;
}
.el--weak { background: var(--blood); color: var(--paper); }
.el--str  { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--smoke-lift); }
.el--nul  { background: var(--panel-2); color: var(--paper); box-shadow: inset 0 0 0 1px var(--smoke); }
.el--rpl  { background: var(--paper); color: var(--ink); }
.el--dr   { background: var(--maroon); color: var(--paper); }
.el-none { font-size: var(--text-sm); color: var(--smoke); }

/* Rewards: four source categories, never flattened */
.rewards { font-size: var(--text-sm); line-height: 1.5; }
.rewards b {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--smoke-lift);
  padding-right: 0.15em;
}
.rewards .rw-group { white-space: normal; }
.rewards .rw-group + .rw-group::before { content: " · "; color: var(--smoke); }

/* Full affinity strip (global toggle, off by default) */
.aff-strip {
  grid-column: 2 / -1;
  display: none;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--smoke-lift);
  font-variant-numeric: tabular-nums;
  padding-top: var(--space-1);
}
.show-affinities .aff-strip { display: flex; }
.aff-strip .aff { white-space: nowrap; }
.aff-strip .aff b { font-weight: 700; color: var(--smoke-lift); }
.aff-strip .aff--wk { color: var(--blood); }
.aff-strip .aff--wk b { color: var(--blood); }
.aff-strip .aff--guard { color: var(--paper); }
.aff-strip .aff--guard b { color: var(--paper); }

/* Done rows recede so the hunt list stays sharp */
.enemy-row.is-done .enemy-persona,
.enemy-row.is-done .enemy-arcana,
.enemy-row.is-done .enemy-lv { color: var(--smoke); }
.enemy-row.is-done .el { opacity: 0.45; }
.enemy-row.is-done .rewards { opacity: 0.45; }

/* ---- Loading / error / no-results ------------------------------------------- */

.skel { border: 1px solid var(--line); height: 3.25rem; margin-top: var(--space-4); position: relative; overflow: hidden; }
.skel:first-child { margin-top: 0; }
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--panel) 50%, transparent 70%);
  animation: skel-sweep 1.1s linear infinite;
}
@keyframes skel-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.load-error, .no-results { padding: var(--space-6) 0; }
.load-error p, .no-results p { color: var(--smoke-lift); margin-bottom: var(--space-4); }

/* ---- Page footer actions ------------------------------------------------------ */

.page-actions {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}
.reset-btn.is-armed { background: var(--blood); color: var(--paper); box-shadow: none; }

/* ---- Mobile --------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Rewards get the full width before the phone layout kicks in */
  .row-head { grid-template-columns: 1.75rem minmax(10rem, 1.3fr) 5.5rem 2.5rem minmax(7rem, 1fr) minmax(7rem, 1fr); }
  .row-head .h-rewards { display: none; }
  .enemy-row.check-row { grid-template-columns: 1.75rem minmax(10rem, 1.3fr) 5.5rem 2.5rem minmax(7rem, 1fr) minmax(7rem, 1fr); }
  .enemy-row .rewards { grid-column: 2 / -1; }
}

@media (max-width: 640px) {
  /* Header becomes a deliberate grid: codename · counter · chevron on the
     first line, the revealed name on its own line, dates last. */
  .area-head {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    column-gap: var(--space-2);
    row-gap: var(--space-1);
    align-items: center;
    padding: var(--space-3);
  }
  .area-head::before { grid-row: 1; grid-column: 1; }
  .area-title { display: contents; }
  .area-code { grid-row: 1; grid-column: 2; }
  .area-name { grid-row: 2; grid-column: 2 / -1; }
  .area-note { grid-row: 2; grid-column: 2 / -1; }
  .area--empty.is-revealed .area-note { grid-row: 3; }
  .area-avail { grid-row: 3; grid-column: 2 / -1; }
  .area--empty.is-revealed .area-avail { grid-row: 4; }
  .area-spacer { display: none; }
  .area-stamp { grid-row: 1; grid-column: 3; justify-self: end; }
  .area-head .counter { grid-row: 1; grid-column: 4; }
  .area-chev { grid-row: 1; grid-column: 5; }
  .area-body { padding: 0 var(--space-3) var(--space-2); }

  .row-head { display: none; }
  .enemy-row.check-row {
    grid-template-columns: 1.75rem 1fr auto;
    row-gap: var(--space-2);
  }
  .enemy-persona { display: inline; }
  .enemy-meta-sep { display: inline; color: var(--smoke); }
  .enemy-arcana { display: inline; padding: 0; }
  .enemy-lv { grid-column: 3; padding: 0; color: var(--smoke-lift); }
  .enemy-lv::before { content: "Lv "; font-size: var(--text-xs); }
  .enemy-row .el-chips { grid-column: 2 / -1; }
  .enemy-row .el-chips:empty { display: none; }
  .enemy-row .rewards { grid-column: 2 / -1; }
  .aff-strip { grid-column: 2 / -1; }
}

@media (min-width: 641px) {
  .enemy-meta-sep { display: none; }
}

/* ---- Reduced motion ---------------------------------------------------------------- */

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