/* =====================================================================
   KSRTC Grievance Redressal Portal
   Visual language: the Corporation's own materials — kasavu off-white
   with a gold border rule, the red/white/green of the KSRTC roundel,
   destination-board lettering, and ticket-machine monospace for numbers.
   ===================================================================== */

:root{
  /* palette */
  --ivory:      #FBF7EE;   /* kasavu cloth */
  --paper:      #FFFFFF;
  --ink:        #16191B;
  --ink-soft:   #4E5A55;
  --rule:       #E4DBC8;
  --gold:       #B08D2E;   /* kasavu border */
  --gold-lite:  #E8D9A8;
  --red:        #C5232C;   /* KSRTC roundel red */
  --red-dark:   #96181F;
  --green:      #0E5C3F;   /* KSRTC roundel green */
  --green-lite: #E7F1EB;
  --board:      #12312A;   /* destination board */
  --amber:      #F2B01E;   /* board lettering */

  /* type */
  --display: 'Archivo', 'Manjari', 'Noto Sans Malayalam', system-ui, sans-serif;
  --body:    'Manjari', 'Noto Sans Malayalam', 'Archivo', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --shell: 1160px;
  --r: 4px;                /* government forms are square-ish, not pill-shaped */
  --shadow: 0 1px 2px rgba(22,25,27,.06), 0 8px 24px -12px rgba(22,25,27,.18);
  --fs: 1rem;
}

html[data-fs="lg"]  { --fs: 1.115rem; }
html[data-fs="xl"]  { --fs: 1.24rem; }

html[data-contrast="high"]{
  --ivory:#fff; --paper:#fff; --ink:#000; --ink-soft:#1a1a1a;
  --rule:#000; --gold:#6b5200; --red:#9d0009; --green:#00402a; --shadow:none;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--body);
  font-size:var(--fs);
  line-height:1.65;
  color:var(--ink);
  background:var(--ivory);
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.18; letter-spacing:-.012em; margin:0 0 .5em; }
h1{ font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); }
h2{ font-size:clamp(1.4rem, 1rem + 1.5vw, 2.05rem); }
h3{ font-size:1.16rem; }
p{ margin:0 0 1em; }
a{ color:var(--green); text-underline-offset:3px; }
a:hover{ color:var(--red); }

:focus-visible{ outline:3px solid var(--red); outline-offset:2px; border-radius:2px; }

.shell{ width:min(var(--shell), calc(100% - 2.5rem)); margin-inline:auto; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:.5rem; z-index:99; background:var(--red); color:#fff; padding:.6rem 1rem; }

/* eyebrow label used above section headings */
.eyebrow{
  font-family:var(--display); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
  display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem;
}
.eyebrow::after{ content:''; flex:1; height:1px; background:var(--rule); }

/* ==================== utility bar ==================== */
.utility{
  background:var(--board); color:#D9E4DE; font-size:.79rem;
  border-bottom:2px solid var(--gold);
}
.utility .shell{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; align-items:center; min-height:38px; padding-block:.3rem; }
.utility a{ color:#D9E4DE; text-decoration:none; }
.utility a:hover{ color:var(--amber); text-decoration:underline; }
.utility .spacer{ flex:1; }
.utility .grp{ display:flex; align-items:center; gap:.35rem; }
.util-btn{
  background:transparent; border:1px solid #3A5A4E; color:#D9E4DE;
  font:inherit; font-family:var(--display); line-height:1;
  padding:.28rem .5rem; cursor:pointer; border-radius:2px;
}
.util-btn[aria-pressed="true"], .util-btn:hover{ background:var(--amber); color:var(--board); border-color:var(--amber); }
.lang-pill{
  font-family:var(--display); font-weight:700; padding:.25rem .7rem;
  background:var(--amber); color:var(--board); border-radius:2px; text-decoration:none !important;
}

/* ==================== masthead ==================== */
.masthead{ background:var(--paper); border-bottom:1px solid var(--rule); }
.masthead .shell{ display:flex; align-items:center; gap:1rem; padding:.85rem 0; }
.crest{ width:62px; height:62px; flex:none; }
.crest img{ width:100%; height:100%; object-fit:contain; }
.titles{ min-width:0; }
.titles .govt{ font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--red); font-family:var(--display); font-weight:700; }
.titles .org{ font-family:var(--display); font-weight:800; font-size:clamp(1rem,.75rem + .8vw,1.3rem); line-height:1.15; }
.titles .sub{ font-size:.87rem; color:var(--ink-soft); }
.masthead .spacer{ flex:1; }
.masthead .helpline{ text-align:right; line-height:1.25; }
.masthead .helpline .num{ font-family:var(--mono); font-size:1.55rem; font-weight:600; color:var(--red); letter-spacing:.02em; display:block; }
.masthead .helpline .lbl{ font-size:.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; }

/* kasavu double rule — the gold border of a Kerala mundu */
.kasavu{ height:7px; background:
    linear-gradient(var(--gold),var(--gold)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--gold-lite),var(--gold-lite)) 0 3px/100% 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 5px/100% 2px no-repeat,
    var(--ivory); }

