/* New look for the inner pages of the redesign mirror. Loaded last on every mirrored page.
   The markup of the pages is the live one: this file only changes how it is presented.
   Shape rule, same as the home: buttons are pills, panels are 20px, screenshots are 12px. */

:root {
  color-scheme: light dark;
  --bg: light-dark(oklch(0.965 0.004 90), oklch(0.17 0.006 90));
  --surface: light-dark(oklch(0.99 0.004 90), oklch(0.215 0.006 90));
  --sunken: light-dark(oklch(0.955 0.005 90), oklch(0.26 0.006 90));
  --line: light-dark(oklch(0.9 0.005 90), oklch(0.32 0.006 90));
  --ink: light-dark(oklch(0.2 0.01 90), oklch(0.96 0.004 90));
  --body: light-dark(oklch(0.42 0.01 90), oklch(0.8 0.008 90));
  --muted: light-dark(oklch(0.5 0.01 90), oklch(0.7 0.008 90));
  --accent: light-dark(oklch(0.45 0.12 155), oklch(0.8 0.13 155));
  --accent-strong: light-dark(oklch(0.38 0.12 155), oklch(0.86 0.13 155));
  --shadow: light-dark(oklch(0.4 0.02 90 / 0.3), oklch(0 0 0 / 0.55));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root body { background: var(--bg); color: var(--ink); overflow-x: clip; }
:root h1, :root h2, :root h3 { text-wrap: balance; }
:root p { text-wrap: pretty; }
:root a:hover { text-decoration: underline; text-underline-offset: 3px; }
:root a:focus-visible, :root button:focus-visible, :root summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: oklch(0.82 0.14 90); color: oklch(0.2 0.01 90); }

/* Type scale: one size ramp instead of fixed 72/78px headlines */
:root h1, :root .hero.centered h1 { font-size: clamp(42px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.035em; }
:root .guide-hero h1 { font-size: clamp(38px, 4vw, 58px); }

/* Small labels: plain text, one colour. No mono capitals, no colour coding. */
:root .eyebrow, :root .eyebrow.green, :root .eyebrow.blue, :root .eyebrow.warm, :root .eyebrow.violet, :root .eyebrow.cyan, :root .crumb {
  font-family: "Hanken Grotesk", sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted);
}
:root .guide-card .eyebrow { font-size: 14px; }
:root .toc-title, :root th, :root .matrix th, :root .dl-table th, :root .direct .meta, :root .chip, :root .plugin-kind, :root .source-note, :root .note {
  font-family: "Hanken Grotesk", sans-serif; letter-spacing: 0; text-transform: none; font-size: 14px;
}
:root .hero-meta, :root .requirements, :root .copyright, :root .get-or, :root .get-dmg span { font-family: "Hanken Grotesk", sans-serif; letter-spacing: 0; font-size: 14px; }
:root .hero-meta i, :root .requirements i { display: none; }

/* Decorative colour chips are retired. The logo mark keeps its colours. */
:root .dot, :root .swatches { display: none; }
:root .check-list li::before { background: var(--accent); border-radius: 50%; width: 7px; height: 7px; top: 0.6em; }

/* Navigation and links inside it */
:root .nav { background: color-mix(in oklch, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); }
:root .nav a { white-space: nowrap; }
:root .nav a:hover, :root .footer a:hover, :root .toc a:hover, :root .brand:hover { text-decoration: none; }
:root .nav-links a:hover, :root .footer-links a:hover { color: var(--ink); }

/* Buttons */
:root .btn, :root .pill { transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease); white-space: nowrap; }
:root .btn:hover, :root .pill:hover { text-decoration: none; transform: translateY(-1px); }
:root .btn:active, :root .pill:active { transform: translateY(1px) scale(0.98); }
:root .btn { min-height: 52px; padding: 0 28px; font-size: 16px; }
:root .badges a, :root .store-badge { transition: transform 0.25s var(--ease); }
:root .badges a:hover, :root .store-badge:hover { transform: translateY(-1px); }

/* Heroes are left aligned, like the home */
:root .hero.centered, :root .hero.centered > div { align-items: flex-start; text-align: left; }
:root .hero.centered { padding-top: 72px; padding-bottom: 48px; }
:root .hero.centered .lede { margin-left: 0; margin-right: 0; }
:root .hero.centered .hero-actions, :root .hero.centered .hero-meta, :root .hero.centered .swatches, :root .hero.centered .badges.center, :root .hero.centered .get-ways { justify-content: flex-start; }
:root .hero { padding-top: 72px; text-align: left; }
:root .hero-copy { align-items: flex-start; text-align: left; }
:root .hero .hero-actions, :root .hero .hero-meta { justify-content: flex-start; }
:root .hero p { margin-left: 0; margin-right: 0; }
:root .guide-hero { padding-top: 64px; }

