/* Angela's live page, its own rules, loaded after the locked design (base, pink, r6, r7, final, act), which is
   copied verbatim. Nothing here changes a locked rule on the Jay tab except the one exception list of BUILD-SPEC 5.1
   (DISPOSITIONS 25, R2 32): the dark-ink Last seen time (the active tab label is already ink in r7.css), the map
   elements (track, pins, Replay and Watch the day pills, the scrub, the shot animation) and the stat sheets' trigger.
   Pink only as a fill or a mark, never as text. Then the states the mock never had (no key, offline, overdue, the
   sheets' forms), the app's own line on You, and the desktop layout at 1366 (5.1, ASSUMPTION). */

/* ---------- 5.1: every word and number in dark ink, the Last seen time included ---------- */
.oneline.lockup .pl-time{color:var(--ink)}

/* ---------- the page frame: the mock's phone frame becomes the whole window ---------- */
input,select,textarea{font-family:inherit}
.app{max-width:none;max-height:none;height:100vh;height:100dvh}
.home-banner{flex:none;margin:0;padding:12px var(--pad);background:var(--card);border-bottom:2px solid var(--ink);font:var(--w-strong) 16px/1.4 var(--font-body);color:var(--ink)}
.home-offline{margin:0 16px 10px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.r6-body .home-offline{margin:0}

/* the overdue box on the Jay tab (5.11): his numbers to call and the pins to read out */
.home-overdue{margin:0 16px 10px;padding:12px;border-radius:var(--r-card);background:var(--card);box-shadow:inset 0 0 0 2px var(--ink)}
.home-overdue-t{font:var(--w-strong) 16px/1.4 var(--font-body);color:var(--ink)}
.home-overdue-k{margin-top:10px;font:var(--w-strong) 14px/1.3 var(--font-body);color:var(--ink)}
.home-overdue .kv{font-size:14px}

/* ---------- the Jay map's pills, scrub and marks ---------- */
.map-pill{position:absolute;z-index:700;left:12px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 11px;border-radius:999px;background:var(--canvas);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink), 0 2px 8px rgba(0,0,0,.18);font:var(--w-strong) 15px/1 var(--font-body);white-space:nowrap}
.map-pill[hidden]{display:none}
.map-replay-pill{top:12px}
.map-reel-pill{top:64px;background:var(--accent);color:var(--accent-ink)}
.map-scrub{position:absolute;z-index:720;left:8px;right:8px;bottom:30px;display:grid;grid-template-columns:auto 1fr auto;column-gap:8px;align-items:center;padding:6px 8px;border-radius:var(--r);background:var(--canvas);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.map-scrub[hidden]{display:none}
.map-scrub .act-when{grid-column:2;grid-row:2}
.map-scrub .scrub-close{position:static;grid-column:3;grid-row:1;box-shadow:none}
.map-mark{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;position:relative}
.mm-clicks i{display:block;width:12px;height:12px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 3px var(--ink), 0 0 0 1.5px #ffffff}
.mm-label{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);padding:3px 9px;border-radius:999px;background:var(--pin-bg);color:var(--pin-ink);font:600 14px/1.2 var(--font-body);white-space:nowrap}
.mm-label[hidden]{display:none}
.map-about{display:block;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--ink), 0 0 0 1.5px #ffffff}
.map-kill{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0}
.map-kill .act-thumb-elk{position:static;width:26px;height:26px}
.map-kill .act-elk-ic{width:16px;height:16px}
.pin.shot i{background:var(--accent);box-shadow:inset 0 0 0 1.5px #ffffff}

/* the live shot animation: one SVG layer over the Leaflet map, placed by the map's own projection (KILL-STORY 4) */
.anim-layer{position:absolute;inset:0;z-index:690;pointer-events:none;transition:opacity .4s ease-out}
.anim-layer.fade{opacity:0}
.anim-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.anim-edge{stroke:#16110f;stroke-linecap:round;fill:none}
.anim-line{stroke:#ffffff;stroke-linecap:round;fill:none}
.anim-dot{fill:var(--accent);stroke:#16110f;stroke-width:2}
.anim-ring{fill:none;stroke:var(--accent-line);stroke-width:3}
.anim-animal{position:absolute;display:block;height:auto;padding:4px;border-radius:10px;background:rgba(255,255,255,.94);box-shadow:inset 0 0 0 1.5px var(--ink);transform:translate(-50%,-100%)}

/* ---------- Activity extras: the reel pill, the scrub's ends, the story, his words and recording ---------- */
.act-reel{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:8px;padding:0 16px 0 11px;border-radius:999px;background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--ink);font:var(--w-strong) 15px/1 var(--font-body)}
.act-reel[hidden]{display:none}
.act-ends{grid-column:1 / span 2;display:flex;justify-content:space-between;gap:10px;margin-top:2px;font-size:14px;line-height:1.3;color:var(--ink-2)}
.act-empty{padding:4px 0}
.act-story-btn{display:block;width:100%;min-height:44px;text-align:left;color:var(--ink)}
.act-story-more{display:inline-block;margin-top:6px;font:var(--w-strong) 15px/1.3 var(--font-body);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.act-story-full .r6-story-p{margin-top:6px}
.act-log-t{white-space:pre-wrap}
.act-listen{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:10px;padding:0 16px 0 11px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink);font:var(--w-strong) 15px/1 var(--font-body);color:var(--ink)}
.act-listen[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.act-photo-btn{width:100%;margin-top:8px}
.act-killphoto .act-photo{margin-bottom:0}
.r6-tlbox .r6-tl{margin-top:4px}

/* ---------- sheets: the forms on You and the trip card, the reel player, the moon ---------- */
.sheet{max-height:calc(100% - 24px);overflow-y:auto;overflow-x:hidden}
.sheet.sheet-tall{top:24px}
.sheet .sheet-body{min-width:0}
.sheet h3{margin:0}
.you-field{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-top:1px solid var(--line);font-size:16px;color:var(--ink)}
.you-field input,.you-num input{min-height:44px;padding:0 10px;border-radius:var(--r-sm);border:1.5px solid var(--ink);background:var(--card);color:var(--ink);font:16px/1.2 var(--font-body)}
.you-field input{flex:0 1 200px;min-width:0}
.you-num{margin:12px 0 0;padding:10px 12px 12px;border:1px solid var(--card-line);border-radius:var(--r-card)}
.you-num legend{padding:0 4px;font:var(--w-strong) 15px/1.3 var(--font-body);color:var(--ink)}
.you-num label{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:15px;color:var(--ink)}
.you-num input{width:100%}
.you-btns{display:flex;gap:10px;margin-top:14px}
.you-save,.you-later{min-height:48px;padding:0 22px;border-radius:var(--r-btn);font:var(--w-strong) 16px/1 var(--font-body);color:var(--ink)}
.you-save{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--ink)}
.you-later{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink)}
.you-sheet-line{margin-top:8px;font-size:15px;line-height:1.4;color:var(--ink)}
.you-sheet-line:empty{display:none}
.reel-box{margin-top:4px;border-radius:12px;overflow:hidden;background:#000}
.reel-box video{display:block;width:100%;max-height:62vh;background:#000}
.reel-wait{color:var(--ink)}
.moon{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.moon-pic{width:28px;height:28px;flex:none}
.moon-dark{fill:#3c3533;stroke:var(--ink);stroke-width:1.2}
.moon-lit{fill:#fffdf7}

/* ---------- You: the pickers in place, the read-only rows, the app line ---------- */
.you-pick{position:relative;cursor:pointer}
.you-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;margin:0}
.you-ro{cursor:default}
.you-ro .r6-val{color:var(--ink)}
.you-add .r6-val{color:var(--ink)}
.you-line{margin-top:8px}
.you-settings-link{min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.you-app{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:6px 0 4px;font-size:15px;color:var(--ink)}
.you-update,.you-getapp{min-height:44px;display:inline-flex;align-items:center;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font:var(--w-strong) 15px/1.2 var(--font-body)}
.you-update-line{flex-basis:100%;color:var(--ink)}
.you-update-line:empty{display:none}

/* ---------- desktop at 1366 (5.1): the tabs a left rail; the Jay tab the map on the left two thirds and the line
   and six cards in two columns on the right; Today, Activity and You one centered column 640 px wide ---------- */
@media (min-width:1000px){
  .app{flex-direction:row-reverse;max-width:none}
  .screens{flex:1;min-width:0}
  .tabs{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;width:132px;padding:24px 10px;border-top:0;border-right:1px solid var(--tab-line)}
  .tab{min-height:64px}
  #s-jay:not([hidden]){display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto 1fr;align-content:start}
  #s-jay .map-wrap{grid-column:1;grid-row:1 / span 3;height:100%;min-height:100%}
  #s-jay .nowline,#s-jay #jay-extra,#s-jay #jay-cards{grid-column:2}
  #s-jay .nowline{padding-top:24px}
  #s-jay .cards{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
  #s-jay{overflow:hidden}
  #s-jay > :not(.map-wrap){overflow-y:auto}
  .app.map-full .map-wrap{left:132px}
  .r6 .r6-head,.r6 .r6-body{width:100%;max-width:640px;margin-left:auto;margin-right:auto}
  .act-map{height:360px}
  .scrim{left:0}
  .sheet{left:50%;right:auto;width:560px;transform:translateX(-50%);border-radius:var(--r)}
  .sheet.sheet-tall{top:24px;bottom:24px}
}