/* Reseller campaign viewer. Mobile first; logical properties so Arabic (RTL)
   and English (LTR) share one stylesheet. One accent (Jawaker gold), neutral
   greys, radius scale: panels 20px, controls 12px, pills full. */

@font-face {
  font-family: "Cairo";
  src: url("fonts/cairo-arabic.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Cairo";
  src: url("fonts/cairo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2212, U+FEFF, U+FFFD;
}

/* App-screen rules (taste skill v2.1.5, app-screens.md): one ground, flat
   surfaces with a 1px border and no shadow, colour on data only (Jawaker gold
   on the sales marks), tabular figures, answer figure 36px, nothing larger.
   Radius: panels 16, controls 12, tags full. Scale: 12/13/14/16/20/24/36. */
:root {
  --ground: #f7f7f8;
  --surface: #ffffff;
  --raised: #f0f0f2;
  --border: #e6e6ea;
  --rule: #efeff2;
  --control: #d4d4da;
  --text: #141416;
  --muted: #55555c;
  --faint: #6b6b72;
  --primary: #1d1d20;
  --primary-ink: #ffffff;
  --accent: #e9a800;
  --accent-soft: #f6dc8f;
  --accent-zone: #fbefcc;
  --positive: #247b50;  --pill-positive-bg: #dcfae5;  --pill-positive-ink: #04250e;
  --negative: #c4242a;  --pill-negative-bg: #ffedea;  --pill-negative-ink: #831c1e;
  --grid: #e7e7ea;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground: #0b0b0c; --surface: #141416; --raised: #1f1f22; --border: #26262a; --rule: #1d1d20;
  --control: #3c3c42; --text: #f5f5f6; --muted: #b4b4ba; --faint: #949499; --primary: #f5f5f6;
  --primary-ink: #111113; --accent: #f2b705; --accent-soft: #7a5f12; --accent-zone: #2a2414;
  --positive: #3fc07a; --pill-positive-bg: #172a1d; --pill-positive-ink: #3fc07a;
  --negative: #e5566f; --pill-negative-bg: #2c1a20; --pill-negative-ink: #e5566f;
  --grid: #232326; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--text);
  font: 400 16px/1.6 "Cairo", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
h1, h2, p, dl, dd, ol { margin: 0; }
a { color: inherit; }
.icon { inline-size: 1.125rem; block-size: 1.125rem; flex: none; }
.num { font-variant-numeric: tabular-nums; }

/* ---- shell: product name left (start), controls end; opaque, one rule ---- */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-block-size: 3.5rem;
  padding: 0.5rem 1rem;
  padding-block-start: max(0.5rem, env(safe-area-inset-top));
  background: var(--ground);
  border-block-end: 1px solid var(--border);
}
/* Only on Mission Control's "view as reseller" page, never on the viewer itself. */
.preview-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--accent-zone);
  border-block-end: 1px solid var(--accent-soft);
}
.preview-note a { color: inherit; }
.brand { display: flex; align-items: baseline; gap: 0.4rem; text-decoration: none; }
.brand strong { font-size: 1.125rem; font-weight: 800; }
.brand span { font-size: 0.875rem; color: var(--muted); font-weight: 600; }
.bar-actions { display: flex; align-items: center; gap: 0.25rem; margin-inline-start: auto; }
.bar-actions form { display: contents; }
.icon-button, .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-block-size: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-radius: 12px;
}
.icon-button { inline-size: 2.75rem; }
.pill { padding-inline: 0.75rem; white-space: nowrap; }
.icon-button:hover, .pill:hover { color: var(--text); background: var(--raised); }
.icon-button:active, .pill:active, .button:active { transform: scale(0.98); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.when-dark { display: none; }
:root[data-theme="dark"] .when-dark { display: inline-flex; }
:root[data-theme="dark"] .when-light { display: none; }
.when-light, .when-dark { line-height: 0; }

.page {
  inline-size: 100%;
  max-inline-size: 70rem;
  margin-inline: auto;
  padding: 1.25rem 1rem calc(2.5rem + env(safe-area-inset-bottom));
}

/* ---- sign-in, 2FA, invite ---- */
.auth { max-inline-size: 26rem; margin: 1.5rem auto 0; }
.auth h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.auth .lead { margin-block: 0.375rem 1.5rem; color: var(--muted); }
.auth.message { margin-block-start: 3rem; }
.stack { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.5rem; }
label { font-weight: 600; font-size: 0.875rem; }
input {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--control);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
input:focus { outline: 2px solid var(--text); outline-offset: 1px; }
input.code { font-size: 1.5rem; letter-spacing: 0.4em; text-align: center; font-weight: 700; }
.hint { font-size: 0.8125rem; color: var(--faint); }
.button {
  min-block-size: 2.75rem;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: var(--primary-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.form-error {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.625rem 0.875rem;
  border-radius: 12px;
  background: var(--pill-negative-bg);
  color: var(--pill-negative-ink);
  font-size: 0.875rem;
  font-weight: 600;
}
.qr { inline-size: 12rem; margin: 0 auto 1rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 16px; background: #ffffff; color: #111111; }
.qr svg { display: block; inline-size: 100%; block-size: auto; }
.secret { margin-block: 0.25rem 1.25rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; word-break: break-all; }

/* ---- report ---- */
.report { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.report > * { min-inline-size: 0; }
.title-row { display: grid; gap: 0.375rem; padding-block-end: 0.25rem; }
.title-row h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.finding { display: grid; color: var(--text); font-size: 1rem; line-height: 1.5; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; color: var(--faint); font-size: 0.8125rem; }
.tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-block-size: 1.375rem;
  padding: 0 0.625rem;
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.tag-ready, .tag-approved { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.tag-ineligible { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.switcher { display: flex; gap: 0.25rem; margin-block-start: 0.5rem; padding: 0.25rem; border-radius: 14px; background: var(--raised); inline-size: fit-content; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
.segment { flex: none; padding: 0.375rem 0.875rem; border-radius: 10px; color: var(--muted); font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.segment.is-current { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }

.panel { padding: 1.25rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.label { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.5rem; margin-block: 0.25rem 0.75rem; }
.answer .value { font-size: 2.25rem; font-weight: 700; line-height: 1.15; }
.answer.second .value { font-size: 1.5rem; }
.answer .of { color: var(--muted); font-size: 1rem; }
.note { margin-block-start: 0.625rem; color: var(--faint); font-size: 0.8125rem; }

/* The target track: sold in gold, the target as an ink tick, and the zone
   past it (where the higher rate applies) in a pale tint of the same gold. */
.track { margin-block: 0.25rem 0.75rem; }
.track-bar { position: relative; block-size: 0.75rem; border-radius: 999px; background: var(--raised); overflow: hidden; }
.track-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--accent); border-start-end-radius: 999px; border-end-end-radius: 999px; }
.track-above { position: absolute; inset-block: 0; inset-inline-end: 0; background: var(--accent-zone); }
.track-target { position: absolute; inset-block: 0; inline-size: 2px; background: var(--text); }
/* Two rows: 0 and the target on the first, the higher-rate zone under it,
   so the target label never runs into it however close to the end it sits. */
.track-labels { position: relative; block-size: 2.75rem; margin-block-start: 0.375rem; font-size: 0.75rem; color: var(--faint); }
.track-zero { position: absolute; inset-inline-start: 0; }
.track-target-label { position: absolute; translate: -50% 0; white-space: nowrap; color: var(--text); font-weight: 600; }
.track-above-label { position: absolute; inset-block-start: 1.375rem; inset-inline-end: 0; white-space: nowrap; }

.strip { display: grid; margin-block-start: 0.5rem; border-block-start: 1px solid var(--rule); }
.strip.cols-1 { grid-template-columns: 1fr; }
.strip.cols-2 { grid-template-columns: 1fr 1fr; }
.strip.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.strip div { padding: 0.75rem 0.75rem 0; }
.strip div:first-child { padding-inline-start: 0; }
.strip div + div { border-inline-start: 1px solid var(--rule); }
.strip dt { font-size: 0.8125rem; color: var(--muted); }
.strip dd { font-size: 1.25rem; font-weight: 700; }

.pairs { display: grid; }
.pairs div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-block-size: 2.25rem; padding-block: 0.375rem; border-block-start: 1px solid var(--rule); }
.pairs dt { color: var(--muted); font-size: 0.875rem; }
.pairs dd { font-weight: 600; }

/* Daily columns: one hue, square corners, a y scale in its own lane. */
.chart { margin-block: 0.75rem 0.5rem; }
.chart-plot { position: relative; block-size: 10rem; }
.grid { position: absolute; inset-inline: 0; block-size: 0; border-block-start: 1px solid var(--grid); }
.grid:first-child { border-block-start-color: var(--control); }
.tick { position: absolute; inset-inline-start: 0; translate: 0 -55%; white-space: nowrap; font-size: 0.75rem; color: var(--faint); line-height: 1; background: var(--surface); padding-inline-end: 0.25rem; }
.bars { position: absolute; inset-block: 0; inset-inline: 4.5rem 0; display: flex; align-items: flex-end; gap: 2px; }
.col { flex: 1 1 0; min-inline-size: 2px; background: var(--accent-soft); }
.col.is-latest { background: var(--accent); }
.chart-x { display: flex; justify-content: space-between; gap: 0.5rem; margin-inline-start: 4.5rem; margin-block-start: 0.375rem; font-size: 0.75rem; color: var(--faint); }
.chart-x span { white-space: nowrap; }
/* Latest sales: time, then the amount; pending ones are tagged. */
.recent .row-main { font-variant-numeric: tabular-nums; }

.rows { list-style: none; padding: 0; margin-block-start: 0.5rem; }
.rows li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 3rem; padding-block: 0.375rem; border-block-start: 1px solid var(--rule); }
.row-main { display: grid; font-weight: 600; font-size: 0.875rem; }
.row-sub { font-weight: 400; font-size: 0.75rem; color: var(--faint); }
.rows .num { font-weight: 700; }
.more summary { margin-block-start: 0.5rem; min-block-size: 2.75rem; display: flex; align-items: center; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--text); }
.empty { margin-block-start: 0.75rem; padding: 0.75rem; border: 1px dashed var(--control); border-radius: 12px; color: var(--muted); font-size: 0.875rem; }

/* Tablet and up: the answer and the bonus side by side, daily full width.
   Grid: 1fr + 1fr with one 1rem gap, landing on the page's two edges. */
@media (min-width: 52rem) {
  .page { padding-inline: 2rem; padding-block-start: 1.75rem; }
  .bar { padding-inline: 2rem; }
  .report { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .title-row, .daily { grid-column: 1 / -1; }
  .panel { padding: 1.5rem; }
  .chart-plot { block-size: 12rem; }
}

/* Position classes for data marks (the CSP allows no inline styles). */
.w-0{inline-size:0%}.x-0{inset-inline-start:0%}.h-0{block-size:0%}.y-0{inset-block-end:0%}
.w-1{inline-size:1%}.x-1{inset-inline-start:1%}.h-1{block-size:1%}.y-1{inset-block-end:1%}
.w-2{inline-size:2%}.x-2{inset-inline-start:2%}.h-2{block-size:2%}.y-2{inset-block-end:2%}
.w-3{inline-size:3%}.x-3{inset-inline-start:3%}.h-3{block-size:3%}.y-3{inset-block-end:3%}
.w-4{inline-size:4%}.x-4{inset-inline-start:4%}.h-4{block-size:4%}.y-4{inset-block-end:4%}
.w-5{inline-size:5%}.x-5{inset-inline-start:5%}.h-5{block-size:5%}.y-5{inset-block-end:5%}
.w-6{inline-size:6%}.x-6{inset-inline-start:6%}.h-6{block-size:6%}.y-6{inset-block-end:6%}
.w-7{inline-size:7%}.x-7{inset-inline-start:7%}.h-7{block-size:7%}.y-7{inset-block-end:7%}
.w-8{inline-size:8%}.x-8{inset-inline-start:8%}.h-8{block-size:8%}.y-8{inset-block-end:8%}
.w-9{inline-size:9%}.x-9{inset-inline-start:9%}.h-9{block-size:9%}.y-9{inset-block-end:9%}
.w-10{inline-size:10%}.x-10{inset-inline-start:10%}.h-10{block-size:10%}.y-10{inset-block-end:10%}
.w-11{inline-size:11%}.x-11{inset-inline-start:11%}.h-11{block-size:11%}.y-11{inset-block-end:11%}
.w-12{inline-size:12%}.x-12{inset-inline-start:12%}.h-12{block-size:12%}.y-12{inset-block-end:12%}
.w-13{inline-size:13%}.x-13{inset-inline-start:13%}.h-13{block-size:13%}.y-13{inset-block-end:13%}
.w-14{inline-size:14%}.x-14{inset-inline-start:14%}.h-14{block-size:14%}.y-14{inset-block-end:14%}
.w-15{inline-size:15%}.x-15{inset-inline-start:15%}.h-15{block-size:15%}.y-15{inset-block-end:15%}
.w-16{inline-size:16%}.x-16{inset-inline-start:16%}.h-16{block-size:16%}.y-16{inset-block-end:16%}
.w-17{inline-size:17%}.x-17{inset-inline-start:17%}.h-17{block-size:17%}.y-17{inset-block-end:17%}
.w-18{inline-size:18%}.x-18{inset-inline-start:18%}.h-18{block-size:18%}.y-18{inset-block-end:18%}
.w-19{inline-size:19%}.x-19{inset-inline-start:19%}.h-19{block-size:19%}.y-19{inset-block-end:19%}
.w-20{inline-size:20%}.x-20{inset-inline-start:20%}.h-20{block-size:20%}.y-20{inset-block-end:20%}
.w-21{inline-size:21%}.x-21{inset-inline-start:21%}.h-21{block-size:21%}.y-21{inset-block-end:21%}
.w-22{inline-size:22%}.x-22{inset-inline-start:22%}.h-22{block-size:22%}.y-22{inset-block-end:22%}
.w-23{inline-size:23%}.x-23{inset-inline-start:23%}.h-23{block-size:23%}.y-23{inset-block-end:23%}
.w-24{inline-size:24%}.x-24{inset-inline-start:24%}.h-24{block-size:24%}.y-24{inset-block-end:24%}
.w-25{inline-size:25%}.x-25{inset-inline-start:25%}.h-25{block-size:25%}.y-25{inset-block-end:25%}
.w-26{inline-size:26%}.x-26{inset-inline-start:26%}.h-26{block-size:26%}.y-26{inset-block-end:26%}
.w-27{inline-size:27%}.x-27{inset-inline-start:27%}.h-27{block-size:27%}.y-27{inset-block-end:27%}
.w-28{inline-size:28%}.x-28{inset-inline-start:28%}.h-28{block-size:28%}.y-28{inset-block-end:28%}
.w-29{inline-size:29%}.x-29{inset-inline-start:29%}.h-29{block-size:29%}.y-29{inset-block-end:29%}
.w-30{inline-size:30%}.x-30{inset-inline-start:30%}.h-30{block-size:30%}.y-30{inset-block-end:30%}
.w-31{inline-size:31%}.x-31{inset-inline-start:31%}.h-31{block-size:31%}.y-31{inset-block-end:31%}
.w-32{inline-size:32%}.x-32{inset-inline-start:32%}.h-32{block-size:32%}.y-32{inset-block-end:32%}
.w-33{inline-size:33%}.x-33{inset-inline-start:33%}.h-33{block-size:33%}.y-33{inset-block-end:33%}
.w-34{inline-size:34%}.x-34{inset-inline-start:34%}.h-34{block-size:34%}.y-34{inset-block-end:34%}
.w-35{inline-size:35%}.x-35{inset-inline-start:35%}.h-35{block-size:35%}.y-35{inset-block-end:35%}
.w-36{inline-size:36%}.x-36{inset-inline-start:36%}.h-36{block-size:36%}.y-36{inset-block-end:36%}
.w-37{inline-size:37%}.x-37{inset-inline-start:37%}.h-37{block-size:37%}.y-37{inset-block-end:37%}
.w-38{inline-size:38%}.x-38{inset-inline-start:38%}.h-38{block-size:38%}.y-38{inset-block-end:38%}
.w-39{inline-size:39%}.x-39{inset-inline-start:39%}.h-39{block-size:39%}.y-39{inset-block-end:39%}
.w-40{inline-size:40%}.x-40{inset-inline-start:40%}.h-40{block-size:40%}.y-40{inset-block-end:40%}
.w-41{inline-size:41%}.x-41{inset-inline-start:41%}.h-41{block-size:41%}.y-41{inset-block-end:41%}
.w-42{inline-size:42%}.x-42{inset-inline-start:42%}.h-42{block-size:42%}.y-42{inset-block-end:42%}
.w-43{inline-size:43%}.x-43{inset-inline-start:43%}.h-43{block-size:43%}.y-43{inset-block-end:43%}
.w-44{inline-size:44%}.x-44{inset-inline-start:44%}.h-44{block-size:44%}.y-44{inset-block-end:44%}
.w-45{inline-size:45%}.x-45{inset-inline-start:45%}.h-45{block-size:45%}.y-45{inset-block-end:45%}
.w-46{inline-size:46%}.x-46{inset-inline-start:46%}.h-46{block-size:46%}.y-46{inset-block-end:46%}
.w-47{inline-size:47%}.x-47{inset-inline-start:47%}.h-47{block-size:47%}.y-47{inset-block-end:47%}
.w-48{inline-size:48%}.x-48{inset-inline-start:48%}.h-48{block-size:48%}.y-48{inset-block-end:48%}
.w-49{inline-size:49%}.x-49{inset-inline-start:49%}.h-49{block-size:49%}.y-49{inset-block-end:49%}
.w-50{inline-size:50%}.x-50{inset-inline-start:50%}.h-50{block-size:50%}.y-50{inset-block-end:50%}
.w-51{inline-size:51%}.x-51{inset-inline-start:51%}.h-51{block-size:51%}.y-51{inset-block-end:51%}
.w-52{inline-size:52%}.x-52{inset-inline-start:52%}.h-52{block-size:52%}.y-52{inset-block-end:52%}
.w-53{inline-size:53%}.x-53{inset-inline-start:53%}.h-53{block-size:53%}.y-53{inset-block-end:53%}
.w-54{inline-size:54%}.x-54{inset-inline-start:54%}.h-54{block-size:54%}.y-54{inset-block-end:54%}
.w-55{inline-size:55%}.x-55{inset-inline-start:55%}.h-55{block-size:55%}.y-55{inset-block-end:55%}
.w-56{inline-size:56%}.x-56{inset-inline-start:56%}.h-56{block-size:56%}.y-56{inset-block-end:56%}
.w-57{inline-size:57%}.x-57{inset-inline-start:57%}.h-57{block-size:57%}.y-57{inset-block-end:57%}
.w-58{inline-size:58%}.x-58{inset-inline-start:58%}.h-58{block-size:58%}.y-58{inset-block-end:58%}
.w-59{inline-size:59%}.x-59{inset-inline-start:59%}.h-59{block-size:59%}.y-59{inset-block-end:59%}
.w-60{inline-size:60%}.x-60{inset-inline-start:60%}.h-60{block-size:60%}.y-60{inset-block-end:60%}
.w-61{inline-size:61%}.x-61{inset-inline-start:61%}.h-61{block-size:61%}.y-61{inset-block-end:61%}
.w-62{inline-size:62%}.x-62{inset-inline-start:62%}.h-62{block-size:62%}.y-62{inset-block-end:62%}
.w-63{inline-size:63%}.x-63{inset-inline-start:63%}.h-63{block-size:63%}.y-63{inset-block-end:63%}
.w-64{inline-size:64%}.x-64{inset-inline-start:64%}.h-64{block-size:64%}.y-64{inset-block-end:64%}
.w-65{inline-size:65%}.x-65{inset-inline-start:65%}.h-65{block-size:65%}.y-65{inset-block-end:65%}
.w-66{inline-size:66%}.x-66{inset-inline-start:66%}.h-66{block-size:66%}.y-66{inset-block-end:66%}
.w-67{inline-size:67%}.x-67{inset-inline-start:67%}.h-67{block-size:67%}.y-67{inset-block-end:67%}
.w-68{inline-size:68%}.x-68{inset-inline-start:68%}.h-68{block-size:68%}.y-68{inset-block-end:68%}
.w-69{inline-size:69%}.x-69{inset-inline-start:69%}.h-69{block-size:69%}.y-69{inset-block-end:69%}
.w-70{inline-size:70%}.x-70{inset-inline-start:70%}.h-70{block-size:70%}.y-70{inset-block-end:70%}
.w-71{inline-size:71%}.x-71{inset-inline-start:71%}.h-71{block-size:71%}.y-71{inset-block-end:71%}
.w-72{inline-size:72%}.x-72{inset-inline-start:72%}.h-72{block-size:72%}.y-72{inset-block-end:72%}
.w-73{inline-size:73%}.x-73{inset-inline-start:73%}.h-73{block-size:73%}.y-73{inset-block-end:73%}
.w-74{inline-size:74%}.x-74{inset-inline-start:74%}.h-74{block-size:74%}.y-74{inset-block-end:74%}
.w-75{inline-size:75%}.x-75{inset-inline-start:75%}.h-75{block-size:75%}.y-75{inset-block-end:75%}
.w-76{inline-size:76%}.x-76{inset-inline-start:76%}.h-76{block-size:76%}.y-76{inset-block-end:76%}
.w-77{inline-size:77%}.x-77{inset-inline-start:77%}.h-77{block-size:77%}.y-77{inset-block-end:77%}
.w-78{inline-size:78%}.x-78{inset-inline-start:78%}.h-78{block-size:78%}.y-78{inset-block-end:78%}
.w-79{inline-size:79%}.x-79{inset-inline-start:79%}.h-79{block-size:79%}.y-79{inset-block-end:79%}
.w-80{inline-size:80%}.x-80{inset-inline-start:80%}.h-80{block-size:80%}.y-80{inset-block-end:80%}
.w-81{inline-size:81%}.x-81{inset-inline-start:81%}.h-81{block-size:81%}.y-81{inset-block-end:81%}
.w-82{inline-size:82%}.x-82{inset-inline-start:82%}.h-82{block-size:82%}.y-82{inset-block-end:82%}
.w-83{inline-size:83%}.x-83{inset-inline-start:83%}.h-83{block-size:83%}.y-83{inset-block-end:83%}
.w-84{inline-size:84%}.x-84{inset-inline-start:84%}.h-84{block-size:84%}.y-84{inset-block-end:84%}
.w-85{inline-size:85%}.x-85{inset-inline-start:85%}.h-85{block-size:85%}.y-85{inset-block-end:85%}
.w-86{inline-size:86%}.x-86{inset-inline-start:86%}.h-86{block-size:86%}.y-86{inset-block-end:86%}
.w-87{inline-size:87%}.x-87{inset-inline-start:87%}.h-87{block-size:87%}.y-87{inset-block-end:87%}
.w-88{inline-size:88%}.x-88{inset-inline-start:88%}.h-88{block-size:88%}.y-88{inset-block-end:88%}
.w-89{inline-size:89%}.x-89{inset-inline-start:89%}.h-89{block-size:89%}.y-89{inset-block-end:89%}
.w-90{inline-size:90%}.x-90{inset-inline-start:90%}.h-90{block-size:90%}.y-90{inset-block-end:90%}
.w-91{inline-size:91%}.x-91{inset-inline-start:91%}.h-91{block-size:91%}.y-91{inset-block-end:91%}
.w-92{inline-size:92%}.x-92{inset-inline-start:92%}.h-92{block-size:92%}.y-92{inset-block-end:92%}
.w-93{inline-size:93%}.x-93{inset-inline-start:93%}.h-93{block-size:93%}.y-93{inset-block-end:93%}
.w-94{inline-size:94%}.x-94{inset-inline-start:94%}.h-94{block-size:94%}.y-94{inset-block-end:94%}
.w-95{inline-size:95%}.x-95{inset-inline-start:95%}.h-95{block-size:95%}.y-95{inset-block-end:95%}
.w-96{inline-size:96%}.x-96{inset-inline-start:96%}.h-96{block-size:96%}.y-96{inset-block-end:96%}
.w-97{inline-size:97%}.x-97{inset-inline-start:97%}.h-97{block-size:97%}.y-97{inset-block-end:97%}
.w-98{inline-size:98%}.x-98{inset-inline-start:98%}.h-98{block-size:98%}.y-98{inset-block-end:98%}
.w-99{inline-size:99%}.x-99{inset-inline-start:99%}.h-99{block-size:99%}.y-99{inset-block-end:99%}
.w-100{inline-size:100%}.x-100{inset-inline-start:100%}.h-100{block-size:100%}.y-100{inset-block-end:100%}