/* andrarchy buttons — "Instrument" (selected 2026-10-07).
   Corner ticks echo the homepage dial; the arrow sits in its own cell.
   On click the ticks pinch in, then spring out and settle (buttons.js).

   .ab-btn                 primary: lime fill, for charcoal backgrounds
   .ab-btn.ab-secondary    outline
   .ab-btn.ab-quiet        small actions: ticks appear only on hover/click
   .ab-light               the same button on a lime or cream background
   .ab-block               full width
   .ab-link                typewriter text link with an arrow, no ticks
   .ab-util                small square control, e.g. "Pause motion"

   Markup: <a class="ab-btn"><span class="ab-label">Label</span><span class="ab-arrow" aria-hidden="true">→</span></a>
   Arrows: → another page here · ↓ further down this page · ↗ leaves the site.
   The Prediction Record keeps its own .pl-cta / .pl-button classes (some are
   created by its app), so they are mapped onto the same component below. */

.ab-btn,.pl-cta,.pl-button{
  --ab-lime:#e5fa83;--ab-ink:#11120f;--ab-paper:#eae9d9;
  --ab-bg:var(--ab-lime);--ab-fg:var(--ab-ink);--ab-border:var(--ab-lime);--ab-tick:var(--ab-lime);
  --ab-cell-line:#11120f55;--ab-cell-hover-bg:var(--ab-ink);--ab-cell-hover-fg:var(--ab-lime);
  --ab-hover-bg:var(--ab-bg);--ab-tick-rest:1;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;
  min-height:48px;margin:0;padding:10px 22px;border:1px solid var(--ab-border);border-radius:0;
  background:var(--ab-bg);color:var(--ab-fg);
  font:700 12px/1.25 'Courier New',Courier,monospace;letter-spacing:.16em;text-transform:uppercase;text-align:center;text-decoration:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .16s,color .16s,border-color .16s,transform .12s;
}
.ab-btn:has(>.ab-label),.pl-cta:has(>.ab-label){align-items:stretch;padding:0}
.ab-label{display:flex;align-items:center;justify-content:center;padding:10px 20px}
.ab-btn>.ab-arrow,.pl-cta>.ab-arrow{display:flex;align-items:center;justify-content:center;flex:none;width:46px;border-left:1px solid var(--ab-cell-line);font-weight:400;letter-spacing:0;transition:background-color .16s,color .16s}

/* Corner ticks */
.ab-btn::before,.ab-btn::after,.pl-cta::before,.pl-cta::after,.pl-button::before,.pl-button::after{
  content:'';position:absolute;width:7px;height:7px;border:1px solid var(--ab-tick);pointer-events:none;opacity:var(--ab-tick-rest);
  transition:top .16s,left .16s,bottom .16s,right .16s,opacity .16s;
}
.ab-btn::before,.pl-cta::before,.pl-button::before{top:-5px;left:-5px;border-right:0;border-bottom:0}
.ab-btn::after,.pl-cta::after,.pl-button::after{bottom:-5px;right:-5px;border-left:0;border-top:0}

