/* The 3D view, the Overview and their overlays. Every colour, radius, space and size comes from tokens.css, so light and dark
   themes (and the keeper console, which loads the dark tokens) work without further rules. */

/* ---- the switch and the stage ---- */
.view-tabs { display: inline-flex; gap: var(--s-1); margin: var(--s-1) 0 var(--s-3) var(--s-1); padding: var(--s-1); background: var(--c-surface-2); border: 2px solid var(--c-line); border-radius: var(--r-pill); }
.view-tab { min-width: 112px; min-height: 40px; padding: var(--s-2) var(--s-5); font: inherit; font-weight: var(--w-heavy); color: var(--c-ink-2); background: transparent; border: 0; border-radius: var(--r-pill);
  cursor: pointer; transition: transform var(--dur) var(--ease-spring), background var(--dur), color var(--dur); }
.view-tab:hover:not(:disabled) { color: var(--c-ink); transform: translateY(-1px); }
.view-tab:active:not(:disabled) { transform: scale(.96); }
.view-tab.on, .view-tab.on:hover:not(:disabled) { color: var(--c-on-accent); background: var(--c-sun); box-shadow: 0 2px 0 rgba(var(--c-shadow), .18); }
.view-tab:disabled { opacity: .5; cursor: not-allowed; }
.view-stage { position: relative; }
.view-stage.is-3d { height: clamp(430px, calc(76vh - 50px), 780px); background: var(--w-night-sky); overflow: hidden; border-radius: var(--r-lg); }
.view-note { padding: var(--s-2) var(--s-3); color: var(--c-warn-ink); background: var(--c-warn-bg); border-radius: var(--r-md); margin: var(--s-2); font-size: var(--t-sm); }
.map-title { display: none; }
body.panel-shared .detail-panel { display: none; }
body.mode-3d .detail-panel, body.mode-3d .legend { display: none; }
body.mode-3d .map-panel { padding: var(--s-3); }

/* ---- the Overview: the illustrated map with the same panel beside it (a bottom sheet on a phone) ---- */
.ov { display: flex; align-items: stretch; position: relative; border-radius: var(--r-lg); overflow: hidden; }
.ov .scene-2d { flex: 1 1 auto; min-width: 0; background: var(--map-frame); }
.ov .t3d-panel { position: relative; right: auto; top: auto; bottom: auto; flex: 0 0 340px; width: 340px; max-height: 78vh; margin: var(--s-2); box-shadow: var(--sh-1); }
.ov .t3d-panel[hidden] { display: none; }
.scene .place.selected { filter: drop-shadow(0 0 2px var(--c-halo)) drop-shadow(0 0 8px var(--c-sun)) drop-shadow(0 0 14px var(--c-sun)); }
.scene .place.selected .label { fill: var(--c-sun); font-weight: var(--w-heavy); }
.scene .turtle.selected .hit { fill: color-mix(in srgb, var(--c-sun) 22%, transparent); stroke: var(--c-sun); stroke-width: 4; stroke-dasharray: 10 6; }
.scene .act { font-size: 15px; fill: var(--map-label); stroke: var(--map-label-stroke); stroke-width: 3.5px; stroke-linejoin: round; paint-order: stroke; pointer-events: none; font-weight: var(--w-bold); }
.home-card .act { display: none; }

/* ---- activity badge colours: one per kind, always with an icon and a word ---- */
.k-sleep { --badge: var(--k-sleep); }
.k-walk { --badge: var(--k-walk); }
.k-bask { --badge: var(--k-bask); }
.k-swim { --badge: var(--k-swim); }
.k-eat { --badge: var(--k-eat); }
.k-explore { --badge: var(--k-explore); }
.k-arrange { --badge: var(--k-arrange); }
.k-speak { --badge: var(--k-speak); }
.k-company { --badge: var(--k-company); }
.k-read { --badge: var(--k-read); }
.k-tablet { --badge: var(--k-read); }
.k-rest { --badge: var(--k-rest); }
.k-carry { --badge: var(--k-carry); }
.k-pick { --badge: var(--k-pick); }
.k-idle { --badge: var(--k-idle); }
.k-fail { --badge: var(--k-fail); }

.t3d { position: absolute; inset: 0; outline: none; font-family: var(--font); color: var(--c-ink); user-select: none; -webkit-user-select: none; overflow: hidden; }
.t3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.t3d-canvas:active { cursor: grabbing; }
.t3d-labels, .t3d-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.t3d-overlay > * { pointer-events: auto; }
.t3d-labels.hide-places .t3d-place { display: none; }
.ico { width: 18px; height: 18px; flex: none; }

