NestQuest/design/PANEL-SPEC.md

# Panel spec — kids' DAKOS wall panel

Screens `1a`, `1b`, `1j`, `1c` of the mockups. Two cards:
`nestquest-party-board-card` (§2) and `nestquest-quest-log-card` (§3–5).

## 1. Frame and constraints

- **Canvas** 1920×1080, landscape, fixed. No scrolling — content must fit. Every screen in
  the mockups measures exactly 1920×1080 with no overflow; keep it that way.
- **Viewing distance** ~3 ft. **No text below 22px.** Meta lines are 22px/600 Nunito;
  quest titles 30px/700 Cinzel; section heads 32px.
- **Contrast** every ink token is ≥4.5:1 on parchment. Do not introduce alpha-muted text.
- **Ground** `--nq-p-parchment` + `--nq-p-vignette`, CSS only, no image assets.
- **Double frame** inset 26px (`--nq-p-frame-outer`, radius 14px) and inset 36px
  (`--nq-p-frame-inner`, radius 8px), both `pointer-events: none`.
- **Dock** bottom strip, 84px, inset 46px, radius 14px, `--nq-p-dock-bg`. Weather only.
  **Nothing in the dock is tappable** (D-006).
- **No login.** Every action comes from the kiosk HA user; the kiosk user is never in the
  admin allowlist.

## 2. The Party — attract state (1a)

Default view on the wall. Layout top to bottom:

1. **Wordmark row** at y=64. Rule · monogram · `NestQuest` (66px/900 Cinzel Decorative
   display, brand gradient via `background-clip: text`) · rule — the horizontal lockup of
   `design/logos/NestQuest_Logo.png`. The monogram is an 80px inline SVG (no raster, no
   remote asset): a compass rose — four long cardinal points, four short diagonal points,
   a ring broken by the points — around a d20 hexagon with facet lines and a knocked-out
   Cinzel Decorative "N", filled with the brand gradient (`--nq-brand-blue` →
   `--nq-brand-purple`, 135°). Gaps are SVG masks, so the mark stays transparent over the
   parchment.
2. **Kicker** `The Party · <weekday>, <Month D>` — 21px/600 Cinzel, tracking .30em, uppercase.
3. **Adventurer plates**, 3-up grid, 56px gap, page inset 110px, top y=262. One plate per
   child returned by the party sensor, in configured order.
4. **Hint line** `Tap your crest to open your Quest Log`, 27px/600 Nunito, y≈930.
5. **Dock.**

### 2.1 Adventurer plate (present)

Radius 20px, `--nq-p-card-panel`, 2px `--nq-p-panel-border`, `--nq-p-panel-shadow`,
padding 44px 28px 40px, contents centred, 26px gap. **The whole plate is the tap target**
(≥188px wide, ≥600px tall — far above minimum).

- **Crest** 188×214, shield via `clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%)`,
  `--nq-p-crest`, inset ring `inset 0 0 0 4px rgba(255,255,255,.22)`, child's initial
  82px/700 display in white.
- **Name** 48px/700 Cinzel, `--nq-p-ink`, tracking .02em.
- **Presence pill** radius 9999px, `#e8f4ea` on `rgba(22,120,60,.35)`, `check-circle` 22px
  `#157a3c`, label `Home today` 19px/600 Cinzel uppercase `#146b36`.
- **Progress line** `N of M quests claimed` 26px/700 Cinzel `--nq-p-ink-secondary`.
- **Progress bar** full width, 16px, radius 9999px, track `rgba(92,62,26,.18)` with 1px
  border, fill `--nq-brand-gradient-h`.

### 2.2 Adventurer plate (away)

Same geometry, muted: `linear-gradient(#f2ecdd, #e6dcc6)`, **2px dashed** border, no lift
shadow. Crest uses `--nq-p-crest-away`; initial stays **full-opacity white** (never alpha).
Name in `--nq-p-ink-away`. Pill: `tent` icon, label `On travels`, neutral fill. Progress
line reads `Returns <weekday>, <Mon D>`; empty progress track, no fill. **Not tappable** —
the plate must not navigate, since the child has no instances.

