/* Terra Incognita. One chart sheet, built in the grammar of the reference poster:
   a hairline frame with corner brackets, framed modules with code strips, spec rows, one display band. */

@font-face {
  font-family: "Sligoil";
  src: url("/assets/fonts/Sligoil-Micro.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sligoil";
  src: url("/assets/fonts/Sligoil-MicroBold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Grotesk";
  src: url("/assets/fonts/Grotesk-04Gras.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ground: #04232a;
  --ground-deep: #021a20;
  --ink: #f2dca8;
  --ink-2: #c9bb93;
  --rule: rgba(242, 220, 168, 0.30);
  --rule-strong: rgba(242, 220, 168, 0.58);
  --brass: #e8b86a;
  --red: #c8402c;

  --inset: 28px;        /* the sheet's frame inset */
  --gut: 10px;          /* the gutter between modules */
  --pad: 32px;          /* a module body's inner padding */
  --strip-pad: 28px;    /* a code strip's side inset */

  --t-body: 18px;
  --t-label: 22px;
  --t-small: 17px;
  --t-mid: 42px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { background: var(--ground-deep); }

body {
  margin: 0;
  background: var(--ground);
  background-image: url("/assets/img/grid.png");
  background-repeat: repeat;
  color: var(--ink);
  font-family: "Sligoil", ui-monospace, monospace;
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--ground);
  padding: 14px 24px;
  z-index: 40;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}

#backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.5;
  filter: blur(3px);
  pointer-events: none;
}

/* ---------------------------------------------------------------- the sheet */

.sheet {
  position: relative;
  z-index: 1;
  margin: var(--inset);
  border: 1px solid var(--rule-strong);
  padding: var(--gut);
  display: flex;
  flex-direction: column;
  gap: var(--gut);
}

.bracket {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.bracket--tl { left: -1px; top: -1px; }
.bracket--tr { right: -1px; top: -1px; transform: scaleX(-1); }
.bracket--bl { left: -1px; bottom: -1px; transform: scaleY(-1); }
.bracket--br { right: -1px; bottom: -1px; transform: scale(-1); }

/* ------------------------------------------------------------- the mastline */

.mastline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px var(--strip-pad) 14px;
  font-size: var(--t-small);
  letter-spacing: 0.08em;
}
.mastline__l { font-weight: 700; }
.mastline__r { text-align: right; color: var(--ink-2); }
.mastline__glyph { width: 26px; height: 26px; display: block; }

/* --------------------------------------------------------------- the bands */

.band { display: grid; gap: var(--gut); }
.band--two { grid-template-columns: 52fr 48fr; }
.band--index { grid-template-columns: 300px 1fr; }

.mod {
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(2, 20, 25, 0.35);
}

.mod__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  min-height: 54px;
  padding: 10px var(--strip-pad);
  border-bottom: 1px solid var(--rule);
}

.code {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  white-space: nowrap;
}
.code--dim {
  color: var(--ink-2);
  font-weight: 400;
  text-align: right;
  white-space: normal;
  min-width: 0;
}

.mod__body { padding: var(--pad); }
.mod__body--split { display: grid; grid-template-columns: 1fr 318px; gap: var(--pad); align-items: start; }
.mod__body--split > * { min-width: 0; }
.mod__foot {
  margin: 0;
  padding: 20px var(--pad) 24px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--t-body);
}

.lede { margin: 0; max-width: 92ch; color: var(--ink-2); }

/* ------------------------------------------------------------ the chart cell */

.mod--chart .mod__plate {
  position: relative;
  margin: var(--gut);
  border: 1px solid var(--rule);
  flex: 0 0 auto;
  height: 356px;
  overflow: hidden;
  background: rgba(2, 18, 23, 0.55);
}
#chart-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
}
#chart-canvas:active { cursor: grabbing; }

.plate-bracket { position: absolute; width: 34px; height: 34px; pointer-events: none; }
.plate-bracket--tl { left: 6px; top: 6px; }
.plate-bracket--br { right: 6px; bottom: 6px; transform: scale(-1); }

.mod__keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gut);
  padding: var(--gut);
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------------------- keys */

.key {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 1.3em;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms linear, color 120ms linear;
}
.key:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--ink); color: var(--ground); }
.key:active:not(:disabled) { transform: translateY(1px); }
.key:disabled,
.key[aria-disabled="true"] { color: var(--ink-2); border-color: var(--rule); cursor: default; opacity: 0.72; }
.key--read {
  border-style: dashed;
  font-weight: 400;
  color: var(--ink-2);
  cursor: default;
  flex: 1 1 320px;
  justify-content: flex-start;
  text-align: left;
}
.key--wide { flex: 1 1 200px; }
.key__mark { width: 20px; height: 20px; object-fit: contain; }
.key:hover .key__mark--x { filter: invert(1); }

