/* The public web pages (app/templates/public): a collector page and a pin's page, under the app's sky.
   Colours are the app's own (ios CollectorPaletteLight "Dawn" and CollectorPaletteDark "Twilight", StarlightSky,
   PassportCloth): the dawn sky by day and the twilight by night, with clouds or dust and twinkling stars, glass over
   it, and Instrument Serif for names, titles and numbers. The passport keeps its night sky in light and dark, as in
   the app. Gold is for stars, rules, fills and the one star-gold button: words are ink, supporting or quiet text, so
   every word keeps its contrast on every colour of the sky, bare and under glass (tests/test_public_pages_look.py).
   Reduce Motion stills the sky; Reduce Transparency and Increase Contrast leave the plain gradient, with solid glass. */

/* Instrument Serif, as bundled in the app (vendor/INSTRUMENT-SERIF-LICENSE.txt). */
@font-face {
  font-family: "Instrument Serif";
  src: url("/static/vendor/InstrumentSerif-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/static/vendor/InstrumentSerif-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* The dawn sky, top to bottom (StarlightSkyColors.day(.dawn)); past the page's end, its lowest colour. */
  --sky: linear-gradient(180deg, #FFE6D8 0%, #FAD5E2 32%, #E7D8F6 66%, #D5DDF7 100%);
  --sky-end: #D5DDF7;
  --cloud: rgba(255, 255, 255, .78);
  --cloud-blur: 20px;
  --star: #FFFFFF;
  --star-gold: #FFD27F;
  --ink: #2C2448;
  --ink2: #41365F;
  --ink3: #574C78;
  --link: #5238B4;
  /* Glass: white over the sky; solid under Reduce Transparency and Increase Contrast. */
  --glass: rgba(255, 255, 255, .42);
  --glass-strong: rgba(255, 255, 255, .56);
  --glass-solid: #FCE7EE;
  --glass-strong-solid: #FDEDF2;
  --glass-edge: rgba(255, 255, 255, .86);
  --glass-shadow: rgba(90, 70, 150, .5);
  /* The segmented control's track and its chosen segment (CollectorDesign.SegmentedTrack). */
  --track: rgba(255, 255, 255, .34);
  --chosen: rgba(255, 255, 255, .92);
  --line-strong: rgba(44, 36, 72, .20);
  --pin-shadow: drop-shadow(0 6px 6px rgba(70, 50, 130, .22));
  /* The pin page's stage: bright and warm by day (PlateFrame). */
  --stage-glow: radial-gradient(circle 230px at 50% 46%, rgba(255, 255, 255, .95) 0, rgba(255, 240, 222, .55) 30%,
    rgba(255, 255, 255, .12) 64%, rgba(255, 255, 255, 0) 100%);
  /* A series' small constellation (ConstellationInk): gold stars lit, soft lines, dashed rings for the rest. */
  --mini-line: rgba(87, 76, 120, .55);
  --mini-dash: rgba(87, 76, 120, .45);
  --mini-dim: rgba(87, 76, 120, .7);
  --mini-lit: #F2B24E;
  --mini-glow: rgba(255, 190, 90, .9);
  --mini-gold: #F2B24E;
  /* The passport's night sky, the same in light and dark (PassportCloth). Its lowest colour is the app's #80527F a
     touch deeper, same hue, so the name and counts read at 7:1 wherever a tall passport puts them. */
  --cloth: linear-gradient(150deg, #261D4A 0%, #45306F 58%, #744A73 100%);
  --cloth-ink: #FFFFFF;
  --cloth-muted: #F1ECFA;
  --cloth-gold: #FFE2A6;
  --cloth-shadow: rgba(60, 40, 120, .26);
  --disc: radial-gradient(circle 53px at 50% 38%, #FFFFFF 0, #FFF2D4 45%, #FFD38C 100%);
  --disc-ink: #2C2448;
  /* The founding mark's gold pill, as on Profile; on the passport's cloth, so the same in light and dark. */
  --found-top: #FFEFC8;
  --found-bottom: #F7D58E;
  --found-ink: #6E4710;
  --found-star: #C98A1E;
  /* Star-gold, for the one main button (CollectorPrimaryButtonStyle). */
  --gold: linear-gradient(180deg, #FFF2D4, #FFD38C);
  --on-gold: #2C2448;
  --gold-glow: 0 4px 12px rgba(230, 160, 60, .35);
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --sky: linear-gradient(180deg, #17122B 0%, #221A44 34%, #33255A 64%, #46316C 86%, #4E356B 100%);
    --sky-end: #4E356B;
    --cloud: rgba(255, 170, 210, .06);
    --cloud-blur: 26px;
    --star-gold: #FFE2A6;
    --ink: #FFFFFF;
    --ink2: #E8E2F7;
    --ink3: #CBC2E4;
    --link: #D9C8FF;
    --glass: rgba(67, 62, 86, .40);
    --glass-strong: rgba(86, 82, 103, .43);
    --glass-solid: #2F284B;
    --glass-strong-solid: #383253;
    --glass-edge: rgba(255, 255, 255, .20);
    --glass-shadow: rgba(0, 0, 0, .55);
    --track: rgba(255, 255, 255, .09);
    /* The app's .20, a touch dimmer, so the chosen word reads at 4.5:1 over the rose glow low on the horizon. */
    --chosen: rgba(255, 255, 255, .18);
    --line-strong: rgba(255, 255, 255, .20);
    --pin-shadow: drop-shadow(0 0 10px rgba(255, 255, 255, .28)) drop-shadow(0 8px 8px rgba(0, 0, 0, .35));
    --stage-glow: radial-gradient(circle 230px at 50% 46%, rgba(255, 236, 210, .36) 0, rgba(255, 214, 160, .12) 32%,
      rgba(255, 255, 255, 0) 64%);
    --mini-line: rgba(255, 255, 255, .55);
    --mini-dash: rgba(255, 255, 255, .35);
    --mini-dim: rgba(255, 255, 255, .5);
    --mini-lit: #FFE2A6;
    --mini-glow: rgba(255, 214, 140, .95);
    --mini-gold: #FFE2A6;
    --cloth-shadow: rgba(0, 0, 0, .45);
    --gold-glow: 0 0 14px rgba(255, 211, 140, .45);
  }
}

/* Increase Contrast: supporting and quiet text in full ink, firmer edges and stronger constellation lines. */
@media (prefers-contrast: more) {
  :root {
    --ink2: var(--ink);
    --ink3: var(--ink);
    --glass-edge: var(--line-strong);
  }
}

/* Reduce Transparency and Increase Contrast: solid glass, and the constellations' strong lines
   (ConstellationInk.Look isStrong). */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --glass: var(--glass-solid);
    --glass-strong: var(--glass-strong-solid);
    --track: var(--glass-solid);
    --mini-line: #574C78;
    --mini-dash: rgba(87, 76, 120, .85);
    --mini-dim: #574C78;
    --mini-gold: #9A6512;
  }
}

@media (prefers-color-scheme: dark) and (prefers-reduced-transparency: reduce),
  (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root {
    --mini-line: rgba(255, 255, 255, .9);
    --mini-dash: rgba(255, 255, 255, .7);
    --mini-dim: rgba(255, 255, 255, .85);
    --mini-gold: #FFE2A6;
  }
}

* { box-sizing: border-box; }

html { background-color: var(--sky-end); }

body {
  margin: 0;
  color: var(--ink);
  font: 17px/1.4 var(--sans);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.page {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
}

/* The header: the name (no icon until the new one is chosen), and the only invitation, in star-gold. */
.site {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding-top: env(safe-area-inset-top, 0px);
}

.site > span {
  flex: 1;
  min-width: 0;
  font: 400 22px/1 var(--serif);
}

.get {
  flex: none;
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 0 .5px rgba(200, 140, 40, .35), var(--gold-glow);
  color: var(--on-gold);
  font: 600 15px/1 var(--sans);
  text-decoration: none;
}

.get:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* A twinkling star: a 3.2-second breath, smaller and fainter, then back (SkyTwinkle): the sky's,
   the passport's and the stage's. */
.tw {
  position: absolute;
  width: var(--z, 8px);
  height: var(--z, 8px);
  margin: calc(var(--z, 8px) / -2) 0 0 calc(var(--z, 8px) / -2);
  color: var(--star);
  fill: currentColor;
  filter: drop-shadow(0 0 3px currentColor);
  animation: twinkle 3.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.65); }
}

/* The passport: a small night sky with a bright edge, the same by day (CollectorPassport PassportCard). */
.passport {
  position: relative;
  margin-top: 8px;
  padding: 24px 20px 18px;
  border-radius: 28px;
  overflow: hidden;
  color: var(--cloth-ink);
  background: url("/static/public-dust.svg") 0 0 / 220px 220px, var(--cloth);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 22px 40px -20px var(--cloth-shadow);
}

/* The passport's three stars, where the app puts them (PassportCloth.stars), in night gold. */
.passport .tw:nth-of-type(1) { left: 93%; top: 50%; --z: 11px; --d: -.5s; color: var(--cloth-gold); }
.passport .tw:nth-of-type(2) { left: 73.5%; top: 31%; --z: 7px; --d: -1.6s; }
.passport .tw:nth-of-type(3) { left: 84%; top: 61%; --z: 6px; --d: -2.4s; }

.passport .ey {
  position: relative;
  margin: 0;
  text-align: center;
  color: var(--cloth-gold);
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
}

.passport .who {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

/* The star-gold disc with the initials, glowing softly; a plain portrait when there are none. */
.passport .av {
  flex: none;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: 0 0 22px 4px rgba(255, 214, 150, .45);
  color: var(--disc-ink);
  font: 400 32px/1 var(--serif);
}

.passport .av:empty::before {
  content: "";
  width: 26px;
  height: 26px;
  background: var(--disc-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M3 21.5c0-4.6 4-8 9-8s9 3.4 9 8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M3 21.5c0-4.6 4-8 9-8s9 3.4 9 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.passport .who > div:last-child { min-width: 0; }

.passport h1 {
  margin: 0;
  font: 400 34px/1.05 var(--serif);
  overflow-wrap: anywhere;
}

/* The name, with the founding mark beside it; a long name takes its own line and the mark goes under it. */
.passport .nm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.passport .found {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px 0 7px;
  border-radius: 11px;
  background: linear-gradient(var(--found-top), var(--found-bottom));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  color: var(--found-ink);
  font: 700 11px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.passport .found svg {
  width: 11px;
  height: 11px;
  color: var(--found-star);
}

.passport .bio {
  margin: 4px 0 0;
  color: var(--cloth-muted);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* The counts, under a dashed gold rule. */
.passport .st {
  position: relative;
  display: flex;
  margin: 14px 0 0;
  padding-top: 12px;
  background: linear-gradient(90deg, rgba(255, 226, 166, .45) 50%, transparent 0) 0 0 / 6px 1px repeat-x;
}

.passport .st div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.passport .st dd {
  order: -1;
  margin: 0;
  font: 400 30px/1 var(--serif);
  font-variant-numeric: tabular-nums;
}

.passport .st dt {
  color: var(--cloth-muted);
  font: 600 11px/1.2 var(--sans);
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

/* Shelf / For trade / Wanted: a segmented control made of radio buttons, so it works without scripts. */
.tabs > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg {
  display: flex;
  margin-top: 18px;
  padding: 2px;
  border-radius: 20px;
  background: var(--track);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}

.seg label {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 4px 6px;
  border-radius: 18px;
  color: var(--ink2);
  font: 500 15px/1.2 var(--sans);
  text-align: center;
  cursor: pointer;
}

.panel { display: none; }
.tabs.one .panel { display: block; }

#tab-shelf:checked ~ .seg label[for="tab-shelf"],
#tab-trade:checked ~ .seg label[for="tab-trade"],
#tab-wanted:checked ~ .seg label[for="tab-wanted"] {
  background: var(--chosen);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(60, 40, 120, .12);
}

#tab-shelf:focus-visible ~ .seg label[for="tab-shelf"],
#tab-trade:focus-visible ~ .seg label[for="tab-trade"],
#tab-wanted:focus-visible ~ .seg label[for="tab-wanted"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

#tab-shelf:checked ~ .panels #panel-shelf,
#tab-trade:checked ~ .panels #panel-trade,
#tab-wanted:checked ~ .panels #panel-wanted { display: block; }

/* A shelf: the series with its small constellation and how far along it is, then its pins on glass. */
.shelf { margin-top: 24px; }

.shelfh {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}

.shelfh h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: 400 30px/1.05 var(--serif);
  overflow-wrap: anywhere;
}

.shelfh span {
  flex: none;
  color: var(--ink2);
  font: italic 400 18px/1 var(--serif);
  font-variant-numeric: tabular-nums;
}

.mini {
  flex: none;
  width: 50px;
  height: 34px;
  overflow: visible;
}

.mini path {
  fill: none;
  stroke: var(--mini-line);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.mini path.dash {
  stroke: var(--mini-dash);
  stroke-dasharray: 2 3;
}

.mini path.gold {
  stroke: var(--mini-gold);
  stroke-width: 1.3;
}

.mini circle.lit {
  fill: var(--mini-lit);
  filter: url("#star-glow");
}

.mini circle.dim {
  fill: none;
  stroke: var(--mini-dim);
  stroke-width: 1.1;
  stroke-dasharray: 1.6 1.6;
}

#star-glow feDropShadow { flood-color: var(--mini-glow); }

.prow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 6px 4px;
  margin: 12px 0 0;
  padding: 14px 10px;
  border-radius: 28px;
  list-style: none;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 22px 40px -26px var(--glass-shadow);
}

.prow li { display: grid; place-items: center; height: 80px; }

.prow a {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  text-decoration: none;
}

.prow a:focus-visible,
.mcards a:focus-visible,
.report summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.prow img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: var(--pin-shadow);
}

/* A place still to find: a dashed ring, as a constellation's dim star. A pin without a picture: its first letter on
   a disc of glass. */
.prow .q, .blank {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink3);
  font: 400 24px/1 var(--serif);
}

.prow .q { border: 1.5px dashed var(--mini-dim); }

.blank {
  background: var(--glass-strong);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}

.prow .q, .prow .blank { width: 56px; height: 56px; }

.empty {
  margin: 24px 4px 0;
  color: var(--ink2);
  font: italic 400 19px/1.3 var(--serif);
}

/* The foot: "Report this page". */
.report {
  margin-top: 32px;
  padding: 0 4px;
  color: var(--ink2);
  font-size: 15px;
}

.report summary {
  cursor: pointer;
  font-weight: 500;
}

.report p { margin: 8px 0 0; }

.report a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* A pin's page: the glass stage with a soft glow under the pin, its series, its name, the facts and the rest of the
   series (PinPlatePage, PlateFrame). */
.plate {
  position: relative;
  display: grid;
  place-items: center;
  height: 270px;
  margin: 8px 8px 0;
  border-radius: 34px;
  overflow: hidden;
  background: var(--stage-glow), var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 24px 44px -26px var(--glass-shadow);
}

/* The stage's four stars, where the app puts them (PlateFrame.stars). */
.plate .tw:nth-of-type(1) { left: 19.7%; top: 23.7%; --z: 12px; --d: -.3s; color: var(--star-gold); }
.plate .tw:nth-of-type(2) { left: 85.4%; top: 32.8%; --z: 9px; --d: -1.4s; }
.plate .tw:nth-of-type(3) { left: 79.4%; top: 80.7%; --z: 8px; --d: -2.2s; }
.plate .tw:nth-of-type(4) { left: 25.5%; top: 85.2%; --z: 8px; --d: -2.8s; color: var(--star-gold); }

.plate img {
  position: relative;
  width: 196px;
  height: 196px;
  object-fit: contain;
  filter: var(--pin-shadow);
}

.plate .blank { position: relative; width: 150px; height: 150px; font-size: 64px; }

.ctr {
  margin-top: 20px;
  text-align: center;
}

/* The series, on a small piece of glass. */
.ctr .ser {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 4px 16px;
  border-radius: 17px;
  background: var(--glass-strong);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  font: italic 400 18px/1.2 var(--serif);
  overflow-wrap: anywhere;
}

.ctr h1 {
  margin: 12px 0 0;
  font: 400 46px/1.05 var(--serif);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

/* The facts, on a strip of glass. */
.facts {
  display: flex;
  margin: 20px 0 0;
  border-radius: 20px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}

.facts div {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px 11px;
}

.facts div + div { box-shadow: -1px 0 0 var(--line-strong); }

.facts dt {
  color: var(--ink3);
  font: 600 11px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.facts dd {
  margin: 6px 0 0;
  font: 400 22px/1.1 var(--serif);
  overflow-wrap: anywhere;
}

.more { margin-top: 30px; }

.more h2 {
  margin: 0;
  padding: 0 4px;
  font: 400 26px/1.1 var(--serif);
}

.mcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.mcards a {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 14px 10px;
  border-radius: 20px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  text-align: center;
  text-decoration: none;
}

.mcards img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: var(--pin-shadow);
}

.mcards .blank { width: 64px; height: 64px; margin: 4px 0; color: var(--ink3); font-size: 26px; }

.mcards b {
  margin-top: 8px;
  font: 400 19px/1.15 var(--serif);
  overflow-wrap: anywhere;
}

.mcards span {
  margin-top: 4px;
  color: var(--ink2);
  font-size: 13px;
}

/* A page that isn't here, or a wait. */
.message { margin-top: 56px; text-align: center; }

.message h1 {
  margin: 0;
  font: 400 34px/1.1 var(--serif);
  overflow-wrap: anywhere;
}

.message p {
  margin: 10px 0 0;
  color: var(--ink2);
}

/* Reduce Motion stills the passport's and the stage's stars; Reduce Transparency and Increase Contrast leave them
   out, with the passport's plain night sky. */
@media (prefers-reduced-motion: reduce) {
  .tw { animation: none; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .passport .tw,
  .plate .tw { visibility: hidden; animation: none; }

  .passport { background: var(--cloth); }
}