/* Student Achievements - public page (2026-10-12). White theme, colourful. ap-* names. */
:root{--ink:#1e293b;--mute:#64748b;--line:#e2e8f0;--bg:#f8fafc;--card:#ffffff;
  --gold:#f59e0b;--silver:#94a3b8;--bronze:#c2703d;--brand:#7c3aed;--brand2:#ec4899}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Nunito','Segoe UI',Roboto,Arial,sans-serif;font-size:15px;line-height:1.5}
h1,h2,.ap-school,.ap-tile b,.ap-card-n,.ap-star-n{font-family:'Poppins','Segoe UI',sans-serif}
.ap-wrap{max-width:1200px;margin:0 auto;padding:0 18px}

/* hero */
.ap-hero{background:radial-gradient(1200px 300px at 10% -40%,#fde68a 0,transparent 60%),radial-gradient(900px 280px at 95% -30%,#fbcfe8 0,transparent 60%),linear-gradient(180deg,#fff7ed,#fff 70%);
  border-bottom:1px solid var(--line);padding:18px 0 22px}
.ap-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ap-brand{display:flex;align-items:center;gap:12px;min-width:0}
.ap-logo{width:54px;height:54px;object-fit:contain;border-radius:12px;background:#fff;border:1px solid var(--line);padding:4px}
.ap-school{font-size:18px;font-weight:700;line-height:1.2}
.ap-addr{font-size:12.5px;color:var(--mute)}
.ap-year select{font:inherit;font-weight:700;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.ap-title{margin-top:18px}
.ap-title h1{margin:0;font-size:clamp(26px,4.2vw,40px);font-weight:800;letter-spacing:-.5px;
  background:linear-gradient(90deg,#7c3aed,#ec4899 45%,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}
.ap-title h1 span{font-size:.5em;font-weight:700;color:var(--mute);-webkit-text-fill-color:var(--mute);margin-left:6px;vertical-align:middle}
.ap-title p{margin:6px 0 0;color:var(--mute);max-width:640px}

/* tiles */
.ap-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.ap-tile{position:relative;overflow:hidden;border-radius:18px;padding:14px 16px;color:#fff;box-shadow:0 10px 24px -14px rgba(15,23,42,.45)}
.ap-tile b{display:block;font-size:28px;font-weight:800;line-height:1.1}
.ap-tile span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;opacity:.95}
.ap-tile i{position:absolute;right:12px;top:8px;font-size:30px;font-style:normal;opacity:.35}
.ap-t1{background:linear-gradient(135deg,#7c3aed,#a855f7)}.ap-t2{background:linear-gradient(135deg,#0ea5e9,#22d3ee)}
.ap-t3{background:linear-gradient(135deg,#f97316,#fb7185)}.ap-t4{background:linear-gradient(135deg,#f59e0b,#facc15);color:#3b2600}

/* sections */
.ap-sec{margin:26px 0}
.ap-h{font-size:21px;font-weight:800;margin:0 0 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ap-h small{font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;color:var(--mute)}
.ap-two{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}

/* photo + medal ring */
.ap-ph{position:relative;flex:0 0 auto;border-radius:50%;padding:3px;background:var(--ring,#e2e8f0)}
.ap-ph img,.ap-ph .ap-ini{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff;border:3px solid #fff}
.ap-ini{display:flex!important;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:800;color:#fff}
.ap-ph .ap-medal{position:absolute;right:-4px;bottom:-2px;font-size:22px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.ring-gold{--ring:linear-gradient(135deg,#fde047,#f59e0b)}.ring-silver{--ring:linear-gradient(135deg,#e2e8f0,#94a3b8)}
.ring-bronze{--ring:linear-gradient(135deg,#fdba74,#c2703d)}.ring-part{--ring:linear-gradient(135deg,#a5f3fc,#38bdf8)}
.ring-special,.ring-merit{--ring:linear-gradient(135deg,#f9a8d4,#a855f7)}

/* hall of fame */
.ap-fame{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,240px);gap:14px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.ap-fcard{scroll-snap-align:start;background:var(--card);border-radius:20px;padding:16px;text-align:center;border:1px solid var(--line);
  box-shadow:0 12px 26px -18px rgba(15,23,42,.5);position:relative;overflow:hidden;cursor:pointer}
.ap-fcard::before{content:"";position:absolute;inset:0 0 auto 0;height:70px;background:var(--tc);opacity:.14}
.ap-fcard .ap-ph{width:112px;height:112px;margin:6px auto 10px}
.ap-fcard .ap-card-n{font-size:15.5px}
.ap-fcard .ap-ev{margin-top:6px}

/* cards */
.ap-tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ap-tools input,.ap-tools select{font:inherit;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--ink);min-width:0}
.ap-tools input{flex:1 1 260px}
.ap-tools select{flex:0 1 200px}
.ap-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ap-chip{border:1px solid color-mix(in srgb,var(--c) 40%,#fff);background:color-mix(in srgb,var(--c) 10%,#fff);color:color-mix(in srgb,var(--c) 85%,#000);
  border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.ap-chip b{margin-left:4px;background:var(--c);color:#fff;border-radius:999px;padding:0 7px;font-size:11.5px}
.ap-chip.on{background:var(--c);color:#fff}.ap-chip.on b{background:#fff;color:var(--c)}
.ap-count{font-size:13px;color:var(--mute);margin:4px 0 10px}
.ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.ap-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  border-top:4px solid var(--tc);box-shadow:0 8px 20px -16px rgba(15,23,42,.5);transition:transform .15s,box-shadow .15s}
.ap-card:hover,.ap-fcard:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(15,23,42,.55)}
.ap-card .ap-ph{width:72px;height:72px}
.ap-card-b{min-width:0;flex:1}
.ap-card-n{font-weight:700;font-size:15px;line-height:1.25}
.ap-cls{font-size:12px;color:var(--mute);font-weight:700}
.ap-ev{font-size:13.5px;font-weight:700;margin-top:6px;color:#334155;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ap-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.ap-lv{font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:999px;color:#fff;background:var(--tc)}
.ap-pz{font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:999px;background:#fef3c7;color:#92400e}
.ap-pz.silver{background:#f1f5f9;color:#475569}.ap-pz.bronze{background:#ffedd5;color:#9a3412}
.ap-pz.part{background:#e0f2fe;color:#075985}.ap-pz.special,.ap-pz.merit{background:#fce7f3;color:#9d174d}
.ap-dt{font-size:11.5px;color:var(--mute);font-weight:700}
.ap-more{text-align:center;margin:18px 0 6px}
.ap-more button{font:inherit;font-weight:800;padding:11px 22px;border-radius:14px;border:0;color:#fff;cursor:pointer;background:linear-gradient(90deg,#7c3aed,#ec4899)}
.ap-more button[hidden]{display:none}

/* stars + glance */
.ap-stars{display:grid;gap:8px}
.ap-star{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:9px 12px;cursor:pointer}
.ap-star .ap-ph{width:50px;height:50px}
.ap-rank{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:#f1f5f9;color:#475569}
.ap-star:nth-child(1) .ap-rank{background:#fde68a;color:#78350f}.ap-star:nth-child(2) .ap-rank{background:#e2e8f0}.ap-star:nth-child(3) .ap-rank{background:#fed7aa;color:#7c2d12}
.ap-star-b{flex:1;min-width:0}.ap-star-n{font-weight:700;font-size:14.5px}
.ap-star-m{font-size:12px;color:var(--mute)}
.ap-star-c{font-family:'Poppins',sans-serif;font-weight:800;font-size:18px;color:var(--brand);text-align:right;line-height:1}
.ap-star-c small{display:block;font-size:10px;color:var(--mute);font-weight:700;text-transform:uppercase}
.ap-glance{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.ap-bar{display:grid;grid-template-columns:120px 1fr 40px;gap:10px;align-items:center;margin:6px 0;font-size:13px;font-weight:700}
.ap-bar i{display:block;height:12px;border-radius:999px;background:var(--tc);min-width:4px}
.ap-bar em{font-style:normal;text-align:right;color:var(--mute)}
.ap-months{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:16px;padding-top:8px;border-top:1px dashed var(--line)}
.ap-mo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:10.5px;color:var(--mute);font-weight:700}
.ap-mo i{display:block;width:100%;max-width:26px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#a855f7,#ec4899);min-height:3px}
.ap-mo b{font-size:10.5px;color:var(--ink)}

/* empty + footer */
.ap-empty{text-align:center;background:#fff;border:1px dashed #cbd5e1;border-radius:24px;padding:46px 20px;margin:30px 0}
.ap-empty div{font-size:46px}.ap-empty h2{margin:6px 0}.ap-empty p{color:var(--mute);margin:0}
.ap-foot{color:var(--mute);font-size:12.5px;text-align:center;padding:22px 18px 30px}

/* modal */
.ap-modal{position:fixed;inset:0;z-index:50;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.ap-modal[hidden]{display:none}
.ap-dlg{position:relative;background:#fff;border-radius:24px;max-width:560px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 30px 70px rgba(15,23,42,.4)}
.ap-x{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;border:0;background:#f1f5f9;font-size:22px;cursor:pointer;z-index:2}
.ap-dlg-top{padding:26px 22px 16px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 16%,#fff),#fff)}
.ap-dlg-top .ap-ph{width:150px;height:150px;margin:0 auto 12px}
.ap-dlg-top.photo .ap-ph{width:auto;height:auto;border-radius:20px;max-width:100%}
.ap-dlg-top.photo .ap-ph img{border-radius:16px;width:100%;height:auto;max-height:52vh;object-fit:contain}
.ap-dlg h3{margin:0;font-family:'Poppins',sans-serif;font-size:21px}
.ap-dlg-b{padding:4px 22px 22px}
.ap-dlg-ev{font-size:16px;font-weight:800;margin:4px 0 8px}
.ap-dlg-ds{color:#475569;font-size:14px;margin-top:8px;white-space:pre-line}
.ap-dlg-more{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px}
.ap-dlg-more h4{margin:0 0 6px;font-size:13px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em}
.ap-dlg-more li{font-size:13.5px;margin:4px 0}

@media (max-width:900px){.ap-two{grid-template-columns:1fr}.ap-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){
  .ap-wrap{padding:0 14px}.ap-tile b{font-size:23px}
  .ap-grid{grid-template-columns:1fr}
  .ap-card .ap-ph{width:64px;height:64px}
  .ap-bar{grid-template-columns:96px 1fr 34px}
  .ap-fame{grid-auto-columns:78%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* 2026-10-12: logo + name link to the school website */
a.ap-brand{text-decoration:none;color:inherit;border-radius:14px;padding:4px 8px 4px 4px;margin:-4px -8px -4px -4px;transition:background .15s}
a.ap-brand:hover{background:rgba(124,58,237,.07)}
a.ap-brand:hover .ap-school{color:#7c3aed}
.ap-web{font-size:12px;font-weight:800;color:#7c3aed;margin-top:2px}