/* MeSize web — the app's look, ported straight from its design tokens.
   Values mirror src/constants/Colors.ts + src/constants/Layout.ts; the blob
   backdrop mirrors src/components/ScreenBackground.tsx (460px circles fading to
   transparent at the rim, same four positions). Keep them in step by hand: the
   site can't import from the app. */

:root {
  color-scheme: light dark;

  --ink: #1a1a2e;
  --ink-soft: #3d3d52;
  --muted: #6b6b82;
  --accent: #2e7cf6;
  --accent-deep: #1f62d6;
  --accent-ink: #ffffff;
  --danger: #e5484d;

  --bg-top: #eaf1ff;
  --bg-mid: #f2f7ff;
  --bg-bottom: #e6f0ff;

  --glass: rgba(255, 255, 255, 0.72);
  --glass-soft: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --hairline: rgba(26, 26, 46, 0.08);
  --shadow: rgba(26, 26, 46, 0.18);
  --accent-glow: rgba(46, 124, 246, 0.4);
  /* Opaque twin of --glass-highlight. Everything else here can be translucent;
     a sticky table column cannot — it has to actually hide the cells sliding
     under it. Roughly what --glass-highlight composites to over a card. */
  --sticky: #ffffff;

  --blob-blue: rgba(46, 124, 246, 0.26);
  --blob-blue-mid: rgba(46, 124, 246, 0.18);
  --blob-sky: rgba(91, 168, 255, 0.32);
  --blob-sky-mid: rgba(91, 168, 255, 0.22);
  --blob-mint: rgba(56, 200, 220, 0.22);
  --blob-mint-mid: rgba(56, 200, 220, 0.15);
  --blob-lilac: rgba(150, 170, 255, 0.3);
  --blob-lilac-mid: rgba(150, 170, 255, 0.21);

  /* Layout.spacing / Layout.radius */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eaf0ff;
    --ink-soft: #c2c8de;
    --muted: #8a91ad;
    --accent: #5b9cff;
    --accent-deep: #3a7ae4;
    --danger: #ff6166;

    --bg-top: #11162a;
    --bg-mid: #0c1124;
    --bg-bottom: #0a0e20;

    --glass: rgba(255, 255, 255, 0.12);
    --glass-soft: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-highlight: rgba(255, 255, 255, 0.16);
    --hairline: rgba(255, 255, 255, 0.1);
    --shadow: rgba(0, 0, 0, 0.5);
    --accent-glow: rgba(91, 156, 255, 0.35);
    --sticky: #343a4c;

    --blob-blue: rgba(46, 124, 246, 0.3);
    --blob-blue-mid: rgba(46, 124, 246, 0.21);
    --blob-sky: rgba(91, 168, 255, 0.28);
    --blob-sky-mid: rgba(91, 168, 255, 0.2);
    --blob-mint: rgba(56, 200, 220, 0.18);
    --blob-mint-mid: rgba(56, 200, 220, 0.13);
    --blob-lilac: rgba(150, 170, 255, 0.26);
    --blob-lilac-mid: rgba(150, 170, 255, 0.18);
  }
}

* {
  box-sizing: border-box;
}

/* Paint the canvas too: with a shorter-than-viewport page (or overscroll) the
   body box ends before the screen does, and the browser's white shows through. */
html {
  background: var(--bg-bottom);
}

body {
  margin: 0;
  min-height: 100vh;
  padding: var(--sp-lg) 18px 48px;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* The four ScreenBackground blobs, same colours, same corners. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      circle 230px at 110px 50px,
      var(--blob-blue) 0%,
      var(--blob-blue-mid) 45%,
      transparent 100%
    ),
    radial-gradient(
      circle 230px at calc(100% - 30px) 310px,
      var(--blob-sky) 0%,
      var(--blob-sky-mid) 45%,
      transparent 100%
    ),
    radial-gradient(
      circle 230px at calc(100% - 130px) calc(100% - 70px),
      var(--blob-mint) 0%,
      var(--blob-mint-mid) 45%,
      transparent 100%
    ),
    radial-gradient(
      circle 230px at 20px calc(100% - 290px),
      var(--blob-lilac) 0%,
      var(--blob-lilac-mid) 45%,
      transparent 100%
    );
}

