:root {
  /* navy, muted teal and gold: the palette of the Autonomous deck's cover */
  --ink:#17222d; --muted:#5d6a76; --line:#d8dfe5; --brand:#173d57; --brand-2:#1f7a8c; --soft:#e9f0f4; --gold:#c69632; --navy:#12304a;
  --warn:#fff4d6; --warn-line:#d8ae3c; --bad-ink:#a3271b; --good:#1d7a3a;
  --input:#1f7a8c; --process:#b07a2a; --outcome:#6b5aa6; --extra:#8a949c;
  --frame:#e6e9ec; --bar:#ffffff; --barh:76px; --tabh:58px;
}
/* Decoding NAAC: the Autonomous deck website. With JavaScript the page fills the screen and never
   scrolls: the sidebar on the left, a title row, the content laid out into screen-sized pages
   (site.js) and a bottom bar to turn pages and move between topics. Without JavaScript it is an
   ordinary page. Layout follows the NAAC 2025 deck website of the review portal. */
:root { --bg:#f2f4f6; --bad:#fde8e6; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--brand-2); }

/* ---------- screen shell ---------- */
html.js, html.js body { height:100%; overflow:hidden; }
html.js body { display:flex; flex-direction:column; }
.layout { flex:1; min-height:0; display:grid; grid-template-columns:248px minmax(0,1fr); position:relative; }
html:not(.js) .layout { max-width:1360px; margin:0 auto; }

/* sidebar */
.side { min-height:0; overflow:auto; padding:14px 10px 14px 12px; background:var(--navy); color:#d6e1ea; font-size:13.5px; }
.side .brand { display:block; font-weight:700; font-size:16px; color:#fff; text-decoration:none; padding:6px 8px 10px; border-radius:8px; line-height:1.3;
  border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:4px; }
.side .brand small { display:block; font-weight:400; font-size:11.5px; color:#9fb3c4; margin-top:2px; }
.side .brand.on { background:rgba(255,255,255,.08); }
.side h4 { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#e2b65c; margin:14px 0 4px 8px; }
.side ul { list-style:none; margin:0; padding:0; }
.side a.l { display:block; padding:5px 8px; border-radius:7px; color:#d6e1ea; text-decoration:none; line-height:1.3; }
.side a.l:hover, .side .chip:hover { background:rgba(255,255,255,.1); color:#fff; }
.side a.l.on, .side .chip.on { background:#fff; color:var(--navy); font-weight:700; }
.side .chips { display:grid; grid-template-columns:repeat(5, 1fr); gap:5px; padding:6px 8px 2px; }
.side .chip { display:block; text-align:center; padding:4px 0; border:1px solid rgba(255,255,255,.22); border-radius:7px; color:#fff; text-decoration:none; font-weight:700; font-size:13px; }
.side .ext { margin-top:14px; border-top:1px solid rgba(255,255,255,.12); padding-top:8px; }

/* title row */
main { min-width:0; min-height:0; display:flex; flex-direction:column; }
.top { flex:none; display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; padding:12px 28px 10px; border-bottom:1px solid var(--line); background:#fff; position:relative; }
.top::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:linear-gradient(90deg, var(--navy), var(--brand) 55%, var(--brand-2)); }
.top .ttl { flex:1; min-width:0; }
.crumb { font-size:12px; color:var(--muted); letter-spacing:.02em; }
.crumb a { color:var(--muted); }
.top h1 { font-size:22px; margin:0; line-height:1.25; color:var(--brand); }
.offi { font-size:12px; color:#6b5200; background:#fdf6e3; border:1px solid #e7cf8f; border-radius:12px; padding:2px 10px; white-space:nowrap; cursor:help; }
.menu { display:none; font:inherit; font-size:14px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:5px 10px; cursor:pointer; }
.tools { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.filter { width:230px; font:inherit; font-weight:400; padding:5px 10px; border:1px solid var(--line); border-radius:8px; }

/* pages */
.scrim { display:none; }
.flow { flex:1; min-height:0; position:relative; overflow:hidden; outline:none; }
.page { display:none; height:100%; overflow:hidden; padding:10px 28px 0; }
.page.on { display:block; }
.page.tall { overflow:auto; }
html.js #src { display:none; }
html:not(.js) .flow, html:not(.js) .bar .pg { display:none; }
html:not(.js) #src { padding:6px 28px 40px; }
.cont > table tr:first-child th { border-top:0; }
li.cont { list-style:none; }

/* bottom bar and credits */
.bar { flex:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:6px 28px; border-top:1px solid var(--line); background:#fff; font-size:13.5px; min-height:44px; }
.bar .topic { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; color:var(--brand); font-weight:600; }
.bar .topic:hover { text-decoration:underline; }
.bar .next { text-align:right; }
.bar .pg { display:flex; align-items:center; gap:8px; color:var(--muted); white-space:nowrap; }
.bar .pg[hidden] { display:none; }
.bar button { font:inherit; font-size:18px; line-height:1; width:36px; height:30px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--brand); cursor:pointer; }
.bar button:disabled { color:#b7bec4; cursor:default; }
.bar button:not(:disabled):hover { background:var(--soft); }
.credits { flex:none; padding:5px 28px 7px; font-size:11.5px; color:#7a8692; background:#fff; border-top:1px solid #edf0f2; }
.credits i { display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--gold); vertical-align:middle; margin:0 10px; }

/* short screens: keep the whole sidebar visible */
@media (max-height: 720px) and (min-width: 901px) {
  .side { padding-top:8px; font-size:13px; } .side .brand small { display:none; }
  .side h4 { margin-top:8px; } .side a.l { padding:3px 8px; } .side .chip { padding:2px 0; }
  .top { padding-top:7px; padding-bottom:7px; } .top h1 { font-size:19px; }
}

/* ---------- narrow screens: the sidebar becomes a drawer ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns:minmax(0,1fr); }
  .side { position:absolute; z-index:20; top:0; bottom:0; left:0; width:min(290px, 86vw); transform:translateX(-105%); transition:transform .2s; box-shadow:0 0 24px rgba(0,0,0,.25); }
  .side-open .side { transform:none; }
  .scrim { display:none; position:absolute; inset:0; z-index:10; background:rgba(20,30,40,.4); }
  .side-open .scrim { display:block; }
  .menu { display:block; }
  .top { padding:8px 16px; } .top h1 { font-size:18px; }
  .offi { display:none; }
  .tools { width:100%; } .filter { flex:1; width:auto; }
  .page, html:not(.js) #src { padding-left:16px; padding-right:16px; }
  .bar { padding:6px 12px; font-size:12.5px; grid-template-columns:auto auto auto 1fr; }
  .bar .tl { display:none; }
  .bar .topic { font-size:18px; padding:0 6px; }
  .credits { padding:4px 16px 6px; font-size:10.5px; }
}
html:not(.js) .menu, html:not(.js) .scrim { display:none; }
@media (max-width: 900px) { html:not(.js) .side { position:static; transform:none; width:auto; box-shadow:none; } }
@media print {
  html.js, html.js body { height:auto; overflow:visible; display:block; }
  .side, .bar, .menu, .scrim, .flow { display:none !important; }
  html.js #src { display:block; } .layout { display:block; }
}

/* sidebar: the sections of the current page under its link; those on screen are marked */
.side ul.sub { margin:3px 0 8px 10px; padding-left:8px; border-left:1px solid rgba(255,255,255,.16); }
.side ul.sub a.l { font-size:12.5px; padding:3px 8px; color:#b6c6d3; line-height:1.3; }
.side ul.sub a.l small { font-size:10.5px; color:#e2b65c; }
.side ul.sub a.here { color:#fff; background:rgba(255,255,255,.12); box-shadow:inset 2px 0 0 #e2b65c; }
.side h4 { margin-top:12px; }

/* the menu button: on a wide screen it folds the sidebar away (the content takes the full width) */
.menu { display:block; flex:none; }
@media (min-width: 901px) {
  html.side-hidden .layout { grid-template-columns:minmax(0,1fr); }
  html.side-hidden .side { display:none; }
}

/* ---------- slide content (styles of index.html, at web sizes) ---------- */
/* ---------- slide types ---------- */
.title-slide { background:radial-gradient(circle at 85% 20%, #1d4a66 0%, transparent 45%), linear-gradient(135deg, #173d57 0%, #12304a 60%, #0c2336 100%);
  color:#fff; justify-content:center; padding:0 62.4px; }
.title-slide .kicker { color:#e2b65c; font-size:13px; }
.title-slide h1 { font-size:43.7px; line-height:1.05; margin:9.4px 0 11.4px; letter-spacing:-.02em; }
.title-slide .sub { font-size:17.7px; color:#c9d7e2; max-width:572px; line-height:1.35; }
.title-slide .meta { position:absolute; left:62.4px; bottom:36.4px; font-size:13px; color:#a9bccb; }
.title-slide .pill { display:inline-block; margin-top:22.9px; font-size:13px; border:1.5px solid rgba(255,255,255,.45);
  border-radius:15.6px; padding:4.2px 11.4px; color:#fff; }

.points { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14.6px 25px; }
.points li { display:flex; gap:11.4px; align-items:flex-start; }
.points .n { flex:none; width:30.2px; height:30.2px; border-radius:50%; background:var(--soft); color:var(--brand);
  font-weight:700; font-size:14.6px; display:flex; align-items:center; justify-content:center; }
.points h3 { margin:2px 0 3.1px; font-size:16.1px; }
.points p { margin:0; font-size:13px; line-height:1.4; color:#3a4651; }

.two { display:grid; grid-template-columns:1fr 1fr; gap:20.8px; height:100%; }
.panel { border-radius:8.3px; padding:15.6px 18.7px; background:#f7f9fb; border:1.5px solid #e3e9ee; box-shadow:0 1px 2px rgba(18,48,74,.04); }
.panel.primary { background:var(--soft); border-color:#c9d9e4; }
.panel .tag { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:2.1px 7.3px; border-radius:10.4px; background:#fff; color:var(--brand); }
.panel h3 { font-size:20.8px; margin:7.3px 0 5.2px; }
.panel p { font-size:14.6px; margin:0 0 7.3px; color:#3a4651; }
.panel ul, .panel ol { margin:0; padding-left:17.7px; font-size:14.6px; line-height:1.45; }
.panel li { margin-bottom:6.2px; }

table.cmp { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
table.cmp th, table.cmp td { padding:9.4px 12.5px; text-align:left; border-bottom:2px solid #edf0f2; }
table.cmp thead th { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-bottom:1.6px solid var(--line); }
table.cmp td:first-child { font-weight:700; width:22%; }
table.cmp td.new { background:#f1f8f9; color:var(--brand); font-weight:600; }
table.cmp thead th.new { color:var(--brand); background:#f1f8f9; border-radius:6.2px 6.2px 0 0; }

.tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:16.6px; margin-top:10.4px; }
.tile { border-radius:9.4px; padding:20.8px 17.7px; border:2px solid var(--line); background:#fff; }
.tile .res { font-size:16.6px; font-weight:700; }
.tile .big { font-size:33.3px; font-weight:700; line-height:1; margin:10.4px 0 3.1px; letter-spacing:-.02em; }
.tile .lbl { font-size:13px; color:var(--muted); }
.tile .val { font-size:15.6px; font-weight:600; margin-top:11.4px; padding-top:9.4px; border-top:2px solid #eef1f3; }
.tile.ok { border-color:#9fcfaf; background:#f2faf4; } .tile.ok .res, .tile.ok .big { color:var(--good); }
.tile.mid .res, .tile.mid .big { color:#8a5a00; } .tile.mid { border-color:#e6cf8f; background:#fffaeb; }
.tile.no .res, .tile.no .big { color:var(--bad-ink); } .tile.no { border-color:#e9b4ad; background:#fdf2f0; }

.steps { display:grid; grid-template-columns:repeat(5, 1fr); gap:0; margin-top:15.6px; }
.step { position:relative; padding:0 9.4px; }
.step .dot { width:38.5px; height:38.5px; border-radius:50%; background:var(--brand); color:#fff; font-size:16.6px; font-weight:700;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1; }
.step::before { content:""; position:absolute; left:47.8px; right:-9.4px; top:18.2px; height:2.1px; background:#c9d9e4; }
.step:last-child::before { display:none; }
.step h3 { font-size:16.6px; margin:11.4px 0 2.1px; }
.step .what { font-size:13px; color:var(--brand); font-weight:600; margin-bottom:5.2px; min-height:30.2px; line-height:1.35; }
.step p { font-size:13px; line-height:1.42; margin:0; color:#3a4651; }

table.stages { font-size:13px; } table.stages td, table.stages th { padding:6.8px 10.4px; }
table.stages td:first-child { width:24%; white-space:nowrap; } table.stages td:nth-child(2) { width:28%; }
.sn { display:inline-flex; width:20.8px; height:20.8px; border-radius:50%; background:var(--brand); color:#fff; align-items:center; justify-content:center; font-size:13px; margin-right:7.3px; }
.elig { font-size:15.6px; margin:0 0 9.4px; } .sub3 { font-size:14.6px; color:var(--muted); margin:0 0 9.4px; font-weight:600; }
.pcols h3 small { font-size:13px; color:var(--muted); font-weight:600; }
/* pillar chart: one 100% bar of the 1000 marks */
.pbar { display:flex; gap:2.1px; height:41.6px; margin:3.1px 0 7.3px; }
.pbar div { border-radius:3.1px; display:flex; align-items:center; padding:0 10.4px; color:#fff; font-weight:700; font-size:14px; white-space:nowrap; }
.pscale { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-bottom:17.7px; }
.pcols { display:grid; grid-template-columns:1fr 1.15fr 1.1fr .85fr; gap:14.6px; }

.pcols h3 { font-size:14.6px; margin:0 0 5.2px; display:flex; align-items:center; gap:5.2px; }
.pcols h3 i { width:9.4px; height:9.4px; border-radius:2.1px; display:inline-block; }
.pcols ul { list-style:none; margin:0; padding:0; font-size:13px; line-height:1.3; }
.pcols li { display:flex; justify-content:space-between; gap:5.2px; padding:4.7px 0; border-bottom:1.5px solid #eef1f3; }
.pcols li b { font-weight:600; color:var(--ink); }


.metric-top { display:flex; align-items:baseline; gap:10.4px; margin:-9.4px 0 13.5px; }
.badge { font-size:13px; font-weight:700; padding:3.1px 9.4px; border-radius:12.5px; background:var(--soft); color:var(--brand); }
.badge.attr { background:#f0f3f4; color:var(--muted); font-weight:600; }
.mcols { display:grid; grid-template-columns:1.15fr 1fr; gap:20.8px; }
.mcols h4 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 7.3px; }
.mcols ol, .mcols ul { margin:0; padding-left:19.8px; font-size:16.1px; line-height:1.42; }
.mcols li { margin-bottom:11.4px; }
.mcols ul.plain { list-style:none; padding-left:0; }
.mcols > div:first-child { padding-top:14.6px; }
.mcols .docs { background:#f6f8f7; border-radius:9.4px; padding:14.6px 16.6px; }
.who { margin-top:12.5px; font-size:13px; color:var(--muted); }
.who b { color:var(--ink); }

.agenda { display:grid; grid-template-columns:repeat(3, 1fr); gap:12.5px; }
.agenda a, .agenda .soon { display:block; text-decoration:none; color:inherit; border:2px solid var(--line); border-radius:8.3px; padding:11.4px 14.6px; min-height:78px; }
.agenda a:hover { border-color:var(--brand-2); background:#f7fbfb; }
.agenda .soon { border-style:dashed; color:var(--muted); }
.agenda .num { font-size:13px; font-weight:700; color:var(--brand-2); }
.agenda h3 { font-size:15.6px; margin:3.1px 0 3.1px; }
.agenda p { font-size:13px; color:var(--muted); margin:0; line-height:1.35; }

/* ---------- Autonomous deck (Faculty Orientation) ---------- */
.h2sub { font-weight:500; color:var(--muted); font-size:.62em; }
.body p { margin:0 0 7.3px; } .body p.b, .body .b { font-weight:700; }
.sub3.gap { margin-top:15.6px; }
.center { text-align:center; } .hi { color:#8a5a00; font-weight:600; }
.title-slide .sub.sm { font-size:13.5px; margin-top:13.5px; }
/* the PowerPoint's footer on dark title slides */
.title-slide .foot { position:absolute; left:0; right:0; bottom:0; margin:0; padding:0 62.4px; border-top-color:rgba(255,255,255,.14); color:#a9bccb; }
.title-slide .foot .src b { color:#fff; } .title-slide:has(.foot) .meta { bottom:52px; }
/* Autonomous section and criterion openers: a navy panel with the criterion number, the title on white */
[data-set="autonomous"] .title-slide { background:#fff; color:var(--ink); padding:0 57.2px 20.8px 312px; }
[data-set="autonomous"] .title-slide .band { position:absolute; left:0; top:0; bottom:0; width:249.6px; display:flex; flex-direction:column;
  justify-content:center; padding:0 33.3px; color:#fff; overflow:hidden;
  background:radial-gradient(circle at 20% 15%, #1f4f6d 0%, transparent 55%), linear-gradient(160deg, #173d57 0%, #12304a 55%, #0c2336 100%); }
[data-set="autonomous"] .title-slide .band::after { content:""; position:absolute; right:-67.6px; bottom:-67.6px; width:187.2px; height:187.2px;
  border-radius:50%; border:2px solid rgba(198,150,50,.45); box-shadow:0 0 0 23.9px rgba(255,255,255,.035), 0 0 0 47.8px rgba(255,255,255,.025); }
[data-set="autonomous"] .title-slide .band span { font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#e2b65c; }
[data-set="autonomous"] .title-slide .band b { font-size:104px; line-height:.95; font-weight:800; letter-spacing:-.04em; margin-top:5.2px; }
[data-set="autonomous"] .title-slide .band b.word { font-size:49.9px; line-height:1; letter-spacing:-.02em; }
[data-set="autonomous"] .title-slide .band i { display:block; width:33.3px; height:2.6px; border-radius:1.6px; background:var(--gold); margin-top:15.6px; }
[data-set="autonomous"] .title-slide .kicker { color:var(--brand-2); font-size:13px; letter-spacing:.16em; }
[data-set="autonomous"] .title-slide h1 { color:var(--brand); font-size:38.5px; line-height:1.06; }
[data-set="autonomous"] .title-slide .sub { color:#46525e; font-size:15.6px; }
[data-set="autonomous"] .title-slide .sub.sm { font-size:13px; color:var(--muted); }
[data-set="autonomous"] .title-slide .pill { color:#46525e; border-color:#d3dbe1; background:#f6f8fa; font-size:13px; line-height:1.4; border-radius:7.3px; padding:5.2px 10.4px; }
[data-set="autonomous"] .title-slide .meta { left:312px; color:var(--muted); font-size:13px; }
[data-set="autonomous"] .title-slide .foot { left:249.6px; padding:0 20.8px 0 62.4px; gap:8.3px; font-size:13px; white-space:nowrap; color:#7a8692; border-top-color:#e4e9ed; }
[data-set="autonomous"] .title-slide .foot span:not(.src) + span:not(.src)::before { margin-right:8.3px; }
/* cover of the Autonomous deck: navy, gold rule and rings, as on the PowerPoint's first slide */
.slide.cover { background:radial-gradient(circle at 82% 30%, #1b4a66 0%, transparent 42%), linear-gradient(135deg, #12304a 0%, #0f2a40 55%, #0b2133 100%);
  color:#fff; justify-content:center; padding:0 62.4px 62.4px; }
.cover::before { content:""; position:absolute; left:0; top:0; height:6.2px; width:80%; background:linear-gradient(90deg, #0a8a95, #21b3bf); }
.cover::after { content:""; position:absolute; right:0; top:0; bottom:0; width:20%; background:rgba(255,255,255,.035); }
.cover .rings { position:absolute; right:20.8px; top:62.4px; width:218.4px; height:332.8px; }
.cover .rings i { position:absolute; width:156px; height:156px; border-radius:50%; border:2px solid rgba(116,196,206,.28); }
.cover .rings i:nth-child(1) { left:0; top:0; } .cover .rings i:nth-child(2) { left:15.6px; top:49.4px; border-color:rgba(116,196,206,.36); }
.cover .rings i:nth-child(3) { left:31.2px; top:98.8px; border-color:rgba(232,184,90,.5); } .cover .rings i:nth-child(4) { left:46.8px; top:148.2px; border-color:rgba(116,196,206,.36); }
.cover .rings i:nth-child(5) { left:62.4px; top:197.6px; }
.cover .kicker { font-size:13px; color:#5fd0d8; letter-spacing:.1em; } .cover .kicker span { color:#e8b85a; margin:0 4.2px; }
.cover .rule { width:57.2px; height:3.6px; border-radius:2.1px; background:#e8b85a; margin:25px 0 17.7px; }
.cover h1 { margin:0; font-size:52px; line-height:1; letter-spacing:-.02em; font-weight:800; max-width:598px;
  background:linear-gradient(90deg, #ffffff 0%, #ffffff 60%, #bfe9ee 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cover h1 small { display:block; font-size:32.2px; font-weight:700; margin-bottom:7.3px; color:#e8b85a; -webkit-text-fill-color:#e8b85a; }
.cover .sub { font-size:18.7px; color:#bcd0dc; margin-top:17.7px; line-height:1.35; }
.cover .pills { margin-top:17.7px; display:flex; gap:7.3px; }
.cover .pills span { font-size:13px; border:1.5px solid rgba(232,184,90,.6); color:#f3d9a4; border-radius:15.6px; padding:3.6px 10.4px; }
.cover .credits { position:absolute; left:62.4px; right:62.4px; bottom:30.2px; display:flex; justify-content:space-between; align-items:flex-end;
  border-top:1.5px solid rgba(188,208,220,.3); padding-top:13.5px; font-size:13px; color:#bcd0dc; line-height:1.45; }
.cover .credits b { color:#fff; font-weight:600; } .cover .credits .by { text-align:right; z-index:1; } .cover .credits .by span { font-size:13px; }
.title-slide .meta { right:62.4px; }
.split { display:grid; grid-template-columns:1fr 1.1fr; gap:25px; align-items:center; height:100%; }
.split img { width:100%; border-radius:7.3px; }
.quote { margin:11.4px 0 0; padding:11.4px 15.6px; border-left:3.1px solid var(--brand-2); background:#f4f9fa; border-radius:0 7.3px 7.3px 0;
  font-size:15.6px; font-style:italic; color:#2c3a45; }
.plainlist { margin:0; padding-left:15.6px; font-size:13px; line-height:1.4; } .plainlist li { margin-bottom:6.2px; }
.plainlist.cols2 { columns:2; column-gap:29.1px; } .plainlist.cols2 li { break-inside:avoid; }
.numlist { margin:0; padding-left:22.9px; font-size:13px; line-height:1.4; } .numlist li { margin-bottom:5.7px; padding-left:3.1px; }
.numlist li.hi { color:#8a5a00; } .numlist.big { font-size:17.7px; } .numlist.big li { margin-bottom:8.3px; }
.tiles.four { grid-template-columns:repeat(4, 1fr); margin-bottom:13.5px; } .tiles.four .tile { padding:15.6px 13.5px; }
.tiles.slim { margin:0 0 13.5px; } .tiles.slim .tile { padding:10.4px 14.6px; } .tiles.slim .big { font-size:22.9px; margin:5.2px 0 0; }
.tiles.slim .val { margin-top:6.2px; padding-top:5.2px; font-size:13px; }
.cards { display:grid; gap:11.4px; } .cards.c2 { grid-template-columns:1fr 1fr; } .cards.c4 { grid-template-columns:repeat(4, 1fr); }
.card { background:#f7f9fb; border:1.5px solid #e3e9ee; border-top:2.6px solid var(--brand-2); border-radius:7.3px; padding:11.4px 13.5px; box-shadow:0 1px 2px rgba(18,48,74,.04); }
.card h3 { font-size:14.6px; margin:0 0 4.2px; color:var(--brand); } .card p { font-size:13px; margin:0; color:#3a4651; line-height:1.4; }
.cards.small .card { padding:8.3px 10.4px; } .cards.small h3 { font-size:13px; } .cards.small p { font-size:13px; }
.points.one { grid-template-columns:1fr; gap:11.4px; }
.points .n.dot { width:10.4px; height:10.4px; margin:6.2px 9.9px 0; background:var(--brand-2); }
.oflow.nonum li::before { content:""; width:8.3px; height:8.3px; margin-bottom:9.4px; background:var(--brand-2); }
.numlist.cols2 { columns:2; column-gap:29.1px; } .numlist.cols2 li { break-inside:avoid; }
.mside { margin-top:9.4px; } .mside ul { margin:0; padding-left:14.6px; } .disc .chk { margin-top:7.3px; }
.oflow { list-style:none; margin:15.6px 0 0; padding:0; display:grid; grid-template-columns:repeat(6, 1fr); gap:8.3px; counter-reset:f; }
.oflow li { position:relative; background:var(--soft); border-radius:8.3px; padding:13.5px 10.4px; min-height:104px; counter-increment:f; }
.oflow li::before { content:counter(f); display:flex; width:25px; height:25px; border-radius:50%; background:var(--brand); color:#fff;
  font-weight:700; font-size:13px; align-items:center; justify-content:center; margin-bottom:7.3px; }
.oflow b { display:block; font-size:15.6px; } .oflow span { display:block; font-size:13px; color:#3a4651; margin-top:3.1px; line-height:1.35; }
.oflow.vert { grid-template-columns:1fr; gap:7.3px; margin-top:0; } .oflow.vert li { min-height:0; display:flex; gap:9.4px; align-items:baseline; padding:8.3px 13.5px; }
.oflow.vert li::before { display:none; } .oflow.vert b { font-size:16.6px; color:var(--brand); min-width:41.6px; } .oflow.vert span { font-size:16.6px; margin:0; }
.levels { list-style:none; margin:0; padding:0; } .levels li { display:flex; gap:9.4px; align-items:baseline; padding:6.2px 0; border-bottom:2px solid #eef1f3; font-size:13px; }
.levels b { flex:none; background:var(--brand); color:#fff; border-radius:10.4px; padding:1.6px 8.3px; font-size:13px; }
.ipo3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:13.5px; }
.ipo3 .panel { padding:12.5px 14.6px; } .ipo3 .panel ul { font-size:13px; padding-left:14.6px; } .ipo3 .panel p { font-size:13px; }
.ipo3 .in { border-top:3.1px solid var(--input); } .ipo3 .pr { border-top:3.1px solid var(--process); } .ipo3 .ou { border-top:3.1px solid var(--outcome); }
.callout { margin-top:13.5px; text-align:right; font-size:15.6px; font-weight:700; color:var(--bad-ink); }
table.cmp.score { font-size:13px; } table.cmp.score th, table.cmp.score td { padding:4.7px 7.3px; text-align:center; }
table.cmp.score td:nth-child(2) { text-align:left; font-weight:600; } table.cmp.score td:first-child { width:auto; }
table.cmp tr.total td { font-weight:700; border-top:1.6px solid var(--line); }
table.cmp.areas { font-size:13px; } table.cmp.areas td { padding:5.2px 8.3px; vertical-align:top; } table.cmp.areas td:first-child { width:5%; }
table.cmp.areas td:nth-child(2) { width:24%; font-weight:700; } table.cmp.areas ul { margin:0; padding-left:11.4px; } table.cmp.areas li { margin-bottom:1.6px; }
/* metric explanation and measurement slides: more text, so a smaller base size */
.slide.metric .body, .slide.measure .body, .slide.lists .body, .slide.ipo .body { font-size:13px; line-height:1.4; }
.slide.metric h2, .slide.measure h2 { font-size:23.9px; margin-bottom:11.4px; }
.mno { display:inline-block; font-size:.56em; vertical-align:middle; background:var(--brand); color:#fff; letter-spacing:.02em; border-radius:6.2px; padding:2.1px 8.3px; margin-right:9.4px; }
.supp .kicker { color:var(--bad-ink); }
.lead { font-size:14px; color:#2c3a45; }
.body h4 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-2); margin:0 0 5.2px; }
.mgrid { display:grid; grid-template-columns:1fr 1fr; gap:20.8px; margin-top:4.2px; align-items:start; }
.slide.ipo h2 { font-size:22.9px; margin-bottom:12.5px; } .slide.ipo .ipo3 { grid-template-columns:.7fr 1fr 1fr; gap:11.4px; }
.slide.ipo .ipo3 .panel { padding:10.4px 12.5px; } .slide.ipo .panel p { font-size:13px; }
.mgrid ul { margin:0 0 11.4px; padding-left:14.6px; } .mgrid li { margin-bottom:3.1px; }
.chk { background:#f6f8f7; border-radius:8.3px; padding:11.4px 14.6px; font-size:13px; }
.chk p { margin:0 0 4.2px; } .chk ol { margin:0 0 5.2px; padding-left:15.6px; }
.chk ol:has(li:nth-child(7)) { columns:2; column-gap:22.9px; } .chk ol li { break-inside:avoid; }
ul.boxes { list-style:none; padding:0; margin:0 0 6.2px; } ul.boxes li { position:relative; padding-left:17.7px; margin-bottom:3.1px; }
ul.boxes li::before { content:""; position:absolute; left:0; top:.28em; width:9.4px; height:9.4px; border:2px solid var(--brand); border-radius:2.1px; }
.fnote { font-size:13px; color:var(--muted); margin-top:5.2px; }
.wgrid { display:grid; grid-template-columns:.8fr 1.2fr; gap:18.7px; margin-top:6.2px; align-items:start; }
.wbox { background:var(--soft); border-radius:8.3px; padding:11.4px 14.6px; }
.wval { font-size:18.7px; font-weight:700; color:var(--ink); margin:2px 0 6.2px; line-height:1.2; } .wval.long { font-size:13.5px; }
.wnote { font-size:13px; color:var(--muted); margin:0 0 3.1px !important; }
.disc p.q { font-weight:700; margin-bottom:3.1px; } .disc ol, .disc ul { margin:5.2px 0 0; padding-left:15.6px; } .disc li { margin-bottom:2.6px; }
.caution { margin:8.3px 0 0 !important; padding:6.2px 10.4px; border-left:3.1px solid #d8ae3c; background:#fffaeb; border-radius:0 5.2px 5.2px 0; color:#8a5a00; font-size:13px; }
.lists .two { height:auto; align-items:start; } .lists .panel ul { font-size:13px; } .lists .panel h3 { font-size:15.6px; margin-top:0; }
.wlist { list-style:none; margin:0; padding:0; max-width:572px; }
.wlist li { display:flex; justify-content:space-between; gap:15.6px; padding:7.3px 3.1px; border-bottom:2px solid #eef1f3; font-size:14.6px; }
.wlist li b { color:var(--brand); text-align:right; } .wlist li.hi, .wlist li.hi b { color:var(--bad-ink); font-weight:700; }
.tpls .body h4 { margin-top:3.1px; }
table.tpl { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:11.4px; table-layout:fixed; }
table.tpl th { background:var(--soft); color:var(--brand); text-align:left; font-weight:700; }
table.tpl th, table.tpl td { border:1.5px solid #cfd9dc; padding:4.2px 5.2px; vertical-align:top; overflow-wrap:anywhere; height:19.8px; }
.measure table.tpl { font-size:13px; margin-top:7.3px; }
.figure .body { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.figure .body img { max-width:100%; max-height:100%; min-height:0; object-fit:contain; border-radius:5.2px; flex:1; }
.figure .body .fnote { flex:none; }
/* ---------- page content ---------- */
.page > h2, #src > h2 { font-size:19px; margin:18px 0 10px; padding-bottom:5px; border-bottom:1px solid #e3e8ec; color:var(--brand); }
.page > :first-child, #src > :first-child { margin-top:10px; }
h2 small, h3 small { font-size:12px; font-weight:400; margin-left:6px; color:var(--muted); }
h2 .src, h3 .src { font-weight:500; margin-left:8px; }
.src { font-size:12px; white-space:nowrap; text-decoration:none; color:var(--brand-2); }
.src:hover { text-decoration:underline; }
.lead { font-size:16px; color:#38444f; max-width:90ch; margin:6px 0 8px; }
.note { background:#fdf6e3; border-left:3px solid var(--gold); padding:6px 12px; border-radius:6px; font-size:14px; max-width:110ch; }
.muted { color:var(--muted); }
.tw { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:10px; margin:8px 0 12px; }
.tw table { width:100%; border-collapse:collapse; font-size:14px; }
.tw th, .tw td { text-align:left; vertical-align:top; padding:7px 12px; border-bottom:1px solid #e8ecef; }
.tw th { background:#f3f6f8; color:var(--brand); }
.tw tr.grp th { background:var(--soft); }
.tw tr:last-child td { border-bottom:0; }
.tw td.num, .tw th.num { text-align:right; white-space:nowrap; }
.stats { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 12px; }
.stat { background:#fff; border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:10px; padding:8px 16px; min-width:150px; }
.stat b { display:block; font-size:24px; color:var(--brand); line-height:1.2; }
.stat span { font-size:13px; color:var(--muted); }
.cards.auto { display:grid; gap:12px; margin:10px 0; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
a.card { display:block; color:inherit; text-decoration:none; background:#fff; }
a.card:hover { border-color:var(--brand-2); box-shadow:0 0 0 3px var(--soft); }
a.card h3 { font-size:16px; margin:0 0 4px; } a.card p { font-size:14px; margin:0 0 6px; } a.card .k { color:var(--muted); font-size:12.5px; }
.badge { display:inline-block; background:var(--soft); color:var(--brand); border-radius:12px; padding:2px 10px; font-size:13px; font-weight:700; white-space:nowrap; }
.badge.none { background:#eef1f3; color:var(--muted); font-weight:600; white-space:normal; }

/* home: the cover */
.hero { position:relative; overflow:hidden; border-radius:14px; padding:26px 30px 22px; margin:10px 0 6px; color:#fff;
  background:radial-gradient(circle at 85% 20%, #1d4a66 0%, transparent 45%), linear-gradient(135deg, #173d57 0%, #12304a 60%, #0c2336 100%); }
.hero::after { content:""; position:absolute; right:-70px; top:-70px; width:240px; height:240px; border-radius:50%; border:2px solid rgba(198,150,50,.45);
  box-shadow:0 0 0 30px rgba(255,255,255,.03), 0 0 0 60px rgba(255,255,255,.02); }
.hero .k { font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#5fd0d8; }
.hero .k span { color:#e2b65c; margin:0 6px; }
.hero .h { font-size:40px; line-height:1.05; margin:12px 0 10px; color:#fff; border:0; padding:0; letter-spacing:-.01em; }
.hero .h small { display:block; font-size:24px; color:#e2b65c; margin:0 0 6px; font-weight:700; }
.hero .h .src { font-size:12px; color:#9fd6dd; vertical-align:middle; }
.hero .sub { font-size:17px; color:#c9d7e2; margin:0 0 12px; }
.hero .pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.hero .pills span { font-size:12.5px; border:1px solid rgba(232,184,90,.6); color:#f3d9a4; border-radius:20px; padding:3px 12px; }
.hero .credits { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; border-top:1px solid rgba(188,208,220,.3); padding:12px 0 0; font-size:14px; color:#bcd0dc; background:none; }
.hero .credits b { color:#fff; } .hero .credits .by { text-align:right; } .hero .credits .by span { font-size:12.5px; }

/* a slide's content */
.sbody { font-size:15px; line-height:1.5; margin:4px 0 12px; }
.sbody p { margin:0 0 8px; max-width:110ch; } .sbody .b { font-weight:700; }
.sbody h4 { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-2); margin:0 0 6px; }
.sbody ul, .sbody ol { margin:4px 0 10px; }
.sbody img { max-width:100%; max-height:48vh; border-radius:8px; border:1px solid var(--line); display:block; }
.sbody .split img { max-height:40vh; }
.sbody .lead { font-size:16px; }
.sbody .mgrid, .sbody .wgrid { gap:24px; }

/* metric cards */
.metric { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 18px 6px; margin:10px 0; box-shadow:0 1px 2px rgba(18,48,74,.05); }
.metric:target { border-color:var(--brand-2); box-shadow:0 0 0 3px var(--soft); }
.metric.supp { border-left:4px solid var(--bad-ink); }
.metric > header { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid #edf0f2; }
.metric .mno { font-size:13px; font-weight:700; color:#fff; background:var(--brand); border-radius:8px; padding:3px 10px; margin:0; }
.metric .t { font-weight:700; font-size:18px; color:var(--brand); flex:1; min-width:200px; }
.metric .srcs { display:flex; gap:10px; }
.metric h3.mh { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); margin:12px 0 8px; padding-top:10px; border-top:1px dashed #dfe5ea; }
.metric .sbody { margin-bottom:8px; }
.cont.metric > header { display:none; }

/* narrow screens */
@media (max-width: 900px) {
  .sbody .mgrid, .sbody .wgrid, .sbody .two, .sbody .ipo3, .sbody .split, .sbody .pcols { grid-template-columns:1fr !important; }
  .sbody .cards.c4, .sbody .tiles, .sbody .tiles.four { grid-template-columns:1fr 1fr !important; }
  .sbody .points { grid-template-columns:1fr !important; }
  .sbody .oflow { grid-template-columns:repeat(3, 1fr) !important; }
  .sbody .plainlist.cols2, .sbody .numlist.cols2, .sbody .chk ol { columns:1 !important; }
  .hero .h { font-size:30px; } .hero .h small { font-size:19px; } .hero .credits .by { text-align:left; }
}
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin:14px 0 2px; }
.eyebrow .src { letter-spacing:0; text-transform:none; font-weight:500; margin-left:6px; }
.page > h2.divh, #src > h2.divh { font-size:24px; border:0; margin:0 0 6px; padding:0; }
.tw.tws { background:none; border:0; border-radius:0; overflow:visible; margin:0 0 10px; }
.tw.tws table.cmp th, .tw.tws table.cmp td { border-bottom:1.5px solid #edf0f2; }
.tw.tws table.cmp th { background:none; }
.sec { display:flow-root; } .sec > h2 { font-size:19px; margin:18px 0 10px; padding-bottom:5px; border-bottom:1px solid #e3e8ec; color:var(--brand); } .sec > h2.divh { font-size:24px; border:0; margin:0 0 6px; padding:0; } .page > .sec:first-child > :first-child { margin-top:10px; }

/* the deck slides of the page on screen, at the right end of the footer line */
.ref { display:none; }
.credits { display:flex; gap:6px 18px; flex-wrap:wrap; justify-content:space-between; align-items:center; }
#deckref { color:#8a96a1; white-space:nowrap; }
#deckref a { color:#6f8496; text-decoration:none; } #deckref a:hover { color:var(--brand-2); text-decoration:underline; }.metric h3.mh .h2sub { font-size:1em; color:var(--muted); font-weight:700; }

/* Templates and checklists: compact rows, so each list of ten criteria stays on one page */
.compact .lead { margin:2px 0 6px; }
.compact .tw th, .compact .tw td { padding:4px 12px; }
@media (max-width: 900px) {
  .compact .tw table { font-size:13px; } .compact .tw th, .compact .tw td { padding:3px 8px; line-height:1.35; }
  .compact h2 { font-size:17px; margin:10px 0 4px; } .compact .lead { font-size:14px; }
}
@media (max-width: 900px) and (max-height: 720px) { .lead.intro { display:none; } }

/* use the whole width: stat boxes stretch across the page, larger figures; larger text on big screens */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.stat { min-width:0; padding:12px 18px; }
.stat b { font-size:30px; }
.stat span { font-size:14px; }
@media (min-width: 1500px) and (min-height: 850px) {
  body { font-size:16px; }
  .sbody { font-size:16.5px; } .lead { font-size:17.5px; }
  .page > h2, #src > h2, .sec > h2 { font-size:21px; }
  .metric .t { font-size:20px; }
}

/* New / Modified Areas (slides 29-30): each attribute's areas in two columns, so the ten rows take two pages */
@media (min-width: 1100px) {
  .sbody table.cmp.areas td ul { columns:2; column-gap:28px; }
  .sbody table.cmp.areas td li { break-inside:avoid; }
  .sbody table.cmp.areas td { padding-top:6px; padding-bottom:6px; }
}
@media (min-width: 1100px) and (max-height: 680px) {
  .sbody table.cmp.areas td { padding-top:3px; padding-bottom:3px; line-height:1.3; }
  .sbody table.cmp.areas td li { margin-bottom:1px; }
}

/* All metrics: one criterion per page, tighter on short screens and phones */
.mcrit .badge { padding:1px 8px; font-size:12.5px; }
@media (max-height: 680px), (max-width: 900px) {
  .mcrit h2 { font-size:17px; margin:6px 0 4px; padding-bottom:3px; }
  .mcrit .tw table { font-size:13px; } .mcrit .tw th, .mcrit .tw td { padding:2px 8px; line-height:1.3; }
  .mcrit .badge { font-size:11.5px; padding:0 6px; }
}
@media (max-width: 900px) { .mcrit .tw th:last-child, .mcrit .tw td:last-child { display:none; } }

/* metric cards: a picture slide (e.g. slide 38, Sem 1 baskets) on a page of its own, shown large */
.part.fig .sbody img { max-height:calc(100vh - 300px); width:auto; max-width:100%; margin:0 auto; }
.sbody.figure img { max-height:calc(100vh - 300px); width:auto; margin:0 auto; }

/* One heading style for every slide heading (the PowerPoint's slide titles): section headings, dividers,
   metric card titles ("Metric 1.3 | Curriculum Flexibility") and the slide parts inside a card
   ("Curriculum Flexibility | measurement, weightage and interpretation"). */
.page > h2, #src > h2, .sec > h2, .sec > h2.divh, .page > h2.divh, #src > h2.divh,
.metric > header .t, .metric h3.mh {
  font-size:20px; font-weight:700; color:var(--brand); text-transform:none; letter-spacing:-.005em; line-height:1.3;
}
.sec > h2 .h2sub, .metric h3.mh .h2sub, .metric > header .t .h2sub { font-size:1em; font-weight:700; color:var(--brand); }
.metric > header .t { margin:0; flex:1; min-width:200px; }
.metric h3.mh { margin:12px 0 8px; padding-top:10px; border-top:1px dashed #dfe5ea; }
.sec > h2.divh, .page > h2.divh, #src > h2.divh { margin:0 0 6px; padding:0 0 5px; border-bottom:1px solid #e3e8ec; }
@media (min-width: 1500px) and (min-height: 850px) {
  .page > h2, #src > h2, .sec > h2, .sec > h2.divh, .metric > header .t, .metric h3.mh { font-size:22px; }
}
@media (max-width: 900px) {
  .page > h2, #src > h2, .sec > h2, .sec > h2.divh, .metric > header .t, .metric h3.mh { font-size:18px; }
}

/* the further slides of a metric, each a card of its own: no line above their heading */
.metric.more > .part:first-child > h3.mh { border-top:0; padding-top:0; margin-top:2px; }