/* ==========================================================================
   Nucleon DSHS Translation — layout + components (v2 client)
   Imports dshs-tokens.css. All :root tokens live there; this file is layout
   + component styling only. See docs/design/dshs-mockup.html for the source
   mockup (dev toggle + all four states in one file).
   ========================================================================== */

/* ==========================================================================
   MARKETING NAV
   ========================================================================== */
.marketing-nav {
  height: 72px; background: var(--nc-espresso);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--nc-sp-8);
}
.nav-logo {
  display: inline-block; width: 132px; height: 34px;
  background: url('../logo/nucleon-wordmark-white.svg') left center / contain no-repeat;
}
.nav-links { display: flex; align-items: center; gap: var(--nc-sp-6); }
.nav-links a {
  color: #fff; text-decoration: none; font-size: 15px; font-weight: 500;
  transition: color .2s ease;
}
.nav-links a:hover, .nav-links a.is-current { color: var(--nc-caramel); }
.nav-cta {
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--nc-r-pill);
  padding: 9px 20px; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
}
.nav-cta:hover { background: rgba(255,255,255,.12); color: #fff !important; }

/* App status row — Live/timer/lang/user */
.app-status-row {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--nc-sp-4);
  max-width: var(--nc-maxw); margin: 0 auto; padding: var(--nc-sp-4) var(--nc-sp-8) 0;
}
.status-live {
  display: inline-flex; align-items: center; gap: var(--nc-sp-2);
  font-weight: 600; color: var(--nc-live); font-size: 14px;
}
.status-live .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--nc-live-dot);
  box-shadow: 0 0 0 3px rgba(54,179,126,.18);
}
.status-timer {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--nc-text);
  font-size: 15px;
}
.status-langpair {
  font-weight: 600; color: var(--nc-text-muted); font-size: 14px;
  letter-spacing: .02em;
}
.user-badge {
  display: inline-flex; align-items: center; gap: var(--nc-sp-2);
  background: var(--nc-pill); color: var(--nc-espresso);
  padding: 8px 16px; border-radius: var(--nc-r-pill);
  font-weight: 600; font-size: 14px;
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.view { display: none; }
.view[data-active] { display: block; }
.page {
  max-width: var(--nc-maxw); margin: 0 auto;
  padding: var(--nc-sp-8) var(--nc-sp-8) var(--nc-sp-12);
}
.page-title {
  text-align: center; color: var(--nc-espresso);
  font-size: var(--nc-fs-h1); font-weight: var(--nc-fw-h1);
  letter-spacing: -0.02em; margin: var(--nc-sp-6) 0 var(--nc-sp-8);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  font-family: inherit; font-size: var(--nc-fs-button); font-weight: 600;
  border: 1px solid transparent; border-radius: var(--nc-r-md);
  padding: 14px 28px; cursor: pointer; line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--nc-caramel); color: var(--nc-text-on-accent); }