.wrap {
  width: 100%;
  max-width: 460px;
}

/* --- brand ------------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-lg);
}
.brand img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 6px 14px var(--shadow);
}
.brand span {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand.center {
  flex-direction: column;
  gap: var(--sp-md);
  margin-bottom: var(--sp-md);
}
.brand.center img {
  width: 76px;
  height: 76px;
  border-radius: 18px;
}

/* --- type -------------------------------------------------------------- */

h1 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-sm);
}
p {
  margin: 0;
}
.sub {
  color: var(--muted);
  margin-bottom: var(--sp-lg);
}
.hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin-top: var(--sp-md);
}
a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
strong {
  font-weight: 700;
}

/* --- glass card -------------------------------------------------------- */

.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 20px var(--shadow);
  padding: var(--sp-md);
  margin-bottom: var(--sp-md);
}
.card + .hint {
  margin-top: calc(var(--sp-md) * -1 + var(--sp-sm));
}

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

label.field {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

input[type='text'],
select {
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--glass-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: none;
}
input:focus,
select:focus,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  width: 100%;
  padding: 18px var(--sp-lg);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: 1px solid var(--glass-highlight);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 24px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
button:active {
  transform: scale(0.97);
}
button[disabled] {
  opacity: 0.5;
  box-shadow: none;
  cursor: default;
}
button.ghost {
  color: var(--accent);
  background: var(--glass-soft);
  border: 1px solid var(--accent);
  box-shadow: none;
  padding: 13px var(--sp-md);
}

/* The "get the app" pill — a real call to action, not a text link. */
.btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: var(--sp-lg) auto 0;
  padding: 18px 32px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: 1px solid var(--glass-highlight);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 24px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.12s ease;
}
.btn:active {
  transform: scale(0.97);
}

/* Footer app promo: icon, one line of why, then the pill. */
.appcta {
  margin-top: var(--sp-lg);
  padding: var(--sp-lg) var(--sp-md) var(--sp-md);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 20px var(--shadow);
  text-align: center;
}
.appcta img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 6px 14px var(--shadow);
}
.appcta .name {
  font-weight: 800;
  font-size: 17px;
  margin-top: 10px;
}
.appcta .hint {
  margin-top: 6px;
}
.appcta .btn {
  margin-top: var(--sp-md);
}

/* --- size rows --------------------------------------------------------- */

