/* Shared components. Each reads the ground it sits on, so one button works on black, paper and red. */

/* Actions. A button sits on its block shadow and presses down into it. */
.btn {
  --lip: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-2);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 var(--lip) 0 var(--press);
  font: 800 1.02rem/1 var(--f-display);
  font-stretch: 75%;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--m-fast) var(--ease-out), box-shadow var(--m-fast) var(--ease-out), background-color var(--m-fast), color var(--m-fast), opacity var(--m-fast);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: translate var(--m-med) var(--ease-back); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 calc(var(--lip) + 2px) 0 var(--press); }
  .btn:hover:not([disabled]) svg { translate: 3px 0; }
}
.btn:active:not([disabled]) { transform: translateY(var(--lip)); box-shadow: 0 0 0 var(--press); transition-duration: .05s; }
.btn--ghost { --press: transparent; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 var(--rule) var(--line-2); }
.btn--ghost:hover:not([disabled]) { box-shadow: inset 0 0 0 var(--rule) var(--fg); background: var(--raise); }
.btn--ghost:active:not([disabled]) { transform: translateY(2px); box-shadow: inset 0 0 0 var(--rule) var(--fg); }
.btn--quiet { --press: transparent; background: var(--raise-2); color: var(--fg); box-shadow: none; }
.btn--danger { --press: #7c1a11; background: var(--orbit); color: var(--star); }
.btn--gold { --press: #8d7c06; background: var(--gold); color: var(--void); }
.btn--sm { --lip: 3px; min-height: 38px; padding: 0 14px; font-size: .86rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.btn[data-busy="true"] { opacity: .7; cursor: progress; }

.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-2);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
  transition: color var(--m-fast);
}
.linkish:hover { color: var(--fg); }

.more {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding-block: 14px;
  margin-block: -14px;
  color: var(--fg-2);
  font: 800 .95rem/1 var(--f-display);
  font-stretch: 75%;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.more svg { width: 1em; height: 1em; transition: translate var(--m-med) var(--ease-out); }
.more:hover { color: var(--fg); }
.more:hover svg { translate: 3px 0; }
.back { display: inline-flex; align-items: center; gap: .4em; padding-block: 12px; margin-block: -12px calc(var(--s-5) - 12px); color: var(--fg-3); font-size: var(--t-sm); text-decoration: none; }
.back:hover { color: var(--fg); }
.back svg { width: 1em; height: 1em; rotate: 180deg; }

.iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--fg-2);
  transition: color var(--m-fast), background-color var(--m-fast);
}
.iconbtn:hover { color: var(--fg); background: var(--raise-2); }
.iconbtn svg { width: 22px; height: 22px; }
.iconbtn b {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 17px;
  padding: 2px 4px;
  border-radius: var(--r-pill);
  background: var(--orbit);
  color: var(--star);
  font: 700 .66rem/1.1 var(--f-text);
  text-align: center;
}

/* Forms */
.field { display: block; margin-bottom: var(--s-5); }
.field > span:first-child, .field__lab { display: block; margin-bottom: var(--s-2); color: var(--fg-2); font-size: var(--t-sm); font-weight: 500; }
.field em { font-style: normal; color: var(--fg-3); font-weight: 400; }
.input, .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-1);
  background: var(--raise);
  color: var(--fg);
  box-shadow: inset 0 0 0 var(--rule) var(--line-2);
  transition: box-shadow var(--m-fast), background-color var(--m-fast);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.field select { appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%); background-position: right 19px center, right 14px center; background-size: 5px 5px; background-repeat: no-repeat; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--fg); }
.field ::placeholder, .input::placeholder { color: var(--fg-3); }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--stop-on); }
.check { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--s-3); color: var(--fg-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fg); flex: none; }
.form-note { margin: -14px 0 var(--s-5); color: var(--fg-3); font-size: var(--t-sm); }
.form-error { margin-bottom: var(--s-4); color: var(--stop-on); font-size: var(--t-sm); font-weight: 500; }
.form-error:empty { display: none; }
.hint-ok { color: var(--good-on); font-size: var(--t-sm); font-weight: 500; }
.hint-bad { color: var(--stop-on); font-size: var(--t-sm); font-weight: 500; }
.suggestions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.suggestions:empty { display: none; }
.otp { font-feature-settings: "tnum", "zero"; font-size: 1.6rem !important; letter-spacing: .34em; text-align: center; }

