/* pages/planner/responsive.css — Devanagari air, breakpoints, status chips, reset dialog.
   Split from the pre-#149 monolith — rule ORDER preserved; see docs/architecture.md
   ("CSS layers") for the load-order contract each page's <head> follows. */
/* ---- Devanagari: matras need air ---- */
:root[lang="hi"] .plannerpage .intdesc,
:root[lang="hi"] .plannerpage .msdesc,
:root[lang="hi"] .plannerpage .heroline,
:root[lang="hi"] .plannerpage .examhint{line-height:1.8}
:root[lang="hi"] .plannerpage .hint,
:root[lang="hi"] .plannerpage .cardlabel,
:root[lang="hi"] .plannerpage .boostends{letter-spacing:.04em;text-indent:0}
:root[lang="hi"] .plannerpage .ringlabel{letter-spacing:.2em;text-indent:.2em}
/* Devanagari sets taller; the drift choices are two lines each since 1m. */
:root[lang="hi"] .plannerpage .optbtn b{line-height:1.8}

@media (prefers-reduced-motion:reduce){
  .plannerpage .pulse,.plannerpage .statusrow .pill::before{animation:none}
  .plannerpage .activate,.plannerpage .activate .ic,.plannerpage .pbar2 i,
  .plannerpage .finarc,.plannerpage .heroglow{transition:none}
}

/* ---- wider screens ---- */
@media (min-width:640px){
  .plannerpage .intgrid{grid-template-columns:repeat(2,1fr)}
  .plannerpage .mscards{grid-template-columns:repeat(2,1fr)}
  .plannerpage .boostcard{flex-direction:row}
  .plannerpage .boostinfo,.plannerpage .boostctl{width:auto}
  .plannerpage .boostslider{width:192px;flex:none}
  .plannerpage .statgrid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1024px){
  .plannerpage main{padding:48px 48px 80px}
  .plannerpage .s1grid{flex-direction:row;gap:48px}
  .plannerpage .examcol{
    width:320px;flex:none;border-top:0;padding-top:0;
    border-left:1px solid var(--pl-line);padding-left:48px;
  }
  .plannerpage .intgrid{grid-template-columns:repeat(4,1fr)}
  .plannerpage .heroin{flex-direction:row;gap:48px}
  .plannerpage .herocopy{text-align:left}
  .plannerpage .heroline{margin:0}
  .plannerpage .note{margin-left:0}
  .plannerpage .heroact{width:auto;flex:none;max-width:280px}
  .plannerpage .activate{width:auto}
  .plannerpage .dashgrid{grid-template-columns:2fr 1fr}
}

/* ---- small screens ---- */
@media (max-width:480px){
  .plannerpage main{padding:20px 20px 48px}
  .plannerpage .topbar{padding:12px 16px}
  .viewtabs{margin-left:0}
  /* nowrap plus the controls' margin-left:auto let the title slide under
     them at 320px; let it truncate instead. */
  .plannerpage .topbar .pagetitle{font-size:1.15rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .plannerpage .stepcard,.plannerpage .heroin,.plannerpage .roadcard,
  .plannerpage .finishcard,.plannerpage .mgmtcard{padding:24px}
  .plannerpage #setup{gap:32px}
  .plannerpage .ring{width:240px;height:240px;margin:0 auto}
  .plannerpage .ringin{inset:20px}
  .plannerpage .ringday{font-size:64px}
  .plannerpage .ringyear{font-size:16px}
  .plannerpage .orb{top:32px;right:32px}
  .plannerpage .roadtarget{position:static;padding:0;text-align:left;margin-bottom:16px}
  .plannerpage .roadlevel{font-size:28px}
  .plannerpage .roadcard h2{max-width:none;font-size:24px;margin-bottom:24px}
  .plannerpage .wm{font-size:260px}
}

/* =======================================================================
   Shared below this line: app.html loads this file too. The dialog, .klist,
   .chk and .btn.danger blocks style the trainer's dialogs as well — keep
   them stable when reworking the planner above.
   ======================================================================= */
dialog{
  background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:14px;padding:24px;max-width:440px;width:calc(100vw - 40px);
}
dialog::backdrop{background:var(--shadow2)}
.btn.danger{background:var(--bad)}
.klist{border-radius:12px;padding:13px 16px;background:var(--panel2);font-size:13px;margin:8px 0;line-height:1.6}
.klist b{display:block;font-size:11.5px;font-weight:650;margin-bottom:4px}
.klist.keep b{color:var(--good)}
.klist.gone b{color:var(--warn)}
.chk{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--dim);margin:14px 0}
.chk input{accent-color:var(--accent)}
:root[lang="hi"] .klist{line-height:1.8}

/* status chip colours beyond style.css's .good/.warn (kept for app.html) */
.pill.info{color:var(--accent2);border-color:var(--accent2)}

/* the planner page's reset dialog follows the planner palette */
.plannerpage dialog{
  background:var(--pl-card);color:var(--pl-ink);border-color:var(--pl-line);
  border-radius:20px;
}
.plannerpage .klist{background:var(--pl-surface);border:1px solid var(--pl-line)}
.plannerpage .klist.keep b{color:var(--pl-good)}
.plannerpage .klist.gone b{color:var(--warn)}
.plannerpage .chk{color:var(--pl-mute)}
.plannerpage .chk input{accent-color:var(--pl-accent)}
.plannerpage .btn.danger{background:var(--pl-danger);border-color:var(--pl-danger)}