/* ==========================================================================
   Pilot wobbler styles — shared chrome
   Round shelf wobbler, 90 mm diameter, front face only.

   Everything inside .wobbler is expressed in var(--mm), so the same markup
   renders at review scale and at true size by changing one variable.
   ========================================================================== */

@import url("fonts.css");

:root {
  /* Brand tokens — eyox-design/themes/eyox.md. Locked, do not extend. */
  --teal-500: #4d757f;
  --teal-400: #6796a2;
  --teal-300: #91b7c0;
  --teal-200: #a8dde4;
  --teal-150: #cce5ea;
  --teal-125: #d9eef2;
  --teal-100: #e5f8fb;
  --teal-50: #f2fbfd;
  --teal-25: #f6fdfe;
  --navy: #1b4079;
  --white: #ffffff;

  /* Page chrome — deliberately neutral so no variant is flattered. */
  --paper: #f7f8f8;
  --ink: #23282b;
  --ink-muted: #6b7377;
  --rule: #d9dddf;

  /* Shelf context — greys only, so no variant is flattered by its backdrop. */
  --aisle: #b7bdbf;
  --shelf-board: #fafbfb;
  --shelf-face: #edefef;
  --shelf-groove: #c6cbcc;
  --shelf-edge: #98a0a2;
  --shelf-under: rgba(0, 0, 0, 0.09);
  --arm: rgba(255, 255, 255, 0.72);

  /* Review scale. 1 mm of artwork = 6.4 screen px, i.e. about 170 % of
     true size on a 96 dpi display. */
  --mm: 6.4px;
}

/* Below roughly a tablet the review scale no longer fits the viewport; the disc
   keeps its true proportions, only the millimetre shrinks. */
@media (max-width: 900px) {
  :root {
    --mm: 3.4px;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 32px 96px;
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.masthead h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.masthead .num {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.tagline {
  margin: 14px 0 0;
  max-width: 66ch;
  color: var(--ink-muted);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
}

.tag--locked {
  border-color: var(--teal-200);
  background: var(--teal-50);
  color: var(--teal-500);
}

.tag--wild {
  border-color: #e6c9a8;
  background: #fdf4e9;
  color: #8a5a1e;
}

.tag--draft {
  border-color: #dcd3e6;
  background: #f6f2fb;
  color: #5c4a78;
}

/* --------------------------------------------------------------------------
   Shelf context
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  width: min(100%, calc(126 * var(--mm)));
  margin: 40px auto 0;
  padding-bottom: calc(9 * var(--mm));
  background: var(--aisle);
  border-radius: 2px;
  overflow: hidden;
}

/* Shelf edge seen straight on: the board's front face, a price-rail groove
   along its lower third, a dark bottom edge, and the shadow underneath it. */
.shelf {
  position: relative;
  z-index: 3;
}

.shelf__top {
  height: calc(10 * var(--mm));
  background: var(--aisle);
}

.shelf__face {
  position: relative;
  height: calc(17 * var(--mm));
  background: var(--shelf-face);
  border-top: calc(1.5 * var(--mm)) solid var(--shelf-board);
  border-bottom: calc(1.2 * var(--mm)) solid var(--shelf-edge);
}

.shelf__face::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(9 * var(--mm));
  height: calc(1 * var(--mm));
  background: var(--shelf-groove);
}

/* The shadow the shelf casts into the aisle below it. */
.shelf::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(6 * var(--mm));
  background: linear-gradient(var(--shelf-under), rgba(0, 0, 0, 0));
}

/* The wobble arm: a clear PET strip taped behind the shelf lip. */
.arm {
  position: absolute;
  top: calc(15 * var(--mm));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: calc(9 * var(--mm));
  height: calc(42 * var(--mm));
  background: var(--arm);
  border-left: 1px solid rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 0 0 calc(2 * var(--mm)) calc(2 * var(--mm));
}

.hang {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  margin-top: calc(18 * var(--mm));
}

/* --------------------------------------------------------------------------
   The wobbler itself — 90 mm die-cut disc
   -------------------------------------------------------------------------- */

.wobbler {
  position: relative;
  width: calc(90 * var(--mm));
  height: calc(90 * var(--mm));
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  font-family: "Sora", system-ui, sans-serif;
  /* Die-cut edge against the aisle, not artwork. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09);
}

/* Type block helper: centred, optically balanced inside the circle. */
.wobbler .lines {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-wrap: nowrap;
}

.wobbler .l {
  display: block;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Dimension annotation — outside the artwork
   -------------------------------------------------------------------------- */

.dim {
  position: relative;
  width: calc(90 * var(--mm));
  margin: calc(9 * var(--mm)) auto 0;
  z-index: 4;
}

.dim__line {
  position: relative;
  height: 1px;
  background: rgba(35, 40, 43, 0.42);
}

.dim__line::before,
.dim__line::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: rgba(35, 40, 43, 0.42);
}

.dim__line::before {
  left: 0;
}

.dim__line::after {
  right: 0;
}

.stage__cap {
  margin: 10px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.dim__label {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(35, 40, 43, 0.7);
}

/* --------------------------------------------------------------------------
   Spec block + true-size companion
   -------------------------------------------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-top: 44px;
}

@media (max-width: 800px) {
  .cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

.panel h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.spec {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.spec li {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}

.spec b {
  font-weight: 500;
  color: var(--ink-muted);
}

.truesize {
  --mm: 1mm;
  max-width: 100%;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.truesize .wobbler {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.note {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
  max-width: 46ch;
}

.footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-muted);
}