/* Gesture — design language
 *
 * Not sleek. Not corporate. Not another dark-mode dashboard with a geometric
 * logo. Round, warm, a little odd, and a colour that shouldn't work as well as
 * it does: dusty rose on deep plum, which is the pink-pig-on-a-purple-pencil
 * feeling the seed doc is built around.
 *
 * Two modes, one stylesheet. Circus is the full tent. Quiet strips the
 * saturation, the motion and the metaphor without stripping the warmth —
 * it must never read as the "lite" version, so it gets more space, not less.
 */

:root {
  --bg:        #16101f;
  --bg-2:      #1e1630;
  --surface:   #251c38;
  --surface-2: #2f2447;
  --ink:       #f7efe6;
  --ink-soft:  #c9bcd4;
  /* Lightened from #8d81a0 so even the faintest small print clears WCAG AA
   * (4.5:1) on the lighter --surface, not just on the page background. */
  --ink-faint: #9c90b3;
  --pink:      #ff87b4;
  --pink-deep: #d95d8c;
  --purple:    #8b6bc4;
  --gold:      #f2c98d;
  --line:      rgba(247, 239, 230, 0.10);

  --radius:    22px;
  --radius-sm: 14px;
  --ease:      cubic-bezier(.22, .68, .36, 1);

  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand",
          system-ui, -apple-system, "Segoe UI", sans-serif;
}

html[data-mode="quiet"] {
  --bg:        #14131a;
  --bg-2:      #1a1922;
  --surface:   #1f1e29;
  --surface-2: #272634;
  --ink:       #f0eef2;
  --ink-soft:  #b8b4c2;
  --ink-faint: #948fa0;
  --pink:      #b9a8d0;
  --purple:    #7d76a0;
  --gold:      #d8cdb8;
  --line:      rgba(240, 238, 242, 0.09);
}

* { box-sizing: border-box; }

/* Several components below set `display`, which outranks the UA stylesheet's
 * `[hidden] { display: none }` and leaves them stubbornly visible. The app
 * hides things by setting `.hidden`, so this has to win. */
[hidden] { display: none !important; }

/* Present to screen readers, absent from the page — for headings and labels
 * that orient a non-visual user without cluttering the visual design. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-2) 0%, var(--bg) 60%);
  background-attachment: fixed;
}

/* Motion here is information — the jiggle is the whole intervention — but we
 * must never shake a large object in the vision of someone with a vestibular
 * condition. So: collapse every animation and transition to instant (this
 * cannot break `animationend` handlers the way `animation: none` can), and
 * replace the shake with a steady, bright halo that carries the same "come
 * back to your body" signal without any movement. The check-in also opens a
 * modal and rings the bell, so the cue is never motion alone. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .barnaby.jiggle .b-glow { opacity: .85 !important; }
}

/* ---------------------------------------------------------------- layout */

#app { min-height: 100dvh; }

.app-notice {
  position: fixed; z-index: 100; top: 14px; left: 50%;
  transform: translateX(-50%); width: min(560px, calc(100% - 32px));
  margin: 0; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .88rem; text-align: center;
}
.app-notice.error { border-color: var(--pink); color: var(--ink); }

.screen { min-height: 100dvh; display: grid; place-items: center; padding: 28px 20px 120px; }
.screen[hidden] { display: none; }

.stage {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: rise .5s var(--ease) both;
}
.stage.wide { max-width: 940px; }

html[data-mode="quiet"] .stage { gap: 28px; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- type */

.wordmark {
  font-size: clamp(46px, 12vw, 76px);
  margin: 6px 0 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, var(--pink), var(--gold) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}
html[data-mode="quiet"] .wordmark {
  background: none; color: var(--ink); font-weight: 700;
}

.tagline {
  text-align: center; color: var(--ink-soft);
  margin: 0 0 10px; font-size: 1.02rem;
}
html[data-mode="quiet"] .tagline { display: none; }

.say {
  font-size: 1.16rem;
  line-height: 1.6;
  margin: 0;
  color: var(--ink);
  white-space: pre-line;
  text-wrap: pretty;
}
html[data-mode="circus"] .say::before {
  content: "";
  display: inline-block; width: 10px; height: 10px;
  margin-right: 9px; border-radius: 50%;
  background: var(--pink);
  vertical-align: 0.12em;
}

.hint  { color: var(--ink-faint); font-size: .88rem; margin: 6px 0 0; }
.muted { color: var(--ink-faint); }

.field-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .93rem; color: var(--ink-soft); margin-bottom: 8px;
  font-weight: 600;
}

