/* =========================================================
   Gallery: figures filed by quiz.
   Each image is a "plate": shown whole (never cropped) on a
   graph-paper mat with print crop marks, captioned with a
   figure number in the subject's colour.
   ========================================================= */

.gallery-page{ position:relative; }
.gallery-dot{ display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--c, var(--text-3)); }

/* ---------- the mat shared by plates, the empty state and the upload window ---------- */

.plate-mat{
  --grid:color-mix(in srgb, var(--text) 6%, transparent);
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background-color:var(--surface-sunken);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:14px 14px;
  background-position:-1px -1px;
}
/* four L-shaped crop marks inset from the corners */
.plate-marks{
  --m:color-mix(in srgb, var(--text) 32%, transparent);
  position:absolute;
  inset:8px;
  pointer-events:none;
  background:
    linear-gradient(var(--m), var(--m)) top left / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) top left / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) top right / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) top right / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / 1px 9px no-repeat;
  z-index:1;
}

/* ---------- toolbar: subjects and search ---------- */

.gallery-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3) var(--s-6);
  flex-wrap:wrap;
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--line-soft);
}
/* subjects: one recessed rail, the chosen subject raised out of it */
.gallery-tabs{ position:relative; display:inline-flex; gap:2px; max-width:100%; min-width:0; padding:4px; overflow-x:auto; scrollbar-width:none; border:1px solid var(--line-soft); border-radius:calc(var(--r-sm) + 4px); background:var(--surface-sunken); }
.gallery-tabs::-webkit-scrollbar{ display:none; }
.gallery-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 12px 0 10px;
  border-radius:var(--r-sm);
  color:var(--text-3);
  font-size:var(--fs-sm);
  font-weight:400;
  white-space:nowrap;
  transition:color var(--dur-1), background-color var(--dur-2), box-shadow var(--dur-2);
}
.gallery-tab .i{ width:15px; height:15px; flex:none; transition:color var(--dur-1); }
.gallery-tab-n{ margin-left:2px; color:var(--text-3); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.gallery-tab:hover{ color:var(--text); }
.gallery-tab.is-active{ background:var(--surface); color:var(--text); box-shadow:inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .35); }
.gallery-tab.is-active .i{ color:var(--accent-text); }
.gallery-tab.is-active .gallery-tab-n{ color:var(--text-2); }
/* the raised highlight is one piece that slides from subject to subject */
.gallery-tab{ position:relative; z-index:1; }
.gallery-tabs-thumb{ position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:var(--r-sm); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .35); opacity:0; pointer-events:none; transition:transform 380ms cubic-bezier(.3, 1.25, .5, 1), width 380ms cubic-bezier(.3, 1.25, .5, 1); }
.gallery-tabs.has-thumb .gallery-tabs-thumb{ opacity:1; }
.gallery-tabs.has-thumb .gallery-tab.is-active{ background:none; box-shadow:none; }
.gallery-tab .i, .gallery-tab-n{ transition:color 260ms ease; }
@keyframes gallery-swap{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
/* a switch re-renders the page; skip the page's own entrance so only the rail and figures move */
.view-enter .gallery-page.is-switching, .gallery-page.is-switching > *{ animation:none; }
/* figures ease in after a switch */
.gallery-page > .gallery-swap, .gallery-page.is-switching > .gallery-swap{ animation:gallery-swap 340ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce){
  .gallery-tabs-thumb{ transition:none; }
  .gallery-page > .gallery-swap, .gallery-page.is-switching > .gallery-swap{ animation:none; }
}
.gallery-search{ width:min(300px, 100%); }

/* ---------- second row: quizzes, count, sort, layout, select ---------- */

.gallery-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3) var(--s-5);
  flex-wrap:wrap;
  margin-top:var(--s-4);
}
.gallery-count{ color:var(--text-3); font-size:var(--fs-sm); }
.gallery-count strong{ color:var(--text); font-weight:500; }
/* quizzes use the same rail as subjects; the chapter number stands where the icon would */
.gallery-quiz-rail{ flex:0 1 auto; }
.gallery-tab-no{ display:inline-grid; place-items:center; width:15px; flex:none; color:var(--text-3); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; transition:color 260ms ease; }
.gallery-tab.is-active .gallery-tab-no{ color:var(--accent-text); }

