@font-face {
  font-family: 'Redacted';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/assets/fonts/Redacted/Redacted-Regular.woff2') format('woff2');
}

/**
 * Shared skeleton tokens for the market content blocks.
 *
 * Every block concatenates this with its own `style.css` into
 * `makeElement({ style })` — via `./skeleton.ts`, which also prepends the
 * Redacted @font-face — so a block carries everything `[skeleton]` needs and
 * nothing has to be linked globally for the mode to work.
 *
 * The values are the wireframe's grey ramp expressed against `--text` /
 * `--background` rather than the flat hexes it was drawn with, so a skeleton
 * follows the site into dark mode instead of staying a light-mode artifact.
 */
:root {
  /* Redacted has no italic or bold cut — the fallback keeps metrics sane if the
     woff2 is missing, in which case a skeleton degrades to plain grey text. */
  --market-skeleton-font: 'Redacted', var(--font-primary, sans-serif);

  --market-skeleton-heading: color-mix(in srgb, var(--background), var(--text) 70%);
  --market-skeleton-copy: color-mix(in srgb, var(--background), var(--text) 30%);
  --market-skeleton-kicker: color-mix(in srgb, var(--background), var(--text) 24%);
  --market-skeleton-media: color-mix(in srgb, var(--background), var(--text) 38%);
  --market-skeleton-rule: color-mix(in srgb, var(--background), var(--text) 12%);
  --market-skeleton-surface: color-mix(in srgb, var(--background), var(--text) 2%);
}


market-app-story {
  --device-frame: color-mix(in srgb, var(--background), var(--text) 70%);
  --device-strong: color-mix(in srgb, var(--background), var(--text) 70%);
  --device-mid: color-mix(in srgb, var(--background), var(--text) 42%);
  --device-soft: color-mix(in srgb, var(--background), var(--text) 22%);
  --device-faint: color-mix(in srgb, var(--background), var(--text) 10%);
  --device-panel: color-mix(in srgb, var(--background), var(--text) 5%);
}

market-app-story [phone] {
  position: relative;
  width: var(--phone-width, 300px);
  height: var(--phone-height, 600px);
  padding: var(--phone-padding, 14px);
  box-sizing: border-box;
  border: var(--phone-border, 8px) solid var(--device-frame);
  border-radius: var(--phone-radius, 44px);
  background: var(--background);
  /* The bezel does the clipping, so whatever is on the screen takes its rounded
     corners from the frame it is sitting in. Clipping happens at the padding
     box, which is the inner radius — exactly the shape a screenshot should be. */
  overflow: hidden;
}

market-app-story [tablet] {
  position: relative;
  width: 100%;
  max-width: var(--tablet-width, 1000px);
  aspect-ratio: 1000 / 640;
  padding: 20px;
  box-sizing: border-box;
  border: 10px solid var(--device-frame);
  border-radius: 26px;
  background: var(--background);
  overflow: hidden;
}

/* The speaker pill. Drawn, not typed — every glyph in this block survives the
   skeleton's font swap because none of them is a glyph. */
market-app-story [notch] {
  position: absolute;
  top: var(--phone-padding, 14px);
  left: 50%;
  transform: translateX(-50%);
  width: var(--notch-width, 90px);
  height: 8px;
  border-radius: 4px;
  background: var(--device-frame);
}

market-app-story [screen] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--screen-gap, 14px);
  width: 100%;
  height: 100%;
  /* Clear of the speaker pill: it is absolutely positioned at the top of the
     bezel, so the screen has to start below it or the first thing drawn runs
     straight through it. Derived rather than set per block, because every
     block that changes the gap would otherwise have to remember this too. */
  padding-top: var(--screen-offset, calc(8px + var(--screen-gap, 14px)));
  box-sizing: border-box;
  overflow: hidden;
}

/*
  A screenshot is positioned out over the bezel's padding, and this is the box it
  would be clipped back to — square, and 14px short of the frame on every side.
  Both halves of that were wrong: the shot arrived inset from a bezel it was meant
  to fill, with corners the frame had already rounded.

  The clip comes off whenever there is a shot to show, which is safe because the
  drawn interface underneath is hidden in exactly that case — there is nothing
  left in here that needs clipping, and the frame above clips the shot instead.
*/
market-app-story [screen]:has(img) {
  overflow: visible;
}

/* A screenshot fills the bezel edge to edge, over the padding rather than
   inside it — the drawn interface is a stand-in for one, not a frame for it. */
market-app-story [screen] img {
  position: absolute;
  inset: calc(var(--phone-padding, 14px) * -1);
  display: block;
  width: calc(100% + var(--phone-padding, 14px) * 2);
  height: calc(100% + var(--phone-padding, 14px) * 2);
  border-radius: calc(var(--phone-radius, 44px) - var(--phone-border, 8px));
  object-fit: cover;
}

