/* Globe International · Training portal
   Palette taken from globe-international.com and the company logo. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/static/fonts/archivo-latin-standard-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/static/fonts/archivo-latin-ext-standard-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #0E4387;
  --navy-deep: #0A2F61;
  --navy-ink: #071F42;
  --blue: #205AA8;
  --blue-hover: #1A4C8F;
  --cyan: #00AEEE;
  --cyan-ink: #006E97;
  --cyan-wash: #E3F5FC;
  --sky: #8DA8D3;
  --sky-wash: #EEF3FA;

  --ink: #12233D;
  --ink-2: #344660;
  --muted: #64748B;
  --line: #D9E1EC;
  --line-soft: #E8EDF4;
  --bg: #F3F6FA;
  --surface: #FFFFFF;

  --good: #12784F;   --good-wash: #E4F3EC;
  --warn: #8F5300;   --warn-wash: #FDF1DA;
  --bad: #B42318;    --bad-wash: #FDEBE9;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-pop: 0 12px 32px -12px rgba(10, 47, 97, .28);
  --focus: 0 0 0 3px rgba(0, 174, 238, .45);

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
.icon { width: 1.15em; height: 1.15em; flex: none; stroke-width: 1.8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; background: var(--navy); color: #fff; padding: 8px 14px; border-radius: var(--r-sm); z-index: 50; }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.15; }
.display { font-stretch: 118%; font-weight: 680; letter-spacing: -0.012em; }
h1 { font-size: clamp(26px, 3vw, 34px); font-stretch: 116%; font-weight: 680; letter-spacing: -0.015em; }
h2 { font-size: 19px; font-stretch: 108%; font-weight: 650; letter-spacing: -0.005em; }
h3 { font-size: 16px; font-weight: 640; }
p { margin: 0 0 12px; }
.lead { font-size: 16.5px; color: var(--ink-2); max-width: 64ch; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.prose { max-width: 72ch; }
.prose p { margin-bottom: 12px; white-space: pre-line; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--blue); --btn-fg: #fff; --btn-bd: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px;
  font: inherit; font-weight: 600; font-size: 14.5px; line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { --btn-bg: var(--blue-hover); --btn-bd: var(--blue-hover); color: var(--btn-fg); }
.btn.secondary { --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn.secondary:hover { --btn-bg: var(--sky-wash); --btn-bd: var(--sky); }
.btn.ghost { --btn-bg: transparent; --btn-fg: var(--blue); --btn-bd: transparent; padding: 0 10px; }
.btn.ghost:hover { --btn-bg: var(--sky-wash); }
.btn.danger { --btn-bg: var(--surface); --btn-fg: var(--bad); --btn-bd: #F0C4BF; }
.btn.danger:hover { --btn-bg: var(--bad-wash); }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field > label, .label { font-weight: 600; font-size: 14px; color: var(--ink); }
.hint { font-size: 13px; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--sky); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--cyan); box-shadow: var(--focus); }
.input.code { font-size: 26px; letter-spacing: .45em; text-align: center; font-weight: 640; padding-left: .45em; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-weight: 600; font-size: 14px;
}
.choice input:checked + span { border-color: var(--blue); background: var(--sky-wash); color: var(--navy); box-shadow: inset 0 0 0 1px var(--blue); }
.choice input:focus-visible + span { box-shadow: var(--focus); }

/* ---------- Alerts ---------- */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid; font-size: 14.5px; margin-bottom: 18px; }
.alert .icon { margin-top: 2px; }
.alert p { margin: 0; }
.alert ul { margin: 0; padding-left: 18px; }
.alert.success { background: var(--good-wash); border-color: #BFE3D1; color: #0B5A3A; }
.alert.error { background: var(--bad-wash); border-color: #F3C7C1; color: #8E1A12; }
.alert.info { background: var(--cyan-wash); border-color: #B6E5F7; color: #0A4F6E; }
.alert.warn { background: var(--warn-wash); border-color: #F2D7A4; color: #6E4100; }

/* ---------- Pills / status ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--line-soft); color: var(--ink-2); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.pill.plain::before { display: none; }
.pill.graded, .pill.good { background: var(--good-wash); color: var(--good); }
.pill.submitted, .pill.info { background: var(--cyan-wash); color: var(--cyan-ink); }
.pill.not_submitted, .pill.waiting { background: var(--sky-wash); color: var(--navy); }
.pill.missed, .pill.bad { background: var(--bad-wash); color: var(--bad); }
.pill.to_grade, .pill.regrade, .pill.warn, .pill.urgent { background: var(--warn-wash); color: var(--warn); }
.pill.group { background: var(--navy); color: #fff; height: 22px; padding: 0 8px; font-size: 11.5px; letter-spacing: .02em; }
.pill.group::before { display: none; }

/* ---------- Panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel-pad { padding: 22px 24px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line-soft); }
.panel-head h2 { font-size: 17px; }
.panel-foot { padding: 14px 24px; border-top: 1px solid var(--line-soft); }
.stack > * + * { margin-top: 20px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.divider { height: 1px; background: var(--line-soft); border: 0; margin: 20px 0; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #FAFBFD; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #FAFCFF; }
.table .right { text-align: right; }
.table .name { font-weight: 600; color: var(--ink); text-decoration: none; }
.table a.name:hover { color: var(--blue); text-decoration: underline; }
.table .sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; }
.table tr.is-me td { background: var(--cyan-wash); }
.table tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }

.empty { text-align: center; padding: 48px 24px; color: var(--muted); }
.empty .icon { width: 30px; height: 30px; margin: 0 auto 10px; color: var(--sky); }
.empty h3 { color: var(--ink); margin-bottom: 6px; }

/* ---------- Progress ---------- */
.bar { height: 6px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 999px; }
.bar.cyan > span { background: var(--cyan); }
.bar.stack { display: flex; }
.bar.stack > span { border-radius: 0; }
.bar.stack > .s-graded { background: var(--good); }
.bar.stack > .s-submitted { background: var(--cyan); }

/* ---------- Brand lockup ---------- */
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; color: inherit; }
.brand .logo-img { height: 34px; width: auto; max-width: 180px; object-fit: contain; }
.brand .logo-img.secondary { height: 30px; max-width: 150px; }
.brand .sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 0; }
.wordmark { display: flex; align-items: center; gap: 10px; }
.wordmark .globe { width: 34px; height: 34px; }
.wordmark-text { display: grid; line-height: 1.05; }
.wordmark-text b { font-size: 17px; font-stretch: 112%; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.wordmark-text small { font-size: 10.5px; letter-spacing: .32em; color: var(--muted); font-weight: 500; }
.program-name { font-weight: 600; font-size: 14px; color: var(--ink-2); line-height: 1.2; max-width: 180px; }
.logo-plate { background: #fff; border-radius: var(--r-md); padding: 10px 12px; }

/* ---------- Auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-brand {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 85% 100%, #13539F 0%, var(--navy) 42%, var(--navy-deep) 100%);
  padding: 40px clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between;
}
.auth-brand .globe-big { position: absolute; width: min(78vh, 620px); right: -14%; bottom: -18%; opacity: .95; pointer-events: none; }
.auth-brand .logo-plate { align-self: flex-start; position: relative; z-index: 1; }
.auth-brand .wordmark-text b { color: var(--navy); }
.auth-copy { position: relative; z-index: 1; max-width: 30ch; }
.auth-copy h1 { color: #fff; font-size: clamp(32px, 4.2vw, 52px); font-stretch: 122%; font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
.auth-copy p { color: rgba(255,255,255,.78); font-size: 16px; margin-top: 18px; max-width: 34ch; }
.auth-foot { position: relative; z-index: 1; font-size: 13px; color: rgba(255,255,255,.6); }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--surface); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h2 { font-size: 26px; font-stretch: 114%; font-weight: 680; margin-bottom: 6px; }
.auth-card .sub { color: var(--muted); margin-bottom: 26px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 26px; }
.seg a { text-align: center; padding: 9px 8px; border-radius: 7px; font-weight: 600; font-size: 14px; color: var(--muted); text-decoration: none; }
.seg a[aria-current="page"] { background: var(--surface); color: var(--navy); box-shadow: 0 1px 2px rgba(10,47,97,.12), 0 0 0 1px var(--line); }
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; font-size: 14px; }
.steps { display: flex; gap: 8px; margin-bottom: 18px; }
.steps span { height: 4px; flex: 1; border-radius: 4px; background: var(--line); }
.steps span.on { background: var(--cyan); }

/* ---------- Trainee shell ---------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar-in { max-width: 1160px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; gap: 28px; }
.mainnav { display: flex; gap: 4px; height: 100%; }
.mainnav a { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 100%; font-weight: 600; font-size: 14.5px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mainnav a:hover { color: var(--navy); }
.mainnav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--cyan); }
.usermenu { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 650; flex: none; }
.usermenu .who { display: grid; line-height: 1.2; text-align: right; }
.usermenu .who b { font-size: 14px; }
.usermenu .who small { font-size: 12px; color: var(--muted); }
.page { max-width: 1160px; margin: 0 auto; padding: 32px 24px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head p { margin: 6px 0 0; color: var(--muted); }
.crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; text-decoration: none; margin-bottom: 10px; color: var(--muted); }
.crumb:hover { color: var(--blue); }
.mobilenav { display: none; }

/* Rank card — the one bold moment on the trainee side */
.rank-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg); color: #fff;
  background: radial-gradient(140% 120% at 100% 100%, #1559A8 0%, var(--navy) 45%, var(--navy-deep) 100%);
  padding: 24px 26px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between;
}
.rank-card .globe { position: absolute; width: 300px; right: -70px; top: -40px; opacity: .9; pointer-events: none; }
.rank-card .label { color: rgba(255,255,255,.72); font-size: 13.5px; font-weight: 500; position: relative; }
.rank-card .rank { position: relative; display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.rank-card .rank b { font-size: 72px; line-height: .9; font-stretch: 125%; font-weight: 720; letter-spacing: -.03em; }
.rank-card .rank span { color: rgba(255,255,255,.75); font-size: 15px; }
.rank-card .meta { position: relative; display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,.75); }
.rank-card .meta strong { display: block; color: #fff; font-size: 20px; font-weight: 650; font-stretch: 110%; }
.rank-card a { color: #fff; }

.stat { padding: 18px 20px; }
.stat .k { font-size: 13px; color: var(--muted); font-weight: 500; }
.stat .v { font-size: 28px; font-weight: 680; font-stretch: 114%; letter-spacing: -.01em; line-height: 1.2; margin-top: 4px; }
.stat .v small { font-size: 15px; color: var(--muted); font-weight: 500; font-stretch: 100%; }

/* Assignment rows */
.a-list { list-style: none; margin: 0; padding: 0; }
.a-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: inherit; }
.a-item:last-child { border-bottom: 0; }
.a-item:hover { background: #FAFCFF; }
.a-item:hover .a-title { color: var(--blue); }
.a-date { width: 52px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 0 7px; line-height: 1; background: var(--surface); }
.a-date b { display: block; font-size: 20px; font-weight: 680; font-stretch: 112%; color: var(--navy); }
.a-date small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 600; }
.a-date.urgent { border-color: #F0C77F; background: var(--warn-wash); }
.a-date.urgent b { color: var(--warn); }
.a-title { font-weight: 640; font-size: 15.5px; color: var(--ink); }
.a-meta { font-size: 13px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.a-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.score-big { font-size: 22px; font-weight: 700; font-stretch: 114%; color: var(--navy); line-height: 1; }
.score-big small { font-size: 13px; color: var(--muted); font-weight: 500; }

/* Submission area */
.dropzone {
  position: relative; display: grid; place-items: center; text-align: center; gap: 6px;
  padding: 30px 20px; border: 1.5px dashed var(--sky); border-radius: var(--r-md); background: var(--sky-wash);
  transition: background-color .15s, border-color .15s; cursor: pointer;
}
.dropzone:hover, .dropzone.is-over { background: var(--cyan-wash); border-color: var(--cyan); }
.dropzone .icon { width: 30px; height: 30px; color: var(--blue); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone b { font-size: 15px; }
.dropzone small { color: var(--muted); font-size: 13px; }
.file-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.file-list li, .file-chip {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 14px; min-width: 0;
}
.file-chip { text-decoration: none; color: var(--ink); }
.file-chip:hover { border-color: var(--sky); background: var(--sky-wash); color: var(--navy); }
.file-chip .fname, .file-list .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.file-chip .fsize, .file-list .fsize { color: var(--muted); font-size: 12.5px; flex: none; }
.files { display: grid; gap: 8px; }
.upload-progress { margin-top: 14px; display: none; }
.upload-progress.on { display: block; }
.upload-progress .bar { height: 8px; }
.upload-progress p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

.feedback-box { border-left: 3px solid var(--cyan); background: var(--cyan-wash); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 14px 16px; }
.feedback-box p:last-child { margin-bottom: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 14.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 550; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline .when { font-size: 13px; color: var(--muted); }

/* Leaderboard */
.lb-podium { list-style: none; margin: 0 0 20px; padding: 0; display: flex; justify-content: center; gap: 14px; align-items: flex-end; }
.lb-podium > .lb-top { flex: 1 1 0; min-width: 0; max-width: calc((100% - 28px) / 3); }
.lb-top { --metal: var(--line); --metal-ink: var(--ink); padding: 18px 20px 20px; border-radius: var(--r-lg); border: 1px solid var(--metal); position: relative; overflow: hidden; }
.lb-top::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--metal-bar); }
.lb-top.gold   { --metal: #E2BC4E; --metal-ink: #7A5300; --metal-bar: linear-gradient(90deg, #B8860B, #F5D76E, #B8860B); background: linear-gradient(160deg, #FFFBEB 0%, #FCEFC2 100%); box-shadow: 0 14px 30px -18px rgba(184, 134, 11, .7); }
.lb-top.silver { --metal: #B9C2CF; --metal-ink: #3E4A5C; --metal-bar: linear-gradient(90deg, #8E99A8, #E8ECF1, #8E99A8); background: linear-gradient(160deg, #FBFCFD 0%, #E9EDF2 100%); }
.lb-top.bronze { --metal: #D7A37C; --metal-ink: #7C4220; --metal-bar: linear-gradient(90deg, #A0592A, #EBB58D, #A0592A); background: linear-gradient(160deg, #FFF8F2 0%, #F6DFCB 100%); }
.lb-top.gold { padding-top: 30px; padding-bottom: 30px; }
.lb-top-head { display: flex; align-items: center; gap: 10px; }
.lb-top .pos { font-size: 13.5px; font-weight: 650; color: var(--metal-ink); text-transform: uppercase; letter-spacing: .06em; }
.lb-top .crown { margin-left: auto; width: 26px; height: 26px; color: #B8860B; }
.lb-top .nm { font-weight: 650; font-size: 16.5px; margin-top: 12px; line-height: 1.25; color: var(--ink); }
.lb-top .pts { font-size: 30px; font-weight: 700; font-stretch: 118%; margin-top: 6px; line-height: 1; color: var(--metal-ink); }
.lb-top.gold .pts { font-size: 36px; }
.lb-top .pts small { font-size: 13px; font-weight: 500; color: var(--muted); font-stretch: 100%; }
/* desktop podium: 2nd · 1st · 3rd */
@media (min-width: 761px) {
  .lb-podium > .lb-top:nth-child(1) { order: 2; }
  .lb-podium > .lb-top:nth-child(2) { order: 1; }
  .lb-podium > .lb-top:nth-child(3) { order: 3; }
}
.medal { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 750; font-size: 15px; font-stretch: 110%; flex: none; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.55), 0 2px 6px -2px rgba(0,0,0,.35); }
.medal.gold   { background: radial-gradient(circle at 30% 25%, #FFF3B0, #F2C94C 45%, #B8860B 100%); color: #5C3D00; }
.medal.silver { background: radial-gradient(circle at 30% 25%, #FFFFFF, #CBD3DD 45%, #8B96A5 100%); color: #2F3A4A; }
.medal.bronze { background: radial-gradient(circle at 30% 25%, #FFE0C7, #D9915C 45%, #92502A 100%); color: #4A230C; }
.rank-num { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; font-weight: 680; background: var(--line-soft); color: var(--ink-2); font-stretch: 110%; }
.rank-num.r1, .rank-num.r2, .rank-num.r3 { min-width: 30px; width: 30px; padding: 0; border-radius: 50%; font-weight: 750; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.55), 0 2px 5px -2px rgba(0,0,0,.35); }
.rank-num.r1 { background: radial-gradient(circle at 30% 25%, #FFF3B0, #F2C94C 45%, #B8860B 100%); color: #5C3D00; }
.rank-num.r2 { background: radial-gradient(circle at 30% 25%, #FFFFFF, #CBD3DD 45%, #8B96A5 100%); color: #2F3A4A; }
.rank-num.r3 { background: radial-gradient(circle at 30% 25%, #FFE0C7, #D9915C 45%, #92502A 100%); color: #4A230C; }
.table tr.top-1 td { background: #FFFBEB; }
.table tr.top-2 td { background: #F8FAFC; }
.table tr.top-3 td { background: #FFF8F2; }
.table tr.top-1 td:first-child { box-shadow: inset 3px 0 0 #E2BC4E; }
.table tr.top-2 td:first-child { box-shadow: inset 3px 0 0 #B9C2CF; }
.table tr.top-3 td:first-child { box-shadow: inset 3px 0 0 #D7A37C; }
.medal-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 13.5px; font-weight: 600; }
.medal-chip .medal { width: 26px; height: 26px; font-size: 13px; }
.rank-card.medal-1 .rank b { background: linear-gradient(180deg, #FFF3B0, #F2C94C 60%, #D4A017); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rank-card.medal-2 .rank b { background: linear-gradient(180deg, #FFFFFF, #CBD3DD 60%, #A3ADBA); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rank-card.medal-3 .rank b { background: linear-gradient(180deg, #FFE0C7, #E3A273 60%, #C07A45); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- HR shell ---------- */
.hr { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--navy-ink); color: #DCE6F5; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side .logo-plate { margin: 18px 16px 8px; display: flex; align-items: center; gap: 12px; }
.side .logo-plate .brand { gap: 10px; }
.side-label { padding: 18px 24px 6px; font-size: 12px; color: #7F95B6; font-weight: 600; }
.side nav { display: grid; gap: 2px; padding: 4px 12px; }
.side nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #C9D6EA; font-weight: 550; font-size: 14.5px; text-decoration: none; }
.side nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side nav a[aria-current="page"] { background: rgba(0,174,238,.14); color: #fff; box-shadow: inset 2px 0 0 var(--cyan); }
.side nav a .count { margin-left: auto; font-size: 12px; background: var(--cyan); color: var(--navy-ink); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.side-foot { margin-top: auto; padding: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.acct { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.acct .avatar { background: var(--cyan); color: var(--navy-ink); }
.acct b { display: block; font-size: 14px; color: #fff; }
.acct small { font-size: 12px; color: #8EA3C3; }
.side-foot .btn { --btn-bg: transparent; --btn-fg: #C9D6EA; --btn-bd: rgba(255,255,255,.16); width: 100%; min-height: 36px; font-size: 13.5px; }
.side-foot .btn:hover { --btn-bg: rgba(255,255,255,.06); --btn-fg: #fff; }
.side-foot form + form { margin-top: 8px; }
.hr-main { min-width: 0; }
.hr-main .page { max-width: 1200px; padding-top: 28px; }
.hr-top { display: none; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tabs a { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.tabs a:hover { background: var(--sky-wash); color: var(--navy); }
.tabs a[aria-current="true"] { background: var(--navy); color: #fff; }
.tabs a .c { font-size: 12px; opacity: .8; font-weight: 500; }
.search { position: relative; }
.search .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search .input { padding-left: 36px; min-height: 38px; width: 260px; }

.metric { padding: 18px 20px; display: grid; gap: 4px; }
.metric .k { font-size: 13px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.metric .v { font-size: 30px; font-weight: 700; font-stretch: 116%; line-height: 1.1; letter-spacing: -.01em; }
.metric .v small { font-size: 14px; color: var(--muted); font-weight: 500; font-stretch: 100%; }
.metric.accent { background: var(--navy); border-color: var(--navy); color: #fff; }
.metric.accent .k { color: rgba(255,255,255,.75); }
.metric.accent a { color: #fff; }

.grade-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.grade-form { position: sticky; top: 20px; }
.score-input { display: flex; align-items: center; gap: 10px; }
.score-input .input { width: 120px; font-size: 26px; font-weight: 680; text-align: center; font-stretch: 112%; }
.score-input span { font-size: 18px; color: var(--muted); font-weight: 600; }
.quick-scores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick-scores button { min-width: 38px; height: 32px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.quick-scores button:hover { border-color: var(--blue); color: var(--blue); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.secret { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.secret code { font-size: 18px; font-weight: 650; padding: 8px 12px; background: var(--surface); border: 1px dashed var(--sky); border-radius: var(--r-sm); letter-spacing: .03em; }

.logo-slot { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line-soft); }
.logo-slot:first-of-type { border-top: 0; padding-top: 0; }
.logo-preview { height: 96px; border: 1px dashed var(--line); border-radius: var(--r-md); display: grid; place-items: center; background: repeating-conic-gradient(#F4F6FA 0% 25%, #fff 0% 50%) 50% / 16px 16px; padding: 12px; }
.logo-preview img { max-height: 70px; max-width: 170px; object-fit: contain; }

details.disclose summary { cursor: pointer; font-weight: 600; color: var(--blue); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details.disclose summary::-webkit-details-marker { display: none; }
details.disclose[open] summary { margin-bottom: 14px; }

/* ---------- Error page ---------- */
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.error-page .code { font-size: 96px; font-weight: 750; font-stretch: 125%; color: var(--navy); line-height: 1; letter-spacing: -.03em; }
.error-page h1 { margin: 10px 0 8px; font-size: 24px; }
.error-page p { color: var(--muted); max-width: 46ch; margin: 0 auto 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grade-layout { grid-template-columns: minmax(0, 1fr); }
  .grade-form { position: static; }
}
@media (max-width: 960px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .hr { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .hr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--navy-ink); position: sticky; top: 0; z-index: 20; }
  .hr-top .logo-plate { padding: 6px 10px; }
  .hr-top .brand .logo-img { height: 26px; }
  .hr-top .wordmark .globe { width: 26px; height: 26px; }
  .hr-nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; background: var(--navy-deep); position: sticky; top: 58px; z-index: 19; }
  .hr-nav a { flex: none; color: #C9D6EA; padding: 7px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
  .hr-nav a[aria-current="page"] { background: rgba(0,174,238,.18); color: #fff; }
}
@media (min-width: 961px) { .hr-nav { display: none; } }
@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-brand { padding: 22px 20px 26px; min-height: 0; gap: 26px; }
  .auth-brand .globe-big { width: 280px; right: -70px; bottom: auto; top: -60px; opacity: .55; }
  .auth-copy h1 { font-size: 30px; }
  .auth-copy p { display: none; }
  .auth-foot { display: none; }
  .auth-main { padding: 28px 20px 40px; align-items: flex-start; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .topbar-in { height: 60px; gap: 12px; padding: 0 16px; }
  .mainnav { display: none; }
  .usermenu .who { display: none; }
  .mobilenav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .mobilenav a { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 6px 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 8px; }
  .mobilenav a .icon { width: 22px; height: 22px; }
  .mobilenav a[aria-current="page"] { color: var(--navy); background: var(--sky-wash); }
  .page { padding: 22px 16px 96px; }
  .panel-pad { padding: 18px; }
  .panel-head, .toolbar { padding: 14px 16px; }
  .a-item { grid-template-columns: 46px minmax(0, 1fr); padding: 14px 16px; }
  .a-item .a-right { grid-column: 2; align-items: flex-start; flex-direction: row; }
  .a-date { width: 46px; }
  .lb-podium { flex-direction: column; align-items: stretch; }
  .lb-podium > .lb-top { max-width: none; }
  .search .input { width: 100%; }
  .search { flex: 1; }
  .logo-slot { grid-template-columns: minmax(0, 1fr); }
  .table th, .table td { padding: 10px 12px; }
  .hide-sm { display: none; }
  .brand .logo-img { height: 28px; max-width: 130px; }
  .brand .logo-img.secondary, .brand .sep.opt, .program-name.opt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media print {
  .topbar, .side, .mobilenav, .hr-top, .hr-nav, .btn { display: none !important; }
  body { background: #fff; }
}

/* ---------- Utilities (no inline styles: the CSP blocks them) ---------- */
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .mb-16 { margin-bottom: 16px; }
.center { justify-content: center; text-align: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.inline { display: inline; }
.nowrap { white-space: nowrap; }
.w-full { width: 100%; }
[hidden] { display: none !important; }
.timeline a.name { text-decoration: none; color: var(--ink); }
.timeline a.name:hover { color: var(--blue); text-decoration: underline; }
@media (min-width: 961px) { .hr { background: linear-gradient(to right, var(--navy-ink) 252px, var(--bg) 252px); } }
.pill.id { background: var(--sky-wash); color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pill.id::before { display: none; }
.pick-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 8px; background: var(--surface); }
.error-text { color: var(--bad); }
.js [data-show-when] { display: none; }
.js [data-show-when].is-shown { display: grid; }
.bar.warn > span { background: var(--warn); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: var(--line-soft); padding: 1px 5px; border-radius: 4px; }

/* ---------- Live sessions ---------- */
.pill.live, .pill.partial { background: var(--warn-wash); color: var(--warn); }
.pill.live { background: #FDE8E8; color: #B42318; }
.pill.present { background: var(--good-wash); color: var(--good); }
.pill.absent { background: var(--bad-wash); color: var(--bad); }
.pill.excused { background: var(--sky-wash); color: var(--navy); }
.pill.upcoming { background: var(--sky-wash); color: var(--navy); }
.a-date.live { border-color: #F3B4AE; background: #FDE8E8; }
.a-date.live b { color: #B42318; }
.warn-text { color: var(--warn) !important; font-weight: 600; }
.checkin-box { border: 2px solid var(--cyan); background: var(--cyan-wash); border-radius: var(--r-md); padding: 16px; }
.checkin-title { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--navy); margin-bottom: 12px; }
.checkin-row { display: flex; gap: 10px; }
.checkin-row .input.code { max-width: 170px; letter-spacing: .35em; }
.checkin-box.flash { animation: ci-flash 1s ease-in-out 3; }
@keyframes ci-flash { 50% { box-shadow: 0 0 0 6px rgba(0, 174, 238, .35); } }
.correct-form { display: grid; gap: 8px; margin-top: 8px; min-width: 220px; }
.correct-form .input, .correct-form .select { min-height: 36px; padding: 6px 10px; font-size: 14px; }

/* Presenter screen (shared in Google Meet) */
body.is-present { background: var(--navy-ink); color: #fff; }
.present { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: 24px 32px; gap: 16px; }
.present-top { display: flex; align-items: center; gap: 20px; }
.present-top .logo-plate { padding: 8px 12px; }
.present-title { font-size: 20px; font-weight: 650; font-stretch: 110%; flex: 1; }
.present-stats { color: #9FB3D1; font-size: 15px; }
.present-stage { display: grid; place-items: center; text-align: center; }
.present-wait .globe { width: min(36vh, 320px); margin: 0 auto 24px; }
.present-big { font-size: clamp(24px, 3.4vw, 40px); font-weight: 650; font-stretch: 112%; margin: 0 0 8px; }
.present-sub { color: #9FB3D1; font-size: 18px; margin: 0; }
.present-label { font-size: clamp(20px, 2.6vw, 30px); color: #CFE0F5; margin: 0 0 16px; }
.code-digits { font-size: clamp(96px, 22vw, 260px); line-height: 1; font-weight: 750; font-stretch: 125%; letter-spacing: .12em; color: var(--cyan); font-variant-numeric: tabular-nums; padding-left: .12em; }
.present-timer { font-size: clamp(20px, 2.4vw, 30px); color: #fff; margin: 18px 0 0; }
.present-foot { color: #6F86A8; font-size: 13px; text-align: center; }
.session-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-decoration: none; color: var(--ink); }
.session-banner > .icon { width: 22px; height: 22px; color: var(--blue); }
.session-banner > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.session-banner .small { color: var(--muted); }
.session-banner:hover { border-color: var(--sky); }
.session-banner.is-live { border-color: #F3B4AE; background: #FFF6F5; }
.session-banner.is-live > .icon { color: #B42318; }
.usermenu .who { white-space: nowrap; }
@media (max-width: 1180px) { .usermenu .btn .hide-sm { display: none; } .mainnav a { padding: 0 9px; } }
@media (max-width: 1020px) { .usermenu .who { display: none; } }
.session-banner .btn:not(.secondary) { color: #fff; }
@media (max-width: 1440px) { .topbar .program-name, .topbar .brand .sep { display: none; } }

/* ---------- Announcements ---------- */
.ann { padding: 22px 24px; }
.ann.pinned { border-color: #B6E5F7; box-shadow: inset 4px 0 0 var(--cyan); }
.ann-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ann-head h2 { font-size: 18px; line-height: 1.3; }
.ann-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.pill.pin .icon { width: 13px; height: 13px; }
.ann .prose { margin-bottom: 4px; }
.ann .prose a { word-break: break-all; }
.ann-meta { margin: 0; font-size: 13px; color: var(--muted); }
.ann-meta b { color: var(--ink-2); font-weight: 600; }
.ann-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.ann-actions { display: flex; gap: 8px; }
.nav-badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #D92D20; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1; }
.nav-ico { position: relative; display: grid; justify-items: center; }
.nav-ico .nav-badge { position: absolute; top: -6px; right: -12px; min-width: 17px; height: 17px; font-size: 10.5px; }
.announce-bar { background: var(--navy); color: #fff; }
.announce-in { max-width: 1160px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.announce-in p { margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announce-in .icon { color: var(--cyan); }
.announce-in .btn { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; flex: none; }
::placeholder { color: #94A3B8; font-style: italic; opacity: 1; }
/* five tabs: text only so the logo never gets squeezed */
.mainnav a .icon { display: none; }
.topbar .brand { flex: none; }
@media (max-width: 760px) {
  .announce-in { padding: 9px 16px; font-size: 13.5px; }
  .ann { padding: 18px; }
  .ann-head { flex-direction: column; }
  .ann-tags { justify-content: flex-start; }
}
.lb-top .tie { height: 22px; font-size: 12px; background: rgba(255,255,255,.7); color: var(--metal-ink); }
.lb-top .nm-list { list-style: none; margin: 12px 0 0; padding: 0; font-weight: 650; font-size: 15px; line-height: 1.45; color: var(--ink); }
.lb-top .nm-list .muted { font-weight: 500; font-size: 13px; }
.rank-card .medal-chip { margin-bottom: 14px; }