/* ---------------------------------------------------------------- door */

.door { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.door-q { font-size: 1.22rem; margin: 14px 0 4px; text-align: center; }

.door-choices { display: grid; gap: 12px; width: 100%; }

.door-choice {
  display: grid; gap: 3px; text-align: left;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: inherit; font-size: 1rem;
  cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s, background .18s;
}
.door-choice:hover { transform: translateY(-2px); border-color: var(--pink); background: var(--surface-2); }
.door-choice strong { font-size: 1.06rem; }
.door-choice em { color: var(--ink-faint); font-style: normal; font-size: .9rem; }
.door-emoji { font-size: 1.5rem; }
.door-foot { color: var(--ink-faint); font-size: .85rem; text-align: center; margin: 4px 0 0; }

/* ---------------------------------------------------------------- forms */

.begin-form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; }
.field.row { flex-direction: row; gap: 14px; }
.field.row > div { flex: 1; }

input[type="text"], input[type="time"], input[type="number"], textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit; font-size: 1rem;
  padding: 13px 15px;
  resize: vertical;
}
input:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--pink); outline-offset: 2px;
}
::placeholder { color: var(--ink-faint); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, var(--purple), var(--pink), var(--gold));
}
input[type="range"]::-moz-range-track {
  height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, var(--purple), var(--pink), var(--gold));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -10px;
  border-radius: 50%; background: var(--ink);
  border: 4px solid var(--bg); box-shadow: 0 3px 14px rgba(0,0,0,.5);
}
input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border: 4px solid var(--bg);
  border-radius: 50%; background: var(--ink);
}

.battery {
  height: 12px; border-radius: 99px; background: var(--surface);
  overflow: hidden; border: 1px solid var(--line); margin-top: 10px;
}
.battery-fill {
  height: 100%; width: 50%;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  transition: width .3s var(--ease);
}

/* ---------------------------------------------------------------- acts */

/* Six cards need to fit the 560px stage in one row without wrapping a
 * lonely sixth onto its own line — 84px is the largest minimum that still
 * clears 6*84 + 5*8 (gaps) under 560px, with room to spare for the 74px
 * art slot inside each card's padding. */
.act-kinds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px; margin-bottom: 12px;
}

/* Each act is a card headed by Barnaby performing it. */
.act-kind {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px 5px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); font-family: inherit; font-size: .82rem;
  cursor: pointer; transition: all .16s var(--ease);
}
.act-kind:hover { border-color: var(--pink); transform: translateY(-2px); }
.act-kind[aria-pressed="true"] {
  border-color: var(--pink); background: var(--surface-2);
  color: var(--ink); font-weight: 700;
}
/* Name sits above the art so the horizontal props — the hoop, the pole, the
 * bar — never cross the label and read as a strikethrough. */
.act-kind .act-name { order: -1; line-height: 1.15; text-align: center; }
.act-kind .act-art-slot { width: 74px; height: 72px; display: grid; place-items: center; }
.act-kind .act-art-slot svg { width: 100%; height: 100%; }

/* Act art is a still illustration — never breathing, never jiggling. */
.barnaby.act-art .b-body { animation: none; }

/* The pose that heads each in-play act on the day screen. */
.ball .act-mini { width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
.ball .act-mini svg { width: 100%; height: 100%; }

.act-input { display: flex; gap: 8px; }
.act-input input { flex: 1; }

.act-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.act-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
}
.act-list li .k { color: var(--ink-faint); font-size: .84rem; }
.act-list li .x {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--ink-faint); font-size: 1.1rem; font-family: inherit;
}

/* ---------------------------------------------------------------- balls */

.balls { display: grid; gap: 12px; }

.ball {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .18s var(--ease), opacity .25s, background .18s;
  text-align: left; width: 100%; font-family: inherit; font-size: 1rem;
  color: var(--ink);
}
.ball:hover { transform: translateY(-2px); background: var(--surface-2); }
.ball .t { display: grid; }
.ball .t b { font-weight: 600; }
.ball .t span { color: var(--ink-faint); font-size: .84rem; }
.ball.done { opacity: .45; }
.ball.done .t b { text-decoration: line-through; }

