/* ===========================================================================
   PANELVAN — THE PARTS
   Every piece more than one page uses, styled once. Robot's language: red is
   the room, white cards sit on it, pills and three corners.
   Change a part here and it changes everywhere it's used.
   =========================================================================== */

/* ---- the page itself ---- */
*{box-sizing:border-box}
html,body{margin:0}
body{overflow-x:hidden}
body{
  background:var(--red); color:var(--white);
  font-family:var(--body); font-size:var(--talk); line-height:1.5;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
}
main{flex:1 0 auto}
[hidden]{display:none !important}

/* ---- the top bar. Robot's furniture: a white bar, the hai2 logo (the
   way home), the burger on the right. The page stays red under it. ---- */
.top{
  background:var(--white); padding:13px var(--g); border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; min-height:65px;
}
.brand{display:block; line-height:0; cursor:pointer}
.brand img{height:22px; display:block}

.burger{
  width:38px; height:38px; border-radius:50%; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; transition:background .15s;
}
.burger:hover{background:var(--paper)}
.burger:focus-visible{outline:2px solid var(--border); outline-offset:0}
.burger svg{width:19px; height:19px; display:block}
.burger line{stroke:var(--ink); stroke-width:2; stroke-linecap:round; transition:transform .2s ease, opacity .2s ease}
.burger.x .bl1{transform:translateY(4.5px) rotate(45deg); transform-origin:center}
.burger.x .bl2{opacity:0}
.burger.x .bl3{transform:translateY(-4.5px) rotate(-45deg); transform-origin:center}

.menu{
  position:absolute; top:54px; right:14px; z-index:60; display:none;
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-card);
  padding:6px; min-width:148px; box-shadow:0 10px 30px rgba(26,25,23,.14);
}
.menu.on{display:block}
.menu button{
  display:block; width:100%; text-align:left; padding:10px 14px; border:0; background:none; cursor:pointer;
  border-radius:var(--r-input); color:var(--ink);
  font-family:var(--display); font-size:16px; letter-spacing:1.2px; text-transform:uppercase;
}
.menu button:hover{background:var(--paper); color:var(--red)}
.menu #out{border-top:1px solid var(--border); border-radius:0 0 var(--r-input) var(--r-input); margin-top:6px; padding-top:14px}
@media (prefers-reduced-motion:reduce){.burger line{transition:none}}

/* ---- the footer. A white strip like the top bar, slimmer: the Hunch mark
   and the line. Sits under the content, at the bottom of the screen on short
   pages. Not sticky. Gone on the wait. ---- */
.foot{
  background:var(--white); color:var(--ink); border-top:1px solid var(--border);
  padding:0 var(--g); min-height:var(--foot); flex:none;
  display:flex; align-items:center; gap:10px;
}
.foot-mark{display:block; line-height:0}
.foot-mark img{width:20px; height:20px; display:block}
.foot-line{margin:0; font-size:var(--say); color:var(--ink-soft)}
.foot-line a{color:var(--ink); font-weight:600; text-decoration:none}
.foot-line a:hover{color:var(--red)}
body:has(#wait:not([hidden])) .foot{display:none}

/* ---- rooms: one page at a time, popping in ---- */
main{padding:0 16px 64px}
.room{max-width:640px; margin:0 auto; padding-top:24px; animation:pop .35s cubic-bezier(.3,1.4,.6,1)}
.room.wide{max-width:1120px}
@keyframes pop{from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.room{animation:none !important}}

/* ---- headlines ---- */
.shout{font-family:var(--display); font-weight:400; font-size:var(--title); line-height:1; letter-spacing:.02em; margin:0 0 24px}

/* ---- the headline pair (REVIEW | REPORT) and the line under it ---- */
.headpair{font-family:var(--display); font-size:var(--shout); line-height:.9; letter-spacing:.01em; display:flex; align-items:center; gap:18px}
.headpair .off{color:var(--white-mid)}
.headpair-sep{width:2px; height:.7em; background:var(--white-mid)}
.eyebrow{font-size:var(--talk); font-weight:500; margin:14px 0 34px}

/* ---- small type ---- */
.whisper{min-height:1.2em; margin:0; font-size:var(--say); color:var(--red-dark)}
.cap{font-size:var(--whisper); letter-spacing:.14em; text-transform:uppercase; color:var(--mid); font-weight:500}
.tbc{color:var(--mid)}

/* ---- boxes you type in ---- */
input,textarea{
  font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--border); border-radius:var(--r-input); padding:12px 14px; width:100%;
}
textarea{min-height:220px; resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--ink); outline-offset:1px}