/* -------------------------------------------------------------- the day cell */

.day__h {
  margin: 0 0 14px;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.1;
}
.day__n {
  font-family: "Grotesk", sans-serif;
  font-size: 88px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.9;
  color: var(--ink);
  display: block;
}
.day__entry { margin: 0 0 18px; color: var(--ink-2); max-width: 46ch; }
.day__found { margin: 0; padding: 0; list-style: none; max-width: 52ch; }
.day__found li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  font-size: var(--t-small);
  min-width: 0;
}
.day__found li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.day__found li span:first-child { overflow-wrap: anywhere; min-width: 0; }
.day__found li span:last-child { flex: none; }
.day__found li span:last-child { color: var(--ink-2); white-space: nowrap; }

.rose { display: flex; justify-content: center; }
#rose-canvas { display: block; width: 318px; height: 318px; max-width: 100%; }

.scale {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 10px var(--pad) 14px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.scale__ticks { display: block; height: 22px; position: relative; }
.scale__ticks::before {
  content: "";
  position: absolute;
  inset: 9px 0 auto;
  height: 1px;
  background: var(--rule);
}
.scale__pip {
  position: absolute;
  top: 2px;
  width: 1px;
  height: 15px;
  background: var(--rule-strong);
}
.scale__now {
  position: absolute;
  top: 0;
  width: 3px;
  height: 19px;
  background: var(--brass);
}

/* ---------------------------------------------------------------- the ballot */

.ballot {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.ballot__key {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 76px;
  padding: 14px 34px;
  border: 0;
  border-right: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  min-width: 0;
  cursor: pointer;
  transition: background 120ms linear, color 120ms linear;
}
.ballot__key:last-child { border-right: 0; }
.ballot__key:hover { background: rgba(242, 220, 168, 0.08); }
.ballot__key[aria-pressed="true"],
.ballot__key.is-leading { background: var(--ink); color: var(--ground); }
.ballot__name { font-size: var(--t-small); font-weight: 700; letter-spacing: 0.04em; }
.ballot__share { font-family: "Grotesk", sans-serif; font-size: 26px; line-height: 1; }

/* ------------------------------------------------------- the index and rows */

.index {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gut);
  min-width: 0;
}
.index__reg {
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  min-height: 102px;
}
.index__reg img { width: 86px; height: 86px; display: block; }

.index__cell {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--rule);
  padding: 6px 24px 6px 6px;
  text-decoration: none;
  min-height: 56px;
  transition: background 120ms linear, color 120ms linear;
}
.index__cell img { width: 66px; height: 46px; object-fit: contain; display: block; flex: none; }
.index__cell span { font-size: var(--t-small); font-weight: 700; letter-spacing: 0.05em; }
.index__cell b { color: var(--ink-2); font-weight: 700; margin-right: 8px; font-size: var(--t-small); }
.index__cell:hover { background: rgba(242, 220, 168, 0.08); }
.index__cell.is-open { background: var(--ink); color: var(--ground); }
.index__cell.is-open b { color: var(--ground); }
.index__cell.is-open img { filter: invert(1) sepia(1) saturate(0.4) hue-rotate(140deg); }

.rows { margin: 0; display: flex; flex-direction: column; gap: var(--gut); min-width: 0; }
.row {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--rule);
  min-height: 52px;
  min-width: 0;
  padding: 7px var(--strip-pad);
}
.row__k { margin: 0; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.04em; }
.row__v {
  margin: 0;
  font-size: var(--t-label);
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 16px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.row__v--mono { font-size: var(--t-body); letter-spacing: 0.02em; }
.row__fig { color: var(--ink-2); }
.rows--wide .row { grid-template-columns: 240px 1fr; }
.rows--wide .row__v { text-align: left; justify-content: flex-start; }

.meter { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.meter i {
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("/assets/img/meter.png");
  background-size: 36px 18px;
  background-position: -18px 0;
}
.meter i.on { background-position: 0 0; }

/* ------------------------------------------------------------- display band */

.display {
  border: 1px solid var(--rule);
  padding: 24px 32px;
  overflow: hidden;
  background: rgba(2, 20, 25, 0.35);
}
.display__word {
  display: inline-block;
  font-family: "Grotesk", sans-serif;
  font-weight: 400;
  font-size: 120px;
  line-height: 1;
  letter-spacing: -0.012em;
  white-space: nowrap;
  text-shadow: 0 0 24px rgba(242, 220, 168, 0.22);
}

.tilestrip {
  border: 1px solid var(--rule);
  height: 84px;
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: 0;
  padding: 0 10px;
}
.tilestrip i {
  flex: 1 1 0;
  height: 64px;
  background-image: url("/assets/img/atlas-terrain.png");
  background-size: 600% 400%;
  background-repeat: no-repeat;
  background-position: 0 0;
  opacity: 0.85;
}

.ruleline {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--strip-pad);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-2);
}

