/* ============================================================
   THE A.I. FILES - Station 1
   Single-file build. Edit copy in the JS DATA section near the
   bottom (look for "EVIDENCE" and "APPS"). Colours/type are in
   the :root block right below.
   ============================================================ */

/* ==============REUSABLE COLOUR PALETTE & FONTS ==============*/
:root{
  /* ---- SMOKE & WHISKEY: the noir base the whole game sits on ----
     Warm near-black room, brass fittings, oxblood accents. The manila
     folder and envelope keep their original browns and read as the one
     lit object in the room. */
  --noir-1:#1c1a13;      /* smoke, lightest point of the backdrop */
  --noir-2:#14130d;      /* mid */
  --noir-3:#0b0a07;      /* the corners of the room */
  --brass:#c9a961;       /* fittings, rank numerals, rules */
  --brass-lo:#8a6f37;    /* brass in shadow */
  --brass-hi:#e8d09a;    /* brass catching the lamp */
  --oxblood:#7a2a22;     /* deep red accent, sits under --red */
  --smoke-panel:#221f18; /* panel fill that reads as "in the room" */
  --smoke-line:rgba(201,169,97,.18);

  /* Real grain, generated in-line by SVG turbulence. Replaces the
     repeating-linear-gradient "wood lines", which read as cheap stripes at
     any size. No image file, so nothing extra to ship or load. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Wood grain, procedurally. The trick is an ANISOTROPIC base frequency:
     very low across X, high up Y, which stretches the noise into long
     irregular streaks running left to right. That is what wood actually
     looks like. Evenly spaced repeating-linear-gradient lines never do. */
  --wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='400'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.38' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.55'/%3E%3C/svg%3E");

  --walnut:#2b2318;
  --walnut-2:#3a3022;
  --manila: #fff6df;
  --kraft: #dfbd7f;
  --ink:#1c2b3a;
  --ink-2:#26394d;
  --red:#c1462f;
  --red-deep:#9c3322;
  --teal:#1f8a82;
  --teal-deep:#176b65;
  --paper: #fffdf8;
  --paper-line:#d8cfb8;
  --highlight:#f4c948;
  --display:'Oswald',sans-serif;
  --type:'Courier Prime',monospace;
  --ui:'Inter',system-ui,sans-serif;
  --hand:'Caveat',cursive;
  --shadow-deep:0 30px 60px -15px rgba(0,0,0,.6);
  /* laptop OS theme */
  --os-bg1:#e7edf3; --os-bg2:#cfd9e4;
  --os-panel:#ffffff; --os-line:#e2e7ee;
  --os-text:#233240; --os-mut:#6b7c8d;
  --os-bar:#1a2735;
  --ok:#1f8a5a;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{

  font-family: var(--ui), serif;
  color:var(--ink);
  /* a single warm light hung high in a dark room, everything else falls off */
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(201,169,97,.13) 0%, rgba(201,169,97,0) 60%),
    radial-gradient(140% 105% at 50% 42%, var(--noir-1) 0%, var(--noir-2) 42%, var(--noir-3) 100%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}
/* corner vignette so the edges of every scene fall into shadow */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(125% 100% at 50% 42%, transparent 48%, rgba(0,0,0,.62) 100%);
}

.scene {
  position: fixed;
  inset: 0;

  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);

  transition:
    opacity 0.5s ease,
    transform 0.5s ease;

  pointer-events: none;
}

.scene.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);

  pointer-events: auto;
}
.eyebrow{
  font-family: var(--display), serif;letter-spacing:.35em;text-transform:uppercase;
  color:var(--kraft);font-size:.8rem;margin-bottom:.4rem}
.gametitle{
  font-family: var(--display), serif;font-weight:700;color:var(--manila);
  font-size:clamp(2.4rem,7vw,4.4rem);line-height:.95;letter-spacing:.02em;
  text-shadow:0 3px 0 #000,0 14px 30px rgba(0,0,0,.5)}
.gametitle .dot{color:var(--red)}
.subtitle{
  font-family: var(--type), serif;color:var(--kraft);margin:.8rem 0 2.2rem;font-size:1rem}
/* Transition classes for scene switching: added by JS during switchScene() */
.scene.transitioning { visibility: visible; }
.scene.entering { z-index: 2; pointer-events: auto; animation: scene-in .42s cubic-bezier(.2,.9,.2,1) forwards; }
.scene.exiting  { z-index: 1; pointer-events: none; animation: scene-out .38s cubic-bezier(.2,.9,.2,1) forwards; }

/* ID badge scene: custom fade-in animation for a smoother entrance */
#scene-two.entering {
  animation: badge-fade-in .6s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes scene-in{
  from{opacity:0;transform:translateY(12px) scale(.997)}
  to{opacity:1;transform:none}
}
@keyframes scene-out{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-8px) scale(.998)}
}
@keyframes badge-fade-in{
  from{opacity:0}
  to{opacity:1}
}



/* film grain over everything: organic, directionless, and it stops large
   flat gradients from banding on cheap projector-grade laptop screens */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain);
  background-size:180px 180px;
  opacity:.16;
  mix-blend-mode:overlay;
}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.screen{display:none;min-height:100vh;position:relative;z-index:1}
.screen.active{display:block}

/* ====================== SHARED BUTTONS ===================== */
.btn{
  font-family: var(--display), serif;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;font-size:.95rem;color:#fff;background:var(--teal);
  padding:.85rem 1.8rem;border-radius:3px;
  box-shadow:0 6px 0 var(--teal-deep),0 10px 18px rgba(0,0,0,.35);
  transition:transform .08s ease,box-shadow .08s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 7px 0 var(--teal-deep),0 14px 22px rgba(0,0,0,.4)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--teal-deep),0 6px 10px rgba(0,0,0,.3)}
.btn.red{background:var(--red);box-shadow:0 6px 0 var(--red-deep),0 10px 18px rgba(0,0,0,.35)}
.btn.red:hover{box-shadow:0 7px 0 var(--red-deep),0 14px 22px rgba(0,0,0,.4)}
.btn.red:active{box-shadow:0 2px 0 var(--red-deep),0 6px 10px rgba(0,0,0,.3)}
.btn.ghost{background:transparent;color:var(--manila);box-shadow:none;border:1px solid rgba(232,214,168,.4)}
.btn.ghost:hover{background:rgba(232,214,168,.1);transform:none}

/* polished primary call-to-action (case-file gold, pressable) */
.btn.btn-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--display), serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:700;
  font-size:.92rem;
  padding:.85rem 1.7rem;
  border:0;
  border-radius:10px;
  color:#fff3c6;
  background:var(--red-deep);
  box-shadow: 0 7px 0 #c17864, 0 8px 14px -6px rgba(80, 55, 20, .5), inset 0 0px 0 rgba(255, 255, 255, .65);
  transition:transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.btn.btn-cta:hover{
  filter:brightness(1.04);
  transform:translateY(-2px);
  box-shadow:0 7px 0 #c17864, 0 16px 26px rgba(0,0,0,.4), inset 0 0px 0 rgba(255,255,255,.6);
}
.btn.btn-cta:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 #b9781a, 0 6px 12px rgba(0,0,0,.3), inset 0 0px 0 rgba(255,255,255,.6);
}

.btn.btn-cta .btn-arrow{
  font-size:1.15em; line-height:0; transition:transform .18s ease;
}
.btn.btn-cta:hover .btn-arrow{ transform:translateX(4px); }

/* folder page-navigation arrows (bottom of each sheet) */
.page-arrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  align-self:flex-end;
  flex:0 0 auto;
  margin: 7px 2px 2px auto;
  padding:9px 17px;
  font-family:var(--display), serif;
  font-weight:700;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#5a3d18;
  cursor:pointer;
  background:linear-gradient(180deg,#f6e6bd,#e9d29a 62%,#dcc084);
  border:1px solid #c9ac74;
  border-radius:24px;
  box-shadow:0 3px 0 #bd9a5b, 0 8px 14px -6px rgba(80,55,20,.5), inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform .1s ease, box-shadow .1s ease, filter .15s ease;
}

.page-arrow:hover{ filter:brightness(1.04); transform:translateY(-2px);
  box-shadow:0 5px 0 #bd9a5b, 0 12px 20px -6px rgba(80,55,20,.55), inset 0 1px 0 rgba(255,255,255,.65); }
.page-arrow:active{ transform:translateY(3px);
  box-shadow:0 0 0 #bd9a5b, 0 5px 10px -4px rgba(80,55,20,.5), inset 0 1px 0 rgba(255,255,255,.65); }
.page-arrow::after{ content:"→"; font-size:1.1em; transition:transform .18s ease; }
.page-arrow:hover::after{ transform:translateX(4px); }
.page-arrow{ white-space:nowrap; }

/* the primary "go" arrow (Objectives → laptop) uses the gold CTA look */
.page-arrow.go{
  color:#fff3c6;
  background:var(--red-deep);
  border:0;
  box-shadow: 0 3px 0 #c17864, 0 8px 14px -6px rgba(80, 55, 20, .5), inset 0 1px 0 rgba(255, 255, 255, .65);

}
.page-arrow.go:hover{ box-shadow:0 6px 0 #c17864, 0 14px 22px -6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6); }
.page-arrow.go:active{ box-shadow:0 0 0 #c17864, 0 6px 12px -4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6); }
.btn:disabled{filter:grayscale(.6) opacity(.6);cursor:not-allowed;transform:none}

/* ============== SCENE 1 ELEMENTS ============== */
#scene-one.active {
  display:flex;
  position:fixed;inset:0;
  flex-direction: column;
  align-items:center;
  /* NOT justify-content:center. Flex centring overflows in BOTH directions
     when the content is taller than the box, so on a short viewport the
     title escaped ABOVE the padding and slid under the banner pinned at
     top:85px. Auto margins centre the same way but collapse to zero when
     space runs out, so the padding always holds. Viewport height changes
     whenever the game enters or leaves fullscreen, which is why this
     appeared mid-session and vanished on refresh. */
  justify-content:flex-start;
  padding:150px 16px 64px;
  overflow-y:auto;
  font-family:var(--display);
  font-size:1.4rem;color:var(--manila);
}

#subtitle-scene-one{
  font-family:var(--display);
  color:var(--manila);
  margin-bottom: 1.6rem;
  text-align:center;
  max-width:560px
}

#subtitle-scene-one h3 {
  font-size: 23pt;
  margin-bottom: 10px;
}

#subtitle-scene-one p{
  font-size: 10pt;
  letter-spacing:.15em;
  text-shadow: none;
  font-family: var(--ui);
  color:#fade9e;
  margin-bottom: 12px;
}

#subtitle-scene-one b{
  color: #fade9e;
}
/* text box for name entry */
#name-box {
  background:var(--paper);color:var(--ink);padding:0.6rem 0.6rem;
  border-radius:10px;
  box-shadow:var(--shadow-deep);
  text-align:center;
  font-family:var(--type);
  font-size:1.25rem;
  letter-spacing:.08em;
  font-size: 10pt;
  width: 75%;

  text-transform:uppercase;z-index:2
}

#officer-name-text{
  font-size: 11pt;
  font-family: var(--ui);
  font-weight:bold;
  letter-spacing:0.15em;
  display: block;
  text-align: center;
}

#btn-scene-one {
  margin-top: 5px;
  font-size: 10px;
  color: rgb(255, 249, 245);
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: rgb(24, 81, 77) 0px 7px 0px, rgba(0, 0, 0, 0.4) 0px 14px 22px;
  padding: 10px 15px;
  background: var(--teal-deep);
  border-radius: 6px;
  transition: 0.2s;
}

#btn-scene-one:hover{
  background: #1f8a82;
}


#scene-one.active > .intro-inner{ margin-top:auto; margin-bottom:auto; }

.intro,
.intro-inner {
  text-align: center;
  text-shadow:0 3px 0 #000,0 14px 30px rgba(0,0,0,.5);
}

.scene-banner {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  background-color: #45382b;
  padding: 0.5%;
  border-top: 2px solid var(--manila);
  border-bottom: 2px solid var(--manila);
}

#motto {
  font-size: 10pt;
}

#scene-log-top {
  position: absolute;
  top:40px;
  right: 50px;
  font-family: var(--type);
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

#scene-log-bottom {
  position: absolute;
  bottom:40px;
  right: 50px;
  font-family: var(--type);
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

/* ====================== SCENE 2: ID BADGE ================= */
/* Layout: one "credentials office" panel holding a status strip,
   the assignment memo (left) and the badge on its lanyard (right). */

#scene-two{
  --id-card:#fff8ea;
  --id-teal:#1f8a82;
  --id-teal-deep:#124c47;
  --id-brass:#c9a24c;
  --id-rule:rgba(58,42,29,.16);
}

#scene-two.active{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,3vw,34px);
  /* same room, lamp shifted right so it falls on the badge */
  background:
    var(--grain),
    radial-gradient(46% 40% at 74% 46%, rgba(255,214,150,.17), transparent 64%),
    radial-gradient(120% 80% at 50% -12%, rgba(255,226,170,.07), transparent 58%),
    radial-gradient(130% 110% at 60% 42%, #262015 0%, #17120a 50%, #0a0805 100%);
  background-size:180px 180px, auto, auto, auto;
  background-blend-mode:overlay, normal, normal, normal;
  width:100vw;
  height:100vh;
  overflow:auto;
}

/* ---------- the panel ---------- */
#screen-id{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  align-items:start;
  column-gap: 1%;
  width:min(1040px,100%);
  min-height:auto;
  margin:auto;
  padding:clamp(18px,2.6vw,30px) 5% clamp(24px,3vw,36px) 5%;
  border-radius:18px;
  background:
    var(--grain),
    linear-gradient(160deg,#2a2318,#171309);
  background-size:180px 180px, auto;
  background-blend-mode:overlay, normal;
  border:1px solid rgba(201,169,97,.14);
  box-shadow:0 34px 80px -24px rgba(0,0,0,.75),
  inset 0 1px 0 rgba(255,255,255,.06),
  inset 0 0 0 2px rgba(0,0,0,.16);
}

/* ---------- status strip across the top ---------- */
.id-topbar{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(232,214,168,.18);
  font-family:var(--display), serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:clamp(18px,20px,20px);
  color:var(--kraft);
}

.id-topbar .idt-right{
  display:inline-flex; align-items:center; gap:8px;
  color:#8fd6cd;
}
.idt-led{
  width:7px; height:7px; border-radius:50%;
  background:#3fd3b6; box-shadow:0 0 0 3px rgba(63,211,182,.18);
  animation:idLed 2.4s ease-in-out infinite;
}
@keyframes idLed{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- LEFT: assignment memo ---------- */
#scene-two-header{
  position:static;
  display:flex; flex-direction:column; align-items:center;
  gap:10px;
  min-width:0;
  text-align:center;
}

#scene-two-header p{
  font-size:clamp(.92rem,1.5vw,1.02rem);
  line-height:1.55;
  letter-spacing:.2px;
  text-shadow:none;
  font-family:var(--ui), sans-serif;
  color:#0c5a58;
}
#scene-two-header b{ color:#073d42; font-size:inherit; }

.highlight-text{
  background-color:#ffd41478;
  padding:2px 6px;
  border-radius:10px;
}

/* welcome text as a readable notebook page */
#scene-two-subtitle.notebook-sheet{
  position:relative;
   margin-top:5%;
  width:min(100%,460px);
  height: 500px;
  max-width:460px;
  text-align:left;
  color:#20343a;
  border:1px solid #e6dcc2;
  border-radius:8px;
  padding:34px 26px 24px 48px;
  /* top: spiral · left: margin rule */
  background:
    repeating-linear-gradient(transparent 0 28px, rgb(31 138 130 / 6%) 30px 31px),
    linear-gradient(180deg,#fffdf6,#fff6e2);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.7);
  transform:rotate(-.5deg);
  margin-bottom:26px;
}

#scene-two-subtitle.notebook-sheet::after{   /* red margin rule */
  content:""; position:absolute; top:12px; bottom:12px; left:34px;
  width:2px; background:rgba(193,70,47,.38);
}
#scene-two-subtitle.notebook-sheet p{ margin:0 0 10px; }
#scene-two-subtitle.notebook-sheet p:last-child{ margin-bottom:0; }

/* small label so the memo reads as a document, not loose text */
#scene-two-header p.ns-kicker{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-family:var(--display), serif;
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#a4763f;
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(58,42,29,.14);
}
#scene-two-header p.ns-kicker span:last-child{ color:var(--red); letter-spacing:.14em; }

/* spiral binding across the top */
.ns-spiral{ position:absolute; top:-8px; left:20px; right:20px; height:15px; pointer-events:none; }
.ns-spiral::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 9px 50%, transparent 0 2px, #8a7a55 2.5px 4px, transparent 4.5px) 0 0/26px 100% repeat-x;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));
}

/* welcome sticky note, taped to the top corner of the sheet */
.welcome-postit{
  position:absolute;
  top: -157px;
  right: 100px;
  z-index:3;
  width:min(58%,210px);
  padding:16px 14px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:linear-gradient(180deg,#fff59d,#ffe45e);
  transform:rotate(-7deg);
  box-shadow:0 12px 20px -8px rgba(0,0,0,.55);
  word-break:break-word;
  overflow-wrap:break-word;
}

.welcome-postit::before{  /* tape */
  content:""; position:absolute; top:-7px; left:50%;
  transform:translateX(-50%) rotate(-3deg); width:44px; height:14px;
  background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.05); border-radius:2px;
}
#subtitle-name{
  font-family:var(--ui);
  font-size:20px;
  color:#004445;
  line-height:1.2;
  text-align:center;
}
#bold-name{
  margin-top:6px;
  font-size:18px;
  font-weight:900;
  line-height:1.05;
  margin-bottom:25px;
  overflow-wrap: break-word;
}

/* ---------- RIGHT: badge column ---------- */
#scene-two-body{
  position:static;
  transform:none;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.onboard{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  width:min(100%,340px);
}

/* lanyard the badge hangs from */
.lanyard{
  position:relative;
  width:170px;
  height:clamp(42px,7vh,76px);
  margin-bottom:2px;
}
.lany-strap{
  position:absolute; top:0; width:14px; height:100%;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 3px, transparent 3px 6px),
    linear-gradient(90deg,#0e4841,var(--id-teal) 48%,#0c3f39);
  box-shadow:0 6px 14px -8px rgba(0,0,0,.8);
}
.lany-strap.left { left:24px;  transform:skewX(10deg);  transform-origin:top; }
.lany-strap.right{ right:24px; transform:skewX(-10deg); transform-origin:top; }
.lany-ring{
  position:absolute; bottom:-10px; left:50%;
  width:26px; height:26px; margin-left:-13px;
  border:4px solid #cbb489;
  border-radius:50%;
  background:transparent;
  box-shadow:0 2px 5px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
}

/* the card */
.staffcard{
  position:relative;
  width:100%;
  padding:0 0 22px;
  background:
    radial-gradient(120% 60% at 50% 0%, #fffdf6, transparent 60%),
    var(--id-card);
  border:6px solid var(--id-teal-deep);
  border-radius:14px;
  box-shadow:0 26px 55px -18px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.5);
  font-family:var(--ui), sans-serif;
  overflow:hidden;
}

/* wiggle the badge in, like it's swinging from its clip */
@keyframes badgeWiggle{
  0%   { transform:rotate(0) scale(.9); opacity:0; }
  35%  { transform:rotate(-5deg) scale(1.02); opacity:1; }
  55%  { transform:rotate(4deg) scale(1); }
  70%  { transform:rotate(-2.5deg); }
  84%  { transform:rotate(1.5deg); }
  100% { transform:rotate(0); }
}
#scene-two.active .staffcard{
  transform-origin:50% -70px;                 /* pivot at the lanyard ring */
  animation:badgeWiggle .95s cubic-bezier(.36,.07,.19,.97) both;
}

.badge-clip{
  position:absolute;
  top:-6px; left:50%;
  transform:translateX(-50%);
  width:34px; height:16px;
  background:linear-gradient(180deg,#e0c9a5,#b99a72);
  border:1px solid #8b7355;
  border-radius:0 0 6px 6px;
  box-shadow:0 3px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
  z-index:4;
}

/* foil sheen sweeping across the laminate */
.card-sheen{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.65) 50%, transparent 62%);
  transform:translateX(-120%);
}
#scene-two.active .card-sheen{ animation:cardSheen 1.1s ease-out .95s both; }
.staffcard:hover .card-sheen{ animation:cardSheen 1s ease-out; }
@keyframes cardSheen{ to{ transform:translateX(120%); } }

/* teal header band - the loudest block of colour on the card */
.badge-head{
  padding:16px 14px 12px;
  text-align:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px),
    linear-gradient(180deg,var(--id-teal) 0%,var(--id-teal-deep) 100%);
  border-bottom:3px solid var(--id-brass);
}
.badge-org{
  font-family:var(--display), sans-serif;
  font-size:clamp(1.5rem,4.4vw,1.85rem);
  font-weight:700;
  color:#fff8ea;
  letter-spacing:.16em;
  line-height:1;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.badge-org-full{
  margin-top:6px;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#bfe8e2;
  font-weight:700;
}

/* photo + identity */
#card-photo-information{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:14px;
  padding:16px 16px 12px;
}

/* photo + the arrows that sit OUTSIDE the frame, stacked under it */
.photo-picker{
  flex:0 0 92px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.badge-photo{
  position:relative;
  width:100%;
  height:100px;
  /* plain white studio backdrop: the old tan gradient was tinting the
     headshots brown. The whole photo is fitted, never cropped. */
  background:#ffffff;
  border:1px solid rgba(58,42,29,.35);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:0;
  overflow:hidden;
}
/* the whole headshot is fitted inside the frame, never cropped, so a
   full-body or wide crop still reads as a passport photo */
.badge-photo img{
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.badge-photo img.missing{ opacity:0; }
.badge-photo img.swap{ animation:faceSwap .28s ease; }
@keyframes faceSwap{
  from{ opacity:0; transform:scale(1.06); }
  to{ opacity:1; transform:none; }
}

/* the picker row lives under the frame, not on top of the face */
.face-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:4px;
  padding:2px 3px;
  background:rgba(58,42,29,.72);
  border-radius:4px;
}
.face-arrow{
  width:16px; height:16px;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:none; cursor:pointer;
  background:rgba(255,243,216,.14);
  color:#fff3d8;
  font-size:13px; line-height:1; font-weight:700;
  border-radius:3px;
  transition:background .15s ease;
}
.face-arrow:hover{ background:rgba(255,243,216,.34); }
.photo-tag{
  flex:1 1 auto;
  font-family:var(--display), sans-serif;
  font-size:7px; letter-spacing:.16em; text-transform:uppercase;
  text-align:center;
  color:#fff3d8;
  white-space:nowrap;
}

#card-details{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  width:auto;
}
.bf-label{
  font-family:var(--display), sans-serif;
  font-size:8px; letter-spacing:.24em; text-transform:uppercase;
  color:#9b7b4d;
}
.badge-name{
  font-family:var(--display), sans-serif;
  font-size:clamp(1rem,3.2vw,1.22rem);
  font-weight:700;
  color:#2b1f14;
  text-align:left;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.15;
  margin:1px 0 5px;
  width:100%;
  overflow-wrap:anywhere;
}
.badge-role{
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8c3a10;
  text-align:left;
  font-weight:700;
  padding-bottom:8px;
  border-bottom:1px solid var(--id-rule);
}

