/* IPSW catalogue theme. Loaded only on /ipsw/ pages, after style.css. */

/* Light by default, dark when the system is — the same rule as every other
   page on the site. The teal identity, the layout and the motion are what
   ipsw.dev contributed; the ground follows betaprofile.dev.

   Light contrast on #fff: teal-700 #0f766e text 5.4:1, white on teal-700
   5.4:1, green-800 #166534 on green-100 6.4:1, red-700 #b91c1c on red-100
   5.9:1, amber-800 #92400e on amber-100 6.4:1, violet-800 #5b21b6 on
   violet-100 7.0:1. Dark contrast on #030712: white 19.6:1, #9ca3af 9.1:1,
   teal-400 #2dd4bf 11.9:1, green-500 on green-950 7.0:1, red-400 on
   red-950 6.0:1, white on teal-700 5.4:1. */
body.theme-ipsw {
  --accent: #0d9488;
  --accent-2: #14b8a6;
  --accent-soft: #ccfbf1;
  --accent-text: #0f766e;
  --accent-fill: #0f766e;
  --accent-fill-ink: #ffffff;
  --tl-line: #0d9488;
  --ipsw-glow: 45, 212, 191;
  --ipsw-wash: rgba(11, 15, 26, .04);
  --ipsw-wash-2: rgba(11, 15, 26, .08);
  --ipsw-line-strong: rgba(11, 15, 26, .25);
  --ipsw-word-gradient: linear-gradient(115deg, #0f766e 0%, #0d9488 45%, #0e7490 100%);
  --ipsw-word-glyph: #0f766e;
  --ipsw-bar-track: #ccfbf1;
  --ipsw-bar-fill: linear-gradient(90deg, #0d9488, #0891b2);
  --ipsw-ok: #166534;        --ipsw-ok-bg: #dcfce7;    --ipsw-ok-line: rgba(22, 101, 52, .35);
  --ipsw-bad: #b91c1c;       --ipsw-bad-bg: #fee2e2;   --ipsw-bad-line: rgba(185, 28, 28, .35);
  --ipsw-beta: #115e59;      --ipsw-beta-bg: #ccfbf1;  --ipsw-beta-line: rgba(13, 148, 136, .35);
  --ipsw-rc: #92400e;        --ipsw-rc-bg: #fef3c7;    --ipsw-rc-line: rgba(146, 64, 14, .35);
  --ipsw-rel: #5b21b6;       --ipsw-rel-bg: #ede9fe;   --ipsw-rel-line: rgba(91, 33, 182, .35);
  --ipsw-banner-ok: #14532d; --ipsw-banner-bad: #7f1d1d; --ipsw-banner-mixed: #78350f; --ipsw-banner-mixed-bg: #fef3c7;
  --ipsw-code: #115e59;      --ipsw-code-bg: #ccfbf1;
  --ipsw-pill-bg: color-mix(in srgb, #14b8a6 13%, transparent);
  --ipsw-pill-line: color-mix(in srgb, #0d9488 32%, transparent);
  --ipsw-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(11, 15, 26, .06);
  --ipsw-render-shadow: 0 14px 22px rgba(11, 15, 26, .12);
  --ipsw-glow-opacity: .22;
  --ipsw-radius-lg: 24px;
}
@media (prefers-color-scheme: dark) {
  body.theme-ipsw {
    --bg: #030712;
    --bg-elev: #111827;
    --bg-inset: #0b1220;
    --text: #ffffff;
    --text-2: #9ca3af;
    --border: rgba(255, 255, 255, .09);
    --accent: #14b8a6;
    --accent-2: #2dd4bf;
    --accent-soft: #042f2e;
    --accent-text: #2dd4bf;
    --accent-fill: #0f766e;
    --accent-fill-ink: #ffffff;
    --ok: #22c55e;
    --warn: #fbbf24;
    --build: #f472b6;
    --fg-mix: #fff;
    --tl-line: #14b8a6;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
    --ipsw-wash: rgba(255, 255, 255, .06);
    --ipsw-wash-2: rgba(255, 255, 255, .12);
    --ipsw-line-strong: rgba(255, 255, 255, .25);
    --ipsw-word-gradient: linear-gradient(115deg, #99f6e4 0%, #2dd4bf 45%, #67e8f9 100%);
    --ipsw-word-glyph: #2dd4bf;
    --ipsw-bar-track: rgba(45, 212, 191, .18);
    --ipsw-bar-fill: linear-gradient(90deg, #2dd4bf, #67e8f9);
    --ipsw-ok: #22c55e;        --ipsw-ok-bg: #052e16;    --ipsw-ok-line: rgba(34, 197, 94, .35);
    --ipsw-bad: #f87171;       --ipsw-bad-bg: #450a0a;   --ipsw-bad-line: rgba(239, 68, 68, .35);
    --ipsw-beta: #2dd4bf;      --ipsw-beta-bg: #042f2e;  --ipsw-beta-line: rgba(45, 212, 191, .35);
    --ipsw-rc: #fbbf24;        --ipsw-rc-bg: #422006;    --ipsw-rc-line: rgba(251, 191, 36, .35);
    --ipsw-rel: #c4b5fd;       --ipsw-rel-bg: #2e1065;   --ipsw-rel-line: rgba(196, 181, 253, .35);
    --ipsw-banner-ok: #bbf7d0; --ipsw-banner-bad: #fecaca; --ipsw-banner-mixed: #fde68a; --ipsw-banner-mixed-bg: #422006;
    --ipsw-code: #2dd4bf;      --ipsw-code-bg: rgba(45, 212, 191, .10);
    --ipsw-pill-bg: rgba(45, 212, 191, .12);
    --ipsw-pill-line: rgba(45, 212, 191, .28);
    --ipsw-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 24px rgba(0, 0, 0, .35);
    --ipsw-render-shadow: 0 28px 44px rgba(0, 0, 0, .45);
    --ipsw-glow-opacity: .55;
  }
}
body.theme-ipsw { background: var(--bg); color: var(--text); }

/* ---------- hero ---------- */
.ipsw-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 72px 0 56px; isolation: isolate;
}
.ipsw-hero::before {
  content: ""; position: absolute; inset: -40% -20% auto; height: 140%; z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(var(--ipsw-glow), .20), transparent 70%),
    radial-gradient(40% 40% at 15% 30%, rgba(59, 130, 246, .12), transparent 70%),
    radial-gradient(40% 40% at 85% 30%, rgba(168, 85, 247, .10), transparent 70%);
  pointer-events: none;
}
.ipsw-hero h1 { font-size: clamp(34px, 6vw, 62px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 18px; font-weight: 700; }
.ipsw-hero .lead { max-width: 640px; margin: 0 auto; color: var(--text-2); font-size: 18px; line-height: 1.6; }
.ipsw-hero .lead a { color: var(--accent-text); text-decoration: none; }
.ipsw-hero .lead a:hover { text-decoration: underline; }
/* The platform name in the headline. No bar, no glyph, no roll: the word
   dissolves out of focus in place and the next resolves in, on a glass pill
   whose width settles onto the new word with a spring. The device render
   beside the copy changes with it. Restraint is the whole idea. */
/* The pill overhangs the word by .3em on each side, so the element carries
   that much margin: the pill starts after "for", never over it. */
.ipsw-morph { position: relative; display: inline-block; vertical-align: baseline; white-space: nowrap; margin: 0 .3em 0 .36em; }
.ipsw-morph.is-live { transition: width .62s linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.6%, .99 45.3%, 1.004 49.5%, 1.01 54.2%, 1.008 60.2%, 1 71.3%, 1); }
.ipsw-morph-pill {
  position: absolute; inset: -.06em -.3em -.1em; border-radius: 999px; z-index: -1;
  background: var(--ipsw-pill-bg); border: 1px solid var(--ipsw-pill-line);
  box-shadow: var(--ipsw-pill-shadow);
  backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
}
.ipsw-morph-word { position: relative; display: inline-block; color: var(--accent-text); transition: opacity .48s ease, filter .48s ease, transform .48s cubic-bezier(.2, .7, .2, 1); will-change: opacity, filter, transform; }
.ipsw-morph.is-live .ipsw-morph-word { position: absolute; left: 0; top: 0; }
.ipsw-morph.is-live .ipsw-morph-word.is-current { position: relative; }
.ipsw-morph-word.is-out { opacity: 0; filter: blur(8px); transform: scale(.985); pointer-events: none; }
.ipsw-morph-word.is-in { opacity: 0; filter: blur(8px); transform: scale(1.025); }
.ipsw-morph-word.is-in.is-current { opacity: 1; filter: blur(0); transform: none; }
.ipsw-morph-measure { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }

/* Split hero: copy left, the device beside it. */
.ipsw-hero--split { text-align: left; padding: 56px 0 44px; }
.ipsw-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.ipsw-hero--split .breadcrumb { justify-content: flex-start; }
.ipsw-hero--split .lead { margin-left: 0; }
.ipsw-hero--split .ipsw-meta-chips { justify-content: flex-start; }
.ipsw-hero-visual { position: relative; height: 340px; display: grid; place-items: center; }
.ipsw-hero-visual img, .ipsw-hero-visual span[data-i] {
  position: absolute; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain;
  opacity: 0; transform: translateY(10px) scale(.97); filter: blur(6px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s ease;
  will-change: opacity, transform, filter;
}
/* On a white ground a big dark render with a wide, dark shadow reads as a
   grey cloud. Light mode gets a tight, faint shadow and a barely-there tint;
   the deep shadow and glow belong to the dark ground. */
.ipsw-hero-visual img.is-current { opacity: 1; transform: none; filter: drop-shadow(var(--ipsw-render-shadow)); }
.ipsw-hero-glow {
  position: absolute; width: 70%; height: 70%; border-radius: 50%; filter: blur(56px); opacity: var(--ipsw-glow-opacity);
  background: radial-gradient(circle at 50% 45%, rgba(var(--ipsw-glow), .5), transparent 70%);
}
@media (max-width: 900px) {
  .ipsw-hero--split { text-align: center; }
  .ipsw-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .ipsw-hero--split .breadcrumb, .ipsw-hero--split .ipsw-meta-chips { justify-content: center; }
  .ipsw-hero--split .lead { margin: 0 auto; }
  .ipsw-hero-visual { height: 220px; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .ipsw-morph.is-live, .ipsw-morph-word, .ipsw-hero-visual img { transition: none; }
}
.ipsw-hero .breadcrumb { justify-content: center; margin-bottom: 22px; color: var(--text-2); }
.ipsw-hero .breadcrumb a { color: var(--text-2); }
.ipsw-hero .breadcrumb a:hover { color: var(--accent-text); }
.ipsw-hero-art { width: 160px; height: auto; margin: 0 auto 18px; display: block; filter: drop-shadow(0 20px 40px rgba(var(--ipsw-glow), .25)); }
.ipsw-hero-art.is-wide { width: 260px; }
.ipsw-meta-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.ipsw-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: var(--ipsw-wash); border: 1px solid var(--border); color: var(--text-2); font-size: 13.5px; text-decoration: none;
}
.ipsw-chip strong { color: var(--text); font-weight: 600; }
.ipsw-chip code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--accent-text); }
a.ipsw-chip:hover { border-color: rgba(var(--ipsw-glow), .5); color: var(--text); }

/* ---------- sections ---------- */
/* One alignment rule for the whole catalogue: the hero, every section
   heading and every row of cards is centred; tables and lists run the full
   width of a container narrower than the rest of the site. */
.theme-ipsw .container { max-width: 1120px; }
.ipsw-section { padding: 44px 0; }
.ipsw-section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 22px; }
.ipsw-section h2 { font-size: 28px; letter-spacing: -.015em; margin: 0; }
.ipsw-section h2 + p, .ipsw-section .sub { color: var(--text-2); margin: 4px 0 0; max-width: 640px; }
.ipsw-more { color: var(--accent-text); text-decoration: none; font-weight: 600; white-space: nowrap; margin-top: 8px; }
.ipsw-more:hover { text-decoration: underline; }

/* ---------- latest-build cards ---------- */
.ipsw-latest { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ipsw-latest .ipsw-card { flex: 0 1 262px; }
.ipsw-card {
  position: relative; display: flex; gap: 14px; align-items: center; padding: 16px 16px 16px 16px; border-radius: 18px;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ipsw-card:hover { transform: translateY(-3px); border-color: rgba(var(--ipsw-glow), .45); box-shadow: var(--shadow); }
.ipsw-card img { width: 52px; height: 52px; border-radius: 12px; flex: 0 0 52px; object-fit: contain; }
.ipsw-card .t { font-weight: 650; font-size: 16px; line-height: 1.25; }
.ipsw-card .b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--accent-text); margin-top: 3px; }
.ipsw-card .d { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.ipsw-card .d .pill { margin-left: 6px; padding: 1px 7px; font-size: 11.5px; vertical-align: 1px; }

/* ---------- platform + device grids ---------- */
.ipsw-platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ipsw-plat { flex: 0 1 200px; }
.ipsw-plat {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 22px 16px 18px; border-radius: var(--ipsw-radius-lg); background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; transition: transform .18s ease, border-color .18s ease;
}
.ipsw-plat:hover { transform: translateY(-4px); border-color: rgba(var(--ipsw-glow), .45); }
.ipsw-plat img { height: 110px; width: auto; max-width: 160px; object-fit: contain; }
.ipsw-plat .art { height: 110px; display: flex; align-items: center; justify-content: center; }
.ipsw-plat .t { font-weight: 650; font-size: 17px; }
.ipsw-plat .v { font-size: 13px; color: var(--text-2); }
.ipsw-plat .v strong { color: var(--accent-text); font-weight: 600; }

.ipsw-devices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ipsw-dev { flex: 0 1 168px; }
.ipsw-dev {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 18px 12px 14px; border-radius: 18px; background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; transition: transform .18s ease, border-color .18s ease;
}
.ipsw-dev:hover { transform: translateY(-3px); border-color: rgba(var(--ipsw-glow), .45); }
.ipsw-dev img { height: 96px; width: auto; max-width: 120px; object-fit: contain; margin-bottom: 4px; }
.ipsw-dev .t { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.ipsw-dev .y { font-size: 12.5px; color: var(--text-2); }
.ipsw-dev .id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-2); opacity: .9; }
.ipsw-dev[hidden] { display: none; }

/* ---------- toolbar: filter chips + search ---------- */
.ipsw-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.ipsw-filters { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--border); gap: 2px; }
.ipsw-filters button {
  appearance: none; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600;
  padding: 7px 14px; border-radius: 9px; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.ipsw-filters button[aria-pressed="true"] { background: var(--ipsw-wash-2); color: var(--text); }
.ipsw-filters button:hover { color: var(--text); }
.ipsw-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.ipsw-search input {
  width: 100%; box-sizing: border-box; padding: 10px 12px 10px 38px; border-radius: 12px; font: inherit; font-size: 14.5px;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
}
.ipsw-search input::placeholder { color: var(--text-2); }
.ipsw-search input:focus { outline: 2px solid rgba(var(--ipsw-glow), .6); outline-offset: 1px; border-color: transparent; }
.ipsw-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-2); pointer-events: none; }