/* ------------------------------------------------------------ list surfaces */

.entries { display: flex; flex-direction: column; }
.entry {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--pad);
  padding: var(--pad);
  border-top: 1px solid var(--rule);
  align-items: start;
}
.entry > * { min-width: 0; }
.entry__plate { border: 1px solid var(--rule); background: rgba(2, 18, 23, 0.5); min-width: 0; }
.entry__plate canvas, .entry__plate img { display: block; width: 100%; height: auto; }
.entry__h { overflow-wrap: anywhere; margin: 0 0 12px; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.04em; }
.entry__text { margin: 0 0 16px; color: var(--ink-2); max-width: 80ch; }
.entry__meta { margin: 0; font-size: var(--t-small); color: var(--ink-2); overflow-wrap: anywhere; }
.entry__meta a { color: var(--brass); }

.finds { display: grid; grid-template-columns: repeat(4, 1fr); }
.find {
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  padding: 26px var(--strip-pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 210px;
}
.find:nth-child(4n) { border-right: 0; }
.find__mark {
  width: 64px;
  height: 64px;
  background-image: url("/assets/img/atlas-terrain.png");
  background-size: 384px 256px;
  flex: none;
}
.find__name { font-size: var(--t-label); font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.find__meta { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.find__rar { color: var(--brass); }

.auctions { display: flex; flex-direction: column; }
.auction {
  border-top: 1px solid var(--rule);
  padding: var(--pad);
  display: grid;
  grid-template-columns: 112px 1fr 300px;
  gap: var(--pad);
  align-items: center;
}
.auction > * { min-width: 0; }
.auction__mark {
  width: 104px;
  height: 104px;
  background-image: url("/assets/img/atlas-terrain.png");
  background-size: 624px 416px;
}
.auction__h { margin: 0 0 8px; font-size: var(--t-label); font-weight: 700; overflow-wrap: anywhere; }
.auction__meta { margin: 0 0 6px; color: var(--ink-2); font-size: var(--t-small); overflow-wrap: anywhere; }
.auction__meta:last-child { margin-bottom: 0; }
.auction__form { display: flex; flex-direction: column; gap: 10px; }
.field {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 10px 18px;
  border: 1px solid var(--rule-strong);
  background: rgba(2, 18, 23, 0.6);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-small);
}
.field::placeholder { color: var(--ink-2); opacity: 0.8; }

.empty {
  margin: 0;
  padding: 36px var(--pad) 40px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}

/* --------------------------------------------------------------- cartouche */

.cartouche { padding: 0 0 var(--pad); }
.cartouche__plate { display: block; width: min(100%, 980px); height: auto; margin: 10px auto 0; }
.cartouche__line {
  margin: 0 auto 28px;
  padding: 0 var(--pad);
  max-width: 86ch;
  text-align: center;
  color: var(--ink-2);
}
.ca {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
  margin: 0 var(--pad) var(--gut);
  border: 1px solid var(--rule-strong);
  padding: 18px var(--strip-pad);
  background: rgba(2, 18, 23, 0.7);
}
.ca__label { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.04em; }
.ca__value {
  font-size: var(--t-label);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
  user-select: all;
}
.cartouche__keys {
  display: flex;
  gap: var(--gut);
  margin: 0 var(--pad);
  flex-wrap: wrap;
}
.risk {
  margin: 28px var(--pad) 0;
  padding: 18px var(--strip-pad);
  border: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-2);
}

.strip-marks { display: flex; gap: 10px; }
.strip-mark {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ground-deep);
  border: 1px solid var(--rule);
}
.strip-mark img { width: 20px; height: 20px; object-fit: contain; }
.strip-mark[aria-disabled="true"] { opacity: 0.45; cursor: default; }

.link { color: var(--brass); }

/* ------------------------------------------------------------------ dialog */