/* Variants */
.ab-secondary,.pl-button{
  --ab-bg:transparent;--ab-fg:var(--ab-lime);--ab-border:#e5fa8399;--ab-cell-line:currentColor;--ab-hover-bg:#e5fa8312;
}
.ab-quiet,.pl-button-quiet{
  --ab-bg:transparent;--ab-fg:var(--ab-paper);--ab-border:#3a3d2f;--ab-tick:var(--ab-lime);--ab-cell-line:currentColor;--ab-hover-bg:#eae9d90d;--ab-tick-rest:0;
}
.pl-button-primary{
  --ab-bg:var(--ab-lime);--ab-fg:var(--ab-ink);--ab-border:var(--ab-lime);--ab-hover-bg:#f0ffa8;--ab-tick-rest:1;
}
.ab-light{
  --ab-bg:var(--ab-ink);--ab-fg:var(--ab-lime);--ab-border:var(--ab-ink);--ab-tick:var(--ab-ink);
  --ab-cell-line:#e5fa8355;--ab-cell-hover-bg:var(--ab-lime);--ab-cell-hover-fg:var(--ab-ink);--ab-hover-bg:var(--ab-ink);
}
.ab-light.ab-secondary{--ab-bg:transparent;--ab-fg:var(--ab-ink);--ab-border:#11120f99;--ab-cell-line:currentColor;--ab-hover-bg:#11120f10}
.ab-block{display:flex;width:100%}
.ab-block>.ab-label{flex:1}

/* Hover and focus */
@media (hover:hover){
  .ab-btn:hover,.pl-cta:hover,.pl-button:hover{background:var(--ab-hover-bg);border-color:var(--ab-border);text-decoration:none}
  .ab-secondary:hover,.pl-button:not(.pl-button-primary):hover{border-color:var(--ab-fg)}
  .ab-btn:hover::before,.pl-cta:hover::before,.pl-button:hover::before{top:-8px;left:-8px;opacity:1}
  .ab-btn:hover::after,.pl-cta:hover::after,.pl-button:hover::after{bottom:-8px;right:-8px;opacity:1}
  .ab-btn:not(.ab-secondary):not(.ab-quiet):hover>.ab-arrow,.pl-cta:hover>.ab-arrow{background:var(--ab-cell-hover-bg);color:var(--ab-cell-hover-fg)}
}
.ab-btn:focus-visible,.pl-cta:focus-visible,.pl-button:focus-visible{outline:2px solid var(--ab-tick);outline-offset:4px}
.ab-quiet:focus-visible,.pl-button-quiet:focus-visible{outline-color:var(--ab-lime)}
.ab-btn:focus-visible::before,.ab-btn:focus-visible::after,.pl-button:focus-visible::before,.pl-button:focus-visible::after{opacity:1}

/* Disabled: no ticks, no motion */
.ab-btn:disabled,.ab-btn[aria-disabled=true],.pl-button:disabled,.pl-button[aria-disabled=true]{cursor:not-allowed;opacity:.5}
.ab-btn:disabled::before,.ab-btn:disabled::after,.ab-btn[aria-disabled=true]::before,.ab-btn[aria-disabled=true]::after,
.pl-button:disabled::before,.pl-button:disabled::after,.pl-button[aria-disabled=true]::before,.pl-button[aria-disabled=true]::after{display:none}
.pl-button[aria-disabled=true]{cursor:progress}

/* Click: press in, then spring out past the hover position and settle */
.ab-btn.ab-press,.pl-cta.ab-press,.pl-button.ab-press{transform:scale(.97)}
.ab-press::before{top:-2px!important;left:-2px!important;opacity:1}
.ab-press::after{bottom:-2px!important;right:-2px!important;opacity:1}
.ab-pop::before{animation:ab-pop-tl .6s cubic-bezier(.2,.7,.3,1)}
.ab-pop::after{animation:ab-pop-br .6s cubic-bezier(.2,.7,.3,1)}
.ab-pop>.ab-arrow{animation:ab-cell-flash .45s ease-out}
@keyframes ab-pop-tl{0%{top:-2px;left:-2px;opacity:1}35%{top:-17px;left:-17px;opacity:1}60%{top:-6px;left:-6px;opacity:1}80%{top:-10px;left:-10px;opacity:1}100%{top:-8px;left:-8px;opacity:1}}
@keyframes ab-pop-br{0%{bottom:-2px;right:-2px;opacity:1}35%{bottom:-17px;right:-17px;opacity:1}60%{bottom:-6px;right:-6px;opacity:1}80%{bottom:-10px;right:-10px;opacity:1}100%{bottom:-8px;right:-8px;opacity:1}}
@keyframes ab-cell-flash{0%{background:var(--ab-paper);color:var(--ab-ink)}}

/* Text link */
.ab-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ab-link,#e5fa83);text-decoration:none;font:12px/1.3 'Courier New',Courier,monospace;letter-spacing:.14em;text-transform:uppercase}
.ab-link>.ab-label{display:inline;padding:0 0 5px;border-bottom:1px solid currentColor}
.ab-link>.ab-arrow{display:inline-block;padding-bottom:5px;transition:transform .16s}
.ab-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media (hover:hover){
  .ab-link:hover>.ab-arrow{transform:translateX(3px)}
  .ab-link:hover>.ab-arrow.ab-back{transform:translateX(-3px)}
  .ab-link:hover>.ab-arrow.ab-ext{transform:translate(2px,-2px)}
}

/* Utility control */
.ab-util{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:0 12px;border:1px solid #3a3d2f;border-radius:0;background:#11120fcc;color:#a6aa95;font:11px/1 'Courier New',Courier,monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .16s,border-color .16s}
.ab-util::before{content:'';width:3px;height:9px;border-left:2px solid currentColor;border-right:2px solid currentColor;flex:none}
.ab-util[aria-pressed=true]::before{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.ab-util:focus-visible{outline:2px solid #e5fa83;outline-offset:3px}
@media (hover:hover){.ab-util:hover{color:#eae9d9;border-color:#a6aa95}}

@media (prefers-reduced-motion:reduce){
  .ab-btn,.pl-cta,.pl-button,.ab-btn::before,.ab-btn::after,.pl-cta::before,.pl-cta::after,.pl-button::before,.pl-button::after,.ab-arrow{transition:none}
  .ab-pop::before,.ab-pop::after,.ab-pop>.ab-arrow{animation:none}
  .ab-press{transform:none!important}
}
@media (forced-colors:active){
  .ab-btn::before,.ab-btn::after,.pl-cta::before,.pl-cta::after,.pl-button::before,.pl-button::after{border-color:ButtonText}
  .ab-btn{border-color:ButtonText}
}