/* ==========================================================================
   victory-atlas.css — the 120-motif playbook
   --------------------------------------------------------------------------
   Breadth you can see on a normal scroll: a quiet grid with no card borders,
   restrained family headings and marks large enough to read as drawings
   rather than postage stamps.  Victory orange is the artwork's own colour in
   both environments; only the ground and the type follow the environment.
   ========================================================================== */

.vic .vat{margin-top:var(--vs-6)}

/* --- the bar: filters, search, count ------------------------------------ */
.vic .vat__bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:var(--vs-4) var(--va-gutter);
  align-items:end;
  margin-bottom:var(--vs-5);
}
.vic .vat__families{display:flex;flex-wrap:wrap;gap:var(--vs-1)}
.vic .vat__fam{
  border:0;background:none;cursor:pointer;
  padding:7px 13px;
  font:600 12px/1.4 var(--v-ui);letter-spacing:.02em;
  color:var(--v-ink-mute);
  box-shadow:inset 0 0 0 1px var(--v-edge-soft);
}
.vic .vat__fam:hover{color:var(--v-ink)}
.vic .vat__fam[aria-pressed="true"]{color:var(--v-ink);box-shadow:inset 0 0 0 2px var(--v-accent)}
.vic .vat__fam:focus-visible{outline:2px solid var(--v-focus);outline-offset:2px}

.vic .vat__find{display:flex;align-items:center;gap:var(--vs-2);justify-self:end}
.vic .vat__search{
  font:400 var(--va-support-size)/1.4 var(--v-ui);
  color:var(--v-ink);background:var(--v-panel-1);
  border:1px solid var(--v-edge);border-radius:0;
  padding:9px 12px;min-width:min(260px,44vw);min-height:40px;
}
.vic .vat__search::placeholder{color:var(--v-ink-faint)}
.vic .vat__search:focus-visible{outline:2px solid var(--v-focus);outline-offset:2px}
.vic .vat__count{margin:0;font:600 var(--va-label-size)/1.5 var(--v-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--v-ink-label);white-space:nowrap}
.vic .vat__reset{
  border:0;background:none;cursor:pointer;padding:0;
  font:600 var(--va-label-size)/1.5 var(--v-ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--v-ink);border-bottom:1px solid var(--v-accent);
}
.vic .vat__reset[hidden]{display:none !important}

/* --- the grid ------------------------------------------------------------
   Ten columns on a wide screen, three on a phone; the marks carry the
   composition, so no cell has a border of its own.                        */
.vic .vat__grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:var(--vs-5) var(--vs-4);
}
.vic .vat__famhead{
  grid-column:1 / -1;
  margin:var(--vs-4) 0 0;
  font:600 var(--va-label-size)/1.5 var(--v-ui);
  letter-spacing:.09em;text-transform:uppercase;color:var(--v-ink-label);
  border-top:1px solid var(--v-edge-soft);
  padding-top:var(--va-rule-copy);
}
.vic .vat__famhead:first-child{margin-top:0}
.vic .vat__cell{margin:0;min-width:0}
.vic .vat__b{
  display:block;width:100%;
  border:0;background:none;cursor:pointer;padding:0;text-align:left;
  color:inherit;
}
.vic .vat__b:focus-visible{outline:2px solid var(--v-focus);outline-offset:4px}
.vic .vat__m{
  display:block;width:100%;height:auto;aspect-ratio:1;
  background:var(--v-panel-1);
  padding:9%;
  transition:background .18s ease,transform .18s ease;
}
.vic .vat__b:hover .vat__m{background:var(--v-panel-2);transform:translateY(-2px)}
.vic .vat__t{
  display:block;margin-top:var(--vs-1);
  font:400 11px/1.35 var(--v-ui);color:var(--v-ink-mute);
  overflow-wrap:break-word;
}
.vic .vat__t b{font-weight:600;color:var(--v-ink-label);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .vic .vat__m{transition:none}
  .vic .vat__b:hover .vat__m{transform:none}
}
@media (max-width:1439px){.vic .vat__grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:1099px){.vic .vat__grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:767px){
  .vic .vat__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--vs-4) var(--vs-3)}
  .vic .vat__bar{grid-template-columns:minmax(0,1fr)}
  /* justify-self:start would size this row to max-content — the count is
     nowrap and the field has a minimum, so at 320px the pair measured 340px
     inside a 280px column and pushed the document to 360. Stretch makes the
     row take the column and the field absorb what is left; the count drops
     under it when even that is not enough. */
  .vic .vat__find{justify-self:stretch;flex-wrap:wrap;row-gap:var(--vs-1)}
  .vic .vat__count{white-space:normal}
  .vic .vat__search{min-width:0;flex:1 1 140px}
}
@media (max-width:479px){
  .vic .vat__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vic .vat__t{font-size:10px}
}

