/* irchiinnuss buttons: square blocks that lean toward the pointer (.blk).

   The idea is the user's reference (a pill whose face follows the pointer over two
   coloured layers), in our shape and colours. Corners are square, like the dot and the ii. The two
   layers behind the face are OUTLINES: a blue one that stays where the button rests, and a grey
   one that follows the face half way. So leaning opens an even stack of lines on the far side,
   like the steps of the 3D mark. Flat at rest: the stack is found, not shown.
   Measured on the clip: the face leans about a quarter of its height toward the pointer, the
   middle layer a third to a half as far, the back one stays. Let go, the face springs home past
   its rest by about 30% (first peak at .23 s) and settles by .9 s; --blk-spring is that spring
   (zeta .35).

     <a class="blk barbtn" href="..."><span class="blk__face">...</span></a>

   js/ii-buttons.js sets --fx/--fy (the face), --mx/--my (the grey outline) and --cx/--cy (the
   face's insides, which float a little further), in whole device pixels. It does so for a mouse
   only, and never under reduced motion or the site's motion switch. Pressed, the face sinks flush
   and the stack closes. Focused by a keyboard, it gets a ring in the ink.
     --blk-reach-x/-y   how far the face may lean (plain px: the script reads them)
     --blk-face/-ink    the face and its words
     --blk-mid/-back    the grey and the blue outline (on a blue ground, set the blue one black) */

:root {
  --blk-follow: cubic-bezier(.22, 1, .36, 1);
  --blk-spring: cubic-bezier(.34, 1.56, .64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --blk-spring: linear(0, 0.0107 1.13%, 0.0572 2.7%, 0.147 4.48%, 0.2776 6.42%, 0.4398 8.48%, 0.6201 10.65%, 0.8027 12.91%, 0.9721 15.26%, 1.1149 17.68%, 1.2212 20.17%, 1.286 22.72%, 1.3091 25.33%, 1.2946 27.99%, 1.2506 30.71%, 1.1872 33.48%, 1.1153 36.29%, 1.0451 39.15%, 0.9848 42.04%, 0.94 44.98%, 0.9133 47.96%, 0.9044 50.98%, 0.9108 54.03%, 0.9281 57.12%, 0.9516 60.24%, 0.9764 63.39%, 0.9987 66.58%, 1.0156 69.8%, 1.0259 73.04%, 1.0295 76.32%, 1.0276 79.62%, 1.0216 82.95%, 1.0137 86.31%, 1.0056 89.69%, 0.9986 93.1%, 0.9938 96.54%, 1); }
}

