/* ==========================================================================
   ht-button.css - THE HIDDEN TEMPLE STANDARD BUTTON
   --------------------------------------------------------------------------
   This is the site's standard button going forward. New and redesigned pages
   should use it instead of rolling their own control. It is rolled out page by
   page; do not retro-fit a page that has not been redesigned yet.

   THE DESIGN
   A dark plate inside a quiet gold hairline frame. A teal light travels
   continuously around the inside of that frame, between the gold edge and the
   dark face. The light is the SELECTED state, not a hover effect: in any group
   of buttons - a menu, a tab strip, an accordion - exactly one item runs the
   light, and that is how you see where you are. Everything else stays quiet.

   REQUIRED MARKUP  (no JavaScript, no images)
     <button type="button" class="htbtn" aria-pressed="false">
       <span class="htbtn-ring" aria-hidden="true"></span>
       <span class="htbtn-face" aria-hidden="true"></span>
       <span class="htbtn-orn htbtn-tl" aria-hidden="true"></span>
       <span class="htbtn-orn htbtn-tr" aria-hidden="true"></span>
       <span class="htbtn-orn htbtn-bl" aria-hidden="true"></span>
       <span class="htbtn-orn htbtn-br" aria-hidden="true"></span>
       <span class="htbtn-lbl">Label Text</span>
     </button>
   The five decorative spans must be direct children and must come before the
   label. They are aria-hidden, so the accessible name is the label alone.
   The label span is required: it is the only layer that sits above the face.

   SELECTION IS AN ARIA ATTRIBUTE, NEVER A CLASS
   The lit state is driven off the same attribute a screen reader reads, so the
   look and the semantics can never drift apart. Any one of these turns it on:
     aria-pressed="true"    toggle button
     aria-selected="true"   tab in a tablist
     aria-expanded="true"   accordion / disclosure button
     aria-current="page|step|true|..."   current item in a nav
   There is no .is-selected hook on purpose. If nothing is marked selected,
   nothing animates.

   STATES
     rest            gold hairline, dim ornaments, teal label, light off
     hover           frame and ornaments lift, label brightens, NO light
                     (only on hover-capable pointers, and only when unselected)
     focus-visible   gold outline outside the plate + gold label; distinct from
                     both hover and selected, so tabbing is always visible
     selected        teal light circling, ornaments at full strength, label lit
     reduced motion  selected still reads as selected - the light stops
                     travelling and glows evenly all the way round instead

   VARIANTS
     .htbtn            default plate: 52px min height, Cinzel 15px label
     .htbtn--tab       compact strip item: 44px min height, IBM Plex Mono 13px,
                       tighter padding. For part switchers / tab bars that are
                       sized to their own content and must not grow.

   NOTES
   - Every rule is written .htbtn.htbtn (and .htbtn.htbtn > .part). The doubled
     class is deliberate armour: legacy site CSS is full of "html body .thing"
     rules, and one extra class outranks any number of element selectors. It
     means the component can be dropped onto an old page without an !important
     war and without editing the page's own stylesheet.
   - The label carries word-break/overflow-wrap/hyphens with !important because
     banner.css forces overflow-wrap:anywhere !important on .set-grid children,
     which splits words mid-letter ("COLLECTI / NG"). Labels wrap between words
     or not at all.
   - The rotating layer is a square sized to 160% of the button width, so its
     inscribed circle covers the plate at every angle. That holds for any button
     at least 0.8x as wide as it is tall - i.e. every real button. A button
     taller than it is wide would need a larger width here.
   ========================================================================== */

/* ---------- the plate ---------- */
.htbtn.htbtn {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 52px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: #071214;
  box-shadow: inset 0 0 0 1px rgba(166, 141, 82, 0.34);
  transition: box-shadow 0.3s ease;
}

