/* ============================================================================
   Pachu Coachings — house stylesheet.  D1-51 (VK, 22 Aug: "We need UI/UX
   Totally change").

   ONE source of truth for tokens, type and the shared components, built to the
   Micromart design standard (micromart.org/templates/standard.html):
   8px spacing scale, fluid type, one neutral family + one ink + two accents,
   soft shadow in one light direction, 44px tap targets, AA contrast.

   The Pachu identity is unchanged and is not negotiable: the deep green
   (#0b5c3f / #0b5c4a), the gold, the avatar and the watermark all carry over
   from D1-21.  What changed is the packaging around them.

   Everything a page shares lives here under a pc- prefix so it can never
   collide with a page's own long-standing class names (.card, .top, .row …).
   ========================================================================= */

:root{
  /* spacing — 8px base, no arbitrary values anywhere */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --container:1080px;
  --narrow:640px;

  /* ink — near-black with a green cast, never pure #000 */
  --ink:#132520;
  --ink-2:#33453e;
  --mut:#5b6d67;          /* 4.9:1 on --surface — AA for body text */

  /* surfaces — warm off-white, never pure #fff for the page */
  --surface:#f6f9f7;
  --surface-2:#eef4f1;
  --card:#ffffff;
  --line:#e3eae6;
  --line-2:#d2ded8;

  /* brand */
  --green:#0b5c3f;
  --green-2:#0e7a53;
  --green-deep:#07362a;
  --green-tint:#e9f3ef;
  --green-line:#c9e0d6;

  /* single accent */
  --gold:#c9a227;
  --gold-soft:#fdf4dc;
  --gold-line:#efdca5;
  --gold-ink:#5f4a06;
  --gold-lift:#f3dc9a;    /* gold that is readable on the deep green */

  --shadow-sm:0 1px 2px rgba(11,60,44,.05), 0 4px 10px -6px rgba(11,60,44,.10);
  --shadow:0 2px 4px rgba(11,60,44,.04), 0 18px 40px -22px rgba(11,60,44,.32);
  --shadow-lg:0 4px 8px rgba(11,60,44,.05), 0 34px 70px -32px rgba(11,60,44,.42);

  --ff-display:'Baloo Chettan 2','Noto Sans Malayalam','Segoe UI',system-ui,sans-serif;
  --ff-body:'Plus Jakarta Sans','Noto Sans Malayalam','Segoe UI',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  background:var(--surface);
  color:var(--ink);
  line-height:1.62;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--green-2)}
h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.2;font-weight:700;letter-spacing:-.005em}
:focus-visible{outline:3px solid rgba(14,122,83,.55);outline-offset:2px;border-radius:6px}

/* Malayalam sits a touch larger — the glyphs carry more detail per character
   and at 16px on a phone the vowel signs start to merge.  Measured at 390px. */
html[data-lang="ml"] body{font-size:17px;line-height:1.72}

/* ---------- layout ---------------------------------------------------- */
.pc-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s-5)}
.pc-wrap.narrow{max-width:var(--narrow)}
.pc-sec{padding:var(--s-8) 0}
.pc-sec.tight{padding-top:0}
@media(min-width:820px){ .pc-sec{padding:var(--s-9) 0} }
.pc-sec.alt{background:var(--card);border-block:1px solid var(--line)}

/* the little editorial top every section gets: eyebrow → title → one line */
.pc-eyebrow{display:block;font-family:var(--ff-body);font-size:.76rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--green-2);margin-bottom:var(--s-2)}
.pc-h2{font-size:clamp(1.45rem,4.2vw,2.1rem);margin-bottom:var(--s-2)}
.pc-lede{color:var(--mut);font-size:1rem;max-width:60ch;margin-bottom:var(--s-5)}

