/* The AI key page (local-llm-hotkeys). Shared layout comes from /style.css. */

.app .lede { color: var(--fg); font-size: 20px; line-height: 1.5; margin: 0 0 16px; text-wrap: balance; }
.made { margin-top: 40px; color: var(--muted); font-size: 12px; font-style: italic; }
.made + .made { margin-top: 4px; }  /* the credit sits right under the first line */
.note { color: var(--muted); font-size: 12px; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  border: 1px solid #444;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #111;
  color: var(--fg);
  font: 12px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  text-align: center;
}
/* The Copilot key stands out in the site's cyan, with the hand-drawn Ai (in the style of the AJB
   logo) on it. The Ai is a mask, so it takes the key's colour; screen readers get "Copilot". */
kbd.ai { border-color: var(--cyan); color: var(--cyan); }
kbd.ai .glyph {
  display: inline-block;
  width: 1.2em;
  height: 1.5em;
  vertical-align: -0.4em;
  background: currentColor;
  /* A heavier line than ai.svg, so it stays legible at text size. */
  -webkit-mask: url(/ai-key/ai-key-cap.svg) center / contain no-repeat;
  mask: url(/ai-key/ai-key-cap.svg) center / contain no-repeat;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
kbd.ai:hover { box-shadow: 0 0 8px var(--cyan); }

/* Arriving through the Ai key (ai-key/arrive.js): black until the Ai has landed on the mark. */
html.ai-arrive .page { opacity: 0; }

/* The intro: the text, and the large hand-drawn Ai next to it. */
.intro { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.intro .mark { display: block; width: auto; height: 150px; transition: filter 0.4s; }
.intro .mark:hover { filter: drop-shadow(0 0 10px var(--cyan)); }

/* The big Ai is a button: three clicks wake it up (agent.js). No hint, it is an easter egg. */
.mark-button { padding: 0; border: 0; background: none; cursor: default; }
.mark-button:focus-visible { outline: 1px dashed var(--muted); outline-offset: 6px; }

/* The Ai as a Clippy-style assistant, bottom right, with a yellow speech balloon. */
.agent {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: min(320px, 100vw - 48px);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.4s, transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.agent.in { opacity: 1; transform: none; }
.agent .balloon {
  position: relative;
  margin-bottom: 18px;
  padding: 12px 14px 10px;
  border: 1px solid #000;
  border-radius: 10px;
  background: #ffffcc;
  color: #000;
  font: 14px/1.4 "Comic Sans MS", "Comic Neue", "Comic Mono", cursive;
  box-shadow: 4px 4px 0 rgba(36, 202, 254, 0.35);
}
.agent .balloon::after {  /* the tail, pointing at the Ai's head: the dot, on the left since it is mirrored */
  content: "";
  position: absolute;
  right: 84px;
  bottom: -12px;
  border: 12px solid transparent;
  border-bottom: 0;
  border-top-color: #ffffcc;
  filter: drop-shadow(0 1px 0 #000);
}
.agent .balloon p { margin: 0 0 10px; }
.agent .buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.agent .buttons button {
  padding: 3px 10px;
  border: 1px solid #000;
  border-radius: 3px;
  background: #eee;
  color: #000;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.agent .buttons button:hover, .agent .buttons button:focus-visible { background: #fff; outline: 2px solid var(--cyan); }
/* Mirrored, only here: looking up at its own speech balloon, it is more fun this way round. */
.agent .figure { width: 64px; height: 102px; margin-right: 24px; cursor: pointer; transform: scaleX(-1); }
.agent .figure svg { width: 100%; height: 100%; overflow: visible; }
.agent .stroke { fill: none; stroke: #fff; stroke-width: 96; stroke-linecap: round; stroke-linejoin: round; }
.agent .dot { fill: var(--cyan); transform-box: fill-box; transform-origin: center; }
.agent.talking .dot { animation: hop 0.5s ease-out 3; }
.agent.talking .figure svg { animation: lean 1.5s ease-in-out; }
@keyframes hop { 50% { transform: translateY(-60%); } }
@keyframes lean { 30% { transform: rotate(-6deg); } 70% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
  .agent { transition: opacity 0.2s; transform: none; }
  .agent.talking .dot, .agent.talking .figure svg { animation: none; }
}

/* The second egg (agent.js, type "poep"): the big Ai as live SVG, the same size as the <img>. */
.intro svg.mark { width: auto; aspect-ratio: 462 / 754; overflow: visible; }
.mark.live .stroke { fill: none; stroke: #fff; stroke-width: 72; stroke-linecap: round; stroke-linejoin: round; }
.mark.live .dot { fill: #fff; transform-box: fill-box; transform-origin: center; }
.mark.live .leg { transition: stroke-dashoffset 0.6s ease-in-out; }
.mark.live.strain { animation: strain 0.12s linear 6; }
.mark.live .drop {
  fill: none; stroke: #fff; stroke-width: 32; stroke-linecap: round;
  transform-box: fill-box; transform-origin: 50% 0; transform: scale(0.1, 0); opacity: 0;
  transition: transform 0.7s ease-out, opacity 0.2s;
}
.mark.live.out .drop { transform: none; opacity: 1; }
.mark.live.down .drop { transform: translateY(74px); transition: transform 0.35s cubic-bezier(0.5, 0, 1, 1); animation: land 0.3s ease-out 0.35s; }
.mark.live .smell { fill: none; stroke: var(--muted); stroke-width: 10; stroke-linecap: round; opacity: 0; }
.mark.live.stink .smell { animation: smell 1.1s ease-out 2; }
.mark.live.done .drop { opacity: 0; transition: transform 0.35s, opacity 0.8s 0.2s; }
.mark.live.done .dot { animation: hop 0.5s ease-out 2; }
@keyframes strain { 25% { transform: translate(2px, 1px); } 75% { transform: translate(-2px, 1px); } }
@keyframes land { 40% { transform: translateY(74px) scale(1.18, 0.8); } }
@keyframes smell { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-40px); } }
@media (prefers-reduced-motion: reduce) {
  .mark.live .leg, .mark.live .drop, .mark.live.down .drop, .mark.live.done .drop { transition: none; }
  .mark.live.strain, .mark.live.down .drop, .mark.live.stink .smell, .mark.live.done .dot { animation: none; }
  .mark.live.down .drop { transform: translateY(74px); }
  .mark.live.stink .smell { opacity: 0.9; }
  .mark.live.done .smell { opacity: 0; }
}

/* What is an NPU: the photo of the key. */
.photo { margin: 24px 0 0; }
.photo img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--rule); }
.photo figcaption { margin-top: 8px; color: var(--muted); font-size: 12px; }

/* Four jobs: a grid of cards, two per row, one on a phone. */
.jobs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jobs li {
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #050505;
  transition: border-color 0.3s;
}
.jobs li:hover { border-color: #333; }
.jobs .combo { margin: 0 0 12px; }
.jobs .combo kbd { font-size: 14px; padding: 3px 10px; }
.jobs h4 { margin: 0 0 6px; color: var(--fg); font-size: 15px; }
.jobs p:last-child { margin: 0; }

.examples { margin: 0; padding-left: 18px; }
.examples li { margin-bottom: 10px; }

.keys { border-collapse: collapse; margin: 0 0 16px; }
.keys th, .keys td { padding: 5px 16px 5px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.keys th { color: var(--fg); font-weight: normal; white-space: nowrap; }

main code { color: var(--lime); }
pre.chamber {
  margin: 0 0 12px;
  padding: 12px 16px;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--cyan);
  background: #0a0a0a;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.5;
}
pre.chamber code { color: inherit; }

/* Grid items do not shrink below their content by default; without this, the wide code block
   makes the main column wider than a phone screen. */
.columns > * { min-width: 0; }

@media (max-width: 760px) {
  .intro { gap: 16px; }
  .intro .mark { height: 96px; }
  .columns { grid-template-columns: 1fr; gap: 24px; }
  .jobs { grid-template-columns: 1fr; }
  .keys th { white-space: normal; }
}