/* Seniru Physics v10 — Sinhala typography, responsive, accessibility and PWA refinements. */

:root {
  --content-max: 1180px;
  --safe-left: max(18px, env(safe-area-inset-left));
  --safe-right: max(18px, env(safe-area-inset-right));
}

html {
  overflow-x: hidden;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 280px;
  overflow-x: clip;
}

main,
section,
article,
aside,
div,
nav,
form,
label,
table {
  min-width: 0;
}

p,
h1,
h2,
h3,
h4,
td,
th,
a,
button,
span {
  overflow-wrap: anywhere;
}

/* Use native Sinhala fonts on iOS, Android and Windows. The explicit language
   hook prevents Latin interface labels from inheriting Sinhala typography. */
[lang="si"] {
  font-family: var(--font-sinhala);
  font-kerning: normal;
  letter-spacing: 0;
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: normal;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(39, 119, 255, .42);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Public website */
.hero-copy { min-width: 0; }
.hero h1 {
  font-size: clamp(2.7rem, 5.25vw, 5.15rem);
  line-height: 1.08;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.hero h1.hero-title-si {
  max-width: 16ch;
  margin-block: 24px 26px;
  font-family: var(--font-sinhala);
  font-size: clamp(2.35rem, 4.35vw, 4.15rem);
  font-weight: 850;
  line-height: 1.31;
  letter-spacing: 0;
  text-wrap: pretty;
}
.hero-title-si > span,
.hero-title-si > em {
  display: block;
}
.hero-title-si > span + span,
.hero-title-si > span + em {
  margin-top: .08em;
}
.hero-copy > p[lang="si"] { max-width: 650px; line-height: 1.95; }
.section-heading h2[lang="si"],
.system-intro h2[lang="si"],
.join-card h2[lang="si"] {
  font-family: var(--font-sinhala);
  font-weight: 800;
  line-height: 1.38;
  letter-spacing: 0;
  text-wrap: pretty;
}
.kicker[lang="si"] {
  font-family: var(--font-sinhala);
  letter-spacing: .035em;
  text-transform: none;
}
.button {
  height: auto;
  padding-block: 13px;
  line-height: 1.45;
  text-align: center;
}
.hero-copy > p,
.section-heading > p,
.system-intro > p,
.join-card p {
  font-size: clamp(1rem, 1.45vw, 1.12rem);
  line-height: 1.85;
}
.class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.class-card:last-child { grid-column: auto; }
.class-card { min-height: 390px; }
.class-card p { line-height: 1.9; }

/* Notification centre */
.notification-panel {
  position: absolute;
  z-index: 90;
  top: calc(100% + 10px);
  right: 0;
  width: min(390px, calc(100vw - 28px));
  max-height: min(520px, 70vh);
  overflow: auto;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(7, 23, 44, .18);
}
.notification-panel[hidden] { display: none; }
.notification-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid #e8edf3;
}
.notification-panel-head strong { font-size: .95rem; }
.notification-panel-head button {
  color: var(--blue);
  background: transparent;
  border: 0;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}
.notification-list { display: grid; gap: 7px; padding-top: 8px; }
.notification-item {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #f7f9fc;
  border: 1px solid #e7ebf1;
  border-radius: 12px;
}
.notification-item.unread { background: #eef5ff; border-color: #cfe0fa; }
.notification-item strong { font-size: .79rem; }
.notification-item p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.notification-item small { color: #8b96a5; font-size: .65rem; }
.topbar-actions { position: relative; }
.notification-dot[hidden],
.notification-dot.is-hidden { display: none; }

/* Enrolled programmes are full-width strips, one after another. */
.enrolled-strip-list { display: grid; gap: 14px; }
.next-class-card.enrolled-strip {
  width: 100%;
  min-height: 132px;
  grid-template-columns: 88px minmax(0, 1fr) auto;
}
.enrolled-strip .date-block { width: 82px; min-width: 82px; }
.enrolled-strip .next-class-copy h3 { margin: 4px 0 2px; }
.enrolled-strip .outline-action { white-space: nowrap; }

.class-card-link {
  min-height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
}
.class-card-link > p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.65; }
.remove-class-button {
  align-self: flex-start;
  margin-top: 14px;
  padding: 7px 0;
  color: #9e4435;
  background: transparent;
  border: 0;
  font-size: .7rem;
  font-weight: 850;
  cursor: pointer;
}
.remove-class-button:hover { color: #c63f26; text-decoration: underline; }

/* Schedule */
.schedule-list { display: grid; gap: 10px; }
.schedule-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
}
.schedule-date {
  display: grid;
  place-items: center;
  min-height: 62px;
  color: white;
  background: var(--navy);
  border-radius: 13px;
  text-align: center;
}
.schedule-date strong { font-size: 1.35rem; line-height: 1; }
.schedule-date small { color: #b9c6d6; font-size: .62rem; text-transform: uppercase; }
.schedule-item h3 { margin: 0; font-size: .9rem; }
.schedule-item p { margin: 2px 0 0; color: var(--muted); font-size: .74rem; }
.schedule-item time { color: var(--orange-dark); font-size: .72rem; font-weight: 850; }

/* Class payment banner and lesson filters */
.class-payment-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin: 22px 0;
  padding: 20px 22px;
  color: #fff;
  background: linear-gradient(135deg, #102d50, #07172c);
  border-radius: 18px;
}
.class-payment-banner[hidden] { display: none; }
.class-payment-banner h2 { margin: 0 0 3px; font-size: 1.05rem; }
.class-payment-banner p { margin: 0; color: #b8c7d9; font-size: .78rem; }
.class-payment-banner .button { min-height: 45px; }
.lesson-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(130px, auto));
  gap: 10px;
  margin: 18px 0;
}
.lesson-toolbar input,
.lesson-toolbar select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: 0;
}
.lesson-complete {
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  align-self: center;
  color: #2f7a4f;
  background: #eaf8ef;
  border: 1px solid #c9ead5;
  border-radius: 50%;
  cursor: pointer;
}
.lesson-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.lesson-actions .lesson-action { white-space: nowrap; }
.lesson-card.is-complete { opacity: .74; }
.lesson-card.is-complete h3 { text-decoration: line-through; text-decoration-color: #9aa6b5; }

/* Admin additions */
.admin-actions-row { display: flex; flex-wrap: wrap; gap: 9px; }
.admin-filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.admin-card-grid {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.audience-pill {
  display: inline-flex;
  padding: 4px 8px;
  color: #43536a;
  background: #edf2f8;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 850;
}
.admin-mobile-menu { display: none; }
.admin-nav button { white-space: nowrap; }
.nic-mask { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.admin-head-actions,
.payment-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.payment-actions button { min-height: 34px; padding-inline: 10px; }
.security-card { width: min(520px, 100%); }
.security-card > p { margin: 0; color: var(--muted); line-height: 1.65; }
#mfa-setup { display: grid; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
#mfa-setup[hidden] { display: none; }
#mfa-qr { width: min(250px, 100%); margin-inline: auto; border-radius: 12px; }
#mfa-secret { padding: 10px; overflow-wrap: anywhere; background: #f4f7fa; border-radius: 9px; font-family: ui-monospace, monospace; font-size: .7rem; }
.homepage-slots { display: grid; gap: 16px; }
#homepage-links-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.homepage-slot { display: grid; gap: 12px; margin: 0; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 17px; }
.homepage-slot legend { padding: 0 7px; color: var(--orange-dark); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.password-toggle,
.forgot-password { justify-self: end; color: var(--blue); background: transparent; border: 0; font-size: .72rem; font-weight: 850; cursor: pointer; }
.password-toggle { margin-top: -43px; margin-right: 9px; min-height: 34px; position: relative; z-index: 2; }
.forgot-password { margin-top: -7px; }

/* Reset-password page */
.reset-card {
  width: min(520px, calc(100% - 30px));
  margin: clamp(40px, 8vh, 90px) auto;
  padding: clamp(24px, 5vw, 42px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.reset-card h1 { margin: 8px 0; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05; }
.reset-card > p { color: var(--muted); }
.reset-card form { display: grid; gap: 15px; margin-top: 24px; }

@media (max-width: 1180px) {
  .nav-wrap,
  .hero-inner,
  .section,
  .system-inner,
  .footer-inner {
    width: auto;
    margin-inline: var(--safe-left) var(--safe-right);
  }
}

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 850px; }
  .hero-visual { width: min(760px, calc(100% - 18px)); }
  .section-heading { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .admin-card-grid { grid-template-columns: minmax(0, 1fr); }
  #homepage-links-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .dashboard-main { margin-left: 0; padding: 0 22px 64px; }
  .student-sidebar {
    width: min(290px, 86vw);
    transform: translateX(-105%);
    transition: transform .25s ease;
    box-shadow: 22px 0 60px rgba(7, 23, 44, .22);
  }
  .student-sidebar.open { transform: translateX(0); }
  .mobile-menu { display: block; }
  .dashboard-topbar { padding-left: 62px; }
  .sidebar-overlay.show { display: block; opacity: 1; pointer-events: auto; }
  .class-content-layout,
  .profile-layout,
  .dashboard-lower-grid { grid-template-columns: minmax(0, 1fr); }
  .class-tools,
  .profile-side { position: static; }
}

@media (min-width: 1081px) {
  .admin-sidebar { overflow-y: auto; }
  .admin-nav { margin-top: 28px; gap: 4px; }
  .admin-nav button { min-height: 45px; }
}

@media (max-width: 760px) {
  .nav-wrap { min-height: 72px; }
  .hero-inner { padding-top: 44px; }
  .hero h1 { font-size: clamp(2.35rem, 10.2vw, 3.65rem); line-height: 1.12; letter-spacing: -.045em; }
  .hero h1.hero-title-si { max-width: 18ch; font-size: clamp(2.05rem, 8.7vw, 3.15rem); line-height: 1.38; letter-spacing: 0; }
  .hero-copy > p { line-height: 1.8; }
  .class-grid,
  .system-steps,
  .resource-layout,
  .join-card { grid-template-columns: minmax(0, 1fr); }
  .class-card { min-height: 350px; }
  .hero-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visual-frame,
  .visual-frame img { height: 320px; min-height: 320px; }
  .floating-note strong { white-space: normal; }
  .join-card { padding: 32px 22px; }
  .next-class-card.enrolled-strip {
    grid-template-columns: 74px minmax(0, 1fr);
    padding: 16px;
  }
  .enrolled-strip .date-block { width: 70px; min-width: 70px; }
  .enrolled-strip .outline-action { grid-column: 1 / -1; width: 100%; }
  .schedule-item { grid-template-columns: 62px minmax(0, 1fr); }
  .schedule-item time { grid-column: 2; }
  .class-payment-banner { grid-template-columns: minmax(0, 1fr); }
  .class-payment-banner .button { width: 100%; }
  .lesson-toolbar { grid-template-columns: minmax(0, 1fr); }
  .admin-filter-row { grid-template-columns: minmax(0, 1fr); }
  .admin-head-actions { width: 100%; }
  .admin-head-actions > * { flex: 1; }
}

@media (max-width: 600px) {
  .dashboard-main { padding-inline: 14px; }
  .dashboard-topbar { min-height: 88px; padding-left: 54px; }
  .dashboard-topbar h1 { font-size: 1.55rem; }
  .topbar-profile > span:last-child { display: none; }
  .dashboard-welcome { padding: 25px 20px; }
  .dashboard-welcome h2 { font-size: 1.65rem; }
  .section-row { align-items: stretch; flex-direction: column; }
  .add-class-button { width: 100%; }
  .student-class-grid { grid-template-columns: minmax(0, 1fr); }
  .student-class-card { padding: 20px 17px; }
  .class-card-badges { align-items: flex-end; flex-direction: column; }
  .class-dialog { width: calc(100% - 18px); padding: 20px 15px; }
  .catalog-item { grid-template-columns: 50px minmax(0, 1fr); }
  .catalog-add { grid-column: 1 / -1; width: 100%; }
  .class-hero { padding: 28px 20px; }
  .class-hero-meta { align-items: flex-start; flex-direction: column; gap: 7px; }
  .lesson-card { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding: 15px 13px; }
  .lesson-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .profile-form-grid { grid-template-columns: minmax(0, 1fr); }
  .field-span { grid-column: auto; }
  .profile-actions { align-items: stretch; flex-direction: column-reverse; }
  .profile-actions a,
  .profile-actions button { width: 100%; }
  .admin-main { padding-inline: 12px; }
  .admin-table-wrap { border-radius: 14px !important; }
  .admin-table { min-width: 720px; }
}

@media (max-width: 420px) {
  :root { --safe-left: max(12px, env(safe-area-inset-left)); --safe-right: max(12px, env(safe-area-inset-right)); }
  .brand { gap: 8px; font-size: .95rem; }
  .brand-mark { width: 33px; height: 33px; border-radius: 11px 11px 11px 4px; }
  .menu-toggle,
  .portal-link { width: 40px; height: 40px; }
  .hero h1 { font-size: clamp(2.05rem, 10.5vw, 2.8rem); }
  .hero h1.hero-title-si { font-size: clamp(1.85rem, 8.8vw, 2.35rem); line-height: 1.43; }
  .hero-actions { gap: 10px; }
  .button { padding-inline: 16px; font-size: .9rem; }
  .hero-visual { width: 100%; }
  .visual-frame,
  .visual-frame img { height: 260px; min-height: 260px; }
  .floating-note { display: none; }
  .section { padding-block: 68px; }
  .section-heading h2,
  .system-intro h2,
  .join-card h2 { font-size: 2rem; }
  .section-heading h2[lang="si"],
  .system-intro h2[lang="si"],
  .join-card h2[lang="si"] { font-size: 1.9rem; line-height: 1.45; }
  .class-card { padding: 23px; }
  .featured-resource { padding: 22px 18px; }
  .feature-content h3 { font-size: 2rem; }
  .resource-item { grid-template-columns: 42px minmax(0, 1fr) 20px; gap: 10px; padding: 14px 12px; }
  .resource-icon { width: 42px; height: 42px; }
  .footer-links { gap: 14px; }
  .dashboard-main { padding-inline: 10px; }
  .dashboard-topbar { padding-left: 52px; }
  .mobile-menu { left: max(10px, env(safe-area-inset-left)); }
  .notification-panel { right: -52px; }
  .next-class-card.enrolled-strip { grid-template-columns: minmax(0, 1fr); }
  .enrolled-strip .date-block { width: 100%; grid-template-columns: auto auto auto; min-height: 58px; }
  .enrolled-strip .outline-action { grid-column: auto; }
  .class-year { width: 52px; height: 52px; }
  .class-card-top { gap: 10px; }
  .class-card-badges { max-width: calc(100% - 62px); }
  .admin-stats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-height: 520px) and (orientation: landscape) {
  .student-sidebar { overflow-y: auto; padding-top: 16px; }
  .student-nav { margin-top: 18px; }
  .sidebar-bottom { position: static; }
  .notification-panel { max-height: 78vh; }
}

@media (prefers-reduced-motion: reduce) {
  .student-sidebar { transition: none; }
}