/* aperintelligence.com, the three tools: Intelligence Score, Intelligence Brief
   and Start a project. No photographs on these pages (Julius, 2026-10-05):
   a slow animated backdrop, one working panel, and calm motion between steps. */

/* ---------- backdrop ---------- */
/* A fine grid that fades out towards the edges, with two soft lights drifting
   behind it. Fixed, so it stays put while the panel scrolls. */
.tool-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.tool-backdrop::before{
  content:"";position:absolute;inset:-1px;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%);
  animation:grid-pan 40s linear infinite;
}
.tool-backdrop span{position:absolute;width:46vw;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.5;}
.tool-backdrop span:nth-child(1){left:-8vw;top:-14vw;background:radial-gradient(circle, rgba(91,115,245,.55), transparent 65%);animation:float-a 22s ease-in-out infinite alternate;}
.tool-backdrop span:nth-child(2){right:-10vw;top:10vw;background:radial-gradient(circle, rgba(127,179,230,.35), transparent 65%);animation:float-b 26s ease-in-out infinite alternate;}
@keyframes grid-pan{to{background-position:56px 56px;}}
@keyframes float-a{to{transform:translate(12vw, 8vw);}}
@keyframes float-b{to{transform:translate(-10vw, 12vw);}}
.tool-page{position:relative;z-index:1;padding:clamp(48px, 6vw, 88px) 0 var(--sec-pad);}

/* ---------- intro beside the working panel ---------- */
.tool-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px, 6vw, 96px);align-items:center;}
.tool-intro h1{font-size:clamp(34px, 2vw + 22px, 56px);line-height:1.05;}
.tool-intro .standfirst{margin-top:20px;max-width:44ch;font-size:clamp(15px, .3vw + 13px, 17px);line-height:1.6;color:var(--text-soft);}
.tool-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.tool-facts span{padding:7px 14px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(18,35,58,.6);font-size:13px;color:var(--text-soft);}
.tool-intro .btn{margin-top:32px;}

/* ---------- the working panel ---------- */
.panel-card{
  position:relative;padding:clamp(24px, 3vw, 40px);border-radius:var(--r-xl);
  background:rgba(18,35,58,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line-strong);box-shadow:var(--shadow-edge), var(--shadow-card);
}
.panel-narrow{max-width:760px;margin-inline:auto;}
/* On Start a project the intro sits above the panel instead of beside it. */
.tool-intro.panel-narrow + .panel-card{margin-top:36px;}
.panel-card h2{font-size:clamp(22px, 1vw + 16px, 30px);line-height:1.2;}
.panel-card .panel-sub{margin-top:10px;color:var(--text-muted);font-size:14px;}
/* A form starts a little below its introduction. */
.panel-sub + .form-group{margin-top:24px;}
/* Only one step shows at a time; each new step rises into place. */
.step-view[hidden]{display:none;}
.step-view{animation:rise .5s var(--ease-out) both;}

/* ---------- progress segments ---------- */
.progress{display:flex;gap:6px;margin-bottom:28px;}
.progress i{flex:1;height:3px;border-radius:3px;background:var(--line-strong);overflow:hidden;position:relative;}
.progress i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out);}
.progress i.done::after,.progress i.current::after{transform:scaleX(1);}
.progress i.current::after{background:var(--periwinkle);}
.step-count{font-family:var(--mono);font-size:12px;color:var(--text-muted);}

/* ---------- answer options ---------- */
.options{display:grid;gap:10px;margin-top:24px;}
.option{
  display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;text-align:left;cursor:pointer;
  border-radius:14px;border:1px solid var(--line);background:rgba(13,27,42,.55);color:var(--text);font-size:14.5px;
  transition:border-color var(--t) var(--ease-out), background-color var(--t) var(--ease-out), transform var(--t-fast) var(--ease-out);
  /* both: the option holds its hidden starting frame through its stagger delay, then rises in. */
  animation:rise .45s var(--ease-out) both;
}
.option .key{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--text-muted);border:1px solid var(--line-strong);transition:all var(--t) var(--ease-out);}
.option[aria-checked="true"]{border-color:var(--accent);background:rgba(91,115,245,.14);}
.option[aria-checked="true"] .key{background:var(--accent);border-color:var(--accent);color:#fff;}
.step-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;}
.step-nav .hint{font-size:12px;color:var(--text-muted);}

