/* Changed from the Prism original: the Google Fonts @import is removed. This site serves both faces itself, from css/fonts.css. */

/* Prism components. Colours, steps and radii come from tokens.css.
   Type style values are repeated here: type styles have no custom properties. */

/* Button */
.prism-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--ink);
  border-radius: var(--radius-0);
  background: var(--ink);
  color: var(--ground);
  font: 500 12px/16px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow .12s ease-out, text-shadow .12s ease-out, background-color .12s ease-out;
}
/* Refraction: white light splits on hover. Red left, blue right, fading out in steps. */
.prism-button:hover {
  box-shadow:
    -2px 0 0 var(--spectrum-red),
    -4px 0 0 color-mix(in srgb, var(--spectrum-red) 45%, transparent),
    -6px 0 0 color-mix(in srgb, var(--spectrum-red) 18%, transparent),
    2px 0 0 var(--spectrum-blue),
    4px 0 0 color-mix(in srgb, var(--spectrum-blue) 45%, transparent),
    6px 0 0 color-mix(in srgb, var(--spectrum-blue) 18%, transparent);
}
.prism-button:active { box-shadow: -2px 0 0 var(--spectrum-red), 2px 0 0 var(--spectrum-blue); }

.prism-button--small { min-height: 32px; padding: 0 var(--space-3); }
.prism-button--icon { width: 40px; padding: 0; }
.prism-button--small.prism-button--icon { width: 32px; }
.prism-button svg { width: 16px; height: 16px; flex: none; }

.prism-button--secondary { background: transparent; color: var(--ink); }
.prism-button--quiet { border-color: transparent; background: transparent; color: var(--ink); }
/* Outline and text split by 1px only, with no faded steps: on a line they read as smudge. */
.prism-button--secondary:hover, .prism-button--quiet:hover { text-shadow: -1px 0 0 var(--spectrum-red), 1px 0 0 var(--spectrum-blue); }
.prism-button--secondary:hover, .prism-button--secondary:active { box-shadow: -1px 0 0 var(--spectrum-red), 1px 0 0 var(--spectrum-blue); }
.prism-button--quiet:hover, .prism-button--quiet:active { box-shadow: none; }
.prism-button--secondary:active, .prism-button--quiet:active { background: var(--surface); }

.prism-button:focus-visible { outline: 2px solid var(--prism); outline-offset: 2px; box-shadow: none; }
.prism-button:disabled, .prism-button[aria-disabled="true"] { opacity: .4; box-shadow: none; text-shadow: none; pointer-events: none; }

/* Nav */
.prism-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--space-8);
  padding: 0 var(--space-8);
  border-bottom: 1px solid var(--hairline);
  background: var(--ground);
}
.prism-nav__brand {
  display: flex;
  align-items: center;
  min-height: 64px;
  color: var(--ink);
  font: 600 18px/1 var(--font-sans);
  letter-spacing: -.01em;
  text-decoration: none;
}
.prism-nav__links {
  display: flex;
  flex: 1;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}
.prism-nav__links a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 64px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: 500 12px/16px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .12s ease-out;
}
.prism-nav__links a:hover { color: var(--ink); }
.prism-nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.prism-nav__brand:focus-visible { outline: 2px solid var(--prism); outline-offset: 2px; }
.prism-nav__links a:focus-visible { outline: 2px solid var(--prism); outline-offset: -2px; } /* inset: the list clips overflow */
.prism-nav__actions { display: flex; gap: var(--space-2); margin-left: auto; }

.prism-nav__toggle { display: none; }

/* Narrow: links drop to their own row and scroll sideways.
   With a Menu button (.prism-nav__toggle) they hide instead, and open as a list. */
@media (max-width: 720px) {
  .prism-nav { padding: 0 var(--space-4); }
  .prism-nav__links { order: 3; flex-basis: 100%; gap: var(--space-4); border-top: 1px solid var(--hairline); }
  .prism-nav__links a { height: 48px; }
  .prism-nav__toggle { display: inline-flex; }
  .prism-nav:has(.prism-nav__toggle) .prism-nav__links { display: none; }
  .prism-nav[data-open]:has(.prism-nav__toggle) .prism-nav__links { display: flex; flex-direction: column; gap: 0; overflow: visible; }
}

/* Link */
.prism-link { color: var(--prism); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prism-link:hover { color: var(--ink); }
.prism-link:focus-visible { outline: 2px solid var(--prism); outline-offset: 2px; }

/* Input */
.prism-input { display: grid; gap: var(--space-2); }
.prism-input__label {
  color: var(--muted);
  font: 500 12px/16px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.prism-input input, .prism-input textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--muted);
  border-radius: var(--radius-0);
  background: transparent;
  color: var(--ink);
  font: 400 16px/24px var(--font-sans);
  transition: border-color .12s ease-out;
}
.prism-input textarea { min-height: 96px; padding-block: var(--space-2); resize: vertical; }
.prism-input ::placeholder { color: var(--muted); opacity: 1; }
.prism-input input:hover, .prism-input textarea:hover { border-color: var(--ink); }
.prism-input input:focus-visible, .prism-input textarea:focus-visible { border-color: var(--ink); outline: 2px solid var(--prism); outline-offset: 2px; }
.prism-input input:disabled, .prism-input textarea:disabled { opacity: .4; }
.prism-input__hint { color: var(--muted); font: 400 13px/18px var(--font-sans); }
.prism-input [aria-invalid="true"] { border-color: var(--danger); }
.prism-input:has([aria-invalid="true"]) .prism-input__hint { color: var(--danger); }

/* Card */
.prism-card {
  display: block;
  box-sizing: border-box;
  padding: var(--space-8);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-0);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
.prism-card__eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font: 500 12px/16px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.prism-card__title { margin: 0 0 var(--space-2); font: 600 28px/1.15 var(--font-sans); letter-spacing: -.01em; }
.prism-card__body { margin: 0; color: var(--muted); font: 400 16px/24px var(--font-sans); }
/* A card that is a link splits like the secondary button. */
a.prism-card:hover { border-color: var(--ink); box-shadow: -1px 0 0 var(--spectrum-red), 1px 0 0 var(--spectrum-blue); }
a.prism-card:focus-visible { outline: 2px solid var(--prism); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .prism-button, .prism-nav__links a, .prism-input input, .prism-input textarea, .prism-card { transition: none; }
}