/* ═══════════════════════════════════════════════════════════════════════════
   SITE POLISH — the shared finish layer for every interior page.
   One file so the whole site speaks one motion language; a new page gets the
   full treatment by adding a single <link>. index.html carries its own inline
   copy of these rules (it shipped first); if this file and index ever drift,
   index is the reference.
   Rules here must be SAFE BY DEFAULT: element-level rules apply everywhere,
   class-level rules (.draw-link) are opt-in per element.

   THE GUIDELINE (per Ethan, Aug 30): pages keep their own personality — layout,
   structure, color emphasis, density are per-page decisions and SHOULD differ
   between a marketing homepage, a legal document and a documentation page. What
   they SHARE is the motion language: how hover feels, how focus looks, how text
   selects, and the draw-around signature on navigation. Put a rule in this file
   only if it belongs to that shared language; put it in the page if it belongs
   to that page's character. Different rooms, same architect.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Text selection in brand blue; keyboard focus visibly branded. */
::selection { background: #2C5F8A; color: #fff; }
:focus-visible { outline: 2px solid #2C5F8A; outline-offset: 3px; border-radius: 2px; }

/* Buttons: a one-pixel rise on hover that settles on press. Pages without .btn
   are unaffected. transform composes with each page's own hover styles. */
.btn { transition: all .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ── .draw-link — the box that draws itself around a label ──────────────────
   Same effect as the index nav: a 1.5px accent line traces top → right →
   bottom → left on hover (0.11s per leg) and retraces backwards on leave.
   Padding is cancelled by negative margin, so adding this class NEVER shifts
   layout — safe to drop onto any inline link. Squared corners on purpose. */
.draw-link {
  position: relative;
  padding: 6px 10px;
  margin: -6px -10px;
  transition: color .2s;
}
.draw-link::before,
.draw-link::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border: 0 solid transparent;
  pointer-events: none;
}
.draw-link::before {
  top: 0; left: 0;
  transition: width .11s ease .22s, height .11s ease .11s, border-color 0s .33s;
}
.draw-link::after {
  bottom: 0; right: 0;
  transition: width .11s ease 0s, height .11s ease .11s, border-color 0s .22s;
}
.draw-link:hover::before {
  width: 100%; height: 100%;
  border-top: 1.5px solid #2C5F8A;
  border-right: 1.5px solid #2C5F8A;
  transition: width .11s ease 0s, height .11s ease .11s;
}
.draw-link:hover::after {
  width: 100%; height: 100%;
  border-bottom: 1.5px solid #2C5F8A;
  border-left: 1.5px solid #2C5F8A;
  transition: width .11s ease .22s, height .11s ease .33s;
}

/* .nav-back is already a padded, bordered pill — the generic draw-link
   padding/negative-margin (built for inline text links) would double its box.
   Keep the pill's own geometry and let the accent line trace its edge, lighting
   the existing border up rather than drawing a second one beside it. */
.nav-back.draw-link { padding: 6px 14px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .draw-link::before, .draw-link::after,
  .draw-link:hover::before, .draw-link:hover::after,
  .btn, .btn:hover { transition: none; }
}