/* ============================================================
   icsepyq+ — brand-specific additions on top of the shared
   cbsepyq+ design system. Keep the original component geometry;
   only subject colours, content typography and new blocks live here.
   ============================================================ */

:root{
  --subject-maths: var(--math-standard);
  --subject-physics: var(--science);
  --subject-chemistry: var(--math-basic);
  --subject-biology: var(--social-science);
  --subject-history: #8A5A2B;
  --subject-computer: #2F6F8F;
  --subject-robotics: #6B5B95;
}

/* Home + hub subject tiles */
.subject-picker .maths{background:var(--subject-maths)}
.subject-picker .physics{background:var(--subject-physics)}
.subject-picker .chemistry{background:var(--subject-chemistry)}
.subject-picker .biology{background:var(--subject-biology)}

/* Paper / chapter cards: counts are useful here (the reference hides them) */
.chgrid .ch-count{display:block;font-family:var(--sans);font-size:.78rem;color:var(--ink-soft);margin-top:4px}
.chgrid a{min-height:74px}

/* Question / solution prose ------------------------------------------------ */
.q-text p,.sol-body p{margin:0 0 .65em}
.q-text p:last-child,.sol-body p:last-child{margin-bottom:0}
.q-text ul:not(.opts),.q-text ol:not(.opts),.sol-body ul,.sol-body ol{margin:.55em 0 .7em;padding-left:1.35em}
.q-text li,.sol-body li{margin:.18em 0}
.q-text img,.opts img,.sol-body img{
  max-width:min(460px,100%);height:auto;display:block;margin:10px 0;
  border:1px solid var(--rule);border-radius:10px;padding:4px;background:#fff;
}
.sol-body img{max-width:min(420px,100%)}
.q-text table,.sol-body table{
  border-collapse:collapse;margin:10px 0;font-size:.92em;max-width:100%;
  display:block;overflow-x:auto;
}
.q-text th,.q-text td,.sol-body th,.sol-body td{border:1px solid #d6d8db;padding:5px 10px;text-align:center;vertical-align:top}
.q-text th,.sol-body th{background:var(--band);font-weight:700;font-family:var(--sans);font-size:.9em}
.q-text blockquote,.sol-body blockquote{border-left:3px solid var(--rule);padding-left:14px;margin:8px 0;color:var(--ink-soft)}
.q-text mark,.sol-body mark{background:var(--yellow-tint);color:inherit;padding:0 2px}
.q-text ins,.sol-body ins{text-decoration:underline;text-underline-offset:2px}
.img-missing{
  display:inline-block;font-family:var(--sans);font-size:.76rem;color:var(--ink-soft);
  background:var(--band);border:1px dashed var(--rule);border-radius:8px;padding:8px 12px;margin:6px 0;
}

/* Full page answer blocks can contain numbered lists from the paper */
.sol-body .opts{grid-template-columns:1fr}

/* Question meta badges */
.q-meta .rep{font-size:.92em}
.q-meta .paper-tag{color:var(--ink-soft);font-weight:600}
.q-n{white-space:nowrap}

/* Paper page head + filter summary */
.paper-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.paper-kind{
  font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;background:var(--yellow-tint);color:#6a4c0f;
  border:1px solid var(--brand-yellow);border-radius:999px;padding:4px 10px;
}
[data-theme="dark"] .paper-kind{color:#F0CE7E}
.paper-stats{font-family:var(--sans);font-size:.84rem;color:var(--ink-soft);margin:0 0 18px}
.paper-stats b{color:var(--ink)}

/* Subject page links row */
.subject-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}
.subject-actions a{
  font-family:var(--sans);font-size:.82rem;font-weight:700;text-decoration:none;
  border:1px solid var(--rule);border-radius:999px;padding:8px 14px;background:var(--surface-card);color:var(--ink);
}
.subject-actions a:hover{border-color:var(--action-green);color:var(--action-green)}

/* Small inline note that replaces an answer when the source has none */
.no-solution{font-family:var(--sans);font-size:.86rem;color:var(--ink-soft);font-style:italic}

/* Unlock / coming-soon page */
.unlock-wrap{max-width:760px;margin:0 auto;padding:0 20px}
.unlock-hero{padding:34px 0 10px}
.unlock-hero .eyebrow{
  display:block;color:var(--action-green);font-size:.74rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;
}
.unlock-hero h1{font-family:'Lora',Georgia,serif;font-size:clamp(2rem,4vw,2.7rem);line-height:1.14;font-weight:600;letter-spacing:-.04em}
.unlock-hero p.lead{color:var(--ink-soft);font-size:1.02rem;margin:14px 0 0;max-width:60ch}
.unlock-product{
  display:flex;align-items:center;gap:20px;background:var(--surface-card);
  border:1px solid var(--rule);border-radius:16px;padding:22px 24px;margin:24px 0;
}
.unlock-product .big{
  font-family:var(--sans);font-weight:800;font-size:1.7rem;letter-spacing:-.03em;
  line-height:1;color:var(--dark);white-space:nowrap;
}
.unlock-product .big small{display:block;font-size:.72rem;font-weight:700;color:var(--ink-soft);letter-spacing:0;margin-top:6px}
.unlock-product h2{font-size:1.05rem;margin:0 0 5px}
.unlock-product p{font-size:.9rem;color:var(--ink-soft);margin:0;line-height:1.55}
.unlock-panel{
  border:1px solid var(--rule);border-radius:16px;background:var(--surface-card);
  padding:24px;margin:18px 0;
}
.unlock-panel h2{font-size:1.05rem;margin:0 0 4px}
.unlock-panel p{font-size:.9rem;color:var(--ink-soft);margin:0 0 16px;line-height:1.6}
.unlock-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.unlock-plan{
  border:1px solid var(--rule);border-radius:14px;background:var(--surface-card);
  padding:16px;opacity:.78;
}
.unlock-plan strong{display:block;font-size:.98rem;margin-bottom:3px}
.unlock-plan span{display:block;font-size:.8rem;color:var(--ink-soft)}
.unlock-plan .price{font-family:var(--sans);font-size:1.45rem;font-weight:800;color:var(--ink);margin-top:10px}
.unlock-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.unlock-status{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:.84rem;font-weight:700;color:#92400e;background:var(--yellow-tint);
  border:1px solid var(--brand-yellow);border-radius:999px;padding:8px 14px;
}
[data-theme="dark"] .unlock-status{color:#F0CE7E}
.unlock-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-yellow)}

