/* The one footer every page on prept.fyi ends on, and the theme switch in it.
   Pages read one of two token sets (tokens.css on the home and product pages,
   styles.css everywhere else); the private --pf- names below pick whichever
   is present, so this file works on both without knowing which. */

.pf {
  --pf-ink: var(--ink);
  --pf-muted: var(--ink-3, var(--muted-light));
  --pf-line: var(--line-soft, var(--line));
  --pf-accent: var(--accent, var(--primary));
  --pf-raised: var(--surface);
  --pf-sunken: var(--sunken, var(--bg-elev));
  border-top: 1px solid var(--pf-line);
  padding-block: 56px 28px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pf-muted);
}
.pf-wrap {
  width: min(var(--container-max, 1120px), 100%);
  margin-inline: auto;
  padding-inline: 16px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 40rem) { .pf-wrap { padding-inline: 24px; } }

.pf-top { display: grid; gap: 32px; }
@media (min-width: 56rem) { .pf-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); gap: 48px; } }

.pf-brand { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pf-brand .brand { font-size: 20px; color: var(--pf-ink); text-decoration: none; }
.pf-brand p { margin: 0; max-width: 26ch; }
.pf-brand a.pf-mail { color: var(--pf-muted); text-decoration: underline; text-underline-offset: 3px; }

.pf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
@media (min-width: 40rem) { .pf-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pf-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf-col .pf-h {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pf-ink);
}
.pf-col a { color: var(--pf-muted); text-decoration: none; transition: color .15s ease; }
.pf-col a:hover { color: var(--pf-ink); }

.pf-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--pf-line);
  font-size: 13px;
}
.pf-bottom p { margin: 0; }

.pf a:focus-visible, .theme-switch button:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 2px; border-radius: 2px; }

/* System, Light, Dark. System follows the device; the other two are saved in
   this browser and set data-theme on <html>, which both token sets honour. */
.theme-switch { display: inline-flex; align-items: center; gap: 10px; }
.theme-switch .pf-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.theme-switch .seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--pf-sunken); border: 1px solid var(--pf-line); border-radius: 4px; }
.theme-switch button {
  font: inherit;
  font-size: 13px;
  padding: 4px 10px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--pf-muted);
  cursor: pointer;
}
.theme-switch button:hover { color: var(--pf-ink); }
.theme-switch button[aria-pressed="true"] { background: var(--pf-raised); color: var(--pf-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

@media print { .pf { display: none !important; } }