.blk {
  /* the outlines: two px, rounded to whole device pixels (--ii-dpr, set by the page) */
  --blk-line: calc(max(1, round(2 * var(--ii-dpr, 1), 1)) / var(--ii-dpr, 1) * 1px);
  --blk-reach-x: 10px;
  --blk-reach-y: 7px;
  --blk-face: color-mix(in srgb, var(--fg, #000) 7%, var(--bg, #fff));
  --blk-ink: var(--fg, #000);
  --blk-mid: color-mix(in srgb, var(--fg, #000) 34%, var(--bg, #fff));
  --blk-back: var(--accent, #2020ff);
  --blk-ring: var(--fg, #000);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--blk-ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* the one leaning rides over its neighbours */
.blk.is-lean { z-index: 2; }
/* the outlines: the blue at rest, the grey a step toward the face */
.blk::before,
.blk::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--blk-line) solid var(--blk-back);
  pointer-events: none;
}
.blk::after { border-color: var(--blk-mid); translate: var(--mx, 0px) var(--my, 0px); }
/* the lines are there only while the face is away: under a flush face their edge would tint its
   antialiased rim (a hairline of blue round a grey button at 175%). They go the moment the
   spring is home (.9 s after the pointer leaves) and come back the moment it leans again */
.blk::before { opacity: 0; transition: opacity 0s .9s; }
.blk.is-lean::before { opacity: 1; transition: opacity 0s; }
.blk__face {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  background: var(--blk-face);
  color: var(--blk-ink);
  translate: var(--fx, 0px) var(--fy, 0px);
}
.blk__face > * { translate: var(--cx, 0px) var(--cy, 0px); }
/* home on the spring; while leaning, follow the pointer without a bounce */
.blk::after { opacity: 0; transition: translate .9s var(--blk-spring), opacity 0s .9s; }
.blk__face,
.blk__face > * { transition: translate .9s var(--blk-spring), background-color .2s ease-out, color .2s ease-out; }
.blk.is-lean::after { opacity: 1; transition: translate .45s var(--blk-follow), opacity 0s; }
.blk.is-lean .blk__face,
.blk.is-lean .blk__face > * { transition: translate .45s var(--blk-follow), background-color .2s ease-out, color .2s ease-out; }
/* pressed: the face sinks flush and the stack closes (and its lines go, as at rest) */
.blk:active::before { opacity: 0; }
.blk:active::after { translate: 0 0; opacity: 0; transition: translate 80ms ease-out, opacity 0s 80ms; }
.blk:active .blk__face,
.blk:active .blk__face > * { translate: 0 0; transition: translate 80ms ease-out, background-color .2s ease-out, color .2s ease-out; }
.blk:active .blk__face { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--blk-ink) 10%, transparent); }
.blk:focus-visible { outline: 2px solid var(--blk-ring); outline-offset: 3px; }
/* a toggle that is on: filled with the ink, flush, still */
.blk[aria-pressed="true"] { --blk-face: var(--fg, #000); --blk-ink: var(--bg, #fff); cursor: default; }
.blk[aria-pressed="true"]::after,
.blk[aria-pressed="true"] .blk__face,
.blk[aria-pressed="true"] .blk__face > * { translate: 0 0; }
.blk[aria-pressed="true"]::before,
.blk[aria-pressed="true"]::after { opacity: 0; }
@media (forced-colors: active) {
  .blk__face { border: 1px solid ButtonText; }
}

/* ---------- the bar button (.barbtn): a block with a square tile at its left end, the icon in the
   tile, the words beside it (the tile is from v38). Blue is the main one, grey
   the other; on the blue footer, black and white. Pointed at, the icon goes full ink and moves:
   the chat's dots hop in turn, the booked day and the cursor blink, the arrow leans on, the
   letter lifts. --bb-pl/--bb-pr: the room left and right of the words ---------- */
.barbtn {
  --h: clamp(54px, 3.26vw, 64px);
  --pad: 5px;
  --bb-pl: calc(var(--h) + 6px);
  --bb-pr: calc(var(--h) + 6px);
  --bb-tile: color-mix(in srgb, var(--fg, #000) 18%, var(--bg, #fff));
  --bb-ic: color-mix(in srgb, var(--fg, #000) 58%, var(--bg, #fff));
  --bb-ic-on: var(--fg, #000);
  /* every tile is black, white or grey, so the dot (the booked day, the cursor) can be the blue */
  --ii-dot: var(--accent, #2020ff);
  height: var(--h);
  font: 400 clamp(16px, 1.02vw, 20px)/1.2 var(--f-sans, sans-serif);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.barbtn > .blk__face { padding: 0 var(--bb-pr) 0 var(--bb-pl); }
.barbtn__tile {
  position: absolute;
  left: var(--pad);
  top: var(--pad);
  bottom: var(--pad);
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--bb-tile);
  color: var(--bb-ic);
}
.barbtn__tile .ii-ic { --ii-m: 3; }
/* More work's count (2026-11-09; the user: "the
   number on ours looks weird"): the words' own sans at .7 of their size, a quarter of its size
   apart, its top at the top of the capitals, at 60%. (It was the mono at 10-13px raised .9em, and
   read as a stray label) */
.barbtn__n { position: relative; top: .14em; margin-left: .25em; font: 400 .7em/1 var(--f-sans, sans-serif); vertical-align: top; opacity: .6; }
.barbtn--blue { --blk-face: var(--accent, #2020ff); --blk-ink: var(--accent-ink, #fff); --bb-tile: #000; --bb-ic: #fff; --bb-ic-on: #fff; }
.barbtn--ink { --blk-face: #000; --blk-ink: #fff; --bb-tile: #fff; --bb-ic: #000; --bb-ic-on: #000; }
/* the ink one turned over (the footer's Open the terminal; the user, 2026-11-09) */
.barbtn--white { --blk-face: #fff; --blk-ink: #000; --bb-tile: #000; --bb-ic: #fff; --bb-ic-on: #fff; }
/* the icons' moves, a module at a time (inside an icon, 1px is one module) */
@keyframes ii-hop { 0%, 20%, 100% { transform: none; } 50% { transform: translateY(-1px); } }
@keyframes ii-blink { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ii-lean { 0%, 20%, 100% { translate: 0 0; } 50% { translate: var(--ii-mod) 0; } }
@keyframes ii-lift { 0%, 20%, 100% { translate: 0 0; } 50% { translate: 0 calc(-1 * var(--ii-mod)); } }
@media (hover: hover) and (pointer: fine) {
  .barbtn:hover .barbtn__tile { color: var(--bb-ic-on); }
  .barbtn:hover .ii-ic__p { animation: ii-hop .8s ease-out calc(.2s + var(--i, 0) * .2s) infinite; }
  .barbtn:hover .ii-ic__dot { animation: ii-blink 1.06s .3s infinite; }
  .barbtn:hover .ii-ic--arrow-right { animation: ii-lean .8s ease-out .3s infinite; }
  .barbtn:hover .ii-ic--mail { animation: ii-lift .8s ease-out .3s infinite; }
}

/* ---------- the toggles (.pill, the work page's filters and views): a grey block a word wide, or
   an icon's square. The one that is on is filled with the ink and sits flush. They lean less,
   side by side as they are ---------- */
.pill {
  --blk-reach-x: 6px;
  --blk-reach-y: 5px;
  height: clamp(56px, 4.1vw, 84px);
  font: 400 clamp(16px, .98vw, 20px)/1 var(--f-sans, sans-serif);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.pill > .blk__face { padding: 0 clamp(26px, 2.4vw, 48px); }
/* the count, small and high after the word */
.pill--ic { width: clamp(56px, 4.1vw, 84px); }
.pill--ic > .blk__face { padding: 0; }
.pill__ic { --ii-m: 2; }

/* ---------- a case's Visit site: a blue square block, its words over the arrow out ---------- */
.case__visit {
  --blk-face: var(--accent, #2020ff);
  --blk-ink: var(--accent-ink, #fff);
  --blk-reach-x: 8px;
  --blk-reach-y: 8px;
}
.case__visit > .blk__face { flex-direction: column; gap: 10px; }
.case__visit .ii-ic { --ii-m: 2; }