/* -----------------------------------------------------------------------------
 * polish.css  —  site-wide interaction layer
 * -----------------------------------------------------------------------------
 * Additive only. This sheet does not redesign anything; it adds depth, a gentle
 * hover lift, and a clear keyboard focus ring to the shared interactive parts of
 * the site, so that buttons and tiles signal that they can be clicked. It is
 * linked LAST on every page, so it sits on top of each page's own styles without
 * replacing them. Every bit of motion is switched off for anyone who prefers
 * reduced motion.
 * --------------------------------------------------------------------------- */

/* Shared pill buttons: a consistent hover lift and shadow. The :not() guards
 * skip anything marked disabled so dead buttons never appear interactive. */
.btn-pill {
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn-pill:not(.disabled):not([disabled]):not([aria-disabled="true"]):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 61, 94, 0.16);
}
.btn-pill:not(.disabled):not([disabled]):active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(16, 61, 94, 0.18);
}

/* Dashboard / hub tiles: a soft shadow on hover so the surface feels alive
 * and high-end, without a lift that would imply the whole card is a link. */
.tile {
  transition: box-shadow .18s ease;
}
.tile:hover {
  box-shadow: 0 8px 26px rgba(16, 61, 94, 0.10);
}

/* A single, clear keyboard focus ring across interactive elements. Only shows
 * for keyboard users (:focus-visible), so it never interferes with mouse use. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #2380a4;
  outline-offset: 2px;
}

/* Anything that behaves like a button should show the hand cursor. */
[role="button"],
.btn-pill {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .btn-pill,
  .tile {
    transition: none;
  }
  .btn-pill:hover,
  .tile:hover {
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
 * PRISM wordmark (the lettering with the pointed M). Used in brand lockups and
 * headings via <img src="/assets/prism-wordmark.svg" class="prism-wm-img">, so
 * it scales with the surrounding text and keeps the exact brand letterforms.
 * Not for use inside running paragraphs. */
.prism-wm-img {
  height: .82em;
  width: auto;
  display: inline-block;
  vertical-align: -.10em;
}
.prism-reg {
  font-size: .5em;
  vertical-align: super;
  margin-left: 1px;
}

/* Mobile safeguard: never let an image push the page wider than the screen.
   max-width:100% only ever shrinks an oversized image to fit its container;
   it never enlarges one, and class-set icon sizes (e.g. .prism-wm-img) win on
   specificity, so the wordmark and small marks are unaffected. */
img { max-width: 100%; height: auto; }