/* ---- place names ---- */
.t3d-place { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .3s var(--ease-soft); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: 1.2; padding: 3px var(--s-3); white-space: nowrap;
  color: var(--c-ink); background: color-mix(in srgb, var(--c-surface) 88%, transparent); border: 2px solid var(--c-line); border-radius: var(--r-pill); box-shadow: var(--sh-1); will-change: transform; }
.t3d-place.on { opacity: 1; }
.t3d-place.strong { font-size: var(--t-sm); border-color: var(--c-sun); z-index: 2; box-shadow: var(--sh-2); }

/* ---- the marker over each turtle: badge, name, activity; a speech or thought bubble above ---- */
.t3d-marker { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; will-change: transform; }
.t3d-marker-card { position: absolute; left: 0; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-4) var(--s-1) var(--s-1);
  background: var(--c-surface); border: 3px solid var(--c-leaf); border-radius: var(--r-pill); box-shadow: var(--sh-2); white-space: nowrap; pointer-events: auto; cursor: pointer;
  transition: transform .35s var(--ease-spring), box-shadow var(--dur); }
.t3d-marker-card:hover { transform: translateX(-50%) translateY(-2px) scale(1.03); }
.t3d-marker-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--badge, var(--k-idle)); color: var(--c-on-accent); }
.t3d-marker-ico .ico { width: 20px; height: 20px; }
.t3d-marker-name { font-size: var(--t-md); font-weight: var(--w-heavy); color: var(--c-ink); line-height: 1.1; }
.t3d-marker-act { font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--c-ink-2); line-height: 1.2; }
.t3d-marker-status { font-size: var(--t-xs); margin-top: 2px; line-height: 1.25; }
.t3d-marker-status[hidden] { display: none; }
.t3d-marker-stem { position: absolute; left: -7px; bottom: 3px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid var(--c-surface); filter: drop-shadow(0 2px 1px rgba(var(--c-shadow), .2)); }
.t3d-marker.asleep .t3d-marker-card { background: var(--c-surface-2); }
.t3d-marker.selected .t3d-marker-card { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-sun) 55%, transparent), var(--sh-2); }
.t3d-marker.noticed .t3d-marker-card::after { content: "!"; position: absolute; top: -10px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-coral);
  color: var(--c-on-accent); font-weight: var(--w-heavy); font-size: var(--t-sm); line-height: 22px; text-align: center; animation: t3dpop .5s var(--ease-spring); }
@keyframes t3dpop { from { transform: scale(0); } to { transform: scale(1); } }
.t3d-bubble { position: absolute; left: 0; bottom: 70px; transform: translateX(-50%); width: max-content; max-width: 240px; min-width: 56px; padding: var(--s-3) var(--s-4); font-size: var(--t-sm); font-weight: var(--w-bold); line-height: 1.35; display: none;
  color: var(--c-ink); background: var(--c-surface); border: 2px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-2); white-space: normal; text-align: left; pointer-events: none; }
.t3d-bubble.on { display: block; animation: t3dpop .35s var(--ease-spring); transform-origin: 50% 100%; }
.t3d-bubble::after { content: ""; position: absolute; left: var(--tail, 50%); bottom: -9px; width: 14px; height: 14px; margin-left: -7px; background: var(--c-surface); border-right: 2px solid var(--c-line);
  border-bottom: 2px solid var(--c-line); transform: rotate(45deg); border-radius: 0 0 4px 0; }
.t3d-bubble.thought { font-style: italic; font-weight: var(--w-normal); background: var(--c-surface-2); }
.t3d-bubble.thought::after { background: var(--c-surface-2); }
.t3d-bubble.side::after { display: none; }
.t3d-bubble.hide { display: none; }
.t3d-marker.off .t3d-marker-status { font-size: var(--t-xs); margin-top: 2px; line-height: 1.25; }
.t3d-marker-status[hidden] { display: none; }
.t3d-marker-stem { display: none; }
.t3d-arrow { position: absolute; left: 0; top: 0; display: none; pointer-events: none; z-index: 4; }
.t3d-arrow.on { display: block; }
.t3d-arrow-tip { width: 0; height: 0; border-left: 16px solid var(--c-sun); border-top: 9px solid transparent; border-bottom: 9px solid transparent; filter: drop-shadow(0 2px 2px rgba(var(--c-shadow), .35)); }
.t3d-arrow-name { display: none; }