/* --- the inspector -------------------------------------------------------- */
.vat-lock,.vat-lock body{overflow:hidden}
.vic .vat__insp{position:fixed;inset:0;z-index:1900;display:grid;place-items:center;padding:clamp(10px,2.4vw,32px)}
.vic .vat__insp[hidden]{display:none !important}
.vic .vat__scrim{position:absolute;inset:0;background:var(--v-scrim)}
.vic .vat__panel{
  position:relative;width:min(920px,100%);max-height:92vh;overflow:auto;
  background:var(--v-canvas-1);box-shadow:var(--v-lift-3);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"bar bar" "stage meta" "stage nav";
  gap:var(--vs-4) var(--va-gutter);
  padding:var(--vs-5);
  align-content:start;
}
.vic .vat__pbar{
  grid-area:bar;display:flex;align-items:center;gap:var(--vs-4);
  border-bottom:1px solid var(--v-edge-soft);padding-bottom:var(--vs-3);
}
.vic .vat__pbar .va-label{margin:0;flex:1 1 auto}
.vic .vat__seg{display:flex;gap:2px}
.vic .vat__seg button,.vic .vat__close,.vic .vat__nav button{
  border:0;background:none;cursor:pointer;padding:8px 13px;
  font:600 12px/1.3 var(--v-ui);color:var(--v-ink-mute);
  box-shadow:inset 0 0 0 1px var(--v-edge-soft);
}
.vic .vat__seg button[aria-pressed="true"]{color:var(--v-ink);box-shadow:inset 0 0 0 2px var(--v-accent)}
.vic .vat__close:hover,.vic .vat__nav button:hover,.vic .vat__seg button:hover{color:var(--v-accent)}
.vic .vat__stage{
  grid-area:stage;display:grid;place-items:center;
  aspect-ratio:1;padding:clamp(20px,4vw,52px);
}
.vic .vat__big{display:block;width:100%;height:auto}
.vic .vat__meta{grid-area:meta;align-self:start}
.vic .vat__name{
  margin:0;font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(26px,2.5vw,36px);line-height:1.1;letter-spacing:-.02em;color:var(--v-ink);
}
.vic .vat__mean{margin:var(--vs-2) 0 0;color:var(--v-ink)}
.vic .vat__fam,.vic .vat__geo{margin:var(--vs-3) 0 0}
.vic .vat__geo{font-size:12px;line-height:1.6}
.vic .vat__dl{margin:var(--vs-4) 0 0;display:flex;flex-wrap:wrap;gap:var(--vs-2) var(--vs-4)}
.vic .vat__dl a{
  font:600 12px/1.4 var(--v-ui);color:var(--v-ink);text-decoration:none;
  border-bottom:1px solid var(--v-accent);
}
.vic .vat__nav{grid-area:nav;display:flex;gap:var(--vs-1);align-self:end}
@media (max-width:719px){
  .vic .vat__panel{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"bar" "stage" "meta" "nav";
    padding:var(--vs-4);
  }
  .vic .vat__stage{aspect-ratio:auto;padding:var(--vs-4)}
  .vic .vat__big{max-width:260px;margin-inline:auto}
}

/* If the atlas data cannot be fetched, the chapter still says what is there. */
.vic .vat__fallback{display:none}
.vic [data-vat-failed] .vat__fallback{display:block}
.vic [data-vat-failed] .vat__bar,.vic [data-vat-failed] .vat__grid{display:none}