/* newfilemac.com. One family (Avenir Next, on every Mac), the icon's blue, white paper. */
:root {
  --blue: #2F62D8;
  --blue-deep: #1E45A8;
  --fold: #BDD0F6;
  --mist: #F3F6FC;
  --ink: #172033;
  --ink-soft: #4A5570;
  --paper: #FFFFFF;
  --line: #DCE3F0;
  --button: #2F62D8;
  --button-hover: #1E45A8;
  --menu: rgba(255, 255, 255, 0.97);
  --menu-ink: #1D1D1F;
  --menu-sep: rgba(0, 0, 0, 0.1);
  --menu-shadow: 0 12px 32px rgba(23, 32, 51, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.14);
  --hover: #E4EBF9;
  --highlight: #2F62D8;
  --pill-ok: #146C2E;
  color-scheme: light dark;
}
/* Dark palette: the system setting unless the visitor chose otherwise in the Display popover */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue: #7FA6FF;
    --blue-deep: #A6C0FF;
    --fold: #2A3B66;
    --mist: #141C30;
    --ink: #E8EDF8;
    --ink-soft: #A9B4CC;
    --paper: #0F1626;
    --line: #26314D;
    --button: #2F62D8;
    --button-hover: #2653CB;
    --menu: rgba(40, 42, 50, 0.97);
    --menu-ink: #F2F2F5;
    --menu-sep: rgba(255, 255, 255, 0.14);
    --menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
    --hover: #26314D;
    --pill-ok: #7BE495;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --blue: #7FA6FF;
  --blue-deep: #A6C0FF;
  --fold: #2A3B66;
  --mist: #141C30;
  --ink: #E8EDF8;
  --ink-soft: #A9B4CC;
  --paper: #0F1626;
  --line: #26314D;
  --button: #2F62D8;
  --button-hover: #2653CB;
  --menu: rgba(40, 42, 50, 0.97);
  --menu-ink: #F2F2F5;
  --menu-sep: rgba(255, 255, 255, 0.14);
  --menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  --hover: #26314D;
  --pill-ok: #7BE495;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* Display options */