.gallery-controls{ display:flex; align-items:center; gap:var(--s-2); margin-left:auto; }
.gallery-sort{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:34px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface-sunken);
  color:var(--text-2);
  transition:border-color var(--dur-1), color var(--dur-1);
}
.gallery-sort:hover{ border-color:var(--line-strong); color:var(--text); }
.gallery-sort:focus-within{ border-color:var(--accent-line); box-shadow:var(--ring); }
.gallery-sort .i{ position:absolute; right:9px; width:14px; height:14px; pointer-events:none; color:var(--text-3); }
.gallery-sort select{
  height:100%;
  padding:0 30px 0 12px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:500;
  appearance:none;
  cursor:pointer;
  outline:none;
}
.gallery-sort option{ background:var(--surface); color:var(--text); }
/* the sort's themed trigger sits inside the sort field, which already draws the border and chevron */
.gallery-sort .tselect-trigger{ width:auto; height:100%; padding:0 30px 0 12px; border:0; background:transparent; box-shadow:none; color:inherit; font-size:var(--fs-xs); font-weight:500; }
.gallery-sort .tselect-trigger > .i{ display:none; }
.gallery-view button{ gap:6px; }
/* one highlight slides between the two layouts */
.gallery-view{ position:relative; }
.gallery-view button{ position:relative; z-index:1; }
.gallery-view .seg-thumb{ position:absolute; top:3px; bottom:3px; left:0; width:0; border-radius:calc(var(--r-sm) - 3px); background:var(--surface); box-shadow:var(--shadow-sm), 0 0 0 1px var(--line); opacity:0; pointer-events:none; transition:transform 340ms cubic-bezier(.3, 1.25, .5, 1), width 340ms cubic-bezier(.3, 1.25, .5, 1); }
.gallery-view.has-thumb .seg-thumb{ opacity:1; }
.gallery-view.has-thumb button.active{ background:none; box-shadow:none; }
@media (prefers-reduced-motion: reduce){ .gallery-view .seg-thumb{ transition:none; } }
.gallery-view button .i{ width:14px; height:14px; }
.gallery-select-btn[aria-pressed="true"]{ border-color:var(--accent-line); background:var(--accent-wash); color:var(--accent-text); }

/* ---------- chapters (one per quiz) ---------- */

#galleryResults{ margin-top:var(--s-2); }
.gallery-chapter{ position:relative; margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid var(--line); animation:fade-up var(--dur-3) var(--ease-out) both; }
.gallery-chapter::before{ content:""; position:absolute; top:-1px; left:0; width:44px; height:2px; border-radius:2px; background:var(--c); }
.gallery-chapter-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto;
  align-items:center;
  gap:var(--s-4);
  margin-bottom:var(--s-2);
}
.gallery-chapter-toggle{ display:flex; align-items:center; gap:var(--s-3); min-width:0; padding:4px 8px 4px 0; border-radius:var(--r-sm); text-align:left; }
.gallery-chapter-caret{ display:grid; place-items:center; flex:none; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; color:var(--text-3); transition:transform var(--dur-3) var(--ease-out), color var(--dur-1), border-color var(--dur-1); }
.gallery-chapter-caret .i{ width:15px; height:15px; }
.gallery-chapter-toggle:hover .gallery-chapter-caret{ border-color:var(--line-strong); color:var(--text); }
.gallery-chapter-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.gallery-chapter.is-collapsed .gallery-chapter-caret{ transform:rotate(-90deg); }
.gallery-chapter-copy{ display:grid; gap:3px; min-width:0; }
.gallery-chapter-folder{ display:inline-flex; align-items:center; gap:8px; color:var(--text-3); font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:var(--tracking-label); text-transform:uppercase; }
.gallery-chapter-folder > i:not(.gallery-dot){ font-style:normal; opacity:.5; }
.gallery-chapter-head h3{ overflow:hidden; color:var(--text); font-size:var(--fs-lg); font-weight:600; letter-spacing:-.01em; text-overflow:ellipsis; white-space:nowrap; }
.gallery-chapter-meta{ display:inline-flex; align-items:center; gap:6px; color:var(--text-3); font-size:var(--fs-xs); white-space:nowrap; }
.gallery-chapter-meta i{ font-style:normal; opacity:.6; }
.gallery-chapter-actions{ display:flex; gap:var(--s-2); }

