/* ============================================================
   toy.css — the Sketch-O-Matic itself: the red plastic, the
   powder screen, the two knobs, the rail, and the instruction
   slip that comes with it.

   Lifted verbatim out of sketch.html when a second page needed
   the same object (elephant.html). Both pages load it after
   hopala.css and site.css, because the room, the caption and
   the slip are painted with the house tokens.

   THE OBJECT IS NOT THEMED. Everything from .room down to the
   shake keyframes is the original device; it is made of
   plastic, not of design tokens, and it does not get restyled
   to match a page. What a page may set is the size of the box
   it sits in — see the container queries on .room / .stage.
   ============================================================ */
/* ── ported from the verified _source-toy.html ──────────────────
   The object keeps its red-plastic identity: every rule below is
   the original, with three deliberate edits and nothing else.

   a) The toy's custom properties moved from :root onto .room, so
      they cannot collide with hopala's tokens of the same name
      (--line, --paper, --ink all mean different things in the two
      systems). Three were renamed for the same reason: --line →
      --groove, --paper/--paper-ink/--paper-edge → --slip-*.
   b) The "room" is now hopala paper, not a grey studio gradient,
      and its dark-theme variants are gone — this is a cream-paper
      page, and paper is light. The device, well, knobs and rail
      are untouched: they never themed anyway ("it's made of
      plastic, not themes").
   c) .stage sizing is driven by the toy's own column rather than
      the raw viewport, because there is a control panel beside it
      now. On a laptop that column is height-capped as well (see
      section 3) so the whole page fits one screen; on a phone the
      toy gets a screen to itself and the page scrolls past it.
   ─────────────────────────────────────────────────────────────── */

.room {
  /* The object. These never change — it's made of plastic, not themes. */
  --red-hi:  #E3493C;
  --red:     #CB2A22;
  --red-lo:  #A81C15;
  --red-dk:  #7E120C;
  --powder:  #A9AC9D;
  --groove:  #2F332C;
  --ridge:   #C4C7B6;
  --knob:    #F3F1E9;

  --cast:    .30;   /* contact shadow, eased back to read on cream */

  --display: "Futura", "Futura PT", "Century Gothic", "Avenir Next", Avenir,
             "Trebuchet MS", system-ui, sans-serif;
  --mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  display: grid;
  place-items: center;
  gap: 1.6svh;
  padding-block: 1rem 1.4rem;
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}

/* ── the toy ──────────────────────────────────────────────── */

.stage {
  /* one unit drives every dimension inside the device. svh, never vh: on a
     phone vh is the *largest* viewport, so mobile browser chrome would crop
     the bottom of the device off its own screen. */
  font-size: clamp(5px, min(2.05vw, 2.0svh), 15px);
  position:relative;
  transform: translate3d(var(--dx,0px), var(--dy,0px), 0) rotate(var(--rz,0deg));
  transition: transform .5s cubic-bezier(.2,1.5,.45,1);
}
/* Size the toy against its own column rather than the viewport, so the
   control panel beside it doesn't squash the device off the grid. The
   laptop layout swaps this container over to `size` and adds a cqh term —
   see "the one-screen bench" at the end of the sheet. */
@supports (container-type: inline-size) {
  .room  { container-type: inline-size; }
  .stage { font-size: clamp(5px, min(2.2cqw, 2.6svh), 15px); }
}
.stage.held { transition:none; }

.stage::after { /* contact shadow on the ground */
  content:"";
  position:absolute; left:6%; right:6%; bottom:-1.6em; height:3em;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,var(--cast)), rgba(0,0,0,0) 72%);
  filter: blur(.35em);
  z-index:-1;
}