:root[data-text="large"] { font-size: 19.5px; }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
:root[data-contrast="high"] { --ink: #000000; --ink-soft: #1F2430; --line: #6B7280; --mist: #EEF2F9; --blue: #0B3FB8; --blue-deep: #062A80; --button: #0B3FB8; --button-hover: #062A80; }
@media (prefers-color-scheme: dark) { :root[data-contrast="high"]:not([data-theme="light"]) { --ink: #FFFFFF; --ink-soft: #E4E8F2; --line: #9AA3B8; --mist: #1B2438; --paper: #000000; --blue: #A9C3FF; --blue-deep: #CDDBFF; --button: #1F4BC4; --button-hover: #2653CB; } }
:root[data-contrast="high"][data-theme="dark"] { --ink: #FFFFFF; --ink-soft: #E4E8F2; --line: #9AA3B8; --mist: #1B2438; --paper: #000000; --blue: #A9C3FF; --blue-deep: #CDDBFF; --button: #1F4BC4; --button-hover: #2653CB; }
:root[data-contrast="high"] a:not(.button):not(.home) { text-decoration: underline; }
:root[data-contrast="high"] .button { border-width: 2px; }
:root[data-contrast="high"] .button.primary, :root[data-contrast="high"] .button.primary:hover { border-color: var(--blue); }

* { box-sizing: border-box; }
html {
  font-family: "Avenir Next", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; background: var(--paper); color: var(--ink); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
/* Links inside running text are underlined, so colour is not their only marker */
p a:not(.button), li a, .prose a, .faq-intro a { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); letter-spacing: -0.02em; line-height: 1.06; }
h2 { font-size: clamp(1.55rem, 3vw, 2rem); margin-bottom: 1.25rem; }
h3 { font-size: 1.1rem; margin-bottom: 0.25em; }
p { margin: 0 0 1em; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; background: var(--mist); padding: 0.1em 0.35em; border-radius: 4px; }
img { max-width: 100%; height: auto; }

/* Header and footer */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: 0.6rem 1rem; background: var(--button); color: #fff; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 1rem; }
.display { position: relative; }
html:not(.js) .display { display: none; }
.display summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink-soft); }
.display summary::-webkit-details-marker { display: none; }
.display summary svg { width: 18px; height: 18px; }
.display summary:hover, .display[open] summary { color: var(--ink); border-color: var(--ink-soft); background: var(--hover); }
.display summary:hover svg, .display[open] summary svg { transform: rotate(180deg); }
.top nav a:hover { color: var(--ink); text-decoration: none; }
.display-panel { position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 10; width: 15rem; padding: 0.9rem 1.1rem 1rem; margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--menu-shadow); font-size: 0.95rem; }
.display-panel fieldset { border: 0; margin: 0 0 0.6rem; padding: 0; }
.display-panel legend, .display-panel .group { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.display-panel label { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0; }
.display-panel input { accent-color: var(--button); width: 1rem; height: 1rem; margin: 0; }
.top { max-width: 68rem; margin: 0 auto; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.top .home { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); font-weight: 600; font-size: 1.15rem; white-space: nowrap; }
.top nav { display: flex; gap: 1.5rem; white-space: nowrap; margin-left: auto; }
.top nav a { color: var(--ink-soft); font-weight: 500; }
@media (max-width: 40rem) {
  .top { padding: 1rem 1.5rem; }
  .top nav a:nth-child(2) { display: none; }
  .top nav { gap: 0.5rem; }
  .top nav a { padding: 0.35rem 0.9rem; border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink); }
}
/* Phones: name and pills and the Display button need about 380 px side by side, so the pills get a
   row of their own under the name, at equal widths. A slimmer side margin keeps the text measure. */
@media (max-width: 30rem) {
  .top { padding-bottom: 0.5rem; flex-wrap: wrap; row-gap: 0.75rem; }
  .top nav { order: 1; flex: 1 0 100%; margin-left: 0; }
  .top nav a { flex: 1; text-align: center; padding: 0.45rem 0.75rem; }
  .top, main, footer { padding-left: 1.25rem; padding-right: 1.25rem; }
}
main { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
main > section { padding: 3.5rem 0; }
main > section + section { border-top: 1px solid var(--line); }
footer { max-width: 68rem; margin: 2rem auto 0; padding: 2rem 1.5rem 3rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.95rem; }
footer p { max-width: 60ch; }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
/* A button that sits among the footer links and reads like one of them (Analytics choice). */
button.link { font: inherit; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
html:not(.js) button.link, html:not(.js) footer li:has(> button.link) { display: none; }

/* Hero */
.hero { display: grid; gap: 3rem; align-items: center; padding-top: 2.5rem; }
@media (min-width: 60rem) { .hero { grid-template-columns: 1.05fr 1fr; padding-top: 3.5rem; } }
.app-icon { display: block; margin-bottom: 1.5rem; filter: drop-shadow(0 6px 14px rgba(23, 32, 51, 0.18)); }
.lead { font-size: 1.25rem; max-width: 34ch; color: var(--ink-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 1rem; }
.button { display: inline-block; padding: 0.7rem 1.25rem; border-radius: 10px; font-weight: 600; border: 1.5px solid var(--button); color: var(--blue); }
.button:hover { text-decoration: none; border-color: var(--button-hover); color: var(--blue-deep); }
.button.primary { background: var(--button); color: #fff; }
.button.primary:hover { background: var(--button-hover); border-color: var(--button-hover); color: #fff; }
.fine { color: var(--ink-soft); font-size: 0.95rem; }

/* The drawn Finder menu: metrics of the real one (13 px text, 24 px rows, 16 px symbols) */
.hero-art { min-width: 0; }
.finder { position: relative; height: 424px; background: var(--mist); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.finder-bar { position: absolute; top: 14px; left: 16px; display: flex; gap: 8px; }
.finder-bar span { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.finder-bar span:nth-child(2) { background: #FEBC2E; }
.finder-bar span:nth-child(3) { background: #28C840; }
.pointer { position: absolute; left: 178px; top: 268px; z-index: 3; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35)); }
.menu { position: absolute; z-index: 2; width: 200px; padding: 5px; background: var(--menu); color: var(--menu-ink); border-radius: 8px; box-shadow: var(--menu-shadow); font-size: 13px; line-height: 18px; backdrop-filter: blur(24px); }
.menu.main { left: 40px; top: 44px; }
.menu.sub { left: 234px; top: 258px; width: 164px; }
.menu .item { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px 0 8px; border-radius: 5px; white-space: nowrap; }
.menu .item span { flex: 1; }
.menu .item .ic { flex: none; }
.menu .item.on { background: var(--highlight); color: #fff; }
.menu .ic { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.menu .item.on .ic { opacity: 1; }
.menu .chev { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }
.menu .item.on .chev { opacity: 1; }
.menu .sep { height: 1px; margin: 5px 8px; background: var(--menu-sep); }
@media (max-width: 30rem) {
  .finder { height: 408px; }
  .pointer { left: 138px; top: 258px; }
  .menu { font-size: 12.5px; width: 178px; }
  .menu .item { height: 23px; }
  .menu.main { left: 16px; top: 44px; }
  .menu.sub { left: 188px; top: 250px; width: 148px; }
}
@media (max-width: 24rem) {
  /* Below 384 px the box gets narrower than main menu plus submenu (336 px): draw the menus and
     pointer at 74%, which fits them in the box of a 320 px phone (about 250-270 px). */
  .finder .menu, .finder .pointer { zoom: 0.74; }
}

/* What it does: a tile per point in the app icon's own shape */
.features .grid { display: grid; gap: 2rem 3rem; }
@media (min-width: 48rem) { .features .grid { grid-template-columns: 1fr 1fr; } .features .feature:last-child:nth-child(odd) { grid-column: 1 / -1; } .features .feature:last-child:nth-child(odd) p { max-width: 60ch; } }
.feature { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.1rem; align-items: start; }
.feature .tile { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.65rem; background: var(--button); color: #fff; }
.feature .tile svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.features h3 { margin-top: 0.2rem; }
.features p { color: var(--ink-soft); max-width: 46ch; margin: 0; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 0.4em; margin-right: 0.2em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 0.35em; background: var(--mist); color: var(--ink); font-family: inherit; font-size: 0.9em; line-height: 1.6; text-align: center; }
kbd + kbd { margin-left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.demo figure { margin: 0; }
.demo figcaption { margin-top: 0.75rem; color: var(--ink-soft); font-size: 0.95rem; text-align: center; }

/* Recording */
.demo { padding: 0 0 3.5rem !important; border-top: 0 !important; }
.demo video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 14px; border: 1px solid var(--line); background: var(--mist); }

/* Setup: steps beside a picture of the app's Setup window */
.setup { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) { .setup { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.setup-art img { display: block; border-radius: 12px; border: 1px solid var(--line); }
.win { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--menu-shadow); font-size: 13px; overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--mist); border-bottom: 1px solid var(--line); }
.win-bar span { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.win-bar span:nth-child(2) { background: #FEBC2E; }
.win-bar span:nth-child(3) { background: #28C840; }
.win-bar b { flex: 1; text-align: center; font-weight: 600; margin-right: 52px; color: var(--ink-soft); }
.tabs { display: flex; justify-content: center; gap: 2px; padding: 10px 14px 4px; }
.tabs span { padding: 3px 10px; border-radius: 6px; color: var(--ink-soft); }
.tabs .on { background: var(--mist); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.win .row { display: flex; align-items: center; gap: 12px; margin: 10px 14px 0; padding: 10px 12px; border-radius: 8px; background: var(--mist); }
.win .row:last-child { margin-bottom: 14px; }
.win .row svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #28A745; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.win .row b { display: block; font-weight: 600; }
.win .row small { display: block; color: var(--ink-soft); font-size: 12px; }
.win .row div { flex: 1; min-width: 0; }
.win .row em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--pill-ok); background: rgba(40, 200, 64, 0.14); padding: 2px 8px; border-radius: 999px; }
.win .row.muted svg { stroke: var(--ink-soft); }
.win .row.muted em { color: var(--ink-soft); background: var(--line); }
.setup > * { min-width: 0; }
/* The four tabs need about 310 px at full padding; tighten them on the narrowest phones. */
@media (max-width: 24rem) { .tabs { padding: 10px 8px 4px; } .tabs span { padding: 3px 6px; } }
.setup ol { margin: 0 0 1rem; padding-left: 1.4rem; max-width: 60ch; }
.setup li { margin-bottom: 0.6em; padding-left: 0.3rem; }
.setup li::marker { color: var(--blue); font-weight: 600; }

/* Questions: intro beside the list; native disclosures, one open at a time where the browser supports name= */
.faq { display: grid; gap: 1rem 4rem; align-items: start; }
@media (min-width: 60rem) { .faq { grid-template-columns: 1fr 2fr; } .faq-intro { position: sticky; top: 2rem; } }
.faq-intro p { color: var(--ink-soft); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 0.95rem 2.25rem 0.95rem 0; font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: translateY(-70%) rotate(45deg); }
.faq details[open]:not(.closing) summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding-bottom: 1.1rem; }
.faq details p { color: var(--ink-soft); margin: 0 0 0.75em; }
.faq details p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) { .faq summary::after { transition: transform 280ms cubic-bezier(0.2, 0, 0, 1); } }

/* Legal pages and the 404 */
.prose { max-width: 62ch; padding-top: 1.5rem; }
.prose h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.prose .note { color: var(--ink-soft); font-style: italic; }
.prose p { margin-bottom: 1.1em; }
.prose ul { padding-left: 1.25rem; margin: 0 0 1.25em; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--blue); }
.changelog h2 { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 1.5rem; }
.changelog h2 + .note { margin-top: -0.35rem; }
.changelog h3 { font-size: 1rem; color: var(--ink-soft); margin: 1.25rem 0 0.5rem; }

@media (prefers-reduced-motion: no-preference) {
  .button, .display summary, .top nav a { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
  .display summary svg { transition: transform 320ms cubic-bezier(0.2, 0, 0, 1); }
}

/* Consent card for recordings (only shown when Umami is configured in site/config.json) */
.consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 30; max-width: 26rem; padding: 1.1rem 1.25rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--menu-shadow); font-size: 0.95rem; }
.consent p { margin: 0 0 0.9rem; }
.consent div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consent .button { padding: 0.5rem 0.9rem; font-size: 0.95rem; font-family: inherit; cursor: pointer; background: none; }
.consent .button { flex: 1 1 auto; text-align: center; }

/* One load sequence in the hero: the copy is there at once, the window appears, the menu opens, the pointer
   moves to New File and the submenu follows. Nothing else on the page moves on its own. */
.finder { --pointer-from: -132px, -220px; }
@media (max-width: 30rem) { .finder { --pointer-from: -124px, -216px; } }
/* Only when script has marked the document (html.anim): without it everything is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .anim:not([data-motion="reduce"]) .finder { animation: rise 0.45s ease both; }
  .anim:not([data-motion="reduce"]) .menu.main { animation: pop 0.16s ease-out 0.7s both; transform-origin: top left; }
  .anim:not([data-motion="reduce"]) .pointer { animation: move 0.6s cubic-bezier(0.35, 0, 0.2, 1) 1s both; }
  .anim:not([data-motion="reduce"]) .item.on { animation: highlight 0.12s ease 1.55s both; }
  .anim:not([data-motion="reduce"]) .menu.sub { animation: pop 0.16s ease-out 1.7s both; transform-origin: top left; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes move { from { transform: translate(var(--pointer-from)); } to { transform: none; } }
@keyframes highlight { from { background: transparent; color: var(--menu-ink); } to { background: var(--highlight); color: #fff; } }

/* The Setup window plays once when it scrolls into view: checks draw in, pills turn green, row by row.
   Paused until script adds .play; without script (no .anim) or under reduced motion it is simply done. */
@media (prefers-reduced-motion: no-preference) {
  .anim:not([data-motion="reduce"]) .win .row svg path { stroke-dasharray: 14; animation: draw 0.45s cubic-bezier(0.2, 0, 0, 1) both paused; }
  .anim:not([data-motion="reduce"]) .win .row svg { animation: ok 0.3s ease both paused; }
  .anim:not([data-motion="reduce"]) .win .row em { animation: pill 0.3s ease both paused; }
  .anim:not([data-motion="reduce"]) .win .row:nth-child(3) svg path { animation-delay: 0.2s; }
  .anim:not([data-motion="reduce"]) .win .row:nth-child(3) svg { animation-delay: 0.35s; }
  .anim:not([data-motion="reduce"]) .win .row:nth-child(3) em { animation-delay: 0.5s; }
  .anim:not([data-motion="reduce"]) .win .row:nth-child(4) svg path { animation-delay: 0.9s; }
  .anim:not([data-motion="reduce"]) .win .row:nth-child(4) svg { animation-delay: 1.05s; }
  .anim:not([data-motion="reduce"]) .win .row:nth-child(4) em { animation-delay: 1.2s; }
  .anim:not([data-motion="reduce"]) .win .row:nth-child(5) svg path { animation-delay: 1.6s; }
  .anim:not([data-motion="reduce"]) .win .row.muted svg, .anim:not([data-motion="reduce"]) .win .row.muted em { animation: none; }
  .anim:not([data-motion="reduce"]) .win.play .row svg path, .anim:not([data-motion="reduce"]) .win.play .row svg, .anim:not([data-motion="reduce"]) .win.play .row em { animation-play-state: running; }
}
@keyframes draw { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }
@keyframes ok { from { stroke: var(--ink-soft); } to { stroke: #28A745; } }
@keyframes pill { from { color: var(--ink-soft); background: var(--line); } to { color: var(--pill-ok); background: rgba(40, 200, 64, 0.14); } }