/* the body folds away; the inner padding leaves room for the hover lift and shadow */
.gallery-chapter-body{ display:grid; grid-template-rows:1fr; margin:0 -14px; transition:grid-template-rows var(--dur-3) var(--ease-out); }
.gallery-chapter-body > .plate-grid{ min-height:0; overflow:hidden; padding:10px 14px 18px; transition:padding var(--dur-3) var(--ease-out); }
.gallery-chapter.is-collapsed .gallery-chapter-body{ grid-template-rows:0fr; }
.gallery-chapter.is-collapsed .plate-grid{ padding-top:0; padding-bottom:0; }

/* ---------- plates ---------- */

.plate-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:var(--s-5) var(--s-4);
}
.plate{
  --c:var(--text-3);
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  text-align:left;
  transition:border-color var(--dur-2), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3);
}
.plate:hover{ border-color:var(--line-strong); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.plate-hit{ position:absolute; inset:0; z-index:2; border-radius:inherit; cursor:zoom-in; }
.plate-hit:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.plate .plate-mat{ aspect-ratio:4 / 3; border-bottom:1px solid var(--line); }
.plate .plate-mat::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--text) 7%, transparent) 50%, transparent 70%) 0 0 / 220% 100%;
  animation:plate-shimmer 1.3s linear infinite;
  pointer-events:none;
}
.plate .plate-mat.is-loaded::after,
.plate .plate-mat.is-missing::after{ display:none; }
@keyframes plate-shimmer{ to{ background-position:-220% 0; } }
.plate-mat img{
  --pad:18px;
  position:absolute;
  top:50%;
  left:50%;
  max-width:calc(100% - var(--pad) * 2);
  max-height:calc(100% - var(--pad) * 2);
  border-radius:3px;
  box-shadow:0 1px 2px rgba(0, 0, 0, .25), 0 8px 22px -10px rgba(0, 0, 0, .55);
  opacity:0;
  transform:translate(-50%, -50%) scale(.985);
  transition:opacity var(--dur-3), transform var(--dur-4) var(--ease-out);
}
.plate-mat.is-loaded img{ opacity:1; transform:translate(-50%, -50%); }
.plate:hover .plate-mat.is-loaded img{ transform:translate(-50%, -50%) scale(1.03); }
.plate-mat.is-missing::before{ content:"Figure unavailable"; color:var(--text-3); font-size:var(--fs-2xs); }

.plate-caption{ display:grid; gap:3px; padding:var(--s-3) var(--s-4) var(--s-4); }
.plate-fig{ display:flex; align-items:baseline; gap:6px; min-width:0; color:var(--c); font-size:var(--fs-2xs); font-weight:500; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.plate-fig em{ overflow:hidden; color:var(--text-3); font-style:normal; letter-spacing:.04em; text-overflow:ellipsis; }
.plate-fig em::before{ content:"·"; margin-right:6px; opacity:.6; }
.plate-caption strong{
  display:-webkit-box;
  overflow:hidden;
  color:var(--text);
  font-size:var(--fs-sm);
  font-weight:500;
  line-height:1.4;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow-wrap:anywhere;
}
.plate-note{ overflow:hidden; color:var(--text-2); font-size:var(--fs-xs); line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.plate-meta{ display:flex; align-items:center; gap:6px; margin-top:2px; overflow:hidden; color:var(--text-3); font-size:var(--fs-2xs); white-space:nowrap; text-overflow:ellipsis; }
.plate-meta i{ font-style:normal; opacity:.6; }
.plate-meta .i{ width:12px; height:12px; }
.plate-meta .mono{ font-size:var(--fs-2xs); }

/* quick actions on hover */
.plate-quick{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  display:flex;
  gap:4px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);
  opacity:0;
  translate:0 -4px;
  pointer-events:none;
  transition:opacity var(--dur-2), translate var(--dur-2) var(--ease-out);
}
.plate:hover .plate-quick,
.plate:focus-within .plate-quick{ opacity:1; translate:0 0; pointer-events:auto; }
.plate-quick-btn{ display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:var(--text-2); transition:background-color var(--dur-1), color var(--dur-1); }
.plate-quick-btn:hover{ background:var(--hover); color:var(--text); }
.plate-quick-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:0; }
.plate-quick-btn .i{ width:15px; height:15px; }