/* ---------- working on it ---------- */
/* Three rings turning at different speeds, and a list of what is happening. */
.working{display:grid;justify-items:center;text-align:center;padding:24px 0 8px;}
.orbit{position:relative;width:120px;height:120px;margin-bottom:28px;}
.orbit i{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);animation:spin 1.4s linear infinite;}
.orbit i:nth-child(2){inset:14px;border-top-color:var(--periwinkle);animation-duration:2.1s;animation-direction:reverse;}
.orbit i:nth-child(3){inset:28px;border-top-color:var(--steel);animation-duration:3s;}
.orbit::after{content:"";position:absolute;inset:48px;border-radius:50%;background:var(--accent);box-shadow:0 0 30px rgba(91,115,245,.8);animation:breathe 2s ease-in-out infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes breathe{50%{transform:scale(1.25);opacity:.7;}}
.work-log{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;text-align:left;}
.work-log li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-muted);opacity:.35;transition:opacity .3s, color .3s;}
.work-log li::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line-hover);flex:none;transition:all .3s;}
.work-log li.active{opacity:1;color:var(--text);}
.work-log li.active::before{border-color:var(--periwinkle);box-shadow:0 0 10px var(--periwinkle);}
.work-log li.done{opacity:1;}
.work-log li.done::before{background:var(--steel);border-color:var(--steel);}

/* ---------- results ---------- */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);}
.reveal.in{opacity:1;transform:none;}
.result-head{display:grid;grid-template-columns:160px 1fr;gap:28px;align-items:center;}
.dial{position:relative;width:160px;aspect-ratio:1;}
.dial svg{width:100%;height:100%;transform:rotate(-90deg);}
.dial circle{fill:none;stroke-width:10;}
.dial .track{stroke:var(--navy-high);}
.dial .fill{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:377;stroke-dashoffset:377;transition:stroke-dashoffset 1.6s var(--ease-out);}
/* On the start step the dial sweeps on its own, a preview of the result. */
.dial.preview{margin-bottom:24px;}
.dial.preview .fill{animation:preview-sweep 5s ease-in-out infinite alternate;}
@keyframes preview-sweep{from{stroke-dashoffset:340;}to{stroke-dashoffset:90;}}
.dial .num{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;font-weight:200;letter-spacing:-0.03em;}
.level{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;background:var(--accent);}
.result-head h2{margin-top:12px;}
.result-head p{margin-top:8px;color:var(--text-muted);font-size:14.5px;}
.two-lists{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;}
.list-card{padding:20px;border-radius:16px;border:1px solid var(--line);background:rgba(13,27,42,.55);}
.list-card h3{font-size:14px;font-weight:600;}
.list-card ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:9px;}
.list-card li{position:relative;padding-left:18px;font-size:14px;color:var(--text-soft);line-height:1.5;}
.list-card li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--steel);}
.list-card.gaps li::before{background:var(--sky);}
.note-card{margin-top:14px;padding:20px;border-radius:16px;border:1px solid rgba(91,115,245,.45);background:rgba(91,115,245,.1);}
.note-card .k{font-size:12px;color:var(--text-muted);}
.note-card b{display:block;margin-top:4px;font-size:16px;font-weight:600;}
.note-card p{margin-top:6px;font-size:14px;color:var(--text-soft);}
.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.text-btn{background:none;border:0;padding:0 6px;color:var(--text-muted);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}

