/* Capture, trace, draw, naming and the object cards (WP7; core DESIGN §1, §3.6, §7.3).
 * Forked from demo app.css @7aafc93 L173-183 and L185 (capture options, the keep card, the strip in the options grid)
 * Forked from demo app.css @7aafc93 L200-232 (trace and draw: photo and drawing frames, palette, tools, the gesture demo, retake)
 * Forked from demo app.css @7aafc93 L349-375 (naming: preview, drums, dice, presets, pills, traits, the done row)
 * Forked from demo app.css @7aafc93 L397-401 and L405 (tiles, for the temperament tiles)
 * Forked from demo app.css @7aafc93 L677 and L681 (tablet: two option columns, the narrow flow column)
 * Forked from demo app.css @7aafc93 L562-564 and L742-745 (reduced motion: the dice, the gesture demo, the presses)
 * Changes: the flow column is the shell's .flow-host (the demo's main.view.narrow); the busy card is base.css's, fading in
 * after 250 ms here; the done row's fade takes the sheet's card colour inside a sheet. New: the camera key badge and its
 * spoken line (.cap-key, .cap-vh), the hints row with the "put it on a sheet of paper" picture, the wish card's picture,
 * the trace's loop tool, the naming sheet, and the object cards (size, material, role; material swatches; the cut-out that
 * takes the size and hops like its material). Light theme only; every target 60 px or more. */

/* The capture flows' column: the shell's flow host, narrow on a tablet. */
@media (min-width: 640px) {
  .flow-host { max-width: 760px; margin: 0 auto; }
  .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Capture options */
.options { display: grid; gap: var(--tap-gap); }
.option { position: relative; display: flex; align-items: center; gap: 16px; min-height: 96px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow), var(--press);
  padding: 12px 18px; font-weight: 800; font-size: 21px; width: 100%; border: 0; font-family: inherit; color: var(--ink); cursor: pointer; text-align: left; transition: transform var(--t-micro) var(--spring); }
.option:active { transform: scale(.97); }
.option img { width: 68px; height: 68px; object-fit: contain; flex: none; }
.option img.thumb { border-radius: 14px; object-fit: cover; }
.opt-ico { width: 68px; height: 68px; display: grid; place-items: center; flex: none; }
.opt-ico .ico { width: 44px; height: 44px; }
.keep-going .cut-thumb { width: 68px; height: 68px; border-radius: 14px; background: var(--sand); display: grid; place-items: center; flex: none; }
.keep-going .cut-thumb img { width: 58px; height: 58px; object-fit: contain; }
/* "Just the toy, no faces or hands" and "put it on a sheet of paper": one row of pictures under the camera options. */
.cap-hints { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; }
.cap-hints .alone { margin: 6px 0; }
/* While the camera still needs a grown-up's yes: a small key on Camera and Photos (a child alone takes the brush). */
.cap-key { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--butter); color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 0 0 3px var(--card); pointer-events: none; }
.cap-key .ico { width: 18px; height: 18px; }
.cap-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A wish card's picture over the options: what the friend asked for. */
.cap-wish { display: grid; place-items: center; margin: 0 0 12px; }
.cap-wish img { width: 132px; height: 132px; object-fit: contain; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); padding: 8px; }
/* The busy card (base.css) fades in after 250 ms: a quick cut never flashes it. */
.busy.cap-busy { animation-delay: 250ms; }

/* Trace and draw */
.photo-wrap, .draw-wrap { border-radius: var(--radius); overflow: hidden; background: var(--sand); box-shadow: var(--shadow); }
.photo-wrap { width: fit-content; max-width: 100%; margin: 0 auto; }
.trace-canvas, .draw-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
/* Room under the photo for the guidance strip and the Use bar. */
.trace-canvas { width: auto; max-width: 100%; max-height: calc(100dvh - 400px); min-height: 200px; }
/* The canvas takes what the line, colours and the Done bar leave of a phone
   screen; Done itself is sticky, so it is always in reach. */
