/* © 2026 Padayachy Advisory. All rights reserved. Proprietary & confidential. */
/* ComplyOne — public (supplier / client / new-joiner facing) experience.
   Loaded after styles.css, so it reuses the :root brand tokens. This is the face
   TSL Legal presents to third parties: a restrained "Big-5 law firm" aesthetic —
   deep-neutral ground, a single disciplined accent, serif display headings, and
   generous whitespace. The internal console (styles.css) stays distinct. */

:root{
  --pub-ink:#16222e;            /* near-black ink for body copy */
  --pub-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --pub-gold:#9a7b4f;           /* the one disciplined accent (muted bronze/gold) */
  --pub-gold-soft:#c8b189;
  --pub-line:#e4e7ec;
}

body{background:#101c27;min-height:100vh;margin:0;-webkit-font-smoothing:antialiased}
/* Calm, static deep-neutral ground (no animation) — confident, not "SaaS". */
.pub-bg{position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1100px 560px at 84% -10%,rgba(154,123,79,.10) 0,transparent 55%),
    radial-gradient(900px 620px at -10% 110%,rgba(255,255,255,.04) 0,transparent 52%),
    linear-gradient(168deg,#0d1822 0,#142536 58%,#19314a 100%)}

.pub-wrap{max-width:880px;margin:0 auto;padding:44px 20px 64px}
.pub-top{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px}
.pub-top img{width:188px;max-width:64%;height:auto;filter:drop-shadow(0 6px 20px rgba(0,0,0,.4))}
.pub-trust{color:#aebfd2;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.pub-trust span{display:inline-flex;align-items:center;gap:6px}

.panel{background:#fff;border-radius:10px;padding:40px 40px;border:1px solid rgba(255,255,255,.06);
  box-shadow:0 24px 64px rgba(7,15,25,.45);position:relative}
/* hairline gold rule across the top edge — a quiet premium signal */
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:10px 10px 0 0;
  background:linear-gradient(90deg,transparent,var(--pub-gold-soft),var(--pub-gold),var(--pub-gold-soft),transparent)}

.panel h2{margin:0 0 6px;font-family:var(--pub-serif);font-weight:600;font-size:27px;line-height:1.2;letter-spacing:-.2px;color:var(--pub-ink)}
.panel h3{font-family:var(--pub-serif);font-weight:600;font-size:18px;letter-spacing:-.1px;color:var(--pub-ink)}
.panel h4{font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--pub-ink)}
.panel .lead{color:#56636f;font-size:14.5px;line-height:1.7;margin:0 0 20px}
.panel label{font-size:12.5px;color:#4a5560;font-weight:600;letter-spacing:.01em}

/* Cards within the public panels (supplier portal sections) — refined, airy. */
.panel .card{border:1px solid var(--pub-line);border-radius:10px;box-shadow:none;margin:0 0 16px;background:#fff}
.panel .card .bd{padding:20px 22px}
.panel .card .hd{padding:14px 22px}
.panel table{font-size:13.5px}
.panel table th{font-weight:600;color:#6a7682;letter-spacing:.02em;border-bottom:1px solid var(--pub-line)}
.panel table td{border-bottom:1px solid #eef1f4}

.pub-foot{text-align:center;color:#92a6bd;font-size:12px;margin-top:22px;line-height:1.8}
.pub-foot b{color:#cdd9e7}

/* Progress for multi-step questionnaires */
.pub-count{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px}
.pub-prog{height:5px;background:var(--neu);border-radius:6px;overflow:hidden;margin:0 0 22px}
.pub-prog>i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--pub-gold),var(--pub-gold-soft));transition:width .4s cubic-bezier(.2,.8,.3,1)}

/* Section grouping for long questionnaires */
.qsection{margin-bottom:24px}
.qsec-head{display:flex;align-items:center;gap:12px;margin:24px 0 14px;font-family:var(--pub-serif);font-size:18px;font-weight:600;color:var(--pub-ink);letter-spacing:-.1px}
.qsec-head:first-child{margin-top:6px}
.qsec-step{flex-shrink:0;width:28px;height:28px;border-radius:7px;background:var(--pub-ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}

/* Question cards */
.qcard{border:1px solid var(--pub-line);border-radius:10px;padding:18px 20px;margin-bottom:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
.qcard:focus-within{border-color:var(--pub-gold);box-shadow:0 0 0 3px rgba(154,123,79,.16)}
.qcard .qn{font-weight:700;color:var(--ink2);display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.qcard .qnum{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:#f1ece3;color:var(--pub-gold);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:1px}
.choice{transition:border-color .14s,background .14s,box-shadow .14s}
.choice:has(input:checked){border-color:var(--pub-gold);background:#faf7f1;box-shadow:inset 0 0 0 1px var(--pub-gold)}

.reassess-banner{background:var(--warn-bg);border:1px solid #e8c98a;color:#7a5610;border-radius:10px;padding:12px 15px;font-size:13.5px;line-height:1.55;margin:6px 0 14px}
.evidence-bin{border:1px dashed var(--line2);border-radius:10px;padding:14px 16px;margin:14px 0}
.ev-req{border:1px solid var(--pub-line);border-radius:9px;padding:10px 12px;margin-bottom:8px;background:#fff}
.ev-req .ev-name{font-size:13.5px;font-weight:600;color:var(--ink2)}
.ev-req .ev-stat{font-weight:600}
.pub-submit{width:100%;justify-content:center;font-size:15px;padding:13px;margin-top:8px}

/* Animated success state */
.pub-success{text-align:center;padding:12px 6px}
.check{width:78px;height:78px;border-radius:50%;background:var(--ok-bg);margin:4px auto 16px;display:flex;align-items:center;justify-content:center;animation:popin .45s cubic-bezier(.2,1.35,.4,1)}
.check svg{width:42px;height:42px;stroke:var(--ok);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:52;stroke-dashoffset:52;animation:draw .55s .18s ease forwards}
@keyframes popin{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
.pub-success h2{margin:0 0 6px}
.refbox{display:inline-block;margin-top:12px;background:#faf7f1;border:1px dashed var(--pub-gold-soft);border-radius:10px;padding:10px 18px;font-size:13px;color:var(--mut)}
.refbox b{font-size:16px;color:var(--pub-ink);letter-spacing:.02em}

/* Score badge for quiz results */
.score-big{width:100px;height:100px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:6px auto 14px;font-weight:800;animation:popin .45s cubic-bezier(.2,1.35,.4,1)}
.score-big .pct{font-size:30px;line-height:1}
.score-big .cap{font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-top:3px;opacity:.85}
.score-big.pass{background:var(--ok-bg);color:var(--ok)}
.score-big.failr{background:var(--bad-bg);color:var(--bad)}

.pub-error{text-align:center;color:var(--mut);padding:18px 6px}
.pub-error .ex{font-size:34px;margin-bottom:6px}

/* Supplier record tabs — elegant underline, distinct from the internal console. */
.pub-tabs{display:flex;gap:6px;border-bottom:1px solid var(--pub-line);margin:0 0 20px}
.pub-tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:10px 16px;margin-bottom:-1px;font:inherit;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8a97a6;cursor:pointer;transition:color .15s,border-color .15s}
.pub-tabs button:hover:not([disabled]){color:var(--pub-ink)}
.pub-tabs button.active{color:var(--pub-ink);border-bottom-color:var(--pub-gold)}
.pub-tabs button[disabled]{opacity:.4;cursor:default}

/* Lightweight modal for compliance uploads */
.modalmask{position:fixed;inset:0;background:rgba(13,24,34,.5);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.modalbox{background:#fff;border-radius:10px;padding:24px;max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.modalbox h3{font-family:var(--pub-serif);font-weight:600}
.chiplabel{cursor:pointer;user-select:none}

/* Responsive — usable on tablet (iPad) and phone. */
@media(max-width:680px){
  .pub-wrap{padding:28px 14px 44px}
  .panel{padding:26px 20px}
  .panel h2{font-size:23px}
  .panel .card .bd,.panel .card .hd{padding:14px 16px}
}