.device {
  position:relative;
  width: 44.5em; height: 34em;
  border-radius: 1.5em;
  background:
    linear-gradient(180deg, var(--red-hi) 0%, var(--red) 13%, #BE241D 74%, #9E1811 100%);
  box-shadow:
    inset 0  .16em 0    rgba(255,255,255,.42),
    inset 0 -.28em .5em rgba(0,0,0,.42),
    inset  .5em 0 .9em  rgba(0,0,0,.14),
    inset -.5em 0 .9em  rgba(0,0,0,.14),
    0 1.6em 2.6em -.6em rgba(0,0,0,.42),
    0 .3em .7em rgba(0,0,0,.24);
  touch-action:none;
  cursor: grab;
}
.device:active { cursor: grabbing; }
.device::after { /* molded plastic grain */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 9em 9em;
  opacity:.13; mix-blend-mode:soft-light; pointer-events:none;
}

.brand {
  position:absolute; top:0; left:0; right:0; height:3.1em;
  display:flex; align-items:center; justify-content:center;
  font-size:1em; letter-spacing:.34em; text-indent:.34em;
  font-weight:500; color:#FFF4F2;
  text-shadow: 0 .07em 0 rgba(96,12,8,.55), 0 -.04em 0 rgba(255,255,255,.28);
  pointer-events:none;
}
.brand b { font-weight:500; font-size:1.45em; }
.brand i {
  font-style:normal; font-size:.78em; letter-spacing:.2em;
  opacity:.62; margin-left:1.1em; padding-left:1.1em;
  border-left:.08em solid rgba(255,255,255,.32);
}

/* ── screen ───────────────────────────────────────────────── */

.well {
  position:absolute; top:3.1em; left:5.3em;
  width:33.9em; height:23.2em;
  border-radius:.42em;
  background: var(--powder);
  box-shadow:
    inset 0 .2em .55em rgba(0,0,0,.55),
    inset 0 -.09em 0 rgba(255,255,255,.22),
    0 0 0 .3em #99150F,
    0 0 0 .38em rgba(0,0,0,.18);
  overflow:hidden;
  cursor:default;
}
.glass { position:absolute; inset:0; }
.glass::before { /* aluminum powder grain + brushed settle */
  content:""; position:absolute; inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(97deg, rgba(255,255,255,.05) 0 .09em, rgba(0,0,0,.035) .09em .2em);
  background-size: 7em 7em, auto;
  opacity:.5; mix-blend-mode:overlay; pointer-events:none;
}
.glass::after { /* glass sheen + vignette, above the drawing */
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(148deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.07) 24%, rgba(255,255,255,0) 46%),
    radial-gradient(120% 110% at 50% 42%, rgba(0,0,0,0) 52%, rgba(0,0,0,.20) 100%);
}
#screen {
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:1;
}
.stylus {
  position:absolute; z-index:2; width:.5em; height:.5em;
  margin:-.25em 0 0 -.25em; border-radius:.1em;
  background: var(--groove);
  box-shadow: 0 0 0 .07em rgba(226,229,216,.75), 0 .04em .1em rgba(0,0,0,.3);
  pointer-events:none;
}

/* ── knobs ────────────────────────────────────────────────── */