.draw-wrap { position: relative; background: var(--card); aspect-ratio: 1; width: min(100%, calc(100dvh - 410px)); min-width: min(100%, 240px); margin: 0 auto; }
.palette { display: flex; justify-content: center; gap: var(--tap-gap); margin: 16px 0 4px; flex-wrap: wrap; }
/* The keyline keeps a light colour (yellow) at 3:1 or more against paper. */
.swatch { width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; background: var(--c); box-shadow: var(--shadow), inset 0 -4px 0 rgba(0, 0, 0, .15), inset 0 0 0 2px rgba(24, 22, 18, .4); cursor: pointer; transition: transform var(--t-micro) var(--spring); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); transform: scale(1.06); }
.swatch:active { transform: scale(.96); }
.tools { justify-content: center; margin-bottom: 16px; }
.draw-bar { display: flex; align-items: center; gap: 12px; }
.draw-bar .btn-primary { flex: 1; min-width: 0; }
.tool { width: 76px; min-height: 68px; flex: none; border-radius: 22px; background: var(--card); box-shadow: var(--shadow), var(--press); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; font-weight: 750; font-size: 15px; line-height: 1.1; }
.tool:disabled { opacity: .45; cursor: default; }
/* Picking the toy: a tap or a loop; the demo shows both until the first touch. */
.photo-wrap { position: relative; }
.photo-wrap.working .trace-canvas { opacity: .8; cursor: progress; }
.gesture-demo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.demo-loop { fill: none; stroke: var(--coral-deep); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: demo-draw 4s ease-in-out infinite; }
@keyframes demo-draw { 0% { stroke-dashoffset: 100; opacity: 1; } 40%, 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.demo-tap { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(255, 251, 243, .85);
  box-shadow: 0 0 0 4px var(--coral-deep); pointer-events: none; opacity: 0; animation: demo-tap 4s ease-in-out infinite; }
@keyframes demo-tap { 0%, 42% { transform: scale(.5); opacity: 0; } 52% { transform: scale(1); opacity: 1; } 62% { transform: scale(.8); } 85% { opacity: 1; } 100% { opacity: 0; } }
/* The loop tool after one missed tap (D-48): its demo draws the way round, a little bolder, and starts at once. */
.photo-wrap[data-tool="loop"] .demo-loop { stroke-width: 1.9; animation-duration: 3s; }
.retake { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 8px 8px 8px 18px; background: var(--card); border-radius: 22px; box-shadow: var(--shadow); font-weight: 750; }
.retake-txt { flex: 1; min-width: 0; }
.retake .btn-quiet { flex: none; }
.photo-wrap + .retake + .alone, .photo-wrap + .retake[hidden] + .alone { margin-top: 14px; }

/* Naming */
.naming { margin-top: 4px; }
.name-preview { font-size: 44px; font-weight: 850; text-align: center; letter-spacing: 0; margin: 2px 0 12px; min-height: 56px; overflow-wrap: anywhere; }
.drums { display: grid; grid-template-columns: 1fr 1fr 60px; gap: var(--tap-gap); align-items: center; }
.drum { min-height: 72px; border-radius: 22px; border: 0; background: var(--card); box-shadow: var(--shadow), var(--press); font: inherit; font-size: 30px; font-weight: 850; color: var(--ink); cursor: pointer; transition: transform var(--t-micro) var(--spring); }
/* Not the current name: muted and flat, still 6.6:1 (no opacity). */
.drum.dim { color: var(--muted); box-shadow: var(--shadow); }
.drum:active { transform: scale(.96); }
/* The drums wear the selection band while they make the name (like a chosen pill). */
.drum.on { background: var(--coral-field); color: var(--ink); box-shadow: inset 0 0 0 3px var(--coral-deep), var(--press); }
.dice.spin .ico { animation: dice-spin var(--t-pop) var(--spring); }
@keyframes dice-spin { to { transform: rotate(360deg); } }
.dice { width: 60px; height: 60px; }
/* Names are at least 64 px wide; a row that cannot hold them all wraps, and
   More takes a row of its own under the names. */
.presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: var(--tap-gap); margin: 14px 0 0; }
.presets .more-pill { grid-column: 1 / -1; }
.pill { min-height: var(--tap); border-radius: 999px; border: 0; background: var(--sand); font: inherit; font-weight: 750; font-size: var(--label); color: var(--ink); cursor: pointer; transition: transform var(--t-micro) var(--spring); }
.pill:active { transform: scale(.96); }
/* More is a real control: a raised surface with an ink arrow, not a hair line. */
.more-pill { display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow), var(--press); color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--coral-field); color: var(--coral-deep); box-shadow: inset 0 0 0 3px var(--coral-deep); }
.traits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tap-gap); }
.tile.trait { min-height: 96px; padding: 8px 2px; font-size: 15px; }
.tile.trait .ico { width: 36px; height: 36px; }
.done-row { position: sticky; bottom: 0; padding: 18px 0 var(--edge); margin-top: 10px; z-index: 5;
  background: linear-gradient(to top, var(--paper) 70%, rgba(247, 241, 231, 0)); }