/* selection */
.plate-check{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  display:none;
  place-items:center;
  width:24px;
  height:24px;
  border:1.5px solid var(--line-strong);
  border-radius:50%;
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  color:transparent;
  pointer-events:none;
  transition:background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1), transform var(--dur-2) var(--ease-out);
}
.plate-check .i{ width:14px; height:14px; stroke-width:2.4; }
.is-selecting .plate-check{ display:grid; }
.is-selecting .plate-quick{ display:none; }
.is-selecting .plate-hit{ cursor:pointer; }
.is-selecting .plate:hover{ transform:none; }
.plate.is-selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.plate.is-selected .plate-check{ border-color:var(--accent); background:var(--accent); color:var(--on-accent); transform:scale(1.06); }
.plate.is-selected .plate-mat.is-loaded img{ transform:translate(-50%, -50%) scale(.94); }
.plate.is-new{ animation:plate-new 1.6s var(--ease-out); }
@keyframes plate-new{ 0%, 30%{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash-strong); } }

/* ---------- grid: every figure in its own shape, rows filled edge to edge ---------- */

.plate-flow{ --row:200px; display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-5); }
.plate-flow::after{ content:""; flex:999 1 0; }
.plate-flow .plate{ flex:var(--ar) 1 calc(var(--ar) * var(--row)); animation:fade-up var(--dur-3) var(--ease-out) both; }
.plate-flow .plate-mat{ aspect-ratio:var(--ar); }
.plate-flow .plate-mat img{ --pad:12px; }
.plate-flow .plate-caption{ padding:var(--s-2) var(--s-3) var(--s-3); }
.plate-flow .plate-caption strong{ -webkit-line-clamp:1; }

.gallery-none{ display:flex; align-items:center; justify-content:center; gap:var(--s-2); padding:var(--s-12) var(--s-4); color:var(--text-3); font-size:var(--fs-sm); }
.gallery-none .i{ width:16px; height:16px; }

/* ---------- bar for selected figures ---------- */

.gallery-selbar{
  position:sticky;
  bottom:var(--s-5);
  z-index:20;
  display:flex;
  align-items:center;
  gap:var(--s-2);
  width:fit-content;
  max-width:100%;
  margin:var(--s-8) auto 0;
  padding:6px 6px 6px var(--s-4);
  border:1px solid var(--line-strong);
  border-radius:calc(var(--r-md) + 2px);
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  animation:selbar-in var(--dur-3) var(--ease-out);
}
.gallery-selbar[hidden]{ display:none; }
@keyframes selbar-in{ from{ opacity:0; translate:0 12px; } }
.gallery-selbar-count{ min-width:132px; color:var(--text); font-size:var(--fs-sm); font-weight:500; font-variant-numeric:tabular-nums; }
.gallery-selbar-link{ padding:4px 6px; border-radius:6px; color:var(--accent-text); font-size:var(--fs-xs); font-weight:500; }
.gallery-selbar-link:hover{ background:var(--accent-wash); }
.gallery-selbar-sep{ width:1px; height:22px; margin:0 4px; background:var(--line); }

/* ---------- empty gallery ---------- */

.gallery-empty{
  display:grid;
  grid-template-columns:minmax(200px, 300px) minmax(0, 1fr);
  align-items:center;
  gap:var(--s-8);
  margin-top:var(--s-6);
  padding:var(--s-8);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
}
.gallery-empty-plate{ display:grid; gap:var(--s-2); }
.gallery-empty-plate .plate-mat{ aspect-ratio:4 / 3; border:1px solid var(--line); border-radius:var(--r-md); color:var(--accent); }
.gallery-empty-plate .plate-mat .i{ position:relative; width:56px; height:56px; stroke-width:1.2; }
.gallery-empty-fig{ color:var(--text-3); font-size:var(--fs-2xs); letter-spacing:.06em; text-transform:uppercase; }
.gallery-empty-copy{ display:grid; gap:var(--s-3); justify-items:start; }
.gallery-empty-copy h2{ font-size:var(--fs-xl); font-weight:600; letter-spacing:-.02em; }
.gallery-empty-copy p{ max-width:460px; color:var(--text-2); font-size:var(--fs-sm); line-height:1.65; }
.gallery-empty-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); margin-top:var(--s-2); }
.gallery-empty-actions span{ color:var(--text-3); font-size:var(--fs-xs); }

