:root{
  --theme-bg:#ffffff;
  --theme-ink:#10151f;
  --theme-muted:#5a6577;
  --theme-line:#d7e0ec;
  --theme-panel:#ffffff;
  --theme-accent:#0d7a6f;
}

html,body{scroll-behavior:smooth}
body{background:var(--theme-bg)!important;color:var(--theme-ink)!important;transition:background .3s ease,color .25s ease;padding-bottom:0}

.lang-toggle,.tile,.totals,.quiz,.sidenav{transition:all .26s ease}
.tile,.totals,.quiz,.sidenav,.lang-toggle{border-color:var(--theme-line)!important;background:var(--theme-panel)}
.tile{will-change:transform}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 24px rgba(16,21,31,.08)}
.tile.selected{box-shadow:0 0 0 2px rgba(13,122,111,.18) inset,0 12px 20px rgba(16,21,31,.08)}

/* Clarity style (locked) */
body[data-theme="clarity"]::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:linear-gradient(rgba(16,21,31,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(16,21,31,.02) 1px,transparent 1px);
  background-size:28px 28px;
  opacity:.35;
}
body[data-theme="clarity"] .shell{max-width:1240px;grid-template-columns:240px 1fr;gap:44px}
body[data-theme="clarity"] .sidenav{position:sticky;top:24px;min-height:80vh;border-right:1px solid var(--theme-line);padding-right:18px}
body[data-theme="clarity"] .brand{font-weight:800;letter-spacing:.1em;margin:0 0 20px !important}
body[data-theme="clarity"] .sidenav nav{display:flex;flex-direction:column;gap:10px !important;margin:0;padding:0}
body[data-theme="clarity"] .sidenav nav a{position:relative;padding:8px 10px !important;border:1px solid transparent;border-left:3px solid transparent;border-radius:6px;font-weight:700;line-height:1.2}
body[data-theme="clarity"] .sidenav nav a:hover{border-color:#cfd9e8;border-left-color:var(--theme-accent);background:#f5f9ff}
body[data-theme="clarity"] .content header{border-bottom:1px solid var(--theme-line);letter-spacing:.1em;font-weight:700}
body[data-theme="clarity"] h1{position:relative;max-width:12ch}
body[data-theme="clarity"] h1::after{content:"";display:block;width:72px;height:4px;margin-top:16px;background:var(--theme-accent);border-radius:999px}
body[data-theme="clarity"] .tile{border-radius:8px;border-width:1px}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.reveal.in-view{opacity:1;transform:none}

@media (max-width:980px){
  body[data-theme="clarity"] .shell{grid-template-columns:1fr}
  body[data-theme="clarity"] .sidenav nav{flex-direction:row !important;flex-wrap:wrap;gap:10px !important}
  body[data-theme="clarity"] .sidenav nav a{padding:6px 10px !important}
}

.verilith-legal-floating{position:static;z-index:1;width:100%;margin:26px 0 0;padding:10px 12px 14px;border-top:1px solid var(--theme-line);background:transparent}
.verilith-legal-floating__links{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.76rem;line-height:1.25;color:#6a7280;letter-spacing:.01em;white-space:normal;flex-wrap:wrap}
.verilith-legal-floating__links a{text-decoration:none;color:inherit}
.verilith-legal-floating__links a:hover{text-decoration:underline}

/* Mobile compatibility layer (desktop-safe: only applies at tablet/phone widths) */
@media (max-width:980px){
  body{padding-bottom:0 !important}

  .lang-toggle{
    position:fixed !important;
    top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right:12px !important;
    left:auto !important;
    transform:none !important;
    z-index:80;
    margin:0 !important;
  }

  .shell{
    padding:calc(env(safe-area-inset-top, 0px) + 64px) 14px 84px !important;
    gap:12px !important;
  }

  .sidenav,
  body[data-theme="clarity"] .sidenav{
    position:static !important;
    top:auto !important;
    min-height:auto !important;
    border-right:none !important;
    border-bottom:1px solid var(--theme-line, #d7e0ec) !important;
    padding-right:0 !important;
    padding-bottom:8px !important;
  }

  .brand{margin:0 0 8px !important}

  .sidenav nav,
  body[data-theme="clarity"] .sidenav nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:8px !important;
    padding-bottom:2px;
  }

  .sidenav nav a,
  body[data-theme="clarity"] .sidenav nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    min-height:32px;
    padding:4px 2px !important;
    border:0 !important;
    border-bottom:1px solid transparent !important;
    border-radius:0 !important;
    text-align:center;
    line-height:1.1;
    flex:0 0 auto;
  }

  .sidenav nav a:hover,
  body[data-theme="clarity"] .sidenav nav a:hover{
    border-bottom-color:#999 !important;
    background:transparent !important;
  }

  .content,
  .hero,
  .lead,
  .card,
  .summary,
  .quiz,
  .tile{max-width:100% !important}

  .content header{padding-top:2px}

  h1{
    margin-top:16px !important;
    margin-bottom:12px !important;
    line-height:1.03 !important;
    text-wrap:balance;
  }

  .lead{
    font-size:1rem !important;
    line-height:1.6 !important;
  }

  .grid,
  .quiz-grid{gap:10px !important}

  input:not([type="checkbox"]):not([type="radio"]),select,textarea,.btn{
    min-height:44px;
    font-size:16px;
  }

  .quiz-check{
    align-items:center !important;
    gap:10px !important;
    margin:0 0 10px !important;
  }

  .quiz-check input[type="checkbox"]{
    width:22px;
    height:22px;
    min-height:0 !important;
    margin:0;
    flex:0 0 auto;
  }

  .quiz-check label{
    margin:0 !important;
    display:inline !important;
    line-height:1.35;
  }

  .actions{gap:10px !important}
}

@media (max-width:760px){
  .lang-toggle button{padding:8px 12px !important}

  .pipeline-actions,
  .actions,
  .suggestion-actions{justify-content:stretch !important}

  .pipeline-actions .btn,
  .actions .btn,
  .suggestion-actions .btn{width:100% !important;min-width:0 !important}
}

@media (max-width:420px){
  .shell{padding-left:12px !important;padding-right:12px !important}
  h1{font-size:clamp(1.8rem,10vw,2.35rem) !important}
  .brand{font-size:.76rem !important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}