.tile { background: var(--card); border-radius: var(--tile); min-height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px;
  font: inherit; font-weight: 750; font-size: var(--label); color: var(--ink); box-shadow: var(--shadow); border: 3px solid transparent; cursor: pointer; text-align: center; line-height: 1.2; transition: transform var(--t-micro) var(--spring); }
.tile:active { transform: scale(.96); }
.tile[aria-pressed="true"] { background: var(--coral-field); border-color: var(--coral-deep); color: var(--coral-deep); box-shadow: none; }
.tile img { width: 64px; height: 64px; object-fit: contain; }
.tile .ico { width: 44px; height: 44px; }

/* The child's sheets (naming, object cards): warm paper, not the grown-ups' plain card. */
.sheet.name-sheet-box, .sheet.objcards { background: var(--paper); font-size: var(--body); }
.sheet.name-sheet-box .done-row, .sheet.objcards .done-row { background: linear-gradient(to top, var(--paper) 70%, rgba(247, 241, 231, 0)); padding-bottom: 0; }
.name-sheet .name-pic { display: grid; place-items: center; margin: 4px 0 10px; }
.name-sheet .name-pic img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(60, 40, 20, .18)); }
.name-sheet .say { justify-content: center; text-align: center; }
.name-sheet .section-label { margin: 22px 0 10px; }

/* Object cards (D-16, D-38): the cut-out, then one row per question, the guess already chosen, one big check. */
.obj { display: grid; gap: 14px; padding-top: 4px; }
.obj-top { position: relative; display: grid; place-items: center; min-height: 140px; }
.objcards.has-labels .obj-top { min-height: 112px; }
.objcards.has-labels .obj-pic { width: 112px; height: 112px; }
.obj-close { position: absolute; right: -6px; top: -4px; }
.obj-pic { width: 136px; height: 136px; display: grid; place-items: center; transform-origin: 50% 100%; --hop: 12px; --sq: .92; }
.obj-pic img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 9px 7px rgba(60, 40, 20, .2)); transform-origin: 50% 100%;
  transition: transform var(--t-layout) var(--spring); }
/* The size card: smaller in a hand, bigger as a chair. */
.obj-pic[data-size="hand"] img { transform: scale(.72); }
.obj-pic[data-size="chair"] img { transform: scale(1.16); }
/* The material card: it lands the way that stuff would. */
.obj-pic[data-mat="plush"] { --hop: 8px; --sq: .82; }
.obj-pic[data-mat="fabric"] { --hop: 8px; --sq: .86; }
.obj-pic[data-mat="paper"] { --hop: 14px; --sq: .96; }
.obj-pic[data-mat="wood"] { --hop: 10px; --sq: .97; }
.obj-pic[data-mat="plastic"] { --hop: 16px; --sq: .92; }
.obj-pic[data-mat="rubber"] { --hop: 32px; --sq: .76; }
.obj-pic[data-mat="ceramic"] { --hop: 5px; --sq: .99; }
.obj-pic[data-mat="metal"] { --hop: 3px; --sq: 1; }
.obj-pic.hop { animation: obj-hop 560ms cubic-bezier(.3, .7, .4, 1); }
@keyframes obj-hop {
  0% { transform: none; }
  16% { transform: scale(calc(2 - var(--sq)), var(--sq)); }
  46% { transform: translateY(calc(var(--hop) * -1)) scale(.97, 1.04); }
  76% { transform: scale(calc(2 - var(--sq)), var(--sq)); }
  100% { transform: none; }
}
.obj-label { font-size: var(--label); color: var(--muted); font-weight: 750; margin: 0 0 8px; letter-spacing: .03em; }
.obj-row { display: grid; gap: 12px; }
.obj-sizes, .obj-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.obj-materials { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.obj-card { position: relative; min-height: 96px; border-radius: var(--tile); border: 3px solid transparent; background: var(--card); box-shadow: var(--shadow), var(--press);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; margin: 0; font: inherit; font-weight: 750; font-size: 15px;
  line-height: 1.15; color: var(--ink); text-align: center; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform var(--t-micro) var(--spring); }
.obj-card:active { transform: scale(.95); }
.obj-materials .obj-card { min-height: 80px; padding: 6px 2px; }
.obj-sw { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--ink);
  box-shadow: inset 0 -4px 0 rgba(93, 63, 26, .12), inset 0 0 0 2px rgba(24, 22, 18, .12); }