/* ---- the status strip: both turtles at a glance ---- */
.t3d-strip { position: absolute; top: var(--s-2); left: var(--s-2); right: var(--s-2); display: flex; gap: var(--s-2); justify-content: flex-start; z-index: 6; pointer-events: none; }
.t3d-strip > * { pointer-events: auto; }
.t3d-chip-turtle { flex: 1 1 0; max-width: 380px; min-width: 0; text-align: left; font: inherit; color: var(--c-ink); cursor: pointer; padding: var(--s-2) var(--s-4); display: flex; flex-direction: column; gap: 2px;
  background: color-mix(in srgb, var(--c-surface) 94%, transparent); border: 2px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: transform var(--dur) var(--ease-spring), border-color var(--dur); }
.t3d-chip-turtle:hover { transform: translateY(-2px); border-color: var(--c-sun); }
.t3d-chip-turtle.on { border-color: var(--c-sun); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-sun) 45%, transparent), var(--sh-1); }
.t3d-chip-turtle.asleep { background: var(--c-surface-2); }
.t3d-ctop { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.t3d-cbot { display: flex; gap: var(--s-3); font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--c-ink-2); flex-wrap: wrap; align-items: center; }
.t3d-cbot .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.t3d-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 3px solid var(--c-surface); box-shadow: 0 0 0 2px var(--c-line); }
.t3d-cname { font-weight: var(--w-heavy); font-size: var(--t-md); }
.t3d-cico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--badge, var(--k-idle)); color: var(--c-on-accent); }
.t3d-cico .ico { width: 15px; height: 15px; }
.t3d-cact { font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t3d-cneed .ico { margin-right: 0; }

/* ---- toolbar, minimap, hints ---- */
.t3d-toolbar { position: absolute; left: var(--s-2); top: 84px; display: flex; flex-flow: column wrap; align-content: flex-start; gap: var(--s-2); max-height: calc(100% - 84px - 132px); z-index: 6; }       /* a second column where the view is short */
.t3d-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); background: var(--c-surface); color: var(--c-ink); border: 2px solid var(--c-line); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4);
  font: inherit; font-size: var(--t-sm); font-weight: var(--w-heavy); cursor: pointer; min-height: 36px; box-shadow: var(--sh-1); transition: transform var(--dur) var(--ease-spring), background var(--dur), border-color var(--dur); }
.t3d-btn:hover { transform: translateY(-2px); border-color: var(--c-sun); }
.t3d-btn:active { transform: scale(.95); }
.t3d-btn.on { background: var(--c-sun); color: var(--c-on-accent); border-color: var(--c-sun); }
.t3d-btn.tool { flex-direction: column; gap: 2px; width: 60px; min-height: 54px; padding: var(--s-2) var(--s-1); border-radius: var(--r-md); font-size: var(--t-xs); }
.t3d-btn.tool .ico { width: 22px; height: 22px; }
.t3d-mini { position: absolute; left: var(--s-2); bottom: var(--s-2); z-index: 6; border: 3px solid var(--c-surface); border-radius: var(--r-md); background: var(--c-surface); padding: 0; line-height: 0; overflow: hidden; box-shadow: var(--sh-2); }
.t3d-mini.hidden { display: none; }
.t3d-minicanvas { cursor: pointer; border-radius: calc(var(--r-md) - 3px); }
.t3d-tip { position: absolute; bottom: var(--s-2); left: 50%; transform: translateX(-50%); font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--c-ink-2); padding: var(--s-1) var(--s-3); background: color-mix(in srgb, var(--c-surface) 90%, transparent);
  border-radius: var(--r-pill); z-index: 5; pointer-events: none; white-space: nowrap; box-shadow: var(--sh-1); }