/* ---------- firmware table ---------- */
.fw-wrap { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--bg-elev); }
.fw-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fw-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.fw-table th {
  text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2);
  padding: 12px 16px; background: var(--ipsw-wash); border-bottom: 1px solid var(--border);
}
.fw-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 15px; }
.fw-table tbody tr:last-child td { border-bottom: 0; }
.fw-table tbody tr.fw-row { transition: background .12s ease; }
.fw-table tbody tr.fw-row:hover { background: var(--ipsw-wash); }
.fw-table tr[hidden] { display: none; }
.fw-ver { font-weight: 650; white-space: nowrap; }
.fw-ver a { color: inherit; text-decoration: none; }
.fw-ver a:hover { color: var(--accent-text); }
.fw-build { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--accent-text); margin-top: 2px; }
.fw-date, .fw-size { white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fw-size { color: var(--text); }
.fw-actions { text-align: right; white-space: nowrap; }
.fw-actions .dl { margin-left: 6px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.pill.is-signed { color: var(--ipsw-ok); background: var(--ipsw-ok-bg); border-color: var(--ipsw-ok-line); }
.pill.is-unsigned { color: var(--ipsw-bad); background: var(--ipsw-bad-bg); border-color: var(--ipsw-bad-line); }
.pill.is-beta { color: var(--ipsw-beta); background: var(--ipsw-beta-bg); border-color: var(--ipsw-beta-line); }
.pill.is-rc { color: var(--ipsw-rc); background: var(--ipsw-rc-bg); border-color: var(--ipsw-rc-line); }
.pill.is-release { color: var(--ipsw-rel); background: var(--ipsw-rel-bg); border-color: var(--ipsw-rel-line); }
.pill.is-unknown { color: var(--text-2); background: var(--ipsw-wash); border-color: var(--border); }

.dl {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 9px; font-weight: 600; font-size: 14px;
  background: var(--accent-fill); color: var(--accent-fill-ink); text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
  transition: filter .15s ease, transform .15s ease;
}
.dl:hover { filter: brightness(1.15); transform: translateY(-1px); }
.dl svg { width: 15px; height: 15px; }
.dl.is-ghost { background: var(--ipsw-wash); color: var(--text); border: 1px solid var(--border); }
.dl.is-ghost:hover { background: var(--ipsw-wash-2); }
.dl.is-lg { font-size: 16px; padding: 13px 22px; border-radius: 12px; }
.dl[data-copied="1"] { background: var(--ipsw-ok-bg); color: var(--ipsw-ok); border-color: var(--ipsw-ok-line); }

/* expandable detail row: filename, hash, mirror */
.fw-details td { background: var(--ipsw-wash); padding: 0 16px; }
.fw-details .inner { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; padding: 14px 0 16px; font-size: 13.5px; }
.fw-details .k { color: var(--text-2); }
.fw-details .v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; overflow-wrap: anywhere; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fw-details .v .dl { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
.fw-toggle { appearance: none; background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: 8px; padding: 6px 9px; cursor: pointer; font: inherit; font-size: 12.5px; }
.fw-toggle:hover { color: var(--text); border-color: var(--ipsw-line-strong); }
.fw-toggle[aria-expanded="true"] { color: var(--accent-text); border-color: rgba(var(--ipsw-glow), .45); }
.fw-empty { padding: 26px 16px; color: var(--text-2); text-align: center; }

/* build page: one card per device group */
.ipsw-devlist { display: grid; gap: 10px; }
.ipsw-devrow {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: 16px; background: var(--bg-elev); border: 1px solid var(--border);
}
.ipsw-devrow img { width: 56px; height: 56px; object-fit: contain; }
.ipsw-devrow .t { font-weight: 650; }
.ipsw-devrow .t a { color: inherit; text-decoration: none; }
.ipsw-devrow .t a:hover { color: var(--accent-text); }
.ipsw-devrow .m { font-size: 13px; color: var(--text-2); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.ipsw-devrow .m code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ipsw-devrow .a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ipsw-devrow[hidden] { display: none; }

/* ---------- info panel (facts table) ---------- */
.ipsw-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ipsw-fact { padding: 14px 16px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--border); }
.ipsw-fact .k { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.ipsw-fact .v { font-weight: 650; font-size: 17px; margin-top: 4px; overflow-wrap: anywhere; }
.ipsw-fact .v code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; color: var(--accent-text); }

/* banner: signing status */
.ipsw-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid; margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.ipsw-banner.is-ok { color: var(--ipsw-banner-ok); background: var(--ipsw-ok-bg); border-color: var(--ipsw-ok-line); }
.ipsw-banner.is-bad { color: var(--ipsw-banner-bad); background: var(--ipsw-bad-bg); border-color: var(--ipsw-bad-line); }
.ipsw-banner.is-mixed { color: var(--ipsw-banner-mixed); background: var(--ipsw-banner-mixed-bg); border-color: var(--ipsw-rc-line); }
.ipsw-banner strong { color: inherit; }
.ipsw-banner svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }

/* ---------- steps ---------- */
.ipsw-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: step; }
.ipsw-step { padding: 20px 18px 18px; border-radius: 18px; background: var(--bg-elev); border: 1px solid var(--border); position: relative; }
.ipsw-step::before { counter-increment: step; content: "STEP " counter(step); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--accent-text); }
.ipsw-step h3 { font-size: 17px; margin: 6px 0 8px; }
.ipsw-step p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.ipsw-step p code, .ipsw-step p kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text); background: var(--ipsw-wash-2); padding: 1px 6px; border-radius: 5px; }

