/* Shared styles for /spiritual-gifts-assessment and /five-fold-office-assessment */
  :root{
    --black:#0a0a0a; --white:#ffffff; --paper:#f6f4ef; --paper-2:#ece8df;
    --ink:#1c1a17; --ink-soft:#57534d; --line:#d9d3c7;
    --ember:#c89b3c; --ember-dark:#8f6a1f; --ember-soft:#f3e7cc;
    --font-display:'Archivo', system-ui, sans-serif;
    --font-body:'Inter', system-ui, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased;}
  a{color:var(--ember-dark);}
  button{font-family:inherit;}
  .wrap{max-width:720px; margin:0 auto; padding:0 16px;}

  /* Header */
  .topbar{background:var(--black); color:var(--white);}
  .topbar .wrap{display:flex; align-items:center; justify-content:space-between; min-height:56px; gap:12px;}
  .brand{font-family:var(--font-display); font-weight:800; letter-spacing:.02em; color:var(--white); text-decoration:none; font-size:15px; text-transform:uppercase;}
  .topbar-links{display:flex; gap:14px; align-items:center; font-size:14px;}
  .topbar-links a{color:#d8d4cb; text-decoration:none;}
  .topbar-links a:hover{color:var(--white);}
  .topbar-links button{background:none; border:0; color:#d8d4cb; font-size:14px; cursor:pointer; padding:0;}

  /* Hero */
  .hero{background:var(--black); color:var(--white); padding:40px 0 48px;}
  .eyebrow{font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ember);}
  h1{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,7vw,46px); line-height:1.05; margin:10px 0 16px; letter-spacing:-.01em;}
  h2{font-family:var(--font-display); font-weight:800; font-size:24px; line-height:1.15; margin:0 0 10px;}
  h3{font-family:var(--font-display); font-weight:700; font-size:18px; margin:0 0 6px;}
  .hero p{color:#d8d4cb; font-size:17px; margin:0 0 12px;}
  .meta{display:flex; gap:18px; flex-wrap:wrap; color:#a8a399; font-size:14px; margin:18px 0 26px;}

  .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:10px; padding:14px 22px; font-weight:600; font-size:16px; cursor:pointer; text-decoration:none; transition:transform .05s, opacity .2s;}
  .btn:active{transform:translateY(1px);}
  .btn[disabled]{opacity:.4; cursor:not-allowed;}
  .btn-ember{background:var(--ember); color:var(--black);}
  .btn-dark{background:var(--black); color:var(--white);}
  .btn-ghost{background:transparent; color:inherit; border:1.5px solid currentColor;}
  .btn-light{background:var(--white); color:var(--black); border:1.5px solid var(--line);}
  .btn-row{display:flex; gap:12px; flex-wrap:wrap;}

  section{padding:36px 0;}
  .card{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px;}
  .card + .card{margin-top:14px;}
  .muted{color:var(--ink-soft);}
  .small{font-size:14px;}

  /* Best-use note */
  .note h3{margin-top:18px;}
  .note h3:first-child{margin-top:0;}
  .note p{margin:0 0 6px;}
  .verse{border-left:3px solid var(--ember); padding:4px 0 4px 14px; margin:12px 0; font-style:italic; color:var(--ink);}
  .verse cite{display:block; font-style:normal; font-size:13px; color:var(--ink-soft); margin-top:4px;}

  /* Quiz */
  .progress-shell{position:sticky; top:0; z-index:5; background:var(--paper); border-bottom:1px solid var(--line); padding:12px 0;}
  .progress-text{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft); margin-bottom:8px;}
  .progress{height:8px; background:var(--paper-2); border-radius:99px; overflow:hidden;}
  .progress > div{height:100%; background:var(--ember); width:0; transition:width .3s;}
  .q{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px; margin:14px 0;}
  .q.missing{border-color:#c0392b; box-shadow:0 0 0 2px rgba(192,57,43,.15);}
  .q-text{font-weight:500; font-size:16.5px; margin:0 0 14px;}
  .q-num{color:var(--ink-soft); font-size:13px; font-weight:600; display:block; margin-bottom:4px;}
  .scale{display:grid; grid-template-columns:repeat(5,1fr); gap:6px;}
  .scale label{position:relative; display:block; cursor:pointer;}
  .scale input{position:absolute; opacity:0; pointer-events:none;}
  .scale span{display:flex; align-items:center; justify-content:center; height:46px; border:1.5px solid var(--line); border-radius:10px; font-weight:600; font-size:16px; color:var(--ink-soft); background:var(--paper); transition:all .12s;}
  .scale input:checked + span{background:var(--black); color:var(--white); border-color:var(--black);}
  .scale input:focus-visible + span{outline:2px solid var(--ember); outline-offset:2px;}
  .scale-ends{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft); margin-top:6px;}
  .legend{font-size:14px; color:var(--ink-soft); margin:14px 0 0;}
  .scale-key{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:10px; text-align:center; font-size:11.5px; color:var(--ink-soft); line-height:1.25;}
  .scale-key b{display:block; font-size:14px; color:var(--ink);}
  .legend b{color:var(--ink);}
  .quiz-nav{display:flex; justify-content:space-between; gap:12px; margin:22px 0 40px;}
  .quiz-error{color:#c0392b; font-size:14px; margin-top:-8px; min-height:20px;}

  /* Sign-in wall */
  .wall{text-align:center;}
  .wall .card{padding:30px 22px;}
  .auth-btns{display:flex; flex-direction:column; gap:10px; max-width:320px; margin:22px auto 0;}
  .auth-btns .btn{width:100%;}
  .btn svg{width:18px; height:18px; flex:none;}

  /* Results */
  .top-card{border-top:4px solid var(--ember);}
  .rank-badge{display:inline-block; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ember-dark); background:var(--ember-soft); padding:4px 10px; border-radius:99px; margin-bottom:10px;}
  .score-line{font-size:14px; color:var(--ink-soft); margin:0 0 12px;}
  .path-line{font-weight:600; color:var(--ember-dark); margin:0 0 10px;}
  .functions{margin:10px 0 0; padding-left:20px;}
  .functions li{margin:4px 0;}
  .res-list{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px;}
  .res-list a{display:block; padding:12px 14px; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); background:var(--paper);}
  .res-list a:hover{border-color:var(--ember);}
  .res-list b{display:block;}
  .res-list span{font-size:13px; color:var(--ink-soft);}
  .bars{display:grid; gap:12px;}
  .bar-row{display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:baseline;}
  .bar-name{font-weight:600; font-size:15px;}
  .bar-score{font-size:13px; color:var(--ink-soft); white-space:nowrap;}
  .bar-track{grid-column:1 / -1; height:10px; background:var(--paper-2); border-radius:99px; overflow:hidden;}
  .bar-fill{height:100%; border-radius:99px; background:#b9b2a4;}
  .bar-fill.top{background:var(--ember);}
  .band-key{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; color:var(--ink-soft); margin:0 0 18px;}
  .soon{background:var(--black); color:var(--white); border:0;}
  .soon p{color:#d8d4cb;}
  .share-row{display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding:14px; border:1px solid rgba(255,255,255,.2); border-radius:10px; cursor:pointer;}
  .share-row input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--ember); flex:none;}
  .share-row small{color:#a8a399; font-size:13px;}
  .share-status{font-size:13px; color:var(--ember); margin-top:8px; min-height:18px;}
  .save-warn{background:#fff4e5; border:1px solid #f0c27b; color:#7a4b00; border-radius:10px; padding:12px 14px; font-size:14px; margin-bottom:16px;}
  .loading{padding:80px 0; text-align:center; color:var(--ink-soft);}
  .hidden{display:none !important;}
  .keep-card{margin-top:14px; background:var(--paper-2); border-color:var(--paper-2);}
  @media print{
    .topbar, footer, .no-print, .soon, .btn, .btn-row{display:none !important;}
    html, body{background:#fff;}
    .hero{background:#fff; color:#000; padding:0 0 10px;}
    .hero p{color:#333;}
    section{padding:12px 0;}
    .card{break-inside:avoid; border-color:#ccc;}
    .bar-fill.top{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
    .bar-fill, .bar-track{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  }
  footer{padding:30px 0 50px; color:var(--ink-soft); font-size:13px; text-align:center;}
  footer a{color:var(--ink-soft);}