.t3d-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; background: var(--c-surface); border: 2px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-2); animation: t3dpop .3s var(--ease-spring); }
.t3d-hint[hidden], .t3d-toast[hidden], .t3d-following[hidden], .t3d-panel[hidden] { display: none; }
.t3d-keys-title { font-size: var(--t-lg); font-weight: var(--w-heavy); margin-bottom: var(--s-3); }
.t3d-keys { display: grid; grid-template-columns: 1fr; gap: var(--s-1); font-size: var(--t-sm); }
.t3d-keyrow { display: grid; grid-template-columns: 170px 1fr; gap: var(--s-3); align-items: center; }
.t3d-keyrow kbd { font-family: var(--font-mono); font-weight: var(--w-bold); color: var(--c-ink); background: var(--c-surface-2); border: 2px solid var(--c-line); border-bottom-width: 3px; border-radius: var(--r-sm); padding: 0 var(--s-2); justify-self: start; }
.t3d-toast { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); z-index: 8; background: var(--c-surface); border: 2px solid var(--c-sun); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: var(--w-heavy); box-shadow: var(--sh-2); display: flex; align-items: center; gap: var(--s-2); animation: t3dpop .4s var(--ease-spring); }
.t3d-toast .ico { color: var(--c-coral); width: 22px; height: 22px; }
.t3d-following { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: var(--s-2); align-items: center; font-size: var(--t-sm); font-weight: var(--w-bold); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4);
  background: var(--c-surface); border: 2px solid var(--c-line); border-radius: var(--r-pill); box-shadow: var(--sh-1); }

