/* Shubnikov — the 990 cyclic colourings of the 68 forward film groups.
 * Scoped under .shubnikov-page; the site palette from css/style.css, light
 * only.  The pictures are greys, so every piece of chrome around them stays
 * quiet: one accent, thin rules, no filled panels behind a canvas. */

.shubnikov-page {
  max-width: 1120px;
}

.shubnikov-page .overline {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.2rem;
}

.shubnikov-page h1 {
  margin: 0 0 0.3rem;
  line-height: 1.15;
}

.shub-subtitle {
  font-size: 1.12rem;
  color: var(--muted);
  margin: 0 0 1.1rem;
  max-width: 44em;
}

/* the lede, and beside it one of the 990 already moving */
.shub-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 270px);
  gap: 0 2.2rem;
  align-items: start;
}

.shub-lede {
  max-width: 44em;
}

.shub-hero { margin: 0.2rem 0 0; }
.shub-hero-wait { color: var(--muted); font-size: 0.85rem; margin: 0; }
.shub-hero-card { margin: 0; }
.shub-hero-caption {
  padding: 0.4rem 0.55rem 0.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  line-height: 1.45;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--muted);
}

/* the essays stay shut until they are wanted, so they sit side by side */
.shub-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0.4rem 0.7rem;
  align-items: start;
}

.shub-notes > details[open] { grid-column: 1 / -1; }

.shub-lede p:first-child {
  font-size: 1.05rem;
}

.shub-notes {
  margin: 1.2rem 0 1.6rem;
}

.shub-notes > details {
  margin: 0;
}

.shub-notes > details > *:not(summary) {
  max-width: 46em;
}

/* every count badge: the number beside a heading */
details.shub-n > summary > b,
.shub-ck > h4 > b {
  color: var(--muted);
  font-weight: normal;
  font-variant-numeric: tabular-nums;
}

/* ------- the counts table ------- */

.shub-table-wrap { overflow-x: auto; }

.shubnikov-page .visually-hidden,
.shub-dialog .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

table.shub-counts {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

table.shub-counts th,
table.shub-counts td {
  border-bottom: 1px solid var(--rule);
  padding: 0.32rem 0.6rem;
  text-align: right;
}

table.shub-counts th[scope="row"] { text-align: left; font-weight: 600; }
table.shub-counts thead th { color: var(--muted); font-weight: 600; white-space: nowrap; }
table.shub-counts .orbifold { color: var(--muted); font-weight: normal; margin-left: 0.4em; }
table.shub-counts tbody tr:hover { background: var(--code-bg); }
table.shub-counts tfoot td,
table.shub-counts tfoot th { border-top: 2px solid var(--rule); border-bottom: none; font-weight: 700; }
table.shub-counts .lattice-head th {
  background: var(--code-bg);
  color: var(--muted);
  text-align: left;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  table.shub-counts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.shub-counts tr.lattice-head th { display: block; }
  table.shub-counts tbody tr,
  table.shub-counts tfoot tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.1rem 0.5rem;
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem 0;
  }
  table.shub-counts tbody td,
  table.shub-counts tbody th,
  table.shub-counts tfoot td,
  table.shub-counts tfoot th {
    border: none;
    padding: 0.05rem 0.2rem;
    text-align: left;
  }
  table.shub-counts th[scope="row"] { grid-column: 1 / -1; font-size: 1rem; }
  table.shub-counts td[data-label]::before {
    content: attr(data-label) " ";
    color: var(--muted);
    font-size: 0.72rem;
  }
}

/* ------- controls ------- */

.shub-controls {
  /* under the site header, which is sticky at the top of every page */
  position: sticky;
  top: 4.25rem;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  margin: 1.4rem 0 1.1rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.shub-controlset { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }

.shub-controlset > .label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.1rem;
}