/* ---------- comparison ---------- */
.ipsw-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ipsw-cmp { padding: 22px 20px; border-radius: var(--ipsw-radius-lg); background: var(--bg-elev); border: 1px solid var(--border); }
.ipsw-cmp.is-us { border-color: rgba(var(--ipsw-glow), .45); box-shadow: 0 0 0 4px rgba(var(--ipsw-glow), .10); }
.ipsw-cmp h3 { margin: 0 0 4px; font-size: 19px; }
.ipsw-cmp p { color: var(--text-2); font-size: 14.5px; margin: 0 0 14px; }
.ipsw-cmp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ipsw-cmp li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.ipsw-cmp li svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.ipsw-cmp li.yes svg { color: var(--ipsw-ok); }
.ipsw-cmp li.no svg { color: var(--ipsw-bad); }
.ipsw-cmp li.no { color: var(--text-2); }

/* ---------- prose + faq inside the theme ---------- */
.theme-ipsw .faq { border-color: var(--border); background: var(--bg-elev); }
.theme-ipsw .ipsw-prose { max-width: 820px; margin-left: auto; margin-right: auto; }
.theme-ipsw .ipsw-prose > h2 { text-align: center; }
.theme-ipsw .ipsw-prose p, .theme-ipsw .ipsw-prose li { color: var(--text-2); font-size: 16px; line-height: 1.65; }
.theme-ipsw .ipsw-prose strong { color: var(--text); }
.theme-ipsw .ipsw-prose a { color: var(--accent-text); }
.theme-ipsw .ipsw-prose h2 { font-size: 28px; letter-spacing: -.015em; margin: 8px 0 18px; }
.theme-ipsw .ipsw-prose h3 { font-size: 18px; margin: 22px 0 6px; }
.ipsw-note { font-size: 13.5px; color: var(--text-2); text-align: center; }
.ipsw-note a { color: var(--accent-text); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ipsw-card, .ipsw-plat, .ipsw-dev, .dl { transition: none; }
}
/* No JS: everything visible. */
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .ipsw-hero { padding: 44px 0 36px; }
  .ipsw-latest .ipsw-card { flex-basis: 100%; }
  .ipsw-plat { flex-basis: calc(50% - 7px); }
  .ipsw-dev { flex-basis: calc(50% - 6px); }
  .ipsw-section { padding: 28px 0; }
  .ipsw-devrow { grid-template-columns: 44px 1fr; }
  .ipsw-devrow img { width: 44px; height: 44px; }
  .ipsw-devrow .a { grid-column: 1 / -1; justify-content: flex-start; }
  .fw-details .inner { grid-template-columns: 1fr; gap: 4px 0; }
  .fw-details .k { margin-top: 8px; }
}