/* ==================== nav ==================== */
.nav{ background:var(--green); }
.nav .shell{ display:flex; flex-wrap:wrap; }
.nav a{
  font-family:var(--display); font-weight:600; font-size:.95rem;
  color:#EAF3EE; text-decoration:none; padding:.75rem 1.05rem;
  border-bottom:3px solid transparent;
}
.nav a:hover{ background:#0A4A32; color:#fff; }
.nav a[aria-current="page"]{ background:#0A4A32; color:#fff; border-bottom-color:var(--amber); }
.nav .push{ margin-left:auto; }

/* ==================== hero ==================== */
.hero{ padding:2.6rem 0 0; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.35fr .95fr; gap:2.6rem; align-items:start; }
.hero .kicker{
  font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red); margin-bottom:.9rem;
}
.hero h1{ margin-bottom:.55rem; }
.hero h1 em{ font-style:normal; color:var(--red); }
.hero .lede{ font-size:1.06rem; color:var(--ink-soft); max-width:58ch; }

.cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.5rem; }
.btn{
  font-family:var(--display); font-weight:700; font-size:1rem;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.82rem 1.5rem; border-radius:var(--r); border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .12s ease, background .12s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--red); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--red-dark); color:#fff; }
.btn-ghost{ background:transparent; color:var(--green); border-color:var(--green); }
.btn-ghost:hover{ background:var(--green); color:#fff; }
.btn-plain{ background:var(--paper); color:var(--ink); border-color:var(--rule); }
.btn-plain:hover{ border-color:var(--ink); color:var(--ink); }
.btn-sm{ padding:.45rem .85rem; font-size:.86rem; }

/* --- signature: the destination roll board --- */
.board{
  background:var(--board); border:5px solid #0A211C; border-radius:3px;
  padding:.9rem 1.1rem; box-shadow:var(--shadow); position:relative;
}
.board::after{
  content:''; position:absolute; inset:5px; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
}
.board .route{
  font-family:var(--display); font-weight:800; color:var(--amber);
  font-size:clamp(1.1rem,.8rem + 1vw,1.55rem); letter-spacing:.04em;
  text-transform:uppercase; line-height:1.15;
}
.board .via{ color:#8FB3A2; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-top:.3rem; }
.board .no{ font-family:var(--mono); color:#fff; font-size:.8rem; margin-top:.55rem; letter-spacing:.05em; }

/* --- leaders --- */
.leaders{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.1rem; }
.leader{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.leader img{ width:100%; aspect-ratio:44/55; object-fit:cover; object-position:center top; display:block; }
.leader .cap{ padding:.6rem .7rem; border-top:3px solid var(--gold); }
.leader .nm{ font-family:var(--display); font-weight:700; font-size:.94rem; line-height:1.2; }
.leader .rl{ font-size:.78rem; color:var(--ink-soft); line-height:1.3; }

/* --- the road: bus drives along a kasavu-gold road under the hero --- */
.road{ margin-top:2.4rem; position:relative; height:120px; }
.road .tar{
  position:absolute; left:0; right:0; bottom:0; height:44px; background:var(--board);
  border-top:3px solid var(--gold);
}
.road .lane{
  position:absolute; left:0; right:0; bottom:20px; height:3px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 34px, transparent 34px 68px);
  opacity:.75;
}
.road .bus{ position:absolute; bottom:38px; width:290px; will-change:transform;
  animation:drive 26s linear infinite; animation-delay:-9s; }
@keyframes drive{
  0%   { transform:translateX(-320px); }
  100% { transform:translateX(calc(100vw + 40px)); }
}
@media (prefers-reduced-motion: reduce){ .road .bus{ animation:none; left:6%; } }

/* ==================== sections ==================== */
section{ padding:3.2rem 0; }
section.tight{ padding:2.2rem 0; }
.band-white{ background:var(--paper); border-block:1px solid var(--rule); }
.band-green{ background:var(--green-lite); border-block:1px solid #CFE2D7; }

/* --- action tiles --- */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:1.1rem; }
.tile{
  background:var(--paper); border:1px solid var(--rule); border-top:4px solid var(--red);
  border-radius:var(--r); padding:1.3rem 1.2rem; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:.4rem; transition:transform .14s ease, box-shadow .14s ease;
}
.tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow); color:inherit; }
.tile:nth-child(2){ border-top-color:var(--green); }
.tile:nth-child(3){ border-top-color:var(--gold); }
.tile:nth-child(4){ border-top-color:var(--board); }
.tile .ico{ width:36px; height:36px; color:var(--red); }
.tile:nth-child(2) .ico{ color:var(--green); }
.tile:nth-child(3) .ico{ color:var(--gold); }
.tile:nth-child(4) .ico{ color:var(--board); }
.tile h3{ margin:.3rem 0 0; }
.tile p{ margin:0; font-size:.9rem; color:var(--ink-soft); }
.tile .go{ font-family:var(--display); font-weight:700; font-size:.85rem; color:var(--red); margin-top:auto; padding-top:.6rem; }

/* --- notice strip --- */
.notice{
  background:var(--paper); border:1px solid var(--rule); border-left:5px solid var(--amber);
  border-radius:var(--r); padding:.9rem 1.1rem; display:flex; gap:.8rem; align-items:flex-start;
}
.notice svg{ flex:none; width:22px; height:22px; color:var(--gold); margin-top:.15rem; }
.notice p{ margin:0; font-size:.93rem; }

/* --- stats --- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
.stat{ background:var(--paper); padding:1.4rem 1.2rem; }
.stat .n{ font-family:var(--mono); font-weight:600; font-size:2.1rem; line-height:1; color:var(--green); }
.stat .l{ font-size:.85rem; color:var(--ink-soft); margin-top:.4rem; }
.stat:nth-child(3) .n{ color:var(--red); }

/* ==================== forms ==================== */
.page-head{ background:var(--paper); border-bottom:1px solid var(--rule); padding:2rem 0 1.6rem; }
.page-head h1{ margin-bottom:.3rem; }
.page-head p{ color:var(--ink-soft); margin:0; max-width:70ch; }

.formwrap{ padding:2.4rem 0 3.5rem; }
.card{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow); }
.card > .card-body{ padding:1.6rem; }

