/* Easy Read India — learning pathway. Brand tokens: blue = information, green = can-do/checked, yellow = important, red = stop. */
[hidden] { display: none !important; }  /* .btn sets display; hidden must still win */
:root { --er-blue: #2E3192; --er-green: #00703C; --er-yellow: #FFD700; --er-ink: #1B1B1B; --er-paper: #FBFAF6; --er-red: #B3261E; --er-line: #C9C6BC; }

/* routes on the hub: one column, picture left, like every Easy Read idea */
.lp-routes { display: grid; gap: 2rem; }
.lp-route { display: grid; grid-template-columns: 5rem 1fr; gap: 1.25rem; align-items: start; padding: 1.5rem; border: 2px solid var(--er-line); border-radius: 12px; background: #fff; }
.lp-route .pic { width: 5rem; height: 5rem; color: var(--er-blue); }
.lp-route.sa { border-left: 10px solid var(--er-green); }
.lp-route.fd { border-left: 10px solid var(--er-blue); }
.lp-route.pr { border-left: 10px solid var(--er-yellow); }
.lp-route h2 { margin-top: 0; }
@media (max-width: 40rem) { .lp-route { grid-template-columns: 1fr; } }

/* the path of four modules: the one memorable element — a numbered route, because it is a real sequence */
.lp-units { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: none; }
.lp-unit { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; position: relative; padding-bottom: 1.5rem; }
.lp-unit:not(:last-child)::before { content: ""; position: absolute; left: 1.45rem; top: 3rem; bottom: 0; border-left: 4px dotted var(--er-blue); }
.lp-num { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; background: var(--er-blue); color: #fff; }
.lp-body { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.lp-state { font-size: .95em; }
.lp-state.passed { color: var(--er-green); font-weight: 700; }
.lp-state.passed::before { content: "✓ "; }
.lp-state.tried { color: var(--er-ink); }
.btn.small { font-size: .95em; padding: .45em .9em; }

/* knowledge checks */
.quiz fieldset.q { border: 2px solid var(--er-line); border-radius: 10px; padding: 1.25rem 1.25rem .75rem; margin: 0 0 1.5rem; background: #fff; }
.quiz fieldset.q.ok { border-color: var(--er-green); }
.quiz fieldset.q.no { border-color: var(--er-red); }
.quiz legend { font-weight: 700; padding: 0 .4rem; max-width: 100%; }
.quiz .qn { display: block; font-weight: 400; color: var(--er-blue); }
.opts { list-style: none; padding: 0; margin: .75rem 0; }
.opts li { margin: .5rem 0; }
.opts label { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border: 2px solid transparent; border-radius: 8px; cursor: pointer; background: var(--er-paper); }
.opts label:hover { border-color: var(--er-blue); }
.opts input { width: 1.4rem; height: 1.4rem; margin-top: .2rem; flex: none; accent-color: var(--er-blue); }
.opts input:checked + span { font-weight: 700; }
ol.order { padding-left: 1.75rem; }
ol.order li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .8rem; margin: .4rem 0; background: var(--er-paper); border-radius: 8px; }
ol.order .txt { flex: 1 1 12rem; }
button.mv { font: inherit; font-size: .9em; padding: .35em .8em; border: 2px solid var(--er-blue); background: #fff; color: var(--er-blue); border-radius: 6px; cursor: pointer; }
.fb { margin: .5rem 0; padding: .75rem 1rem; border-radius: 8px; }
.fb.ok { background: #E7F3EC; border-left: 6px solid var(--er-green); }
.fb.no, .fb.again { background: #FFF6CC; border-left: 6px solid var(--er-yellow); }
.fb.info { background: #EEF0FA; border-left: 6px solid var(--er-blue); }
.fb .look { display: block; margin-top: .3rem; font-weight: 700; }
.result { padding: 1.5rem; border-radius: 10px; background: #EEF0FA; border-left: 8px solid var(--er-blue); }
.result:focus { outline: 4px solid var(--er-yellow); outline-offset: 2px; }

/* self-advocate course: one idea per screen */
.course .step { padding: 1.5rem 0; }
.course .idea { display: grid; grid-template-columns: 6rem 1fr; gap: 1.5rem; align-items: start; }
.course .idea .pic { width: 6rem; height: 6rem; color: var(--er-blue); }
.course .idea p { font-size: 1.25em; line-height: 1.5; margin: 0 0 .6em; max-width: 34ch; }
.course .step-h { font-size: 1.1em; color: var(--er-blue); }
.course .step-h:focus { outline: 4px solid var(--er-yellow); outline-offset: 4px; }
.course:not(.js) .step { border-bottom: 2px solid var(--er-line); }
.progress { height: 12px; background: #E4E2DA; border-radius: 6px; overflow: hidden; margin: 1rem 0; }
.course:not(.js) .progress { display: none; }
.progress span { display: block; height: 100%; width: 0; background: var(--er-green); transition: width .3s ease; }
.yn { display: flex; flex-wrap: wrap; gap: 1rem; }
.yn .btn { font-size: 1.25em; min-width: 8rem; min-height: 3.5rem; justify-content: center; }
.yn .btn.yes { background: var(--er-green); border-color: var(--er-green); color: #fff; }
.yn .btn.no { background: #fff; border: 3px solid var(--er-red); color: var(--er-red); }
.yn .btn .icon { width: 1.5em; height: 1.5em; }
.course .ask { font-weight: 700; }
.stepnav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.stepnav .btn { min-width: 8rem; min-height: 3.25rem; font-size: 1.15em; }
@media (max-width: 40rem) { .course .idea { grid-template-columns: 4rem 1fr; } .course .idea .pic { width: 4rem; height: 4rem; } }
@media (prefers-reduced-motion: reduce) { .progress span { transition: none; } }

/* claims and verification */
.claim-status { padding-left: 1.5rem; }
.claim-status li { margin: .5rem 0; }
.claim-msg, .verify-out { margin-top: 1rem; padding: 1rem 1.25rem; border-radius: 10px; }
.claim-msg.ok, .verify-out.ok { background: #E7F3EC; border-left: 8px solid var(--er-green); }
.claim-msg.no, .verify-out.no { background: #FFF6CC; border-left: 8px solid var(--er-yellow); }
.certno { display: block; margin-top: .5rem; font-size: 1.2em; font-weight: 700; letter-spacing: .04em; }
.verify-out dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; }
.verify-out dt { font-weight: 700; }
.verify-out dd { margin: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-cta { margin-top: 2rem; }

/* contrast modes set by the site toolbar keep working: colours inherit where the mode overrides */
.hc .lp-route, .yb .lp-route, .hc .quiz fieldset.q, .yb .quiz fieldset.q { background: inherit; }

/* form fields in claim forms: full-width, large, clear border */
.claim .field input:not([type=checkbox]), .claim .field select, .verify .field input { display: block; box-sizing: border-box; width: 100%; max-width: 32rem; font: inherit; padding: .7em .9em; border: 2px solid #1B1B1B; border-radius: 8px; background: #fff; color: #1B1B1B; }
.claim .field input:focus, .claim .field select:focus, .verify .field input:focus { outline: 4px solid var(--er-yellow); outline-offset: 2px; border-color: var(--er-blue); }