/* Text tabs. The current one is marked by weight and a block, not a pill. */
.tabs-line { display: flex; gap: var(--s-5); margin-bottom: var(--s-6); overflow-x: auto; border-bottom: var(--hair) solid var(--line); scrollbar-width: none; }
.tabs-line a {
  flex: none;
  padding: 12px 0;
  color: var(--fg-3);
  font: 800 1rem/1 var(--f-display);
  font-stretch: 75%;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 0 transparent;
  transition: color var(--m-fast), box-shadow var(--m-fast);
}
.tabs-line a:hover { color: var(--fg); }
.tabs-line a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -3px 0 var(--fg); }

/* Stamp: the oval from the festival wristbands. It says who something is for. */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .36em .95em .32em;
  border-radius: 50%;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px currentColor, inset 0 0 0 3.5px transparent, inset 0 0 0 4.5px currentColor;
  font: 800 .78rem/1 var(--f-display);
  font-stretch: 75%;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: skewX(-6deg);
}
.stamp--fill { background: var(--fg); color: var(--bg); }

/* Status: a drawn mark, a word and a colour, so colour is never carrying it alone. */
.status {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  color: var(--fg-2);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  text-transform: capitalize;
}
.status svg { width: 1.05em; height: 1.05em; flex: none; }
.status--good { color: var(--good-on); }
.status--wait { color: var(--wait-on); }
.status--stop { color: var(--stop-on); }
.status--info { color: var(--info-on); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-3);
  font-size: var(--t-sm);
  white-space: nowrap;
}
.tag--good { color: var(--good-on); }
.tag--wait { color: var(--wait-on); }
.tag--bad { color: var(--stop-on); }
.tag--info { color: var(--info-on); }

/* Comm units: the book's stickers. They sit at a tilt on a sharp block shadow and overlap what is under them. */
.unit {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding: .32em .55em .24em;
  background: var(--moon);
  color: var(--void);
  font: 800 clamp(1.05rem, .92rem + .7vw, 1.5rem)/.95 var(--f-display);
  font-stretch: 75%;
  text-transform: uppercase;
  rotate: -2.5deg;
  box-shadow: .18em .2em 0 var(--void), .18em .2em 0 2px var(--line-2);
}
.unit.is-in { rotate: -2.5deg; }
.unit--red { background: var(--orbit); color: var(--star); }
.unit--gold { background: var(--gold); }
.unit--pink { background: var(--nebula); }
.unit--green { background: var(--ufo); }

/* Printed colour field with Nebula Noise. */
.field-print { position: relative; isolation: isolate; }
.field-print::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); background-size: 170px; opacity: .08; mix-blend-mode: multiply; pointer-events: none; }
.g-orbit.field-print::before, .g-cosmic.field-print::before, .g-deep.field-print::before { opacity: .2; }

/* Lists of rows: the default container here. Rows are divided by rules, not boxed. */
.rows { border-bottom: var(--hair) solid var(--line); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s-5);
  align-items: center;
  padding: 16px 0;
  border-top: var(--hair) solid var(--line);
  color: inherit;
  text-decoration: none;
}
a.row { transition: padding-left var(--m-med) var(--ease-out); }
a.row:hover { padding-left: 8px; }
.row__title { font-weight: 500; overflow-wrap: anywhere; }
.row__meta { grid-column: 1; color: var(--fg-3); font-size: var(--t-sm); overflow-wrap: anywhere; }
.row__end { grid-column: 2; grid-row: 1 / span 2; justify-self: end; text-align: right; }
.row__end.is-in { color: var(--good-on); }
.row--unread .row__title::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--orbit); rotate: 45deg; translate: 0 -2px; }

/* Label and value pairs. */
.facts { display: grid; gap: 0; }
.facts > div { display: flex; justify-content: space-between; gap: var(--s-5); padding: 12px 0; border-top: var(--hair) solid var(--line); }
.facts > div:last-child { border-bottom: var(--hair) solid var(--line); }
.facts dt { color: var(--fg-3); font-size: var(--t-sm); }
.facts dd { text-align: right; font-weight: 500; overflow-wrap: anywhere; }