/* ---------- drop anywhere on the page ---------- */

.gallery-drop-hint{
  position:fixed;
  inset:12px;
  z-index:90;
  display:grid;
  place-items:center;
  border:1px solid var(--accent-line);
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-2);
}
.gallery-drop-hint span{ display:flex; align-items:center; gap:var(--s-2); color:var(--text); font-size:var(--fs-md); font-weight:500; }
.gallery-drop-hint .i{ width:20px; height:20px; color:var(--accent); }
.gallery-page.is-dropping .gallery-drop-hint{ opacity:1; }

/* ---------- upload window ---------- */

.gallery-select{
  width:100%;
  height:var(--control-h);
  padding:0 var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface-sunken);
  color:var(--text);
  font-size:var(--fs-sm);
  cursor:pointer;
}
.gallery-select:hover{ border-color:var(--line-strong); }
.gallery-select:focus{ border-color:var(--accent-line); box-shadow:var(--ring); outline:none; }
.gallery-select option,
.gallery-select optgroup{ background:var(--surface); color:var(--text); }
.field-optional{ margin-left:4px; color:var(--text-3); font-weight:400; }

.gallery-drop{
  display:grid;
  grid-template-columns:96px minmax(0, 1fr);
  align-items:center;
  gap:var(--s-4);
  margin:var(--s-4) 0;
  padding:var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  cursor:pointer;
  transition:border-color var(--dur-2), background-color var(--dur-2);
}
.gallery-drop:hover,
.gallery-drop.is-over{ border-color:var(--accent-line); }
.gallery-drop.is-over{ background:var(--accent-wash); }
.gallery-drop-mat{ aspect-ratio:4 / 3; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--accent); }
.gallery-drop-mat .i{ position:relative; width:22px; height:22px; transition:transform var(--dur-3) var(--ease-out); }
.gallery-drop:hover .gallery-drop-mat .i{ transform:translateY(-2px); }
.gallery-drop-copy{ display:grid; gap:4px; color:var(--text-2); font-size:var(--fs-sm); }
.gallery-drop-copy strong{ color:var(--text); font-weight:500; }
.gallery-drop-copy span{ color:var(--text-3); font-size:var(--fs-2xs); line-height:1.5; }