### 2.3 Dock

`cloud-sun` 40px · temperature 38px/800 Nunito `--nq-p-dock-ink` · 1px divider ·
condition + high/low 26px/600 `--nq-p-dock-ink-secondary` · divider · one short forecast
phrase. All read from the configured `weather_entity`; if unset, render the dock with date
and time only rather than removing it (the strip is part of the frame).

## 3. Quest Log (1b)

Reached by tapping a present crest. Header at y=56, page inset 62px:

- **Return control** first in the header, left of the crest: a `--nq-p-button-height`
  72px button, radius 10px, `rgba(92,62,26,.1)` with a 2px `rgba(92,62,26,.5)` border
  (the confirm dialog's **Not yet** treatment), `chevron-left` 34px + `The Party`
  26px/700 Cinzel `--nq-p-ink`, 28px header gap to the crest. Tapping it takes the same
  path as the idle return (§3.5) — navigate to `board_path` — immediately. Press
  feedback `scale(.98)`, `--nq-dur-micro`. Not rendered when no `board_path` is
  configured. The party board is the main display and has no return control; the
  Quest complete screen (§5) keeps its auto-return.
- Small crest 96×110 (initial 44px/700 display).
- Title `<Name>'s Quest Log` 56px/700 display.
- Sub `<weekday>, <Month D> · N of M claimed` 20px/600 Cinzel, tracking .24em, uppercase.
- **Remaining block** right-aligned: radius 14px panel, d20 mark 44px with the remaining
  count, `N quests left` 28px/700 Cinzel, and a party line
  `Party progress · X of Y today` 22px/600 Nunito.

### 3.1 Window columns

Three equal columns, 34px gap, top y=236, one per window — **Morning** (until 11:59 AM),
**Afternoon** (12:00–5:00 PM), **Evening** (5:00–9:00 PM). Column head: icon
(`sunrise` / `sun` / `moon`) 34px, name 32px/700 Cinzel, sub-label 21px/600 Cinzel
uppercase with the window's clock range, right-aligned `done/total` 26px/700 Cinzel,
14px bottom padding, `--nq-p-rule` underline.

Cards stack at `--nq-p-quest-gap` (24px). Order within a column: **incomplete first,
sealed below**. A window with no quests renders its head and nothing else — do not
collapse the column, the three-column rhythm is the layout.

### 3.2 Quest card — open

`--nq-p-quest-min-height` 116px, radius 12px, `--nq-p-card-open`, 1px
`--nq-p-card-border`, `--nq-p-card-shadow`, padding 22px, 22px gap, row layout:

1. **Icon tile** 64×64, radius 10px, `--nq-p-icon-tile`, glyph 34px white — the
   definition's icon, resolved from its namespaced key (`ADMIN-SPEC.md` §3.3):
   `lucide:<name>` draws the curated Lucide glyph **stroked** (fill none, stroke-width 2,
   round caps and joins); `fa:<name>` draws the Font Awesome Free Solid glyph **filled** (any icon in the full
   set, not only the quick picks);
   `emoji:<grapheme>` renders the emoji **as text**. A legacy bare name resolves as
   `lucide:<name>`. No icon, or any key that does not resolve (unknown namespace or name,
   malformed emoji), falls back to the **star** glyph. Glyph data is bundled from the
   shared registry — nothing is fetched at runtime.
2. **Text** title 30px/700 Cinzel `--nq-p-ink`; meta 22px/600 Nunito
   `--nq-p-ink-secondary` reading `Due by <h:mm A>`. If past due:
   `Overdue · due <h:mm A>` in 22px/700 Cinzel uppercase, tracking .10em,
   `--nq-p-ink-late`.
3. **Complete button** `--nq-p-button-height` 72px × min 150px, radius 10px,
   `--nq-brand-gradient`, `check` 30px + `Complete` 24px/700 Cinzel white,
   `box-shadow: 0 3px 0 rgba(40,20,60,.35)`.

Both the card body and the button open the confirm dialog (§4). Press feedback:
`scale(.98)`, `--nq-dur-micro`.

### 3.3 Quest card — sealed

`--nq-p-card-done`, `opacity: .82`, no shadow, **not tappable**. Icon tile
`--nq-p-icon-tile-done` with the glyph in `--nq-p-ink-secondary`. The sealed tile keeps
the static star glyph — it does **not** render the definition icon — alongside the wax
seal below. Title 30px/700 Cinzel
`--nq-p-ink-muted` with `text-decoration: line-through`. Meta reads
`Claimed <h:mm A>` 22px/600 Nunito `--nq-p-ink-secondary`.

**Wax seal** `--nq-p-seal-size` 78px circle, `--nq-p-seal`, `--nq-p-seal-shadow`,
`check` 38px in `rgba(255,235,235,.95)`, absolutely positioned `right: 16px; top: -12px`,
rotated a few degrees — **vary the rotation per card** (−9°, +6°, −4° in the mockup) so the
board looks stamped by hand, not templated. Entrance: fade + `scale(1.15 → 1)`,
`--nq-dur-base`, `--nq-ease-out`.

### 3.4 Party roll-up

An optional dashed panel in the afternoon column: label `Party roll-up` 18px/600 Cinzel
uppercase, body 23px/600 Nunito `--nq-p-ink-secondary` — one or two sentences on the other
children ("Jordyn has finished her log. Chloe is on travels until Sunday."). Read-only.

### 3.5 Idle return

40 s with no touch → navigate back to the party board view. Reset on any pointer or touch
event. The card owns this; TouchHub Auto-Return must be set longer than 40 s.

## 4. Complete confirm (1j)

Modal over the dimmed log — scrim `rgba(30,20,10,.62)` over the live board.

Dialog 1000px wide at `top: 196px; left: 460px`, radius 20px, parchment panel with 3px
`rgba(92,62,26,.5)`, `box-shadow: 0 26px 60px rgba(20,10,0,.5)`, padding 64px 68px 56px.

- Header row: 104px icon tile (radius 12px, brand gradient, glyph 56px) · window kicker
  21px/600 Cinzel uppercase tracking .24em · quest title 58px/700 display.
- Body 32px/600 Nunito `#3f2f1c`: `Mark this quest complete? Once the seal is set, only a
  parent can undo it.`
- Buttons, 24px gap, both `--nq-p-confirm-button` 108px tall:
  **Not yet** flex 1, `rgba(92,62,26,.1)` with 2px border, `x` 34px + 30px/700 Cinzel;
  **Complete** flex 2, brand gradient, `check` 38px + 32px/700 Cinzel white.
- Dialog enters with fade + `scale(.96 → 1)`, `--nq-dur-modal`, `--nq-ease-out`.
- Dismiss: **Not yet**, scrim tap, or 15 s of no input.

On confirm, call the completion service optimistically, stamp the seal, and re-sort the
column. On service failure, revert the card and surface a single-line parchment toast.

## 5. Quest complete (1c)

Shown when the last instance for a child's day is completed; auto-returns to the board
after 12 s (countdown line `Returning to The Party in N seconds`, 25px/600 Nunito).

- Large seal 168px at y=96 (`check` 86px), rotated −6°, `0 10px 24px rgba(60,10,20,.42)`.
- `Quest complete` 86px/900 display, brand-gradient text fill.
- Sub 34px/600 Nunito `--nq-p-ink-secondary`, max-width 1000px, centred, `text-wrap: pretty`:
  names the child, the date, and how the day went.
- **Stat blocks** 4-up at y=540, inset 200px, 26px gap: radius 16px parchment panels,
  numeral 58px/900 Cinzel, label 17px/600 Cinzel uppercase tracking .14em —
  `Quests claimed`, `On time`, `Late`, `The Party` (household X/Y).
- Dock switches to the evening variant (`cloud-moon`).

## 6. Accessibility and input

- Minimum tap target on this surface is the quest card itself (116px) and the 72px button;
  nothing interactive is smaller than 72px.
- 24px between adjacent tap targets so a stray finger cannot claim the wrong quest.
- No hover states — this is a touch-only surface. Provide `:active` feedback only.
- No animation loops. Entrances only, per the CubeCraft motion rules.