/* Login placeholder */
.login-box{max-width:520px;margin:34px auto 60px;padding:0 20px}
.login-box .panel{
  border:1px solid var(--rule);border-radius:16px;background:var(--surface-card);padding:26px;
}
.login-box h1{font-family:'Lora',Georgia,serif;font-weight:600;font-size:2rem;letter-spacing:-.035em;margin:0 0 8px}
.login-box p{color:var(--ink-soft);font-size:.94rem;margin:0 0 18px}
.login-box label{display:block;font-family:var(--sans);font-size:.78rem;font-weight:700;margin:12px 0 6px}
.login-box input{
  width:100%;border:1px solid var(--rule);border-radius:10px;padding:11px 12px;
  font:inherit;background:var(--surface-card);color:var(--ink);
}
.login-box input:disabled{opacity:.65}
.login-box .btn-disabled{
  display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:16px;
  border:1px solid var(--rule);border-radius:10px;padding:11px 16px;background:var(--band);
  color:var(--ink-soft);font-weight:700;font-size:.9rem;cursor:not-allowed;
}

/* 404 */
.lost{max-width:620px;margin:40px auto 60px;padding:0 20px}
.lost h1{font-family:'Lora',Georgia,serif;font-size:clamp(2.4rem,6vw,4rem);line-height:1;letter-spacing:-.05em;margin:0 0 12px}
.lost p{color:var(--ink-soft);font-size:1rem;max-width:52ch}

/* Keep long question labels from stretching the head */
.q-head{align-items:flex-start}
.q-meta{line-height:1.45}

/* Mobile tweaks for the additional blocks */
@media (max-width:560px){
  .unlock-product{flex-direction:column;align-items:flex-start;gap:12px;padding:20px}
  .unlock-plans{grid-template-columns:1fr}
  .unlock-panel{padding:20px}
  .chgrid .ch-count{display:block}
  .q-text table,.sol-body table{font-size:.86em}
}

/* -------------------------------------------------------------------------
   Home: progressive subject disclosure
   ------------------------------------------------------------------------- */
:root{
  --subject-geography:#C26A1F;
  --subject-computer:#2F6F8F;
  --subject-commerce:#4C7A34;
  --subject-robotics:#6B5B95;
  --subject-english:#7652A7;
}
.subject-picker .history{background:var(--subject-history)}
.subject-picker .geography{background:var(--subject-geography)}
.subject-picker .computer{background:var(--subject-computer)}
.subject-picker .commerce{background:var(--subject-commerce)}
.subject-picker .robotics{background:var(--subject-robotics)}
.subject-picker .english{background:var(--subject-english);grid-column:1 / -1}