market-app-story [chrome] {
  display: flex;
  flex-direction: column;
  gap: var(--screen-gap, 14px);
  height: 100%;
  min-height: 0;
}

market-app-story [chrome][hidden] {
  display: none;
}

/* ---- blockout primitives ---- */

market-app-story [bar] {
  display: block;
  height: 8px;
  background: var(--device-mid);
}

market-app-story [line] {
  display: block;
  height: 7px;
  background: var(--device-soft);
}

market-app-story [avatar] {
  flex: none;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--device-mid);
}

market-app-story [panel] {
  display: block;
  background: var(--device-faint);
}

/* ---------------- SKELETON ---------------- */

market-app-story[skeleton] {
  --device-frame: var(--market-skeleton-heading);
  --device-strong: var(--market-skeleton-heading);
  --device-mid: var(--market-skeleton-copy);
  --device-soft: var(--market-skeleton-kicker);
  --device-faint: var(--market-skeleton-rule);
  --device-panel: var(--market-skeleton-rule);
}

market-app-story[skeleton] [phone],
market-app-story[skeleton] [tablet] {
  background: var(--background);
}

market-app-story {
  --story-muted: color-mix(in srgb, var(--background), var(--text) 55%);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 460px;
  align-items: center;
  gap: 80px;
  width: 100%;
  padding: 64px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--background), var(--text) 3%);
}

@media (max-width: 1000px) {
  market-app-story {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 24px;
  }
}

market-app-story [copy-column] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

market-app-story [headline] {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}

market-app-story [copy] {
  margin: 0;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--story-muted);
}

market-app-story [device] {
  display: flex;
  justify-content: center;
}

/* ---- the drawn interface ---- */

market-app-story [status] {
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
}

market-app-story [status] [bar]:first-child {
  width: 34px;
}

market-app-story [status] [bar]:last-child {
  width: 44px;
}

market-app-story [screen-title] {
  width: 140px;
  height: 22px;
  margin: 6px 0 2px;
  background: var(--device-strong);
}

market-app-story [segments] {
  display: flex;
  height: 28px;
  border: 1px solid var(--device-faint);
}

market-app-story [seg] {
  flex: 1;
}

market-app-story [seg][current] {
  background: var(--device-strong);
}

market-app-story [rows] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

market-app-story [row] {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--device-panel);
}

market-app-story [lines] {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

market-app-story [line]:nth-child(1) {
  width: 60%;
  height: 9px;
  background: var(--device-strong);
}

market-app-story [line]:nth-child(2) {
  width: 40%;
  height: 8px;
  background: var(--device-mid);
}

market-app-story [line]:nth-child(3) {
  width: 100%;
}

market-app-story [line]:nth-child(4) {
  width: 76%;
}

market-app-story [row]:nth-child(2) [line]:nth-child(1) {
  width: 72%;
}

market-app-story [row]:nth-child(2) [line]:nth-child(2) {
  width: 34%;
}

market-app-story [row]:nth-child(2) [line]:nth-child(4) {
  width: 64%;
}

market-app-story [row]:nth-child(3) [line]:nth-child(1) {
  width: 54%;
}

market-app-story [row]:nth-child(3) [line]:nth-child(2) {
  width: 44%;
}

market-app-story [row]:nth-child(3) [line]:nth-child(4) {
  width: 80%;
}

market-app-story [tabbar] {
  display: flex;
  justify-content: space-around;
  padding-top: 12px;
  border-top: 1px solid var(--device-faint);
}

market-app-story [tab] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

market-app-story [glyph] {
  display: block;
  width: 18px;
  height: 18px;
  background: var(--device-soft);
}

market-app-story [tab-label] {
  display: block;
  width: 32px;
  height: 6px;
  background: var(--device-soft);
}

market-app-story [tab][current] :is([glyph], [tab-label]) {
  background: var(--device-strong);
}

market-app-story :is([headline], [copy]):empty {
  display: none;
}

/* ---------------- SKELETON ---------------- */

market-app-story[skeleton],
market-app-story[skeleton] * {
  font-family: var(--market-skeleton-font);
  font-weight: 400;
  letter-spacing: normal;
}

market-app-story[skeleton] {
  background: var(--market-skeleton-surface);
  pointer-events: none;
  user-select: none;
}

market-app-story[skeleton] :is([headline], [copy]):empty {
  display: revert;
}

market-app-story[skeleton] [headline] {
  color: var(--market-skeleton-heading);
}

market-app-story[skeleton] [headline]:empty::before {
  content: 'Everything the shop does, in your pocket';
}

market-app-story[skeleton] [copy] {
  color: var(--market-skeleton-copy);
}

market-app-story[skeleton] [copy]:empty::before {
  content:
    'Four lines about the one thing this screen does better than the site, and why anyone would move from one to the other.';
}