.section {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--sp-md) 0 var(--sp-sm);
}
.section:first-child {
  padding-top: 0;
}
.section + .row {
  border-top: 0;
  padding-top: 0;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.row label {
  flex: 1;
  font-size: 15px;
}
.row input {
  flex: 0 0 116px;
  width: 116px;
  text-align: center;
  padding: 11px 8px;
}

/* --- segmented chips (mirrors the app's Chip) -------------------------- */

.seg {
  display: flex;
  gap: var(--sp-sm);
}
.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg label {
  flex: 1;
  text-align: center;
  padding: 11px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: var(--glass-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.12s ease;
}
.seg input:checked + label {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 10px var(--accent-glow);
}

/* --- misc -------------------------------------------------------------- */

.gap {
  height: var(--sp-md);
}
.error {
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  margin-top: var(--sp-md);
  text-align: center;
}
.center {
  text-align: center;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.spinner {
  width: 32px;
  height: 32px;
  margin: 40px auto;
  border-radius: 50%;
  border: 3px solid var(--hairline);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
[hidden] {
  display: none !important;
}

/* Splash pages are a single centred card, not a scrolling form. */
body.splash {
  align-items: center;
  text-align: center;
}
body.splash .wrap {
  max-width: 420px;
}

/* ======================================================================
   Marketing + size-chart pages
   ----------------------------------------------------------------------
   The apex page and everything under /size-chart. Same tokens as above —
   these only add layouts the splash pages never needed: a wider column, a
   real data table, and content sections that stack.
   ====================================================================== */

/* Reading pages are top-aligned and left-aligned; only splashes are centred. */
body.doc {
  padding-bottom: var(--sp-xl);
}
.wrap.wide {
  max-width: 760px;
}

/* The brand lockup doubles as the home link on these pages. */
a.brand {
  color: var(--ink);
  font-weight: inherit;
}

h2 {
  font-size: 21px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: var(--sp-xl) 0 var(--sp-md);
}
h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}
p + p {
  margin-top: var(--sp-md);
}

.crumbs {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--sp-md);
}
.crumbs span {
  padding: 0 var(--sp-xs);
}

/* --- conversion table -------------------------------------------------- */

/* The table is the content, and six columns never fit a phone. It scrolls
   inside its own box so the page itself never scrolls sideways. */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 20px var(--shadow);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
/* Named for screen readers; the <h2> right above already says it on screen. */
caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
thead th {
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  background: var(--sticky);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
thead th .code {
  display: block;
  letter-spacing: 0.04em;
}
thead th .cn {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
tbody th,
tbody td {
  padding: 11px 14px;
  text-align: center;
  font-size: 15px;
  white-space: nowrap;
  border-top: 1px solid var(--hairline);
}
/* First column is the one you scroll away from — pin it so a row stays readable
   once JP and KR are on screen. Only the horizontal axis is pinned: the page
   itself is the vertical scroller, so a sticky header would float over the rest
   of the page rather than over its own table. */
tbody th,
thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--sticky);
  border-right: 1px solid var(--hairline);
}
tbody th {
  font-weight: 800;
}
tbody tr:hover td {
  background: var(--glass-soft);
}

/* Sits tight under its <h2>, ahead of the table it describes. */
.hint.range {
  margin-top: 0;
  margin-bottom: var(--sp-md);
}

/* --- jump links + chip nav --------------------------------------------- */

.jump,
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}
.jump {
  margin-bottom: var(--sp-md);
}
.jump a,
.chips a {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--glass-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
.jump a:hover,
.chips a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* --- definition list (how to measure / what each system counts) --------- */

.how {
  margin: 0;
}
.how dt {
  font-size: 15px;
  font-weight: 700;
  margin-top: var(--sp-md);
}
.how dt:first-child {
  margin-top: 0;
}
.how dt .unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding-left: 6px;
}
.how dd {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

/* --- tile grid (chart index + homepage features) ----------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-sm);
}
/* Feature cards carry a sentence, not a label — they need the wider track. */
.grid.two {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.tile {
  display: block;
  padding: 14px var(--sp-md);
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.tile:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.tile-name {
  display: block;
  font-weight: 700;
  font-size: 15px;
}
.tile-sub {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding-top: 2px;
}

/* --- homepage ---------------------------------------------------------- */

.hero {
  padding: var(--sp-lg) 0 var(--sp-sm);
}
.hero h1 {
  font-size: 34px;
  margin-bottom: var(--sp-md);
}
.hero .sub {
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 0;
}
@media (min-width: 600px) {
  .hero h1 {
    font-size: 42px;
  }
}

/* Store buttons: left-aligned rather than the splash pages' centred pill, and
   side by side the day a second store link exists. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}
.stores .btn {
  flex: 0 1 260px;
  width: auto;
  margin: 0;
}

/* One feature per card: name, then what it does for the reader. */
.feature {
  padding: var(--sp-md);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 20px var(--shadow);
}
.feature p {
  color: var(--ink-soft);
  font-size: 15px;
}
.feature .hint {
  margin-top: var(--sp-sm);
}

/* The "ask for sizes" block — the one mechanic nothing else has. */
.spotlight {
  padding: var(--sp-lg) var(--sp-md);
  background: var(--glass);
  border: 1px solid var(--accent);
  border-radius: var(--r-xl);
  box-shadow: 0 10px 24px var(--accent-glow);
}
.spotlight h2 {
  margin-top: 0;
}
.steps {
  margin: var(--sp-md) 0 0;
  padding-left: 1.2em;
  color: var(--ink-soft);
  font-size: 15px;
}
.steps li + li {
  margin-top: var(--sp-sm);
}

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

.foot {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.foot p + p {
  margin-top: var(--sp-sm);
}
.foot a {
  color: var(--muted);
  font-weight: 600;
}
.foot a:hover {
  color: var(--accent);
}