.shub-chip {
  font: inherit;
  font-size: 0.86rem;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.shub-chip:hover { border-color: var(--accent); color: var(--accent); }
.shub-chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.shub-chip.wide { border-radius: 8px; }

.shub-status {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Deep links, scrollIntoView and — above all — keyboard focus have to land
   below the two sticky bars: the site header at 0-4.25rem and this page's
   filter bar under it.  The bar wraps as the window narrows, so shub-app.mjs
   measures it into --shub-bar-h (0 where the bar is not sticky); the fallback
   below covers the moment before the script runs.  Everything that can take
   focus needs the margin, not just the containers. */
.shubnikov-page :is(
  details.shub-n,
  details.shub-n > summary,
  .shub-ck,
  .shub-ck > h4,
  .shub-filmtabs,
  .shub-tab,
  .shub-filmtab,
  .shub-card,
  #groups
) { scroll-margin-top: calc(4.25rem + var(--shub-bar-h, 7rem) + 0.75rem); }

/* ------- level 1: wallpaper-group tabs ------- */

.shub-tabstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.1rem;
  align-items: flex-end;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.2rem;
}

.shub-tabgroup { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: flex-end; }

.shub-tabgroup-label {
  flex-basis: 100%;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.1rem;
}

.shub-tab {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.02rem;
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  line-height: 1.25;
}

.shub-tab .hm { font-weight: 700; font-size: 0.95rem; }
.shub-tab .orb { font-size: 0.74rem; color: var(--muted); }
.shub-tab .n { font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.shub-tab:hover { border-color: var(--accent); }
.shub-tab[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.shub-tab[aria-selected="true"] .orb,
.shub-tab[aria-selected="true"] .n { color: rgba(255, 255, 255, 0.82); }
.shub-tab.empty { opacity: 0.45; }

/* ------- level 2: film sub-tabs ------- */

.shub-family-head { margin: 0 0 0.3rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.shub-family-head h2 { margin: 0; font-size: 1.5rem; }
.shub-family-head .orb { color: var(--muted); font-size: 1.05rem; }
.shub-family-head .lat { color: var(--muted); font-size: 0.85rem; }
.shub-family-note { color: var(--muted); max-width: 46em; margin: 0.1rem 0 1rem; }

.shub-filmtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.shub-filmtab {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.26rem 0.65rem;
  border: 1px solid var(--fwd-rule);
  border-radius: 8px;
  background: var(--fwd-bg);
  color: var(--fwd-ink);
  cursor: pointer;
  line-height: 1.25;
}

.shub-filmtab .sig { font-size: 1rem; font-weight: 600; }
.shub-filmtab .sub { font-size: 0.72rem; opacity: 0.85; font-variant-numeric: tabular-nums; }
.shub-filmtab:hover { border-color: var(--fwd-ink); }
.shub-filmtab[aria-selected="true"] {
  background: var(--fwd-ink);
  border-color: var(--fwd-ink);
  color: #fff;
}

.shub-filmdesc {
  max-width: 48em;
  margin: 0 0 1rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--fwd-rule);
  color: var(--ink);
}

.shub-filmdesc .gen { white-space: nowrap; }
.shub-sg { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ------- level 3: colour-count sections ------- */

details.shub-n { margin: 0.5rem 0; }
details.shub-n[data-empty="true"] { opacity: 0.5; }
details.shub-n[data-empty="true"] summary { cursor: default; color: var(--muted); }
details.shub-n > summary { font-weight: 600; }
details.shub-n > summary > b { font-weight: normal; }
details.shub-n > .note { margin: 0.1rem 0 0.2rem; color: var(--muted); font-size: 0.88rem; max-width: 46em; }

.shub-ck { margin: 0.9rem 0 1.2rem; }
.shub-ck > h4 {
  margin: 0 0 0.15rem;
  font-size: 0.95rem;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.shub-ck > .note { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.88rem; max-width: 46em; }

/* ------- cards ------- */

.shub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shub-card {
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.12s ease;
}

.shub-card:hover { border-color: var(--accent); }
.shub-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shub-card canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  background: #8a8a8a;
}

.shub-card figcaption {
  padding: 0.35rem 0.5rem 0.45rem;
  border-top: 1px solid var(--rule);
  font-size: 0.74rem;
  line-height: 1.4;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--muted);
}

.shub-card figcaption .sigma {
  display: block;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.shub-card figcaption .idx { float: right; opacity: 0.7; margin-left: 0.5em; }
.shub-card figcaption .name {
  display: block;
  color: var(--accent);
  font-style: italic;
  overflow-wrap: anywhere;
}
.shub-card figcaption .repeat { display: block; }

.shub-empty { color: var(--muted); font-style: italic; margin: 0.4rem 0; }

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

dialog.shub-dialog {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0;
  background: var(--panel);
  color: var(--ink);
  max-width: min(96vw, 720px);
  width: min(96vw, 720px);
  box-shadow: 0 8px 40px rgba(30, 30, 60, 0.28);
}

dialog.shub-dialog::backdrop { background: rgba(31, 36, 48, 0.45); }

.shub-dialog-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 1rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.shub-dialog-head h3 { margin: 0; font-size: 1.1rem; }
.shub-dialog-head .where { color: var(--muted); font-size: 0.86rem; }

.shub-dialog-close {
  margin-left: auto;
  font: inherit;
  font-size: 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}
.shub-dialog-close:hover { color: var(--accent2); border-color: var(--accent2); }

.shub-dialog-body { padding: 0.9rem 1rem 1rem; }

.shub-stage {
  width: min(86vw, 640px);
  max-width: 100%;
  margin: 0 auto;
}

.shub-stage canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 8px;
  background: #8a8a8a;
}

.shub-transport {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.7rem 0 0.3rem;
  flex-wrap: wrap;
}

.shub-transport input[type="range"] { flex: 1 1 10rem; accent-color: var(--accent); min-width: 8rem; }
.shub-transport .time { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--muted); min-width: 6.5em; }
.shub-transport select { font: inherit; font-size: 0.85rem; padding: 0.15rem 0.3rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--panel); color: var(--ink); }

.shub-legend { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; }
.shub-legend .swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.shub-legend .swatch i {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 3px;
  border: 1px solid var(--rule);
  display: inline-block;
}

.shub-algebra { margin-top: 0.9rem; }
.shub-algebra dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.18rem 0.9rem;
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
}
.shub-algebra dt { color: var(--muted); }
.shub-algebra dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.shub-algebra dd.prose { font-family: inherit; }
.shub-algebra .permalink { font-family: inherit; }