.held { padding: 16px 18px; border-radius: var(--radius); background: rgba(255,255,255,.03); border: 1px dashed var(--line); }
.held-label { margin: 0 0 4px; color: var(--ink-soft); font-size: .93rem; }
.held .act-list li { background: transparent; border: 0; padding: 4px 0; }

/* ---------------------------------------------------------------- rhythm */

.rhythm-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.rhythm-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 15px 18px; background: none; border: 0; color: var(--ink-soft);
  font-family: inherit; font-size: .95rem; cursor: pointer; text-align: left;
}
.rhythm-head .chev { transition: transform .2s var(--ease); }
.rhythm-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.rhythm-body { padding: 0 18px 18px; }
.rhythm-why { margin: 0 0 12px; color: var(--ink); font-size: .95rem; }
.factors { width: 100%; border-collapse: collapse; font-size: .88rem; }
.factors td { padding: 5px 0; color: var(--ink-soft); }
.factors td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.factors tr.up td:last-child { color: var(--gold); }
.rhythm-foot { color: var(--ink-faint); font-size: .8rem; margin: 12px 0 0; }

/* ---------------------------------------------------------------- buttons */

.primary {
  padding: 16px 22px; border: 0; border-radius: 99px;
  background: linear-gradient(100deg, var(--pink), var(--gold));
  color: #2a1220; font-family: inherit; font-size: 1.04rem; font-weight: 800;
  cursor: pointer; transition: transform .16s var(--ease), filter .16s;
}
html[data-mode="quiet"] .primary {
  background: var(--pink); color: #17161d; font-weight: 700;
}
.primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.primary.big { padding: 19px; font-size: 1.1rem; }
.primary:disabled {
  cursor: wait; opacity: .7; filter: grayscale(.15);
  transform: none;
}
.primary:disabled::after {
  content: ""; display: inline-block; width: 14px; height: 14px;
  margin-left: 10px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ghost {
  padding: 13px 20px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); font-family: inherit; font-size: .96rem; cursor: pointer;
  transition: all .16s var(--ease);
}
.ghost:hover { color: var(--ink); border-color: var(--pink); }
.ghost.small { padding: 9px 15px; font-size: .86rem; align-self: start; }
.ghost:disabled { cursor: wait; opacity: .6; }
.ghost:disabled::after {
  content: ""; display: inline-block; width: 12px; height: 12px;
  margin-left: 9px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}

.day-actions { display: flex; gap: 10px; }
.day-actions .ghost { flex: 1; }

/* ---------------------------------------------------------------- overlays */

.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8, 5, 14, .72);
  backdrop-filter: blur(10px);
  display: grid; place-items: center; padding: 20px;
  animation: fade .25s var(--ease);
}
.overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.sheet {
  width: 100%; max-width: 470px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 26px;
  display: flex; flex-direction: column; gap: 20px;
  max-height: 88dvh; overflow-y: auto;
  animation: rise .32s var(--ease) both;
}

.ci-block { display: flex; flex-direction: column; }
.ci-block[hidden] { display: none; }

.moods { display: flex; gap: 8px; }
.mood {
  flex: 1; aspect-ratio: 1; border-radius: 50%;
  background: var(--surface-2); border: 2px solid transparent;
  font-size: 1.45rem; cursor: pointer; transition: all .16s var(--ease);
}
.mood:hover { transform: scale(1.08); }
.mood[aria-pressed="true"] { border-color: var(--pink); background: var(--bg-2); transform: scale(1.1); }

.water { display: flex; align-items: center; gap: 14px; }
.water-btn {
  padding: 11px 17px; border-radius: 99px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--ink); font-family: inherit; cursor: pointer;
}
.water-count { color: var(--ink-faint); }

.ci-actions { display: flex; flex-direction: column; gap: 10px; }
.ci-actions .primary { width: 100%; }

.dismiss {
  display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--radius-sm);
  background: none; border: 1px solid var(--line);
  color: var(--ink-soft); font-family: inherit; font-size: 1rem; cursor: pointer;
  transition: all .16s var(--ease);
}
.dismiss:hover { border-color: var(--purple); color: var(--ink); }
.dismiss em { font-style: normal; font-size: .78rem; color: var(--ink-faint); }