.obj-sw .ico { width: 38px; height: 38px; }
.obj-materials .obj-sw { width: 54px; height: 54px; }
.obj-materials .obj-sw .ico { width: 32px; height: 32px; }
.obj-roles .obj-sw { background: var(--butter); }
/* Each material card shows its stuff: felt speckle, a weave, ruled paper, grain, glossy plastic and rubber, a glazed band, brushed metal. */
.obj-card[data-material="plush"] .obj-sw { background: radial-gradient(circle, rgba(255, 251, 243, .32) 1.2px, transparent 1.9px) 0 0 / 7px 7px, #DDA77F; }
.obj-card[data-material="fabric"] .obj-sw { background: repeating-linear-gradient(45deg, rgba(255, 251, 243, .3) 0 3px, transparent 3px 7px), repeating-linear-gradient(-45deg, rgba(24, 22, 18, .12) 0 3px, transparent 3px 7px), #8AA6E0; }
.obj-card[data-material="paper"] .obj-sw { background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(76, 99, 216, .35) 9px 10px), #FFFDF6; }
.obj-card[data-material="wood"] .obj-sw { background: repeating-linear-gradient(100deg, rgba(90, 50, 20, .22) 0 2px, transparent 2px 9px), #CC9461; }
.obj-card[data-material="plastic"] .obj-sw { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .8) 0 12%, transparent 13%), #F3C341; }
.obj-card[data-material="rubber"] .obj-sw { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5) 0 11%, transparent 12%), #EE6A5C; }
.obj-card[data-material="ceramic"] .obj-sw { background: linear-gradient(transparent 0 62%, rgba(76, 99, 216, .55) 62% 72%, transparent 72%), radial-gradient(circle at 34% 28%, #FFFFFF 0 24%, transparent 62%), #F1ECE2; }
.obj-card[data-material="metal"] .obj-sw { background: linear-gradient(125deg, #8E97A1 0%, #DCE1E6 40%, #9BA4AE 58%, #CBD1D7 100%); }
/* Chosen: the one selection pattern (coral field and keyline) plus a check, readable in grayscale. */
.obj-card[aria-checked="true"] { background: var(--coral-field); border-color: var(--coral-deep); box-shadow: none; color: var(--coral-deep); }
.obj-mark { position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--coral-deep); color: #fff; display: none; place-items: center; }
.obj-mark .ico { width: 15px; height: 15px; stroke-width: 3.2; }
.obj-card[aria-checked="true"] .obj-mark { display: grid; }
.obj-word { max-width: 100%; overflow-wrap: anywhere; }
.obj-go { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: center; padding: 10px 0 2px; margin-top: -4px;
  background: linear-gradient(to top, var(--paper) 72%, rgba(247, 241, 231, 0)); }
/* 6-8: one round check, nothing to read; 9-10: the check with its word. */
.objcards:not(.has-labels) .obj-ok { width: 96px; height: 96px; min-height: 96px; border-radius: 50%; padding: 0; }
.objcards .obj-ok .ico { width: 44px; height: 44px; }
.objcards.has-labels .obj-ok .ico { width: 32px; height: 32px; }

/* Reduced motion: the same information without movement. */
@media (prefers-reduced-motion: reduce) {
  .option:active, .tile:active, .pill:active, .drum:active, .swatch:active, .obj-card:active { transform: none; filter: brightness(.93); transition: filter var(--t-calm); }
  .swatch[aria-pressed="true"] { transform: none; }
  .dice.spin .ico, .obj-pic.hop { animation: none; }
  .demo-loop { animation: none; stroke-dashoffset: 0; stroke-dasharray: 3 3; }
  .demo-tap { animation: none; opacity: 1; transform: none; }
  .obj-pic img { transition: none; }
}