.dl.is-xs { padding: 3px 8px; font-size: 12px; border-radius: 7px; }
.ipsw-devrow .ipsw-file { margin-top: 6px; font-size: 12.5px; }
.ipsw-devrow .ipsw-file code { color: var(--text-2); background: transparent; padding: 0; font-size: 11.5px; overflow-wrap: anywhere; }
.ipsw-h1-build { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; font-size: .55em; color: var(--accent-text); vertical-align: middle; }

/* Inline code inherits the site's pink build-number styling; in this theme
   identifiers and hashes read as teal on a quiet ground. */
.theme-ipsw code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--ipsw-code-bg); color: var(--ipsw-code); padding: 1px 6px; border-radius: 5px; font-size: .92em; }
.theme-ipsw .ipsw-hero .lead code { background: var(--ipsw-code-bg); }
.ipsw-toolbar.is-center { justify-content: center; margin-bottom: 22px; }
.ipsw-toolbar.is-center .ipsw-search { max-width: 420px; }
.ipsw-card, .ipsw-plat, .ipsw-dev { box-sizing: border-box; }
.ipsw-dev { flex-basis: 176px; }
.ipsw-plat { flex-basis: 206px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ipsw-versions { margin-top: 10px; }
.ipsw-versions .ipsw-note { align-self: center; margin-right: 4px; }
.ipsw-toolbar .ipsw-filters { flex-wrap: wrap; }

/* ---------- Phones: the firmware table becomes a stack of cards ----------
   99% of visitors are on a phone. A 640px table that scrolls sideways is
   the wrong shape for them, so below 640px each row lays itself out as a
   card: version and signing on the first line, date and size on the
   second, the buttons full width beneath. Same markup, no JS. */
@media (max-width: 640px) {
  .fw-scroll { overflow: visible; }
  .fw-table { min-width: 0; display: block; }
  .fw-table thead { display: none; }
  .fw-table tbody { display: block; }
  .fw-table tr.fw-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ver sign" "meta meta" "act act"; gap: 8px 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--border); }
  .fw-table tr.fw-row td { display: block; padding: 0; border: 0; }
  .fw-table tr.fw-row td:nth-child(1) { grid-area: ver; }
  .fw-table tr.fw-row td:nth-child(2) { grid-area: sign; justify-self: end; }
  .fw-table tr.fw-row td:nth-child(3), .fw-table tr.fw-row td:nth-child(4) { grid-area: meta; }
  .fw-table tr.fw-row td:nth-child(4) { justify-self: end; }
  .fw-table tr.fw-row td.fw-date::before { content: "Released "; color: var(--text-2); }
  .fw-table tr.fw-row td.fw-size::before { content: "Size "; color: var(--text-2); font-weight: 400; }
  /* Actions: the small buttons share a row, Download takes the next one. */
  .fw-table tr.fw-row td:nth-child(5), .fw-table tr.fw-row td.fw-actions { grid-area: act; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; white-space: normal; }
  .fw-table tr.fw-row td.fw-actions .dl:not(.is-ghost) { grid-column: 1 / -1; justify-content: center; margin: 0; min-height: 46px; font-size: 15px; }
  .fw-table tr.fw-row td.fw-actions .dl.is-ghost, .fw-table tr.fw-row td.fw-actions .fw-toggle { min-height: 42px; justify-content: center; text-align: center; margin: 0; }
  .fw-table tr.fw-row td.fw-actions .dl .sz { display: none; }   /* the size is on the line above */
  .fw-table tr.fw-row td.fw-actions .dl.is-ghost:only-of-type { grid-column: 1 / -1; }
  .fw-table tr.fw-details { display: block; }
  .fw-table tr[hidden] { display: none; }   /* display:block above must not defeat hidden */
  .fw-table tr.fw-details td { display: block; padding: 0 14px; border-bottom: 1px solid var(--border); }
  /* version pages: a six-column table with the same recipe */
  .fw-table tr.fw-row td:nth-child(6) { grid-area: act; }
  .ipsw-toolbar { flex-direction: column; align-items: stretch; }
  .ipsw-search { max-width: none; flex: 0 0 auto; }   /* the desktop basis would become height here */
  .ipsw-filters { width: 100%; justify-content: center; }
  .ipsw-filters button { flex: 1 1 auto; min-height: 40px; }
  .ipsw-chip { min-height: 32px; }
  .ipsw-devrow .a .dl { min-height: 44px; flex: 1 1 auto; justify-content: center; }
}