/* ------- footer ------- */

.shub-footer {
  margin-top: 2.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 48em;
}

.shub-footer a { color: var(--accent); }

.shub-loading, .shub-error {
  padding: 1.2rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
}
.shub-error { border-color: var(--accent2); color: var(--accent2); }

/* Between first paint and the census landing the tabs and chips are fully
   styled and completely inert; census.json is 566 KB, so on a phone that
   window is seconds long.  shub-app.mjs clears aria-busy when it is ready. */
main.shubnikov-page[aria-busy="true"] .shub-controls,
main.shubnikov-page[aria-busy="true"] #groups {
  pointer-events: none;
  opacity: 0.55;
}

/* the "show all of them" way out of a filter that emptied the panel */
.shub-linkbutton {
  font: inherit;
  font-style: normal;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* ------- phones ------- */

@media (max-width: 820px) {
  /* one column, and the picture first: something is moving on the first screen */
  .shub-top { display: flex; flex-direction: column; gap: 0.8rem; }
  .shub-hero { order: -1; max-width: 300px; }
  /* Below this the bar wraps to three or four rows; pinned, it and the site
     header would hold a fifth to a quarter of the screen for ever, and the
     film sub-tabs would spend the whole panel hidden behind them. */
  .shub-controls { position: static; }
  .shubnikov-page { --shub-bar-h: 0px; }
}

@media (max-width: 560px) {
  .shubnikov-page { padding-left: 0.8rem; padding-right: 0.8rem; }
  .shub-hero { max-width: 250px; margin-inline: auto; }
  .shub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  /* a lone card in its clock group would look stranded at half width */
  .shub-grid[data-count="1"] { grid-template-columns: minmax(0, 70%); }
  .shub-controls { gap: 0.4rem 0.9rem; padding: 0.45rem 0.55rem; }
  .shub-controlset > .label { font-size: 0.68rem; }
  .shub-chip { font-size: 0.8rem; padding: 0.18rem 0.55rem; }
  .shub-status { margin-left: 0; flex-basis: 100%; }
  .shub-tabstrip { gap: 0.4rem 0.7rem; }
  .shub-tab { padding: 0.2rem 0.45rem; }
  .shub-tab .hm { font-size: 0.88rem; }
  .shub-card figcaption { font-size: 0.68rem; padding: 0.3rem 0.35rem 0.4rem; }
  .shub-card figcaption .sigma { font-size: 0.68rem; }
  dialog.shub-dialog { width: 96vw; max-width: 96vw; }
  /* keep the title and Close on one line; the film's name drops below */
  .shub-dialog-head .where { order: 3; flex-basis: 100%; }
  .shub-dialog-body { padding: 0.7rem 0.6rem 0.9rem; }
  .shub-algebra dl { grid-template-columns: 1fr; gap: 0 0; }
  .shub-algebra dt { margin-top: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .shub-card { transition: none; }
}

@media (forced-colors: active) {
  .shub-tab[aria-selected="true"],
  .shub-filmtab[aria-selected="true"],
  .shub-chip[aria-pressed="true"] { forced-color-adjust: none; }
}