.badge-unit{
  margin-top:8px;
  font-family:var(--type), monospace;
  font-size:9.5px;
  letter-spacing:.06em;
  color:#4a3a2a;
  padding-right:52px;
}
.badge-unit i{
  font-style:normal;
  display:block;
  font-family:var(--display), sans-serif;
  font-size:7.5px; letter-spacing:.22em; text-transform:uppercase;
  color:#9b7b4d;
}

/* holographic seal, pinned to the corner of the identity block */
.badge-seal{
  position:absolute;
  right:0; bottom:0;
  width:46px; height:46px;
  border-radius:50%;
  display:grid; place-items:center;
  background:
    conic-gradient(from 210deg, #ffe6a8, #b9e7df, #f6c7d8, #cfe0ff, #ffe6a8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 2px 6px -2px rgba(0,0,0,.4);
  opacity:.92;
}
.badge-seal span{
  font-family:var(--display), sans-serif;
  font-size:7px; letter-spacing:.06em;
  color:#3a2a1d; opacity:.75;
}

/* data row */
.badge-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:0 16px;
  padding:9px 0;
  border-top:1px solid var(--id-rule);
  border-bottom:1px solid var(--id-rule);
}
.bm-item{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bm-item i{
  font-style:normal;
  font-family:var(--display), sans-serif;
  font-size:7.5px; letter-spacing:.22em; text-transform:uppercase;
  color:#9b7b4d;
}
.bm-item b{
  font-family:var(--type), monospace;
  font-size:11px; letter-spacing:.04em;
  color:#8c3a10;
  font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* barcode + signature */
.badge-foot{
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:12px 16px 0;
}
.badge-barcode{
  position:relative;
  flex:1 1 auto;
  height:34px;
  background-image:repeating-linear-gradient(90deg, #493a2b 0 2px,transparent 2px 4px,
  #493a2b 4px 7px,transparent 7px 9px,#493a2b 9px 10px,transparent 10px 14px,
  #493a2b 14px 17px,transparent 17px 20px);
  border-radius:2px;
}
.bc-num{
  position:absolute; left:0; right:0; bottom:-13px;
  font-family:var(--type), monospace;
  font-size:8px; letter-spacing:.14em;
  color:#6d5b45;
  text-align:center;
}
.badge-sign{
  flex:0 0 44%;
  display:flex; flex-direction:column; align-items:center;
}
.sign-name{
  font-family: "Lavishly Yours", cursive;
  font-size:clamp(15px,5vw,20px);
  line-height:1;
  color:#1b3a55;
  transform:rotate(-3deg);
  padding-bottom:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.sign-rule{
  width:100%;
  padding-top:4px;
  border-top:1px solid var(--id-rule);
  font-family:var(--display), sans-serif;
  font-size:7px; letter-spacing:.18em; text-transform:uppercase;
  color:#9b7b4d;
  text-align:center;
}

/* the rubber stamp that lands once the badge settles */
.badge-stamp{
  position:absolute;
  right: 15px;
  margin-top:30px;
  /* bottom: 1px; */
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:9px 16px;
  font-family:var(--display), sans-serif;
  font-size: 15px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--red);
  border:3px double var(--red);
  border-radius:4px;
  background:rgba(255,246,223,.4);
  transform:rotate(-9deg);
  opacity:.82;
  mix-blend-mode:multiply;
}
.badge-stamp b{ font-size:20px; letter-spacing:.12em; line-height:1.15; }
#scene-two.active .badge-stamp{ animation:stampIn .45s cubic-bezier(.2,1.3,.4,1) 1.15s both; }
@keyframes stampIn{
  0%   { opacity:0; transform:rotate(-9deg) scale(2.4); }
  70%  { opacity:.92; transform:rotate(-9deg) scale(.96); }
  100% { opacity:.82; transform:rotate(-9deg) scale(1); }
}


/* ---------- continue button ---------- */
#btn-badge-continue{
  margin-top:40px;
  padding:14px 30px;
  border-radius:8px;
  color:#fff8ea;
  background:var(--id-teal);
  box-shadow:0 7px 0 #0b3733, 0 14px 24px -8px rgba(0,0,0,.6);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
}
#btn-badge-continue:hover{
  background:var(--id-teal);
  transform:translateY(-2px);
  box-shadow:0 9px 0 #0b3733, 0 18px 30px -10px rgba(0,0,0,.6);
}
#btn-badge-continue:active{
  transform:translateY(4px);
  box-shadow:0 2px 0 #0b3733, 0 8px 14px -8px rgba(0,0,0,.5);
}
#btn-badge-continue:focus-visible{ outline:3px solid var(--highlight); outline-offset:3px; }

/* ---------- responsive ---------- */
@media (max-width:880px){
  #screen-id{ grid-template-columns:minmax(0,1fr); justify-items:center; }
  #scene-two-subtitle.notebook-sheet{ margin-top:52px; }
  .lanyard{ height:44px; }
}
@media (max-width:520px){
  .welcome-postit{ right:-6px; width:min(64%,180px); }
  #scene-two-subtitle.notebook-sheet{ padding:30px 18px 20px 40px; }
  .badge-foot{ flex-direction:column; align-items:stretch; gap:16px; }
  .badge-sign{ flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce){
  #scene-two.active .staffcard,
  #scene-two.active .card-sheen,
  #scene-two.active .badge-stamp,
  .staffcard:hover .card-sheen,
  .idt-led{ animation:none; }
  .card-sheen{ opacity:0; }
  .badge-stamp{ opacity:.82; }
}
/* ====================== SCENE 3: DESK / FILE ================= */
/* Scene 3 – Manila folder flip (cover -> content) */
/* =========================================================================
THE DESK  -  scene container
========================================================================= */
.scene{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,60px);
}

#scene-desk{
  position:relative;
  overflow:hidden;
  /* A real desk, lit by one lamp. The wood is a proper timber tone here so
     the grain has something to bite into; the ::after vignette below then
     crushes the edges to black. Net effect: you see the grain where the
     light falls and nothing but shadow at the corners, which is how a lamp
     on a desk actually behaves. */
  background:
    var(--wood),
    var(--grain),
    /* the lamp: tight warm core inside a wider spill */
    radial-gradient(56% 44% at 50% 34%, rgba(255,216,152,.26), transparent 70%),
    linear-gradient(163deg, #55412a 0%, #3d2d1d 48%, #2a1e13 100%);
  background-size:560px 400px, 180px 180px, auto, auto;
  background-blend-mode:multiply, multiply, screen, normal;
}
/* Vignette. Does the heavy lifting for the noir feel: the wood underneath is
   a genuine timber brown, and this is what drops the corners into darkness so
   only the lit pool reads as brown. Tune the two stops to taste. */
#scene-desk::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(118% 100% at 50% 40%,
    transparent 30%,
    rgba(0,0,0,.55) 66%,
    rgba(0,0,0,.90) 100%);
  pointer-events:none;
}

/* desk stage: folder + field clock side by side */
.desk-stage{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(18px,3vw,46px); flex-wrap:wrap; width:100%;
}

