/* ════════════════════════════════════════════════════
   SCALE™ Assessment Frontend Styles
   Manobal HR Services
════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  /* ══ Manobal Brand Colours ══════════════════════════ */
  --mb-bg:       #0F172A;   /* primary background          */
  --mb-bg-card:  #131F36;   /* card / form background      */
  --mb-bg-surf:  #1A2845;   /* surface / input / hover     */
  --mb-bg-deep:  #0A1020;   /* hero / footer deepest       */
  --mb-border:   #1E3055;   /* border lines                */
  --mb-gold1:    #F0B213;   /* H1 headings / logo text     */
  --mb-gold2:    #FACC15;   /* body text / sub-headings    */
  --mb-gold1-dk: #C89A0F;   /* gold1 hover / pressed       */
  --mb-gold2-dk: #D4A810;   /* gold2 darker variant        */
  --mb-text-sec: #94A3B8;   /* secondary / muted text      */
  --mb-text-dim: #64748B;   /* very muted hints            */
  --mb-green:    #4ADE80;   /* success                     */
  --mb-green-bg: #052E16;   /* success background          */
  --mb-red:      #F87171;   /* error                       */
  --mb-red-bg:   #1F0606;   /* error background            */
  --mb-amber:    #FCD34D;   /* warning (near gold2)        */
  --mb-shadow:   0 6px 32px rgba(10,16,32,.55);
  --mb-shadow-lg:0 16px 60px rgba(10,16,32,.70);
  /* Legacy aliases kept for compatibility */
  --sk-ink:      #0F172A;   /* used as dark bg in button patterns */
  --sk-cream:    #0F172A;
  --sk-cream2:   #131F36;
  --sk-navy-3:   #1A2845;
  --sk-navy-4:   #0A1020;
  --sk-gold:     #F0B213;
  --sk-gold-dk:  #C89A0F;
  --sk-gold-lt:  #FACC15;
  --sk-rust:     #E05C38;
  --sk-teal:     #2A9090;
  --sk-teal-lt:  #0A1825;
  --sk-slate:    #94A3B8;
  --sk-slate-lt: #1A2845;
  --sk-border:   rgba(240,178,19,.25);
  --sk-border2:  rgba(148,163,184,.15);
  --sk-shadow:   0 6px 32px rgba(10,16,32,.55);
  --sk-shadow-lg:0 16px 60px rgba(10,16,32,.70);
}

