/* ==========================================================================
   Fusion Personas — page styles on top of system.css.
   Motif: the compendium ledger. Each arcana is a collapsible dossier of
   Persona rows; the frame (headers, stamps) is loud, the roster stays level
   and scannable. Two arcana (Faith, Councillor) and a handful of individual
   rows carry a spoiler veil that only the player's own tap lifts.
   ========================================================================== */

/* ---- 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;
}

.filters-toggle { display: none; }

/* Sort: three chips tiled into one segmented bar — one instrument, one line */
.sort-seg { display: flex; flex: none; }
.sort-seg .chip { min-width: 6.75rem; }
.sort-seg .chip + .chip { margin-left: -1px; }
.sort-seg .chip > span { display: block; text-align: center; }

.toolbar-controls { flex-wrap: wrap; }
.toolbar-gap { flex: 1 1 var(--space-5); min-width: var(--space-2); }

/* Arcana: aligned grid across the full toolbar width, never a ragged wrap */
.arcana-block .toolbar-label { display: block; margin-bottom: var(--space-2); }
#arcana-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr));
  gap: var(--space-1) var(--space-2);
}
#arcana-chips .chip { width: 100%; }
#arcana-chips .chip > span { display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@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; }
  .sort-seg { width: 100%; }
  .sort-seg .chip { flex: 1; min-width: 0; }
  .toolbar-gap { display: none; }
  #arcana-chips { grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); }
}

/* Sealed-arcana chips: filterable, but the name stays hidden until unsealed */
.chip--sealed { color: var(--smoke-lift); }
.chip--sealed span::before { content: "\25C6 "; font-size: 0.7em; color: var(--blood); letter-spacing: 0.15em; }

/* A visibly heavier chip for the one filter that removes content outright */
.chip--strong { box-shadow: inset 0 0 0 1px var(--blood); color: var(--blood); }
.chip--strong:hover { color: var(--paper); box-shadow: inset 0 0 0 1px var(--blood); background: var(--maroon); }
.chip--strong[aria-pressed="true"] { background: var(--blood); color: var(--paper); }

/* ---- Arcana sections -------------------------------------------------------- */

.arcana-group { border: 1px solid var(--line); }
.arcana-group + .arcana-group { margin-top: var(--space-4); }

.arcana-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;
}
/* The arcana's tarot card: white slanted face, glyph recolored via mask.
   Ink glyph normally; blood when the arcana completes. A missing glyph file
   degrades to a blank card face. */
.arcana-card {
  flex: none;
  width: 2rem;
  height: 2.7rem;
  background: var(--paper);
  transform: skewX(var(--slant)) rotate(-3deg);
  box-shadow: 2px 2px 0 var(--maroon);
  display: grid;
  place-content: center;
  transition: box-shadow var(--t-med) var(--ease-swift);
}
.arcana-glyph {
  width: 1.55rem;
  height: 1.55rem;
  background: var(--ink);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transform: skewX(calc(-1 * var(--slant)));
  transition: background var(--t-med) var(--ease-swift);
}
.arcana-group.is-cleared .arcana-card { box-shadow: 2px 2px 0 var(--blood); }
.arcana-group.is-cleared .arcana-glyph { background: var(--blood); }
.arcana-group.is-sealed .arcana-glyph { background: var(--smoke); }
.arcana-head.is-armed { box-shadow: inset 0 0 0 2px var(--blood); }
.arcana-head::after {
  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);
}
.arcana-head:hover::after { transform: skewX(var(--slant)) scaleX(1.04); }

.arcana-title {
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--text-lg);
  white-space: nowrap;
}
.arcana-group.is-sealed .arcana-title { color: var(--smoke-lift); font-style: normal; letter-spacing: 0.1em; }

.arcana-seal-note {
  font-size: var(--text-xs);
  color: var(--smoke-lift);
  font-style: italic;
  display: none;
}
.arcana-group.is-sealed .arcana-seal-note { display: inline; }

.arcana-spacer { flex: 1; }

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

.arcana-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);
}
.arcana-group.is-open .arcana-chev { transform: rotate(45deg); }

/* COMPLETE — same earned-stamp language as the enemy checklist's CLEARED,
   double-framed like an ink stamp pressed twice */
.arcana-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);
  outline: 1px solid var(--maroon);
  outline-offset: 2px;
  padding: 0.14em 0.7em;
  transform: skewX(var(--slant)) rotate(-3deg);
  display: none;
}
.arcana-group.is-cleared .arcana-stamp { display: inline-block; }
.arcana-group.is-cleared .arcana-head .counter .done { color: var(--blood); }

.arcana-body { border-top: 1px solid var(--line); padding: 0 var(--space-3) var(--space-2); }
.arcana-group:not(.is-open):not(.is-peek) .arcana-body { display: none; }
/* A sealed arcana has no peek — the two-step confirm is the only way in */
.arcana-group.is-sealed:not(.is-open) .arcana-body { display: none !important; }