.sheetdlg {
  border: 1px solid var(--rule-strong);
  background: var(--ground);
  background-image: url("/assets/img/grid.png");
  color: var(--ink);
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  font-family: inherit;
}
.sheetdlg::backdrop { background: rgba(2, 16, 20, 0.78); }
.sheetdlg__body { margin: 0; }
.sheetdlg__inner { padding: var(--pad); display: flex; flex-direction: column; gap: 16px; }
.sheetdlg__text { margin: 0; color: var(--ink-2); font-size: var(--t-body); }
.sheetdlg__label { font-size: var(--t-small); font-weight: 700; letter-spacing: 0.04em; }
.sheetdlg__keys { display: flex; gap: var(--gut); flex-wrap: wrap; }
.sheetdlg__keys .key { flex: 1 1 160px; }

/* ------------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  padding: 16px 28px;
  border: 1px solid var(--ink);
  background: var(--ground-deep);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms linear, transform 160ms linear;
  z-index: 30;
}
.toast.is-up { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --------------------------------------------------------------- 1366 down */

@media (max-width: 1500px) {
  :root { --t-mid: 36px; }
  .mod__body--split { grid-template-columns: 1fr 246px; gap: 22px; }
  #rose-canvas { width: 246px; height: 246px; }
  .day__n { font-size: 76px; }
  .mod--chart .mod__plate { height: 330px; }
  .band--index { grid-template-columns: 260px 1fr; }
  .row { grid-template-columns: 200px 1fr; }
  .day__n { font-size: 84px; }
  .finds { grid-template-columns: repeat(3, 1fr); }
  .find:nth-child(4n) { border-right: 1px solid var(--rule); }
  .find:nth-child(3n) { border-right: 0; }
}

@media (max-width: 1240px) {
  .mod__body--split { grid-template-columns: 1fr; }
  .rose { justify-content: flex-start; }
  #rose-canvas { width: 280px; height: 280px; }
}

@media (max-width: 1100px) {
  :root { --inset: 18px; --pad: 26px; --strip-pad: 24px; }
  .band--two { grid-template-columns: 1fr; }
  .band--index { grid-template-columns: 1fr; }
  .index { display: grid; grid-template-columns: repeat(3, 1fr); }
  .index__reg { grid-column: span 3; min-height: 96px; }
  .mod__body--split { grid-template-columns: 1fr; }
  .rose { justify-content: flex-start; }
  .ballot { grid-template-columns: repeat(4, 1fr); }
  .ballot__key:nth-child(4n) { border-right: 0; }
  .ballot__key { border-bottom: 1px solid var(--rule); }
  .entry { grid-template-columns: 240px 1fr; }
  .auction { grid-template-columns: 80px 1fr; }
  .auction__form { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --inset: 12px; --pad: 32px; --strip-pad: 24px; --gut: 8px; --t-label: 19px; }
  .index { grid-template-columns: repeat(2, 1fr); }
  .index__reg { grid-column: span 2; min-height: 88px; }
  .index__reg img { width: 76px; height: 76px; }
  .ballot { grid-template-columns: repeat(2, 1fr); }
  .ballot__key:nth-child(4n) { border-right: 1px solid var(--rule); }
  .ballot__key:nth-child(2n) { border-right: 0; }
  .row { grid-template-columns: 1fr; gap: 6px; min-height: 0; padding: 16px var(--strip-pad); }
  .row__v { justify-content: flex-start; text-align: left; }
  .rows--wide .row { grid-template-columns: 1fr; }
  .mod--chart .mod__plate { min-height: 340px; }
  .day__n { font-size: 68px; }
  .finds { grid-template-columns: repeat(2, 1fr); }
  .find:nth-child(3n) { border-right: 1px solid var(--rule); }
  .find:nth-child(2n) { border-right: 0; }
  .entry { grid-template-columns: 1fr; }
  .ca { grid-template-columns: 1fr; gap: 10px; }
  .cartouche__keys { flex-direction: column; }
  .key--wide { flex: 1 1 auto; }
  .tilestrip { height: 72px; }
  .tilestrip i { height: 54px; }
  .mastline { font-size: var(--t-small); }
}

@media (max-width: 480px) {
  .day__found li { flex-direction: column; gap: 2px; }
  .day__found li span:last-child { white-space: normal; }
  .meter i { width: 14px; height: 14px; background-size: 28px 14px; background-position: -14px 0; }
  .meter i.on { background-position: 0 0; }
  .display__word { white-space: normal; line-height: 1.02; }
}

@media (max-width: 420px) {
  :root { --inset: 8px; --pad: 32px; --strip-pad: 22px; --t-label: 18px; }
  .mastline { grid-template-columns: 1fr auto; row-gap: 2px; }
  .mastline__r { grid-column: 1 / -1; text-align: left; }
  .ballot { grid-template-columns: 1fr; }
  .ballot__key { border-right: 0 !important; }
  .finds { grid-template-columns: 1fr; }
  .find { border-right: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}