/* optional-challenge timer card beside the folder */
.desk-timer{
  align-self:center;
  width:min(30%,300px); min-width:210px; padding:22px 20px 20px;
  background:linear-gradient(180deg,#2a2419,#171309);
  border:1px solid rgba(201,169,97,.22);
  border-radius:18px; color:#e6dcc6;
  box-shadow:var(--shadow-deep), inset 0 1px 0 rgba(255,255,255,.07);
  font-family:var(--ui); text-align:center;
}
.dt-badge{
  display:inline-block; font:800 9.5px/1 var(--ui); letter-spacing:1.4px; text-transform:uppercase;
  color:#0f2a26; background:linear-gradient(180deg,#7fe0cf,#41c2ad);
  padding:5px 10px; border-radius:20px; margin-bottom:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.dt-headline{
  font:600 26px/1.05 'Caveat Brush', var(--hand);
  color:#ffffff;
  margin-bottom:5px;
}
.dt-sub{ font:400 12px/1.5 var(--ui); color:#b6ab93; margin:0 0 16px; }

/* bigger toggle switch */
.dt-toggle{
  position:relative; display:block; margin:0 auto;
  width:78px; height:40px; border-radius:40px;
  border:none; cursor:pointer; background:#4a4232;
  transition:background .25s ease; box-shadow:inset 0 2px 5px rgba(0,0,0,.35);
}
.dt-toggle .knob{
  position:absolute; top:4px; left:4px; width:32px; height:32px; border-radius:50%;
  background:linear-gradient(180deg,#fff,#e7edf2);
  transition:left .25s cubic-bezier(.5,1.6,.5,1);
  box-shadow:0 2px 5px rgba(0,0,0,.45);
}
.dt-toggle.on{ background:linear-gradient(180deg,#3fd0b6,#1f9f88); }
.dt-toggle.on .knob{ left:42px; }
.dt-note{
  margin-top:5px; font:800 10px/1.3 var(--ui); letter-spacing:1px; text-transform:uppercase; color:var(--brass);
}
.dt-actions{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.10); }

/* the challenge card fades away once the case file is open */
.desk-timer{ transition:opacity .4s ease, transform .45s ease; }
#folder.open ~ .desk-timer{ opacity:0; transform:scale(.92) translateY(10px); pointer-events:none; }

/* round analog clock below the toggle */
.dt-analog{
  position:relative;
  width:90px;
  height:90px;
  margin:1px auto 10px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #fbfdff, #dfe8ef 70%, #c3cfd8);
  border: 5px solid #8a6f37;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.4);
}
.da-tick{ position:absolute; width:3px; height:9px; background:#41525f; border-radius:2px; }
.da-12{ top:6px; left:50%; transform:translateX(-50%); }
.da-6{ bottom:6px; left:50%; transform:translateX(-50%); }
.da-3{ right:6px; top:50%; transform:translateY(-50%) rotate(90deg); }
.da-9{ left:6px; top:50%; transform:translateY(-50%) rotate(90deg); }
.da-hand{ position:absolute; left:50%; bottom:50%; transform-origin:50% 100%;
  transform:translateX(-50%); border-radius:3px; background:#22303a; }
.da-hour{ width:4px; height:26px; }
.da-min{ width:3px; height:36px; background:#3a4c58; }
.da-pin{ position:absolute; top:50%; left:50%; width:9px; height:9px; border-radius:50%;
  background:var(--teal); transform:translate(-50%,-50%); box-shadow:0 0 0 2px #0f1a24; }
@media (max-width:640px){ .desk-timer{ width:min(92vw,320px); } }

/* =========================================================================
   THE FOLDER  -  perspective stage + manila interior
   ========================================================================= */
.folder{
  position:relative;
  width:min(94vw, 540px);
  min-height:min(86vh, 660px);     /* floor for the cover art; grows to fit */
  height:auto;
  perspective:2000px;              /* gives the cover its 3D depth        */
  transform-style:preserve-3d;
  cursor:pointer;
  transition:transform .6s cubic-bezier(.62,.02,.16,1), filter .5s ease;
  filter:drop-shadow(var(--shadow-deep));
  /* the manila body / inside of the file, seen once the cover swings open */
  border-radius:6px 14px 6px 6px;
  background:linear-gradient(180deg, #f3e3bd, #ecd8ac 60%, #e4cc99);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -20px 40px rgba(120,86,40,.25),
    inset 0 0 0 1px rgba(120,86,40,.18);
}
.folder:not(.open):hover{ transform:translateY(-6px); }

/* a second sheet (plus a hint of a third) tucked behind the folder's back,
   peeking out past the top and right edges */
.folder::before{
  content:"";
  position:absolute;
  top:-10px; left:28px; right:10px; bottom:26px;
  z-index:-1;                       /* BEHIND the folder body */
  border-radius:3px;
  transform:rotate(2.5deg);
  background:
    repeating-linear-gradient(#fdf8ee 0 26px, #e6ddcd 26px 27px),
    linear-gradient(#fdf8ee, #f2ebd9);
  border:1px solid rgba(120,86,40,.12);
  box-shadow:
    0 2px 7px rgba(0,0,0,.20),
    14px 18px 0 -3px #f6f0e0,          /* the third sheet, just peeking      */
    16px 19px 12px -2px rgba(0,0,0,.16);
  pointer-events:none;
}
/* thick front lip of the folder pocket, along the bottom */
.folder::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:34px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(180deg, #e9cf9c, #dcbd82);
  box-shadow:0 -3px 8px rgba(120,86,40,.25),
  inset 0 2px 3px rgba(255,255,255,.35);
  z-index:2;                       /* sits in front of the paper edge */
  pointer-events:none;
}

/* =========================================================================
   THE COVER  -  swings open like a book cover (hinged on the left spine)
   ========================================================================= */
.folder-cover{
  position:absolute; inset:0;
  z-index:5;
  border-radius:6px 16px 6px 6px;
  transform-origin:0% 50%;                 /* hinge along the LEFT spine   */
  transform:rotateY(0deg);
  transition:transform 1.05s cubic-bezier(.62,.02,.16,1),
  box-shadow 1.05s ease;
  backface-visibility:hidden;
  will-change:transform;
  overflow:visible;
  padding:54px 40px 40px;
  color:var(--ink);
  /* aged manila card stock: grain gives it paper fibre instead of hatching */
  background:
    var(--grain),
    radial-gradient(140% 120% at 80% 0%, rgba(255,255,255,.35), transparent 40%),
    linear-gradient(158deg, #fdeecb 0%, #f6e2ba 55%, #eed6a6 100%);
  background-size:150px 150px, auto, auto;
  background-blend-mode:multiply, normal, normal;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -60px 60px -40px rgba(120,86,40,.30),
    0 14px 22px -12px rgba(0,0,0,.45);
}
/* the spine crease running down the left hinge edge */
.folder-cover::before{
  content:"";
  position:absolute; top:6px; bottom:6px; left:6px;
  width:6px; border-radius:4px;
  background:linear-gradient(90deg,
  rgba(120,86,40,.28), rgba(120,86,40,.05));
  pointer-events:none;
}
/* a page-turn hint: the cover lifts off the spine slightly on hover */
.folder:not(.open):hover .folder-cover{ transform:rotateY(-9deg); }
/* faint coffee-ring stain, because every case file has one */
.folder-cover::after{
  content:"";
  position:absolute; right:44px; bottom:120px;
  width:78px; height:78px; border-radius:50%;
  border:6px solid rgba(120,80,35,.10);
  box-shadow:inset 0 0 0 3px rgba(120,80,35,.05);
  transform:rotate(-12deg);
  pointer-events:none;
}

/* --- OPEN STATE ---------------------------------------------------------
   Cover swings left like a book cover; paper fades/rises in beneath it. */
.folder.open{ transform:translateX(clamp(60px,9vw,140px)) scale(1.06); z-index:3; cursor:default; }
.folder.open .folder-cover{
  transform:rotateY(-162deg);
  box-shadow:-25px 30px 45px -20px rgba(0,0,0,.5);
}

/* --- The tab sticking up above the folder ------------------------------ */
.tab{
  position:absolute; top:-30px; left:34px;
  padding:8px 20px 10px;
  font:600 12px/1 var(--type);
  letter-spacing:1.5px;
  color:#5a4324;
  background:linear-gradient(180deg, #f7e6bd, #ecd6a5);
  border-radius:10px 10px 0 0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),
  0 -3px 6px rgba(120,86,40,.18);
  clip-path:polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}

/* --- Paperclip removed from the cover ---------------------------------- */
.paperclip{ display:none; }

/* --- Red CONFIDENTIAL stamp -------------------------------------------- */
.stamp{
  position:absolute; top:210px; right:20px;
  padding:8px 16px;
  font:700 22px/1 var(--display);
  letter-spacing:3px;
  color:var(--red-deep);
  border:3px double var(--red-deep);
  border-radius:6px;
  opacity:.82;
  transform:rotate(-11deg);
  text-transform:uppercase;
  mix-blend-mode:multiply;
  box-shadow:inset 0 0 0 2px rgba(156,51,34,.15);
}

/* --- Printed case code + name ------------------------------------------ */
.casecode{
  font:700 13px/1 var(--type);
  letter-spacing:2px;
  color:#6a4f2b;
  opacity:.85;
}
.casename{
  margin-top:10px;
  font:700 clamp(30px,7vw,46px)/1.02 var(--display);
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink);
  max-width:70%;
}
.casename::after{
  content:"";
  display:block;
  width:130px; height:4px; margin-top:14px;
  background:var(--red);
  border-radius:2px;
}

/* --- Faux "typed" ruled lines ------------------------------------------ */
.lines{
  position:absolute; left:40px; right:40px; bottom:96px;
  display:flex; flex-direction:column; gap:11px;
}
.lines span{
  display:block; height:9px; border-radius:5px;
  background:linear-gradient(90deg, rgba(90,67,36,.28), rgba(90,67,36,.10));
}
.lines span:nth-child(1){ width:88%; }
.lines span:nth-child(2){ width:66%; }
.lines span:nth-child(3){ width:44%; }

/* --- Handwritten open hint --------------------------------------------- */
.open-hint{
  position:absolute; left:0; right:0; bottom:30px;
  text-align:center;
  font:700 26px/1 "Caveat Brush";
  color:var(--teal-deep);
  animation:hintPulse 1.9s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100%{ opacity:.55; transform:translateY(0); }
  50%    { opacity:1;   transform:translateY(-3px); }
}
.folder.open .open-hint{ animation:none; opacity:0; }

/* =========================================================================
   THE BRIEFING  -  paper sheet revealed inside the folder
   ========================================================================= */
.folder-content{
  position:relative;                /* in flow → folder grows to fit it   */
  z-index:1;                        /* below the cover, above folder body */
  margin:22px 22px 46px;            /* manila border shows around the paper */
  padding:26px 30px 28px;
  overflow:visible;                 /* never scrolls */
  border-radius:3px;
  color:var(--ink);
  font-family:var(--type);
  opacity:0;
  transform:translateY(14px) scale(.985);
  pointer-events:none;
  transition:opacity .5s ease .35s, transform .55s ease .35s;
  height: 600px;
  /* lined legal paper */
  background:
    linear-gradient(#FFFDF8FF, #FFFDF8FF),
    repeating-linear-gradient(#FFFDF8FF 0 27px, var(--paper-line) 27px 28px);
  box-shadow:
    0 2px 3px rgba(0,0,0,.13),
    inset 0 0 0 1px rgba(90, 66, 34, 0.1),
    inset 0 0 10px rgba(128, 111, 45, 0.2);
}
/* red margin rule down the left of the sheet */
.folder-content::before{
  content:"";
  position:absolute; top:0; bottom:0; left:22px;
  width:2px; background:rgba(193,70,47,.35);
}

.folder.open .folder-content{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}


.folder-cover .code{
  font:700 11px/1.6 var(--type);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#8a6a38;
  max-width:80%;
  padding-bottom:9px;
  margin-bottom:14px;
  border-bottom:1px dashed rgba(120,86,40,.38);
}
.folder-cover .name{
  font:700 clamp(28px,3.4vw,42px)/1.06 var(--display);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  max-width:70%;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}

/* --- Folder page tabs + flip -------------------------------------------- */
.folder-content{ perspective:1400px; }               /* depth for the page flip */
.page-tabs{ display:flex; gap:6px; margin:-55px 0 14px; padding:0 6px; flex-wrap:nowrap; justify-content:flex-start; }
.ptab{
  flex:0 1 auto; white-space:nowrap;
  font:700 11px/1 var(--ui); letter-spacing:.2px;
  padding:8px 12px 9px; border:none; cursor:pointer;
  color:#6a4f2b; background:linear-gradient(180deg,#f0dcae,#e6cf9c);
  border-radius:9px 9px 0 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 -1px 3px rgba(120,86,40,.12);
  position:relative; top:3px; opacity:.72; transition:opacity .15s ease, top .15s ease, background .15s ease;
}
.ptab:hover{ opacity:1; top:1px; }
.ptab.active{ opacity:1; color:var(--ink);
  background:linear-gradient(180deg,#fff8ea,#f3e6c8);
  box-shadow:0 -3px 8px rgba(120,86,40,.20); top:0; }

.page-stack{ transform-origin:0% 50%;
  transition:transform .3s cubic-bezier(.62,.02,.16,1), opacity .3s ease; }
.page-stack.flipping{ transform:rotateY(-90deg); opacity:.1; }
.page{ display:none; }
.page.active{ display:flex; flex-direction:column; height:100%; }

.obj-list{ margin:0 0 11px; padding-left:30px; }
.obj-list li{ font:400 13px/1.55 var(--type); color:var(--ink); margin-bottom:5px; }

.briefing-style{
  padding-left:15px;
}
/* =========================================================================
   FOLDER - "OTHERS" TAB: NEWSPAPER PRESS CUTTINGS
   ========================================================================= */
.press-intro{
  font:400 11.5px/1.4 var(--type); color:#7b6a52;
  font-style:italic; margin:0 0 10px;
  padding-left: 15px;
}
/* --- fanned clippings: two cuttings laid on the desk, click to bring
       one to the front. No scrolling, both are always in view. --- */
.press-fan{
  position:relative;
  /* a fixed stage, not a flex-grower: the cards are absolutely positioned
     inside it and must have a stable box to be clipped against */
  flex:0 0 auto;
  height:clamp(230px, 40vh, 360px);
  margin:0 15px 6px;
  padding:10px;
  border-radius:4px;
  overflow:hidden;                 /* the fan never spills onto the page text */
  background: repeating-linear-gradient(45deg, rgba(120, 90, 40, .035) 0 6px, transparent 6px 12px), #b8ae99;
  box-shadow:inset 0 2px 8px rgba(90,66,34,.18);
}
/* sized by HEIGHT, because the cuttings are tall portrait scans */
.clip-card{
  position:absolute;
  top:50%; left:50%;
  height:84%;
  width:auto;
  margin:0;
  cursor:pointer;
  transform-origin:50% 55%;
  transition:transform .42s cubic-bezier(.2,.9,.2,1), filter .3s ease, opacity .3s ease;
  outline:none;
}
.clip-card img{
  display:block; height:100%; width:auto;
  border-radius:2px;
  background:#fdfaf0;
}
.clip-card figcaption{
  position:absolute; left:50%; bottom:-17px;
  transform:translateX(-50%);
  white-space:nowrap;
  font:600 9px/1 var(--display), sans-serif;
  letter-spacing:.16em; text-transform:uppercase;
  color:#5c4c33;
}
.clip-card.back figcaption{ opacity:0; }

/* the one you are reading: square on, lifted, fully lit */
.clip-card.front{
  z-index:3;
  transform:translate(-62%,-50%) rotate(-2deg) scale(1);
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.5)) brightness(1.06);
}
/* the other one: fanned out behind to the right, dimmed, waiting to be clicked */
.clip-card.back{
  z-index:2;
  transform:translate(-24%,-50%) rotate(9deg) scale(.93);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.45)) brightness(.8) saturate(.8);
  opacity:.94;
}
.clip-card.back:hover,
.clip-card.back:focus-visible{
  transform:translate(-20%,-52%) rotate(7deg) scale(.96);
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.5)) brightness(.95);
}
.clip-card.front:hover{
  transform:translate(-62%,-51.5%) rotate(-2deg) scale(1.02);
}

/* arrows + dots under the fan */
.press-nav{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:12px 15px 6px;
}
.clip-btn{
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#6d5a3c; color:var(--manila);
  font-size:16px; font-weight:700; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:background .15s ease, transform .15s ease;
}
.clip-btn:hover{ background:#836e4a; transform:translateY(-1px); }
.clip-dots{ display:flex; gap:7px; }
.clip-dots i{
  width:8px; height:8px; border-radius:50%;
  background:rgba(60,46,26,.3);
  transition:background .2s ease, transform .2s ease;
}
.clip-dots i.on{ background:#6d5a3c; transform:scale(1.25); }

/* a single cutting of newsprint */
.clipping{
  position:relative;
  padding:16px 18px 18px;
  background:linear-gradient(180deg,#fdfaf0,#f4eedd);
  color:#241f18;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.06);
  /* torn / uneven newsprint edges */
  clip-path:polygon(0% 2%, 2% 0%, 30% 1.2%, 62% 0%, 98% 1.4%, 100% 4%, 99.2% 40%,
  100% 72%, 98.6% 98%, 70% 100%, 34% 98.8%, 3% 100%, 0% 96%, .8% 50%);
}
.clipping.c1{ transform:rotate(-.9deg); }
.clipping.c2{ transform:rotate(.7deg); }
.clipping.c3{ transform:rotate(-.4deg); }

/* tape + pin */
.clip-tape{
  position:absolute; top:-9px; left:22px; width:66px; height:19px;
  background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.06);
  transform:rotate(-4deg); z-index:2;
}
.clip-tape.right{ left:auto; right:22px; transform:rotate(5deg); }
.clip-pin{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:13px; height:13px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 35% 30%, #e8705c, #b8341f);
  box-shadow:0 3px 5px rgba(0,0,0,.45);
}

/* masthead */
.clip-masthead{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  border-bottom:2px solid #241f18; padding-bottom:5px; margin-bottom:8px;
}
.cm-name{ font:700 11px/1 var(--display); letter-spacing:.5px; text-transform:uppercase; }
.cm-meta{ font:400 9.5px/1 var(--type); color:#6d6154; text-transform:uppercase; letter-spacing:.5px; }
.clip-kicker{
  font:700 8.5px/1 var(--ui); letter-spacing:1.4px; text-transform:uppercase;
  color:#fff; background:#241f18; display:inline-block; padding:4px 7px; margin-bottom:7px;
}

/* headlines */
.clip-head{
  font:700 22px/1.1 var(--display); letter-spacing:.2px;
  text-transform:uppercase; margin:0 0 6px;
}
.clip-head.small{ font-size:19px; }
.clip-head.tiny{ font-size:16px; margin-bottom:8px; }
.clip-sub{
  font:400 12px/1.4 var(--type); color:#4a4136;
  border-bottom:1px solid #cfc4ac; padding-bottom:8px; margin:0 0 10px;
}

#clip-about #clip-intro{
  padding-left:0;
}

/* body text in newspaper columns */
.clip-cols{ columns:2; column-gap:16px; column-rule:1px solid #d6ccb6; }
.clip-cols p{
  font:400 12px/1.65 var(--type); color:#2b2620;
  margin:0 0 8px; text-align:left;
}
.dropcap{
  float:left; font:700 28px/.82 var(--display);
  padding:3px 5px 0 0; color:#241f18;
}
.clip-quote{
  margin:10px 0 0; padding:8px 11px;
  border-left:3px solid var(--red);
  font:700 12.5px/1.45 var(--display); color:#3a2f26;
  background:rgba(193,70,47,.06); letter-spacing:.2px;
}
.clip-facts{ margin:0 0 8px; padding-left:18px; }
.clip-facts li{ font:400 12px/1.6 var(--type); color:#2b2620; margin-bottom:5px; }
.clip-foot{ font:400 10px/1 var(--type); color:#6d6154; font-style:italic; text-align:right; margin:0; }

/* --- the reader: opens a clipping big enough to actually read ---------- */
#clip-reader{
  position:fixed; inset:0; z-index:130;
  display:none;
  align-items:center; justify-content:center;
  padding:28px 56px;
  background:rgba(6,6,4,.93);
  backdrop-filter:blur(3px);
}
#clip-reader.on{ display:flex; animation:fadeIn .25s ease both; }
.cr-frame{
  position:relative;
  max-width:100%; max-height:100%;
  display:flex; align-items:center; justify-content:center;
}
#cr-img{
  max-width:100%;
  max-height:calc(100vh - 84px);
  width:auto; height:auto;
  display:block;
  border-radius:3px;
  background:#fdfaf0;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.9);
}
.cr-close{
  position:absolute; top:-14px; right:-14px;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--brass-lo); color:#12100a;
  font-size:15px; font-weight:800; line-height:1;
  box-shadow:0 4px 12px rgba(0,0,0,.6);
}
.cr-close:hover{ background:var(--brass); }
.cr-nav{
  position:fixed; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(201,169,97,.2); color:var(--brass-hi);
  border:1px solid rgba(201,169,97,.4);
  font-size:24px; font-weight:700; line-height:1;
  transition:background .15s ease;
}
.cr-nav:hover{ background:rgba(201,169,97,.4); }
.cr-nav.prev{ left:14px; }
.cr-nav.next{ right:14px; }
.cr-label{
  position:absolute; left:50%; bottom:-30px;
  transform:translateX(-50%);
  white-space:nowrap;
  font:700 10px/1 var(--display), sans-serif;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass);
}

@media (max-width:640px){
  .clip-cols{ columns:1; }
  .press-fan{ height:250px; }
  .clip-card{ height:80%; }
  #clip-reader{ padding:20px 12px 44px; }
  .cr-nav{ width:36px; height:36px; font-size:20px; }
  .cr-close{ top:-10px; right:-10px; width:30px; height:30px; }
}

/* --- Briefing typography ------------------------------------------------ */
.briefing h2{
  margin: 50px 0 10px;
  padding-left:12px;
  font:700 26px/1 var(--display);
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--ink);
}

.briefing h2::after{
  content:"";
  display:block; width:100%; height:3px; margin-top:7px;
  background:linear-gradient(90deg, var(--red), transparent);
}

.briefing .meta{
  display:flex; flex-wrap:wrap; gap:5px 16px;
  padding-left:12px; margin-bottom:13px;
  font:700 10.5px/1.4 var(--type);
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink-2);
  opacity:.85;
}
.briefing .meta span{
  padding-bottom:3px;
  border-bottom:1px dotted rgba(38,57,77,.35);
}

.briefing p{
  margin:0 0 11px;
  font:400 13.5px/1.55 var(--type);
  color:var(--ink);
}
.briefing p b{ color:var(--red-deep); }

/* --- Objective callout box --------------------------------------------- */
.briefing .objective{
  margin:25px 0 10px 12px;
  padding:12px 15px;
  font:400 13px/1.55 var(--ui);
  letter-spacing: 1.5px;
  background:var(--ink);
  color:var(--manila);
  border:1px solid rgba(193,70,47,.30);
  border-left:5px solid var(--red);
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,.06);
}
.briefing .objective b{ color: #ffa3a3; letter-spacing:1px; }

/* --- Action button ------------------------------------------------------ */
.briefing-actions{
  display:flex;
  justify-content: center;
  margin-top:20px;
}

/* the "Examine Laptop" button only appears once the case file is open */
.desk-timer .briefing-actions{ display:none; }
#folder.open ~ .desk-timer .briefing-actions{
  display:flex;
  animation:examineIn .45s ease both;
}
@keyframes examineIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
.btn{
  font:600 14px/1 var(--ui);
  letter-spacing:.4px;
  padding:13px 22px;
  border:none; border-radius:8px;
  color:#fff; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn.red{
  background:linear-gradient(180deg, var(--red), var(--red-deep));
  box-shadow:0 6px 14px -4px rgba(156,51,34,.6),
  inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.red:hover{ transform:translateY(-2px);
  box-shadow:0 10px 20px -6px rgba(156,51,34,.7),
  inset 0 1px 0 rgba(255,255,255,.3); }
.btn.red:active{ transform:translateY(0); }

/* =========================================================================
   RESPONSIVE + MOTION PREFERENCES
   ========================================================================= */
@media (max-width:520px){
  .folder-cover{ padding:48px 26px 32px; }
  .casename{ max-width:78%; }
  .stamp{ right:14px; top:180px; font-size:18px; }
  .folder-content{ margin:18px 16px 42px; padding:22px 20px 24px; }
  .briefing h2{ font-size:23px; }
}

@media (prefers-reduced-motion:reduce){
  .folder-cover,
  .folder-content,
  .folder{ transition-duration:.01ms; }
  .open-hint{ animation:none; }
}

/* ==============  SCENE / DESK  ============== */
.scene{ min-height:100vh; }
#scene-laptop{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(10px,2.2vw,30px);
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(244,201,72,.22), transparent 62%),
    radial-gradient(920px 540px at 10% 110%, rgba(31,138,130,.22), transparent 60%),
    radial-gradient(820px 520px at 94% 8%, rgba(193,70,47,.15), transparent 60%),
    linear-gradient(155deg, #63492f, #402f21);
}

/* fade the laptop scene in when arriving from the boot-up screen */
#scene-laptop.entering{ animation:laptopFadeIn .8s ease both; }
@keyframes laptopFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* =========================================================================
   SCENE 3.5: LAPTOP BOOT-UP
   ========================================================================= */
#scene-bootup{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,2.5vw,32px);
  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(244,201,72,.16), transparent 60%),
    linear-gradient(155deg,#5d452e,#332417);
  perspective:1600px;
}
.boot-stage{ width:100%; max-width:820px; display:flex; justify-content:center; }
.boot-laptop{ width:min(92vw,760px); }
.boot-lid{ transform-origin:50% 100%; transform:rotateX(-78deg); backface-visibility:hidden; }
.boot-laptop.open .boot-lid{ animation:lidOpen 1.4s cubic-bezier(.34,1.1,.5,1) forwards; }
@keyframes lidOpen{
  0%{ transform:rotateX(-78deg); }
  70%{ transform:rotateX(5deg); }
  100%{ transform:rotateX(0deg); }
}
.boot-laptop .bezel{ width:100%; position:relative; z-index:2; }
.boot-screen{
  aspect-ratio:16/10; border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:radial-gradient(120% 120% at 50% 30%, #12303a, #071820);
  color:#dff3f0; text-align:center; padding:22px;
}
.boot-logo{ font-size:58px; color:#7fd3c8; opacity:0; transition:opacity .5s ease; line-height:0; }
.boot-logo img{
  width:clamp(96px,15vw,150px); height:auto; display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(127,211,200,.28));
}
.boot-brand{ font:700 15px/1 var(--ui); letter-spacing:4px; color:#8fb7c9; opacity:0; transition:opacity .5s ease; }
.boot-bar{ width:min(60%,280px); height:8px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden; opacity:0; transition:opacity .4s ease; }
.boot-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#31a08a,#7fd3c8); border-radius:6px; transition:width 1.4s ease; }
.boot-status{ font:600 12px/1 var(--ui); letter-spacing:.5px; color:#9fc7cf; min-height:1em; opacity:0; transition:opacity .4s ease; }
.boot-btn{ margin-top:8px; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .4s ease, transform .4s ease; position:relative; z-index:3; }
.boot-laptop.open .boot-logo,
.boot-laptop.open .boot-brand,
.boot-laptop.open .boot-bar,
.boot-laptop.open .boot-status{ opacity:1; }
.boot-laptop.open .boot-bar i{ width:100%; }
.boot-laptop.ready .boot-btn{ opacity:1; transform:none; pointer-events:auto; }
.boot-base{
  height:26px; border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,#c9d2da,#9aa6b0);
  box-shadow:0 20px 36px -14px rgba(0,0,0,.6);
  position:relative; margin-top:2px;
}
.boot-base .boot-pad{
  position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:80px; height:11px; border-radius:0 0 7px 7px; background:rgba(0,0,0,.12);
}

.lab{
  display:flex; gap:clamp(16px,2.4vw,34px);
  align-items:center; justify-content:center;
  width:100%; max-width:1320px; height:100%; flex-wrap:wrap;
}

/* =========================================================================
   THE LAPTOP
   ========================================================================= */
.laptop{ flex:1 1 700px; max-width:min(940px, 78vh * 1.5); min-width:320px; }

.bezel{
  position:relative;
  background:linear-gradient(160deg,#20262d,#0d1013);
  border-radius:18px;
  padding:26px 16px 16px;
  box-shadow:var(--shadow-deep),
  inset 0 0 0 2px rgba(255,255,255,.04),
  inset 0 2px 0 rgba(255,255,255,.06);
}
.cam{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #4a5560, #10151a);
  box-shadow:0 0 0 3px rgba(255,255,255,.05);
}

/* the actual screen / OS */
.os{
  position:relative;
  aspect-ratio:16/11;
  border-radius:8px;
  overflow:hidden;
  background:
    radial-gradient(130% 120% at 15% 0%, rgba(255,255,255,.5), transparent 45%),
    linear-gradient(160deg, var(--os-bg1), var(--os-bg2));
  font-family:var(--ui);
  color:var(--os-text);
  display:flex; flex-direction:column;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  user-select:none;
}

/* top status strip */
.os-top{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 14px;
  font-size:12px; font-weight:600;
  background:rgba(255,255,255,.55);
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter:blur(4px);
}
.who{ display:flex; align-items:center; gap:8px; color:var(--os-text); }
.av{
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-size:13px; color:#fff;
  background:linear-gradient(140deg,var(--teal),var(--teal-deep));
}
#ostime{ color:var(--os-mut); font-variant-numeric:tabular-nums; }

/* the desktop region: holds icons + windows, sits between status bar and taskbar */
.desktop{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; }

/* desktop icon grid */
.desktop-icons{
  position:absolute; inset:0;
  align-content:flex-start;
  display:grid;
  grid-template-columns:repeat(auto-fill, 96px);
  gap:8px 6px;
  padding:18px;
}
.dicon{
  width:92px; padding:10px 6px; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  cursor:pointer; text-align:center;
  transition:background .15s ease, transform .1s ease;
}
.dicon span{ font-size:11px; font-weight:600; color:var(--os-text);
  text-shadow:0 1px 0 rgba(255,255,255,.6); line-height:1.15; }
.dicon:hover{ background:rgba(255,255,255,.5); }
.dicon:active{ transform:scale(.94); }
.dicon.pop{ animation:iconPop .3s ease; }
@keyframes iconPop{ 50%{ transform:scale(.9);} }

.glyph{
  width:46px; height:46px; border-radius:13px;
  display:grid; place-items:center; font-size:23px; color:#fff;
  box-shadow:0 6px 12px -4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
  overflow:hidden;
}
.g-mail{ background:linear-gradient(150deg,#2f7bd6,#255fa8); }
.g-chat{ background:linear-gradient(150deg,#2fae8f,#1c8b73); }
.g-ai{   background:linear-gradient(150deg, #9880ff, #6f58d8); }
.g-files{background:linear-gradient(150deg,#e0a53c,#c9852a); }
.g-web{  background:linear-gradient(150deg, #ff9989, #ff7c56); }

.glyph img{
  width:80%;
  height:80%;
  object-fit:cover;
  display:block;
}

/* ==============  WINDOW LAYER  ============== */
#window-layer{ position:absolute; inset:0; pointer-events:none; }
#window-layer .win{ pointer-events:auto; }

.win{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--os-panel);
  overflow:hidden;
  animation:winIn .16s ease;
}
@keyframes winIn{ from{ opacity:0; transform:translateY(10px) scale(.99);} }
.win.min{ display:none; }

.win-bar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:9px;
  padding:10px 12px;
  background:linear-gradient(180deg,#f6f8fb,#eef1f6);
  border-bottom:1px solid var(--os-line);
}
.win-ico{ font-size:15px; margin-left:2px; display:inline-grid; place-items:center; }
.win-ico img{ width:17px; height:17px; object-fit:contain; display:block; }

.win-title{ font-size:13px; font-weight:700; color:var(--os-text); letter-spacing:.2px; }
.win-actions{ margin-left:auto; display:flex; gap:5px; }
.win-min, .win-close{
  border:none; background:transparent; cursor:pointer;
  width:30px; height:26px; display:grid; place-items:center;
  font:700 15px/1 var(--ui); color:var(--os-mut); border-radius:6px;
}
.win-min:hover{ background:#e2e7ee; color:var(--os-text); }
.win-close:hover{ background:#ec6a5e; color:#fff; }

.win-body{
  flex:1 1 auto; min-height:0; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--os-panel);
}
.win-body > .app{ flex:1; min-height:0; overflow:auto; }
.app.mailapp, .app.chatapp, .app.filesapp, .app.haloapp{ overflow:hidden; }

/* --- Pear AI: chatbot interface --- */
.app.haloapp{ padding:0; display:flex; flex-direction:column; background:#fbfaff; }
.halo-top{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:11px 14px; background:#fff; border-bottom:1px solid #e7e2f7;
}
.halo-ttl b{ display:block; font:700 13.5px/1.2 var(--ui); color:var(--os-text); }
.halo-ttl span{ display:block; font-size:10.5px; color:var(--os-mut); margin-top:1px; }
.halo-tag{
  margin-left:auto; font:700 10px/1 var(--ui); letter-spacing:.4px;
  color:#8a6d00; background:#fff6d6; border:1px solid #f0dfa4;
  padding:5px 8px; border-radius:20px; white-space:nowrap;
}
.halo-scroll{ flex:1 1 auto; min-height:0; overflow:auto; padding:14px 16px 6px; }

/* message rows with avatars (Pear AI only - scoped so it can't clash with TastyTalk's .msg) */
.haloapp .msg{
  display:flex; align-items:flex-end; gap:8px; margin-bottom:12px;
  max-width:none; padding:0; background:none; border:none; border-radius:0;
}
.haloapp .msg.ai{ justify-content:flex-start; }
.haloapp .msg.me{ justify-content:flex-end; }
.haloapp .msg .bub{
  max-width:57%; padding:10px 13px; font-size:12.5px; line-height:1.55;
  border-radius:14px; color:var(--os-text);
}
.haloapp .msg.ai .bub{ background:#f1eeff; border:1px solid #e2dbff; border-bottom-left-radius:4px; }
.haloapp .msg.me .bub{ background:#e9eef3; border:1px solid #dde4ec; border-bottom-right-radius:4px; }
.haloapp .msg .bub .warn{
  display:block; margin-top:7px; font-size:11px; color:#8a6d00;
  background:#fff6d6; border-left:3px solid var(--highlight); padding:6px 8px; border-radius:5px;
}
/* avatars sit OUTSIDE the bubble */
.haloapp .av-ai, .haloapp .av-me{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%; margin-bottom:2px;
  display:grid; place-items:center; font:700 11px/1 var(--ui); color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.haloapp .av-ai{ background: #a363ff; border:1px solid #b799ff; font-size:14px; overflow:hidden; }
.haloapp .av-ai img{ width:20px; height:20px; object-fit:contain; display:block; }

.haloapp .av-me{ background:#6b7c8d; }

/* attached files - display only, not clickable */
.attach{ display:flex; flex-direction:column; gap:6px; margin-top:9px; }
.att{
  display:flex; align-items:center; gap:8px;
  padding:7px 9px; border-radius:8px;
  background:#fff; border:1px solid #d7dee6;
  pointer-events:none; user-select:none;   /* fake attachment: not clickable */
}
.att-ic{
  flex:0 0 auto; width:26px; height:26px; border-radius:6px;
  display:grid; place-items:center; font-size:13px; background:#eef2f6;
}
.att-tx{ min-width:0; }
.att-tx b{ display:block; font:600 11.5px/1.3 var(--ui); color:var(--os-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.att-tx em{ display:block; font-style:normal; font-size:10px; color:var(--os-mut); margin-top:1px; }

/* composer (disabled - this is a saved transcript) */
.halo-composer{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:10px 14px; background:#fff; border-top:1px solid #e7e2f7;
}
.halo-input{
  flex:1; padding:10px 14px; border-radius:22px;
  border:1px solid #ddd6f3; background:#f7f5ff;
  font-size:12.5px; color:#a9a2c0;
}
.halo-send{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:none;
  background:linear-gradient(150deg,#7b5cff,#5a3fd6); color:#fff; font-size:13px;
  display:grid; place-items:center; opacity:.45; cursor:not-allowed;
}
.halo-foot{
  flex:0 0 auto; padding:0 14px 9px; text-align:center;
  font-size:10px; color:var(--os-mut); background:#fff;
}
.win-body .app::-webkit-scrollbar{ width:9px; }
.win-body .app::-webkit-scrollbar-thumb{ background:#c7d0da; border-radius:9px; }

/* ==============  TASKBAR  ============== */
.taskbar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:8px;
  padding:5px 10px;
  background:var(--os-bar);
  color:#e8eef5;
}
.start{
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600;
  padding:5px 10px; border-radius:6px; cursor:default;
  background:rgba(255,255,255,.08);
}
.logo img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}


.taskbar-apps{ display:flex; gap:6px; flex:1 1 auto; overflow:hidden; }
.tb-app{
  display:flex; align-items:center; gap:6px;
  font:600 11.5px/1 var(--ui); color:#dfe7f0;
  background:rgba(255,255,255,.06); border:none; cursor:pointer;
  padding:6px 10px; border-radius:6px; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.tb-app:hover{ background:rgba(255,255,255,.14); }
.tb-app img{ width:14px; height:14px; object-fit:contain; display:block; }
.tb-app > span{ display:inline-grid; place-items:center; }

.tb-app.active{ background:rgba(255,255,255,.16); border-bottom-color:#7fd3c8; }
.clock{ font-size:11.5px; color:#aebccb; font-variant-numeric:tabular-nums; }

/* =========================================================================
   APP CONTENT
   ========================================================================= */
.app{ padding:14px 16px 18px; font-size:13px; line-height:1.5; color:var(--os-text); }
.app summary{ list-style:none; }
.app summary::-webkit-details-marker{ display:none; }
.app h3{ margin:0 0 3px; font:700 15px/1.2 var(--ui); }
.app .app-sub{ margin:0 0 12px; font-size:11.5px; color:var(--os-mut); }
.divider{ height:1px; background:var(--os-line); margin:12px 0; }

/* --- Mail --- */
.mailitem{ border:1px solid var(--os-line); border-radius:8px; margin-bottom:9px; overflow:hidden; }
.mailitem > summary{
  list-style:none; cursor:pointer; padding:10px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.mailitem > summary::-webkit-details-marker{ display:none; }
.mailitem .mfrom{ font-weight:700; font-size:12.5px; display:flex; justify-content:space-between; gap:8px; }
.mailitem .mfrom .mdate{ font-weight:400; color:var(--os-mut); font-size:11px; }
.mailitem .msubj{ font-size:12px; color:var(--os-text); }
.mailitem[open] > summary{ background:#f6f9fc; border-bottom:1px solid var(--os-line); }
.mbody{ padding:11px 13px; font-size:12.5px; line-height:1.6; color:#2c3a48; }
.tagme{ display:inline-block; font-size:10px; font-weight:700; color:#fff; background:var(--teal-deep);
  padding:1px 6px; border-radius:20px; margin-left:6px; vertical-align:middle; }

/* --- Chat --- */
.chat{ display:flex; flex-direction:column; gap:9px; }
.chan-head{ display:flex; align-items:center; gap:8px; margin:2px 0 10px;
  font:700 12.5px/1 var(--ui); color:var(--os-text);
  background:#f1f4f8; border:1px solid var(--os-line); border-radius:8px; padding:8px 10px; }
.chan-head .chan-sub{ margin-left:auto; font-weight:500; font-size:11px; color:var(--os-mut); }
.chatday{ text-align:center; font-size:10.5px; color:var(--os-mut); margin:2px 0; }
/* TastyTalk bubbles - sender name sits ABOVE the message, not beside it */
.chatapp .msg{
  display:block;                       /* never a flex row: keeps .nm on its own line */
  width:fit-content; max-width:65%;
  padding:8px 11px; border-radius:13px;
  font-size:12.5px; line-height:1.45;
}
.chatapp .msg .nm{
  display:block; width:100%;
  font:700 10px/1.3 var(--ui); color:var(--os-mut);
  margin-bottom:2px;

}
.chatapp .msg.them{ align-self:flex-start; background:#eef1f5; border-bottom-left-radius:4px; }
.chatapp .msg.me{
  align-self:flex-end; background:linear-gradient(150deg,#dcefe9,#cfe8df);
  border-bottom-right-radius:4px; margin:2px 0;
}
.chatapp .msg.me .nm{ color:#4c7d70; }
/* flagged messages sit inside a .flaggable wrapper - keep their left/right alignment */
.chatapp .flaggable .msg.me{ margin-left:auto; }
.chatapp .flaggable .msg.them{ margin-right:auto; }

/* =========================================================================
   MAIL - real two-pane client (inbox list ⇄ reading pane)
   ========================================================================= */
/* make the [hidden] attribute win over the display:flex rules below */
.mailapp [hidden], .chatapp [hidden], .filesapp [hidden]{ display:none !important; }
.app.mailapp{ padding:0; display:flex; flex-direction:column; height:100%; }
.mail-toolbar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--os-line); background:#f7f9fc;
  font:700 12.5px/1 var(--ui); color:var(--os-text); }
.mail-toolbar .mail-count{ font-weight:500; font-size:11px; color:var(--os-mut); }

.mail-list{ flex:1; min-height:0; overflow:auto; }
.mail-li{ display:flex; gap:10px; padding:11px 13px; border-bottom:1px solid var(--os-line);
  cursor:pointer; transition:background .12s ease; }
.mail-li:hover{ background:#f4f8fc; }
.mavatar{ width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  color:#fff; font:700 12px/1 var(--ui); background:#8894a2; }
.mavatar.sm{ width:28px; height:28px; font-size:11px; }
.mrow{ flex:1; min-width:0; }
.mtop{ display:flex; justify-content:space-between; gap:8px; }
.msender{ font:700 12.5px/1.2 var(--ui); color:var(--os-text); }
.mdate{ font-size:10.5px; color:var(--os-mut); white-space:nowrap; }
.msubject{ font-size:12px; color:var(--os-text); margin-top:1px; }
.mpreview{ font-size:11px; color:var(--os-mut); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-li.unread .msender{ position:relative; }
.mail-li.unread .msender::before{ content:"●"; color:#2f7bd6; font-size:9px; margin-right:5px; vertical-align:middle; }

.mail-read{ flex:1; min-height:0; display:flex; flex-direction:column; }
.mail-read-bar{ flex:0 0 auto; padding:8px 12px; border-bottom:1px solid var(--os-line); background:#f7f9fc; }
.mail-back{ border:none; background:transparent; cursor:pointer; font:600 12.5px/1 var(--ui); color:#2f7bd6; padding:4px 2px; }
.mail-back:hover{ text-decoration:underline; }
.mail-read-scroll{ flex:1; min-height:0; overflow:auto; padding:16px 18px; }
.mr-subj{ margin:0 0 10px; font:700 16px/1.25 var(--ui); color:var(--ink); }
.mr-meta{ display:flex; align-items:center; gap:9px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--os-line); }
.mr-meta div{ display:flex; flex-direction:column; line-height:1.3; }
.mr-meta b{ font-size:12.5px; } .mr-meta span{ font-size:11px; color:var(--os-mut); }
.mr-body{ font-size:13px; line-height:1.65; color:#2c3a48; }

/* =========================================================================
   CHAT - real two-pane messenger (channel list ⇄ conversation)
   ========================================================================= */
.app.chatapp{ padding:0; display:flex; flex-direction:row; height:100%; }
.chat-list{ flex:0 0 128px; min-width:0; overflow:auto; border-right:1px solid var(--os-line); background:#f7f9fc; }
.chat-li{ display:flex; gap:8px; align-items:center; padding:10px 9px; cursor:pointer; border-bottom:1px solid var(--os-line); }
.chat-li:hover{ background:#eef3f8; }
.chat-li.active{ background:#e6eef7; box-shadow:inset 3px 0 0 #2f7bd6; }
.cavatar{ width:28px; height:28px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center;
  color:#fff; font:700 13px/1 var(--ui); background:#8894a2; }
.crow{ display:flex; flex-direction:column; min-width:0; }
.cname{ font:700 11.5px/1.2 var(--ui); color:var(--os-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cprev{ font-size:10px; color:var(--os-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.chat-main{ flex:1; min-width:0; display:flex; }
.chat-pane{ flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-pane[hidden]{ display:none; }
.chat-topbar{ flex:0 0 auto; padding:10px 14px; border-bottom:1px solid var(--os-line); background:#fbfcfe;
  font:700 13px/1.2 var(--ui); color:var(--os-text); }
.chat-topbar span{ display:block; font-weight:500; font-size:10.5px; color:var(--os-mut); margin-top:2px; }
.chat-scroll{ flex:1; min-height:0; overflow:auto; padding:12px 14px; }

/* =========================================================================
   FILES - real file manager (sidebar + grid ⇄ preview)
   ========================================================================= */
.app.filesapp{ padding:0; display:flex; flex-direction:row; height:100%; }
.files-side{ flex:0 0 118px; overflow:auto; padding:10px 8px; background:#f7f9fc; border-right:1px solid var(--os-line); }
.fs-item{ font:600 11.5px/1 var(--ui); color:var(--os-text); padding:8px 9px; border-radius:7px; margin-bottom:3px; cursor:default; }
.fs-item.active{ background:#e6eef7; color:#1a4d99; }
.fs-item{ text-align:left; border:none; width:100%; background:transparent; cursor:pointer; }
.fs-item:hover{ background:#eef3f8; }

.files-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.files-folder{ flex:1; min-height:0; display:flex; }
.files-bar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px; border-bottom:1px solid var(--os-line); background:#fbfcfe;
  font:700 12.5px/1 var(--ui); color:var(--os-text); }
.files-bar .files-meta{ font-weight:500; font-size:11px; color:var(--os-mut); }
.files-grid{ flex:1; min-height:0; overflow:auto; padding:14px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; align-content:start; }
.file-card{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:12px 6px; border-radius:10px; border:1px solid transparent; cursor:pointer; background:transparent; }
.file-card:hover{ background:#eef3f8; border-color:var(--os-line); }
.fc-ico{ position:relative; width:48px; height:48px; border-radius:11px; display:grid; place-items:center; font-size:24px; color:#fff;
  box-shadow:0 5px 10px -4px rgba(0,0,0,.35); }
.fc-ico.doc{ background:#2f7bd6; } .fc-ico.pdf{ background:#c9432e; } .fc-ico.txt{ background:#7a8794; }
.fc-ico.xls{ background:#1f8a5a; } .fc-ico.db{ background:#5a4bd6; } .fc-ico.exe{ background:#556170; }
.fc-ico.zip{ background:#b07d2c; } .fc-ico.img{ background:#7b5cff; }
.fc-name{ font:600 11px/1.25 var(--ui); color:var(--os-text); word-break:break-word; }
.fc-sub{ font-size:9.5px; color:var(--os-mut); }

/* locked placeholder files - look real but can't be opened */
.file-card.locked{ opacity:.72; }
.file-card.locked .fc-ico::after{ content:"🔒"; position:absolute; right:-5px; bottom:-5px;
  font-size:12px; background:#fff; border-radius:50%; width:17px; height:17px; display:grid; place-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,.35); }
.file-card.locked .fc-sub{ color:#b06a5a; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.file-card.shake{ animation:cardShake .35s ease; }
@keyframes cardShake{ 0%,100%{ transform:translateX(0);} 20%,60%{ transform:translateX(-4px);} 40%,80%{ transform:translateX(4px);} }

.file-viewer{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fv-bar{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-bottom:1px solid var(--os-line); background:#f7f9fc; }
.fv-back{ border:none; background:transparent; cursor:pointer; font:600 12.5px/1 var(--ui); color:#2f7bd6; }
.fv-back:hover{ text-decoration:underline; }
.fv-title{ font:700 12px/1 var(--ui); color:var(--os-text); }
.fv-scroll{ flex:1; min-height:0; overflow:auto; padding:14px 16px; }
.fv-doc[hidden]{ display:none; }

/* =========================================================================
   COUNTDOWN STOPWATCH (top-left of the laptop scene)
   ========================================================================= */
.stopwatch{ position:absolute; top:18px; left:18px; z-index:30; width:104px; filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
.sw-crown{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); width:22px; height:15px;
  border-radius:5px 5px 3px 3px; background:linear-gradient(#e4e8ee,#9aa0ab); box-shadow:inset 0 1px 0 #fff; z-index:1; }
.sw-crown::after{ content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:11px; height:9px; border-radius:3px; background:linear-gradient(#c3c8d0,#8b909b); }
.sw-ear{ position:absolute; top:13px; width:13px; height:16px; border-radius:4px; background:linear-gradient(#c8cdd4,#8b909b); }
.sw-ear.left{ left:-5px; transform:rotate(-30deg); } .sw-ear.right{ right:-5px; transform:rotate(30deg); }
.sw-face{ position:relative; width:104px; height:104px; border-radius:50%;
  background:radial-gradient(circle at 50% 34%, #fffdf7, #efeade);
  border:7px solid; border-color:#eef2f6 #b6bcc6 #8b919d #d0d5dc;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.06), inset 0 -6px 14px rgba(0,0,0,.08); }
.sw-ticks{ position:absolute; inset:9px; border-radius:50%; border:2px dotted rgba(28,43,58,.18); }
.sw-hand{ position:absolute; left:50%; top:50%; width:2px; height:40px; background:var(--red);
  transform-origin:50% 100%; transform:translate(-50%,-100%) rotate(0deg); border-radius:2px; z-index:3;
  transition:transform .25s cubic-bezier(.34,1.56,.4,1); }
.sw-pin{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px;
  border-radius:50%; background:var(--red-deep); z-index:4; box-shadow:0 0 0 2px #fff; }
.sw-dial{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; }
.sw-readout{ font:700 18px/1 var(--type); letter-spacing:1px; color:var(--ink);
  background:rgba(255,255,255,.8); padding:2px 7px; border-radius:6px; }
.sw-sub{ font:700 7px/1 var(--ui); letter-spacing:2px; color:var(--os-mut); margin-top:3px; }
.stopwatch.warn .sw-readout{ color:var(--red); }
.stopwatch.warn .sw-face{ animation:swPulse 1s ease-in-out infinite; }
.stopwatch.paused{ filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)) grayscale(.35); }
.stopwatch.paused .sw-readout{ color:var(--os-mut); }
.stopwatch.paused .sw-sub{ color:var(--teal-deep); }
@keyframes swPulse{ 50%{ box-shadow:inset 0 0 0 2px rgba(193,70,47,.35), 0 0 18px rgba(193,70,47,.35);} }

@media (max-width:900px){ .stopwatch{ width:88px; top:12px; left:12px; } .sw-face{ width:88px; height:88px; } .sw-readout{ font-size:15px; } }

/* --- AI chatbot --- */
.halo-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.halo-mark{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; font-size:16px;
  background: #9279fd; border:1px solid #d5e9c4; overflow:hidden; }
.halo-mark img{ width:22px; height:22px; object-fit:contain; display:block; }

.bot{ max-width:88%; padding:9px 12px; border-radius:13px; font-size:12.5px; line-height:1.5; }
.bot.ai{ align-self:flex-start; background:#f1eeff; border:1px solid #e2dbff; border-bottom-left-radius:4px; }
.bot.ai .nm{ color:#6a5acd; }
.bot.me{ align-self:flex-end; background:#e9eef3; border-bottom-right-radius:4px; }
.bot.ai .warn{ display:block; margin-top:6px; font-size:11px; color:#8a6d00;
  background:#fff6d6; border-left:3px solid var(--highlight); padding:5px 8px; border-radius:5px; }

/* --- Files --- */
.fileitem{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border:1px solid var(--os-line); border-radius:8px; margin-bottom:8px;
}
.fico{ width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font-size:16px; color:#fff; flex:0 0 auto; }
.fico.doc{ background:#2f7bd6; } .fico.pdf{ background:#c9432e; } .fico.txt{ background:#7a8794; }
.fmeta b{ font-size:12.5px; } .fmeta span{ display:block; font-size:11px; color:var(--os-mut); }
.doc-preview{
  margin-top:6px; padding:14px 16px; border:1px solid var(--os-line); border-radius:8px;
  background:#fcfcfa; font-family:var(--type); font-size:12px; line-height:1.7; color:#2b3742;
}
.doc-preview h6{ margin:0 0 8px; font:700 15px/1.2 var(--display); letter-spacing:.5px; }
.cite{ color:var(--red-deep); font-weight:700; }
.doc-preview h5{ margin:0 0 8px; font:700 20px/1.2 var(--display); letter-spacing:.5px; }

.doc-preview h4{ margin:0 0 8px; font:700 10px/1.2 var(--display); letter-spacing:.5px; }


.doc-preview h3{ margin:0 0 8px; font:700 25px/1.2 var(--display); letter-spacing:.5px; }

.doc-preview h2{ margin:0 0 8px; font:700 30px/1.2 var(--display); letter-spacing:.5px; }
.doc-src{ margin-top:12px; padding-top:8px; border-top:1px dashed var(--os-line);
  font-size:10.5px; color:#7a8794; font-style:italic; }
.doc-preview p{margin:0 0 12px; font:var(--type); letter-spacing:.5px; line-height:30px; font-size:11pt;}

/* --- Goggles search --- */
.goggles{ text-align:center; padding-top:6px; }
.gg-logo{
  display:flex;
  justify-content:center;
  align-items:center;
}

.gg-logo img {
  height: 65px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: auto;
  display: block;
}
.gg-logo span:nth-child(1){ color:#2f7bd6; } .gg-logo span:nth-child(2){ color:#c9432e; }
.gg-logo span:nth-child(3){ color:#e0a53c; } .gg-logo span:nth-child(4){ color:#2fae8f; }
.gg-bar{ position:relative; display:flex; gap:6px; max-width:340px; margin:0 auto 12px; }
.gg-bar input{
  flex:1; padding:9px 13px; border-radius:22px; border:1px solid #cfd8e2;
  font-family:var(--ui); font-size:12.5px; outline:none;
}
.gg-bar input:focus{ border-color:#2f7bd6; box-shadow:0 0 0 3px rgba(47,123,214,.15); }
.gg-go{ border:none; background:#2f7bd6; color:#fff; border-radius:22px; padding:0 14px; font-weight:600; cursor:pointer; }
.gg-chips{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:10px; }
.gg-chip{ font-size:11px; background:#eef2f7; border:1px solid #dde4ec; border-radius:20px; padding:4px 10px; cursor:pointer; color:#3a4b5c; }
.gg-chip:hover{ background:#e2e9f2; }
.gg-chip.gg-tool{ background:#eef0ff; border-color:#d7d9ff; color:#4a3fd6; font-weight:700; }
.gg-chip.gg-tool:hover{ background:#e3e5ff; }

/* --- verifyAI drag-and-drop site --- */
.verifyai{ text-align:left; padding:4px 2px 8px; }
.va-head{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-bottom:12px; }
.va-logo{ font:700 20px/1 var(--display); letter-spacing:.5px; color:#4a3fd6; }
.va-logo b{ color:#2fae8f; }
.va-tag{ font-size:11px; color:var(--os-mut); }
.va-drop{ border:2.5px dashed #b9c0cf; border-radius:14px; background:#f7f9fc;
  padding:26px 16px; text-align:center; transition:background .15s, border-color .15s, transform .15s; }
.va-drop.over{ border-color:#4a3fd6; background:#eef0ff; transform:scale(1.01); }
.va-ico{ font-size:30px; }
.va-big{ font:700 14px/1.3 var(--ui); color:var(--os-text); margin:6px 0 3px; }
.va-hint{ font-size:11px; color:var(--os-mut); margin:0; }
.va-files{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.va-file{ font:600 11.5px/1 var(--ui); background:#fff; border:1px solid var(--os-line); border-radius:8px;
  padding:8px 10px; cursor:grab; box-shadow:0 1px 2px rgba(0,0,0,.08); user-select:none; }
.va-file:active{ cursor:grabbing; }
.va-result{ margin-top:12px; }
.va-analyzing{ display:flex; align-items:center; gap:9px; font:600 12.5px/1 var(--ui); color:var(--os-mut);
  background:#f3f5f9; border-radius:10px; padding:12px 14px; }
.va-spin{ width:15px; height:15px; border-radius:50%; border:2.5px solid #cdd4e0; border-top-color:#4a3fd6;
  animation:vaSpin .7s linear infinite; }
@keyframes vaSpin{ to{ transform:rotate(360deg); } }
.va-report{ border-radius:10px; padding:13px 15px; font-size:12.5px; line-height:1.5; }
.va-report .va-score{ font:700 14px/1 var(--ui); margin-bottom:8px; }
.va-report ul{ margin:0 0 8px; padding-left:18px; }
.va-report li{ margin-bottom:4px; }
.va-report .va-note{ margin:0; font-size:11.5px; color:var(--os-mut); }
.va-report.bad{ background:#fdf2f0; border:1px solid #f3c9c1; }
.va-report.bad .va-score{ color:var(--red-deep); }
.va-report.ok{ background:#f2faf4; border:1px solid #c7e6d1; }
.va-report.ok .va-score{ color:var(--ok); }

/* AI-generated content warning banner */
.va-aiwarn{
  display:flex; align-items:center; gap:8px;
  margin:-2px 0 10px; padding:9px 11px;
  border-radius:8px; font:800 12.5px/1.1 var(--ui); letter-spacing:.2px;
  color:#5b3a00; background:linear-gradient(180deg,#fff2cc,#ffe8a3);
  border:1px solid #f0cf7a; box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.va-aiwarn-ico{ font-size:16px; }
.va-aiwarn-txt{ text-transform:uppercase; }
.va-aiwarn-pct{ margin-left:auto; font:800 10.5px/1 var(--ui); color:#fff;
  background:#d68a1e; padding:4px 8px; border-radius:20px; white-space:nowrap; }
.va-choose{ margin-top:12px; font:700 12px/1 var(--ui); color:#fff; background:#4a3fd6; border:none;
  border-radius:8px; padding:10px 16px; cursor:pointer; }
.va-choose:hover{ background:#3d33c0; }
.va-picked{ margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.va-doc-chip{ font:700 12px/1 var(--ui); color:var(--os-text); background:#fff; border:1px solid var(--os-line);
  border-radius:8px; padding:8px 12px; }
.va-again{ font:600 11.5px/1 var(--ui); color:#4a3fd6; background:#eef0ff; border:1px solid #d7d9ff;
  border-radius:7px; padding:7px 11px; cursor:pointer; }
.va-again:hover{ background:#e3e5ff; }
/* Files picker (verifyAI): selection highlight + banner */
.file-card.sel{ background:#eef0ff; border-color:#8f86f0; box-shadow:inset 0 0 0 2px #8f86f0; }
.win.picking .file-card[data-file]{ cursor:copy; }
.files-pick-banner{ display:none; }
.win.picking .files-pick-banner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex:0 0 auto; padding:9px 12px; font:600 12px/1.3 var(--ui);
  color:#3b2f9c; background:linear-gradient(180deg,#eef0ff,#e4e6ff); border-bottom:1px solid #d3d5ff;
}
.fpb-cancel{ font:700 11px/1 var(--ui); color:#4a3fd6; background:#fff; border:1px solid #d7d9ff;
  border-radius:7px; padding:6px 10px; cursor:pointer; }
.fpb-cancel:hover{ background:#f0f1ff; }

.gg-results{ text-align:left; margin-top:8px; }
.gg-res{ margin-bottom:12px; }
.gg-res a{ color:#1a4d99; font-size:13px; font-weight:600; text-decoration:none; }
.gg-url{ color:#0a7d3b; font-size:11px; }
.gg-snip{ font-size:12px; color:#3c4b59; }
.gg-none{ padding:14px; background:#fff4f2; border:1px solid #f3c9c1; border-radius:8px; color:#8a2f20; font-size:12.5px; }

/* =========================================================================
   FLAGGABLE EVIDENCE
   ========================================================================= */
.flaggable{ position:relative; display:flex; flex-direction:column; padding-bottom:30px; }
.flaggable .flag-btn{
  position:absolute; right:6px; bottom:5px;
  border:1px solid #d6c48a; background:#fff8e6; color:#8a6d00;
  font:700 10px/1 var(--ui); letter-spacing:.3px;
  padding:5px 9px; border-radius:20px; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; z-index:2;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:background .15s, box-shadow .15s, transform .1s;
}
.flag-btn:hover{ background:var(--highlight); box-shadow:0 2px 5px rgba(0,0,0,.18); }
.flag-btn:active{ transform:scale(.95); }

.flaggable.flagged{ outline:2px dashed var(--red); outline-offset:2px; border-radius:8px;
  background:rgba(244,201,72,.14); }
.flaggable.flagged .flag-btn{ background:var(--red); color:#fff; border-color:var(--red-deep); }

/* =========================================================================
   SIDE COLUMN - STICKY NOTE + NOTEBOOK
   ========================================================================= */
/* padding-bottom keeps the bottom-right corner clear for the desk phone.
   Without it the notebook runs down into that corner at 1366x768 and the
   handset sits on top of the Submit button. */
.sidebar{ flex:0 0 300px; max-width:340px; display:flex; flex-direction:column; gap:20px;
  padding-bottom:150px; }
@media (max-width:900px){ .sidebar{ flex:1 1 320px; } }

/* sticky note */
.sticky-note{
  position:relative;
  background:linear-gradient(160deg,#fff08a,#ffe45e);
  padding:20px 20px 22px;
  border-radius:2px;
  color:#5a4a10;
  box-shadow:0 14px 26px -12px rgba(0,0,0,.5);
  transform:rotate(-2.2deg);
  font-family:var(--hand);
}
.sticky-note::before{  /* tape */
  content:""; position:absolute; top:-11px; left:50%; transform:translateX(-50%) rotate(1.5deg);
  width:96px; height:26px; background:rgba(255,255,255,.45);
  box-shadow:0 2px 5px rgba(0,0,0,.15);
}
.sticky-note .sn-tag{ font:700 12px/1 "Caveat"; letter-spacing:2px; color:#a9861a; text-transform:uppercase; }
.sticky-note h4{ margin:6px 0 6px; font:700 26px/1 "Caveat Brush"; color:#4a3c0a; }
.sticky-note p{ font:600 12px/1 "Caveat"; margin:0; font-size:20px; line-height:1.45; }
.sticky-note ul{ font:600 12px/1 "Caveat"; margin:0; font-size:19px; line-height:1.45; padding-left:40px; }
.sticky-note .sn-count{ font-family:var(--ui); font-weight:700; background:#4a3c0a; color:#ffe45e;
  padding:0 8px; border-radius:20px; font-size:14px; }

/* notebook */
.notebook{
  background:var(--paper);
  border-radius:8px;
  box-shadow:var(--shadow-deep);
  position:relative; overflow:hidden;
  border:1px solid var(--paper-line);
}
.nb-toggle{
  display:none; /* shown only on small screens as a collapse handle */
  align-items:center; gap:8px;
  padding:11px 14px; cursor:pointer;
  background:var(--ink); color:#eef3f8; font:700 13px/1 var(--ui);
}
.nb-toggle .badge{
  margin-left:auto; background:var(--red); color:#fff; border-radius:20px;
  min-width:22px; height:22px; display:grid; place-items:center; font-size:12px; padding:0 6px;
}
#nb-caret{ transition:transform .25s ease; }
.notebook.collapsed #nb-caret{ transform:rotate(180deg); }

.spiral{
  position:absolute; top:0; bottom:0; left:14px; width:14px;
  background-image:radial-gradient(circle at 50% 8px, #b9ad8e 0 4px, transparent 5px);
  background-size:14px 26px; background-repeat:repeat-y; opacity:.7;
}
.nb-inner{ padding:18px 20px 20px 40px; transition:max-height .3s ease; }
.notebook.collapsed .nb-inner{ max-height:0; padding-top:0; padding-bottom:0; overflow:hidden; }

.nb-head{ font:700 20px/1 var(--display); letter-spacing:1px; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:8px; text-transform:uppercase;
  padding-bottom:8px; border-bottom:2px solid var(--ink); }
.nb-head .count{ font:700 9.5px/1 var(--ui); color:#fff; background:var(--red-deep);
  padding:4px 8px; border-radius:20px; letter-spacing:.5px; text-transform:uppercase; }
.nb-sub{ font-family:var(--hand); font-size:19px; color:var(--teal-deep); margin:8px 0 12px; }

.nb-progress{ height:8px; background:#e6dfcc; border-radius:6px; overflow:hidden; margin-bottom:14px; }
.nb-progress i{ display:block; height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg,var(--teal),var(--teal-deep)); transition:width .35s ease; }

/* corkboard evidence area - fixed height, scrolls instead of growing */
#ev-list{ display:flex; flex-direction:column; gap:16px; margin-bottom:16px;
  max-height:clamp(160px, 34vh, 320px); overflow-y:auto;
  padding:16px 12px; counter-reset:ev; border-radius:8px;
  background-color:#c8a76a;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.06) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 82%, rgba(0,0,0,.05) 0 1.5px, transparent 3px);
  background-size:22px 22px, 30px 30px, 18px 18px;
  box-shadow:inset 0 0 18px rgba(90,60,20,.35), inset 0 0 0 1px rgba(90,60,20,.25);
  scrollbar-width:thin; scrollbar-color:#9c7d47 transparent; }
#ev-list::-webkit-scrollbar{ width:9px; }
#ev-list::-webkit-scrollbar-thumb{ background:#9c7d47; border-radius:9px; }
#ev-list::-webkit-scrollbar-track{ background:transparent; }
.nb-empty{ font-family:var(--type); font-size:12.5px; color:#4a3a1e; line-height:1.6; text-align:center;
  padding:16px; border:1px dashed rgba(74,58,30,.5); border-radius:8px; background:rgba(255,253,246,.6); }

.ev{ counter-increment:ev; position:relative;
  background:#fffdf6; border:1px solid #e6ddc6; border-left:4px solid var(--kraft);
  border-radius:4px; padding:14px 30px 12px 12px;
  font-family:var(--type); font-size:12px; line-height:1.4; color:var(--ink);
  box-shadow:0 4px 8px rgba(40,25,8,.35);
  transform:rotate(-.5deg); }
.ev:nth-child(even){ transform:rotate(.6deg); }
/* red pushpin */
.ev::before{ content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff9384, #c1462f 55%, #8f2a1c);
  box-shadow:0 3px 4px rgba(0,0,0,.45), inset 0 -1px 2px rgba(0,0,0,.3); z-index:2; }
/* exhibit label */
.ev::after{ counter(ev,decimal-leading-zero);
  position:absolute; right:10px; bottom:8px; font:700 8px/1 var(--ui); letter-spacing:1px; color:#b3a988; }
.ev .ev-src{ display:block; width:max-content; max-width:100%; margin-top:7px;
  font-size:9.5px; font-weight:700; color:var(--os-mut); letter-spacing:.5px; text-transform:uppercase;
  background:#efe7d2; padding:2px 8px; border-radius:20px; }
.ev .ev-x{ position:absolute; top:6px; right:6px; border:none; background:transparent; cursor:pointer;
  color:#b3a988; font-size:14px; line-height:1; padding:2px 4px; border-radius:4px; z-index:3; }
.ev .ev-x:hover{ background:#eee3c8; color:var(--red); }
.ev.correct{ border-left-color:var(--ok); background:#f4faf5; }
.ev.correct::before{ background:radial-gradient(circle at 35% 30%, #7bd6a0, #1f8a5a 60%, #14663f); }
.ev.wrong{ border-left-color:var(--red); background:#fdf3f1; }
.ev .ev-mark{ font-weight:700; margin-right:5px; }
.ev.correct .ev-mark{ color:var(--ok); } .ev.wrong .ev-mark{ color:var(--red); }

.nb-actions{ display:flex; flex-direction:column; gap:8px; }
.btn{
  font:600 13px/1 var(--ui); letter-spacing:.3px;
  padding:11px 16px; border:none; border-radius:8px; cursor:pointer; color:#fff;
  background:linear-gradient(180deg,var(--red),var(--red-deep));
  box-shadow:0 6px 14px -5px rgba(156,51,34,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn.ghost{ background:transparent; color:var(--ink-2);
  border:1px solid var(--paper-line); box-shadow:none; }
.btn.ghost:hover{ background:#efe8d6; }

/* =========================================================================
   COACH MARKS
   ========================================================================= */
#coach{ position:fixed; inset:0; z-index:60; display:none; }
#coach.on{ display:block; }
.coach-hole{
  position:absolute; border-radius:10px;
  border:4px dashed #ffc400;                 /* crisp dashed edge on the cut-out */
  box-shadow:0 0 0 9999px rgba(10,14,20,.82),
  0 0 0 6px var(--highlight),
  0 0 0 9px rgb(254 84 53),
  0 0 34px 10px rgba(244,201,72,.85);
  transition:left .3s ease, top .3s ease, width .3s ease, height .3s ease;
  pointer-events:none;
  animation:coachPulse 1.4s ease-in-out infinite;
}
@keyframes coachPulse{
  50%{ box-shadow:0 0 0 9999px rgba(10,14,20,.82),
  0 0 0 8px var(--highlight),
  0 0 0 12px rgba(193,70,47,.9),
  0 0 46px 16px rgba(244,201,72,1); }
}
.coach-tip{
  position:absolute;
  width:min(290px,80vw);
  background:#fff;
  border-radius:12px;
  padding:14px 15px 12px;
  border: 5px solid var(--highlight);
  /* border-top:5px solid var(--highlight); */
  box-shadow:0 20px 40px -12px rgba(0,0,0,.7), 0 0 0 3px rgba(244,201,72,.25);
  transition:left .28s ease, top .28s ease;
}
.ct-step{ font:700 10px/1 var(--ui); letter-spacing:2px; color:var(--red); margin-bottom:6px; }
.ct-text{ font:400 13.5px/1.5 var(--ui); color:var(--ink); }
.ct-row{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.ct-skip{ font:600 12px/1 var(--ui); color:var(--os-mut); cursor:pointer; }
.ct-skip:hover{ color:var(--ink); text-decoration:underline; }
.ct-next{ border:none; cursor:pointer; font:700 12px/1 var(--ui);
  background:var(--ink); color:#fff; padding:9px 15px; border-radius:8px; }
.ct-next:hover{ background:var(--ink-2); }

.flag-chip {
  display: inline-block;
  border:1px solid #d6c48a; background:#fff8e6; color:#8a6d00;
  font:var(--ui); letter-spacing:.3px;
  padding:.1px 7px; border-radius:20px;
}

/* Clickable verdict items */
.vitem.clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.vitem.clickable:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  filter: brightness(0.97);
}

.vitem.clickable .vsrc {
  font-weight: bold;
  text-decoration: none;
}

/* =========================================================================
   SCENE 5: DEBRIEF EMAIL
   ========================================================================= */
#scene-email{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,2.5vw,32px);
  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(244,201,72,.16), transparent 60%),
    radial-gradient(800px 520px at 12% 108%, rgba(31,138,130,.20), transparent 60%),
    linear-gradient(155deg,#5d452e,#3a2a1d);
}
.email-stage{ width:100%; max-width:1000px; display:flex; justify-content:center; }
.laptop.email-laptop{ flex:1 1 auto; max-width:min(920px, 80vh * 1.5); }

.mailc{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  margin:12px; border-radius:10px; overflow:hidden;
  background:var(--os-panel);
  border:1px solid var(--os-line);
  box-shadow:0 18px 40px -20px rgba(10,20,30,.6);
}
.mailc-h{
  flex:0 0 auto; padding:10px 14px;
  font:700 13px/1 var(--ui); color:var(--os-text);
  background:linear-gradient(180deg,#f6f8fb,#eef1f6);
  border-bottom:1px solid var(--os-line);
}
.mailc-row{
  flex:0 0 auto; display:flex; gap:10px; align-items:baseline;
  padding:9px 14px; border-bottom:1px solid var(--os-line);
  font-size:12.5px; color:var(--os-text);
}
.mailc-row span{ flex:0 0 58px; color:var(--os-mut); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.6px; }
.mailc-body{
  flex:1 1 auto; min-height:0; overflow:auto;
  padding:16px 18px; font:400 13px/1.6 var(--ui); color:var(--os-text);
}
.mailc-body p{ margin:0 0 10px; }
.mailc-body ol{ margin:0 0 12px; padding-left:20px; }
/* each recommendation leads with a bold header so the list can be skimmed
   rather than read as a wall of text */
.mailc-body li{ margin-bottom:10px; line-height:1.55; }
.mailc-body li b{ color:var(--ink); }
.mailc-sign{ font-family:var(--hand); font-size:20px; color:var(--teal-deep); margin-top:14px; }
.mailc-foot{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; border-top:1px solid var(--os-line); background:#f8fafc;
}
.mailc-hint{ font:600 12px/1 var(--ui); color:var(--os-mut); margin-left:360px; }
#email-send{ margin:0; padding:11px 24px; background:var(--teal-deep); border-radius:8px; }
#email-send:hover{ background:var(--teal); }
#email-send:disabled{ opacity:.65; cursor:default; }

/* fade to black between the debrief and the start screen */
#fadeout{
  position:fixed; inset:0; z-index:200;
  background:#000; opacity:0; pointer-events:none;
  transition:opacity .55s ease;
}
#fadeout.on{ opacity:1; pointer-events:auto; }

/* =========================================================================
   RESULTS
   ========================================================================= */
#results{ position:fixed; inset:0; z-index:70; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(15,20,28,.66); backdrop-filter:blur(3px); }
#results.on{ display:flex; }
.verdict{
  width:min(650px,94vw); max-height:88vh; overflow:auto;
  background:var(--paper); border-radius:14px; padding:26px 26px 24px;
  box-shadow:var(--shadow-deep); animation:winIn .25s ease;
}
.verdict h2{ margin:0 0 4px; font:700 26px/1 var(--display); letter-spacing:.5px; text-transform:uppercase; color:var(--ink); }
.verdict .rank{ font-family:var(--hand); font-size:24px; color:var(--red-deep); margin:0 0 14px; }
.score-row{ display:flex; gap:10px; margin:0 0 16px; flex-wrap:wrap; }
.score-chip{ flex:1 1 120px; text-align:center; padding:12px; border-radius:10px; background:#fffdf6; border:1px solid var(--paper-line); }
.score-chip b{ display:block; font:700 26px/1 var(--display); color:var(--ink); }
.score-chip span{ font-size:11px; color:var(--os-mut); text-transform:uppercase; letter-spacing:.5px; }
.vsec-title{ font:700 12px/1 var(--ui); text-transform:uppercase; letter-spacing:1px; color:var(--os-mut); margin:14px 0 8px; }
.vitem{ font-family:var(--type); font-size:12.5px; padding:8px 10px; border-radius:6px; margin-bottom:6px; line-height:1.4; }
.vitem.hit{ background:#f2faf4; border-left:4px solid var(--ok); }
.vitem.miss{ background:#fdf2f0; border-left:4px solid var(--red); }
.vitem.fp{ background:#fff8e6; border-left:4px solid var(--highlight); }
.verdict .btn{ width:100%; margin-top:10px; }

/* two-column result: correct flags | wrong + where-to-look */
.verdict-split{ display:flex; gap:14px; margin:8px 0 4px; align-items:stretch; }
.vcol{ flex:1 1 0; min-width:0; padding:12px 12px 6px; border-radius:12px; }
.vcol.good{ background:#eff8f1; border:1px solid #c7e6d1; }
.vcol.bad{ background:#fdf6ec; border:1px solid #f0dcc0; }
.vcol-h{ font:700 12px/1 var(--ui); text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px; }
.vcol.good .vcol-h{ color:var(--ok); }
.vcol.bad .vcol-h{ color:var(--red-deep); }
.vcol .vitem{ background:rgba(255,255,255,.78); }
.vsrc{ display:block; margin-top:5px; font:700 9px/1 var(--ui); letter-spacing:.6px; text-transform:uppercase; opacity:.5; }
.vempty{ font:400 12px/1.45 var(--type); color:var(--os-mut); }
@media (max-width:560px){ .verdict-split{ flex-direction:column; } }
/* =========================================================================
   TOAST
   ========================================================================= */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  z-index:80; display:flex; align-items:center; gap:9px;
  background:var(--ink); color:#eef3f8; padding:11px 16px; border-radius:10px;
  font:600 13px/1 var(--ui); box-shadow:0 16px 30px -12px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
#toast.show{ opacity:1; transform:translate(-50%,0); }
.tdot{ color:var(--highlight); font-size:10px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .lab{ flex-direction:column; align-items:stretch; }
  .laptop{ max-width:none; }
  .sidebar{ max-width:none; }
  .nb-toggle{ display:flex; }
  .notebook.collapsed{ }
}
@media (max-width:520px){
  .win{ width:88%; }
  .desktop-icons{ grid-template-columns:repeat(auto-fill,80px); padding:12px; }
  .dicon{ width:80px; }
  .sticky-note h4{ font-size:22px; } .sticky-note p{ font-size:17px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* =========================================================================
   LEADERBOARD  (Scene 1 slide-in + inline variant on the congrats scene)
   ========================================================================= */
.sb-toggle{
  position:absolute; top:50%; right:0; transform:translateY(-50%);
  z-index:6; display:flex; align-items:center; gap:8px;
  padding:12px 14px 12px 16px; cursor:pointer;
  border:none; border-right:none;
  border-radius:12px 0 0 12px;
  background:linear-gradient(180deg,#2c2820,#1a1811);
  border-left:2px solid var(--brass-lo);
  color:var(--brass-hi); font:700 12px/1 var(--ui); letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:-6px 8px 22px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(232,208,154,.12);
  transition:transform .2s ease, background .2s ease;
}
.sb-toggle:hover{ background:linear-gradient(180deg,#3a352a,#231f16); transform:translateY(-50%) translateX(-2px); }
.sb-toggle-ico{ font-size:18px; }
.sb-toggle-label{ writing-mode:horizontal-tb; }

.scoreboard{
  position:absolute; top:0; right:0; height:100%;
  width:min(360px,88vw); z-index:7;
  display:flex; flex-direction:column;
  padding:26px 22px calc(env(safe-area-inset-bottom) + 22px);
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(201,169,97,.10), transparent 70%),
    linear-gradient(180deg,#24211a 0%,#131109 100%);
  border-left:3px solid var(--brass-lo);
  box-shadow:-18px 0 46px -18px rgba(0,0,0,.8);
  transform:translateX(100%);
  transition:transform .42s cubic-bezier(.2,.9,.2,1);
}
.scoreboard.open{ transform:translateX(0); }
.sb-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sb-head h3{ font:700 18px/1 var(--display); letter-spacing:.12em; color:var(--manila); text-transform:uppercase; }
.sb-close{
  border:none; background:rgba(255,255,255,.08); color:var(--manila);
  width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:14px;
}
.sb-close:hover{ background:rgba(255,255,255,.18); }
.sb-list{ list-style:none; margin:0; padding:0; overflow:auto; flex:1 1 auto; }
.sb-list li{
  display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px;
  padding:10px 12px; margin-bottom:8px; border-radius:10px;
  background:rgba(232,208,154,.055); border:1px solid var(--smoke-line);
  color:#efe6d2; font:600 13px/1.2 var(--ui);
}
.sb-list li .sb-rank{ font:800 14px/1 var(--display); color:var(--brass); text-align:center; }
/* Name stacked over the earned title, so the row stays 3 columns wide.
   Explicitly left-aligned: the congrats stage centres its text, which left
   the name centred while the title chip sat hard left, and the two read as
   misaligned. Rank left, name left, time right is the leaderboard norm. */
.sb-list li .sb-who{
  min-width:0;
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:4px;
  text-align:left;
}
.sb-list li .sb-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The title chip. Each rung gets its own metal so the ladder reads at a
   glance: gold, silver, bronze, then progressively plainer. */
.sb-list li .sb-title{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px;
  border-radius:999px;
  font:800 8px/1.3 var(--display), sans-serif;
  letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap;
  color:#d8cdb4;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.18));
  border:1px solid rgba(201,169,97,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

/* 5/5 first time: gold, and it glints */
.sb-list li .sb-title.t5{
  color:#2a1e05;
  background:linear-gradient(180deg,#ffe89a 0%,#f0c651 45%,#c9922b 100%);
  border-color:#ffeaa8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 12px rgba(255,199,73,.35);
}
/* 4/5: platinum */
.sb-list li .sb-title.t4{
  color:#22262b;
  background:linear-gradient(180deg,#f2f5f8 0%,#c9d2da 50%,#9aa6b1 100%);
  border-color:#f4f7fa;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
/* 3/5: bronze */
.sb-list li .sb-title.t3{
  color:#2b1608;
  background:linear-gradient(180deg,#e6a877 0%,#c47a44 50%,#96552a 100%);
  border-color:#efbe93;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
/* 2/5 and below: no metal, just increasingly quiet brass */
.sb-list li .sb-title.t2{ color:var(--brass-hi); border-color:rgba(201,169,97,.4); }
.sb-list li .sb-title.t1{ color:#b6a883; border-color:rgba(201,169,97,.26); }
.sb-list li .sb-title.t0{ color:#8e846b; border-color:rgba(201,169,97,.18); opacity:.85; }

.sb-star{ font-style:normal; font-size:10px; line-height:1; }

/* the "…" between the visible top ten and a pinned own-row below it */
.sb-list li.sb-gap{
  display:block !important;
  grid-template-columns:none !important;
  background:none; border:none;
  text-align:center; padding:2px 0 6px; margin:0;
  color:var(--brass-lo); letter-spacing:.3em;
}
.sb-list li .sb-time{ font:700 13px/1 var(--type); color:var(--brass-hi); letter-spacing:.5px; }
.sb-list li:nth-child(1) .sb-rank{ color:#ffd45e; }
.sb-list li:nth-child(1){ background:rgba(255,212,94,.13); border-color:rgba(255,212,94,.34); }
.sb-list li:nth-child(2) .sb-rank{ color:#ded3bb; }
.sb-list li:nth-child(3) .sb-rank{ color:#c58a54; }
.sb-list li.sb-me{ outline:2px solid var(--brass); background:rgba(201,169,97,.18); }
.sb-empty{ display:block !important; text-align:center; color:#9a8f76;
  font:500 12.5px/1.5 var(--ui) !important; grid-template-columns:none !important; }
.sb-foot{ margin-top:12px; text-align:center; font:600 10px/1.4 var(--ui);
  letter-spacing:.14em; text-transform:uppercase; color:#8d8367; }

/* =========================================================================
   LAPTOP-SCENE DESK CLUTTER  (paper notes + breaking-news post-its)
   ========================================================================= */
#scene-laptop .lab{ position:relative; z-index:1; }
/* raised above the laptop so an expanded note reads on top of the screen;
   the layer itself ignores pointer events - only the note handles are clickable */
.lab-bg{ position:absolute; inset:0; z-index:5; pointer-events:none; }

.lab-bg-row{
  position:absolute; left:0; right:0;
  display:flex; justify-content:center;
  gap:clamp(10px,1.8vw,28px);
  padding:0 clamp(14px,2.4vw,44px);
}
.lab-bg-top{    top:0;    align-items:flex-start; padding-top:10px; }
.lab-bg-bottom{ bottom:0; align-items:flex-end;   padding-bottom:10px; }

/* ---- the note = a small peeking, clickable handle ---- */
.note{
  position:relative; pointer-events:auto; cursor:pointer;
  border:none; margin:0; padding:0; background:transparent; font:inherit;
}
.note-peek{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 12px; border-radius:8px;
  font:800 12px/1 var(--ui); letter-spacing:.02em; color:#4a3a08;
  white-space:nowrap;
  box-shadow:0 8px 16px -9px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.note-peek::after{ content:"▸"; font-size:10px; opacity:.5; transition:transform .2s ease; }
.note.open .note-peek::after{ transform:rotate(90deg); opacity:.8; }
.note:hover .note-peek{ filter:brightness(1.03); box-shadow:0 12px 20px -9px rgba(0,0,0,.6); }
.lab-bg-top    .note:hover .note-peek{ transform:translateY(2px); }
.lab-bg-bottom .note:hover .note-peek{ transform:translateY(-2px); }
.note .pin{
  width:11px; height:11px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%, #ff7d6b, #c1462f);
  box-shadow:0 2px 4px rgba(0,0,0,.35);
}
.postit-tag{ color:#9c3322; }

/* ---- the expandable panel (pops out from the handle) ---- */
.note-full{
  position:absolute; left:50%; width:max-content; max-width:min(280px,74vw);
  padding:12px 15px; border-radius:11px; color:#2b2412; text-align:left;
  font:600 13.5px/1.5 var(--hand);
  box-shadow:0 22px 44px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:2;
}
.note-full b{ color:#9c3322; }
.note-full i{ font-style:italic; }
.lab-bg-top    .note-full{ top:100%;    margin-top:9px;    transform:translateX(-50%) translateY(-6px) scale(.97); }
.lab-bg-bottom .note-full{ bottom:100%; margin-bottom:9px; transform:translateX(-50%) translateY( 6px) scale(.97); }
.note.open{ z-index:30; }
.note.open .note-full{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); }
.note.open .note-peek{ box-shadow:0 12px 22px -8px rgba(0,0,0,.6); }

/* per-note colours (handle + panel share the paper tone) */
.postit-a .note-peek, .postit-a .note-full{ background:#ffe27a; }
.postit-b .note-peek, .postit-b .note-full{ background:#a8e6a1; }
.postit-c .note-peek, .postit-c .note-full{ background:#bcd9ff; }
.paper-notes .note-peek, .paper-notes .note-full{ background:#fdf6e0; }
.paper-news  .note-peek, .paper-news  .note-full{ background:#f6f0e2; }

/* handles are tiny, so they can show on more screens than the old full notes;
   still hide on narrow layouts where the laptop stacks */
@media (max-width:1099px){ .lab-bg{ display:none; } }

/* =========================================================================
   CLICKABLE EVIDENCE ROWS  (jump to where it was flagged)
   ========================================================================= */
.ev{ cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.ev:hover{ transform:translateX(2px); box-shadow:-3px 0 0 0 var(--kraft); }
.ev .ev-x{ cursor:pointer; }
@keyframes revealFlash{
  0%{ box-shadow:0 0 0 0 rgba(244,201,72,.0); background:rgba(244,201,72,.0); }
  25%{ box-shadow:0 0 0 4px rgba(244,201,72,.55); background:rgba(244,201,72,.22); }
  100%{ box-shadow:0 0 0 0 rgba(244,201,72,0); background:rgba(244,201,72,0); }
}
.flaggable.reveal-flash{ animation:revealFlash 1.4s ease; border-radius:8px; }

/* =========================================================================
   EMAIL BACK BUTTON
   ========================================================================= */
#email-back{ margin:0; padding:9px 16px; }
.mailc-foot{ flex-wrap:wrap; }

/* =========================================================================
   FADE-TO-BLACK MESSAGE  ("Congratulations on your first day!")
   ========================================================================= */
#fadeout{ display:flex; align-items:center; justify-content:center; }
#fade-msg{
  color:#fdf6e6; font:700 clamp(22px,4vw,40px)/1.2 var(--display);
  letter-spacing:.06em; text-align:center; padding:0 24px; max-width:16ch;
  opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease;
}
#fadeout.show-msg #fade-msg{ opacity:1; transform:none; }

/* =========================================================================
   SCENE 6 - CONGRATS + TOP 10
   ========================================================================= */
#scene-congrats{
  padding:clamp(16px,3vw,40px);
  background:
    radial-gradient(1000px 620px at 50% -10%, rgba(244,201,72,.2), transparent 60%),
    linear-gradient(155deg,#5d452e,#332417);
}
.congrats-stage{
  width:min(560px,94vw); display:flex; flex-direction:column; align-items:center;
  text-align:center; position:relative;
}
.congrats-badge{ font-size:52px; margin-bottom:6px; animation:congratsPop .6s cubic-bezier(.34,1.4,.5,1) both; }
@keyframes congratsPop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
/* The name box allows 25 characters, and at 40px that ran wider than the
   stage and spilled off the edge. Constrain it and let long names wrap or
   break rather than overflow. */
.congrats-title{ font:800 clamp(22px,4.4vw,40px)/1.1 var(--display); text-transform:uppercase;
  letter-spacing:.04em; color:#fdf6e6; margin:0 0 8px; text-shadow:0 3px 0 rgba(0,0,0,.35);
  max-width:100%; overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
.congrats-sub{ font:500 13px/1.5 var(--ui); color:#f2dcae; max-width:44ch; margin:0 0 20px; }
.scoreboard-inline{
  position:relative; inset:auto; height:auto; width:100%;
  transform:none; border-left:none; border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.7);
  padding:20px 20px 18px; max-height:52vh;
}
.congrats-home{ margin-top:22px; align-self:flex-end; padding:12px 22px; }
@media (max-width:560px){ .congrats-home{ align-self:center; } }

/* =========================================================================
   SCENE 1 - WELCOME ENVELOPE (click to open; letter slides out)
   ========================================================================= */
.envelope-stage{
  margin:60px auto 0;
  display:flex; justify-content:center; align-items:flex-start;
  perspective:1500px;
  min-height:340px;                         /* headroom for the letter to rise */
}
.envelope{
  position:relative;
  width:min(380px,86vw); height:236px;
  cursor:pointer; transform-style:preserve-3d;
  transition:transform .3s ease; outline:none;
}
.envelope:hover{ transform:translateY(-3px); }
.envelope:focus-visible{ box-shadow:0 0 0 3px var(--highlight); border-radius:10px; }

.env-back, .env-front, .env-flap{ position:absolute; left:0; right:0; }

/* back panel of the envelope */
.env-back{
  top:0; height:100%; border-radius:10px;
  background:linear-gradient(155deg,#eae0c9 0%,#ded2b6 55%,#cec0a0 100%);
  box-shadow:0 34px 44px -22px rgba(35,20,5,.65), 0 0 0 1px rgba(140,120,85,.35), inset 0 1px 0 rgba(255,255,255,.5);
  z-index:1;
}
/* front pocket - its top dips to a V (the envelope mouth) */
.env-front{
  bottom:0; height:100%; border-radius:10px;
  background:linear-gradient(155deg,#e6dbc2 0%,#d8cbac 60%,#c8ba98 100%);
  clip-path:polygon(0 33%, 50% 72%, 100% 33%, 100% 100%, 0 100%);
  box-shadow:inset 0 14px 20px -6px rgba(95,75,40,.20), inset 0 1px 0 rgba(255,255,255,.35);
  z-index:4;
}
/* seams running from the lower corners up to the centre (bottom-flap folds) */
.env-front::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top right, transparent 49.7%, rgba(90,70,35,.10) 49.9%, transparent 50.1%),
    linear-gradient(to top left,  transparent 49.7%, rgba(90,70,35,.10) 49.9%, transparent 50.1%);
}
/* top flap - its lower edges meet the front's V exactly, so no gap shows through */
.env-flap{
  top:0; height:72%; border-radius:10px 10px 0 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(90,70,35,.10) 50%, transparent calc(50% + 1px)),
    linear-gradient(160deg,#e4d9bf 0%,#d3c5a4 62%,#bfb08d 100%);
  clip-path:polygon(0 0, 100% 0, 100% 45.83%, 50% 100%, 0 45.83%);
  transform-origin:top center; transform:rotateX(0deg);
  backface-visibility:hidden; z-index:5;
  filter:drop-shadow(0 3px 4px rgba(70,55,25,.28));
  transition:transform .55s ease, z-index 0s 0s;
}
.envelope.open .env-flap{
  transform:rotateX(180deg); z-index:3;
  transition:transform .55s ease, z-index 0s .55s;   /* drop below the letter after lifting */
}



/* stamp sits on the flap: it swings up with the flap, and because it lives
   inside .envelope it fades out together with the envelope */
.stamp-logo{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform .55s ease;      /* identical timing to .env-flap */
}
.envelope.open .stamp-logo{ transform:rotateX(180deg); }
.stamp-logo img{
  position: absolute;
  width:20%;
  top:50%;
  left:40%;
  z-index:6;
}
.envelope.open .env-flap::after{ opacity:0; transition:opacity .2s; }

/* full-screen overlay that centres the letter (kept OUTSIDE the envelope,
   so fading the envelope never hides the letter) */
.letter-overlay{
  position:fixed; inset:0; z-index:9;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease .15s, visibility .6s .15s;
}
/* SEPARATE rules on purpose: if a browser lacks :has(), only that rule is
   dropped and the env-opened rule still reveals the letter.
   NOTE: the overlay stays pointer-events:none so empty areas don't block the
   page (e.g. the scoreboard button); only the letter itself is clickable. */
.intro-inner.env-opened .letter-overlay{ opacity:1; visibility:visible; }
.intro-inner:has(.envelope.open) .letter-overlay{ opacity:1; visibility:visible; }

.letter{
  position:relative; z-index:1; pointer-events:auto;
  width:min(540px,94vw); max-height:90vh; overflow:auto;

  color:var(--ink);
  background-color:var(--paper);
  /* evenly-spaced ruled lines across the whole sheet (paper fills fully) */
  background-image:repeating-linear-gradient(transparent 0 33px, rgba(205, 217, 230, 0.21) 33px 34px);
  background-position:0 6px;
  border-radius:12px; padding:34px 40px 40px;
  box-shadow:0 40px 80px -24px rgba(0,0,0,.7);
  opacity:0; transform:translateY(46px) scale(.7); transform-origin:center;
  transition:transform .55s cubic-bezier(.2,.85,.25,1) .12s, opacity .4s ease .12s;
}
.intro-inner.env-opened .letter{ opacity:1; transform:none; }
.intro-inner:has(.envelope.open) .letter{ opacity:1; transform:none; }
/* the envelope drops away once the flap has lifted, leaving just the letter */
.envelope.open{
  opacity:0; transform:translateY(26px) scale(.9); pointer-events:none;
  transition:opacity .5s ease .4s, transform .5s ease .4s;
}
.letter::before{                             /* letterhead (no underline so lines stay even) */
  content:"C·H·A·O·S";
  font-family: var(--display), serif;
  font-weight:700;
  font-size:clamp(1rem,7vw,3rem);
  line-height:.95;letter-spacing:.1em;
  text-shadow:0 3px 0 #b0b0b0,0 14px 30px rgb(0 0 0 / 9%);
  color: var(--red);
}
.letter, .letter *{ text-shadow:none !important; }

/* recolour + size the welcome text for a light paper background */
.letter #subtitle-scene-one{ color:var(--ink); margin-bottom:18px; max-width:none; }
.letter #subtitle-scene-one h3{color:var(--red-deep);font-size: 13pt;margin-bottom:10px;letter-spacing:2px; margin-top:5px;}
.letter #subtitle-scene-one p{ color:#3f3320; font-size:12.5pt; line-height:1.55; letter-spacing:.02em; margin-bottom:12px; }
.letter #subtitle-scene-one b{ color:var(--red-deep); }
.letter #officer-name-text{ color:var(--ink); font-size:13pt; }
.letter #name-box{ box-shadow:inset 0 0 0 1.5px var(--paper-line); border:none; font-size:13pt; }

/* the pulsing "tap to open" hint */
.env-hint{
  position:absolute; left:0; right:0; bottom:-32px; text-align:center;
  font:600 12px var(--ui); letter-spacing:.06em; color:var(--manila);
  text-shadow:0 2px 5px rgba(0,0,0,.55); animation:envHint 1.8s ease-in-out infinite;
}
.envelope.open .env-hint{ opacity:0; pointer-events:none; transition:opacity .3s; animation:none; }
@keyframes envHint{ 0%,100%{ transform:translateY(0); opacity:.9 } 50%{ transform:translateY(4px); opacity:.6 } }

/* once the letter is out, fade the big title so the letter owns the space */
#scene-one .intro-inner .gametitle{ transition:opacity .45s ease, transform .45s ease; }
#scene-one .intro-inner.env-opened .gametitle{ opacity:0; transform:translateY(-16px); pointer-events:none; }
#scene-one .intro-inner:has(.envelope.open) .gametitle{ opacity:0; transform:translateY(-16px); pointer-events:none; }

@media (max-width:520px){
  .envelope{ height:200px; }
  .envelope-stage{ min-height:300px; }
}


/* =========================================================================
   FILES APP - realistic document pages + Excel-style spreadsheets
   ========================================================================= */
.doc-page{
  background:#fff; color:#222; border:1px solid #dfe3e8; border-radius:6px;
  padding:22px 26px; margin:6px 2px; font-family:var(--type);
  font-size:12.5px; line-height:1.6; box-shadow:0 8px 24px -14px rgba(0,0,0,.3);
}
.doc-head{ display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom:2px solid #1f2a37; padding-bottom:8px; margin-bottom:14px; gap:12px; }
.doc-org{ font:800 14px/1.1 var(--display); color:#1f2a37; letter-spacing:.02em; }
.doc-org-mark{ color:var(--teal); }
.doc-org-sub{ display:block; font:600 8.5px/1.3 var(--ui); color:#6b7683;
  letter-spacing:.02em; margin-top:3px; text-transform:none; }
.doc-cls{ font:700 8.5px/1.2 var(--ui); letter-spacing:.1em;
  border:1px solid #e0c3bd; background:#fbeeec; padding:4px 7px; border-radius:4px; white-space:nowrap; }
.doc-titleblock{ margin-bottom:14px; }
.doc-h1{ font:800 20px/1.2 var(--display); color:#16202b; margin:0 0 10px; }
.doc-ext{ font-size:12px; color:#7a8794; font-weight:600; }
.doc-metagrid{ display:grid; grid-template-columns:auto 1fr; gap:3px 10px;
  font-size:11px; color:#3a4650; max-width:360px; }
.doc-metagrid span{ color:#8a95a0; }
.doc-abstract{ font-style:italic; color:#4a5560; border-left:3px solid var(--teal);
  padding-left:12px; margin:0 0 16px; }
.doc-h2{ font:800 14px/1.2 var(--display); color:#16202b; margin:16px 0 6px; }
.doc-h3{ font:700 12.5px/1.2 var(--display); color:#2a3642; margin:12px 0 5px; }
.doc-page p{ margin:0 0 10px; }
.doc-table{ width:100%; border-collapse:collapse; margin:8px 0 4px; font-size:11.5px; }
.doc-table th, .doc-table td{ border:1px solid #d7dde3; padding:6px 9px; text-align:left; vertical-align:top; }
.doc-table th{ background:#f1f4f7; color:#38424c; font-weight:700; }
.doc-src{ margin-top:14px; padding-top:8px; border-top:1px dashed #c9d1d9;
  font-size:10.5px; color:#7a8794; font-style:italic; }
.doc-foot{ display:flex; justify-content:space-between; margin-top:18px;
  padding-top:8px; border-top:1px solid #e5e9ee; font:600 9px/1 var(--ui);
  letter-spacing:.06em; color:#9aa4ae; text-transform:uppercase; }
.doc-page.pdf{ background:#fdfdfd; }
.doc-clauses{ margin:8px 0; padding-left:0; list-style:none; }
.doc-clauses li{ padding:8px 12px; margin-bottom:6px; background:#f7f9fb;
  border-left:3px solid #cdd6df; border-radius:3px; }
.doc-clauses li b{ color:var(--teal); margin-right:6px; }
.doc-plain{ font-family:var(--type); font-size:12px; line-height:1.7; color:#2b3742;
  white-space:pre-wrap; margin:0; }
.doc-page.txt{ background:#fcfcfa; }

.xls{ border:1px solid #b7c2ad; border-radius:6px; overflow:hidden; margin:6px 2px;
  box-shadow:0 8px 24px -14px rgba(0,0,0,.3); background:#fff; font-family:var(--ui); }
.xls-fbar{ display:flex; align-items:center; gap:8px; background:#f3f5f2;
  border-bottom:1px solid #cdd6c6; padding:5px 8px; font-size:11px; color:#3a4650; }
.xls-ref{ min-width:34px; text-align:center; background:#fff; border:1px solid #cdd6c6;
  border-radius:3px; padding:2px 4px; font-weight:700; }
.xls-fx{ color:#1e7d46; font-weight:700; }
.xls-val{ color:#55606b; }
.xls-scroll{ overflow:auto; max-height:330px; }
.xls-grid{ border-collapse:collapse; width:100%; font-size:11.5px; color:#233; }
.xls-grid th, .xls-grid td{ border:1px solid #d8dcd3; padding:5px 9px; text-align:left; white-space:nowrap; }
.xls-grid th{ background:#eef1ea; color:#5a6555; font-weight:700; text-align:center; min-width:22px; }
.xls-colhead th{ background:#e3e8dd; height:20px; }
.xls-corner{ background:#dbe1d4 !important; }
.xls-grid td.hd{ font-weight:700; color:#1f2a37; background:#f7f9f4; }
.xls-grid td.bad{ color:#9c3322; font-weight:700; background:#fbeeec; }
.xls-sum td, .xls-sum th{ background:#eaf3ec; }
.xls-tabs{ display:flex; gap:2px; background:#eef1ea; border-top:1px solid #cdd6c6; padding:4px 6px; }
.xls-tab{ font-size:10.5px; padding:3px 12px; border:1px solid transparent; border-radius:4px 4px 0 0; color:#5a6555; }
.xls-tab.active{ background:#fff; border-color:#cdd6c6; border-bottom-color:#fff; color:#1e7d46; font-weight:700; }
/* meeting-minutes items - flag sits BESIDE the text */
.mtg-list{ list-style:none; margin:8px 0 0; padding:0; }
.mtg-item{ display:flex; align-items:flex-start; gap:12px; padding:11px 2px;
  border-bottom:1px dashed #e2e6ea; }
.mtg-item:last-child{ border-bottom:none; }
/* .mtg-flag wraps BOTH the flag button and the text, so it has to be free to
   shrink. As flex:0 0 auto it sized to its content and pushed the text
   straight out of the page. min-width:0 is what actually lets it wrap. */
.mtg-flag{ flex:1 1 auto; min-width:0; padding-top:1px; }
.mtg-text{
  display:block; min-width:0;
  font-size:12.5px; line-height:1.55; color:#2b3742;
  overflow-wrap:anywhere;
}
/* spreadsheet findings-summary panel */
.xls-summary{ border-top:1px solid #cdd6c6; background:#fbfdf9; padding:12px 14px;
  font-family:var(--type); font-size:12px; line-height:1.6; color:#2b3742; }
.xls-summary > b{ display:block; font:800 12px/1.2 var(--ui); letter-spacing:.04em;
  color:#1e7d46; text-transform:uppercase; margin-bottom:6px; }
.xls-summary p{ margin:0 0 6px; }
.xls-summary .xls-flag{ color:#9c3322; font-weight:600; }

/* =========================================================================
   BUTTONS - teal palette everywhere (no red action buttons)
   Appended last so it overrides the earlier red .btn definitions.
   ========================================================================= */
.btn{
  background:linear-gradient(180deg, var(--teal), var(--teal-deep));
  box-shadow:0 6px 14px -5px rgba(23,107,101,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn:hover{ box-shadow:0 8px 18px -5px rgba(23,107,101,.7), inset 0 1px 0 rgba(255,255,255,.28); }
.btn:active{ box-shadow:0 3px 8px -4px rgba(23,107,101,.6), inset 0 1px 0 rgba(255,255,255,.2); }

.btn.red{
  background:linear-gradient(180deg, var(--teal), var(--teal-deep));
  box-shadow:0 6px 14px -4px rgba(23,107,101,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.red:hover{ box-shadow:0 8px 18px -5px rgba(23,107,101,.7), inset 0 1px 0 rgba(255,255,255,.28); }
.btn.red:active{ box-shadow:0 3px 8px -4px rgba(23,107,101,.6), inset 0 1px 0 rgba(255,255,255,.2); }

/* chunky CTA (e.g. "Examine Laptop →") */
.btn.btn-cta{
  background:var(--teal-deep);
  box-shadow:0 7px 0 #0f4f4a, 0 8px 14px -6px rgba(10,50,45,.55), inset 0 0 0 rgba(255,255,255,.65);
}
.btn.btn-cta:hover{ box-shadow:0 7px 0 #0f4f4a, 0 12px 20px -6px rgba(10,50,45,.6), inset 0 0 0 rgba(255,255,255,.65); }
.btn.btn-cta:active{ box-shadow:0 2px 0 #0f4f4a, 0 6px 12px -5px rgba(10,50,45,.5), inset 0 0 0 rgba(255,255,255,.65); }

/* the "go" arrow on the objectives page */
.page-arrow.go{
  background:var(--teal-deep); color:#eafaf7;
  box-shadow:0 3px 0 #0f4f4a, 0 8px 14px -6px rgba(10,50,45,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.page-arrow.go:hover{ box-shadow:0 6px 0 #0f4f4a, 0 14px 22px -6px rgba(10,50,45,.6), inset 0 1px 0 rgba(255,255,255,.5); }
.page-arrow.go:active{ box-shadow:0 0 0 #0f4f4a, 0 6px 12px -4px rgba(10,50,45,.5), inset 0 1px 0 rgba(255,255,255,.5); }

/* ghost buttons stay outlined (higher specificity already, listed for clarity) */
.btn.ghost{ background:transparent; box-shadow:none; }

/* locked "Write to Officer X" until the case is solved perfectly */
.btn.locked, .btn:disabled{
  background:linear-gradient(180deg,#8fa0a6,#6f8087);
  box-shadow:none; cursor:not-allowed; filter:none; opacity:.85;
}
.verdict-lock-note{
  margin:10px 0 0; font:600 11.5px/1.5 var(--ui); color:var(--kraft);
  text-align:center; max-width:44ch; margin-left:auto; margin-right:auto;
}

/* ==========================================
   MANILA FOLDER CORNER PEEK & MODAL
   ========================================== */

/* Manila Corner Tab */
.manila-folder-corner {
  position: absolute;
  top: 0;
  left: clamp(18px, 5vw, 70px);
  z-index: 105;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.manila-folder-corner:hover { transform: translateY(7px); }
.manila-folder-corner:active { transform: translateY(3px); }

.manila-tab {
  position: relative;
  left:220%;
  background: linear-gradient(180deg, #f0dcae 0%, #e5c98c 60%, #d9ba76 100%);
  border: 2px solid #b89248;
  border-top: none;                      /* hangs from the top edge */
  border-radius: 0 0 10px 10px;
  padding: 9px 20px 11px 16px;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.45),
  inset 0 -1px 0 rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.85rem;
  font-weight: bold;
  color: #3d2b0f;
  user-select: none;
}
/* coloured index strip down the left, like a real file tab */
.manila-tab::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, var(--teal), var(--teal-deep));
  border-radius: 0 0 0 8px;
}
/* little "pull me" grip at the bottom edge */
.manila-tab::after {
  content: "";
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 2px;
  background: rgba(90, 66, 20, .30);
}

.manila-stamp {
  background: var(--teal-deep);
  color: #eafaf7;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* the tab's file-number label (previously had no styling at all) */
.manila-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3d2b0f;
}

/* Modal Overlay */
.manila-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 999;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.manila-modal-overlay.active {
  display: flex;
  animation: fadeIn 0.2s ease-out forwards;
}

/* Manila Document Container */
.manila-file-document {
  background: #f7e8c4;
  background-image: linear-gradient(to bottom, #faedd0, #f2e1b6);
  border: 2px solid #b38e42;
  border-radius: 10px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(184, 146, 72, 0.15);
  position: relative;
  padding: 30px;
  box-sizing: border-box;
  font-family: 'Courier Prime', monospace;
  color: #2c2211;
  animation: slideUp 0.25s ease-out forwards;
}

.manila-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #c0392b;
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: bold;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.15s;
}

.manila-close-btn:hover {
  background: #a93226;
}

.manila-top-tab {
  display: inline-block;
  background: #d1a553;
  color: #3b280a;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 3px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.manila-confidential-stamp {
  position: absolute;
  top: 25px;
  right: 60px;
  border: 3px solid #b03a2e;
  color: #b03a2e;
  font-size: 1.1rem;
  font-weight: 900;
  padding: 4px 12px;
  text-transform: uppercase;
  transform: rotate(-8deg);
  opacity: 0.85;
  pointer-events: none;
}

.manila-doc-header h2 {
  margin: 10px 0 4px 0;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
  color: #211606;
}

.manila-meta {
  font-size: 0.75rem;
  color: #665231;
  border-bottom: 2px dashed #c2a366;
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.manila-section {
  margin-bottom: 20px;
}

.manila-section h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 8px;
  color: #423013;
  border-bottom: 1px solid #d8bd87;
  padding-bottom: 4px;
}

.manila-section p, .manila-section ul {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 6px 0;
}

.manila-section ul {
  padding-left: 20px;
  list-style: none;
}
/* typewriter-style bullets */
.manila-section ul li {
  position: relative;
  padding-left: 4px;
  margin-bottom: 7px;
}
.manila-section ul li::before {
  content: "▸";
  position: absolute; left: -14px; top: 0;
  color: var(--teal-deep);
  font-weight: 700;
}

/* --- the text styles that were missing: emphasis inside the file --- */
.manila-file-document strong {
  color: #7a2f1f;
  font-weight: 700;
}
.manila-file-document em {
  font-style: normal;
  background: rgba(31, 138, 130, .14);
  border-bottom: 1px solid rgba(23, 107, 101, .45);
  padding: 0 3px;
  border-radius: 2px;
  color: #12564f;
  font-weight: 700;
}

/* small "figures under scrutiny" table */
.manila-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 2px;
  font-size: 0.82rem;
}
.manila-table th, .manila-table td {
  border: 1px solid #d8bd87;
  padding: 6px 9px;
  text-align: left;
  vertical-align: top;
}
.manila-table th {
  background: rgba(184, 146, 72, .22);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
  color: #4a3616;
}
.manila-table td.claimed { color: #7a2f1f; font-weight: 700; }
.manila-table td.actual  { color: #12564f; font-weight: 700; }

.manila-checklist li {
  margin-bottom: 6px;
}

.manila-doc-footer {
  margin-top: 25px;
  padding-top: 10px;
  border-top: 2px dashed #c2a366;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #7a633c;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =========================================================================
   NEW COMPONENTS  (v3 rework)
   Psst tab · AI prompt breadcrumb · approved minutes · Pear AI sessions ·
   verdict clue coach · cutscene · key-takeaway picker
   ========================================================================= */

/* --- folder tab: the "Psst" tab leans in a little ----------------------- */
.ptab-psst{ font-style:italic; letter-spacing:.04em; }
.ptab-psst.active{ color:var(--red-deep); }

/* the callout on the Psst page: cream paper instead of the dark ink block,
   so it needs its own dark text colour (the base rule paints text cream) */
.briefing .objective.psst{
  background:linear-gradient(180deg,#fff8e6,#fdf0d4);
  color:#3b3221;
  border:1px solid rgba(138,111,55,.35);
  border-left:5px solid var(--brass-lo);
  font-style:normal;
}
.briefing .objective.psst b{ color:var(--red-deep); }

/* --- AI prompt breadcrumb inside the generated meeting summary ---------- */
.ai-prompt-box{
  margin:12px 0 14px;
  padding:10px 12px;
  border:1px dashed #b9a37a;
  border-radius:5px;
  background:rgba(201,169,97,.09);
}
.apb-head{
  font:700 8.5px/1 var(--display), sans-serif;
  letter-spacing:.2em; text-transform:uppercase;
  color:#8a7346; margin-bottom:6px;
}
.apb-text{
  font:400 12px/1.55 var(--type), monospace;
  color:#3b3221; font-style:italic; margin:0 0 7px;
}
.apb-foot{ display:flex; }
.apb-none{
  font:700 9.5px/1.3 var(--ui), sans-serif;
  letter-spacing:.04em;
  color:#9c3322;
  background:rgba(156,51,34,.09);
  border:1px solid rgba(156,51,34,.28);
  border-radius:3px;
  padding:3px 7px;
}
/* the green counterpart: this is what good AI provenance looks like */
.apb-ok{
  font:700 9.5px/1.3 var(--ui), sans-serif;
  letter-spacing:.04em;
  color:#1f6b4a;
  background:rgba(31,107,74,.09);
  border:1px solid rgba(31,107,74,.28);
  border-radius:3px;
  padding:3px 7px;
}

/* the trail line under the research findings: he opened this, then published
   the opposite the next day */
.xls-trail{
  margin-top:8px;
  padding-top:7px;
  border-top:1px dashed #c9bfa8;
  font:400 11px/1.5 var(--ui), sans-serif;
  color:#7a2a22;
}
.xls-trail b{ color:#9c3322; }

/* --- APPROVED MEETING MINUTES ------------------------------------------ */
.doc-subline{
  font:400 11px/1.4 var(--type), monospace;
  color:#6d6154; font-style:italic;
  margin:-4px 0 14px;
}
.mins-head{
  width:100%; border-collapse:collapse; margin:0 0 18px;
  font:400 11.5px/1.5 var(--ui), sans-serif;
}
.mins-head th{
  text-align:left; vertical-align:top;
  width:104px; padding:4px 10px 4px 0;
  font-weight:700; color:#5d5140;
  letter-spacing:.02em;
}
.mins-head td{ padding:4px 0; color:#2b2620; }
.mins-head tr + tr th, .mins-head tr + tr td{ border-top:1px solid #e6dcc6; }

.mins-list{ margin:0 0 16px; padding-left:22px; }
.mins-list li{
  font:400 12px/1.65 var(--ui), sans-serif;
  color:#2b2620; margin-bottom:6px;
}

.mins-actions{
  width:100%; border-collapse:collapse; margin:0 0 18px;
  font:400 11px/1.45 var(--ui), sans-serif;
}
.mins-actions th{
  text-align:left; padding:6px 8px;
  background:#efe6d0; color:#4a4133;
  font-weight:700; letter-spacing:.04em;
  border:1px solid #ded2b6;
}
.mins-actions td{
  padding:6px 8px; color:#2b2620;
  border:1px solid #e6dcc6; vertical-align:top;
}
.mins-actions tr td:first-child{ width:38px; white-space:nowrap; }

.mins-signoff{
  display:flex; gap:36px; flex-wrap:wrap;
  margin:26px 0 8px;
}
.mins-signoff > div{ display:flex; flex-direction:column; min-width:150px; }
.ms-rule{
  display:block; height:1px; width:100%;
  background:#8a7c64; margin-bottom:5px;
}
.mins-signoff b{ font:700 11.5px/1.3 var(--ui), sans-serif; color:#2b2620; }
.mins-signoff em{
  font:400 9.5px/1.3 var(--ui), sans-serif;
  color:#7a6d59; font-style:normal;
  letter-spacing:.08em; text-transform:uppercase;
}

/* --- PEAR AI: session dividers + the "nothing attached" chip ------------ */
.halo-session{
  display:flex; align-items:center; gap:10px;
  margin:18px 0 14px;
}
.halo-session .hs-line{
  flex:1 1 auto; height:1px;
  background:linear-gradient(90deg,transparent,#cfd6de,transparent);
}
.halo-session .hs-tag{
  flex:0 0 auto;
  font:700 9.5px/1 var(--ui), sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
  color:#7d8b99;
  background:#eef2f6;
  border:1px solid #dde4ec;
  border-radius:999px;
  padding:5px 12px;
  white-space:nowrap;
}
/* a fresh chat with nothing in it is the whole point of beat 2 */
.halo-session.new .hs-tag{
  color:#9c3322;
  background:#fdeeea;
  border-color:#f0c8bd;
}
.halo-session.new .hs-line{
  background:linear-gradient(90deg,transparent,#f0c8bd,transparent);
}


/* --- VERDICT: the clue column, and the nudge to actually read it -------- */
/* Solid amber bar, not a tint. The old version was a translucent yellow
   panel sitting inside an already-yellow column, so it read as part of the
   background exactly when it most needed to be read. */
.vcol-coach{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px; padding:12px 14px;
  border-radius:8px;
  background:linear-gradient(180deg,#ffd45e,#e8a91f);
  border:none;
  box-shadow:0 4px 14px -4px rgba(255,180,40,.55), inset 0 1px 0 rgba(255,255,255,.5);
  animation:vccPulse 1.9s ease-in-out infinite;
}
@keyframes vccPulse{
  0%,100%{ box-shadow:0 4px 14px -4px rgba(255,180,40,.5), inset 0 1px 0 rgba(255,255,255,.5); }
  50%{ box-shadow:0 6px 22px -2px rgba(255,190,60,.85), inset 0 1px 0 rgba(255,255,255,.5); }
}
.vcc-arrow{ font-size:17px; color:#3a2a05; line-height:1.2; flex:0 0 auto; animation:vccBob 1.1s ease-in-out infinite; }
@keyframes vccBob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(3px); }
}
.vcc-text{
  font:700 12px/1.45 var(--ui), sans-serif;
  color:#3a2a05;
}
/* brief glow so the eye lands on the clue column on every submit */
.vcol.attn{ animation:vcolAttn 1.1s ease-in-out 3; }
@keyframes vcolAttn{
  0%,100%{ box-shadow:0 0 0 0 rgba(244,201,72,0); }
  50%{ box-shadow:0 0 0 4px rgba(244,201,72,.34); }
}
.vitem.miss.clue{ border-left-width:4px; }
.vitem.miss.clue b{ color:var(--red-deep); letter-spacing:.04em; }

/* --- CUTSCENE ----------------------------------------------------------- */
body.cutscene-open{ overflow:hidden; }

#cutscene{
  position:fixed; inset:0; z-index:120;
  display:none;
  align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(201,169,97,.10), transparent 65%),
    rgba(6,6,4,.96);
  backdrop-filter:blur(3px);
}
#cutscene.on{ display:flex; animation:fadeIn .45s ease both; }

.cs-stage{
  width:min(940px,100%);
  max-height:100%;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:16px;
}
.cs-head{ text-align:center; }
.cs-kicker{
  font:700 9.5px/1 var(--display), sans-serif;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--brass-lo);
}
.cs-title{
  font:700 clamp(21px,3.4vw,32px)/1.15 var(--display), sans-serif;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--manila);
  margin-top:7px;
}
.cs-screen{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:8px;
  overflow:hidden;
  background:#0a0a07;
  border:1px solid rgba(201,169,97,.3);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.9), inset 0 0 60px rgba(0,0,0,.6);
}
.cs-screen video{ width:100%; height:100%; object-fit:contain; display:block; background:#0a0a07; }
/* no cutscene.mp4 in place yet: collapse the player and let the beats carry it */
.cs-screen.no-video{
  aspect-ratio:auto;
  height:0;
  border:none;
  box-shadow:none;
}

.cs-caps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
}
.cs-beat{
  display:flex; gap:10px;
  padding:11px 13px;
  border-radius:8px;
  background:rgba(232,208,154,.06);
  border:1px solid var(--smoke-line);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease;
}
.cs-beat.show{ opacity:1; transform:none; }
.cs-n{
  flex:0 0 auto;
  width:21px; height:21px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--brass-lo); color:#12100a;
  font:800 11px/1 var(--display), sans-serif;
}
.cs-beat b{
  display:block;
  font:700 11.5px/1.3 var(--ui), sans-serif;
  letter-spacing:.04em;
  color:var(--brass-hi);
  margin-bottom:3px;
}
.cs-beat p{
  font:400 11.5px/1.55 var(--ui), sans-serif;
  color:#cfc5ad; margin:0;
}
.cs-foot{ display:flex; justify-content:center; align-items:center; padding-bottom:4px; min-height:46px; }

/* Continue is hidden until the clip has played through, so the
   reconstruction cannot be clicked past. A quiet holding line sits in its
   place meanwhile, so the footer does not look broken or empty. */
.cs-foot .btn{ display:none; }
.cs-wait{
  font:600 11px/1 var(--ui), sans-serif;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-lo);
  opacity:.85;
  animation:csWait 1.8s ease-in-out infinite;
}
@keyframes csWait{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } }

.cs-foot.ready .cs-wait{ display:none; }
.cs-foot.ready .btn{
  display:inline-block;
  animation:csReveal .45s cubic-bezier(.2,.9,.2,1) both, csReady 1.4s ease-in-out 1.5s infinite;
}
@keyframes csReveal{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
@keyframes csReady{
  0%,100%{ box-shadow:0 6px 0 var(--teal-deep), 0 10px 18px rgba(0,0,0,.35); }
  50%{ box-shadow:0 6px 0 var(--teal-deep), 0 10px 26px rgba(201,169,97,.55); }
}

/* --- EMAIL BODY RHYTHM -------------------------------------------------- */
/* the reading pane was one unbroken block; these give the list and the
   sign-off room to breathe so the eye finds the structure */
.mr-body ol, .mr-body ul{ margin:12px 0 14px; }
.mr-body li{ margin-bottom:5px; }
.mr-close{ display:block; margin-top:14px; }
.mr-signoff{ display:block; margin-top:16px; line-height:1.7; }

/* --- YOUR RESULT (congrats screen, above the board) --------------------- */
.my-result{
  width:min(460px,100%);
  margin:0 0 14px;
  padding:16px 18px 14px;
  border-radius:10px;
  text-align:center;
  background:linear-gradient(180deg,#2b2519 0%,#191509 100%);
  border:1px solid rgba(201,169,97,.34);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.8);
}
.mr-rank{
  font:800 clamp(20px,3vw,28px)/1.1 var(--display), sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-hi);
}
.mr-meaning{
  font:400 11.5px/1.5 var(--ui), sans-serif;
  color:#b6ab93; margin-top:5px;
}
.mr-time{
  margin-top:11px; padding-top:10px;
  border-top:1px solid rgba(201,169,97,.2);
  display:flex; align-items:baseline; justify-content:center; gap:9px;
}
.mr-time span{
  font:700 9.5px/1 var(--ui), sans-serif;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brass-lo);
}
.mr-time b{ font:700 19px/1 var(--type), monospace; color:var(--manila); letter-spacing:1px; }
/* a clean sweep first time earns the gold treatment */
.my-result.top{ border-color:#ffd45e; box-shadow:0 14px 34px -16px rgba(255,212,94,.35); }
.my-result.top .mr-rank{ color:#ffd45e; }

/* --- SCOREBOARD OPT-IN (congrats screen) -------------------------------- */
.sb-optin{
  width:min(460px,100%);
  margin:0 0 18px;
  padding:16px 18px;
  border-radius:10px;
  text-align:center;
  background:linear-gradient(180deg,#252118 0%,#17140d 100%);
  border:1px solid rgba(201,169,97,.32);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.8);
  animation:slideUp .4s cubic-bezier(.2,.9,.2,1) both;
}
.sbo-line{
  font:600 13px/1.5 var(--ui), sans-serif;
  color:#c9bfa6; margin:0 0 2px;
}
.sbo-line b{ color:var(--brass-hi); }
.sbo-ask{
  font:700 14px/1.4 var(--display), sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--manila); margin:0 0 14px;
}
.sbo-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.sbo-actions .btn{ padding:10px 18px; font-size:.85rem; }

.sb-optin-done.failed{ color:#e3a094; }
.sb-optin-done{
  font:600 11px/1.4 var(--ui), sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-lo);
  margin:0 0 14px;
}

/* --- SOUND TOGGLE ------------------------------------------------------- */
#mute-toggle{
  position:fixed; left:14px; bottom:14px; z-index:140;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(28,25,18,.78);
  border:1px solid rgba(201,169,97,.34);
  box-shadow:0 4px 14px rgba(0,0,0,.5);
  cursor:pointer;
  opacity:.55;
  transition:opacity .18s ease, transform .18s ease, background .18s ease;
}
#mute-toggle:hover{ opacity:1; transform:translateY(-2px); background:rgba(40,36,26,.92); }
#mute-toggle .mt-ico{ font-size:15px; line-height:1; }
#mute-toggle.muted{ border-color:rgba(193,70,47,.5); }
#mute-toggle.muted .mt-ico{ filter:grayscale(1); }
@media (max-width:640px){
  #mute-toggle{ width:32px; height:32px; left:10px; bottom:10px; }
}

/* --- KEY TAKEAWAY PICKER ------------------------------------------------ */
#takeaways{
  position:fixed; inset:0; z-index:121;
  display:none;
  align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(201,169,97,.10), transparent 65%),
    rgba(6,6,4,.95);
  backdrop-filter:blur(3px);
}
#takeaways.on{ display:flex; animation:fadeIn .35s ease both; }

.tk-stage{
  width:min(760px,100%);
  max-height:100%;
  display:flex; flex-direction:column;
  padding:24px 24px 20px;
  border-radius:12px;
  background:linear-gradient(180deg,#252118 0%,#15130d 100%);
  border:1px solid rgba(201,169,97,.3);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9);
  animation:slideUp .4s cubic-bezier(.2,.9,.2,1) both;
}
.tk-kicker{
  font:700 9.5px/1 var(--display), sans-serif;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--brass-lo);
}
.tk-title{
  font:700 clamp(19px,2.8vw,26px)/1.2 var(--display), sans-serif;
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--manila); margin:7px 0 6px;
}
.tk-sub{
  font:400 12px/1.6 var(--ui), sans-serif;
  color:#b9ae95; margin:0 0 14px;
}
.tk-sub b{ color:var(--brass-hi); }

/* two columns, so eight options read as four short rows instead of a wall */
.tk-list{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-content:start;
  gap:8px;
  padding-right:4px;
}
@media (max-width:720px){
  .tk-list{ grid-template-columns:1fr; }
}
.tk-list::-webkit-scrollbar{ width:8px; }
.tk-list::-webkit-scrollbar-thumb{ background:rgba(201,169,97,.3); border-radius:8px; }

.tk-item{
  position:relative;
  display:grid;
  grid-template-columns:20px 1fr;
  align-items:start;
  gap:11px;
  padding:12px 14px;
  border-radius:8px;
  cursor:pointer;
  background:rgba(232,208,154,.05);
  border:1px solid var(--smoke-line);
  transition:background .16s ease, border-color .16s ease, opacity .16s ease;
}
.tk-item:hover{ background:rgba(232,208,154,.1); }
.tk-item input{ position:absolute; opacity:0; pointer-events:none; }
.tk-box{
  width:18px; height:18px; margin-top:1px;
  border-radius:4px;
  border:1.5px solid rgba(201,169,97,.5);
  background:rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  transition:background .16s ease, border-color .16s ease;
}
.tk-box::after{
  content:"\2713";
  font-size:12px; font-weight:800; line-height:1;
  color:#12100a; opacity:0; transform:scale(.5);
  transition:opacity .16s ease, transform .16s ease;
}
/* headline first, detail underneath: the list is skimmable by headline */
.tk-copy{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.tk-title{
  font:700 12px/1.3 var(--ui), sans-serif;
  letter-spacing:.01em;
  color:var(--brass-hi);
}
.tk-text{
  font:400 11.5px/1.5 var(--ui), sans-serif;
  color:#c3b9a2;
}
.tk-item.on .tk-title{ color:#fff3d8; }
.tk-item.on .tk-text{ color:#ded5c0; }
.tk-item.on{ background:rgba(201,169,97,.16); border-color:rgba(201,169,97,.55); }
.tk-item.on .tk-box{ background:var(--brass); border-color:var(--brass-hi); }
.tk-item.on .tk-box::after{ opacity:1; transform:scale(1); }
.tk-item.off{ opacity:.42; cursor:not-allowed; }
.tk-item.off:hover{ background:rgba(232,208,154,.05); }

/* a wrong set shakes the whole list, never an individual row: which of the
   five was wrong is exactly what they have to work out for themselves */
.tk-list.shake{ animation:tkShake .34s ease; }
@keyframes tkShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}

.tk-note{
  margin:12px 0 0;
  font:600 11.5px/1.5 var(--ui), sans-serif;
  color:#e3a094;
  text-align:center;
}
.tk-note:empty{ display:none; }

.tk-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--smoke-line);
}
.tk-count{
  font:700 11px/1 var(--ui), sans-serif;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--brass);
}
#tk-go:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

@media (max-width:640px){
  .cs-caps{ grid-template-columns:1fr; }
  .tk-stage{ padding:18px 16px 16px; }
}

/* --- GOPHISH PROMO EMAIL ------------------------------------------------ */
.gophish-edm{ display:block; margin:14px 0; }
.gophish-edm img{
  display:block; width:100%; max-width:420px; height:auto;
  border-radius:6px; border:1px solid var(--os-line);
}
.gophish-link{
  display:inline-block; margin-top:2px;
  padding:9px 18px; border-radius:4px;
  background:var(--teal); color:#fff;
  font:700 12px/1 var(--ui), sans-serif;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  box-shadow:0 3px 0 var(--teal-deep);
}
.gophish-link:hover{ background:var(--teal-deep); }

/* the CIO's parting shot sits apart from the sign-off */
.mr-ps{
  display:block; margin-top:14px; padding-top:10px;
  border-top:1px solid var(--os-line);
  font-size:.95em; color:var(--os-mut); font-style:italic;
}


/* --- GOGGLES SEARCH SUGGESTIONS ----------------------------------------
   Drops out of the search field on focus, the way a real search box does,
   instead of parking Officer X's history on the page as chips. */
.gg-suggest{
  position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:30;
  background:#fff;
  border:1px solid #dde4ec;
  border-radius:12px;
  box-shadow:0 10px 26px -10px rgba(20,40,70,.35);
  overflow:hidden;
  text-align:left;
}
.gg-sug{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 12px; border:none; background:none; cursor:pointer;
  font:400 12.5px/1.3 var(--ui), sans-serif; color:#243444;
  text-align:left;
}
.gg-sug + .gg-sug{ border-top:1px solid #f0f3f7; }
.gg-sug:hover{ background:#f2f6fb; }
.gg-sug-ic{ flex:0 0 auto; width:14px; text-align:center; color:#8fa2b5; font-size:12px; }
.gg-sug-q{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gg-sug-tag{
  flex:0 0 auto;
  font:600 9px/1 var(--ui), sans-serif;
  letter-spacing:.1em; text-transform:uppercase; color:#9bacbd;
}

/* --- GOGGLES: verifyAI TOOL CARD + RECOMMENDED READING ------------------
   The tool card is deliberately loud. Finding the fabricated citations
   depends on someone noticing this, so it reads as a call to action rather
   than a bookmark. */
.gg-tool-card{
  display:flex; align-items:center; gap:11px;
  width:100%; max-width:340px; margin:0 auto 14px;
  padding:11px 13px;
  text-align:left; cursor:pointer;
  background:linear-gradient(180deg,#f4f5ff,#e9ebff);
  border:1px solid #c9ccff;
  border-radius:10px;
  box-shadow:0 2px 0 #d5d8ff;
  transition:background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.gg-tool-card:hover{
  background:linear-gradient(180deg,#eef0ff,#dfe2ff);
  transform:translateY(-1px);
  box-shadow:0 4px 10px -4px rgba(74,63,214,.35);
}
.ggt-ico{ flex:0 0 auto; font-size:19px; line-height:1; }
.ggt-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ggt-txt b{ font:800 12.5px/1.2 var(--ui), sans-serif; color:#3a31b8; letter-spacing:.01em; }
.ggt-txt em{ font:400 10.5px/1.35 var(--ui), sans-serif; color:#6a6ba8; font-style:normal; }
.ggt-go{
  flex:0 0 auto;
  font:700 10px/1 var(--ui), sans-serif;
  letter-spacing:.1em; text-transform:uppercase; color:#4a3fd6;
}

.gg-rec-head{
  font:700 9.5px/1 var(--ui), sans-serif;
  letter-spacing:.18em; text-transform:uppercase; color:#8fa2b5;
  margin:0 0 10px;
}
/* real outbound links in the reading list, styled like search hits */
.gg-res a[href]{ text-decoration:none; }
.gg-res a[href]:hover{ text-decoration:underline; }
.gg-res a[href]::after{
  content:"↗"; font-size:9px; margin-left:4px; color:#8fa2b5; vertical-align:super;
}

/* =========================================================================
   SCOREBOARD PODIUM
   Top three stand on plinths with their own badge photo floating above,
   no frame around the face. Rendered in the noir palette rather than the
   bright cartoon style of the reference, so it sits with the rest.
   ========================================================================= */
.sb-podium{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  align-items:end;
  gap:6px;
  margin:4px 0 16px;
}
.pod{ display:flex; flex-direction:column; align-items:center; min-width:0; }

/* the face hovers: no box, just a soft shadow so it sits above the plinth */
.pod-face{
  width:52px; height:52px; border-radius:50%;
  object-fit:cover; object-position:center top;
  background:#fff;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));
  margin-bottom:6px;
}
.pod-face-fallback{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#4a4030,#2c2519);
  color:var(--brass-hi);
  font:800 20px/1 var(--display), sans-serif;
}
.pod-1 .pod-face{ width:66px; height:66px; }

.pod-name{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:700 11.5px/1.2 var(--ui), sans-serif; color:var(--manila);
  margin-bottom:3px;
}
.pod-title{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:2px 7px; border-radius:999px; margin-bottom:7px;
  font:800 7px/1.3 var(--display), sans-serif;
  letter-spacing:.16em; text-transform:uppercase;
  color:#d8cdb4;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.18));
  border:1px solid rgba(201,169,97,.24);
}
.pod-title.t5{ color:#2a1e05; background:linear-gradient(180deg,#ffe89a,#c9922b); border-color:#ffeaa8; }
.pod-title.t4{ color:#22262b; background:linear-gradient(180deg,#f2f5f8,#9aa6b1); border-color:#f4f7fa; }
.pod-title.t3{ color:#2b1608; background:linear-gradient(180deg,#e6a877,#96552a); border-color:#efbe93; }

/* plinths, tallest in the middle */
.pod-plinth{
  width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:2px; padding:7px 4px 8px;
  border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg, rgba(232,208,154,.14), rgba(232,208,154,.04));
  border:1px solid var(--smoke-line);
  border-bottom:none;
}
.pod-1 .pod-plinth{ min-height:74px; background:linear-gradient(180deg, rgba(255,212,94,.22), rgba(255,212,94,.05)); border-color:rgba(255,212,94,.4); }
.pod-2 .pod-plinth{ min-height:56px; }
.pod-3 .pod-plinth{ min-height:44px; }

.pod-place{ font:800 20px/1 var(--display), sans-serif; color:var(--brass); }
.pod-1 .pod-place{ font-size:26px; color:#ffd45e; }
.pod-time{ font:700 11px/1 var(--type), monospace; color:#cbbfa6; letter-spacing:.5px; }
.pod-me .pod-name{ color:#ffd45e; }

/* the slide-in panel is narrow, so scale the podium down inside it */
#scoreboard .pod-face{ width:44px; height:44px; }
#scoreboard .pod-1 .pod-face{ width:54px; height:54px; }
#scoreboard .pod-place{ font-size:17px; }
#scoreboard .pod-1 .pod-place{ font-size:21px; }

/* a dropped image inside a chat bubble */
.chat-meme{
  display:block; margin-top:7px;
  max-width:190px; width:100%; height:auto;
  border-radius:8px; border:1px solid rgba(0,0,0,.12);
}

/* =========================================================================
   HELP PHONE  (laptop scene, beside the evidence log)
   An iPhone on the desk running a WhatsApp-ish thread with the C.H.A.O.S
   squad. Only visible while investigating.
   ========================================================================= */

/* the nudge, which stops pestering once they have used it */
@keyframes pnBob{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-5px); } }

.ip-island{
  position:absolute; top:13px; left:50%; transform:translateX(-50%);
  width:56px; height:15px; border-radius:999px; background:#000; z-index:3;
}
.ip-screen{
  width:100%; height:100%; border-radius:24px; overflow:hidden;
  background:#ece5dd;                       /* the familiar chat paper */
  display:flex; flex-direction:column;
}
.ip-bar{
  flex:0 0 auto; display:flex; justify-content:space-between; align-items:center;
  padding:9px 16px 4px; background:#075e54; color:#fff;
  font:700 11px/1 var(--ui), sans-serif;
}
.ip-sig{ width:15px; height:8px; border-radius:1px; background:rgba(255,255,255,.85); }
.ip-head{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:6px 11px 9px; background:#075e54; color:#fff;
}
.ip-av{
  width:32px; height:32px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:#25d366; color:#07443d;
  font:800 12px/1 var(--ui), sans-serif;
}
.ip-who{ display:flex; flex-direction:column; min-width:0; }
.ip-who b{ font:700 13.5px/1.2 var(--ui), sans-serif; }
.ip-who em{ font:400 10.5px/1.2 var(--ui), sans-serif; font-style:normal; color:#a9d6cf; }

.ip-thread{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:12px 11px 6px;
  display:flex; flex-direction:column; gap:9px;
  background:#ece5dd;
}
.ip-day{
  align-self:center; padding:3px 11px; border-radius:6px;
  background:rgba(0,0,0,.07); color:#5a6b66;
  font:600 9.5px/1.3 var(--ui), sans-serif; text-transform:uppercase; letter-spacing:.1em;
}
.ip-empty{
  margin:auto 6px; text-align:center; color:#7b8b86;
  font:400 12px/1.55 var(--ui), sans-serif;
}
.ip-msg{
  max-width:86%; padding:9px 12px; border-radius:10px;
  font:400 13px/1.5 var(--ui), sans-serif; color:#111b21;
  box-shadow:0 1px 1px rgba(0,0,0,.13);
  animation:ipIn .22s ease both;
}
@keyframes ipIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.ip-msg.them{ align-self:flex-start; background:#fff; border-top-left-radius:2px; }
.ip-msg.me{ align-self:flex-end; background:#d9fdd3; border-top-right-radius:2px; }
.ip-from{
  display:block; margin-bottom:3px;
  font:700 11px/1.2 var(--ui), sans-serif; color:#128c7e;
}
.ip-msg.sticker{ background:none; box-shadow:none; padding:0; max-width:56%; }
.ip-msg.sticker img{ width:100%; height:auto; display:block; }

/* the three-dot typing indicator */
.ip-dots{ display:inline-flex; gap:3px; padding:2px 0; }
.ip-dots i{
  width:5px; height:5px; border-radius:50%; background:#9fb0ab;
  animation:ipDot 1s ease-in-out infinite;
}
.ip-dots i:nth-child(2){ animation-delay:.15s; }
.ip-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes ipDot{ 0%,100%{ opacity:.35; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-3px);} }

.ip-composer{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  padding:7px 9px; background:#f0f2f5;
}
.ip-input{
  flex:1 1 auto; padding:6px 10px; border-radius:999px; background:#fff;
  font:400 9.5px/1.2 var(--ui), sans-serif; color:#8696a0;
}
.ip-send{
  width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:#25d366; color:#fff; font-size:10px;
}

/* short screens: shrink rather than overlap the notebook */
@media (max-height:820px){
  .iphone{ width:158px; height:318px; }
  .ip-msg{ font-size:9.8px; }
}
@media (max-height:700px){
  .phone-dock{ transform:scale(.82); transform-origin:bottom right; }
}

/* =========================================================================
   HELP PHONE
   Dormant beside the evidence log, opens full-size in the centre. A
   permanently-visible handset could not work: .lab caps at 1320px, so at
   1366 there is almost no side margin and it collided with the notebook.
   ========================================================================= */
/* Dormant: an actual handset lying face-up on the desk, screen off, in the
   bottom-right corner. Kept small and low so it clears the evidence log even
   at 1366 wide, where .lab's 1320px cap leaves almost no side margin. */
.phone-dock{
  position:absolute; right:26px; bottom:22px; z-index:40;
  display:flex; align-items:center; gap:12px;
}

.phone-rest{
  position:relative; flex:0 0 auto;
  width:82px; height:164px;
  padding:0; cursor:pointer;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(150deg,#42424a 0%,#1c1c21 42%,#0d0d10 100%);
  /* lying at an angle, with a contact shadow pooled under it */
  transform:rotate(19deg);
  box-shadow:
    0 2px 3px rgba(0,0,0,.55),
    14px 16px 26px -8px rgba(0,0,0,.75),
    inset 0 0 0 2px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease;
}
.phone-rest:hover{
  transform:rotate(19deg) translateY(-5px) scale(1.04);
  box-shadow:
    0 3px 4px rgba(0,0,0,.5),
    20px 24px 34px -8px rgba(0,0,0,.8),
    inset 0 0 0 2px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.22);
}
/* front camera dot */
.phone-rest .pr-cam{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%;
  background:#07070a; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
/* a slice of room light across the dead screen, so it reads as glass */
.phone-rest .pr-glint{
  position:absolute; inset:5px 4px;
  border-radius:8px;
  background:linear-gradient(118deg,
    rgba(255,255,255,.16) 0 14%,
    rgba(255,255,255,.03) 14% 30%,
    transparent 30% 100%);
  pointer-events:none;
}

/* Reveal on hover only. The opening tutorial already points the phone out,
   so a permanently bobbing badge just adds noise to the desk. */
.phone-nudge{
  display:flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(180deg,#ffd45e,#e8a91f);
  color:#3a2a05; font:800 10.5px/1 var(--ui), sans-serif;
  box-shadow:0 5px 16px -6px rgba(255,180,40,.8);
  opacity:0; transform:translateX(8px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.phone-dock:hover .phone-nudge,
.phone-rest:focus-visible ~ .phone-nudge{ opacity:1; transform:translateX(0); }
.pn-arrow{ font-size:14px; font-weight:900; line-height:1; }
.phone-dock.used .phone-nudge{ display:none; }

/* ---- expanded ---- */
.phone-modal{
  position:fixed; inset:0; z-index:130;
  display:none; align-items:center; justify-content:center;
  background:rgba(6,6,4,.72); backdrop-filter:blur(3px);
}
.phone-modal.on{ display:flex; animation:fadeIn .2s ease both; }
.phone-modal .iphone{
  position:relative;
  width:min(410px, 94vw);
  height:min(740px, 90vh);
  padding:9px;
  border-radius:42px;
  background:linear-gradient(160deg,#3a3a3e,#131316);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9), inset 0 0 0 2px rgba(255,255,255,.1);
  animation:phoneRise .34s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes phoneRise{ from{ opacity:0; transform:translateY(26px) scale(.94);} to{ opacity:1; transform:none;} }
.ip-close{
  position:absolute; top:-12px; right:-12px; z-index:5;
  width:34px; height:34px; border-radius:50%;
  background:var(--brass-lo); color:#12100a;
  font-size:14px; font-weight:800; line-height:1; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.6);
}
.ip-close:hover{ background:var(--brass); }
.ip-ask{
  flex:1 1 auto; padding:13px 18px; border-radius:999px; cursor:pointer;
  background:#25d366; color:#06301f; border:none;
  font:800 14px/1 var(--ui), sans-serif; letter-spacing:.04em;
}
.ip-ask:hover{ background:#1fbe5a; }

/* Shorter screens (1366x768 is the likely event resolution): the sidebar is
   already at its limit, so shrink the handset rather than reserve more space. */
@media (max-height:840px){
  .phone-rest{ width:62px; height:124px; border-radius:11px; }
  .phone-rest .pr-cam{ top:5px; width:4px; height:4px; }
  .phone-dock{ right:20px; bottom:16px; gap:9px; }
  .phone-nudge{ padding:6px 10px; font-size:9.5px; }
}

/* =========================================================================
   SCOREBOARD: COLOUR ACCENTS
   Saturation and glow on the medals and rank tiers, kept on the dark
   backdrop so it still belongs to the noir palette.
   ========================================================================= */

/* a warm halo behind the winner, so the podium has a focal point */
.sb-podium{ position:relative; }
.sb-podium::before{
  content:""; position:absolute; z-index:0;
  left:50%; top:-6px; transform:translateX(-50%);
  width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,206,90,.30) 0%, rgba(255,180,60,.10) 45%, transparent 70%);
  pointer-events:none;
}
.sb-podium .pod{ position:relative; z-index:1; }

/* medal rings around the top-three portraits */
.pod-1 .pod-face{ box-shadow:0 0 0 3px #ffd45e, 0 8px 16px rgba(0,0,0,.6), 0 0 22px rgba(255,205,80,.55); }
.pod-2 .pod-face{ box-shadow:0 0 0 3px #d8e2ea, 0 7px 13px rgba(0,0,0,.55); }
.pod-3 .pod-face{ box-shadow:0 0 0 3px #d98f57, 0 7px 13px rgba(0,0,0,.55); }

/* plinths pick up their metal */
.pod-1 .pod-plinth{
  background:linear-gradient(180deg, rgba(255,212,94,.34), rgba(255,212,94,.06));
  border-color:rgba(255,212,94,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 -2px 18px -6px rgba(255,205,80,.5);
}
.pod-2 .pod-plinth{
  background:linear-gradient(180deg, rgba(216,226,234,.24), rgba(216,226,234,.04));
  border-color:rgba(216,226,234,.42);
}
.pod-3 .pod-plinth{
  background:linear-gradient(180deg, rgba(217,143,87,.26), rgba(217,143,87,.05));
  border-color:rgba(217,143,87,.45);
}
.pod-2 .pod-place{ color:#e6eef5; }
.pod-3 .pod-place{ color:#f0a86c; }

/* every listed row gets a coloured edge for its tier, so 4th downward is
   not just a wall of identical brown */
.sb-list li{ position:relative; overflow:hidden; }
.sb-list li::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--brass-lo); opacity:.55;
}
.sb-list li:has(.sb-title.t5)::before{ background:linear-gradient(180deg,#ffe89a,#c9922b); opacity:1; }
.sb-list li:has(.sb-title.t4)::before{ background:linear-gradient(180deg,#f2f5f8,#9aa6b1); opacity:1; }
.sb-list li:has(.sb-title.t3)::before{ background:linear-gradient(180deg,#e6a877,#96552a); opacity:1; }
.sb-list li:has(.sb-title.t2)::before{ background:linear-gradient(180deg,#7fd2c4,#2f8d7d); opacity:.95; }
.sb-list li:has(.sb-title.t1)::before{ background:linear-gradient(180deg,#8fb2e0,#3b6ea8); opacity:.9; }
.sb-list li:has(.sb-title.t0)::before{ background:linear-gradient(180deg,#b79fd6,#6b4f96); opacity:.85; }

/* the lower tiers get colour in the chip too, instead of fading to brown */
.sb-list li .sb-title.t2, .pod-title.t2{ color:#a7e6da; border-color:rgba(127,210,196,.5); background:linear-gradient(180deg, rgba(127,210,196,.16), rgba(0,0,0,.18)); }
.sb-list li .sb-title.t1, .pod-title.t1{ color:#b6d0f2; border-color:rgba(143,178,224,.45); background:linear-gradient(180deg, rgba(143,178,224,.14), rgba(0,0,0,.18)); }
.sb-list li .sb-title.t0, .pod-title.t0{ color:#cdb9e8; border-color:rgba(183,159,214,.42); background:linear-gradient(180deg, rgba(183,159,214,.13), rgba(0,0,0,.18)); opacity:1; }

/* your own row, unmistakable */
.sb-list li.sb-me{
  outline:2px solid #ffd45e;
  background:linear-gradient(90deg, rgba(255,212,94,.16), rgba(255,212,94,.05));
}


/* one-tap acknowledgements, so the squad is never left on read */
.ip-quick{
  flex:0 0 auto;
  display:flex; flex-wrap:wrap; gap:6px;
  padding:9px 11px 0;
  background:#ece5dd;
}
.ip-qr{
  padding:7px 13px; border-radius:999px; cursor:pointer;
  background:#fff; border:1px solid #c9d6d1; color:#0d6d5f;
  font:600 12px/1 var(--ui), sans-serif;
  box-shadow:0 1px 2px rgba(0,0,0,.10);
  transition:background .15s ease, transform .12s ease;
  animation:qrIn .26s ease both;
}
.ip-qr:hover{ background:#e7f6f2; transform:translateY(-1px); }
@keyframes qrIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }