/* ============================================================================
   Pumba & Co. — Pixel Virtual Office
   A cozy pixel office where dog staff work. Forked from Pum's Office (studio).
   Dual aesthetic: DAY = warm paper apps theme · NIGHT = navy studio sub-brand.
   ============================================================================ */

/* ── THEME TOKENS ─────────────────────────────────────────────────────────
   Default = NIGHT (the Pum's Office studio look). body[data-time="day"] swaps
   to the warm-paper "apps" palette. */
body {
  --page:#0a0c12;
  --aurora:1;
  --card-bg:linear-gradient(180deg,#12161f,#1a1f2b);
  --card-flat:#12161f;
  --inset:#10141d;
  --line:#252c3a;
  --line-bright:#36404f;
  --txt:#eef2e9;
  --txt-mid:#9aa890;
  --txt-dim:#5a6655;
  --pumba:#ffae42;        /* Technical Lead */
  --gigi:#8fe388;         /* QA Engineer    */
  --card-shadow:0 18px 40px rgba(0,0,0,.45);
  --chip-bg:rgba(10,12,18,.85);
  --font-disp:'Syne',sans-serif;
  --font-body:'JetBrains Mono',monospace;
  --font-clock:'Press Start 2P',monospace;
  --clock:#8fe388;
  --clock-shadow:0 0 12px rgba(143,227,136,.45);
  --r:10px; --r-sm:7px; --r-lg:14px;
  --day-wash:0;
  --vig:1;
  --bg-bright:1;
  --grad-on:1;            /* hero title gradient (night only) */
}

body[data-time="day"] {
  --page:#f3f1ea;
  --aurora:0;
  --card-bg:#ffffff;
  --card-flat:#ffffff;
  --inset:#f0eeea;
  --line:#e4e1db;
  --line-bright:#ccc9c2;
  --txt:#1a1916;
  --txt-mid:#6b6862;
  --txt-dim:#a09d98;
  --pumba:#c45c1a;        /* terracotta brand accent */
  --gigi:#2d6a4f;         /* forest green */
  --card-shadow:0 2px 10px rgba(60,50,40,.10);
  --chip-bg:rgba(255,255,255,.92);
  --font-disp:'Noto Sans Thai',sans-serif;
  --font-body:'Noto Sans Thai',sans-serif;
  --font-clock:'IBM Plex Mono',monospace;
  --clock:#1a1916;
  --clock-shadow:none;
  --day-wash:.62;
  --vig:.32;
  --bg-bright:1.32;
  --grad-on:0;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body {
  background:var(--page); color:var(--txt); font-family:var(--font-body);
  font-size:14px; min-height:100vh; overflow-x:hidden;
  transition:background .5s ease, color .5s ease;
}

/* brand aurora behind everything (night only) */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--aurora); transition:opacity .5s ease;
  background:
    radial-gradient(ellipse 60% 45% at 18% -5%, rgba(255,174,66,0.07), transparent 60%),
    radial-gradient(ellipse 65% 50% at 88% 105%, rgba(143,227,136,0.07), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 50%, rgba(20,26,40,0), rgba(6,8,12,0.5) 120%);
}
/* warm paper grain wash (day only) */
body::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:calc(1 - var(--aurora)); transition:opacity .5s ease;
  background:radial-gradient(ellipse 80% 60% at 50% -10%, rgba(196,92,26,0.05), transparent 60%);
}

/* ── APP GRID (3 layout directions via body class) ───────────────────────── */
.app {
  position:relative; z-index:1; max-width:1240px; margin:0 auto;
  padding:22px 18px 30px;
  display:grid; gap:14px; align-items:start;
  grid-template-columns:1fr 322px;
  grid-template-rows:auto auto auto 1fr auto auto;
  grid-template-areas:
    "hero  hero"
    "tele  tele"
    "stage crew"
    "stage log"
    "dock  dock"
    "foot  foot";
}
.hero       { grid-area:hero; }
.telemetry  { grid-area:tele; }
.stage-card { grid-area:stage; }
.crew-card  { grid-area:crew; }
.log-card   { grid-area:log; }
.dock       { grid-area:dock; }
.footnote   { grid-area:foot; }