/* Panels: one radius, one border, the page colour scheme throughout (no dark sections) */
:root .mini-card, :root .mode, :root .guide-card, :root .toc, :root .feature-row, :root .sample-showcase figure, :root .dark-card, :root .download-card { border-radius: 20px; }
:root .dark-card, :root .download-card { border: 1px solid var(--line); }
:root .download-card { align-items: flex-start; text-align: left; padding: 56px; }
:root .download-card .get-ways, :root .download-card .badges.center { justify-content: flex-start; }
:root .download-card h2 { font-size: clamp(32px, 3.6vw, 50px); }
:root .download-card img, :root .dark-card img { box-shadow: 0 30px 60px -30px var(--shadow); }
:root .facts-grid div { border-radius: 16px; }
:root .media, :root .media-card img, :root .hero-media img, :root .hero-shot img, :root .mini-panel img { border-radius: 12px; }
:root .mini-card { transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
:root a.mini-card:hover { text-decoration: none; transform: translateY(-2px); }
:root .mini-card span { color: var(--accent); }
:root .toc a { transition: background 0.2s var(--ease), color 0.2s var(--ease); }

:root pre { border: 1px solid var(--line); }
:root .steps li::before { border-radius: 50%; font-family: "Space Grotesk", sans-serif; }

/* Pages written with inline styles instead of classes: the same decisions, matched on the style text */
:root [style*="text-transform: uppercase"] { font-family: "Hanken Grotesk", sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14.5px !important; font-weight: 600 !important; }
:root [style*="Space Mono"]:not(code):not(pre):not(kbd) { font-family: "Hanken Grotesk", sans-serif !important; letter-spacing: 0 !important; }
:root div:has(> [style*="width: 14px; height: 14px; border-radius: 4px"]) { display: none !important; }
:root [style*="width: 12px; height: 12px; border-radius: 4px"], :root span[style*="width: 4px; height: 4px"] { display: none !important; }
:root header[style*="text-align: center"] { align-items: flex-start !important; text-align: left !important; padding-top: 72px !important; padding-bottom: 48px !important; }
:root header[style*="text-align: center"] [style*="justify-content: center"] { justify-content: flex-start !important; }
:root h1[style*="font-size: 78px"], :root h1[style*="font-size: 72px"] { font-size: clamp(42px, 4.6vw, 68px) !important; line-height: 1 !important; letter-spacing: -0.035em !important; }
:root [style*="max-width: 1200px"] { }

/* Device frames. The Mac frame is added by build.py around the main screenshot of each Mac app page;
   the iPad frame replaces the drawn one where the capture has the iPad proportions. */
:root .rf-mac { position: relative; display: block; width: 100%; max-width: 1180px; margin: 0 auto; }
:root .rf-mac .rf-bezel { position: relative; z-index: 1; display: block; width: 100% !important; height: auto !important; border-radius: 0 !important; filter: none !important; box-shadow: none !important; pointer-events: none; }
:root .rf-mac .rf-screen { position: absolute; left: 10.08%; top: 3.14%; width: 79.88%; height: 85.73%; overflow: hidden; background: linear-gradient(140deg, oklch(0.86 0.04 250), oklch(0.74 0.07 290)); }
:root .rf-mac .rf-screen img { display: block; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; object-position: center top; border-radius: 0 !important; filter: none !important; box-shadow: none !important; }
:root .rf-mac .rf-screen.rf-window img { object-fit: contain; object-position: center; padding: 3% 2% 0; }
:root .device.ipad:has(img[width="2048"]) { background: url(img/bezel-ipad.webp) center / 100% 100% no-repeat; border-radius: 0; box-shadow: none; padding: 3.41% 3.3% 3.28% 3.41%; filter: drop-shadow(0 26px 34px var(--shadow)); }
:root .device.ipad:has(img[width="2048"]) img { border-radius: 1.6%; }

/* Palette captures: the picture fills its box edge to edge */
:root img.rf-shot { display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px !important; filter: none !important; box-shadow: none !important; }
:root :has(> img.rf-shot) { padding: 0 !important; min-height: 0 !important; overflow: hidden; background: none !important; border-radius: 12px; }

/* Palette section added by the redesign */
:root .rf-palettes { max-width: 1200px; margin: 0 auto; padding: 96px 32px 40px; }
:root .rf-palettes-head { display: flex; flex-direction: column; gap: 14px; max-width: 40em; margin-bottom: 40px; }
:root .rf-palettes-head h2 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -0.028em; margin: 0; color: var(--ink); }
:root .rf-palettes-head p { font-size: 19px; line-height: 1.55; color: var(--body); margin: 0; }
:root .rf-palettes-grid { align-items: start; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
:root .rf-palette { margin: 0; display: flex; flex-direction: column; gap: 16px; }
:root .rf-palette.wide { grid-column: 1 / -1; }
:root .rf-palette-shot { border-radius: 12px; overflow: hidden; background: var(--sunken); }
:root .rf-palette.wide .rf-palette-shot { aspect-ratio: auto; }
:root .rf-palette-shot img { display: block; width: 100%; height: auto; }
:root .rf-palette h3 { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink); }
:root .rf-palette p { font-size: 15.5px; line-height: 1.55; color: var(--body); margin: 0; max-width: 34em; }
@media (max-width: 960px) { :root .rf-palettes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root .rf-palettes { padding: 64px 24px 24px; } }
@media (max-width: 640px) { :root .rf-palettes-grid { grid-template-columns: 1fr; } }

/* Motion: a short entry for the top of the page */
@keyframes theme-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  :root .hero > *, :root .guide-hero > * { animation: theme-rise 0.7s var(--ease) both; }
  :root .hero > *:nth-child(2), :root .guide-hero > *:nth-child(2) { animation-delay: 80ms; }
  :root .hero > *:nth-child(3), :root .guide-hero > *:nth-child(3) { animation-delay: 160ms; }
  :root .hero > *:nth-child(n + 4), :root .guide-hero > *:nth-child(n + 4) { animation-delay: 240ms; }
}
@media (prefers-reduced-motion: reduce) {
  :root html { scroll-behavior: auto; }
  :root * { transition: none !important; animation: none !important; }
}

@media (max-width: 960px) {
  :root .download-card { padding: 36px 24px; }
}
@media (max-width: 640px) {
  :root h1, :root .hero.centered h1, :root .guide-hero h1 { font-size: 40px; }
  :root .hero, :root .hero.centered { padding-top: 40px; }
  :root .requirements, :root .hero-meta { justify-content: flex-start; }
}