.notice { padding: 14px 16px; border-radius: var(--r-1); background: var(--raise-2); color: var(--fg); font-size: var(--t-sm); }
.notice--bad { background: var(--orbit); color: var(--star); }
.notice--good { background: var(--ufo); color: var(--void); }
.notice--wait { background: var(--gold); color: var(--void); }

/* Feedback */
.toast {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  translate: -50% 16px;
  max-width: min(92vw, 460px);
  padding: 13px 18px;
  border-radius: var(--r-1);
  background: var(--moon);
  color: var(--void);
  font-weight: 500;
  box-shadow: var(--float);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, translate .32s var(--ease-out);
}
.toast.is-on { opacity: 1; translate: -50% 0; }
.toast--bad { background: var(--orbit); color: var(--star); }

.skeleton { border-radius: var(--r-1); background: linear-gradient(100deg, var(--raise) 30%, var(--raise-2) 50%, var(--raise) 70%); background-size: 300% 100%; animation: shimmer 1.5s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

.empty { display: grid; justify-items: start; gap: var(--s-2); padding: var(--s-7) 0; max-width: 46ch; }
.empty img { width: 132px; height: auto; margin-bottom: var(--s-3); }
.empty p { color: var(--fg-2); }

/* Dialog */
dialog.sheet {
  width: min(94vw, 520px);
  max-height: 90svh;
  padding: clamp(22px, 4vw, 32px);
  border: 0;
  border-radius: var(--r-3);
  background: #0a1148;
  color: var(--fg);
  box-shadow: 0 0 0 2px var(--moon), 10px 11px 0 2px var(--gold), var(--lift);
  opacity: 0;
  translate: 0 14px;
  transition: opacity .22s, translate .34s var(--ease-out), display .34s allow-discrete, overlay .34s allow-discrete;
}
dialog.sheet[open] { opacity: 1; translate: 0; }
@starting-style { dialog.sheet[open] { opacity: 0; translate: 0 14px; } }
dialog.sheet::backdrop { background: rgb(0 3 20 / .78); backdrop-filter: blur(4px); }
.sheet__body { margin-top: var(--s-2); }
.sheet__actions { display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--s-5); }
@media (max-width: 600px) {
  dialog.sheet { width: 100vw; max-width: none; margin: auto 0 0; border-radius: var(--r-2) var(--r-2) 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* Tables */
.table-wrap { overflow-x: auto; border-top: var(--rule) solid var(--fg); }
table.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th {
  position: sticky;
  top: 0;
  padding: 10px 14px 10px 0;
  text-align: left;
  white-space: nowrap;
  color: var(--fg-3);
  font-weight: 500;
  background: var(--bg);
  border-bottom: var(--hair) solid var(--line-2);
}
.table td { padding: 11px 14px 11px 0; border-bottom: var(--hair) solid var(--line); vertical-align: middle; }
.table .right, .table th.right { text-align: right; }
.table tbody tr[data-href] { cursor: pointer; }
.table tbody tr[data-href]:hover td { background: var(--raise-2); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); color: var(--fg-3); font-size: var(--t-sm); }

/* Frame: the original site's portal. A white keyline with the block shadow hanging off it. */
.framed { position: relative; border-radius: var(--r-3); box-shadow: 0 0 0 2px var(--moon), 11px 12px 0 2px var(--frame, var(--gold)); }
.framed > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Stickers: the book's universe symbols, white with a black keyline, stuck where things meet. */
.sticker {
  position: absolute;
  z-index: 3;
  display: block;
  width: var(--sz, clamp(54px, 7vw, 92px));
  color: var(--star);
  filter: drop-shadow(1.5px 0 0 var(--void)) drop-shadow(-1.5px 0 0 var(--void)) drop-shadow(0 1.5px 0 var(--void)) drop-shadow(0 -1.5px 0 var(--void)) drop-shadow(3px 4px 0 var(--void));
  rotate: var(--rot, -8deg);
  transition: rotate var(--m-slow) var(--ease-back), scale var(--m-med) var(--ease-back);
  pointer-events: none;
}
.sticker svg { width: 100%; height: auto; }

/* Tape: the poster bands that cross a composition. Copy runs along it, so it is alive without asking for attention. */
.tape {
  --tape-bg: var(--gold);
  --tape-ink: var(--void);
  position: relative;
  z-index: 4;
  display: block;
  width: calc(100% + 80px);
  margin-inline: -40px;
  overflow: hidden;
  background: var(--tape-bg);
  color: var(--tape-ink);
  rotate: var(--tilt, -1.4deg);
  box-shadow: 0 7px 0 var(--tape-shadow, rgb(0 3 20 / .55));
  font: 800 clamp(1rem, .9rem + .5vw, 1.32rem)/1 var(--f-display);
  font-stretch: 75%;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.tape--red { --tape-bg: var(--orbit); --tape-ink: var(--star); }
.tape--pink { --tape-bg: var(--nebula); }
.tape--green { --tape-bg: var(--ufo); }
.tape--blue { --tape-bg: var(--cosmic); --tape-ink: var(--star); }
.tape--black { --tape-bg: var(--void); --tape-ink: var(--gold); }
.tape__run { display: flex; width: max-content; padding-block: .62em .56em; animation: tape-run var(--tape-time, 42s) linear infinite; }
.tape__run > span { display: flex; align-items: center; gap: 1.3em; padding-right: 1.3em; white-space: nowrap; }
.tape__run i { display: block; width: .72em; height: .72em; background: currentColor; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
@keyframes tape-run { to { transform: translateX(-50%); } }
a.tape:hover .tape__run { animation-play-state: paused; }

/* Bolt edge: sections meet on a lightning line, not a straight rule. The cut is on the section's own
   ground, not the section, so objects inside can still hang over the edge. */
.bolt-top, .bolt-bottom {
  --bolt: clamp(44px, 7.5vw, 118px);
  position: relative;
  isolation: isolate;
  overflow: visible;
  background-color: transparent;
}
.bolt-top::after, .bolt-bottom::after { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bg); }
.bolt-top { margin-top: calc(var(--bolt) * -.7); padding-top: calc(var(--bolt) + var(--s-7)); }
.bolt-top::after, .bolt-top.field-print::before { clip-path: polygon(0 var(--bolt), 46% calc(var(--bolt) * .24), 41.5% calc(var(--bolt) * .7), 100% 0, 100% 100%, 0 100%); }
.bolt-top--flip::after, .bolt-top--flip.field-print::before { clip-path: polygon(0 0, 58.5% calc(var(--bolt) * .7), 54% calc(var(--bolt) * .24), 100% var(--bolt), 100% 100%, 0 100%); }
.bolt-bottom { padding-bottom: calc(var(--bolt) + var(--s-7)); }
.bolt-bottom::after, .bolt-bottom.field-print::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bolt)), 54% calc(100% - var(--bolt) * .3), 58.5% calc(100% - var(--bolt) * .76), 0 100%); }

/* Arrival. Anything marked data-reveal rises into place once, as it comes into view. */
[data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity var(--m-reveal) var(--ease-expo), transform var(--m-reveal) var(--ease-expo); transition-delay: calc(var(--d, 0) * 70ms); }
[data-reveal="left"] { transform: translate3d(-34px, 0, 0); }
[data-reveal="right"] { transform: translate3d(34px, 0, 0); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="tilt"] { transform: translate3d(0, 34px, 0) rotate(-3deg); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-depth] { translate: 0 var(--drift, 0); }

/* Display type that arrives a word at a time. */
.words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.words .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease-expo); transition-delay: calc(var(--i, 0) * 80ms + 120ms); }
.words.is-in .w > span { transform: none; }

/* Moving between pages: the old screen falls away, the new one rises, and the card flies between its positions. */
::view-transition-old(root) { animation: .2s var(--ease-out) both vt-out; }
::view-transition-new(root) { animation: .46s var(--ease-expo) both vt-in; }
::view-transition-group(mw-card) { animation-duration: .62s; animation-timing-function: var(--ease-expo); }
@keyframes vt-out { to { opacity: 0; translate: 0 -14px; } }
@keyframes vt-in { from { opacity: 0; translate: 0 22px; } }