/* Zaiphr apps shell: shared by play.zaiphr.ai and tools.zaiphr.ai. Hover styles sit in
   @media (hover: hover) so a tap on a phone never leaves a control looking pressed. Fonts, the
   cascade layers, reset and base, the top bar (Zaiphr logo + site tag), footer,
   buttons, switches, the segmented control and prose. Each site adds its own
   sheet after this one (play.css, tools.css) in the same layers. Values come
   from the vendored tokens; motion is transform and opacity. */

@font-face { font-family: 'Jost'; font-weight: 400; font-style: normal; font-display: swap; src: url(/css/fonts/Jost-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-style: normal; font-display: swap; src: url(/css/fonts/Jost-Medium.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-style: normal; font-display: swap; src: url(/css/fonts/Jost-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 700; font-style: normal; font-display: swap; src: url(/css/fonts/Jost-Bold.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url(/css/fonts/JetBrainsMono-latin.woff2) format('woff2'); }

@layer reset, base, layout, components, stage, utilities;

:root { --topbar-h: 61px; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ol, ul, figure, fieldset { margin: 0; }
  ol, ul[role='list'] { padding: 0; list-style: none; }
  fieldset { border: 0; padding: 0; min-width: 0; }
  svg, img { display: block; }
  button, input, textarea { font: inherit; color: inherit; }
}

@layer base {
  html { background: var(--z-night); }
  body {
    background: var(--z-night); color: var(--z-fg);
    font-family: var(--z-font-ui); font-size: 15px; line-height: 1.5;
    min-height: 100vh; display: flex; flex-direction: column;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .kicker, .btn, .tab, .tool, .brand-tag { font-family: var(--z-font-display); }
  a { color: var(--z-accent-text); text-underline-offset: 0.18em; }
  :focus-visible { outline: 2px solid var(--z-accent-text); outline-offset: 3px; }
  ::selection { background: var(--z-accent-soft); }
  * { scrollbar-width: thin; scrollbar-color: var(--z-border-control) transparent; }
}

@layer layout {
  /* top bar: the Zaiphr logo, a Play tag, the page title and its actions */
  .topbar {
    position: sticky; top: 0; z-index: 40; min-height: 60px;
    display: flex; align-items: center; gap: 14px; padding: 10px 20px;
    background: var(--z-night); border-bottom: 1px solid var(--z-border);
  }
  .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .credit-link { margin-left: auto; }
  .topbar-actions ~ .credit-link { margin-left: 6px; }

  .site-foot { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 24px 36px; color: var(--z-fg-muted); font-size: 13px; display: grid; gap: 6px; border-top: 1px solid var(--z-border); }
  .app-body .site-foot { max-width: none; padding-inline: 20px; }
  .home, .prose { width: 100%; max-width: 1240px; margin: 0 auto; padding: 56px 24px 72px; flex: 1; }
  .prose { max-width: 760px; }

  @media (max-width: 760px) {
    .topbar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; position: static; }
    .topbar-title::before { display: none; }
    .topbar-actions { order: 3; width: 100%; margin-left: 0; }
    .topbar-actions .segmented { margin-left: auto; }
    .credit-link { display: none; }
    .home, .prose { padding: 36px 16px 56px; }
  }
}

@layer components {
  .skip-link { position: absolute; left: 16px; top: -100px; background: var(--z-surface-1); color: var(--z-fg); padding: 10px 14px; border-radius: var(--z-radius-sm); z-index: 200; }
  .skip-link:focus { top: 12px; }

  /* lockup */
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; border-radius: 8px; }
  .brand-logo { height: 24px; width: auto; }
  .brand-tag { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: var(--z-track-label); text-transform: uppercase; color: var(--z-fg); padding: 5px 7px 4px; border: 1px solid var(--z-border-strong); border-radius: 6px; transition: border-color var(--z-dur-std) ease; }
  @media (hover: hover) { .brand:hover .brand-tag { border-color: var(--z-fg-muted); } }
  .topbar-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .topbar-title::before { content: ''; width: 1px; height: 22px; background: var(--z-border-strong); }
  .topbar-title h1 { font-size: 15px; font-weight: 500; color: var(--z-fg-muted); white-space: nowrap; }
  .credit-link { display: inline-flex; align-items: center; gap: 4px; color: var(--z-fg-muted); font-size: 13px; text-decoration: none; white-space: nowrap; padding: 6px 8px; border-radius: 8px; transition: color var(--z-dur-micro) ease, background-color var(--z-dur-micro) ease; }
  @media (hover: hover) { .credit-link:hover { color: var(--z-fg); background: var(--z-surface-1); } }
  @media (max-width: 1180px) { .app-body .credit-link { display: none; } }
  .foot-brand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .foot-brand img { width: 20px; height: auto; }
  .site-foot a { color: var(--z-fg-muted); }
  @media (hover: hover) { .site-foot a:hover { color: var(--z-fg); } }

  .icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .icon-sm { width: 15px; height: 15px; }
  .icon-lg { width: 30px; height: 30px; stroke-width: 1.3; }

  /* buttons: press feedback, never a shadow (§6) */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 14px; border-radius: var(--z-radius-md);
    border: 1px solid var(--z-border-control); background: transparent; color: var(--z-fg);
    font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none; text-decoration: none;
    transition: background-color var(--z-dur-micro) ease, border-color var(--z-dur-micro) ease, color var(--z-dur-micro) ease, transform var(--z-dur-micro) ease;
  }
  @media (hover: hover) { .btn:hover { background: var(--z-surface-1); } }
  .btn:active:not(:disabled):not([aria-disabled='true']) { transform: scale(0.97); }
  .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
  .btn-quiet { border-color: var(--z-border-strong); }
  .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
  .btn-lg { height: 50px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
  .btn[aria-pressed='true'] { background: var(--z-surface-2); border-color: var(--z-fg-muted); }
  .btn-primary { background: var(--z-accent); border-color: transparent; color: var(--z-on-accent); font-weight: 600; }
  .btn-primary:active { background: var(--z-accent-deep); }
  @media (hover: hover) { .btn-primary:hover { background: var(--z-accent-deep); } }
  .btn-primary .icon { transition: transform var(--z-dur-std) var(--z-spring); }
  @media (hover: hover) { .btn-primary:hover .icon { transform: translateX(3px); } }
  .icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--z-radius-md); border: 1px solid var(--z-border-strong); background: transparent; color: var(--z-fg-muted); cursor: pointer; transition: background-color var(--z-dur-micro) ease, color var(--z-dur-micro) ease, transform var(--z-dur-micro) ease; }
  @media (hover: hover) { .icon-btn:hover { background: var(--z-surface-1); color: var(--z-fg); } }
  .icon-btn:active { transform: scale(0.94); }
  .icon-btn[aria-expanded='true'] { color: var(--z-fg); background: var(--z-surface-1); }

  /* segmented control: two radios and a sliding thumb */
  .segmented { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--z-radius-md); background: var(--z-ground); border: 1px solid var(--z-border-strong); }
  .segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .segmented label { position: relative; z-index: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 12px; font-family: var(--z-font-display); font-size: 13px; font-weight: 500; color: var(--z-fg-muted); cursor: pointer; border-radius: 7px; transition: color var(--z-dur-micro) ease; }
  @media (hover: hover) { .segmented label:hover { color: var(--z-fg); } }
  .segmented input:checked + label { color: var(--z-fg); }
  .segmented input:focus-visible + label { outline: 2px solid var(--z-accent-text); outline-offset: 1px; }
  .segmented-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 7px; background: var(--z-surface-2); border: 1px solid var(--z-border-strong); transition: transform var(--z-dur-std) var(--z-spring); }
  #theme-dark:checked ~ .segmented-thumb { transform: translateX(100%); }

  /* switch: a checkbox with role=switch; the real input covers the row */
  .switch { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 14px; cursor: pointer; }
  .switch + .switch { border-top: 1px solid var(--z-border); }
  .switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .switch-track { position: relative; flex: none; width: 38px; height: 22px; border-radius: var(--z-radius-pill); background: var(--z-surface-2); border: 1px solid var(--z-border-control); transition: background-color var(--z-dur-std) ease, border-color var(--z-dur-std) ease; }
  .switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--z-fg-muted); transition: transform var(--z-dur-std) var(--z-spring), background-color var(--z-dur-std) ease; }
  @media (hover: hover) { .switch:hover .switch-track { border-color: var(--z-fg-subtle); } }
  .switch input:checked + .switch-track { background: var(--z-fg); border-color: var(--z-fg); }
  .switch input:checked + .switch-track::after { transform: translateX(16px); background: var(--z-night); }
  .switch input:focus-visible + .switch-track { outline: 2px solid var(--z-accent-text); outline-offset: 3px; }
  .switch .opt { display: block; margin: 1px 0 0; }

  /* prose (privacy) */
  .prose h1 { margin-top: 12px; font-size: clamp(30px, 4vw, 42px); font-weight: 600; line-height: 1.1; }
  .prose h2 { font-size: 20px; font-weight: 600; margin-top: 32px; }
  .prose p { color: var(--z-fg-muted); margin-top: 10px; max-width: 68ch; }
}

@layer utilities {
  [hidden] { display: none !important; }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}