.knob {
  position:absolute; bottom:1em;
  width:5.7em; height:5.7em; border-radius:50%;
  padding:0; border:0; background:none;
  cursor:grab; touch-action:none; outline:none;
}
.knob.grabbing { cursor:grabbing; }
.knob.l { left:2.05em }
.knob.r { right:2.05em }
.knob::before { /* recessed socket in the plastic */
  content:""; position:absolute; inset:-.52em; border-radius:50%;
  background: radial-gradient(circle at 50% 32%, #97160F, #7A110B 72%, #650D08);
  box-shadow:
    inset 0 .14em .34em rgba(0,0,0,.66),
    inset 0 -.08em 0 rgba(255,255,255,.1),
    0 .1em 0 rgba(255,255,255,.13);
}
.dome, .spin, .cap, .gloss { position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.dome {
  background: radial-gradient(circle at 41% 28%,
    #FFFEF8 0%, #F2EFE5 32%, #E0DBCC 58%, #BFB9A8 84%, #9A9483 100%);
  box-shadow:
    inset 0 -.2em .38em rgba(88,82,66,.34),
    inset 0 .1em .1em rgba(255,255,255,.9),
    0 .26em .42em rgba(0,0,0,.38);
}
.spin { transform: rotate(var(--rot, 0rad)); }
.ridges {
  position:absolute; inset:0; border-radius:50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(120,112,94,.26) 0deg 4.5deg,
    rgba(255,255,255,.34) 4.5deg 9deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 79%, #000 84%);
          mask-image: radial-gradient(circle closest-side, transparent 79%, #000 84%);
}
.mark {
  position:absolute; top:3.5%; left:50%;
  width:.34em; height:.72em; margin-left:-.17em; border-radius:.17em;
  background: linear-gradient(180deg, rgba(74,68,54,.72), rgba(74,68,54,.2));
  box-shadow: 0 .05em 0 rgba(255,255,255,.7);
}
.cap {
  inset:19%;
  background: radial-gradient(circle at 38% 30%, #FFFEFA, #F1EEE3 52%, #D5D0C1);
  box-shadow: 0 .07em .14em rgba(0,0,0,.2), inset 0 .05em 0 #fff;
}
.gloss {
  inset:5%;
  background: linear-gradient(153deg,
    rgba(255,255,255,.78) 0%, rgba(255,255,255,.14) 30%, rgba(255,255,255,0) 54%);
}
.knob:focus-visible::after,
.knob.hint::after {
  content:""; position:absolute; inset:-.52em; border-radius:50%;
  box-shadow: 0 0 0 .2em rgba(255,255,255,.92), 0 0 .8em rgba(255,255,255,.5);
}
.knob.hint::after { animation: pulse .6s ease-out 2; }
@keyframes pulse {
  from { opacity:0; transform:scale(.93) }
  45%  { opacity:1 }
  to   { opacity:0; transform:scale(1.08) }
}

/* ── control rail ─────────────────────────────────────────── */

.rail {
  position:absolute; bottom:2.5em; left:8.9em; right:8.9em;
  display:flex; gap:.55em; justify-content:center; align-items:stretch;
}
.tab {
  flex:1 1 0; min-width:0;
  font-family:var(--display); font-size:.82em; font-weight:500;
  letter-spacing:.15em; text-indent:.15em;
  color:#FFEDEA;
  padding:.72em .2em; border:0; border-radius:.34em;
  background: linear-gradient(180deg, #CE2E26, #A81C15 92%);
  box-shadow:
    inset 0 .1em 0 rgba(255,255,255,.32),
    inset 0 -.12em .2em rgba(0,0,0,.46),
    0 .14em .22em rgba(0,0,0,.3);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.5em;
  text-shadow: 0 .07em 0 rgba(88,10,6,.6);
  transition: transform .06s, box-shadow .06s;
}
.tab:hover { background: linear-gradient(180deg, #D8362D, #B32019 92%); }
.tab:active {
  transform: translateY(.07em);
  box-shadow: inset 0 .14em .3em rgba(0,0,0,.6);
}
.tab:focus-visible { outline:.16em solid #FFF; outline-offset:.16em; }
.led {
  width:.42em; height:.42em; border-radius:50%; flex:none;
  background:#FFE9A8;
  box-shadow: 0 0 .32em #FFD972, inset 0 0 .1em rgba(140,90,0,.5);
}
.tab[aria-pressed="false"] .led {
  background:#6E120D; box-shadow: inset 0 .04em .1em rgba(0,0,0,.7);
}

.plate {
  position:absolute; bottom:1.05em; left:8.9em; right:8.9em;
  text-align:center;
  font-family:var(--mono); font-size:.56em; letter-spacing:.26em;
  color: rgba(255,255,255,.34);
  text-shadow: 0 .07em 0 rgba(90,12,8,.5);
  pointer-events:none; white-space:nowrap; overflow:hidden;
}

/* ── shake ────────────────────────────────────────────────── */

@keyframes rattle {
  0%,100% { transform: translate(0,0) rotate(0deg) }
  8%   { transform: translate(-1.5%,  .5%) rotate(-.85deg) }
  19%  { transform: translate( 1.7%, -.6%) rotate( .95deg) }
  31%  { transform: translate(-1.6%, -.4%) rotate(-.75deg) }
  43%  { transform: translate( 1.4%,  .6%) rotate( .8deg) }
  55%  { transform: translate(-1.1%,  .3%) rotate(-.55deg) }
  68%  { transform: translate(  .9%, -.4%) rotate( .45deg) }
  81%  { transform: translate( -.5%,  .2%) rotate(-.25deg) }
  92%  { transform: translate(  .2%, -.1%) rotate( .1deg) }
}
.device.shaking { animation: rattle .82s cubic-bezier(.36,.07,.19,.97); }

/* ── caption ──────────────────────────────────────────────── */

.caption {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.4rem 1.4rem;
  font-family:var(--sans); font-size:.9rem; line-height:1.5;
  color: var(--muted-soft);
  text-align:center;
}
.caption span { white-space:nowrap; }
.caption b { font-weight:600; color:var(--ink); }

/* ── instruction slip ─────────────────────────────────────── */

dialog.slip {
  --slip-paper: #FCFAF1;
  --slip-ink:   #141413;
  --slip-edge:  rgba(20,20,19,.14);
  --slip-red:   #CB2A22;
  --slip-accent:#A81C15;
  --slip-face:  "Assistant", "Arial Hebrew", "Segoe UI", sans-serif;

  border:0; padding:0; max-width: 32rem; width: calc(100vw - 3rem);
  /* The UA centres a modal dialog with `inset:0; margin:auto`, and hopala.css
     resets `margin:0` on everything — which quietly pins both slips to the
     corner of the viewport. Put the centring back. */
  margin: auto;
  background: var(--slip-paper); color: var(--slip-ink);
  font-family: var(--slip-face);
  border-radius: 14px 17px 14px 18px / 17px 14px 18px 14px;
  box-shadow: 6px 8px 0 rgba(20,20,19,.16), 0 0 0 1.5px var(--slip-edge);
}
dialog.slip::backdrop { background: rgba(20,20,19,.5); }
.slip-in { padding: 1.5rem 1.6rem 1.3rem; }
.slip h2 {
  margin:0; font-family:var(--serif); font-size:1.35rem; font-weight:700;
  letter-spacing:-.012em; text-wrap:balance;
}
.slip .rule { height:2.5px; background:var(--slip-red); margin:.6rem 0 1.1rem;
              border-radius:2px 6px 2px 5px / 5px 2px 6px 2px; }
.slip dl { margin:0; display:grid; grid-template-columns: 5.2rem 1fr; gap:.75rem 1rem; }
.slip dt {
  font-size:.92rem; font-weight:700;
  color: var(--slip-accent); padding-top:.1rem;
}
.slip dd { margin:0; font-size:.98rem; line-height:1.6; }
.slip footer {
  margin-top:1.3rem; padding-top:.9rem;
  border-top:1px solid var(--slip-edge);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.slip footer p {
  margin:0; font-size:.9rem;
  opacity:.62; font-style:italic;
}
.slip button {
  font-family:var(--slip-face); font-size:.92rem; font-weight:600;
  padding:.5rem 1rem; cursor:pointer;
  border-radius: 12px 15px 12px 16px / 15px 12px 16px 12px;
  border:1.5px solid currentColor; background:none; color:inherit;
  white-space:nowrap;
}
.slip button:hover { background: rgba(203,42,34,.1); }
.slip button.go { background: var(--ink); color:var(--paper); border-color:var(--ink); }
.slip button.go:hover { background:var(--clay-deep); border-color:var(--clay-deep); color:#fff; }
.slip button:focus-visible { outline:2.5px solid var(--clay-text); outline-offset:3px; }

@media (prefers-reduced-motion: reduce) {
  .device.shaking { animation:none; }
  .knob.hint::after { animation:none; }
  .stage { transition:none; }
  .tab { transition:none; }
}