.subject-more{margin:12px 0 20px}
.subject-more > summary{
  list-style:none;display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:12px 18px;border:1px dashed var(--rule);border-radius:14px;
  background:var(--surface-card);color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:.9rem;font-weight:700;letter-spacing:.01em;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.subject-more > summary::-webkit-details-marker{display:none}
.subject-more > summary::marker{content:""}
.subject-more > summary:hover{border-color:var(--action-green);color:var(--action-green)}
.subject-more[open] > summary{border-style:solid;border-color:var(--action-green);background:var(--band)}
.subject-more .when-open{display:none}
.subject-more[open] .when-open{display:inline}
.subject-more[open] .when-closed{display:none}
.subject-more-count{
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--band);border:1px solid var(--rule);border-radius:999px;padding:3px 8px;
}
.subject-more[open] .subject-more-count{display:none}
.subject-more-icon{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--band);color:var(--ink);font-size:1rem;line-height:1;
  transition:transform .2s ease,background .2s ease;
}
.subject-more[open] .subject-more-icon{transform:rotate(45deg);background:var(--action-green);color:#fff}
.subject-picker-extra{margin-top:12px;animation:subject-reveal .22s ease-out}
.subject-picker-extra > a:last-child:nth-child(odd){grid-column:1 / -1}
@keyframes subject-reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* -------------------------------------------------------------------------
   Reading pages: auto-hide nav + floating study toolbar
   ------------------------------------------------------------------------- */
html{--read-progress:0%}
.top--float{transition:transform .24s ease,opacity .18s ease;}
body.nav-hidden .top--float{
  transform:translateY(-135%);
  opacity:0;
  pointer-events:none;
}
.stickyfilters{
  top:84px;
  transition:top .24s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,margin .24s ease,padding .24s ease;
}
body.nav-hidden .stickyfilters{
  top:0;
  margin-left:-8px;
  margin-right:-8px;
  padding:12px 16px 10px;
  border:1px solid var(--rule);
  border-top:0;
  border-radius:0 0 18px 18px;
  background:var(--surface-card);
  box-shadow:0 16px 38px rgba(11,31,58,.16);
}
.stickyfilters::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:var(--read-progress);
  background:var(--action-green);border-radius:0 2px 2px 0;
  transition:width .1s linear;
}
.qcard{scroll-margin-top:190px}

@media (max-width:700px){
  .stickyfilters{top:78px}
  body.nav-hidden .stickyfilters{top:0;margin-left:-4px;margin-right:-4px;padding:10px 12px 8px;border-radius:0 0 14px 14px}
  .subject-more > summary{min-height:50px;font-size:.86rem;padding:10px 14px}
}
@media (prefers-reduced-motion: reduce){
  .top--float,.stickyfilters,.subject-more-icon,.subject-picker-extra{transition:none;animation:none}
}

/* English / comprehension passage */
.passage{
  margin:0 0 16px;padding:14px 16px;
  border-left:3px solid var(--action-green);
  border-radius:0 12px 12px 0;
  background:var(--band);
}
.passage-label{
  font-family:var(--sans);font-size:.68rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--action-green);
  margin:0 0 8px;
}
.passage-body{font-size:.97rem;line-height:1.7;color:var(--ink)}
.passage-body p{margin:0 0 .6em}
.passage-body p:last-child{margin-bottom:0}
.passage-body em{color:var(--ink-soft)}
@media (max-width:560px){
  .passage{padding:12px;margin-bottom:12px}
  .passage-body{font-size:.93rem}
}

/* OTP sign-in */
.login-box .eyebrow{
  display:block;color:var(--action-green);font-family:var(--sans);
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;
}
.login-box .btn-primary{
  display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:14px;
  border:1px solid var(--action-green);border-radius:10px;padding:11px 16px;
  background:var(--action-green);color:#fff;font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;
}
.login-box .btn-primary:hover{filter:brightness(.96)}
.login-note{
  margin:12px 0 0;color:var(--ink-soft);font-size:.8rem;line-height:1.55;
}
.login-actions{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;
}
.login-actions a{color:var(--action-green);font-family:var(--sans);font-size:.84rem;font-weight:700;text-decoration:none}
.login-actions .btn-disabled{width:auto;margin-top:0;padding:9px 14px;font-size:.8rem}
.login-foot{margin:18px 0 0;font-size:.86rem}
.login-foot a{color:var(--action-green);font-weight:700;text-decoration:none}

/* SEO FAQ */
.faq details{border-top:1px solid var(--line);padding:12px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:.98rem;color:var(--ink);list-style-position:outside}
.faq summary::marker{color:var(--action-green)}
.faq p{margin:8px 0 0;color:var(--ink-soft);font-size:.92rem;line-height:1.65;max-width:72ch}

/* Light-mode footer: full-width, paper-toned, not a dark slab. */
html:not([data-theme="dark"]) .foot{
  background:var(--brand-paper);
  color:var(--ink-soft);
  border-top:1px solid var(--rule);
}
html:not([data-theme="dark"]) .foot strong{color:var(--dark)}
html:not([data-theme="dark"]) .foot a{color:var(--ink-soft)}
html:not([data-theme="dark"]) .foot a:hover{color:var(--action-green)}
html:not([data-theme="dark"]) .foot p{color:var(--ink-soft)}