/* THEATER — stage as a wide cinematic hero, panels below */
body.layout-theater .app {
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto auto auto auto auto;
  grid-template-areas:
    "hero  hero"
    "stage stage"
    "tele  tele"
    "crew  log"
    "dock  dock"
    "foot  foot";
}
/* DEN — left work-rail, stage fills the right wall */
body.layout-den .app {
  grid-template-columns:336px 1fr;
  grid-template-rows:auto auto auto 1fr auto auto;
  grid-template-areas:
    "hero  stage"
    "tele  stage"
    "crew  stage"
    "log   stage"
    "dock  stage"
    "foot  foot";
}
body.layout-den .telemetry { grid-template-columns:1fr 1fr; }
body.layout-den .dock { flex-direction:column; align-items:stretch; }
body.layout-den .dock-group { flex-wrap:wrap; }
body.layout-den .stage-card { position:sticky; top:18px; }

@media (max-width:900px){
  .app, body.layout-theater .app, body.layout-den .app {
    grid-template-columns:1fr;
    grid-template-rows:auto;
    grid-template-areas:"hero" "tele" "stage" "crew" "log" "dock" "foot";
  }
  body.layout-den .stage-card { position:static; }
  body.layout-den .telemetry { grid-template-columns:repeat(2,1fr); }
}