/* ---- the details panel: a card on the right, a bottom sheet on a phone ---- */
.t3d-panel { position: absolute; right: var(--s-2); top: 84px; bottom: var(--s-2); width: min(360px, 42%); z-index: 7; display: flex; flex-direction: column; background: var(--c-surface); border: 2px solid var(--c-line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); animation: t3dslide .35s var(--ease-spring); }
@keyframes t3dslide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.t3d-phead { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 2px dashed var(--c-line); position: relative; }
.t3d-grip { display: none; position: absolute; left: 50%; top: 4px; width: 56px; height: 12px; margin-left: -28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.t3d-grip::after { content: ""; display: block; width: 40px; height: 5px; margin: 3px auto; background: var(--c-line); border-radius: var(--r-pill); }
.t3d-ptitlebox { flex: 1; min-width: 0; }
.t3d-ptitle { font-size: var(--t-lg); color: var(--c-ink); font-weight: var(--w-heavy); }
.t3d-psub { font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--c-ink-2); display: flex; align-items: flex-start; gap: var(--s-1); flex-wrap: nowrap; }
.t3d-psub .ico { margin-top: 2px; } .t3d-psub-ico { display: inline-flex; flex: none; }
.t3d-psub .ico { width: 16px; height: 16px; }
.t3d-x { background: var(--c-surface-2); border: 2px solid var(--c-line); color: var(--c-ink); width: 40px; height: 40px; border-radius: 50%; font-size: 22px; cursor: pointer; line-height: 1; transition: transform var(--dur) var(--ease-spring); }
.t3d-x:hover { transform: rotate(90deg); border-color: var(--c-sun); }
.t3d-pbody { padding: var(--s-4); overflow: auto; flex: 1; font-size: var(--t-sm); }
.t3d-now { color: var(--c-ink); font-weight: var(--w-bold); } .t3d-quote { color: var(--c-ink); font-style: italic; min-height: 1.4em; margin: var(--s-1) 0 var(--s-3); }
.t3d-bars { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.t3d-tabs { display: flex; gap: var(--s-2); margin: var(--s-3) 0; }
.t3d-tab { background: var(--c-surface-2); color: var(--c-ink-2); border: 2px solid var(--c-line); border-radius: var(--r-pill); padding: var(--s-1) var(--s-4); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; min-height: 34px; }
.t3d-tab.on { color: var(--c-on-accent); background: var(--c-leaf); border-color: var(--c-leaf); }
.t3d-pane { max-height: 200px; overflow: auto; border-top: 2px dashed var(--c-line); padding-top: var(--s-2); }
.t3d-row { padding: var(--s-1) 0; border-bottom: 1px dashed var(--c-line); word-break: break-word; display: flex; gap: var(--s-2); }
.t3d-k { color: var(--c-leaf-ink); font-size: var(--t-xs); font-weight: var(--w-heavy); min-width: 64px; flex: none; margin-top: 2px; }
.t3d-k.felt { color: var(--c-warn-ink); } .t3d-k.noticed { color: var(--c-ink-2); } .t3d-k.mind { color: var(--c-sky-ink); }
.t3d-v.fail { color: var(--c-bad); }
.t3d-empty { color: var(--c-ink-2); font-style: italic; padding: var(--s-3) 0; }
.t3d-note { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.t3d-note input { flex: 1; min-width: 150px; background: var(--c-surface); color: var(--c-ink); border: 2px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); font: inherit; font-size: 16px; min-height: 44px; }
.t3d-note input:focus { outline: none; border-color: var(--c-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 30%, transparent); }
.t3d-note .t3d-btn { background: var(--c-leaf); color: var(--c-on-accent); border-color: var(--c-leaf); min-height: 44px; }
.t3d-notemsg { margin-top: var(--s-2); color: var(--c-ink-2); font-size: var(--t-sm); min-height: 1.2em; }
.t3d-desc { margin-bottom: var(--s-3); }
.t3d-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.t3d-chip { background: var(--c-surface-2); border: 2px solid var(--c-line); color: var(--c-ink); border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; min-height: 34px; transition: transform var(--dur) var(--ease-spring); }
.t3d-chip:hover { transform: translateY(-2px); border-color: var(--c-sun); }

/* ---- celebrations: a few confetti bits on the overview map (the 3D view has its own) ---- */
.scene .confetti { pointer-events: none; }
.scene .confetti circle, .scene .confetti rect { animation: confetti 2.6s var(--ease-soft) forwards; transform-box: fill-box; transform-origin: center; }
@keyframes confetti { from { transform: translate(0, 0) scale(.4); opacity: 1; } to { transform: translate(var(--dx, 0), var(--dy, -70px)) rotate(200deg) scale(1); opacity: 0; } }

/* ---- a phone held upright ---- */
.t3d.narrow .t3d-strip { gap: var(--s-2); }
.t3d.narrow .t3d-chip-turtle { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); }
.t3d.narrow .t3d-cname { font-size: var(--t-sm); }
.t3d.narrow .t3d-cbot { gap: var(--s-2); font-size: 11px; }
.t3d.narrow .t3d-ctop { flex-wrap: wrap; }
.t3d.narrow .t3d-cact { flex: 1 0 100%; order: 5; font-size: 11px; white-space: normal; }
.t3d.narrow .t3d-cmood { display: none; }
.t3d.narrow .t3d-toolbar { top: auto; bottom: var(--s-2); left: var(--s-2); right: var(--s-2); flex-direction: row; justify-content: space-between; gap: var(--s-2); }
.t3d.narrow .t3d-btn.tool { flex: 1 1 0; width: auto; min-width: 0; min-height: 50px; }
.t3d.narrow.has-panel .t3d-toolbar { display: none; }
.t3d.narrow .t3d-following { bottom: 72px; }
.t3d.narrow .t3d-toast { bottom: 76px; }
.t3d.narrow .t3d-mini { left: auto; right: var(--s-2); top: auto; bottom: 68px; transform: scale(.66); transform-origin: bottom right; }
.t3d.narrow .t3d-tip { display: none; }
.t3d.narrow .t3d-marker-card { padding-right: var(--s-3); }
.t3d.narrow .t3d-marker-name { font-size: var(--t-sm); }
.t3d.narrow .t3d-bubble { max-width: 200px; }
.t3d.narrow .t3d-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 52%; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; animation: t3dsheet .35s var(--ease-spring); }
@keyframes t3dsheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.t3d.narrow .t3d-grip { display: block; }
.t3d.narrow .t3d-panel.collapsed .t3d-pbody { display: none; }
.t3d.narrow .t3d-pane { max-height: 130px; }
.t3d.narrow.has-panel .t3d-mini, .t3d.narrow.has-panel .t3d-following { display: none; }
.t3d.narrow .t3d-hint { width: calc(100% - 24px); max-height: 80%; overflow: auto; }
.t3d.narrow .t3d-keyrow { grid-template-columns: 120px 1fr; }

@media (max-width: 700px) {
  .view-tabs { display: flex; margin-left: 0; margin-right: 0; }
  .view-tab { flex: 1 1 0; min-width: 0; min-height: 44px; }
  .view-stage.is-3d { height: calc(100svh - 170px); min-height: 420px; }
  .ov { display: block; }
  .ov .t3d-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; margin: 0; max-height: 44vh; z-index: 30; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
  .ov .t3d-grip { display: block; }
  .ov .t3d-panel.collapsed .t3d-pbody { display: none; }
  .scene .act { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .t3d *, .t3d *::after, .ov *, .view-tabs * { animation: none !important; transition: none !important; } }

/* ---- vitals and the note's privacy line ---- */
.t3d-cjoy { display: inline-block; width: 34px; height: 8px; background: var(--c-surface-2); border: 2px solid var(--c-line); border-radius: var(--r-pill); position: relative; overflow: hidden; }
.t3d-cjoy > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c-leaf); border-radius: var(--r-pill); transition: width .8s var(--ease-soft); }
.t3d-cjoy[hidden] { display: none; }