/* ---- buttons: pills, the big full-width one, links ---- */
.pill{
  font-family:var(--display); font-size:var(--lead); letter-spacing:.06em;
  background:var(--ink); color:var(--white); border:0; border-radius:var(--pill);
  padding:12px 32px; cursor:pointer; align-self:flex-start;
}
.pill:disabled{opacity:.3; cursor:default}
.pill.ghosty{background:transparent; color:var(--white); border:2px solid var(--white-mid)}
.pill.red{background:var(--red); color:var(--white)}
.pill.sm{font-size:var(--talk); padding:6px 18px}
.room > .pill{margin-top:24px}
.row{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}

.meet{
  width:100%; background:var(--ink); color:var(--white); border:0; border-radius:var(--pill);
  font-family:var(--display); font-size:var(--head); letter-spacing:.06em; padding:12px; cursor:pointer;
}
.meet{margin-bottom:28px}
.meet.red{background:var(--red)}
.meet:disabled{opacity:.35; cursor:default}

.link{background:none; border:0; color:var(--white-hi); font:inherit; font-size:var(--say); cursor:pointer; padding:0}
.link:hover{color:var(--white)}
.link.ink{color:var(--mid); font-size:var(--quiet); letter-spacing:.14em; text-transform:uppercase; font-weight:500}
.link.ink:hover{color:var(--ink)}

/* ---- round tool buttons: the padlock and the wand ---- */
.tools{position:absolute; top:22px; right:22px; display:flex; gap:10px}
.toolb{ width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:var(--white); color:var(--red); box-shadow:var(--lift-button);
  display:inline-flex; align-items:center; justify-content:center;
}
.toolb svg{width:20px; height:20px}
.lockb.on{color:var(--ink)}
.wand{color:var(--ink)}
.wand:disabled{opacity:.3; cursor:default}

/* ---- tiles: a white card you pick ---- */
.tiles{display:grid; gap:12px}
.tile{
  background:var(--white); color:var(--ink); border:3px solid transparent; border-radius:var(--r-card);
  padding:20px 24px; text-align:left; font:inherit; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.tile .t{font-family:var(--display); font-size:var(--head); letter-spacing:.03em}
.badge{font-family:var(--display); font-size:var(--talk); letter-spacing:.08em; border:1.5px solid currentColor; border-radius:var(--pill); padding:2px 10px}

/* ---- chips: small pills that show a value ---- */
.chip{
  display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:var(--say); font-weight:500;
  background:var(--white); color:var(--ink); border:1.5px solid var(--border); border-radius:var(--pill);
  padding:5px 12px; cursor:pointer; white-space:nowrap;
}
span.chip{cursor:default; border-color:var(--ink); padding:3px 12px}
.chip svg{width:14px; height:14px}
.chip.tbc{color:var(--mid); border-color:var(--border); background:transparent}
.chip.open{border-color:var(--ink)}
.chip.sm{font-size:var(--quiet); padding:3px 12px; border-color:var(--ink)}
.chip.sm.tbc{border-color:var(--border)}
.chip.lg{font-size:var(--talk); padding:9px 18px; gap:8px}
.chip.lg svg{width:16px; height:16px}

/* ---- the red initial: a panelist's face on cards, tiles and her page ---- */
.init{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; border-radius:50%; background:var(--red); color:var(--white);
  font-family:var(--display); font-size:24px; line-height:1;
}
.init.sm{width:24px; height:24px; font-size:15px}
.init.lg{width:64px; height:64px; font-size:36px}
.init.bot{overflow:hidden}
.init.bot svg{display:block; width:100%; height:100%}

/* ---- the panel's note, under the report ---- */
.note{color:var(--white-hi); font-size:var(--say); margin-top:24px}
.note strong{color:var(--white)}

@media (max-width:560px){
  .init.lg{width:52px; height:52px; font-size:30px}
  .top{padding:13px 16px}
  .foot{padding:0 16px}
}