/* ---------- a generated document (Intelligence Brief, project brief) ---------- */
.doc-sheet{border-radius:var(--r-lg);background:#F4F7FB;color:#172234;padding:clamp(24px, 3vw, 40px);box-shadow:0 30px 80px -30px rgba(0,0,0,.8);}
.doc-sheet .doc-label{font-family:var(--mono);font-size:11px;color:#5E6E84;}
.doc-sheet h2{margin-top:6px;color:#0D1B2A;font-size:clamp(24px, 1vw + 18px, 32px);}
.doc-sheet .doc-meta{margin-top:6px;font-size:13px;color:#5E6E84;}
.doc-section{margin-top:26px;padding-top:20px;border-top:1px solid #D6DFEA;}
.doc-section h3{font-size:12px;font-weight:700;letter-spacing:.02em;color:#2E4A6B;}
.doc-section p,.doc-section li{margin-top:8px;font-size:14.5px;line-height:1.65;color:#29344A;}
.doc-section ul{margin:4px 0 0;padding-left:18px;}
.doc-section li strong{display:block;color:#0D1B2A;}
.doc-rec{display:grid;grid-template-columns:180px 1fr;gap:14px;margin-top:10px;font-size:14.5px;}
.doc-rec b{color:#0D1B2A;}
.doc-rec span{color:#29344A;}

/* ---------- Start a project: phases ---------- */
.phases{display:flex;gap:6px;margin:0 0 28px;padding:0;}
.phases li{flex:1;list-style:none;padding-top:10px;border-top:3px solid var(--line-strong);font-size:12px;color:var(--text-muted);transition:border-color .4s, color .4s;}
.phases li.done{border-color:var(--accent);color:var(--text-soft);}
.phases li.current{border-color:var(--periwinkle);color:var(--text);}
.prefill{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;padding:12px 16px;border-radius:12px;font-size:13.5px;background:rgba(143,184,201,.12);border:1px solid rgba(143,184,201,.4);}
.prefill[hidden]{display:none;}
.char-count{margin-top:6px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--text-muted);}
/* Padding makes a 44px tap area; the negative margins keep the layout where it was (6px above, flush below). */
.context-toggle{display:flex;align-items:center;gap:8px;margin:-5px 0 -11px;background:none;border:0;padding:11px 0;color:var(--periwinkle);font-size:14px;cursor:pointer;}
.context-toggle::before{content:"+";font-family:var(--mono);}
.context-toggle[aria-expanded="true"]::before{content:"-";}
.context-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:16px;}
.context-grid[hidden]{display:none;}
.req-list{display:grid;gap:10px;margin-top:10px;}
.req{display:grid;grid-template-columns:28px 1fr;gap:12px;}
.req .n{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:#fff;background:#2E4A6B;}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.chips span{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;color:#0D1B2A;background:#D6DFEA;}
.confirm{text-align:center;padding:12px 0;}
.confirm .tick{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:rgba(143,184,201,.16);border:1px solid var(--steel);}
.confirm .tick svg{width:28px;height:28px;fill:none;stroke:var(--steel);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:draw-tick .6s .2s var(--ease-out) forwards;}
@keyframes draw-tick{to{stroke-dashoffset:0;}}
.confirm .result-actions{justify-content:center;}
.confirm .ref{display:inline-block;margin-top:18px;padding:8px 16px;border-radius:10px;font-family:var(--mono);font-size:14px;background:var(--navy-high);border:1px solid var(--line-strong);}

@media (hover:hover){
  .option:hover{border-color:var(--line-hover);transform:translateX(2px);}
  .text-btn:hover{color:var(--text);}
}
@media (max-width:900px){
  .tool-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .result-head{grid-template-columns:1fr;justify-items:start;}
  .two-lists,.context-grid{grid-template-columns:1fr;}
  .doc-rec{grid-template-columns:1fr;gap:2px;}
  .step-nav .hint{display:none;}
}

/* A printed brief is the document alone: no navigation, backdrop or buttons. */
@media print{
  .nav,.site-foot,.tool-backdrop,.tool-intro,.result-actions,#cookie-card{display:none !important;}
  body{background:#fff;}
  .tool-grid{display:block;}
  .panel-card{background:none;border:0;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;}
  .doc-sheet{box-shadow:none;padding:0;}
}