/* ── HEADER ──────────────────────────────────────────────────────────────── */
.hero { display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.hero-top { display:flex; align-items:center; gap:12px; }
.hero-top .hero-title { flex:1; text-align:center; white-space:nowrap; }
.hero-main { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.hero-left { display:flex; align-items:center; gap:16px; }
.hero-mark {
  width:48px; height:48px; border-radius:13px; overflow:hidden; flex-shrink:0;
  border:1px solid var(--line-bright); display:grid; place-items:center;
  background:radial-gradient(circle at 50% 30%, #2a2f3e, #12161f);
  box-shadow:0 0 18px rgba(255,174,66,.18), inset 0 0 0 1px rgba(255,255,255,.03);
}
body[data-time="day"] .hero-mark { background:var(--inset); box-shadow:var(--shadow-mascot,0 4px 18px rgba(0,0,0,.09)); }
.hero-mark img { width:100%; height:100%; object-fit:cover; object-position:55% 18%; image-rendering:pixelated; }
.hero-title {
  font-family:var(--font-disp); font-weight:800;
  font-size:clamp(16px,3.9vw,22px); letter-spacing:-0.018em; line-height:.96; color:var(--txt);
}
body[data-time="night"] .hero-title {
  background:linear-gradient(110deg,var(--pumba),var(--gigi) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub { font-family:var(--font-body); font-size:9.5px; color:var(--txt-dim); letter-spacing:0.22em; text-transform:uppercase; margin-top:8px; display:flex; align-items:center; gap:7px; }
.hero-sub .dot { width:6px; height:6px; border-radius:50%; background:var(--gigi); box-shadow:0 0 8px var(--gigi); animation:pulse 2s ease-in-out infinite; }

/* console cluster (right side of header) */
.console { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.seg {
  display:inline-flex; background:var(--card-flat); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:3px; gap:2px; box-shadow:var(--card-shadow);
}
.seg button {
  font-family:var(--font-body); font-size:9.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:7px 11px; border:none; background:transparent;
  color:var(--txt-dim); border-radius:5px; cursor:pointer; transition:all .15s; white-space:nowrap;
}
.seg button:hover { color:var(--txt-mid); }
.seg button.sel { background:var(--pumba); color:#0a0c12; box-shadow:0 0 12px color-mix(in srgb,var(--pumba) 30%,transparent); }
body[data-time="day"] .seg button.sel { color:#fff; box-shadow:none; }

.clockbox { display:flex; align-items:center; gap:13px; padding:8px 14px; background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--card-shadow); }
.dial {
  position:relative; width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(from 180deg, #1a2740 0deg, #25406a 60deg, #4a5a86 120deg, #caa15a 175deg, #ffae42 200deg, #caa15a 225deg, #3a4a72 290deg, #1a2740 360deg);
  box-shadow:inset 0 0 0 3px var(--card-flat), inset 0 0 12px rgba(0,0,0,.6); display:grid; place-items:center;
}
.dial-glyph { font-size:13px; filter:drop-shadow(0 0 4px rgba(0,0,0,.5)); }
.dial-dot { position:absolute; top:50%; left:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff, 0 0 14px var(--pumba); }
.console-sep { width:1px; height:32px; background:var(--line-bright); }
.console-clock { font-family:var(--font-clock); font-size:17px; color:var(--clock); text-shadow:var(--clock-shadow); line-height:1; }
.console-meta { font-family:var(--font-body); font-size:8.5px; color:var(--txt-dim); letter-spacing:0.14em; text-transform:uppercase; margin-top:7px; white-space:nowrap; }

/* ── TELEMETRY STRIP ─────────────────────────────────────────────────────── */
.telemetry { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:760px){ .telemetry{ grid-template-columns:repeat(2,1fr); } }
.tcell { position:relative; background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r); padding:11px 14px; overflow:hidden; box-shadow:var(--card-shadow); }
.tcell-label { font-family:var(--font-body); font-size:8.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--txt-dim); display:flex; align-items:center; gap:6px; }
.tcell-label i { width:5px; height:5px; border-radius:50%; background:var(--pumba); box-shadow:0 0 6px var(--pumba); }
.tcell.gigi .tcell-label i { background:var(--gigi); box-shadow:0 0 6px var(--gigi); }
.tcell-value { font-family:var(--font-disp); font-weight:700; font-size:19px; margin-top:6px; letter-spacing:.01em; color:var(--txt); line-height:1; }
.tcell-value .u { font-family:var(--font-body); font-size:11px; color:var(--txt-mid); font-weight:400; letter-spacing:.04em; margin-left:3px; }
.tcell-sub { font-family:var(--font-body); font-size:9px; color:var(--txt-dim); letter-spacing:0.06em; margin-top:5px; }
.eq { display:flex; align-items:flex-end; gap:2.5px; height:22px; margin-top:7px; }
.eq-bar { width:3px; background:linear-gradient(180deg,var(--gigi),color-mix(in srgb,var(--gigi) 55%,#000)); border-radius:2px; height:20%; transition:height .08s linear; }
.tcell.idle .eq-bar { background:var(--line-bright); }

/* ── CARDS ───────────────────────────────────────────────────────────────── */
.card { background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--card-shadow); }
.card-head { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.card-title { font-family:var(--font-disp); font-weight:700; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; display:flex; align-items:center; gap:8px; color:var(--txt); }
.card-title .tri { color:var(--pumba); }
.card-meta { font-family:var(--font-body); font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--txt-dim); display:flex; align-items:center; gap:6px; }
.card-meta.live { color:var(--gigi); }
.card-meta.live i { width:5px; height:5px; border-radius:50%; background:var(--gigi); box-shadow:0 0 6px var(--gigi); animation:pulse 1.4s ease-in-out infinite; }

/* ── STAGE ───────────────────────────────────────────────────────────────── */
.stage-card { padding:12px; }
.stage-head { display:flex; justify-content:space-between; align-items:center; padding:0 2px 10px; }
.stage {
  position:relative; width:100%; aspect-ratio:1402 / 1122; background:#0a0c12;
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; container-type:inline-size;
}
.stage-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(var(--bg-bright)) saturate(calc(.9 + var(--day-wash)*.2)); transition:filter .6s ease; }

/* daylight wash — brightens & warms the night scene into daytime (day mode) */
.day-wash { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:var(--day-wash); transition:opacity .6s ease;
  background:radial-gradient(ellipse 70% 60% at 12% 18%, rgba(255,236,190,.95), rgba(255,214,150,.4) 45%, rgba(255,200,140,.08) 75%); }

.window-fx { position:absolute; mix-blend-mode:multiply; pointer-events:none; }
.window-fx.run { animation:daynight 48s ease-in-out infinite; }
@keyframes daynight { 0%{background:rgba(40,30,80,0)} 22%{background:rgba(8,10,34,0.55)} 42%{background:rgba(14,14,46,0.45)} 66%{background:rgba(60,42,72,0.3)} 82%{background:rgba(150,96,66,0.2)} 100%{background:rgba(40,30,80,0)} }
body[data-time="day"] .window-fx { display:none; }

.lamp { position:absolute; border-radius:50%; transform:translate(-50%,-50%); mix-blend-mode:screen; pointer-events:none;
  background:radial-gradient(circle, rgba(255,214,140,0.9), rgba(255,190,100,0.25) 45%, transparent 70%); }
.lamp.run { animation:lampPulse 4.5s ease-in-out infinite; }
body[data-time="day"] .lamp { opacity:.4; }
@keyframes lampPulse { 0%,100%{opacity:.55; transform:translate(-50%,-50%) scale(1)} 50%{opacity:.8; transform:translate(-50%,-50%) scale(1.06)} }

.screen { position:absolute; border-radius:40%; transform:translate(-50%,-50%); mix-blend-mode:screen; pointer-events:none; }
.screen.run { animation:screenFlick 0.9s steps(8,end) infinite; }
@keyframes screenFlick { 0%{opacity:.18}20%{opacity:.30}35%{opacity:.16}55%{opacity:.34}70%{opacity:.20}90%{opacity:.28}100%{opacity:.22} }
body[data-time="day"] .screen { opacity:.12 !important; }

/* dogs — two motion layers. The animated layer is feathered at the bottom so
   the desk-contact edge blends into the static office image and never wobbles. */
.dog { position:absolute; transform-origin:50% 100%; will-change:transform; }
.dog img { display:block; width:100%; height:auto; }
.dog-fx { transform-origin:50% 92%; will-change:transform; transition:transform .7s cubic-bezier(.33,0,.2,1);
  -webkit-mask-image:linear-gradient(to bottom,#000 90%,rgba(0,0,0,.4) 96%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 90%,rgba(0,0,0,.4) 96%,transparent 100%); }
.dog-hit { position:absolute; inset:0; border-radius:14% 14% 22% 22% / 18% 18% 30% 30%; transition:box-shadow .18s; }
.dog.sel .dog-hit { box-shadow:0 0 0 2px var(--c), 0 0 26px color-mix(in srgb,var(--c) 60%,transparent); }
.dog-paws { position:absolute; inset:0; clip-path:inset(81% 17% 9% 17%); pointer-events:none; will-change:transform; }
.dog-paws img { display:block; width:100%; height:auto; }
.dog-fx.type .dog-paws { animation:pawtap .26s ease-in-out infinite; }
/* only the paw tips (hands) tap the keys — forearm and desk stay still */
@keyframes pawtap { 0%,100%{ transform:translateY(0) } 30%{ transform:translateY(1.8px) } 60%{ transform:translateY(.3px) } 85%{ transform:translateY(1.6px) } }
.dog.breathe { animation:breathe 5.4s cubic-bezier(.37,0,.63,1) infinite; }
/* typing is now JUST the paw tap (see .dog-paws) — no whole-body rotation, so
   the desk underneath the dog stays perfectly still while the paws work. */
.dog-fx.tilt { animation:tilt 2.4s cubic-bezier(.45,0,.25,1) both; }
.dog-fx.perk { animation:perk 1.1s cubic-bezier(.34,1.3,.5,1) both; }
@keyframes breathe { 0%,100%{transform:translateY(0) scaleY(1) scaleX(1)} 50%{transform:translateY(-0.18%) scaleY(1.011) scaleX(0.998)} }
@keyframes tilt { 0%{transform:rotate(0)} 30%{transform:rotate(2.1deg)} 68%{transform:rotate(2.1deg)} 100%{transform:rotate(0)} }
@keyframes perk { 0%{transform:scaleY(1)} 45%{transform:scaleY(1.045)} 100%{transform:scaleY(1)} }

.glow { position:absolute; border-radius:50%; mix-blend-mode:screen; pointer-events:none; }
.glow.run { animation:flick 2.4s ease-in-out infinite; }
body[data-time="day"] .glow { opacity:.06 !important; }
@keyframes flick { 0%,100%{opacity:.10} 45%{opacity:.22} 55%{opacity:.13} }

/* engraved desk nameplate (overlays the baked-in plate, matches each dog) */
.deskplate { position:absolute; transform:translate(-50%,-50%); z-index:4; min-width:15%; padding:1.15cqw 1.9cqw;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#52381e 0%,#3a2613 55%,#2b1c0d 100%);
  border:0.3cqw solid #7a5630; border-radius:1cqw;
  box-shadow:0 0.3cqw 0.7cqw rgba(0,0,0,.5), inset 0 0.22cqw 0.3cqw rgba(255,208,150,.1), inset 0 -0.2cqw 0.35cqw rgba(0,0,0,.4);
  color:#e6c890; font-family:'Noto Sans Thai',system-ui,sans-serif; text-align:center; line-height:1; pointer-events:none; white-space:nowrap; }
.dp-name { display:flex; align-items:center; gap:.5cqw; font-family:var(--font-disp),'Noto Sans Thai',sans-serif; font-size:1.68cqw; font-weight:700; letter-spacing:.03em; text-shadow:0 0.1cqw 0 rgba(0,0,0,.5); }
.dp-paw { font-size:1.3cqw; filter:saturate(.65) brightness(.95); }
.dp-role { font-family:'Noto Sans Thai',system-ui,sans-serif; font-size:1.22cqw; font-weight:500; color:#bf9d6a; margin-top:.5cqw; letter-spacing:.01em; }

/* status chip above each dog */
.chip { position:absolute; transform:translate(-50%,-100%); font-family:var(--font-body); font-size:10px; letter-spacing:.04em;
  padding:4px 9px; border:1px solid var(--c); color:var(--c); background:var(--chip-bg); border-radius:5px; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.35), 0 0 12px color-mix(in srgb,var(--c) 25%,transparent); transition:opacity .3s; backdrop-filter:blur(3px); z-index:6; }
.chip::after { content:''; position:absolute; bottom:-5px; left:50%; margin-left:-4px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--c); }
.chip .blink { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--c); margin-right:6px; vertical-align:middle; box-shadow:0 0 6px var(--c); animation:pulse 1s ease-in-out infinite; }

/* floating treat bone */
.treat { position:absolute; transform:translate(-50%,-50%); font-size:20px; pointer-events:none; z-index:8; animation:treatRise 1.3s ease-out forwards; }
@keyframes treatRise { 0%{opacity:0; transform:translate(-50%,-30%) scale(.5)} 18%{opacity:1} 100%{opacity:0; transform:translate(-50%,-150%) scale(1.1)} }

/* atmosphere */
.mote { position:absolute; border-radius:50%; background:rgba(255,214,140,.7); mix-blend-mode:screen; pointer-events:none; opacity:0; filter:blur(.4px); }
.mote.run { animation:drift linear infinite; }
@keyframes drift { 0%{opacity:0; transform:translateY(8px) translateX(0)} 12%{opacity:.55} 88%{opacity:.4} 100%{opacity:0; transform:translateY(-46px) translateX(10px)} }
.vignette { position:absolute; inset:0; pointer-events:none; opacity:var(--vig); transition:opacity .6s ease; box-shadow:inset 0 0 90px 18px rgba(4,6,12,.7); background:radial-gradient(ellipse 78% 70% at 50% 46%, transparent 55%, rgba(6,8,14,.5) 100%); }
.grain { position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── TASK-ASSIGN POPOVER ─────────────────────────────────────────────────── */
.taskmenu { position:absolute; z-index:30; width:210px; background:var(--card-flat); border:1px solid var(--line-bright);
  border-radius:var(--r); box-shadow:0 18px 44px rgba(0,0,0,.5); padding:9px; opacity:0; transform:translateY(4px) scale(.97);
  transform-origin:top center; pointer-events:none; transition:opacity .16s, transform .16s; }
body[data-time="day"] .taskmenu { box-shadow:0 12px 36px rgba(60,50,40,.22); }
.taskmenu.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.tm-head { display:flex; align-items:center; gap:8px; padding:4px 6px 9px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.tm-av { width:26px; height:26px; border-radius:7px; overflow:hidden; border:1px solid var(--line-bright); flex-shrink:0; background:var(--inset); }
.tm-av img { width:100%; height:100%; object-fit:cover; object-position:55% 20%; image-rendering:pixelated; }
.tm-name { font-family:var(--font-disp); font-weight:700; font-size:12px; color:var(--c); }
.tm-role { font-family:var(--font-body); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-dim); margin-top:1px; }
.tm-list { display:flex; flex-direction:column; gap:2px; max-height:182px; overflow-y:auto; }
.tm-list::-webkit-scrollbar { width:4px; } .tm-list::-webkit-scrollbar-thumb{ background:var(--line-bright); border-radius:4px; }
.tm-item { font-family:var(--font-body); font-size:11px; text-align:left; padding:7px 9px; background:transparent; border:none; color:var(--txt-mid); border-radius:6px; cursor:pointer; transition:all .13s; line-height:1.3; }
.tm-item:hover { background:var(--inset); color:var(--txt); }
.tm-foot { display:flex; gap:6px; margin-top:7px; padding-top:7px; border-top:1px solid var(--line); }
.tm-btn { flex:1; font-family:var(--font-body); font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:8px; border-radius:6px; cursor:pointer; transition:all .14s; border:1px solid var(--line-bright); background:transparent; color:var(--txt-mid); }
.tm-btn:hover { color:var(--txt); border-color:var(--txt-mid); }
.tm-btn.treat { border-color:color-mix(in srgb,var(--c) 50%,transparent); color:var(--c); }
.tm-btn.treat:hover { background:color-mix(in srgb,var(--c) 14%,transparent); }

/* ── CREW PANEL ──────────────────────────────────────────────────────────── */
.panel-body { padding:6px 14px 12px; }
.crew { display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); border-radius:8px; transition:background .14s; }
.crew { padding-left:8px; padding-right:8px; margin:0 -8px; }
.crew:last-child { border-bottom:none; }
.crew:hover { background:var(--inset); }
.crew-av { width:36px; height:36px; border-radius:9px; overflow:hidden; flex-shrink:0; border:1px solid var(--line-bright); background:var(--inset); }
.crew-av img { width:100%; height:100%; object-fit:cover; object-position:55% 20%; image-rendering:pixelated; }
.crew-info { flex:1; min-width:0; }
.crew-top { display:flex; align-items:center; gap:7px; }
.crew-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow:0 0 8px currentColor; animation:pulse 1.4s ease-in-out infinite; }
.crew-name { font-family:var(--font-disp); font-weight:700; font-size:13px; }
.crew-assign { margin-left:auto; font-family:var(--font-body); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-dim); border:1px solid var(--line); border-radius:5px; padding:3px 6px; transition:all .14s; }
.crew:hover .crew-assign { color:var(--c); border-color:var(--c); }
.crew-role { font-family:var(--font-body); font-size:9.5px; color:var(--txt-dim); margin-top:2px; letter-spacing:.03em; text-transform:uppercase; }
.crew-task { font-family:var(--font-body); font-size:11px; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── WORK LOG ────────────────────────────────────────────────────────────── */
.feed { height:248px; overflow-y:auto; overflow-x:hidden; padding:8px 14px 12px; font-family:var(--font-body); font-size:11px; line-height:1.5; }
body.layout-theater .feed, body.layout-den .feed { height:210px; }
.feed::-webkit-scrollbar { width:4px; } .feed::-webkit-scrollbar-track{ background:transparent; } .feed::-webkit-scrollbar-thumb{ background:var(--line-bright); border-radius:4px; }
.ev { display:flex; gap:9px; margin-bottom:7px; align-items:flex-start; }
.ev-time { color:var(--txt-dim); font-size:9px; padding-top:2px; flex-shrink:0; width:38px; }
.ev-mark { width:3px; align-self:stretch; flex-shrink:0; margin-top:3px; border-radius:2px; background:var(--txt-dim); }
.ev-body { flex:1; color:var(--txt-mid); word-wrap:break-word; overflow-wrap:anywhere; min-width:0; }
.ev-body b { color:var(--txt); font-weight:600; }

/* ── CONTROL DOCK ────────────────────────────────────────────────────────── */
.dock { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; align-items:flex-start; }
.dock-group { display:flex; gap:8px; padding:8px; background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--card-shadow); }
.btn { font-family:var(--font-body); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:11px 16px;
  background:transparent; color:var(--txt-mid); border:1px solid var(--line-bright); border-radius:var(--r-sm); cursor:pointer; transition:all .18s; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.btn:hover { color:var(--txt); border-color:var(--txt-mid); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn.on { color:var(--gigi); border-color:var(--gigi); box-shadow:0 0 14px rgba(143,227,136,.18) inset; }
body[data-time="day"] .btn.on { box-shadow:none; background:color-mix(in srgb,var(--gigi) 12%,transparent); }
.btn .ic { font-size:12px; }

.footnote { margin-top:6px; text-align:center; font-family:var(--font-body); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-dim); }

@keyframes pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.5; transform:scale(.8)} }

@media (prefers-reduced-motion: reduce){
  .window-fx,.window-warm,.lamp,.screen,.glow,.dog,.dog.breathe,.dog-fx,.dog-fx.type,.dog-fx.tilt,.dog-fx.perk,.dog-fx.type .dog-paws,.mote,.hero-sub .dot,.crew-dot,.chip .blink,.card-meta.live i,.tcell-label i{animation:none !important}
  .dog,.dog-fx,.dog-paws{transform:none !important}.screen{opacity:.22}.glow{opacity:.14}.lamp{opacity:.6}.mote{opacity:.3}
}


/* BUG-27 + mobile layout: overflow guards; telemetry stays 2-col on mobile (verify on device) */
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .app > *{min-width:0}
  .telemetry > *{min-width:0}
  body.layout-den .telemetry{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .app{padding:16px 12px 24px}
  .telemetry{gap:10px}
}
@media (max-width:380px){
  .app{padding:12px 10px 18px}
}

/* Mobile: keep clock compact + beside Day/Night (desktop unchanged) */
@media (max-width:560px){
  .console{gap:9px 10px}
  .clockbox{padding:5px 10px;gap:9px}
  .dial{width:30px;height:30px}
  .dial-glyph{font-size:11px}
  .console-sep{height:22px}
  .console-clock{font-size:14px}
  .console-meta{font-size:7px;letter-spacing:.1em;margin-top:3px}
}

/* Home button (links to portfolio root) */
.home-btn{ display:inline-grid; place-items:center; width:40px; height:40px; flex-shrink:0;
  border:1px solid var(--line-bright); border-radius:var(--r-sm); color:var(--txt-mid);
  background:transparent; transition:all .18s; text-decoration:none; }
.home-btn:hover{ color:var(--pumba); border-color:var(--pumba); transform:translateY(-1px); }
.home-btn:active{ transform:translateY(0); }
.home-btn svg{ width:18px; height:18px; }