.anchors { display: grid; gap: 8px; }
.anchor {
  display: grid; gap: 2px; text-align: left;
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid transparent;
  color: var(--ink); font-family: inherit; font-size: .98rem; cursor: pointer;
  transition: all .16s var(--ease);
}
.anchor[aria-pressed="true"] { border-color: var(--pink); }
.anchor em { font-style: normal; font-size: .82rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------- window */

#sky {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--line); display: block;
}
.sky-caption h2 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; }
.sky-caption p  { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }

.patterns { display: grid; gap: 10px; }
.pattern {
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border-left: 3px solid var(--purple);
}
.pattern p { margin: 0; }
.pattern .meta { color: var(--ink-faint); font-size: .78rem; margin-top: 6px; }

.detail { overflow-x: auto; }
.detail table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.detail th, .detail td {
  padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.detail th { color: var(--ink-faint); font-weight: 600; }

/* ---------------------------------------------------------------- curtain */

#screen-curtain .stage { position: relative; align-items: center; text-align: center; }
.curtain-l, .curtain-r {
  position: fixed; top: 0; bottom: 0; width: 22vw; pointer-events: none; z-index: -1;
  background: linear-gradient(90deg, #4a1030, #7a1c46);
  animation: part 1.5s var(--ease) both;
}
.curtain-l { left: 0; }
.curtain-r { right: 0; transform: scaleX(-1); }
html[data-mode="quiet"] .curtain-l, html[data-mode="quiet"] .curtain-r { display: none; }
@keyframes part {
  from { width: 50vw; } to { width: 12vw; }
}

.curtain-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 100%; }
.curtain-lines li {
  padding: 15px 18px; border-radius: var(--radius); text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  animation: rise .5s var(--ease) both;
}
.curtain-lines li:nth-child(2) { animation-delay: .28s; }
.curtain-lines li:nth-child(3) { animation-delay: .56s; }
.curtain-lines li:nth-child(4) { animation-delay: .84s; }
.curtain-lines li:nth-child(5) { animation-delay: 1.12s; }

.star {
  font-size: 4rem; color: var(--gold);
  animation: pop .7s var(--ease) both 1.2s;
  text-shadow: 0 0 34px rgba(242, 201, 141, .55);
}
@keyframes pop {
  from { opacity: 0; transform: scale(.3) rotate(-25deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- dock */

.dock {
  position: fixed; z-index: 40;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 9px;
  background: rgba(37, 28, 56, .88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 99px;
}
.dock[hidden] { display: none; }
.dock-btn {
  padding: 9px 14px; border-radius: 99px;
  background: none; border: 1px solid var(--line);
  color: var(--ink-soft); font-family: inherit; font-size: .84rem; cursor: pointer;
}
.dock-btn:hover { color: var(--ink); border-color: var(--pink); }
.dock-btn.icon { padding: 8px 11px; font-size: 1rem; line-height: 1; }
.dock-btn.icon[aria-pressed="true"] { border-color: var(--pink); }

.stuck-fab {
  position: fixed; z-index: 41;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  padding: 15px 24px; border-radius: 99px; border: 0;
  background: var(--pink); color: #2a1220;
  font-family: inherit; font-size: .98rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 32px -8px rgba(255, 135, 180, .55);
  transition: transform .16s var(--ease);
}
.stuck-fab:hover { transform: translateY(-2px); }
html[data-mode="quiet"] .stuck-fab { box-shadow: none; font-weight: 700; }

.decision {
  margin: 14px 0 4px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink-soft); font-size: .82rem;
}
.decision[hidden] { display: none; }
.decision summary { cursor: pointer; color: var(--ink); font-weight: 700; }
.decision dl { display: grid; gap: 8px; margin: 12px 0 2px; }
.decision dl div { display: grid; grid-template-columns: 105px 1fr; gap: 8px; }
.decision dt { color: var(--ink-faint); }
.decision dd { margin: 0; }

/* ---------------------------------------------------------------- demo panel
 * Filming aids. Deliberately un-pretty and monospace so it never reads as part
 * of the product, and top-right so it stays out of the shot. Shown only when
 * the server has GESTURE_DEMO on. */
.demo-panel {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 60;
  width: 190px;
  background: rgba(10, 8, 16, .92); backdrop-filter: blur(8px);
  border: 1px dashed rgba(255, 135, 180, .5); border-radius: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .74rem;
}
.demo-panel[hidden] { display: none; }
.demo-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 6px 10px; border-bottom: 1px dashed rgba(255, 135, 180, .3);
}
.demo-tag { color: var(--pink); font-weight: 700; letter-spacing: .12em; }
.demo-collapse {
  background: none; border: 0; color: var(--ink-faint); cursor: pointer;
  font-family: inherit; font-size: .9rem; line-height: 1; padding: 2px 4px;
}
.demo-panel.collapsed .demo-body { display: none; }
.demo-panel.collapsed .demo-collapse { transform: rotate(-90deg); }
.demo-body { display: grid; gap: 5px; padding: 8px; }
.demo-btn {
  text-align: left; padding: 7px 9px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); font-family: inherit; font-size: .74rem; cursor: pointer;
}
.demo-btn:hover { border-color: var(--pink); color: var(--ink); }
.demo-result {
  margin-top: 3px; padding: 8px; border-radius: 8px;
  background: #140b12; border: 1px solid var(--line); line-height: 1.5;
}
.demo-result[hidden] { display: none; }
.demo-result .att { color: #ff9db9; text-decoration: line-through; }
.demo-result .rule { color: var(--gold); }
.demo-result .srv { color: #86d9a8; }

/* ---------------------------------------------------------------- barnaby */

.barnaby-slot { display: grid; place-items: center; }
.barnaby-slot.small svg { width: 92px; }
.barnaby-slot.tiny  svg { width: 46px; }

.barnaby { width: 168px; height: auto; overflow: visible; }

.barnaby.jiggle { animation: jiggle .32s ease-in-out infinite; }
@keyframes jiggle {
  0%,100% { transform: translate(0,0) rotate(0); }
  25%     { transform: translate(-3px, 1px) rotate(-2.5deg); }
  75%     { transform: translate(3px, -1px) rotate(2.5deg); }
}

.barnaby .b-body { animation: breathe 4.2s ease-in-out infinite; transform-origin: 100px 160px; }
@keyframes breathe {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.022); }
}

/* Quiet mode takes the costume down rather than off. Barnaby is still the
 * same person under it — removing the hat and ruff entirely would make him a
 * different character, and the promise is that he isn't.
 *
 * Muted, not ghosted. Below about 0.5 the colours lose their hue against the
 * background and the costume stops reading as a costume, which makes him look
 * sombre. Quiet mode is meant to be calm and warm, never sad. */
html[data-mode="quiet"] .barnaby .b-ruff,
html[data-mode="quiet"] .barnaby .b-hat    { opacity: .6; }
html[data-mode="quiet"] .barnaby .b-bell   { display: none; }

.barnaby .b-glow { opacity: 0; transition: opacity .6s var(--ease); }
.barnaby.lit .b-glow { opacity: .5; }

/* Touch: every interactive control gets a 44px minimum target, the size a
 * fingertip needs. Applied on coarse pointers only, so the desktop chips keep
 * their tighter look. */
@media (pointer: coarse) {
  button, .dock-btn, .water-btn, .mood, input[type="time"], input[type="number"] {
    min-height: 44px;
  }
  .act-list li .x { min-width: 44px; min-height: 44px; }
}

/* Phones. The two floating controls have to share one row without colliding,
 * so the dock sheds its mini-Barnaby and tightens up while "I'm stuck" keeps
 * its emphasis. Content already reserves 120px of bottom padding to clear
 * them. */
@media (max-width: 560px) {
  .screen { padding: 22px 16px 132px; }
  .field.row { flex-direction: column; }

  .dock {
    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
    gap: 6px; padding: 6px 8px;
  }
  .dock .barnaby-slot.tiny { display: none; }
  .dock-btn { padding: 10px 12px; font-size: .8rem; }
  /* "Pet Barnaby" -> "Pet", "Ground me" -> "Ground" so the dock and the
   * "I'm stuck" button share the bottom row without colliding. */
  .dock .lbl-extra { display: none; }

  .stuck-fab {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 13px 18px; font-size: .92rem;
  }
}

/* Very narrow phones (≤380px): the dock buttons drop to their labels only via
 * shorter copy is not possible in CSS, so tighten spacing further and let the
 * bell sit snug. Keeps dock + fab under ~360px. */
@media (max-width: 380px) {
  .dock { gap: 4px; padding: 5px 7px; }
  .dock-btn { padding: 9px 10px; font-size: .78rem; }
  .stuck-fab { padding: 12px 15px; }
}