*{box-sizing:border-box;}
body{margin:0;padding:0;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}
body.landing-page{
  background:#ffffff;color:#000000;min-height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:1rem;text-align:center;position:relative;overflow-y:hidden;
}
body.landing-page .mirror { pointer-events: auto; }

.mirror::before,
.mirror::after,
.mirror .sheen,
.mirror .glow {
  pointer-events: none !important;
}

/* Content above the mirror background */
.mirror .card,
.mirror .card * { position: relative; z-index: 3; }

/* Set the content card to be 90% of the mirror frame */
.mirror .card {
  width: 100%;
  height: 100%;
}

/* (Removed) left padding so frame tightly contains icons + content */
/* .mirror .card { padding-left:4rem; } */

.mirror { scrollbar-gutter: stable; }

/* WORD CLOUD */
#cloudContainer{
  position:fixed;top:0;left:0;width:100%;height:100vh;display:flex;flex-direction:column;
  align-items:stretch;gap:6px;padding:4px 6px;z-index:0;pointer-events:none;
}
#cloudContainer .word{white-space:nowrap;font-weight:600;line-height:1;user-select:none;transition:color 0.25s ease;}
@media (max-width:420px){#cloudContainer{height:100vh;grid-auto-rows:24px;}}
.cloud-row{display:grid;grid-template-columns:repeat(var(--base-cols,14),1fr);align-items:center;column-gap:8px;min-height:26px;}
.cloud-row .word{white-space:nowrap;font-weight:600;line-height:1;user-select:none;}

/* BUTTONS */
.button-container{
  display:flex;flex-direction:row;gap:1rem;width:100%;max-width:400px;margin:0 auto;padding:1rem;
  justify-content:center;position:relative;z-index:5;background:transparent;
}
.nav-button{
  background:#ffffff;color:#1e293b;padding:1rem 1.2rem;font-size:1rem;font-weight:600;
  border:3px solid #1e293b;border-radius:12px;text-decoration:none;text-align:center;
  transition:all 0.3s ease;box-shadow:0 4px 15px rgba(30,41,59,0.2);
  display:block;flex:1;max-width:120px;cursor:pointer;user-select:none;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;min-height:50px;line-height:1.2;
}
.nav-button:hover{background:#1e293b;color:#ffffff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(30,41,59,0.3);}
.nav-button:active{transform:translateY(0);}
@media (min-width:768px){
  .word-cloud-container{max-width:500px;height:65vh;}
  .button-container{max-width:600px;gap:1.5rem;}
  .nav-button{font-size:1.1rem;padding:1.2rem 1.5rem;max-width:150px;}
}
@media (min-width:1024px){
  .word-cloud-container{max-width:600px;height:60vh;}
  .button-container{max-width:700px;}
}
.cta-grid{display:grid;grid-template-columns:1fr;gap:20px;justify-items:center;}
.c-center{grid-column:1 / -1;justify-self:center;}
.c-left{justify-self:end;}
.c-right{justify-self:start;}
.word-cloud-multi,.animated-word,.word-cloud-cloud,.nav-links,.nav-link,.privacy-note{display:none;}
.pf-buttons{display:flex;justify-content:space-between;width:100%;margin-top:1rem;}
.pf-btn{flex:0 0 48%;padding:1rem;font-size:1.1rem;border:none;border-radius:8px;}
.pf-yes-btn{background-color:#add8e6;color:#000;}
.pf-help-btn{background-color:#f87171;color:#000;}
#checkin-form fieldset{border:none;margin:0 0 1.5rem;padding:0;}
.question-block{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border-radius:10px;margin-bottom:1rem;}
.question-block:hover{background:#fafafa;}
.question-label{font-weight:600;display:block;margin-bottom:0.25rem;}
.help{font-size:0.875rem;color:#555;}

/* Ensure the card is the positioning context for the left icon rail */
.card, .checkin-card, .mirror { position: relative; }

/* Optional fixed width for a left icon rail (if used elsewhere) */
.left-rail { position: absolute; left: 0; top: 12px; width: var(--icon-gutter); }

/* Mic row */
#checkin-form .answer-wrapper { display:flex; gap:8px; align-items:flex-start; }
#checkin-form .answer-input { flex:1; }
.mic-btn{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:4px;cursor:pointer;font-size:1.2rem;line-height:1;padding:0.25rem 0.5rem;display:flex;align-items:center;justify-content:center;color:#1e293b;}
.mic-btn.recording{color:#dc2626;border-color:#dc2626;}

#checkin-form .answer-wrapper { display:flex; gap:8px; align-items:flex-start; }
#checkin-form .answer-input { flex:1; } 

.mic-btn:disabled{opacity:0.5;cursor:not-allowed;}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding: 0.75rem 1.5rem;min-height:3.75rem;border:2px solid #111;border-radius:16px;text-decoration:none;font-weight:600;background:linear-gradient(145deg,#ffffff,#e5e5e5);color:#111;box-shadow:4px 4px 10px rgba(0,0,0,0.2),-4px -4px 10px rgba(255,255,255,0.6);transition:transform 0.1s, box-shadow 0.1s, opacity 0.2s;}
.btn:active{transform:translateY(2px);}
.btn::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(60deg,rgba(255,255,255,0.6),rgba(255,255,255,0) 70%);border-radius:16px;pointer-events:none;}
.btn .generating-msg{position:absolute;bottom:4px;right:6px;font-size:.75rem;color:#555;pointer-events:none;}
.btn.start-here{border-color:#ff9800;box-shadow:0 0 12px #ff9800;animation:pulse 1.5s infinite;}
.start-here-tag{position:absolute;top:-10px;right:-10px;background:#ff9800;color:#fff;padding:2px 6px;border-radius:8px;font-size:.7rem;font-weight:700;}
@keyframes pulse{0%,100%{box-shadow:0 0 12px #ff9800;}50%{box-shadow:0 0 20px #ff9800;}}
.answer-input{width:100%;padding:0.5rem;font-size:1rem;}
@media (max-width:600px){.answer-wrapper{flex-direction:column;align-items:stretch;}.mic-btn{align-self:flex-end;}}

button:disabled, .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1) !important;
  transform: none !important;
  animation: none !important;
}

/* ==== MIRROR CENTER + ICONS (final) ==== */

/* Center container that maintains the mirror image's aspect ratio (mirror.png ≈ 3:4) */
.mirror-wrapper{
  position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
  z-index:10; display:flex; align-items:center; justify-content:center;
  width: min(90vw, 400px);
  aspect-ratio: 3 / 4; /* exact frame ratio so the box fills the frame */
}

/* Mirror itself: the frame image provides the border */
.mirror{
  position:relative;
  width:100%;
  height:100%;
  padding: 10%; 
  background: url('/static/mirror.png') no-repeat center center;
  background-origin: border-box;
  background-size: 110% 110%;
  border:none;
  box-shadow:0 0 25px rgba(0,0,0,0.3);

  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow-y:auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  text-align: initial;
}

/* Top-left icons — uniformly sized, placed inside the frame */
:is(.mirror, .card) .menu-icon,
:is(.mirror, .card) .profile-icon,
:is(.mirror, .card) .networking-icon,
:is(.mirror, .card) .progress-icon,
:is(.mirror, .card) .brand-icon,
:is(.mirror, .card) .frameworks-icon,
:is(.mirror, .card) .stories-icon{
  position:absolute;
  left:30px;
  width:2.25rem;
  height:2.25rem;
  font-size:1.6rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:inherit;
  z-index:20;
  cursor:pointer;
}

/* Vertical positions */
:is(.mirror, .card) .profile-icon{ top:48px; --arc-rotate:-45deg; }
:is(.mirror, .card) .menu-icon{ top:80px; }
:is(.mirror, .card) .stories-icon{ top:112px; }
:is(.mirror, .card) .progress-icon{ top:144px; }
:is(.mirror, .card) .brand-icon{ top:176px; }
:is(.mirror, .card) .frameworks-icon{ top:208px; }
:is(.mirror, .card) .networking-icon{ top:240px; }

/* Language switcher (top-right) */
.language-switcher {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  z-index: 20;
}
.language-toggle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, 0.3);
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  color: inherit;
}
.language-toggle:hover,
.language-toggle:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
  border-color: rgba(15, 23, 42, 0.55);
}
.language-switcher.open .language-toggle {
  border-color: rgba(37, 99, 235, 0.6);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
}
.language-dropdown {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  min-width: 9rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.28);
}
.language-switcher.open .language-dropdown {
  display: flex;
}
.lang-flag {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.65rem;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 0.85;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.lang-flag:hover,
.lang-flag:focus-visible {
  outline: none;
  background: rgba(59, 130, 246, 0.12);
  opacity: 1;
}
.lang-flag.active {
  background: rgba(59, 130, 246, 0.18);
  opacity: 1;
}
.lang-flag .flag {
  font-size: 1.35rem;
  line-height: 1;
}
.lang-flag .lang-name {
  white-space: nowrap;
}

/* 3/4 ring around profile icon */
.profile-icon::after{
  content:"";
  position:absolute;
  inset:-8px;
  border:2px solid #111;
  border-radius:50%;
  pointer-events:none;
  -webkit-mask: conic-gradient(#000 0 270deg, transparent 270deg 360deg);
          mask: conic-gradient(#000 0 270deg, transparent 270deg 360deg);
  transform: rotate(var(--arc-rotate));
}

/* Privacy tooltip (bottom-right) */
.privacy-wrapper{ position:absolute; bottom:8px; right:8px; z-index:20; }
.privacy-icon{ font-size:1.3rem; cursor:pointer; display:inline-block; }
.privacy-tooltip{
  display:none; position:absolute; bottom:100%; right:0; background:#fff; color:#111;
  border:1px solid #111; border-radius:6px; padding:4px 8px; font-size:0.75rem;
  white-space:nowrap; margin-bottom:4px; box-shadow:0 2px 6px rgba(0,0,0,0.2);
}
.privacy-icon:hover + .privacy-tooltip,
.privacy-icon:focus + .privacy-tooltip{ display:block; }

/* (Optional) mannequin overlay — unchanged */
.mannequin-overlay{
  position:absolute; left:50%; transform:translateX(-50%);
  top:-160px; width:clamp(220px, 60vw, 360px); height:clamp(260px, 35vh, 420px);
  pointer-events:none; z-index:5; opacity:.35; border:2px solid #111; border-radius:120px / 160px;
}
.mannequin-overlay::before{
  content:""; position:absolute; left:50%; top:-88px; transform:translateX(-50%);
  width:88px; height:88px; border:2px solid #111; border-radius:50%; background:transparent;
}
.mannequin-overlay::after{
  content:""; position:absolute; left:50%; top:14px; transform:translateX(-50%);
  width:clamp(260px, 70vw, 420px); height:120px; border:2px solid #111; border-radius:50% / 60%;
  background:transparent; clip-path: inset(0 0 60% 0); opacity:.9;
}
.nav-button{ position:relative; z-index:10; }

/* Progress bars */
.bars{display:flex;gap:4px;margin:10px 0;}
.bar{flex:1;height:6px;background:#e5e7eb;border-radius:3px;}
.bar.done{background:#22c55e;}