.pc-grid{display:grid;gap:var(--s-4)}
.pc-grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pc-grid.three{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ---------- surfaces --------------------------------------------------- */
.pc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5);box-shadow:var(--shadow-sm)}
@media(min-width:560px){ .pc-card{padding:var(--s-6)} }
.pc-card.tinted{background:var(--green-tint);border-color:var(--green-line);box-shadow:none}
.pc-card.warm{background:var(--gold-soft);border-color:var(--gold-line);box-shadow:none}

.pc-pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);
  padding:5px 12px;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:var(--green-tint);color:var(--green);border:1px solid var(--green-line)}
.pc-pill.gold{background:var(--gold-soft);color:var(--gold-ink);border-color:var(--gold-line)}

/* ---------- buttons ---------------------------------------------------- */
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:12px var(--s-5);border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:var(--card);color:var(--green);font-family:var(--ff-body);font-size:.97rem;
  font-weight:700;text-decoration:none;cursor:pointer;transition:transform .16s ease,
  background-color .16s ease,border-color .16s ease,box-shadow .16s ease;text-align:center}
.pc-btn:hover{border-color:var(--green-line);background:var(--green-tint)}
.pc-btn:active{transform:translateY(1px)}
.pc-btn--primary{background:var(--green);border-color:var(--green);color:#fff;box-shadow:var(--shadow-sm)}
.pc-btn--primary:hover{background:var(--green-2);border-color:var(--green-2);color:#fff}
.pc-btn--gold{background:var(--gold);border-color:var(--gold);color:#231a00;box-shadow:var(--shadow-sm)}
.pc-btn--gold:hover{background:#d8b33c;border-color:#d8b33c;color:#231a00}
.pc-btn--ondark{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.42);color:#fff}
.pc-btn--ondark:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.7);color:#fff}
.pc-btn--wide{width:100%}
.pc-btn .ic{font-size:1.05em;line-height:1}

/* ---------- nav -------------------------------------------------------- */
.pc-nav{position:sticky;top:0;z-index:60;background:rgba(246,249,247,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pc-nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  min-height:66px;padding-block:var(--s-2)}
.pc-brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;color:var(--ink);min-width:0}
.pc-brand img{width:42px;height:42px;border-radius:var(--r-sm);background:#fff;padding:2px;
  flex:none;box-shadow:var(--shadow-sm);object-fit:contain}
.pc-brand .nm{font-family:var(--ff-display);font-weight:700;font-size:1.1rem;line-height:1.15;
  color:var(--green);display:block}
.pc-brand .tl{display:block;font-size:.66rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mut);line-height:1.3}
.pc-nav-right{display:flex;align-items:center;gap:var(--s-3);flex:none}
.pc-nav .pc-btn{min-height:44px;padding:10px var(--s-4);font-size:.9rem}
/* At 390px (and worse at 320) the brand, the language toggle and a Join button
   could not all fit: the toggle rode over the avatar and the page gained 7px of
   horizontal scroll.  On a phone the Join button steps out of the bar — the hero
   underneath it carries a full-width Join, so nothing is lost — and the brand
   name is allowed to shrink before the toggle is.  The toggle never shrinks:
   D1-42 was exactly that bug, മലയാളം clipped to മലയ. */
.pc-brand span{min-width:0}
.pc-brand .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:620px){
  .pc-brand .tl{display:none}
  .pc-brand img{width:38px;height:38px}
  .pc-brand .nm{font-size:.98rem}
  .pc-nav-right .pc-btn{display:none}
}
/* Below 480px "പാച്ചു കോച്ചിംഗ്സ്" beside a full-width toggle could only fit as
   "പാച്ചു കോ…".  An ellipsised brand looks broken, so the wordmark stands down
   and the avatar carries the identity — the hero says the name in full one
   line lower. */
@media(max-width:479px){ .pc-brand .nm{display:none} }

/* ---------- language toggle -------------------------------------------
   D1-42: at 390px the old pill shrank and overflow:hidden chopped മലയാളം down
   to മലയ.  It keeps its width now and the brand beside it gives way instead. */
.pc-lang{display:flex;flex:none;border:1px solid var(--line-2);border-radius:var(--r-pill);
  overflow:hidden;background:var(--card)}
.pc-lang button{background:none;border:0;color:var(--mut);font:inherit;font-family:var(--ff-body);
  font-size:.85rem;font-weight:700;padding:9px 14px;min-height:44px;cursor:pointer;
  white-space:nowrap;width:auto;margin:0;border-radius:0;line-height:1.2}
.pc-lang button.on{background:var(--green);color:#fff}
.pc-lang.ondark{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.1)}
.pc-lang.ondark button{color:#fff}
.pc-lang.ondark button.on{background:#fff;color:var(--green)}

/* ---------- forms ------------------------------------------------------ */
.pc-label{display:block;font-family:var(--ff-body);font-weight:700;font-size:.9rem;
  margin:var(--s-5) 0 var(--s-2);color:var(--ink)}
.pc-label .opt{font-weight:500;color:var(--mut)}
.pc-input{width:100%;min-height:50px;padding:13px var(--s-4);border:1px solid var(--line-2);
  border-radius:var(--r-sm);font:inherit;font-family:var(--ff-body);background:#fff;color:var(--ink)}
.pc-input:focus{outline:none;border-color:var(--green-2);box-shadow:0 0 0 3px rgba(14,122,83,.16)}
.pc-hint{font-size:.84rem;color:var(--mut);margin-top:var(--s-2)}
.pc-err{background:#fdeeec;border:1px solid #f2b9b1;color:#8a1c10;border-radius:var(--r-sm);
  padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4);font-size:.92rem}
.pc-err li{margin-left:var(--s-5)}

/* ---------- footer ----------------------------------------------------- */
.pc-foot{background:var(--green-deep);color:rgba(255,255,255,.82);padding:var(--s-8) 0 var(--s-7);
  margin-top:var(--s-8)}
.pc-foot a{color:#fff;text-decoration:none;font-weight:600}
.pc-foot a:hover{text-decoration:underline}
.pc-foot-grid{display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media(min-width:700px){ .pc-foot-grid{grid-template-columns:1.3fr 1fr 1fr} }
.pc-foot h4{font-family:var(--ff-body);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:var(--s-3);font-weight:800}
.pc-foot ul{list-style:none}
.pc-foot li{margin-bottom:var(--s-2);font-size:.94rem}
.pc-foot .bar{border-top:1px solid rgba(255,255,255,.14);margin-top:var(--s-6);padding-top:var(--s-4);
  font-size:.82rem;color:rgba(255,255,255,.6);display:flex;flex-wrap:wrap;gap:var(--s-3);
  justify-content:space-between}

/* honest note about part-translated pages — shown only in Malayalam */
.pc-mlnote{display:none;font-size:.82rem;color:var(--mut);margin-top:var(--s-4);
  border-left:3px solid var(--gold-line);padding-left:var(--s-3)}
html[data-lang="ml"] .pc-mlnote{display:block}

/* ---------- watermark --------------------------------------------------
   VK asked for the logo behind the page (Updates 1, 12 Aug).  Kept faint and
   pinned behind everything: felt, not noticed, and never in the way of the
   Malayalam.  Off on phones, where it is only clutter. */
.pc-mark::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url('/img/pachu-watermark.png') no-repeat center 38%;
  background-size:min(62vw,560px) auto;opacity:.9}
@media(max-width:760px){ .pc-mark::before{display:none} }

/* ============================================================================
   .pc-page — shared chrome for the inner pages (how, papers, join, me, read).

   Those pages have carried the same class names for weeks (header, .wrap,
   .card, .lang, .top, .brandwrap, footer …) and their markup is load-bearing:
   join.php and me.php are PHP with real logic wrapped around it.  So D1-51
   re-skins those names instead of re-cutting the HTML — the risk of a blank
   500 on a page that takes money is not worth a tidier div.

   Everything is scoped under .pc-page so it can never reach the home page.
   ========================================================================= */
.pc-page header{
  background:
    radial-gradient(70% 70% at 88% -20%,rgba(201,162,39,.20),transparent 62%),
    linear-gradient(158deg,#0e7a53 0%,#0b5c3f 52%,#07362a 100%);
  color:#fff;padding:var(--s-4) 0 var(--s-7);
  border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)}
.pc-page .wrap{max-width:880px;margin:0 auto;padding:0 var(--s-5)}
/* NB: .top is deliberately NOT in this rule.  On how.html .top is the brand row
   inside <header>, but on join.php and me.php .top IS the green band itself —
   making it a flex row would have laid the whole page out sideways. */
.pc-page .brandrow,.pc-page .langrow{display:flex;align-items:center;
  justify-content:space-between;gap:var(--s-3);min-height:60px}
.pc-page .langrow{justify-content:flex-end}
.pc-page .brandwrap{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.pc-page .brandwrap>div{min-width:0}
.pc-page .avatar{width:44px;height:44px;border-radius:var(--r-sm);background:#fff;padding:3px;
  flex:none;box-shadow:var(--shadow-sm);object-fit:contain}
.pc-page .brand{font-family:var(--ff-display);font-weight:700;font-size:1.05rem;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pc-page .lang{display:flex;flex:none;border:1px solid rgba(255,255,255,.45);
  border-radius:var(--r-pill);overflow:hidden;background:rgba(255,255,255,.1)}
.pc-page .lang button{width:auto;margin:0;background:none;border:0;color:#fff;font:inherit;
  font-family:var(--ff-body);font-size:.85rem;font-weight:700;padding:9px 14px;min-height:44px;
  cursor:pointer;white-space:nowrap;border-radius:0;line-height:1.2}
.pc-page .lang button.on{background:#fff;color:var(--green)}
/* The second line beside the brand (a tagline on me.php, a page name on
   how.html) wrapped to three lines of Malayalam at 390px and shoved the avatar
   off the row — and pushed me.php 20px past the viewport at 320.  It steps out
   on a phone; the h1 immediately below says the same thing. */
@media(max-width:620px){ .pc-page .brandwrap>div>div:nth-child(2){display:none} }
@media(max-width:479px){ .pc-page .brand{display:none} }

.pc-page header h1{font-size:clamp(1.55rem,4.8vw,2.3rem);margin:var(--s-5) 0 var(--s-3)}
.pc-page header .sub,.pc-page header .who{font-size:1rem;color:rgba(255,255,255,.9);max-width:56ch}

.pc-page section{padding:var(--s-7) 0}
.pc-page h2{font-family:var(--ff-display);font-size:clamp(1.25rem,3.6vw,1.65rem);
  margin-bottom:var(--s-2)}
.pc-page .lede{color:var(--mut);font-size:.98rem;margin-bottom:var(--s-4);max-width:62ch}
.pc-page .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5);box-shadow:var(--shadow-sm);margin-bottom:var(--s-4)}
@media(min-width:560px){ .pc-page .card{padding:var(--s-6)} }

/* numbered steps, used on how.html and me.php */
.pc-page ol.steps{counter-reset:s;list-style:none;margin:0}
.pc-page ol.steps li{counter-increment:s;display:flex;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-3) 0;border-bottom:1px solid var(--line);font-size:.97rem}
.pc-page ol.steps li:last-child{border-bottom:0}
.pc-page ol.steps li::before{content:counter(s);flex:none;width:28px;height:28px;
  border-radius:var(--r-sm);background:var(--green-tint);color:var(--green);
  font-family:var(--ff-display);font-size:.9rem;font-weight:800;display:grid;place-items:center;
  margin-top:1px}

/* link rows — how.html .backrow, me.php .linkrow / .btnrow */
.pc-page .backrow,.pc-page .linkrow,.pc-page .btnrow{display:flex;gap:var(--s-3);flex-wrap:wrap;
  margin-top:var(--s-4)}
.pc-page .backrow a,.pc-page .linkrow a,.pc-page .btnrow a{flex:1 1 190px;display:inline-flex;
  align-items:center;justify-content:center;min-height:48px;padding:12px var(--s-5);
  border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--card);
  color:var(--green);font-weight:700;font-size:.95rem;text-decoration:none;text-align:center;
  transition:background-color .16s ease,border-color .16s ease}
.pc-page .backrow a:hover,.pc-page .linkrow a:hover,.pc-page .btnrow a:hover{
  background:var(--green-tint);border-color:var(--green-line)}
.pc-page .backrow a.solid,.pc-page .linkrow a.solid{background:var(--gold);border-color:var(--gold);
  color:#231a00}
.pc-page .backrow a.solid:hover,.pc-page .linkrow a.solid:hover{background:#d8b33c;
  border-color:#d8b33c;color:#231a00}
.pc-page .btnrow a{background:var(--green);border-color:var(--green);color:#fff}
.pc-page .btnrow a:hover{background:var(--green-2);border-color:var(--green-2);color:#fff}
.pc-page .btnrow a.alt{background:var(--card);border-color:var(--line-2);color:var(--green)}
.pc-page .btnrow a.alt:hover{background:var(--green-tint);border-color:var(--green-line)}

/* forms — join.php and me.php */
.pc-page label{display:block;font-family:var(--ff-body);font-weight:700;font-size:.9rem;
  margin:var(--s-5) 0 var(--s-2)}
/* > matters: the School code label sits inside .row>div, so a plain
   form label:first-of-type zeroed ITS top margin too and the hint above it
   collided with the label. */
.pc-page form>label:first-of-type{margin-top:0}
.pc-page input,.pc-page select{width:100%;min-height:50px;padding:13px var(--s-4);
  border:1px solid var(--line-2);border-radius:var(--r-sm);font:inherit;font-family:var(--ff-body);
  background:#fff;color:var(--ink)}
.pc-page input:focus,.pc-page select:focus{outline:none;border-color:var(--green-2);
  box-shadow:0 0 0 3px rgba(14,122,83,.16)}
.pc-page .hint{font-size:.85rem;color:var(--mut);margin-top:var(--s-2)}
/* the language toggle lives outside every form on these pages, so a plain
   descendant selector is enough — no :not() gymnastics */
.pc-page form button{width:100%;
  margin-top:var(--s-6);min-height:54px;padding:15px;border:0;border-radius:var(--r-pill);
  background:var(--green);color:#fff;font:inherit;font-family:var(--ff-body);font-weight:800;
  font-size:1.02rem;cursor:pointer}
.pc-page form button:hover{background:var(--green-2)}
.pc-page .err{background:#fdeeec;border:1px solid #f2b9b1;color:#8a1c10;border-radius:var(--r-sm);
  padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4);font-size:.92rem}
.pc-page .err li{margin-left:var(--s-5)}

.pc-page footer{background:var(--green-deep);color:rgba(255,255,255,.78);
  text-align:center;padding:var(--s-7) var(--s-5);margin-top:var(--s-8);font-size:.9rem}
.pc-page footer a{color:#fff;font-weight:600;text-decoration:none}
.pc-page footer a:hover{text-decoration:underline}
/* .foot is NOT a footer bar on these pages — it is the quiet line of links under
   a card (join.php, me.php, papers.html).  Styling it like the dark footer put a
   green slab in the middle of the page. */
.pc-page .foot{text-align:center;color:var(--mut);font-size:.87rem;
  padding:var(--s-4) 0 var(--s-8)}
.pc-page .foot a{color:var(--green-2);font-weight:600}
.pc-page .mlnote{display:none;font-size:.82rem;color:var(--mut);margin-top:var(--s-4);
  border-left:3px solid var(--gold-line);padding-left:var(--s-3)}
html[data-lang="ml"] .pc-page .mlnote{display:block}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition-duration:.01ms !important;animation-duration:.01ms !important}
}