.scale-app { font-family:'DM Sans',sans-serif; color:var(--mb-gold2); background:var(--mb-bg); }
.scale-app *, .scale-app *::before, .scale-app *::after { box-sizing:border-box; margin:0; padding:0; }
@keyframes scaleUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* ── HERO ── */
.scale-hero {
  background:var(--sk-ink); color:var(--mb-gold2);
  padding:64px 40px 48px; position:relative; overflow:hidden;
}
.scale-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 90% at 80% 50%, rgba(240,178,19,.08) 0%, transparent 70%);
  pointer-events:none;
}
.scale-hero-inner { max-width:920px; margin:0 auto; position:relative; }
.scale-hero-row   { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.scale-badge { display:inline-block; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--sk-gold); border:1px solid var(--sk-gold); padding:5px 13px; margin-bottom:20px; }
.scale-app .scale-hero-title { font-family:'Playfair Display',serif !important; color:#F0B213 !important; font-size:clamp(2rem,4vw,3.2rem) !important; font-weight:900 !important; line-height:1.09 !important; letter-spacing:-.02em !important; margin-bottom:12px !important; }
.scale-hero-title em { font-style:italic; color:var(--sk-gold); }
.scale-app .scale-hero-sub { font-size:.92rem !important; color:rgba(250,204,21,.85) !important; max-width:460px !important; line-height:1.7 !important; margin-bottom:24px !important; }

/* User badge */
.scale-user-badge { background:rgba(240,178,19,.04); border:1px solid rgba(240,178,19,.25); padding:16px 20px; min-width:220px; }
.sub-name  { font-weight:700; font-size:.95rem; margin-bottom:3px; }
.sub-co    { font-size:.82rem; color:var(--sk-gold); margin-bottom:3px; }
.sub-role  { font-size:.76rem; color:rgba(250,204,21,.6); margin-bottom:8px; }
.sub-id    { font-size:.75rem; color:rgba(250,204,21,.5); margin-bottom:12px; }
.sub-id code { color:var(--sk-gold-lt); }
.scale-btn-logout {
  font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.8px; text-transform:uppercase; padding:7px 16px;
  background:transparent; color:rgba(250,204,21,.55); border:1px solid rgba(250,204,21,.25);
  cursor:pointer; transition:all .2s; border-radius:2px;
}
.scale-btn-logout:hover { color:var(--mb-gold1); border-color:var(--mb-gold1); }

.scale-lang-switcher {
  font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.4px; padding:7px 10px;
  background:var(--mb-bg-card); color:var(--mb-gold2); border:1px solid rgba(250,204,21,.25);
  cursor:pointer; transition:all .2s; border-radius:2px;
}
.scale-lang-switcher:hover { border-color:var(--mb-gold1); }
.scale-lang-switcher:disabled { opacity:.5; cursor:wait; }

/* Hero tabs */
.hero-tabs { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.scale-tab-btn {
  font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:600;
  letter-spacing:.8px; text-transform:uppercase; padding:11px 24px;
  border:1.5px solid var(--sk-gold); background:transparent; color:var(--sk-gold);
  cursor:pointer; transition:all .2s; border-radius:2px;
}
.scale-tab-btn.active, .scale-tab-btn:hover { background:var(--sk-gold); color:var(--sk-ink); }

/* ── MAIN AREA ── */
.scale-main { max-width:920px; margin:0 auto; padding:48px 24px 100px; }
.scale-panel { display:none; }
.scale-panel.active { display:block; animation:scaleUp .36s ease; }

/* ── AUTH TABS ── */
.scale-auth-tabs { display:flex; gap:0; margin-bottom:28px; border-bottom:2px solid var(--sk-border); }
.scale-auth-tab {
  font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:600;
  letter-spacing:.5px; text-transform:uppercase; padding:12px 28px;
  background:transparent; color:var(--sk-slate); border:none; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s;
}
.scale-auth-tab.active { color:var(--mb-gold1); border-bottom-color:var(--sk-gold); }

.scale-auth-panel { display:none; }
.scale-auth-panel.active { display:block; animation:scaleUp .35s ease; }

/* ── FORM CARD ── */
.scale-form-card {
  background:var(--sk-cream2); border:1px solid var(--sk-border);
  padding:36px 36px; max-width:580px;
  box-shadow:var(--sk-shadow); border-radius:4px; border:1px solid var(--sk-border);
}
.scale-app .sfc-title {
  font-family:'Playfair Display',serif !important;
  font-size:1.5rem !important;
  font-weight:700 !important;
  margin-bottom:6px !important;
  color:#F0B213 !important;
}
.scale-app .sfc-sub {
  font-size:.86rem !important;
  color:#94A3B8 !important;
  line-height:1.6 !important;
  margin-bottom:24px !important;
}

/* ── FIELD ── */
.scale-fg        { display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; }
.scale-fg-one    { grid-template-columns:1fr; }
.scale-fg-full   { grid-column:1/-1; }
@media(max-width:620px){ .scale-fg { grid-template-columns:1fr; } }
.scale-field     { display:flex; flex-direction:column; gap:5px; }
.scale-app .scale-field label { font-size:.72rem !important; font-weight:600 !important; letter-spacing:.7px !important; text-transform:uppercase !important; color:#94A3B8 !important; }
.scale-field .req  { color:var(--sk-rust); }
.scale-app .scale-field input,
.scale-app .scale-field select,
.scale-app .scale-field textarea {
  font-family:'DM Sans',sans-serif !important;
  font-size:.93rem !important;
  padding:10px 13px !important;
  border:1.5px solid rgba(240,178,19,.3) !important;
  background:#131F36 !important;
  color:#FFFFFF !important;
  outline:none !important;
  transition:border-color .2s !important;
  border-radius:2px !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
.scale-app .scale-field input:focus,
.scale-app .scale-field select:focus,
.scale-app .scale-field textarea:focus {
  border-color:#F0B213 !important;
}
.scale-app .scale-field input::placeholder,
.scale-app .scale-field textarea::placeholder {
  color:rgba(255,255,255,.4) !important;
  -webkit-text-fill-color:rgba(255,255,255,.4) !important;
}
.scale-app .scale-field select option {
  background:#131F36;
  color:#FFFFFF;
}
.scale-field textarea { resize:vertical; min-height:80px; }
.scale-field input:focus, .scale-field select:focus, .scale-field textarea:focus { border-color:var(--sk-gold); }

/* ── BUTTONS ── */
.scale-btn-primary {
  display:block; width:100%; margin-top:20px;
  font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; padding:14px 32px;
  background:var(--sk-ink); color:var(--sk-gold);
  border:none; cursor:pointer; transition:all .22s; border-radius:2px;
}
.scale-btn-primary:hover { background:var(--sk-gold); color:var(--sk-ink); }
.sub-row { display:flex; justify-content:flex-end; margin-top:28px; }
.sub-row .scale-btn-primary { width:auto; margin-top:0; }
.scale-hint { font-size:.8rem; color:var(--sk-slate); margin-top:14px; text-align:center; }
.scale-hint a { color:var(--sk-teal); text-decoration:none; font-weight:600; }
.scale-hint a:hover { text-decoration:underline; }

/* ── REG ID DISPLAY ── */
.scale-reg-id-display {
  font-family:'Playfair Display',serif; font-size:2rem; font-weight:900;
  color:var(--sk-gold); letter-spacing:2px; text-align:center;
  padding:18px; background:var(--sk-ink); margin:16px 0; border-radius:2px;
}

/* ── ERROR ── */
.scale-err { font-size:.8rem; color:var(--sk-rust); margin-top:14px; display:none; }
.scale-err.visible { display:block; }

/* ── THANK YOU ── */
.scale-ty-box {
  background:var(--sk-ink); color:var(--mb-gold2); padding:60px 48px;
  text-align:center; border-radius:2px; max-width:560px; margin:0 auto;
}
.scale-ty-box .ty-icon { font-size:2.5rem; margin-bottom:18px; }
.scale-ty-box h2 { font-family:'Playfair Display',serif; font-size:1.9rem; font-weight:900; color:var(--sk-gold); margin-bottom:12px; }
.scale-ty-box p  { font-size:.9rem; color:rgba(250,204,21,.75); line-height:1.7; }
.scale-ty-box .scale-btn-primary { margin-top:24px; }

/* ── TYPOGRAPHY ── */
.sec-label { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--sk-gold); font-weight:600; margin-bottom:7px; }
.sec-title { font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:700; margin-bottom:5px; }
.sec-desc  { font-size:.88rem; color:var(--sk-slate); line-height:1.65; margin-bottom:32px; max-width:600px; }

/* ── SCALE BLOCKS ── */
.scale-sblock {
  background:var(--sk-cream2); border:1px solid var(--sk-border);
  padding:24px 26px; margin-bottom:22px;
  box-shadow:var(--sk-shadow); border-radius:2px;
}
.sblock-hd {
  font-family:'Playfair Display',serif; font-size:1rem; font-weight:700;
  margin-bottom:8px; display:flex; align-items:center; gap:9px;
}
.sblock-icon {
  width:26px; height:26px; background:var(--sk-ink); color:var(--sk-gold);
  font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  border-radius:2px; flex-shrink:0;
}
.scale-leg {
  font-size:.74rem; color:var(--sk-slate); margin-bottom:16px;
  background:var(--sk-teal-lt); border-left:3px solid var(--sk-teal);
  padding:8px 12px; line-height:1.6; display:flex; gap:12px; flex-wrap:wrap;
}
.scale-leg strong { color:var(--sk-teal); }

/* Scale rows */
.srow {
  display:flex; align-items:center; gap:14px;
  padding:9px 0; border-bottom:1px solid rgba(240,178,19,.13);
}
.srow:last-child { border-bottom:none; }
.srow-label { flex:1; font-size:.85rem; line-height:1.42; }
.dots { display:flex; gap:5px; flex-shrink:0; }
.dlabel { display:flex; flex-direction:column; align-items:center; }
.dlabel input[type="radio"] { display:none; }
.dlabel span {
  width:30px; height:30px; border:2px solid rgba(148,163,184,.20); border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:600; color:var(--sk-slate); transition:all .18s;
}
.dlabel input:checked+span { background:var(--sk-ink); border-color:var(--sk-ink); color:var(--sk-gold); }
.dlabel:hover span { border-color:var(--sk-gold); color:var(--sk-gold); }

/* Role cards */
.scale-rcards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px; }
@media(max-width:500px){ .scale-rcards { grid-template-columns:1fr; } }
.rcard {
  border:2px solid var(--sk-border2); padding:14px 16px; cursor:pointer;
  transition:all .2s; background:var(--sk-cream2); border-radius:2px;
}
.rcard input { display:none; }
.rcard .rname { font-weight:600; font-size:.88rem; margin-bottom:3px; }
.rcard .rsub  { font-size:.76rem; color:var(--sk-slate); }
.rcard:hover { border-color:var(--sk-gold); }
.rcard.sel   { border-color:var(--sk-ink); background:var(--sk-ink); color:var(--mb-gold2); }
.rcard.sel .rsub { color:var(--sk-gold-lt); }

/* ── LOADING STATE ── */
.scale-btn-primary.loading { opacity:.6; pointer-events:none; }
.scale-btn-primary.loading::after { content:' …'; }

/* ── DIVIDER ── */
.scale-divider { border:none; border-top:1px solid var(--sk-border); margin:30px 0; }

/* ════════════════════════════════════════
   TIER BADGES & TIER-SPECIFIC STYLES
   (added in v2.0.0 — 3-tier upgrade)
════════════════════════════════════════ */

/* User badge tier pill */
.sub-tier {
  font-size:.7rem;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-top:4px;
  padding:2px 8px;
  border-radius:3px;
  display:inline-block;
  font-weight:600;
}
.tier-foundation   { background:#0C1A3A; color:#60A5FA; }
.tier-acceleration { background:#131F36; color:#C89A0F; }
.tier-enterprise   { background:#1A2845; color:#C89A0F; }

/* Company tier badges in admin & report */
.co-tier-badge {
  font-size:.65rem;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:3px;
  display:inline-block;
  vertical-align:middle;
  margin-left:8px;
  font-weight:600;
}
.co-tier-foundation   { background:#0C1A3A; color:#7AB8E8; }
.co-tier-acceleration { background:#131F36; color:#F0B213; }
.co-tier-enterprise   { background:#051A10; color:#4ADE80; }

/* Stat cards by tier */
.scale-stat-tier--foundation   { border-top:3px solid #60A5FA; }
.scale-stat-tier--acceleration { border-top:3px solid #C89A0F; }
.scale-stat-tier--enterprise   { border-top:3px solid #C89A0F; }

/* Employee range tier hint in registration form */
.field-hint {
  font-size:.78rem;
  margin-top:5px;
  padding:4px 10px;
  border-radius:3px;
  background:#131F36;
  border-left:3px solid #F0B213;
}

/* Role cards in registration */
#reg-rcards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:6px;
}

/* ════════════════════════════════════════
   TOAST NOTIFICATIONS
════════════════════════════════════════ */
#scale-toast-wrap {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
}
.scale-toast {
  background: #0A1020;
  border: 1px solid #F0B213;
  border-left: 4px solid #F0B213;
  color: #FACC15;
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.5;
  padding: 14px 18px;
  border-radius: 2px;
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .25s ease, transform .25s ease;
  position: relative;
}
.scale-toast.visible { opacity: 1; transform: translateX(0); }
.toast-icon { font-size: 16px; line-height: 1; margin-top: 1px; flex-shrink: 0; }
.toast-msg  { flex: 1; }
.toast-close {
  background: none; border: none; color: rgba(250,204,21,.5);
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
  position: absolute; top: 10px; right: 12px;
}
.toast-close:hover { color: #FACC15; }

/* ════════════════════════════════════════
   PROGRESS BAR
════════════════════════════════════════ */
.scale-progress-wrap {
  background: #131F36;
  border: 1px solid #1E3055;
  border-radius: 3px;
  padding: 14px 20px;
  margin-bottom: 24px;
  transition: border-color .3s;
}
.scale-progress-wrap.complete { border-color: #4ADE80; }
.scale-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94A3B8;
  margin-bottom: 8px;
  font-weight: 600;
}
.scale-progress-wrap.complete .scale-progress-header { color: #4ADE80; }
.scale-progress-track {
  height: 6px;
  background: #1E3055;
  border-radius: 3px;
  overflow: hidden;
}
.scale-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #F0B213, #4ADE80);
  border-radius: 3px;
  transition: width .4s ease;
}

/* ════════════════════════════════════════
   PROFILE EDIT
════════════════════════════════════════ */
.sub-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.scale-btn-edit {
  background: transparent;
  border: 1px solid rgba(240,178,19,.5);
  color: #F0B213;
  font-size: .75rem;
  padding: 5px 12px;
  cursor: pointer;
  letter-spacing: .5px;
  font-family: Georgia, serif;
  transition: all .2s;
}
.scale-btn-edit:hover { background: rgba(240,178,19,.1); border-color: #F0B213; }

/* ════════════════════════════════════════
   FORM IMPROVEMENTS
════════════════════════════════════════ */
.scale-err { display: flex; align-items: flex-start; gap: 8px; }
.err-icon  { flex-shrink: 0; font-size: 14px; margin-top: 1px; }

/* Shake animation for failed login */
@keyframes scale-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-6px); }
  40%,80% { transform: translateX(6px); }
}
.shake { animation: scale-shake .5s ease; }

/* Answered row flash */
.srow.answered { background: rgba(240,178,19,.08) !important; transition: background .6s; }

/* ════════════════════════════════════════
   REGISTRATION SUCCESS PANEL
════════════════════════════════════════ */
.reg-success-meta {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 12px 0;
  font-size: .85rem;
  color: #94A3B8;
}
.reg-success-meta strong { color: #F0B213; }
.reg-success-note {
  font-size: .82rem;
  color: #94A3B8;
  margin: 0 0 20px;
  line-height: 1.6;
}
.ty-icon--success {
  background: #0A1020;
  border: 2px solid #F0B213;
  color: #F0B213;
}

/* ════════════════════════════════════════
   SROW NUMBER COLUMN
════════════════════════════════════════ */
.srow { display: flex; gap: 10px; align-items: flex-start; }
.srow-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: #1A2845;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  margin-top: 2px;
}
.srow-label { flex: 1; }

/* ════════════════════════════════════════
   HERO TIER CHIPS
════════════════════════════════════════ */
.hero-tier-chips { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.htc {
  font-size: .7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.htc em { font-style: normal; opacity: .7; font-weight: 400; font-size: .85em; }
.htc--f { background: rgba(26,95,158,.2); color: #7AB8E8; border: 1px solid rgba(26,95,158,.3); }
.htc--a { background: rgba(200,134,10,.15); color: #FACC15; border: 1px solid rgba(200,134,10,.3); }
.htc--e { background: rgba(240,178,19,.15); color: #F0B213; border: 1px solid rgba(240,178,19,.3); }

/* ════════════════════════════════════════
   SUBMIT SECTION
════════════════════════════════════════ */
.submit-note {
  font-size: .82rem;
  color: #94A3B8;
  margin-bottom: 12px;
  line-height: 1.6;
}
.scale-btn-submit { min-width: 280px; }

/* ════════════════════════════════════════
   THANK YOU BOX DETAIL
════════════════════════════════════════ */
.ty-detail-box {
  background: #131F36;
  border: 1px solid #1E3055;
  border-radius: 3px;
  padding: 16px 20px;
  margin: 16px 0;
  text-align: left;
  font-size: .85rem;
  line-height: 1.7;
  color: #94A3B8;
}
.ty-detail-box p { margin: 0 0 6px; }
.ty-detail-box p:last-child { margin: 0; }

/* ════════════════════════════════════════
   OPEN QUESTIONS SECTION
════════════════════════════════════════ */
.scale-open-qs {
  background: #131F36;
  border: 1px solid #1E3055;
  border-top: 3px solid #F0B213;
  padding: 20px 24px;
  margin: 24px 0;
  border-radius: 0 0 3px 3px;
}
.oq-title {
  font-family: Georgia, serif;
  font-size: 14px;
  color: #F0B213;
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* ════════════════════════════════════════
   SBLOCK TITLE
════════════════════════════════════════ */
.sblock-title { display: flex; align-items: center; gap: 8px; }
.sblock-key {
  background: #0F172A;
  color: #F0B213;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 1px;
}

/* Loading spinner */
.btn-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid rgba(250,204,21,.3);
  border-top-color: #0F172A;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════
   V3.0.0 — PHASE 2 NEW STYLES
════════════════════════════════ */

/* Dashboard tiles */
.scale-dashboard-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 680px) { .scale-dashboard-tiles { grid-template-columns: 1fr; } }

.scale-tile { border: 1px solid #1E3055; padding: 24px; background:var(--sk-cream2); position: relative; }
.scale-tile::before { content:''; display:block; height:4px; position:absolute; top:0; left:0; right:0; background: #1E3055; }
.scale-tile.tile--active::before { background: #F0B213; }
.scale-tile.tile--done::before   { background: #4ADE80; }
.scale-tile.tile--locked::before { background: #94A3B8; }

.tile-header   { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.tile-seg-badge{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:2px; background:#0F172A; color:#F0B213; padding:3px 10px; border-radius:2px; }
.tile-seg-badge--s2 { background:#0C1A3A; color:#7AB8E8; }

.tile-status { font-size:11px; font-weight:600; }
.status--done   { color:#4ADE80; }
.status--open   { color:#C89A0F; }
.status--locked { color:#94A3B8; }

.tile-title { font-family:Georgia,serif; font-size:20px; font-weight:700; color:#FACC15; line-height:1.3; margin-bottom:10px; }
.tile-desc  { font-size:12px; color:#94A3B8; line-height:1.7; margin-bottom:14px; }

.tile-meta  { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.tile-role-tag  { font-size:10px; background:#1A2845; color:#94A3B8; padding:2px 8px; border-radius:2px; font-weight:600; }
.tile-tier-tag  { font-size:10px; padding:2px 8px; border-radius:2px; font-weight:600; }
.tile-attempt-tag{ font-size:10px; background:#0C1A3A; color:#60A5FA; padding:2px 8px; border-radius:2px; font-weight:600; }

.tile-btn { display:inline-block; }
.tile-btn--s2 {
  background:#F0B213 !important;
  color:#0F172A !important;
  border:2px solid #F0B213 !important;
  font-weight:700 !important;
}
.tile-btn--s2:hover {
  background:#C89A0F !important;
  color:#0F172A !important;
  border-color:#C89A0F !important;
}

.tile-submitted-msg { font-size:12px; color:#94A3B8; line-height:1.6; font-style:italic; }

.tile-history { margin-top:14px; padding-top:12px; border-top:1px solid #1A2845; }
.tile-history-label { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:#94A3B8; margin-bottom:6px; font-weight:600; }
.tile-history-chip  { font-size:11px; background:#131F36; border:1px solid #1E3055; padding:2px 8px; border-radius:12px; display:inline-block; margin:2px 3px 2px 0; }
.tile-history-chip em { color:#94A3B8; font-style:normal; }

/* S2 unlock form */
.s2-unlock-form { display:flex; flex-direction:column; gap:10px; }
.s2-code-input  { padding:10px 14px; border:1px solid #1E3055; font-size:14px; letter-spacing:2px; font-family:Courier,monospace; font-weight:700; color:#F0B213; background:#131F36; }
.s2-code-input:focus { border-color:#F0B213; outline:none; }

/* Legend bar (S1) */
.scale-legend-bar { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#131F36; border:1px solid #1E3055; border-left:4px solid #F0B213; margin-bottom:16px; flex-wrap:wrap; }
.slb-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#94A3B8; white-space:nowrap; }
.slb-item  { font-size:11px; color:#94A3B8; white-space:nowrap; }

/* Section separator (replaces headings in S1) */
.scale-section-sep { height:1px; background:#1A2845; margin:16px 0; }

/* Compact hero for survey screens */
.scale-hero--compact { padding: 20px 0; }
.scale-hero-title--sm { font-size:22px; }

/* ── S2 Survey styles ── */
.scale-app--s2 .scale-hero--s2 { /* slightly different header for S2 */ }

.s2-instructions { background:#131F36; border:1px solid #1E3055; border-left:4px solid #0C1A3A; padding:16px 20px; margin-bottom:20px; }
.s2-instructions p { font-size:12px; color:#94A3B8; line-height:1.7; margin-bottom:10px; }
.s2-scale-row   { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px) { .s2-scale-row { grid-template-columns:1fr; } }

.s2-scale-block { }
.s2-scale-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#F0B213; margin-bottom:6px; }
.s2-scale-item  { font-size:11px; color:#94A3B8; margin-bottom:3px; }

/* S2 competency block */
.s2-comp-block { border:1px solid #1E3055; margin-bottom:20px; transition: border-color .3s; }
.s2-comp-block.comp-answered { border-color:#4ADE80; }

.s2-comp-num { background:#0F172A; color:#F0B213; font-size:10px; font-weight:700; letter-spacing:2px; padding:8px 14px; display:flex; align-items:baseline; gap:6px; }
.s2-comp-num-of { font-size:9px; opacity:.6; font-weight:400; }

.s2-question-block { padding:16px 20px; }
.s2-question-block--eff { background:#131F36; border-top:1px solid #1E3055; }

.s2-q-type-badge { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:#94A3B8; margin-bottom:8px; }
.s2-q-type-badge--eff { color:#7AB8E8; }

.s2-q-text { font-size:13px; color:#FACC15; line-height:1.6; margin-bottom:14px; }

/* S2 dot scale */
.s2-dots { display:flex; gap:8px; flex-wrap:wrap; }
.s2-dlabel { display:flex; flex-direction:column; align-items:center; cursor:pointer; flex:1; min-width:55px; }
.s2-dlabel input[type="radio"] { display:none; }
.s2-dot-val { width:38px; height:38px; border-radius:50%; border:2px solid #1E3055; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#94A3B8; transition:all .15s; }
.s2-dot-label { font-size:9px; color:#94A3B8; margin-top:4px; text-align:center; line-height:1.3; }
.s2-dlabel input:checked + .s2-dot-val { background:#0F172A; border-color:#F0B213; color:#F0B213; }
.s2-dlabel:hover .s2-dot-val { border-color:#F0B213; background:#131F36; }

/* S2 progress bar */
.scale-progress-bar--s2 { background: linear-gradient(90deg, #0C1A3A, #4ADE80); }

/* Ty icon S2 */
.ty-icon--s2 { background:#0C1A3A; border:2px solid #7AB8E8; color:#7AB8E8; }

/* ═══════════════════════════════════════════════════════════════
   SCALE™ COMPREHENSIVE THEME OVERRIDE
   All rules scoped under .scale-app with !important
   Ensures visibility regardless of active WordPress theme
   Background: dark navy (#0F172A)
   H1/Logo: gold (#F0B213)
   Body text: bright yellow (#FACC15)
   White: #FFFFFF for inputs and high-contrast needs
═══════════════════════════════════════════════════════════════ */

/* ── Reset inside plugin scope ── */
.scale-app * { box-sizing:border-box; }

/* ── Backgrounds ── */
.scale-app                                 { background:#0F172A !important; color:#FACC15 !important; }
.scale-app .scale-hero                     { background:#0A1020 !important; color:#FACC15 !important; }
.scale-app .scale-form-card                { background:#131F36 !important; color:#FACC15 !important; }
.scale-app .scale-sblock                   { background:#131F36 !important; color:#FACC15 !important; }
.scale-app .scale-tile                     { background:#131F36 !important; color:#FACC15 !important; }
.scale-app .scale-ty-box                   { background:#0A1020 !important; color:#FACC15 !important; }
.scale-app .scale-progress-wrap            { background:#131F36 !important; color:#FACC15 !important; }
.scale-app .s2-question-block              { background:#0F172A !important; color:#FACC15 !important; }
.scale-app .s2-question-block--eff         { background:#131F36 !important; color:#FACC15 !important; }
.scale-app .s2-comp-block                  { background:#0F172A !important; }
.scale-app .scale-legend-bar               { background:#131F36 !important; }
.scale-app .scale-open-qs                  { background:#131F36 !important; }
.scale-app .ty-detail-box                  { background:#131F36 !important; color:#94A3B8 !important; }
.scale-app #scale-profile-edit             { background:#131F36 !important; }
.scale-app #scale-profile-view             { background:transparent !important; }

/* ── Headings — H1 gold, H2+ bright yellow ── */
.scale-app h1, .scale-app h1 *            { color:#F0B213 !important; }
.scale-app h2                              { color:#F0B213 !important; font-family:'Playfair Display',Georgia,serif !important; }
.scale-app h3                              { color:#FACC15 !important; }
.scale-app .scale-hero-title               { color:#F0B213 !important; font-family:'Playfair Display',Georgia,serif !important; }
.scale-app .scale-hero-title em            { color:#F0B213 !important; }
.scale-app .sfc-title                      { color:#F0B213 !important; font-family:'Playfair Display',Georgia,serif !important; }
.scale-app .sec-title                      { color:#F0B213 !important; }
.scale-app .tile-title                     { color:#FACC15 !important; }
.scale-app .oq-title                       { color:#F0B213 !important; }
.scale-app .s2-scale-title                 { color:#F0B213 !important; }
.scale-app .scale-ty-box h2                { color:#F0B213 !important; }
.scale-app .sblock-hd                      { color:#F0B213 !important; }
.scale-app .s2-comp-num                    { color:#F0B213 !important; background:#0A1020 !important; }

/* ── Body / content text ── */
.scale-app p                               { color:#FACC15; }
.scale-app .sfc-sub                        { color:#94A3B8 !important; }
.scale-app .tile-desc                      { color:#FACC15 !important; }
.scale-app .srow-label                     { color:#FACC15 !important; }
.scale-app .s2-q-text                      { color:#FACC15 !important; }
.scale-app .scale-hero-sub                 { color:rgba(250,204,21,0.9) !important; }
.scale-app .submit-note                    { color:#94A3B8 !important; }
.scale-app .scale-hint                     { color:#94A3B8 !important; }
.scale-app .reg-success-note               { color:#94A3B8 !important; }
.scale-app .scale-progress-header          { color:#94A3B8 !important; }
.scale-app .slb-item                       { color:#94A3B8 !important; }

/* ── Labels ── */
.scale-app label                           { color:#94A3B8 !important; }
.scale-app .scale-field label              { color:#94A3B8 !important; }
.scale-app .s2-q-type-badge                { color:#94A3B8 !important; }
.scale-app .s2-q-type-badge--eff           { color:#7AB8E8 !important; }
.scale-app .s2-scale-item                  { color:#94A3B8 !important; }

/* ── Badges ── */
.scale-app .scale-badge                    { color:#F0B213 !important; border-color:#F0B213 !important; }
.scale-app .tile-seg-badge                 { color:#F0B213 !important; background:#0A1020 !important; }
.scale-app .tile-seg-badge--s2             { color:#7AB8E8 !important; background:#0C1A3A !important; }

/* ── Auth tab ── */
.scale-app .scale-auth-tab                 { color:#94A3B8 !important; }
.scale-app .scale-auth-tab.active          { color:#F0B213 !important; }

/* ── INPUTS — white text, always visible ── */
.scale-app input[type="text"],
.scale-app input[type="email"],
.scale-app input[type="password"],
.scale-app input[type="tel"],
.scale-app input[type="number"],
.scale-app input[type="date"],
.scale-app input[type="search"],
.scale-app select,
.scale-app textarea {
  background:#131F36 !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border:1.5px solid rgba(240,178,19,0.3) !important;
  border-radius:2px !important;
  padding:10px 13px !important;
  font-family:'DM Sans',sans-serif !important;
  font-size:.93rem !important;
}
.scale-app input::placeholder,
.scale-app textarea::placeholder {
  color:rgba(255,255,255,0.4) !important;
  -webkit-text-fill-color:rgba(255,255,255,0.4) !important;
}
.scale-app select option {
  background:#131F36 !important;
  color:#FFFFFF !important;
}
.scale-app input:focus,
.scale-app select:focus,
.scale-app textarea:focus {
  border-color:#F0B213 !important;
  outline:none !important;
}
/* Autofill override — Chrome/Safari */
.scale-app input:-webkit-autofill,
.scale-app input:-webkit-autofill:hover,
.scale-app input:-webkit-autofill:focus {
  -webkit-text-fill-color:#FFFFFF !important;
  -webkit-box-shadow:0 0 0px 1000px #131F36 inset !important;
  box-shadow:0 0 0px 1000px #131F36 inset !important;
  border-color:rgba(240,178,19,0.3) !important;
}

/* ── S2 code input ── */
.scale-app .s2-code-input {
  color:#F0B213 !important;
  -webkit-text-fill-color:#F0B213 !important;
  background:#131F36 !important;
  border:1px solid #1E3055 !important;
  letter-spacing:2px !important;
}

/* ── Buttons — Primary: dark bg + gold text ── */
.scale-app .scale-btn-primary {
  background:#0F172A !important;
  color:#F0B213 !important;
  border:2px solid #F0B213 !important;
  font-weight:700 !important;
}
.scale-app .scale-btn-primary:hover {
  background:#F0B213 !important;
  color:#0F172A !important;
}

/* ── S2 Begin Assessment — gold CTA ── */
.scale-app .tile-btn--s2 {
  background:#F0B213 !important;
  color:#0F172A !important;
  border:2px solid #F0B213 !important;
  font-weight:700 !important;
  cursor:pointer !important;
  display:inline-block !important;
  pointer-events:all !important;
  text-decoration:none !important;
}
.scale-app .tile-btn--s2:hover {
  background:#C89A0F !important;
  color:#0F172A !important;
  border-color:#C89A0F !important;
  text-decoration:none !important;
}

/* ── Survey question dots ── */
.scale-app .dlabel span                    { color:#94A3B8 !important; border-color:rgba(148,163,184,0.3) !important; }
.scale-app .dlabel input:checked+span      { background:#0F172A !important; border-color:#F0B213 !important; color:#F0B213 !important; }
.scale-app .dlabel:hover span              { border-color:#F0B213 !important; color:#F0B213 !important; }
.scale-app .s2-dot-val                     { color:#94A3B8 !important; border-color:rgba(148,163,184,0.3) !important; }
.scale-app .s2-dlabel input:checked+.s2-dot-val { background:#0F172A !important; border-color:#F0B213 !important; color:#F0B213 !important; }
.scale-app .s2-dlabel:hover .s2-dot-val    { border-color:#F0B213 !important; }
.scale-app .s2-dot-label                   { color:#94A3B8 !important; }

/* ── Role cards ── */
.scale-app .rcard                          { background:#131F36 !important; color:#FACC15 !important; border-color:rgba(240,178,19,0.2) !important; }
.scale-app .rcard .rname                   { color:#FACC15 !important; }
.scale-app .rcard .rsub                    { color:#94A3B8 !important; }
.scale-app .rcard.sel                      { background:#0F172A !important; border-color:#F0B213 !important; color:#FACC15 !important; }
.scale-app .rcard:hover                    { border-color:#F0B213 !important; }

/* ── Registration success ── */
.scale-app .scale-reg-id-display           { color:#F0B213 !important; background:#0A1020 !important; }
.scale-app .reg-success-meta strong        { color:#F0B213 !important; }
.scale-app #display-reg-id                 { color:#F0B213 !important; }
.scale-app #display-reg-tier               { color:#F0B213 !important; }
.scale-app #display-reg-role               { color:#F0B213 !important; }

/* ── Field hint (tier hint) ── */
.scale-app .field-hint                     { color:#FACC15 !important; background:#131F36 !important; }
.scale-app .field-hint strong              { color:#F0B213 !important; }

/* ── Hero tier chips ── */
.scale-app .htc--f                         { color:#7AB8E8 !important; }
.scale-app .htc--a                         { color:#FACC15 !important; }
.scale-app .htc--e                         { color:#F0B213 !important; }

/* ── Tile status text ── */
.scale-app .status--done                   { color:#4ADE80 !important; }
.scale-app .status--open                   { color:#C89A0F !important; }
.scale-app .status--locked                 { color:#94A3B8 !important; }
.scale-app .tile-role-tag                  { color:#94A3B8 !important; background:#1A2845 !important; }
.scale-app .tile-submitted-msg             { color:#94A3B8 !important; }

/* ── S2 unlock form ── */
.scale-app .s2-unlock-form .scale-btn-primary {
  background:#F0B213 !important;
  color:#0F172A !important;
  border-color:#F0B213 !important;
}

/* ── Error messages ── */
.scale-app .scale-err                      { color:#F87171 !important; }

/* ── Profile edit form ── */
.scale-app #scale-profile-edit input       { color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; }
.scale-app #scale-profile-edit label       { color:#94A3B8 !important; }

/* Fields set by the organisation (v4.13) */
.scale-app .scale-field input[readonly] { opacity: .65; cursor: not-allowed; }
.tile-cycle-note { font-size:11px; color:#FCD34D; margin-bottom:8px; letter-spacing:.3px; }

/* ══ S2 Part B — KPI results (v4.15) ══ */
.s2-kpi-section { border:1px solid #1E3055; margin:8px 0 22px; background:#131F36; }
.s2-kpi-head { padding:16px 20px 8px; }
.s2-kpi-badge { display:inline-block; background:#0F172A; color:#F0B213; font-size:10px; font-weight:700; letter-spacing:2px; padding:4px 10px; margin-bottom:8px; }
.s2-kpi-head h3 { color:#F0B213; font-family:Georgia,serif; margin:0 0 6px; font-size:1.1rem; }
.s2-kpi-head p { color:#94A3B8; font-size:13px; line-height:1.6; margin:0; }
.s2-kpi-kra { background:#0F172A; color:#FACC15; font-weight:700; font-size:12px; padding:8px 20px; margin-top:10px; letter-spacing:.3px; }
.s2-kpi-kra span { color:#94A3B8; font-weight:400; font-size:11px; margin-left:6px; }
.s2-kpi-row { display:grid; grid-template-columns:minmax(0,1.6fr) 150px minmax(0,1.2fr); gap:10px; align-items:center; padding:10px 20px; border-bottom:1px solid #1A2845; }
.s2-kpi-title { color:#FACC15; font-size:13.5px; }
.s2-kpi-title small { display:block; color:#94A3B8; font-size:11.5px; margin-top:2px; }
.s2-kpi-row input { width:100%; box-sizing:border-box; background:#1A2845; border:1px solid #1E3055; color:#FACC15; padding:8px 10px; font-size:13px; }
.s2-kpi-row.s2-kpi-missing .s2-kpi-actual { border-color:#F87171; }
@media (max-width:640px) { .s2-kpi-row { grid-template-columns:1fr; } }