/* Copyright (c) Pawan Nayar · LLOS.ai · 2026 — Original pedagogy and tool design — all rights reserved. */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   THE LENS — one idea, several desks.

   [2026-08-09] Extracted from day3.html, where it lived inline for exactly one card. Pawan:
   "i am aligned 5 hops do it" — hop 1 is to make this a component before there is a second copy
   of it, not after. Twenty-two of these are planned; twenty-two inline copies would mean changing
   the swap timing in twenty-two places.

   PROVENANCE, and it matters: this is screen 4 of the confusion-pair series (`#situations`,
   "The same recognition, different desk"), which ships on all 55 pair pages. The markup, the
   190ms dim-and-swap and the aria-pressed button pattern are copied from there, not designed here.
   The only change is token names — pair pages run --line/--muted/--soft/--accent, day pages run
   --border/--ink-2/--ink-3/--ch, with the same values behind them.

   Depends on the host page's :root tokens. Every day page in career/ai_learning defines them.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.lens{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .9rem}
.lens button{flex:0 1 auto;font-family:inherit;padding:.5rem .9rem;border-radius:99px;
  border:1.5px solid var(--border);background:var(--card);color:var(--ink-2);
  font-size:var(--fs-ui,14px);font-weight:600;cursor:pointer;transition:.18s;min-height:44px}
.lens button:hover{border-color:var(--ch);color:var(--ch-deep)}
/* :active as well as :hover — hover-only feedback makes a tap feel dead on a phone */
.lens button:active{transform:scale(.98)}
.lens button[aria-pressed="true"]{background:var(--ch);border-color:var(--ch);color:#fff}
.lens button:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(234,122,39,.18)}

.slotgrid{display:grid;gap:.55rem;grid-template-columns:1fr 1fr;transition:opacity .22s}
.slotgrid.dim{opacity:.25}
.slot{padding:.7rem .9rem;border-radius:12px;background:var(--card);border:1px solid var(--border)}
.slot .s-k{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.slot .s-v{font-size:var(--fs-body,15px);color:var(--ink);margin-top:.15rem;line-height:1.5}
/* the row that carries the whole scene runs full width whatever the column count */
.slot.wide{grid-column:1/-1}

/* the principle sits above the switcher and never moves. That is the teaching: the idea is fixed,
   the desk is what changes. Repeating it inside every lens would read as several principles. */
.principle{background:var(--ch-mist);border:1px solid var(--ch-soft);border-radius:var(--radius,12px);
  padding:.85rem 1rem;margin:.2rem 0 1rem}
.principle .p-k{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ch-deep)}
.principle .p-v{font-size:var(--fs-body,15px);color:var(--ink);margin-top:.2rem;line-height:1.5}

/* [2026-08-09] One column under 720px. Two 44%-wide slots on a 390px phone leave ~150px for a
   sentence, which wraps to six lines and rebuilds the tall, half-empty card removed from the hub
   this week. The pair pages collapse this grid for the same reason. */
@media(max-width:720px){
  .slotgrid{grid-template-columns:1fr;gap:.45rem}
  .slot{padding:.55rem .7rem}
  .slot .s-k{font-size:.6rem}
  /* [2026-08-10] Pawan, on a phone: "3 buttons in 2 rows with one full row look awakward and kills
     oyther button". Exactly right — two across leaves the third alone on its own row, and a lone
     full-width orange pill reads as the primary action of the page rather than as one of three
     equal choices. It was drawing the eye away from the two above it.
     A flex row cannot avoid that with three items, so the switcher becomes a grid: three equal
     columns, one row, no orphan. A long label wraps to two lines and the three stay the same
     width, which is the trade worth making — symmetry beats one-line labels here.
     (Superseded the min-width:44% fix from 2026-08-09, which produced the very orphan row above.) */
  .lens{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
  .lens button{width:100%;padding:.5rem .35rem;font-size:.8rem;line-height:1.25;min-height:46px}
}

@media(prefers-reduced-motion:reduce){
  .slotgrid{transition:none}
  .lens button{transition:none}
}