/* ---- Flat list (Level / A–Z sort) ------------------------------------------- */

#flat-list { display: flex; flex-direction: column; }
#flat-list .persona + .persona { border-top: 1px solid var(--line); }

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

.persona-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(11rem, 1.4fr) 6rem 3.5rem 5rem 1.25rem;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-2);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.persona-row:hover { background: var(--panel); }
.persona-row:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }

.p-check {
  grid-column: 1;
  justify-self: start;
  width: 1.6rem;
  height: 1.6rem;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-content: center;
  border: 2px solid var(--smoke);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.p-check::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  background: var(--paper);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform var(--t-fast) var(--ease-swift);
}
.p-check:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.persona.is-fused .p-check { border-color: var(--blood); background: var(--blood); }
.persona.is-fused .p-check::before { transform: scale(1); }

.p-name { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
.p-name .p-name-text { font-weight: 700; min-width: 0; overflow-wrap: break-word; }
.persona.is-fused .p-name-text { color: var(--smoke-lift); }

.p-veil {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--smoke-lift);
  background: var(--panel-2);
  padding: 0.2em 0.7em;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.p-veil::before { content: "◆◆◆"; letter-spacing: 0.2em; font-size: 0.7em; color: var(--blood); }

.p-arcana { grid-column: 3; font-size: var(--text-sm); color: var(--smoke-lift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-level { grid-column: 4; font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: right; }

.p-stamp {
  grid-column: 5;
  justify-self: start;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blood);
  border: 2px solid var(--blood);
  padding: 0.08em 0.5em;
  transform: skewX(var(--slant));
  display: none;
  white-space: nowrap;
}
.persona.is-fused .p-stamp { display: inline-block; }

.p-chev {
  grid-column: 6;
  flex: none;
  width: 0.5em;
  height: 0.5em;
  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);
  justify-self: end;
}
.persona.is-open .p-chev { transform: rotate(45deg); }

/* DLC / Treasure tags — quiet, same visual family */
.p-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.05em 0.5em;
  color: var(--smoke-lift);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  white-space: nowrap;
}

/* Done rows recede so the still-missing roster stays sharp */
.persona.is-fused .p-arcana,
.persona.is-fused .p-level { color: var(--smoke); }

/* ---- Dossier ------------------------------------------------------------------ */

.p-dossier {
  padding: var(--space-2) var(--space-2) var(--space-5) calc(2.75rem + var(--space-3));
  font-size: var(--text-sm);
}
.persona:not(.is-open) .p-dossier { display: none; }

.pd-section + .pd-section { margin-top: var(--space-5); }
.pd-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--smoke-lift);
  margin-bottom: var(--space-2);
}

