/* Friendly-SaaS theme — cards, animated accordion, styled popover & dialog.
   Inert until #css-toggle is checked. */
@layer reset, tokens, base, components;

@layer reset {
  :root:has(#css-toggle:checked) {
    & *, & *::before, & *::after { box-sizing: border-box; margin: 0; }
    & input, & button { font: inherit; }
  }
}

@layer tokens {
  :root:has(#css-toggle:checked) {
    color-scheme: light dark;
    --hue: 210;
    --brand: oklch(58% 0.16 var(--hue));
    --surface: light-dark(oklch(98.5% 0.006 var(--hue)), oklch(17% 0.02 var(--hue)));
    --surface-raised: light-dark(oklch(100% 0 0), oklch(22% 0.025 var(--hue)));
    --text: light-dark(oklch(24% 0.025 var(--hue)), oklch(93% 0.01 var(--hue)));
    --muted: color-mix(in oklch, var(--text) 60%, var(--surface));
    --rule: color-mix(in oklch, var(--text) 13%, var(--surface));
    --space: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
    --radius: 14px;
    --shadow: 0 1px 2px oklch(20% 0.04 var(--hue) / 0.07),
              0 10px 30px oklch(20% 0.04 var(--hue) / 0.12);
  }
}

@layer base {
  :root:has(#css-toggle:checked) {
    background: var(--surface);
    accent-color: var(--brand);

    & body {
      color: var(--text);
      font-family: system-ui, sans-serif;
      font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.1rem);
      line-height: 1.55;
      max-inline-size: 46rem;
      margin-inline: auto;
      padding: var(--space);
    }
    & a { color: var(--brand); }
    & :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    & body > a[href="#main"] {
      position: absolute; inset-block-start: -100vb;
      &:focus-visible { inset: var(--space) auto auto var(--space);
        background: var(--surface-raised); padding: 0.5rem 1rem;
        border-radius: var(--radius); box-shadow: var(--shadow); }
    }
  }
}

@layer components {
  :root:has(#css-toggle:checked) {
    & body > header {
      display: grid; gap: 0.8rem;
      padding-block-end: var(--space);
      margin-block-end: var(--space);
      & > p:first-child { font-weight: 800; color: var(--brand); }
      & nav ul { display: flex; gap: 1rem; list-style: none; padding: 0; }
      & label[for="css-toggle"] { color: var(--muted); font-size: 0.85em; }
    }

    & article > header h1 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem);
      text-wrap: balance; }
    & article > header p { color: var(--muted); text-wrap: pretty; }

    /* Search card — demonstration of the search landmark */
    & search {
      background: var(--surface-raised);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      padding: var(--space);
      box-shadow: var(--shadow);
      display: grid; gap: 0.6rem;
      margin-block: var(--space);
      & > p { color: var(--muted); font-size: 0.92em; text-wrap: pretty; }
      & form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
      & label { flex-basis: 100%; font-weight: 600; font-size: 0.9em; }
      & input {
        flex: 1; min-inline-size: 12rem;
        border: 1.5px solid var(--rule); border-radius: 999px;
        padding: 0.55em 1.1em; background: var(--surface);
        &:focus-visible { border-color: var(--brand); outline-offset: 0; }
      }
      & button {
        border: none; border-radius: 999px; padding: 0.55em 1.3em;
        background: var(--brand); color: oklch(99% 0.01 var(--hue));
        font-weight: 700; cursor: pointer;
        &:hover { background: oklch(from var(--brand) calc(l - 0.07) c h); }
      }
    }

    /* Maintenance dialog as a banner card */
    & dialog[open] {
      position: static; inline-size: 100%;
      border: 1.5px solid color-mix(in oklch, var(--brand) 45%, var(--rule));
      border-inline-start: 5px solid var(--brand);
      border-radius: var(--radius);
      background: var(--surface-raised); color: var(--text);
      padding: var(--space);
      margin-block: var(--space);
      box-shadow: var(--shadow);
      & form { margin-block-start: 0.8em; }
    }

    & section { margin-block: calc(var(--space) * 1.6); }
    & h2 { font-size: 1.25rem; margin-block-end: 0.5em; }
    & mark {
      background: color-mix(in oklch, oklch(85% 0.17 95) 55%, var(--surface));
      padding: 0.05em 0.25em; border-radius: 4px;
    }

    /* Accordion cards */
    & details {
      background: var(--surface-raised);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      margin-block: 0.6em;
      overflow: clip;
      &[open] { box-shadow: var(--shadow); }
    }
    & summary {
      padding: 0.9em var(--space);
      font-weight: 700; cursor: pointer;
      list-style: none;
      display: flex; align-items: center; gap: 0.6em;
      &::before { content: "+"; color: var(--brand); font-size: 1.3em;
        line-height: 1; transition: rotate 200ms ease-out; }
      &:hover { background: color-mix(in oklch, var(--brand) 6%, var(--surface-raised)); }
    }
    & details[open] summary::before { rotate: 45deg; }
    & details > *:not(summary) { padding-inline: var(--space); }
    & details > p:last-child { padding-block-end: var(--space); }
    @supports selector(::details-content) {
      & ::details-content {
        opacity: 0; translate: 0 -0.3rem;
        transition: opacity 220ms ease-out, translate 220ms ease-out,
                    content-visibility 220ms allow-discrete;
      }
      & details[open]::details-content { opacity: 1; translate: 0 0; }
    }

    /* Inline popover trigger looks like a link-button */
    & button[popovertarget] {
      border: none; background: none; padding: 0;
      color: var(--brand); text-decoration: underline dotted;
      text-underline-offset: 0.2em; cursor: pointer; font-weight: 600;
    }
    & [popover] {
      inline-size: min(28rem, 90vi);
      border: 1px solid var(--rule); border-radius: var(--radius);
      background: var(--surface-raised); color: var(--text);
      padding: var(--space);
      box-shadow: var(--shadow);
      margin: auto;
      opacity: 0; translate: 0 0.5rem;
      transition: opacity 200ms ease-out, translate 200ms ease-out,
                  display 200ms allow-discrete, overlay 200ms allow-discrete;
      &:popover-open {
        opacity: 1; translate: 0 0;
        @starting-style { opacity: 0; translate: 0 0.5rem; }
      }
      &::backdrop { background: oklch(15% 0.02 var(--hue) / 0.35);
        backdrop-filter: blur(3px); }
      & dfn { color: var(--brand); font-style: normal; font-weight: 700; }
    }
    & kbd {
      background: var(--surface); border: 1px solid var(--rule);
      border-block-end-width: 2.5px; border-radius: 6px;
      padding: 0.05em 0.45em; font-size: 0.85em;
      font-family: ui-monospace, monospace;
    }

    & address { font-style: normal; font-weight: 600; }
    & body > footer {
      margin-block-start: calc(var(--space) * 2);
      border-block-start: 1px solid var(--rule);
      padding-block-start: var(--space);
      color: var(--muted); font-size: 0.9em;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}