fieldset{ border:0; border-top:1px solid var(--rule); margin:0; padding:1.6rem 0 .4rem; }
fieldset:first-of-type{ border-top:0; padding-top:.4rem; }
legend{
  font-family:var(--display); font-weight:800; font-size:1.05rem; padding:0 .6rem 0 0;
}
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem 1.2rem; }
.field{ display:flex; flex-direction:column; gap:.32rem; margin-bottom:1rem; }
.field.wide{ grid-column:1/-1; }
label{ font-family:var(--display); font-weight:600; font-size:.92rem; }
label .req{ color:var(--red); }
.hint{ font-size:.81rem; color:var(--ink-soft); }
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=password],input[type=number],select,textarea{
  font:inherit; font-size:.98rem; color:var(--ink);
  padding:.62rem .7rem; border:1.5px solid #C9C1AF; border-radius:var(--r);
  background:var(--paper); width:100%;
}
textarea{ min-height:150px; resize:vertical; line-height:1.6; }
input:focus,select:focus,textarea:focus{ border-color:var(--green); outline:2px solid rgba(14,92,63,.25); outline-offset:0; }
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{ border-color:var(--red); background:#FDF4F4; }
input[type=file]{ font-size:.9rem; }

/* channel / type choice cards */
.choices{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice span.box{
  display:block; border:2px solid var(--rule); border-radius:var(--r);
  padding:1rem 1.1rem; cursor:pointer; background:var(--paper); height:100%;
}
.choice .t{ font-family:var(--display); font-weight:700; display:block; }
.choice .d{ font-size:.85rem; color:var(--ink-soft); display:block; margin-top:.2rem; }
.choice input:checked + span.box{ border-color:var(--green); background:var(--green-lite); box-shadow:inset 0 0 0 1px var(--green); }
.choice input:focus-visible + span.box{ outline:3px solid var(--red); outline-offset:2px; }
.choice input:disabled + span.box{ opacity:.45; cursor:not-allowed; }

.checkrow{ display:flex; gap:.65rem; align-items:flex-start; }
.checkrow input{ margin-top:.35rem; width:18px; height:18px; flex:none; accent-color:var(--green); }

.errors{ background:#FDF3F3; border:1px solid #E9B9BB; border-left:5px solid var(--red); border-radius:var(--r); padding:1rem 1.2rem; margin-bottom:1.6rem; }
.errors h2{ font-size:1rem; color:var(--red-dark); margin:0 0 .4rem; }
.errors ul{ margin:0; padding-left:1.1rem; font-size:.92rem; }
.flash-ok{ background:var(--green-lite); border:1px solid #A9CDB9; border-left:5px solid var(--green); border-radius:var(--r); padding:.9rem 1.2rem; margin-bottom:1.4rem; }

.actions{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; padding-top:1.4rem; border-top:1px solid var(--rule); margin-top:.6rem; }

.captcha-q{ font-family:var(--mono); font-size:1.05rem; background:var(--ivory); border:1px dashed var(--gold); padding:.55rem .8rem; border-radius:var(--r); display:inline-block; }

/* ==================== ticket (acknowledgement) ====================
   Signature element: the receipt is drawn as a KSRTC ticket stub.     */
.ticket{
  background:var(--paper); max-width:640px; margin-inline:auto;
  border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.ticket-top{ background:var(--board); color:#fff; padding:1rem 1.4rem; display:flex; gap:.9rem; align-items:center; }
.ticket-top img{ width:46px; height:46px; background:#fff; border-radius:50%; padding:2px; }
.ticket-top .tt{ font-family:var(--display); font-weight:800; line-height:1.15; font-size:1rem; }
.ticket-top .ts{ font-size:.78rem; color:#9FC0B0; }
.ticket-body{ padding:1.4rem; }
.docket-box{
  border:2px dashed var(--gold); border-radius:var(--r); padding:1rem 1.1rem;
  text-align:center; background:#FFFDF7; margin-bottom:1.3rem;
}
.docket-box .lbl{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-family:var(--display); font-weight:700; }
.docket-box .no{ font-family:var(--mono); font-weight:600; font-size:clamp(1.05rem,.8rem + 1.1vw,1.5rem); color:var(--red-dark); letter-spacing:.02em; word-break:break-all; margin-top:.25rem; }
.kv{ display:grid; grid-template-columns:minmax(120px,34%) 1fr; gap:.5rem 1rem; font-size:.92rem; }
.kv dt{ color:var(--ink-soft); }
.kv dd{ margin:0; font-weight:600; }
/* perforation */
.perf{ position:relative; height:22px; margin:1.2rem -1.4rem 1rem; }
.perf::before{ content:''; position:absolute; top:50%; left:1.4rem; right:1.4rem; border-top:2px dashed var(--rule); }
.perf::after{ content:''; position:absolute; top:calc(50% - 11px); left:-11px; right:-11px; height:22px;
  background:radial-gradient(circle at 11px 11px, var(--ivory) 11px, transparent 11px) left/22px 22px no-repeat,
             radial-gradient(circle at 11px 11px, var(--ivory) 11px, transparent 11px) right/22px 22px no-repeat; }
.ticket-foot{ font-size:.78rem; color:var(--ink-soft); text-align:center; padding:0 1.4rem 1.3rem; }

/* ==================== status / timeline ==================== */
.badge{
  display:inline-block; font-family:var(--display); font-weight:700; font-size:.78rem;
  padding:.24rem .65rem; border-radius:100px; border:1.5px solid;
}
.b-received{ color:var(--board); border-color:var(--board); background:#EDF2F0; }
.b-examination{ color:#8A5B00; border-color:#C99A2E; background:#FDF6E6; }
.b-forwarded{ color:#1D4E89; border-color:#4C7FBE; background:#EDF3FB; }
.b-action_taken{ color:var(--green); border-color:var(--green); background:var(--green-lite); }
.b-disposed{ color:#fff; border-color:var(--green); background:var(--green); }
.b-rejected{ color:#fff; border-color:var(--red-dark); background:var(--red-dark); }

.timeline{ list-style:none; margin:0; padding:0 0 0 1.6rem; border-left:2px solid var(--rule); }
.timeline li{ position:relative; padding:0 0 1.5rem .3rem; }
.timeline li::before{
  content:''; position:absolute; left:calc(-1.6rem - 7px); top:.45rem;
  width:12px; height:12px; border-radius:50%; background:var(--paper); border:3px solid var(--green);
}
.timeline li:first-child::before{ background:var(--red); border-color:var(--red); }
.timeline .when{ font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); }
.timeline .what{ font-family:var(--display); font-weight:700; margin-top:.15rem; }
.timeline .who{ font-size:.84rem; color:var(--ink-soft); }
.timeline .rem{ font-size:.92rem; margin-top:.35rem; }

/* ==================== tables (admin) ==================== */
.table-wrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r); background:var(--paper); }
table.data{ width:100%; border-collapse:collapse; font-size:.9rem; }
table.data th,table.data td{ padding:.65rem .8rem; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top; }
table.data thead th{ background:var(--ivory); font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
table.data tbody tr:hover{ background:#FAFCFB; }
table.data td.mono{ font-family:var(--mono); font-size:.83rem; white-space:nowrap; }

.filters{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:end; margin-bottom:1.2rem; }
.filters .field{ margin:0; min-width:150px; }
.pager{ display:flex; gap:.4rem; margin-top:1.2rem; flex-wrap:wrap; }
.pager a,.pager span{ font-family:var(--mono); font-size:.85rem; padding:.35rem .7rem; border:1px solid var(--rule); border-radius:var(--r); text-decoration:none; background:var(--paper); }
.pager .cur{ background:var(--green); color:#fff; border-color:var(--green); }

/* admin shell */
.adm-bar{ background:var(--board); color:#fff; }
.adm-bar .shell{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.6rem 0; }
.adm-bar .brand{ font-family:var(--display); font-weight:800; display:flex; align-items:center; gap:.6rem; }
.adm-bar .brand img{ width:32px; height:32px; background:#fff; border-radius:50%; padding:1px; }
.adm-bar nav{ display:flex; gap:.2rem; flex-wrap:wrap; margin-left:1rem; }
.adm-bar nav a{ color:#CFE0D8; text-decoration:none; font-family:var(--display); font-size:.9rem; padding:.4rem .75rem; border-radius:var(--r); }
.adm-bar nav a:hover,.adm-bar nav a[aria-current="page"]{ background:#0A211C; color:var(--amber); }
.adm-bar .who{ margin-left:auto; font-size:.83rem; color:#9FC0B0; text-align:right; }
.adm-bar .who b{ color:#fff; display:block; font-family:var(--display); }
.role-tag{ display:inline-block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; background:var(--amber); color:var(--board); padding:.1rem .45rem; border-radius:2px; font-weight:700; }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.6rem; }
.kpi{ background:var(--paper); border:1px solid var(--rule); border-left:4px solid var(--green); border-radius:var(--r); padding:1rem 1.1rem; }
.kpi .n{ font-family:var(--mono); font-size:1.8rem; font-weight:600; line-height:1; }
.kpi .l{ font-size:.82rem; color:var(--ink-soft); margin-top:.35rem; }
.kpi.warn{ border-left-color:var(--amber); }
.kpi.bad{ border-left-color:var(--red); }

.split{ display:grid; grid-template-columns:1.5fr 1fr; gap:1.4rem; align-items:start; }

/* login */
.login-page{ min-height:100vh; display:grid; place-items:center; padding:2rem 1rem;
  background:var(--board);
  background-image:radial-gradient(circle at 20% 0%, rgba(178,141,46,.25), transparent 55%); }
.login-card{ background:var(--paper); border-radius:6px; box-shadow:0 24px 60px -20px rgba(0,0,0,.6); width:min(430px,100%); overflow:hidden; }
.login-card .top{ text-align:center; padding:1.8rem 1.6rem 1.2rem; border-bottom:3px solid var(--gold); }
.login-card .top img{ width:74px; height:74px; }
.login-card .body{ padding:1.5rem 1.6rem 1.8rem; }

/* ==================== footer ==================== */
.footer{ background:var(--board); color:#C7D6CF; margin-top:auto; }
.footer a{ color:#C7D6CF; text-decoration:none; }
.footer a:hover{ color:var(--amber); text-decoration:underline; }
.footer .cols{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem; padding:2.6rem 0 1.8rem; }
.footer h4{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:.9rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; font-size:.9rem; }
.footer .tollfree{ font-family:var(--mono); font-size:2rem; color:#fff; line-height:1; }
.footer .legal{ border-top:1px solid #2B4A3F; padding:1rem 0 1.6rem; font-size:.8rem; display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.footer .legal .spacer{ flex:1; }
.footer-rule{ height:4px; background:linear-gradient(90deg,var(--red) 0 33.3%,#fff 33.3% 66.6%,var(--green) 66.6% 100%); }

/* ==================== print ==================== */
@media print{
  .utility,.masthead,.nav,.footer,.kasavu,.no-print,.road,.footer-rule{ display:none !important; }
  body{ background:#fff; font-size:11.5pt; }
  .ticket{ box-shadow:none; border:1.5px solid #333; max-width:100%; }
  .ticket-top{ background:#12312A !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .docket-box{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  section{ padding:0; }
  a[href]::after{ content:''; }
}

/* --- three-step strip in the hero aside --- */
.steps{ list-style:none; counter-reset:s; margin:1.4rem 0 0; padding:0; display:grid; gap:.7rem; }
.steps li{
  counter-increment:s; position:relative; padding-left:2.4rem;
  font-size:.9rem; color:var(--ink-soft); line-height:1.5;
}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:-.1rem;
  width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--green); color:#fff; font-family:var(--mono); font-size:.82rem;
  display:grid; place-items:center;
}

/* --- Malayalam: tracking and case transforms are Latin conventions --- */
html[lang="ml"] .eyebrow,
html[lang="ml"] .hero .kicker,
html[lang="ml"] .board .route,
html[lang="ml"] .board .via,
html[lang="ml"] .titles .govt,
html[lang="ml"] .masthead .helpline .lbl,
html[lang="ml"] .footer h4,
html[lang="ml"] table.data thead th,
html[lang="ml"] .docket-box .lbl,
html[lang="ml"] .role-tag{ letter-spacing:normal; text-transform:none; }
html[lang="ml"] body{ line-height:1.75; }
html[lang="ml"] h1,html[lang="ml"] h2,html[lang="ml"] h3{ letter-spacing:normal; line-height:1.3; }

/* ==================== responsive ==================== */
@media (max-width: 940px){
  .hero-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .split{ grid-template-columns:1fr; }
  .footer .cols{ grid-template-columns:1fr 1fr; }
  .grid3{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px){
  .shell{ width:calc(100% - 1.8rem); }
  .masthead .helpline{ display:none; }
  .crest{ width:48px; height:48px; }
  .grid2,.grid3,.choices,.leaders{ grid-template-columns:1fr; }
  .footer .cols{ grid-template-columns:1fr; }
  .nav .shell{ overflow-x:auto; flex-wrap:nowrap; }
  .nav a{ white-space:nowrap; padding:.7rem .85rem; font-size:.9rem; }
  .road{ height:96px; }
  .road .bus{ width:210px; bottom:34px; }
  .kv{ grid-template-columns:1fr; gap:.15rem .5rem; }
  .kv dd{ margin-bottom:.5rem; }
  .card > .card-body{ padding:1.1rem; }
}