/* ---------- the travelling light ---------- */
.htbtn.htbtn > .htbtn-ring {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 160%;
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg,
    transparent 0 62%,
    rgba(127, 212, 207, 0.20) 72%,
    #5defe7 80%,
    rgba(127, 212, 207, 0.20) 88%,
    transparent 96% 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

@keyframes htbtn-orbit {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

/* ---------- the face: masks the light down to a hairline ---------- */
.htbtn.htbtn > .htbtn-face {
  position: absolute;
  z-index: 1;
  inset: 3px;
  background: linear-gradient(180deg, #0c1f22, #081416 72%);
  box-shadow: inset 0 0 0 1px rgba(166, 141, 82, 0.30);
  pointer-events: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ---------- corner ornaments ---------- */
.htbtn.htbtn > .htbtn-orn {
  position: absolute;
  z-index: 3;
  width: 11px;
  height: 11px;
  border: 1px solid #a68d52;
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              width 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              height 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.htbtn.htbtn > .htbtn-tl { top: 6px;    left: 6px;  border-right: 0; border-bottom: 0; }
.htbtn.htbtn > .htbtn-tr { top: 6px;    right: 6px; border-left: 0;  border-bottom: 0; }
.htbtn.htbtn > .htbtn-bl { bottom: 6px; left: 6px;  border-right: 0; border-top: 0; }
.htbtn.htbtn > .htbtn-br { bottom: 6px; right: 6px; border-left: 0;  border-top: 0; }

/* ---------- the label ----------
   Wraps between words, never inside one, and never truncates: the plate grows
   to hold the caption instead of the caption shrinking or clipping. */
.htbtn.htbtn > .htbtn-lbl {
  position: relative;
  z-index: 4;
  display: block;
  max-width: 100%;
  padding: 14px clamp(14px, 4.4vw, 32px);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: #bfeeea;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: balance;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

/* ---------- hover: quiet, and only on an unselected item ---------- */
@media (hover: hover) and (pointer: fine) {
  .htbtn.htbtn:hover:not(:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"]))) {
    box-shadow: inset 0 0 0 1px rgba(166, 141, 82, 0.58);
  }
  .htbtn.htbtn:hover:not(:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"]))) > .htbtn-face {
    background: linear-gradient(180deg, #0e2529, #0a191b 72%);
    box-shadow: inset 0 0 0 1px rgba(166, 141, 82, 0.50);
  }
  .htbtn.htbtn:hover:not(:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"]))) > .htbtn-orn {
    opacity: 0.8;
    width: 12px;
    height: 12px;
  }
  .htbtn.htbtn:hover:not(:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"]))) > .htbtn-lbl {
    color: #dcf6f3;
  }
}

/* ---------- keyboard focus: gold, outside the plate, never mistaken for
              either hover or the selected light ---------- */
.htbtn.htbtn:focus-visible {
  outline: 2px solid #d9b877;
  outline-offset: 3px;
}
.htbtn.htbtn:focus-visible > .htbtn-face {
  box-shadow: inset 0 0 0 1px rgba(217, 184, 119, 0.75);
}
.htbtn.htbtn:focus-visible > .htbtn-orn {
  opacity: 1;
  border-color: #f2dcab;
}
.htbtn.htbtn:focus-visible > .htbtn-lbl {
  color: #f4e6c6;
}

/* ---------- SELECTED: the light runs ---------- */
.htbtn.htbtn:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"])) {
  box-shadow: inset 0 0 0 1px rgba(166, 141, 82, 0.60);
}
.htbtn.htbtn:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"])) > .htbtn-ring {
  opacity: 1;
  animation: htbtn-orbit 2.6s linear infinite;
}
.htbtn.htbtn:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"])) > .htbtn-face {
  box-shadow: inset 0 0 0 1px rgba(93, 239, 231, 0.30);
}
.htbtn.htbtn:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"])) > .htbtn-orn {
  opacity: 1;
  width: 13px;
  height: 13px;
  border-color: #d9b877;
}
.htbtn.htbtn:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"])) > .htbtn-lbl {
  color: #e9fbf9;
  text-shadow: 0 0 12px rgba(93, 239, 231, 0.45);
}

/* ---------- press ----------
   Third class only so this still outranks the selected face above; pressing an
   already-selected item has to give feedback too. */
.htbtn.htbtn.htbtn:active > .htbtn-face {
  background: linear-gradient(180deg, #081416, #0c1f22 72%);
}

/* ==========================================================================
   VARIANT: .htbtn--tab - compact strip item
   For a part switcher / tab bar that is sized to its own content. Keeps the
   44px tap floor and the 13px label floor, and carries the narrow-phone
   tracking ladder so two labels still fit inside a 320px screen.
   ========================================================================== */
.htbtn.htbtn--tab {
  min-height: 44px;
}
.htbtn.htbtn--tab > .htbtn-lbl {
  padding: 10px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
}
.htbtn.htbtn--tab > .htbtn-orn {
  width: 9px;
  height: 9px;
}
.htbtn.htbtn--tab > .htbtn-tl { top: 5px;    left: 5px; }
.htbtn.htbtn--tab > .htbtn-tr { top: 5px;    right: 5px; }
.htbtn.htbtn--tab > .htbtn-bl { bottom: 5px; left: 5px; }
.htbtn.htbtn--tab > .htbtn-br { bottom: 5px; right: 5px; }
.htbtn.htbtn--tab:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"])) > .htbtn-orn {
  width: 11px;
  height: 11px;
}

@media (max-width: 480px) {
  .htbtn.htbtn--tab > .htbtn-lbl {
    padding: 10px 10px;
    letter-spacing: 0.04em;
  }
  /* below this the corners crowd the caption - the frame carries the shape */
  .htbtn.htbtn--tab > .htbtn-orn { display: none; }
}
@media (max-width: 360px) {
  .htbtn.htbtn--tab > .htbtn-lbl {
    padding: 10px 5px;
    letter-spacing: 0.02em;
  }
}

/* ==========================================================================
   REDUCED MOTION
   The selected item must still be obviously the selected item. The light stops
   travelling and becomes an even teal glow all the way around the frame.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .htbtn.htbtn,
  .htbtn.htbtn > .htbtn-ring,
  .htbtn.htbtn > .htbtn-face,
  .htbtn.htbtn > .htbtn-orn,
  .htbtn.htbtn > .htbtn-lbl {
    transition: none;
  }
  .htbtn.htbtn:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"])) > .htbtn-ring {
    animation: none;
    background: rgba(93, 239, 231, 0.55);
    opacity: 1;
  }
  .htbtn.htbtn:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"])) > .htbtn-face {
    box-shadow: inset 0 0 0 1px rgba(93, 239, 231, 0.42);
  }
}