.btn-primary:not(:disabled):hover { background: var(--nc-caramel-hover); }
.btn-secondary {
  background: var(--nc-secondary); color: var(--nc-secondary-text);
  border-color: var(--nc-border);
}
.btn-secondary:not(:disabled):hover { background: #d9cfc2; }
.btn-ms {
  width: 100%; background: var(--nc-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--nc-sp-3); padding: 16px; font-size: 16px;
  border: 1px solid transparent; border-radius: var(--nc-r-md);
  font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-ms:hover { background: var(--nc-blue-hover); }
.btn-link {
  background: none; border: none; color: var(--nc-text-muted);
  font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline;
  padding: var(--nc-sp-2);
}
.btn.flash { animation: btnFlash .4s ease; }
@keyframes btnFlash { 0%,100%{ box-shadow:none; } 40%{ box-shadow:0 0 0 4px rgba(77,110,207,.35); } }

/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */
.field-label {
  display: block; font-size: var(--nc-fs-label); font-weight: 600;
  color: var(--nc-text-muted); margin-bottom: var(--nc-sp-2);
}
.select-wrap { position: relative; }
.select-wrap .chevron {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--nc-text-muted); pointer-events: none;
}
select.control, input.control {
  width: 100%; height: var(--nc-field-h); font-family: inherit; font-size: 16px;
  color: var(--nc-text); background: var(--nc-field);
  border: 1px solid var(--nc-border-field); border-radius: var(--nc-r-md);
  padding: 0 44px 0 18px; appearance: none; -webkit-appearance: none;
}
input.control { padding-right: 18px; text-transform: uppercase; letter-spacing: .04em; }

/* Segmented voice toggle */
.segmented { display: flex; gap: var(--nc-sp-3); }
.seg-btn {
  flex: 1; height: 52px; font-family: inherit; font-size: 15px; font-weight: 600;
  background: var(--nc-field); color: var(--nc-text-muted);
  border: 1px solid var(--nc-border-field); border-radius: var(--nc-r-md);
  cursor: pointer;
}
.seg-btn[aria-pressed="true"] {
  background: #f6efe6; color: var(--nc-espresso);
  border-color: var(--nc-caramel); border-width: 2px;
}

/* ==========================================================================
   STATE 1 — SIGN IN
   ========================================================================== */
.signin-wrap { min-height: calc(100vh - 72px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--nc-sp-6); padding: var(--nc-sp-8); }
.signin-card {
  width: 420px; background: var(--nc-surface); border: 1px solid var(--nc-border);
  border-radius: var(--nc-r-lg); padding: var(--nc-sp-12) var(--nc-sp-8);
  text-align: center; box-shadow: var(--nc-shadow-card);
}
.signin-logo-img {
  display: block; width: 190px; height: 58px; margin: 0 auto var(--nc-sp-6);
  background: url('../logo/nucleon-wordmark-black.svg') center / contain no-repeat;
}
.signin-card h1 { font-size: 30px; font-weight: 800; color: var(--nc-text);
  letter-spacing: -0.02em; margin-bottom: var(--nc-sp-3); }
.signin-card .subtitle { color: var(--nc-text-muted); font-size: 15px; margin-bottom: var(--nc-sp-8); }
.signin-card .fineprint { color: var(--nc-text-muted); font-size: 13px; margin-top: var(--nc-sp-4); }
.signin-foot { color: var(--nc-text-muted); font-size: 13px; }

/* ==========================================================================
   STATE 2 — CONFIGURE
   ========================================================================== */
.panel {
  background: var(--nc-surface); border: 1px solid var(--nc-border);
  border-radius: var(--nc-r-lg); padding: var(--nc-sp-6) var(--nc-sp-8);
  margin-bottom: var(--nc-sp-6);
}
.setup-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nc-sp-6);
  margin-bottom: var(--nc-sp-6); }
.setup-card {
  background: var(--nc-surface-2); border: 1px solid var(--nc-border);
  border-radius: var(--nc-r-lg); padding: var(--nc-sp-8); box-shadow: var(--nc-shadow-card);
}
.card-head { display: flex; align-items: center; gap: var(--nc-sp-3); margin-bottom: var(--nc-sp-6); }
.card-head .headset { width: 34px; height: 34px; color: var(--nc-text); flex: none; }
.card-head .role { font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--nc-text-muted); text-transform: uppercase; display: block; }
.card-head .lang { font-size: var(--nc-fs-h2); font-weight: 700; color: var(--nc-text);
  letter-spacing: -0.01em; line-height: 1.1; }
.card-head .lang .native { color: var(--nc-text-muted); font-weight: 600; }
.form-row { margin-bottom: var(--nc-sp-6); }
.form-row:last-child { margin-bottom: 0; }
.token-label-row { display: flex; align-items: center; gap: var(--nc-sp-2); }
.token-label-row .info { width: 16px; height: 16px; color: var(--nc-text-muted); }
.setup-actions { display: flex; flex-direction: column; align-items: center; gap: var(--nc-sp-3);
  margin-top: var(--nc-sp-8); }

/* ==========================================================================
   STATE 3 — ACTIVE SESSION
   ========================================================================== */
.session-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nc-sp-6); }
.talk-card {
  background: var(--nc-surface-2); border: 1px solid var(--nc-border);
  border-radius: var(--nc-r-lg); padding: var(--nc-sp-8); min-height: 620px;
  box-shadow: var(--nc-shadow-card);
  opacity: .6; transition: opacity .4s ease, border-color .4s ease;
}
.talk-card.is-active { opacity: 1; border-color: var(--nc-caramel); }
.talk-head { display: flex; align-items: flex-start; justify-content: space-between;
  padding-bottom: var(--nc-sp-4); border-bottom: 1px solid var(--nc-border);
  margin-bottom: var(--nc-sp-6); }
.talk-title .lang { font-size: var(--nc-fs-h2); font-weight: 700; color: var(--nc-text); }
.talk-title .who { font-size: 12px; color: var(--nc-text-muted); }
.speak-state { display: inline-flex; align-items: center; gap: var(--nc-sp-2);
  font-size: 13px; font-weight: 700; color: var(--nc-text-muted); }
