/* ===========================================================================
   Inner Compass
   Loaded after style.css, on the survey page only. Same paper, same ink,
   same four card colours. One colour per section so moving from one area to
   the next is visible without reading the heading: blue, gold, sage, coral,
   in the order the workbook uses them.

   Calm rules for this page:
     no timers, no scores while answering, no red
     every option is a real radio, so it works with a keyboard and a reader
     the whole row is the tap target, never just the dot
   =========================================================================== */

.compass-page main{padding:28px 0 72px}
.cp-wrap{max-width:820px}
.cp section,.cp-step{padding:0}
.cp-step{padding:26px 0 8px}
.cp-step h1{font-size:clamp(44px,7vw,76px);margin:8px 0 14px}
.cp-step h1:focus,.cp-step h2:focus{outline:none}
.cp-how{margin-top:12px;max-width:58ch}
.cp-noscript{background:var(--f-coral);border:1.5px solid var(--b-coral);border-radius:8px;padding:16px 18px;margin-top:24px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---- The start card --------------------------------------------------- */
.cp-card{
  background:var(--card);border-radius:var(--radius);
  padding:26px 26px 22px;margin-top:28px;
  box-shadow:0 2px 0 rgba(36,28,51,.07),0 18px 34px -22px rgba(36,28,51,.6);
}
.cp-row{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end}
.cp-age{width:140px;margin-bottom:0}
.cp-card legend,.cp-card .field span{
  font-family:'Kalam',cursive;font-weight:700;font-size:17px;color:var(--ink);
  margin-bottom:8px;display:block;padding:0;line-height:1.3;
}
.cp-card fieldset{border:0;min-width:0}
.cp-yn{flex:1;min-width:220px}
.cp-consent{margin-top:26px;padding-top:22px;border-top:2px dashed rgba(36,28,51,.18)}
.cp-consent .small{max-width:62ch;margin-bottom:14px}
.cp-choice{display:flex;gap:12px;flex-wrap:wrap}
.cp-need{margin-top:12px;color:var(--coral);font-weight:500}

/* pill radios: consent, India */
.pill{position:relative;display:inline-flex;margin:0 8px 8px 0;cursor:pointer}
.pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pill span{
  display:inline-block;padding:10px 20px;border-radius:999px;
  border:2px solid rgba(47,92,138,.3);background:#fff;
  font-weight:500;color:var(--ink);transition:background .15s,border-color .15s;
}
.pill.big span{padding:13px 22px;font-size:16.5px}
.pill input:hover + span{border-color:var(--ink)}
.pill input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.pill input:focus-visible + span{outline:3px solid var(--grape);outline-offset:2px}

.cp-what{margin-top:22px;font-size:15px}
.cp-what summary{cursor:pointer;font-weight:500;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.cp-what ul{margin-top:10px;padding-left:18px;list-style:disc}
.cp-what li{margin-top:6px;max-width:62ch}

.cp-nav{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
.cp-nav .btn{margin-top:0}
.cp-nav.end{margin-top:36px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);transform:rotate(.5deg)}
.btn.ghost:hover{background:var(--f-blue)}
[data-go="next"]{margin-left:auto}
.cp-start .cp-nav .btn{font-size:21px;padding:14px 34px}

/* ---- Progress --------------------------------------------------------- */
.cp-prog{
  position:sticky;top:62px;z-index:20;
  background:var(--ground);
  padding:12px 0 12px;border-bottom:1px solid rgba(36,28,51,.08);
}
.cp-prog-l{font-family:'Kalam',cursive;font-weight:700;font-size:16px;color:var(--ink);margin-bottom:6px}
.cp-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cp-bar .seg{height:8px;border-radius:4px;background:rgba(47,92,138,.13)}
.cp-bar .seg.done{background:var(--ink)}
.cp-bar .seg.cur{background:linear-gradient(90deg,var(--ink) 50%,rgba(47,92,138,.35) 50%)}

/* ---- Section heads, one colour each ----------------------------------- */
.cp-sechead{display:flex;gap:16px;align-items:flex-start;margin:14px 0 8px}
.cp-num{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  font-family:'Kalam',cursive;font-weight:700;font-size:24px;color:var(--ink);
  transform:rotate(-4deg);
}
.cp-sechead h2{font-size:clamp(28px,4.2vw,42px)}
.cp-sub{font-family:'Kalam',cursive;font-weight:700;font-size:19px;color:var(--muted);margin-top:4px}
.cp-intro{margin:14px 0 6px;max-width:62ch}
.cp-note{margin:4px 0 10px;font-size:14.5px;color:var(--muted);font-style:italic}
.cp-group{font-size:21px;margin:30px 0 4px;color:var(--ink)}

.tone-1 .cp-num{background:var(--b-blue)}
.tone-2 .cp-num{background:var(--b-gold)}
.tone-3 .cp-num{background:var(--b-sage)}
.tone-4 .cp-num{background:var(--b-coral)}
.tone-1{--tone:var(--f-blue); --tone-b:var(--b-blue)}
.tone-2{--tone:var(--f-gold); --tone-b:var(--b-gold)}
.tone-3{--tone:var(--f-sage); --tone-b:var(--b-sage)}
.tone-4{--tone:var(--f-coral);--tone-b:var(--b-coral)}

/* ---- A question ------------------------------------------------------- */
.q{
  border:0;min-width:0;
  background:var(--card);border-radius:var(--radius);
  margin-top:14px;padding:18px 18px 14px;
  box-shadow:0 1px 0 rgba(36,28,51,.06),0 10px 22px -18px rgba(36,28,51,.5);
  border-left:5px solid var(--tone-b);
  transition:background .2s;
}
.q.done{background:linear-gradient(0deg,var(--tone),var(--tone))}
.q.miss{box-shadow:0 0 0 2px var(--b-coral),0 10px 22px -18px rgba(36,28,51,.5)}
.q legend{display:flex;gap:10px;align-items:baseline;padding:0;margin-bottom:12px;float:left;width:100%}
.q legend + *{clear:both}
.qn{flex:0 0 auto;font-family:'Kalam',cursive;font-weight:700;font-size:16px;color:var(--muted);min-width:1.4em}
.qt{font-size:16.5px;font-weight:500;color:var(--ink);line-height:1.45}

.opts{display:grid;gap:4px;clear:both}
.opts.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.opt{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;padding:6px 2px 4px;border-radius:6px}
.opt:hover{background:rgba(47,92,138,.06)}
.opt input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.dot{
  width:30px;height:30px;border-radius:50%;
  border:2px solid rgba(47,92,138,.45);background:#fff;
  display:grid;place-items:center;
  font-family:'Kalam',cursive;font-weight:700;font-size:15px;color:var(--ink);
  transition:background .12s,border-color .12s,transform .12s;
}
.ol{display:block;margin-top:6px;font-size:12.5px;line-height:1.3;color:var(--muted);overflow-wrap:break-word;max-width:100%}
.opt input:checked + .dot{background:var(--ink);border-color:var(--ink);color:#fff;transform:scale(1.08)}
.opt input:checked ~ .ol{color:var(--ink);font-weight:700}
.opt input:focus-visible + .dot{outline:3px solid var(--grape);outline-offset:3px}

/* "Not applicable" sits under the row, not as a sixth column: it is not a
   point on the scale and should not look like one. */
.opt.na{flex-direction:row;gap:8px;justify-content:flex-start;margin-top:8px;padding:6px 8px;display:inline-flex}
.opt.na .dot{width:22px;height:22px}
.opt.na .ol{margin-top:0;font-size:14px}

.cp-nudge{margin-top:14px;background:var(--f-gold);border:1.5px solid var(--b-gold);border-radius:8px;padding:12px 14px;font-size:15px;max-width:62ch}

/* ---- Results ---------------------------------------------------------- */
.cp-saved{margin-top:12px;min-height:1.4em}
.cp-scores{display:grid;gap:18px;margin-top:26px}
.cp-score{
  background:var(--card);border-radius:var(--radius);padding:22px 24px 20px;
  border-top:6px solid var(--tone-b);
  box-shadow:0 2px 0 rgba(36,28,51,.07),0 18px 34px -22px rgba(36,28,51,.6);
}
.cp-score h3{font-size:clamp(22px,3vw,28px)}
.cp-sw{margin-top:4px;color:var(--muted);font-size:15px}
.cp-big{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.cp-big .v{font-family:'Kalam',cursive;font-weight:700;font-size:54px;line-height:1;color:var(--ink)}
.cp-big .of{font-size:15px;color:var(--muted)}
.cp-track{position:relative;height:10px;border-radius:5px;background:var(--tone);margin:14px 0 4px;border:1px solid var(--tone-b)}
.cp-track .mk{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cp-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.cp-read{margin-top:12px;font-size:15.5px}
.cp-range{margin-top:4px}
.cp-inc{margin-top:12px;font-style:italic;color:var(--muted)}

.cp-rs-h{margin-top:48px}
.cp-rs-i{margin-top:6px;color:var(--muted)}
.cp-rs{display:grid;gap:14px;margin-top:20px}
.cp-rs .wbcard h3{text-transform:none;letter-spacing:0;font-size:20px;line-height:1.25}
.cp-rs .wbcard p{font-size:15.5px}
.cp-safety{border-width:2.5px}
.cp-link{display:inline-block;margin-top:10px;font-weight:500;color:var(--ink);text-underline-offset:3px}
.cp-all .helplines{margin-top:12px}

.cp-email{margin-top:34px}
.cp-email h3{font-size:24px;margin-bottom:8px}
.cp-email .field{margin-top:16px;max-width:420px}
.cp-email .btn{margin-top:4px}
.cp-em-note{margin-top:12px}
.cp-em-status{margin-top:10px;font-weight:500;color:var(--ink);min-height:1.4em}

.cp-credits{margin:40px 0 0;font-size:13px;color:var(--muted)}
.cp-credits summary{cursor:pointer;font-weight:500}
.cp-credits p{margin-top:8px;max-width:80ch}

/* ---- Phones -----------------------------------------------------------
   Five across does not fit a phone in eight languages: "Moderadamente",
   "Einigermaßen" and the Kannada anchors are each wider than a fifth of the
   screen, and breaking them mid-word makes them unreadable. So on a phone
   the scale becomes a list, top to bottom in the same order, each row a full
   width tap target with its whole label.
   ------------------------------------------------------------------------ */
@media (max-width:560px){
  .compass-page .wrap{padding:0 16px}
  .cp-card{padding:20px 16px 18px}
  .q{padding:14px 12px 12px 12px;border-left-width:4px}
  .q legend{margin-bottom:10px}
  .qt{font-size:16px}
  .opts.n5{grid-template-columns:1fr;gap:6px}
  .opt{
    flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;
    min-height:46px;padding:7px 12px;border-radius:8px;
    background:#fff;border:1.5px solid rgba(47,92,138,.2);
  }
  .opt:hover{background:#fff}
  .opt:has(input:checked){border-color:var(--ink);background:var(--f-blue)}
  .dot{flex:0 0 auto;width:26px;height:26px;font-size:14px}
  .ol{margin-top:0;font-size:15px;color:var(--body)}
  .opt.na{display:flex;margin-top:6px;min-height:46px;padding:7px 12px}
  .opt.na .dot{width:26px;height:26px}
  .opt.na .ol{font-size:15px}
  .cp-nav .btn{flex:1;text-align:center}
  [data-go="next"]{margin-left:0}
  .cp-big .v{font-size:46px}
}

/* Indic and CJK scripts need the room, as on the home page */
html[lang="kn"] .ol,html[lang="hi"] .ol,html[lang="mr"] .ol{line-height:1.45}
html[lang="kn"] .qt,html[lang="hi"] .qt,html[lang="mr"] .qt{line-height:1.6}

@media (prefers-reduced-motion: reduce){
  .q,.dot,.pill span{transition:none}
}

/* The site header is sticky, and on a phone it wraps to three rows. On this
   page the progress bar is the thing that should stay in view, so the header
   scrolls away and the bar takes the top edge. */
.compass-page .top{position:static}
.cp-prog{top:0}