.gallery-queue{ display:grid; gap:var(--s-2); margin:0 0 var(--s-4); padding:2px; list-style:none; max-height:280px; overflow-x:hidden; overflow-y:auto; counter-reset:fig; }
.gallery-queue:empty{ display:none; }
.gallery-queue-item{
  display:grid;
  grid-template-columns:56px minmax(0, 1fr) 22px auto;
  align-items:center;
  gap:var(--s-3);
  padding:6px 6px 6px 6px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  transition:border-color var(--dur-2), opacity var(--dur-2);
}
.gallery-queue-thumb{ display:block; width:56px; height:44px; overflow:hidden; border-radius:6px; background:var(--surface-sunken); }
.gallery-queue-thumb img{ display:block; width:100%; height:100%; object-fit:contain; }
.gallery-queue-main{ display:grid; gap:2px; min-width:0; }
.gallery-queue-main input{ min-height:30px; padding:4px 8px; border-color:transparent; background:transparent; font-weight:500; }
.gallery-queue-main input:hover:not(:disabled){ border-color:var(--line); }
.gallery-queue-main input:focus{ background:var(--surface-sunken); }
.gallery-queue-meta{ padding-left:9px; color:var(--text-3); font-size:var(--fs-2xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gallery-queue-state{ display:grid; place-items:center; }
.gallery-queue-state .i{ width:16px; height:16px; }
.gallery-queue-state .spinner{ width:14px; height:14px; }
.gallery-queue-item.is-uploading{ border-color:var(--accent-line); }
.gallery-queue-item.is-done{ border-color:var(--good-line); }
.gallery-queue-item.is-done .gallery-queue-state{ color:var(--good); }
.gallery-queue-item.is-error{ border-color:var(--bad-line); }
.gallery-queue-item.is-error .gallery-queue-state,
.gallery-queue-item.is-error .gallery-queue-meta{ color:var(--bad); }
.gallery-upload-status{ color:var(--text-3); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }

/* ---------- viewer ---------- */

body.gv-open{ overflow:hidden; }
.gallery-viewer{
  --c:#8A8A93;
  position:fixed;
  inset:0;
  z-index:400;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 340px;
  background:#09090B;
  color:#FAFAFA;
  opacity:0;
  transition:opacity var(--dur-2) var(--ease-out);
}
.gallery-viewer.is-open{ opacity:1; }

.gv-stage{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  overflow:hidden;
  min-height:0;
  background-color:#0C0C0E;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size:28px 28px;
  cursor:zoom-out;
}
.gv-canvas{ position:absolute; top:68px; right:84px; bottom:150px; left:84px; }
.gv-image{
  position:absolute;
  top:50%;
  left:50%;
  max-width:100%;
  max-height:100%;
  border-radius:4px;
  box-shadow:0 30px 80px -30px rgba(0, 0, 0, .9);
  cursor:zoom-in;
  user-select:none;
  touch-action:none;
  transform:translate(-50%, -50%);
  transition:transform var(--dur-3) var(--ease-out), filter var(--dur-3);
  filter:blur(6px);
}
.gv-image.is-ready{ filter:none; }
.gv-image.is-enter-next{ animation:gv-in-next .34s var(--ease-out); }
.gv-image.is-enter-prev{ animation:gv-in-prev .34s var(--ease-out); }
@keyframes gv-in-next{ from{ opacity:0; translate:48px 0; } }
@keyframes gv-in-prev{ from{ opacity:0; translate:-48px 0; } }
.gv-stage.is-zoomed .gv-image{ cursor:grab; }
.gv-image.is-dragging{ cursor:grabbing; transition:none; }

.gv-btn{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(255, 255, 255, .12);
  border-radius:10px;
  background:rgba(24, 24, 27, .78);
  color:#E4E4E7;
  backdrop-filter:blur(8px);
  transition:background-color var(--dur-1), border-color var(--dur-1);
}
.gv-btn:hover{ background:#27272A; border-color:rgba(255, 255, 255, .22); color:#fff; }
.gv-btn .i{ width:17px; height:17px; }
.gv-top{ position:absolute; top:16px; left:16px; display:flex; align-items:center; gap:12px; z-index:2; }
.gv-count{ color:#A1A1AA; font-size:var(--fs-xs); }
.gv-top-r{ left:auto; right:16px; gap:8px; }
.gv-top-r .gv-btn[aria-pressed="true"]{ border-color:rgba(255, 255, 255, .28); background:#27272A; color:#fff; }
.gv-crumb{ display:none; align-items:center; gap:8px; max-width:min(46vw, 560px); padding:0 12px; height:38px; border:1px solid rgba(255, 255, 255, .12); border-radius:10px; background:rgba(24, 24, 27, .78); color:var(--c); font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; backdrop-filter:blur(8px); }
.gv-crumb span{ overflow:hidden; color:#E4E4E7; font-family:var(--font-body); font-size:var(--fs-xs); letter-spacing:0; text-overflow:ellipsis; text-transform:none; }
.gallery-viewer.is-wide .gv-crumb{ display:inline-flex; }
.gallery-viewer.is-wide{ grid-template-columns:minmax(0, 1fr); }
.gallery-viewer.is-wide .gv-panel{ display:none; }

.gv-nav{
  position:absolute;
  top:50%;
  z-index:2;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin-top:-50px;
  border:1px solid rgba(255, 255, 255, .12);
  border-radius:50%;
  background:rgba(24, 24, 27, .78);
  color:#FAFAFA;
  backdrop-filter:blur(8px);
  transition:background-color var(--dur-1), transform var(--dur-2) var(--ease-out);
}
.gv-nav:hover{ background:#27272A; }
.gv-nav .i{ width:20px; height:20px; }
.gv-nav.is-prev{ left:20px; }
.gv-nav.is-next{ right:20px; }
.gv-nav.is-prev:hover{ transform:translateX(-2px); }
.gv-nav.is-next:hover{ transform:translateX(2px); }
.gv-nav[hidden]{ display:none; }

.gv-zoom{
  position:absolute;
  left:50%;
  bottom:96px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid rgba(255, 255, 255, .12);
  border-radius:12px;
  background:rgba(24, 24, 27, .82);
  transform:translateX(-50%);
  backdrop-filter:blur(8px);
}
.gv-zoom .gv-btn{ width:32px; height:32px; border:0; background:transparent; }
.gv-zoom .gv-btn:hover{ background:rgba(255, 255, 255, .08); }
.gv-zoom-level{ min-width:58px; height:32px; border-radius:8px; color:#E4E4E7; font-size:var(--fs-xs); }
.gv-zoom-level:hover{ background:rgba(255, 255, 255, .08); }

.gv-strip{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:8px;
  padding:14px 16px;
  overflow-x:auto;
  background:linear-gradient(transparent, rgba(9, 9, 11, .92) 40%);
  scrollbar-width:none;
}
.gv-strip[hidden]{ display:none; }
.gv-thumb{
  display:block;
  flex:none;
  width:72px;
  height:54px;
  padding:4px;
  border:1px solid rgba(255, 255, 255, .1);
  border-radius:8px;
  background:#18181B;
  opacity:.55;
  transition:opacity var(--dur-1), border-color var(--dur-1);
}
.gv-thumb img{ display:block; width:100%; height:100%; object-fit:contain; border-radius:2px; }
.gv-thumb:hover{ opacity:.85; }
.gv-thumb.is-active{ border-color:#FAFAFA; opacity:1; }
.gv-thumb.is-break{ position:relative; margin-left:17px; }
.gv-thumb.is-break::before{ content:""; position:absolute; top:10px; bottom:10px; left:-13px; width:1px; background:rgba(255, 255, 255, .16); }

.gv-panel{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  min-width:0;
  padding:var(--s-8) var(--s-6) var(--s-6);
  overflow-y:auto;
  border-left:1px solid #27272A;
  background:#111113;
}
.gv-fig{ color:var(--c); font-size:var(--fs-xs); font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.gv-panel h2{ color:#FAFAFA; font-family:var(--font-display); font-size:1.5rem; font-weight:600; line-height:1.2; letter-spacing:-.02em; overflow-wrap:anywhere; }
.gv-place{ display:inline-flex; align-items:center; gap:8px; width:fit-content; max-width:100%; margin-left:-6px; padding:3px 6px; border-radius:6px; color:#A1A1AA; font-size:var(--fs-sm); text-align:left; transition:background-color var(--dur-1), color var(--dur-1); }
.gv-place span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gv-place .i{ flex:none; width:14px; height:14px; opacity:.7; }
.gv-place:not(:disabled):hover{ background:#18181B; color:#FAFAFA; }
.gv-place:disabled{ cursor:default; }
.gv-note{
  margin-top:var(--s-2);
  padding:var(--s-3) var(--s-4);
  border:1px solid #27272A;
  border-left:2px solid var(--c);
  border-radius:var(--r-sm);
  background:#18181B;
  color:#E4E4E7;
  font-size:var(--fs-sm);
  line-height:1.6;
}
.gv-note.is-empty{ border-left-color:#27272A; color:#71717A; }
.gv-facts{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); margin:var(--s-2) 0 0; }
.gv-facts div{ display:grid; gap:2px; }
.gv-facts dt{ color:#71717A; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:var(--tracking-label); text-transform:uppercase; }
.gv-facts dd{ margin:0; color:#E4E4E7; font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
.gv-actions{ display:grid; gap:var(--s-2); margin-top:var(--s-4); }
.gv-actions .btn{ justify-content:flex-start; width:100%; }
.gv-label{ color:#71717A; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:var(--tracking-label); text-transform:uppercase; }
.gv-siblings{ display:grid; gap:6px; margin-top:var(--s-3); }
.gv-siblings:empty{ display:none; }
.gv-siblings-list{ display:grid; gap:2px; max-height:196px; overflow-y:auto; scrollbar-width:thin; }
.gv-siblings-list button{ display:flex; align-items:center; gap:10px; min-width:0; padding:7px 10px; border-radius:8px; color:#A1A1AA; font-size:var(--fs-sm); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background-color var(--dur-1), color var(--dur-1); }
.gv-siblings-list button .mono{ flex:none; min-width:30px; color:var(--c); font-size:var(--fs-2xs); }
.gv-siblings-list button:hover{ background:#18181B; color:#FAFAFA; }
.gv-siblings-list button.is-active{ background:#1F1F23; color:#FAFAFA; box-shadow:inset 2px 0 0 var(--c); }
.gv-keys{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:auto; padding-top:var(--s-5); color:#71717A; font-size:var(--fs-2xs); }
.gv-keys span{ display:inline-flex; align-items:center; gap:3px; }
.gv-keys kbd{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-right:2px; border:1px solid #3F3F46; border-bottom-width:2px; border-radius:5px; background:#18181B; color:#D4D4D8; font-family:var(--font-mono); font-size:10px; line-height:1; }

/* windows opened from the viewer (edit, delete) sit above it */
body.gv-open #modalHost{ position:relative; z-index:450; }
body.gv-open #modalHost .modal-overlay{ z-index:450; }

/* quiz page shortcut */


/* ---------- responsive ---------- */

@media (max-width: 960px){
  .gallery-viewer{ grid-template-columns:1fr; grid-template-rows:minmax(0, 1fr) auto; }
  .gv-panel{ max-height:40vh; padding:var(--s-5); border-left:0; border-top:1px solid #27272A; }
  .gv-actions{ grid-template-columns:repeat(3, 1fr); }
  .gv-actions .btn{ justify-content:center; }
  .gv-keys, .gv-siblings{ display:none; }
  .gv-canvas{ left:12px; right:12px; top:64px; bottom:146px; }
  .gv-nav{ width:38px; height:38px; margin-top:-38px; }
  .gv-nav.is-prev{ left:10px; }
  .gv-nav.is-next{ right:10px; }
}
@media (max-width: 720px){
  .gallery-toolbar{ flex-direction:column-reverse; align-items:stretch; gap:var(--s-3); }
  .gallery-search{ width:100%; margin-bottom:0; }
  .gallery-bar{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:var(--s-3); }
  .gallery-controls{ margin-left:0; }
  .gallery-sort{ flex:1; }
  .gallery-sort .tselect-trigger{ width:100%; }
  .gallery-view span, .gallery-select-btn span{ display:none; }
  .gallery-select-btn{ width:34px; padding:0; justify-content:center; }
  .gallery-chapter-head{ grid-template-columns:minmax(0, 1fr) auto; gap:var(--s-2); }
  .gallery-chapter-meta{ display:none; }
  .gallery-chapter-actions .btn span{ display:none; }
  .gallery-chapter-actions .btn{ width:34px; padding:0; justify-content:center; }
  .gallery-chapter-body{ margin:0 -8px; }
  .gallery-chapter-body > .plate-grid{ padding:8px 8px 14px; }
  .plate-flow{ --row:120px; gap:var(--s-3); }
  .plate-note{ display:none; }
  .gallery-selbar{ bottom:var(--s-3); gap:4px; padding-left:var(--s-3); }
  .gallery-selbar-count{ min-width:0; font-size:var(--fs-xs); }
  .gallery-selbar .btn span, .gallery-selbar-sep{ display:none; }
  .gallery-selbar .btn{ width:34px; padding:0; justify-content:center; }
  .plate-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-3); }
  .plate-mat img{ --pad:10px; }
  .plate-caption{ padding:var(--s-2) var(--s-3) var(--s-3); }
  .gallery-empty{ grid-template-columns:1fr; padding:var(--s-5); gap:var(--s-5); }
  .gallery-queue-item{ grid-template-columns:48px minmax(0, 1fr) 20px auto; gap:var(--s-2); }
  .gv-actions .btn span{ display:none; }
}

@media (hover:none){
  .plate-quick{ display:none; }
  .plate:hover{ transform:none; box-shadow:none; }
}
@media (prefers-reduced-motion: reduce){
  .gv-image.is-enter-next, .gv-image.is-enter-prev, .plate.is-new, .gallery-selbar{ animation:none; }
  .gallery-chapter-body{ transition:none; }
}

.gallery-viewer:focus{ outline:none; }