.speak-state .ico { width: 20px; height: 20px; }
.talk-card.is-active .speak-state { color: var(--nc-caramel-hover); }
.talk-feed {
  max-height: 480px; overflow-y: auto; padding-right: var(--nc-sp-2);
}
.utterance { margin-bottom: var(--nc-sp-6); }
.utterance .meta { font-size: var(--nc-fs-small); color: var(--nc-text-muted);
  margin-bottom: var(--nc-sp-2); font-weight: 500; }
.bubble {
  display: inline-block; background: var(--nc-bubble-worker); color: var(--nc-text);
  padding: 12px 16px; border-radius: var(--nc-r-md); font-size: 15px;
  border: 1px solid var(--nc-border); max-width: 92%;
}
.utterance.incoming .bubble { background: var(--nc-bubble-visitor); }
.utterance.enter { animation: utterIn .2s ease-out; }
@keyframes utterIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.feed-empty { color: var(--nc-text-muted); font-size: 14px; font-style: italic; }
.session-actions { display: flex; justify-content: center; gap: var(--nc-sp-4);
  margin-top: var(--nc-sp-8); }

/* ==========================================================================
   STATE 4 — SESSION ENDED
   ========================================================================== */
.ended-chips { display: flex; justify-content: center; gap: var(--nc-sp-3);
  margin-bottom: var(--nc-sp-8); }
.chip { background: var(--nc-pill); color: var(--nc-text-muted); font-size: 14px;
  font-weight: 600; padding: 8px 16px; border-radius: var(--nc-r-pill);
  display: inline-flex; align-items: center; gap: 8px; }
.chip strong { color: var(--nc-espresso); }
.chip .arrows { width: 16px; height: 16px; color: var(--nc-text-muted); }
.transcript {
  background: var(--nc-surface); border: 1px solid var(--nc-border);
  border-radius: var(--nc-r-lg); padding: var(--nc-sp-8);
  max-height: 520px; overflow-y: auto;
}
.transcript h2 { text-align: center; font-size: var(--nc-fs-h3); font-weight: 700;
  color: var(--nc-text); margin-bottom: var(--nc-sp-8); }
.t-entry { margin-bottom: var(--nc-sp-6); display: flex; flex-direction: column; }
.t-entry.worker { align-items: flex-start; }
.t-entry.visitor { align-items: flex-end; }
.t-entry .meta { font-size: var(--nc-fs-small); color: var(--nc-text-muted);
  margin-bottom: var(--nc-sp-2); font-weight: 500; }
.t-entry .bubble { max-width: 62%; }
.t-entry.visitor .bubble { background: var(--nc-bubble-visitor); }
.ended-actions { display: flex; flex-direction: column; align-items: center;
  gap: var(--nc-sp-3); margin-top: var(--nc-sp-8); }
.ended-actions .row { display: flex; gap: var(--nc-sp-4); }
.warn-banner {
  display: flex; align-items: center; gap: var(--nc-sp-3);
  max-width: 720px; margin: var(--nc-sp-8) auto 0; padding: 14px 20px;
  background: var(--nc-warn-bg); border: 1px solid var(--nc-warn-border);
  border-radius: var(--nc-r-md); color: var(--nc-warn); font-size: 14px;
}
.warn-banner .ico { width: 20px; height: 20px; flex: none; }

/* ==========================================================================
   TOAST + MODAL
   ========================================================================== */
.toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-16px);
  background: var(--nc-espresso); color: #fff; padding: 10px 20px;
  border-radius: var(--nc-r-pill); font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(56,31,0,.45);
  display: none; align-items: center; justify-content: center; z-index: 60;
}
.modal-overlay[data-open] { display: flex; }
.modal {
  width: 440px; background: #fff; border-radius: var(--nc-r-lg);
  padding: var(--nc-sp-8); box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.modal h2 { font-size: 22px; font-weight: 700; color: var(--nc-text); margin-bottom: var(--nc-sp-3); }
.modal p { color: var(--nc-text-muted); margin-bottom: var(--nc-sp-8); }
.modal .row { display: flex; justify-content: flex-end; gap: var(--nc-sp-3); }

/* Sprite */
svg.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   WINDOWS HIGH CONTRAST / forced-colors
   ========================================================================== */
@media (forced-colors: active) {
  .btn, .btn-ms, .chip, .user-badge, .panel, .setup-card, .talk-card, .signin-card,
  .transcript, .warn-banner, .modal, select.control, input.control, .seg-btn {
    border: 1px solid ButtonBorder;
  }
  .talk-card.is-active { border: 2px solid Highlight; }
  .seg-btn[aria-pressed="true"] { border: 2px solid Highlight; }
  :focus-visible { outline: 2px solid Highlight; }
  .status-live .dot { forced-color-adjust: none; }
}