/* Stats */
.pd-stats { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.pd-stat { font-variant-numeric: tabular-nums; }
.pd-stat b { display: block; font-size: var(--text-xs); color: var(--smoke-lift); text-transform: uppercase; letter-spacing: 0.08em; }
.pd-stat span { font-size: var(--text-lg); font-weight: 700; }

/* Affinities — same chip vocabulary as the enemy checklist's aff-strip */
.pd-aff { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-variant-numeric: tabular-nums; }
.pd-aff .aff { font-size: var(--text-xs); white-space: nowrap; color: var(--smoke-lift); }
.pd-aff .aff b { font-weight: 700; color: var(--smoke-lift); }
.pd-aff .aff--wk { color: var(--blood); }
.pd-aff .aff--wk b { color: var(--blood); }
.pd-aff .aff--guard { color: var(--paper); }
.pd-aff .aff--guard b { color: var(--paper); }

/* Trait */
.pd-trait-name { font-weight: 700; font-style: italic; }
.pd-trait-desc { color: var(--smoke-lift); margin-top: var(--space-1); }

/* Skills */
.pd-skills { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.pd-skills li { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.pd-skills .sk-name { font-weight: 700; min-width: 9rem; }
.pd-skills .sk-level { color: var(--smoke-lift); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.pd-skills .sk-cat { color: var(--smoke-lift); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }

/* Inherits */
.pd-inherit-label { font-weight: 700; margin-bottom: var(--space-2); }
.pd-chips { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.pd-chip {
  font-size: var(--text-xs);
  color: var(--smoke-lift);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  padding: 0.15em 0.6em;
  white-space: nowrap;
}

/* Itemization — normal / alarm side by side, alarm gets a red-alert ring */
.pd-items { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.pd-item-box { flex: 1 1 12rem; padding: var(--space-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pd-item-box b {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--smoke-lift);
  margin-bottom: var(--space-1);
}
.pd-item-box .item-cat { color: var(--smoke-lift); font-size: var(--text-xs); }
.pd-item-box--alarm { box-shadow: inset 0 0 0 2px var(--blood); }
.pd-item-box--alarm b { color: var(--blood); }

/* Unlock */
.pd-unlock { color: var(--smoke-lift); }
.pd-unlock b { color: var(--paper); font-weight: 700; }
.pd-unlock .masked { font-style: italic; }

/* Routes */
.pd-route { padding: var(--space-3); box-shadow: inset 0 0 0 1px var(--line); }
.pd-route + .pd-route { margin-top: var(--space-3); }
.pd-route-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.pd-route-ingredients { font-weight: 700; }
.ing-plus { color: var(--smoke-lift); font-weight: 400; padding-inline: 0.2em; }
.ing-meta { font-size: var(--text-xs); font-weight: 400; color: var(--smoke-lift); }
.pd-route-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--smoke-lift);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  padding: 0.05em 0.5em;
}
.pd-route-summary { color: var(--paper); margin-bottom: var(--space-2); }
.pd-route-inherit { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.pd-route-inherit li { padding-left: var(--space-3); border-left: none; }
.pd-route-inherit .inh-head { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.pd-route-inherit .inh-skill { font-weight: 700; }
.pd-route-inherit .inh-source { color: var(--smoke-lift); font-size: var(--text-xs); }
.pd-route-inherit .inh-reason { color: var(--smoke-lift); font-size: var(--text-xs); margin-top: 0.15em; }
.pd-sig-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blood);
  box-shadow: inset 0 0 0 1px var(--blood);
  padding: 0.05em 0.5em;
}
.pd-route-trait { font-size: var(--text-sm); color: var(--smoke-lift); margin-bottom: var(--space-2); }
.pd-route-trait b { color: var(--paper); }
.pd-route-notes { list-style: none; font-size: var(--text-xs); color: var(--smoke-lift); font-style: italic; display: flex; flex-direction: column; gap: 0.2em; }

.pd-no-routes { color: var(--smoke-lift); font-style: italic; }

/* ---- Guillotine fuse effect --------------------------------------------------- */

.persona-row { position: relative; }
.p-blade {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 50%;
  height: 3px;
  background: var(--blood);
  transform: translateY(-50%) rotate(-9deg) scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 2;
}
/* Pure-CSS fallback (no GSAP on the page) */
@keyframes p-blade-sweep {
  0% { transform: translateY(-50%) rotate(-9deg) scaleX(0); opacity: 1; }
  55% { transform: translateY(-50%) rotate(-9deg) scaleX(1); opacity: 1; }
  100% { transform: translateY(-50%) rotate(-9deg) scaleX(1); opacity: 0; }
}
@keyframes p-row-punch {
  0% { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
.persona-row.is-fusing-css .p-blade { animation: p-blade-sweep 0.35s linear forwards; }
.persona-row.is-fusing-css { animation: p-row-punch 0.35s ease-in-out; }

/* ---- 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: 640px) {
  .arcana-head {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    column-gap: var(--space-2);
    row-gap: var(--space-1);
    align-items: center;
    padding: var(--space-3);
  }
  .arcana-card { grid-row: 1 / span 2; grid-column: 1; width: 1.75rem; height: 2.35rem; }
  .arcana-glyph { width: 1.3rem; height: 1.3rem; }
  .arcana-title { grid-row: 1; grid-column: 2; font-size: var(--text-base); }
  .arcana-seal-note { grid-row: 2; grid-column: 2 / -1; }
  .arcana-spacer { display: none; }
  .arcana-stamp { grid-row: 1; grid-column: 3; justify-self: end; }
  .arcana-head .counter { grid-row: 1; grid-column: 3; }
  .arcana-group.is-cleared .arcana-head .counter { grid-column: 3; }
  .arcana-chev { grid-row: 1; grid-column: 4; }
  .arcana-body { padding: 0 var(--space-2) var(--space-2); }

  .persona-row {
    grid-template-columns: 2.75rem 1fr auto auto;
    row-gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
  }
  .p-name { grid-column: 2; grid-row: 1; }
  .p-arcana { grid-column: 2; grid-row: 2; }
  .p-level { grid-column: 2; grid-row: 2; text-align: left; }
  .p-level::before { content: "Lv "; font-size: var(--text-xs); color: var(--smoke-lift); }
  .p-arcana::after { content: " · "; color: var(--smoke); }
  .p-stamp { grid-column: 3; grid-row: 1; }
  .p-chev { grid-column: 4; grid-row: 1; }

  .p-dossier { padding: var(--space-2) var(--space-3) var(--space-5); }
  .pd-items { flex-direction: column; }
}

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

@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; }
  .persona-row.is-fusing-css { animation: none; }
  .persona-row.is-fusing-css .p-blade { animation: none; display: none; }
}