/* internal.ai2n.ai — corporate learning portal. White, quiet, brand navy with an orange accent. */
:root {
  --navy: #102A43;
  --navy-2: #243B53;
  --ink: #1F2933;
  --muted: #627D98;
  --line: #E4E7EB;
  --soft: #F5F7FA;
  --orange: #E96224;
  --orange-soft: #FDF0EA;
  --green: #1F7A4D;
  --green-soft: #E8F5EE;
  --red: #B3261E;
  --red-soft: #FDECEA;
  --amber-soft: #FFF8E6;
  --radius: 12px;
  --canvas: #F5F7FA;
  --line-strong: #D5DCE3;
  --shadow-sm: 0 1px 2px rgba(16, 42, 67, .05);
  --shadow-lg: 0 2px 4px rgba(16, 42, 67, .04), 0 12px 32px rgba(16, 42, 67, .10);
  --shadow: 0 1px 2px rgba(16, 42, 67, .05), 0 4px 14px rgba(16, 42, 67, .06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--canvas); color: var(--ink); font: 15px/1.6 var(--font); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--navy); }
h1, h2, h3 { color: var(--navy); line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 30px; font-weight: 750; letter-spacing: -.015em; }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 16px; font-weight: 650; }
p { margin: 0 0 .8em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
[hidden] { display: none !important; }

/* Top bar */
/* z-index 30 keeps the bar above the portal menu below it (.side:has(.gnav),
   z-index 20). That menu is raised so its flyouts clear the page, not so it
   clears the header: at 20 a menu taller than the window scrolled up and
   painted its items across the logo. */
.topbar { border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); position: sticky; top: 0; z-index: 30; box-shadow: var(--shadow-sm); }
.topbar-inner { max-width: 1320px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { height: 30px; width: auto; }
.brand-divider { width: 1px; height: 24px; background: var(--line); }
.brand-name { font-weight: 650; color: var(--navy); font-size: 17px; letter-spacing: .01em; }
.mainnav { display: flex; gap: 4px; flex: 1; }
.mainnav a { text-decoration: none; color: var(--muted); padding: 8px 12px; border-radius: 6px; font-weight: 600; font-size: 14.5px; transition: color .15s, background .15s; }
.mainnav a:hover { color: var(--navy); background: var(--soft); }
.mainnav a.active { color: var(--navy); box-shadow: inset 0 -2px 0 var(--orange); border-radius: 0; }
.usermenu { display: flex; align-items: center; gap: 12px; }
.user-name { color: var(--navy-2); font-weight: 550; }

.app { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 32px 24px 48px; }
.footer { border-top: 1px solid var(--line); background: #fff; }
.footer-inner { max-width: 1320px; margin: 0 auto; padding: 16px 24px; color: var(--muted); font-size: 13px; }

/* Buttons and forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 10px 18px; font: 600 14px/1.3 var(--font); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(16,42,67,.2); }
.btn-primary:hover:not(:disabled) { background: var(--navy-2); }
.btn-accent { background: var(--orange); color: #fff; box-shadow: 0 1px 2px rgba(233,98,36,.3); }
.btn-accent:hover:not(:disabled) { filter: brightness(.95); }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--line-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--soft); border-color: #B9C4CF; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-ms { background: #fff; color: #1F2933; border: 1px solid #C9D2DB; }
.btn-ms:hover { background: var(--soft); }
.ms-logo { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ms-logo i { display: block; }
.ms-logo i:nth-child(1) { background: #F25022; } .ms-logo i:nth-child(2) { background: #7FBA00; }
.ms-logo i:nth-child(3) { background: #00A4EF; } .ms-logo i:nth-child(4) { background: #FFB900; }
label { display: block; font-weight: 600; color: var(--navy-2); font-size: 13px; margin: 0 0 6px; }
input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=date], input[type=time], input[type=datetime-local], input[type=number], input[type=tel], input[type=search], select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font: 15px var(--font); color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover { border-color: #B9C4CF; }
input:focus, select:focus, textarea:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(233,98,36,.15); outline: none; }
textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font: 15px/1.5 var(--font); color: var(--ink); resize: vertical; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.field { margin-bottom: 16px; }
.error { color: var(--red); background: var(--red-soft); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; }
.notice { background: var(--amber-soft); border: 1px solid #F3D99B; color: #5C4813; border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.success { color: var(--green); background: var(--green-soft); border-radius: 8px; padding: 10px 12px; font-size: 14px; }

/* Sign-in */
.auth-wrap { min-height: calc(100vh - 80px); display: grid; place-items: center; }
.auth-split { display: grid; grid-template-columns: 1.05fr 1fr; width: 100%; max-width: 960px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.auth-brand { background: radial-gradient(130% 120% at 100% 0%, #24476F 0%, var(--navy) 60%); color: #fff; padding: 52px 46px; display: flex; flex-direction: column; justify-content: center; }
.auth-brand .eyebrow { color: #FFB38A; }
.auth-motto-ta { font-size: 36px; font-weight: 800; line-height: 1.3; margin: 12px 0 6px; }
.auth-motto-en { color: #FFB38A; font-weight: 650; font-size: 16px; margin-bottom: 30px; }
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: #DCE4EC; }
.auth-points li { position: relative; padding-left: 28px; }
.auth-points li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,179,138,.18); box-shadow: inset 0 0 0 2px #FFB38A; }
.auth-card { width: 100%; padding: 48px 44px; background: #fff; }
.auth-card h1 { margin-bottom: 4px; }
.auth-card > .muted { margin-bottom: 22px; }
.auth-logo { height: 36px; margin-bottom: 20px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 20px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Page header */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; flex-wrap: wrap; }
.page-head > div:first-child { flex: 1 1 520px; min-width: 0; }
.page-head p.muted { margin-bottom: 0; max-width: 820px; }
.eyebrow { color: var(--orange); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }

/* "Karpom Karpipom" motto */
.motto-line { color: var(--orange); font-weight: 700; margin: -4px 0 6px; font-size: 16px; }
.motto-line span { color: var(--navy-2); font-weight: 600; }
.motto { border-left: 4px solid var(--orange); background: linear-gradient(90deg, #FFF6F0 0%, #FFFFFF 70%); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 26px; margin-bottom: 32px; box-shadow: var(--shadow-sm); }
.motto-ta { font-size: 22px; font-weight: 700; color: var(--navy); }
.motto-en { color: var(--orange); font-weight: 700; margin: 2px 0 10px; }
.motto p { color: var(--navy-2); margin: 0; max-width: 900px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: #fff; box-shadow: var(--shadow-sm); }
.stat b { display: block; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; color: var(--navy); }
.stat span { color: var(--muted); font-size: 13px; }

/* Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: #fff; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s, transform .2s; }
/* A card's progress bar and the line after it sit at the bottom, so cards in a row line up. */
.card > .progress { margin-top: auto; }
a.card:hover { box-shadow: var(--shadow-lg); border-color: #CBD2D9; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { a.card:hover { transform: none; } }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card h3 { margin: 0; font-size: 16.5px; line-height: 1.35; }
.card .meta { color: var(--muted); font-size: 13px; }
.tag { display: inline-block; font-size: 12px; font-weight: 650; color: var(--navy-2); background: var(--soft); border-radius: 999px; padding: 2px 10px; }
.tag-orange { background: var(--orange-soft); color: #9A3F12; }
.tag-green { background: var(--green-soft); color: var(--green); }
.tag-grey { background: #EEF1F4; color: var(--muted); }
.tag-blue { background: #E6F0FA; color: #1D4F91; }
.progress { height: 6px; background: #EEF1F4; border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--orange); }
.progress.done > i { background: var(--green); }
.section { margin-bottom: 40px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.empty { border: 1px dashed #CBD2D9; border-radius: var(--radius); padding: 32px; text-align: center; color: var(--muted); background: #fff; }
/* My learning dashboard */
.dash-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-bottom: 18px; }
.level-card { display: flex; gap: 20px; align-items: center; border-radius: var(--radius); padding: 24px 26px; background: radial-gradient(120% 140% at 100% 0%, #1E3A5F 0%, var(--navy) 55%); color: #fff; box-shadow: var(--shadow); }
.level-card .eyebrow { color: #FFB38A; }
.level-card h2 { color: #fff; margin: 2px 0 10px; }
.level-card .muted { color: #C9D4DF; }
.level-badge { flex: 0 0 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 800; color: var(--navy); background: #fff; box-shadow: 0 0 0 4px var(--orange); }
.level-body { flex: 1; min-width: 0; }
.xp-line { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 8px; }
.xp-line b { font-size: 20px; }
.xp-bar { height: 10px; background: rgba(255,255,255,.18); }
.xp-how { margin-top: 12px; font-size: 13px; color: #DCE4EC; }
.xp-how summary { cursor: pointer; font-weight: 650; color: #fff; }
.xp-how ul { margin: 8px 0 0; padding-left: 18px; }
.continue-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; background: #fff; box-shadow: var(--shadow-sm); }
.continue-card h2 { margin: 0; }
.continue-card .progress { width: 100%; }
.continue-card p { margin: 4px 0; }
.stat-warn { border-color: var(--red-soft); background: var(--red-soft); }
.stat-warn b { color: var(--red); }
.dash-mid { margin-bottom: 32px; align-items: start; }
.dash-mid .panel { margin-bottom: 0; }
.track-row { margin: 12px 0; }
.track-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-weight: 600; }
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.activity li:last-child { border-bottom: 0; }
.xp-chip { flex: 0 0 64px; text-align: center; font-size: 12px; font-weight: 750; color: #9A3F12; background: var(--orange-soft); border-radius: 999px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.xp-earned { font-size: 15px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: min(380px, calc(100vw - 32px)); background: var(--navy); color: #fff; border-radius: 12px; padding: 14px 18px; box-shadow: 0 10px 30px rgba(16,42,67,.25); font-size: 14px; transition: opacity .5s, transform .5s; }
.toast b { color: #FFB38A; font-size: 16px; margin-right: 4px; }
.toast-level { margin-top: 6px; font-weight: 700; }
.toast.out { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* Catalogue filters */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font: 600 13px var(--font); color: var(--navy-2); cursor: pointer; }
.chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.filters input[type=search] { max-width: 280px; margin-left: auto; }

/* Module page */
.module-layout { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.lesson-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: sticky; top: 84px; background: #fff; box-shadow: var(--shadow-sm); }
.lesson-list h3 { padding: 14px 16px; margin: 0; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 14px; }
.lesson { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; background: #fff; border-left: 3px solid transparent; width: 100%; text-align: left; font: inherit; color: inherit; border-top: 0; border-right: 0; }
.lesson:last-child { border-bottom: 0; }
.lesson:hover { background: var(--soft); }
.lesson.current { border-left-color: var(--orange); background: #FFFBF8; }
.lesson .tick { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #CBD2D9; flex: none; margin-top: 2px; display: grid; place-items: center; font-size: 12px; color: #fff; }
.lesson.done .tick { background: var(--green); border-color: var(--green); }
.lesson .lt { font-weight: 600; font-size: 14px; color: var(--navy); }
.lesson .lm { font-size: 12px; color: var(--muted); }
.player { background: #0B1A2A; border-radius: var(--radius); aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; color: #D9E2EC; }
.player iframe, .player video { width: 100%; height: 100%; border: 0; display: block; }
.player-empty { text-align: center; padding: 24px; }
.player-empty b { color: #fff; display: block; margin-bottom: 6px; font-size: 17px; }
/* One lesson in one box: its title, its player, its transcript and its own complete action. */
.lesson-panel { display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); margin-bottom: 24px; }
.lesson-panel .lesson-list { position: static; border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; overflow: visible; }
.lesson-panel .lesson:last-child { border-bottom: 1px solid var(--line); }
.lesson-card { min-width: 0; }
.lesson-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 16px; flex-wrap: wrap; padding: 14px 20px; }
.lesson-card-kicker { color: var(--orange-ink); font-weight: 700; font-size: 12px; letter-spacing: .04em; margin-bottom: 2px; }
.lesson-card-head h2 { margin: 0; font-size: 18px; color: var(--navy); }
.lesson-card-time { color: var(--muted); font-size: 13px; margin-top: 2px; white-space: nowrap; }
.lesson-card .player { border-radius: 0; }
.lesson-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; min-height: 64px; }
.lesson-card-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 0; font: 600 14px var(--font); color: var(--navy-2); cursor: pointer; }
.lesson-card-toggle:hover { color: var(--navy); text-decoration: underline; }
.lesson-card-toggle .caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.lesson-card-toggle[aria-expanded="true"] .caret { transform: rotate(45deg); }
.lesson-card-done { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; color: var(--green); }
.lesson-card-done .tick { width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 12px; flex: none; }
.lesson-card-transcript { border-top: 1px solid var(--line); padding: 16px 20px; }
.lesson-card-transcript p { margin: 0; }
.lesson-card-transcript .transcript-note { font-size: 13px; color: var(--orange-ink); margin-bottom: 10px; }
.transcript-tabs { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.transcript-tabs .tabs { margin-bottom: 0; flex: 1 1 auto; }
.transcript-lang { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.transcript-lang select { width: auto; font: inherit; color: var(--navy); }
@media (max-width: 860px) {
  .lesson-panel { grid-template-columns: minmax(0, 1fr); }
  .lesson-panel .lesson-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .lesson-panel .lesson:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .lesson-card-head, .lesson-card-foot, .lesson-card-transcript { padding-left: 16px; padding-right: 16px; }
  .lesson-card-foot .btn, .lesson-card-done { width: 100%; justify-content: center; text-align: center; }
  .lesson-card-toggle { order: 2; width: 100%; justify-content: center; }
}
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab { background: none; border: 0; padding: 10px 14px; font: 600 14px var(--font); color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.active { color: var(--navy); border-bottom-color: var(--orange); }
.row-warn { background: var(--orange-soft, #fff4ec); }
a.tab { display: inline-block; text-decoration: none; }
.side-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.obj-level { font-weight: 700; color: var(--orange); font-size: 12px; margin-top: 10px; }
ul.clean { margin: 6px 0 0; padding-left: 20px; }
ul.clean li { margin-bottom: 6px; }
.transcript { white-space: pre-wrap; background: var(--soft); border-radius: var(--radius); padding: 18px; max-height: 560px; overflow: auto; font-size: 15px; line-height: 1.65; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; color: var(--muted); font-weight: 650; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--soft); white-space: nowrap; }
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: #FAFBFC; }
table.data a:not(.btn) { color: var(--navy); text-decoration: none; font-weight: 550; }
table.data a:not(.btn):hover { text-decoration: underline; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; background: #fff; box-shadow: var(--shadow-sm); }
.draft-banner { background: var(--amber-soft); border: 1px solid #F3D99B; color: #5C4813; border-radius: 8px; padding: 8px 14px; font-size: 13px; margin-bottom: 18px; }

/* Assessment */
.question { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.question .qh { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.question .qn { color: var(--orange); font-weight: 700; font-size: 13px; }
.question .qt { font-weight: 600; color: var(--navy); margin-bottom: 12px; }
.option { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; cursor: pointer; font-weight: 400; color: var(--ink); font-size: 15px; transition: background .15s, border-color .15s; }
.option:has(input:checked) { border-color: var(--navy-2); background: #F3F6FA; }
.option:hover { background: var(--soft); }
.option input { margin-top: 4px; }
.option.correct { border-color: var(--green); background: var(--green-soft); }
.option.wrong { border-color: var(--red); background: var(--red-soft); }
.why { font-size: 14px; color: var(--navy-2); background: var(--soft); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.tag-red { background: var(--red-soft); color: var(--red); }
.review .option { cursor: default; }
.review .option:hover { background: #fff; }
.review .option.correct, .review .option.correct:hover { background: var(--green-soft); }
.review .option.wrong, .review .option.wrong:hover { background: var(--red-soft); }
.opt-note { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.review .option.correct .opt-note { color: var(--green); }
.review .option.wrong .opt-note { color: var(--red); }
.attempt-link { display: block; border-radius: 10px; padding: 12px 14px; margin: 10px 0 0; text-decoration: none; color: var(--ink); border: 1px solid var(--line); }
.attempt-link.pass { background: var(--green-soft); border-color: var(--green); }
.attempt-link.fail { background: var(--red-soft); border-color: var(--red); }
.attempt-link:hover { filter: brightness(.97); }
.attempt-link .attempt-status { font-weight: 700; }
.attempt-link.pass .attempt-status { color: var(--green); }
.attempt-link.fail .attempt-status { color: var(--red); }
.attempt-link .attempt-go { display: block; margin-top: 6px; font-size: 13px; font-weight: 650; color: var(--navy); }
.result-head { border-radius: 14px; padding: 24px 28px; margin-bottom: 24px; }
.result-head.pass { background: var(--green-soft); }
.result-head.fail { background: var(--red-soft); }
.result-head b { font-size: 34px; color: var(--navy); }
.sticky-submit { position: sticky; bottom: 0; background: rgba(245,247,250,.96); backdrop-filter: blur(6px); border-top: 1px solid var(--line); padding: 14px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Admin */
.admin-tabs { margin-bottom: 24px; }
.toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--navy-2); margin: 0; }
.row-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.checklist { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.checklist label { font-weight: 400; color: var(--ink); font-size: 14px; display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; background: #fff; box-shadow: var(--shadow-sm); }
/* A value shown exactly as stored: pre-wrap so leading, trailing and doubled
   spaces survive, because with department names that spacing IS the problem. */
.exact { font-family: Consolas, monospace; font-size: .92em; white-space: pre-wrap; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
/* In a chip the box would fight the pill; the monospace and the quotes carry
   the meaning on their own, and the colour is inherited so it still reads on
   an active (dark) chip. */
.chip .exact { background: none; border: 0; padding: 0; color: inherit; }
.log { font-family: Consolas, monospace; font-size: 12px; background: var(--soft); border-radius: 8px; padding: 10px; max-height: 220px; overflow: auto; white-space: pre-wrap; }
.profile-group { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px 14px; margin: 14px 0 0; }
.profile-group legend { font-weight: 700; color: var(--navy); font-size: 13px; padding: 0 6px; }
.profile-group input:disabled, .profile-group select:disabled { background: var(--soft); color: var(--muted); }
.from-ms { font-size: 12px; color: var(--muted); font-weight: 500; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; margin: 0; }
.kv div { min-width: 0; }
.kv dt { font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kv dd { margin: 2px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.kv-section { font-size: 14px; color: var(--navy); margin: 22px 0 10px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.btn-danger { background: #fff; color: var(--red); border-color: var(--red-soft); }
.btn-danger:hover:not(:disabled) { background: var(--red-soft); }
details.more summary { cursor: pointer; font-weight: 650; color: var(--navy-2); margin-top: 14px; }

@media (max-width: 860px) {
  .module-layout, .two-col, .side-cards, .dash-top, .auth-split { grid-template-columns: 1fr; }
  .auth-brand { padding: 28px 24px; }
  .auth-motto-ta { font-size: 27px; }
  .auth-motto-en { margin-bottom: 0; }
  .auth-points { display: none; }
  .auth-card { padding: 28px 24px 32px; }
  .auth-wrap { min-height: auto; padding: 8px 0; }
  .dash-mid .panel + .panel { margin-top: 18px; }
  .lesson-list { position: static; }
  /* Navigation drops to its own scrollable row rather than disappearing. */
  .topbar-inner { height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
  .mainnav { order: 3; flex: 1 0 100%; overflow-x: auto; }
  .mainnav a { white-space: nowrap; }
  .usermenu { margin-left: auto; }
  .user-name, .brand-name, .brand-divider { display: none; }
  .app { padding: 24px 16px 40px; }
  .filters input[type=search] { max-width: none; margin-left: 0; }
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 14px 16px; }
  .stat b { font-size: 22px; }
  h1 { font-size: 25px; }
  .page-head { margin-bottom: 20px; }
  .mainnav { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { font-size: 14px; padding: 8px 10px; }
  .level-card { padding: 20px; }
  .panel { padding: 18px; }
}

/* Certifications */
.tier-fundamentals { background: #E6F0FA; color: #1F4E79; }
.tier-associate { background: var(--orange-soft); color: #9A3F12; }
.tier-expert { background: #EDE7F6; color: #4A2C82; }
.tag-red { background: var(--red-soft); color: var(--red); }
.cert-layout { grid-template-columns: 1fr 340px; }
.cert-modules { list-style: none; margin: 0; padding: 0; }
.cert-modules li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cert-modules a { color: var(--navy); text-decoration: none; font-weight: 550; }
.cert-modules a:hover { text-decoration: underline; }
.kv-tight dd { font-size: 14.5px; }
.cert-modules li:last-child { border-bottom: 0; }
.cert-action .cert-standing { margin: 12px 0; }
.cert-action .btn-block { margin-bottom: 16px; }
.kv-tight { grid-template-columns: 1fr; gap: 10px; margin: 6px 0 14px; }
.exam-bar { position: sticky; top: 64px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(245,247,250,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: 14px; }
.exam-clock { display: flex; gap: 14px; align-items: center; }
.exam-clock b { font: 700 22px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--navy); background: var(--soft); border-radius: 8px; padding: 6px 12px; }
.exam-clock b.clock-low { color: #fff; background: var(--red); }
.cert-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.certificate { position: relative; overflow: hidden; max-width: 1000px; margin: 0 auto; background: #fff; border: 2px solid var(--navy); outline: 6px solid #fff; box-shadow: 0 0 0 8px var(--orange-soft), 0 12px 32px rgba(16,42,67,.12); border-radius: 6px; padding: 40px 56px 28px; text-align: center; }
.cert-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; }
.cert-head img { height: 46px; }
.cert-brand { text-align: right; font-weight: 800; color: var(--navy); letter-spacing: .06em; text-transform: uppercase; font-size: 15px; }
.cert-brand span { display: block; color: var(--orange); font-size: 13px; }
.cert-lead { color: var(--muted); margin: 6px 0; font-size: 15px; }
.cert-name { font-size: clamp(28px, 5vw, 44px); margin: 6px 0 10px; color: var(--navy); border-bottom: 2px solid var(--orange); display: inline-block; padding: 0 24px 6px; overflow-wrap: anywhere; }
.cert-title { font-size: clamp(19px, 3vw, 26px); color: var(--navy); margin: 8px 0 10px; }
.cert-desc { max-width: 680px; margin: 0 auto 26px; color: var(--ink); font-size: 14px; }
.cert-foot { display: grid; grid-template-columns: 1fr 1fr auto; gap: 20px; align-items: end; text-align: left; border-top: 1px solid var(--line); padding-top: 18px; }
.cert-meta div { margin-bottom: 6px; }
.cert-meta span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cert-meta b { color: var(--navy); }
.cert-sign { text-align: center; }
.cert-sig-name { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 30px; color: var(--navy); border-bottom: 1px solid var(--navy); padding-bottom: 2px; }
.cert-sig-print { font-size: 13px; font-weight: 700; color: var(--navy); margin-top: 6px; }
.cert-sig-role { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cert-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: var(--muted); text-align: center; }
.cert-qr img { width: 96px; height: 96px; }
.cert-motto { margin: 18px 0 0; color: var(--orange); font-weight: 650; font-size: 14px; }
.cert-motto span { color: var(--muted); font-weight: 500; }
.cert-void .cert-name, .cert-void .cert-title { opacity: .55; }
.cert-stamp { position: absolute; top: 34px; right: -46px; transform: rotate(35deg); background: var(--red); color: #fff; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 60px; }
.verify-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--soft); }
.verify-card { width: min(560px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 36px; box-shadow: var(--shadow-lg); }
.verify-result { border-radius: 10px; padding: 16px 18px; margin: 16px 0 20px; }
.verify-result.ok { background: var(--green-soft); }
.verify-result.bad { background: var(--red-soft); }
.verify-status { font-weight: 800; font-size: 18px; margin-bottom: 12px; color: var(--navy); }
.verify-result.ok .verify-status { color: var(--green); }
.verify-result.bad .verify-status { color: var(--red); }
.verify-form { margin: 8px 0 14px; }
.verify-row { display: flex; gap: 8px; }
.verify-row input { flex: 1; min-width: 0; text-transform: uppercase; }
@media (max-width: 720px) {
  .cert-layout { grid-template-columns: 1fr; }
  .certificate { padding: 28px 20px 20px; }
  .cert-foot { grid-template-columns: 1fr; text-align: center; }
  .cert-head { flex-direction: column; }
  .cert-brand { text-align: center; }
}
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .topbar, .footer, .no-print, .toast { display: none !important; }
  .app { padding: 0 !important; max-width: none !important; }
  body { background: #fff; }
  .certificate { box-shadow: none; outline: none; max-width: none; page-break-inside: avoid; }
  .cert-foot { grid-template-columns: 1fr 1fr auto; text-align: left; }
}

/* Start here: programme guide, find my path, certification map */
.guide h2 { margin: 34px 0 10px; }
.guide h3 { margin: 18px 0 8px; }
.guide p, .guide li { max-width: 860px; }
.guide-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 22px 0 6px; }
.guide-step { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-decoration: none; color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s; }
.guide-step:hover { border-color: var(--orange); box-shadow: var(--shadow); }
.guide-step span:last-child { color: var(--muted); font-size: 14px; }
.guide-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 800; }
.guide-list { padding-left: 20px; }
.guide-list li { margin: 6px 0; }
.kv-levels { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.faq { border-bottom: 1px solid var(--line); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 650; color: var(--navy); }
.faq p { margin: 8px 0 0; }
.path-nudge { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(90deg, #FFF1E8, #FFF8F3); border: 1px solid #F6D3C2; border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; }
.path-action { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.cert-path { margin: 8px 0; padding-left: 20px; }
.cert-path li { margin: 8px 0; }
.cert-path a { color: var(--navy); font-weight: 600; text-decoration: none; margin-left: 4px; }
.cert-path a:hover { text-decoration: underline; }
.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; }
.path-table { table-layout: fixed; min-width: 760px; }
.path-table th:nth-child(1) { width: 52px; } .path-table th:nth-child(3) { width: 78px; } .path-table th:nth-child(4) { width: 120px; }
.path-table th:nth-child(5) { width: 84px; } .path-table th:nth-child(6) { width: 210px; } .path-table th:nth-child(7) { width: 104px; }
.path-table td:nth-child(2) { overflow-wrap: anywhere; }
.path-table tr.optional td { color: var(--muted); }
.cert-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.cert-col { display: flex; flex-direction: column; gap: 12px; }
.cert-col h2 { margin: 0 0 4px; }
.cert-node { border-left-width: 4px; }
.tier-border-fundamentals { border-left-color: #1F4E79; }
.tier-border-associate { border-left-color: var(--orange); }
.tier-border-expert { border-left-color: #4A2C82; }
@media (max-width: 860px) { .cert-map { grid-template-columns: 1fr; } }

/* Course materials and the PDF reader */
.material { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; row-gap: 8px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.material-name { display: contents; }
.material-name b { grid-column: 2; }
.material-actions { grid-column: 2; }
.material b { color: var(--navy); }
.material-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.material-icon { width: 30px; height: 36px; border-radius: 4px; position: relative; flex: none; box-shadow: inset 0 0 0 1px rgba(16,42,67,.12); }
.material-icon::after { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font: 800 9px/1 var(--font); color: #fff; }
.material-guide { background: #2B5797; } .material-guide::after { content: "DOC"; }
.material-deck { background: #C4472B; } .material-deck::after { content: "PPT"; }
body.reading { overflow: hidden; }
.reader { position: fixed; inset: 0; z-index: 100; background: rgba(11,26,42,.82); display: flex; flex-direction: column; padding: 16px; gap: 10px; }
.reader-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow-lg); }
.reader-title { color: var(--navy); }
.reader-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reader-frame { flex: 1; width: 100%; border: 0; border-radius: 10px; background: #525659; box-shadow: var(--shadow-lg); }
@media (max-width: 720px) { .reader { padding: 8px; } .reader-actions .btn { padding: 6px 10px; } }

/* Workspace: portal switcher, decks, portal menus */
.user-name { text-decoration: none; }
.user-name:hover { text-decoration: underline; }
.portal-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.side { position: sticky; top: 88px; }
.side-nav { display: flex; flex-direction: column; gap: 18px; }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-title { font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 12px 6px; }
.side-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 8px; color: var(--navy-2); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background .15s, color .15s; }
.side-nav a:hover { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.side-nav a.active { background: #fff; color: var(--navy); box-shadow: inset 3px 0 0 var(--orange), var(--shadow-sm); }
.side-badge { min-width: 22px; text-align: center; font-size: 11.5px; font-weight: 750; color: #fff; background: var(--orange); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.decks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.deck { --deck: var(--navy); --deck-soft: #E6EDF5; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; min-height: 200px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; }
.deck::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 160px; height: 160px; border-radius: 50%; background: var(--deck-soft); opacity: .7; z-index: 0; }
.deck > * { position: relative; z-index: 1; }
.deck:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--line-strong); }
.deck-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--deck); color: #fff; margin-bottom: 6px; }
.deck-name { font-size: 21px; font-weight: 750; color: var(--navy); letter-spacing: -.01em; }
.deck-blurb { color: var(--muted); font-size: 14px; }
.deck-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; }
.deck-note { font-size: 13px; color: var(--navy-2); font-weight: 550; }
.deck-hr { --deck: #7B4BB7; --deck-soft: #F1EAFA; }
.deck-sales { --deck: #1F7A4D; --deck-soft: #E8F5EE; }
.deck-it { --deck: #2563A8; --deck-soft: #E6F0FA; }
.deck-learning { --deck: var(--orange); --deck-soft: var(--orange-soft); border-color: #F6C8B0; }
.deck-tools { --deck: #47586B; --deck-soft: #EEF1F4; }
.deck-travel { --deck: #0E7C86; --deck-soft: #E3F4F5; }
@media (prefers-reduced-motion: reduce) { .deck:hover { transform: none; } }
.soon-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--radius); background: var(--amber-soft); border: 1px solid #F3E2B3; margin-bottom: 24px; color: var(--navy-2); font-size: 14px; }
.soon { text-align: center; padding: 48px 24px; border-radius: var(--radius); background: #fff; border: 1px dashed #CBD2D9; }
.soon-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--soft); color: var(--navy-2); margin-bottom: 12px; }
.soon-icon svg { width: 32px; height: 32px; }
.soon .muted { max-width: 520px; margin: 0 auto 18px; }

/* Learning workspace */
.text-red { color: var(--red); }
.done-list { columns: 2; margin-top: 10px; }
.done-list a { text-decoration: none; }
.class-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.class-card.is-cancelled { opacity: .7; }
.class-card.is-cancelled h3 { text-decoration: line-through; }
.class-date { text-align: center; border-radius: 10px; background: var(--orange-soft); color: #9A3F12; padding: 8px 0; }
.class-date b { display: block; font-size: 24px; line-height: 1.1; }
.class-date span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.class-body h3 { margin: 0 0 4px; }
.class-body .meta { color: var(--muted); font-size: 13.5px; }
.class-desc { margin-top: 8px; font-size: 14.5px; }
.class-desc p:last-child { margin-bottom: 0; }
.class-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.task-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.brief p:last-child { margin-bottom: 0; }
.feedback { border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 14.5px; }
.feedback p { margin: 6px 0 0; }
.fb-ok { background: var(--green-soft); color: #14532D; }
.fb-change { background: var(--amber-soft); color: #6B4E00; }
.task-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.task-form h3 { margin-bottom: 12px; }
.messages { display: flex; flex-direction: column; gap: 12px; }
.message { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow-sm); }
.message.unread { box-shadow: inset 3px 0 0 var(--orange), var(--shadow-sm); }
.message.important { border-color: #F2C4C0; }
.message-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.message-head h2 { font-size: 17px; margin: 0 0 2px; }
.message-body { margin-top: 10px; }
.message-body p:last-child { margin-bottom: 0; }
.portfolio-head { display: flex; gap: 20px; align-items: center; padding: 24px 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-bottom: 32px; }
.portfolio-head h2 { margin: 0 0 2px; font-size: 22px; }
.avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 750; font-size: 24px; letter-spacing: .02em; }
.pf-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 14px; color: var(--navy-2); }
.pf-work { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.pf-item { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-item h3 { margin: 0; }
.pf-note { font-size: 14px; color: var(--navy-2); background: var(--soft); border-radius: 8px; padding: 10px 12px; margin: 6px 0; }
.pf-note p:last-child { margin-bottom: 0; }
.ladder { list-style: none; margin: 20px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ladder li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 6px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.ladder b { color: var(--muted); font-weight: 650; }
.ladder-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #EEF1F4; color: var(--muted); font-weight: 750; font-size: 13px; margin-bottom: 4px; }
.ladder li.reached .ladder-dot { background: var(--green-soft); color: var(--green); }
.ladder li.reached b { color: var(--navy-2); }
.ladder li.current { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(233, 98, 36, .12); }
.ladder li.current .ladder-dot { background: var(--orange); color: #fff; }
.ladder li.current b { color: var(--navy); }
.review-item { padding: 14px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.review-item:first-of-type { border-top: 0; }
.review-item .card-top { display: flex; justify-content: space-between; gap: 10px; }

@media (max-width: 1080px) {
  .decks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* The portal menu becomes a scrollable row of chips above the page. */
  .portal-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .side { position: static; margin: 0 -16px; min-width: 0; }
  .side-nav { flex-direction: row; gap: 0; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-group { flex-direction: row; gap: 6px; padding-right: 6px; }
  .side-title { display: none; }
  .side-nav a { white-space: nowrap; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; }
  .side-nav a.active { background: var(--navy); color: #fff; box-shadow: none; border-color: var(--navy); }
  .decks { grid-template-columns: 1fr; gap: 14px; }
  .deck { min-height: 0; padding: 20px; }
  .class-card { grid-template-columns: 56px minmax(0, 1fr); }
  .class-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .task-layout { grid-template-columns: 1fr; }
  .portfolio-head { flex-direction: column; align-items: flex-start; padding: 20px; }
  .pf-work { grid-template-columns: 1fr; }
  .done-list { columns: 1; }
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .side { display: none !important; }
  .portal-layout { display: block; }
}

/* IT > User administration: per-portal access */
.access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 24px; }
/* IT > Administration > User Privilege: four choices beside a page name such as
   "Recruitment Dashboard", where the portal grid above has three beside "HR". */
.access-grid-wide { grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); }
/* Grid, not space-between: the second column is sized to the choices, which are
   identical on every row, so every control lines up however long the page name is.
   With flex they did not -- .seg has overflow:hidden, so a long name squeezed the
   control and clipped the last choice ('Admin') rather than wrapping the name. */
.access-grid-wide .access-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
/* The top-level switch sits at the right of a portal's summary line. The marker
   and the name stay on the left; the button is pushed over by the auto margin. */
.pv-portal-actions { margin-left: auto; display: inline-flex; gap: 6px; }
/* A class rather than :has(), so the button is still placed on a browser that
   does not support it -- this is an admin screen, not a progressive nicety. */
summary.pv-portal-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; list-style: none; }
summary.pv-portal-summary::-webkit-details-marker { display: none; }
summary.pv-portal-summary::before { content: '\25B8'; display: inline-block; transition: transform .15s; color: var(--muted); }
details[open] > summary.pv-portal-summary::before { transform: rotate(90deg); }
/* On a phone the page name and its four choices do not fit on one line, and the
   choices do not wrap, so the row would widen the whole page. Stack them. */
@media (max-width: 620px) {
  /* One column, and no 430px floor: a fieldset will not shrink below its
     content, so an auto-fill minimum wider than the phone widens the page. */
  .access-grid-wide { grid-template-columns: 1fr; }
  .access-grid-wide .access-row { grid-template-columns: 1fr; justify-items: start; row-gap: 6px; }
}
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
/* The choices are never squeezed: .seg clips (overflow:hidden), so a long page
   name used to eat the last one instead of wrapping itself. */
.access-row .seg { flex: 0 0 auto; }
.access-name { font-weight: 650; color: var(--navy-2); font-size: 14px; min-width: 0; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: #fff; }
.seg label { margin: 0; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--muted); border-left: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
.seg label:first-child span { border-left: 0; }
.seg input:checked + span { background: var(--navy); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: -2px; }
.seg input:disabled + span { opacity: .45; cursor: not-allowed; }
.seg input:disabled { cursor: not-allowed; }
.access-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tag-off { text-decoration: line-through; }
.data td .row-actions { flex-wrap: nowrap; }

/* Tools > ID & business cards */
.card-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.card-preview { position: sticky; top: 88px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.preview-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.preview-sides { display: grid; grid-template-columns: 1fr; gap: 14px; }
.preview-sides.is-portrait { grid-template-columns: 1fr 1fr; }
.preview-sides figure { margin: 0; text-align: center; }
.preview-sides img { width: 100%; height: auto; display: block; border-radius: 8px; background: repeating-conic-gradient(#EEF1F4 0% 25%, #fff 0% 50%) 50% / 16px 16px; box-shadow: 0 1px 2px rgba(16,42,67,.12), 0 6px 18px rgba(16,42,67,.10); }
.preview-sides img:not([src]) { aspect-ratio: 1125 / 675; }
.preview-sides.is-portrait img:not([src]) { aspect-ratio: 709 / 1082; }
.preview-sides figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.photo-tune { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin-top: 10px; }
.photo-tune label { margin: 0; font-weight: 600; }
.ai-box { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }
.ai-box table { margin: 8px 0; }
.ai-box ul { margin: 6px 0; padding-left: 18px; }
.order-card { display: flex; gap: 8px; align-items: baseline; font-weight: 400; color: var(--ink); font-size: 14px; }
.order-list li { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.order-list li:first-child { border-top: 0; }
input[type=range] { width: 100%; accent-color: var(--orange); }
@media (max-width: 1080px) { .card-builder { grid-template-columns: 1fr; } .card-preview { position: static; } }

/* Teacher programme (teach.ai2n.ai) */
.auth-alt { margin: 18px 0 6px; text-align: center; }
.level-list { display: grid; gap: 16px; margin-top: 16px; }
.level-panel .level-head { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.level-panel .level-badge { flex-basis: 48px; height: 48px; font-size: 22px; }
.level-panel h3 { font-size: 15px; margin: 8px 0 4px; }
.level-panel .row-actions { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.guide .notice, .page-head + .notice { margin-bottom: 16px; }
.auth-forgot { margin: 10px 0 0; text-align: right; font-size: 14px; }

/* Sales portal */
.queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.queue li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.timeline li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline li.done b { color: var(--muted); }
.funnel { display: grid; gap: 8px; margin-bottom: 10px; }
.funnel-row { display: grid; grid-template-columns: 150px 1fr 160px; gap: 12px; align-items: center; color: inherit; text-decoration: none; font-size: 14px; }
.funnel-bar { height: 12px; background: var(--soft); border-radius: 6px; overflow: hidden; }
.funnel-bar i { display: block; height: 100%; background: var(--orange); border-radius: 6px; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.board-col { background: var(--soft); border-radius: var(--radius); padding: 10px; min-height: 160px; display: flex; flex-direction: column; gap: 8px; }
.board-head { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 6px; }
.deal-card { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); }
.deal-card:hover { border-color: var(--navy-2); }
.deal-meta { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.deal-meta .overdue { color: var(--red); }
.stepper { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0 0 18px; counter-reset: st; }
.stepper li { flex: 1 1 100px; text-align: center; font-size: 12.5px; font-weight: 600; padding: 7px 6px; background: var(--soft); color: var(--muted); border-radius: 6px; }
.stepper li.done { background: var(--green-soft); color: var(--green); }
.stepper li.current { background: var(--navy); color: #fff; }
.stepper li.current.lost { background: var(--red); }
.stepper li.current.won { background: var(--green); }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px; }
.quote-lines input, .quote-lines select { width: 100%; min-width: 0; }
.quote-totals { display: grid; justify-content: end; gap: 4px; margin-top: 14px; font-size: 14px; }
.quote-totals div { display: grid; grid-template-columns: 140px 160px; text-align: right; gap: 12px; }
.quote-totals .grand { font-size: 16px; color: var(--navy); border-top: 1px solid var(--line); padding-top: 6px; }
.add-box { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.add-box > summary { cursor: pointer; font-weight: 650; color: var(--navy-2); }
.dup-list { margin: 8px 0 10px; padding-left: 18px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-list .chip { cursor: default; display: inline-flex; gap: 6px; align-items: center; }
.link-btn { background: none; border: 0; color: var(--orange); font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }
.link-btn { min-height: 24px; padding-block: 3px; }
input[type=file] { min-height: 24px; }
.flash-x { min-width: 24px; min-height: 24px; }
label.check { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; }
.act-form textarea { width: 100%; }
@media (max-width: 720px) {
  .funnel-row { grid-template-columns: 1fr; gap: 4px; }
  .quote-totals div { grid-template-columns: 1fr 1fr; }
  .timeline li { grid-template-columns: auto 1fr; }
  .timeline li > .btn { grid-column: 2; justify-self: start; }
}
a.chip { text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }

/* HR lists: each row reads top to bottom (title and tags, then details and forms). */
.timeline.hr-list li { display: block; }
.timeline.hr-list li > details, .timeline.hr-list li > div { margin-top: 6px; }
.timeline.hr-list .tag { margin-left: 4px; }

/* HR joining documents: instructions box and the typed list (like a university upload page). */
.doc-instructions { background: #EAF6EF; border: 1px solid #9FD3B4; color: #14532D; border-radius: 6px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; }
.doc-instructions p { margin: 0 0 6px; }
.doc-list { border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px; margin: 0; }
.doc-list legend { font-weight: 650; color: var(--navy); padding: 0 6px; }
.doc-opt { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.doc-opt:last-child { border-bottom: 0; }
.doc-opt input { width: auto; margin-top: 4px; }
.doc-opt > span { display: grid; gap: 2px; }
.doc-desc { font-style: italic; color: var(--muted); font-size: 13px; }
.file-icon { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; background: var(--red); border-radius: 3px; padding: 1px 4px; vertical-align: 1px; }

/* HR time: attendance calendar, team grid, approval rows */
.att-today { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.att-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.att-head { font-size: 12px; font-weight: 650; color: var(--muted); text-align: center; }
.att-cell { min-height: 66px; border-radius: 8px; padding: 6px; display: grid; align-content: start; gap: 2px; border: 1px solid var(--line); font-size: 13px; }
.att-cell b { font-size: 16px; }
.att-d { font-size: 11px; opacity: .8; }
.att-t { font-size: 11px; }
.att-late { font-style: normal; font-size: 10px; font-weight: 700; color: var(--red); }
.att-key { display: inline-block; min-width: 18px; text-align: center; border-radius: 4px; padding: 0 4px; font-weight: 700; }
.att-table td.att-c, .att-table th { text-align: center; padding: 4px 2px; font-size: 12px; min-width: 22px; }
.att-table td.att-c { cursor: default; font-weight: 700; }
.att-table td.att-c[data-fix] { cursor: pointer; }
.approval-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.approval-row:last-child { border-bottom: 0; }
@media (max-width: 700px) { .att-cell { min-height: 48px; font-size: 11px; } .att-t { display: none; } }

/* Sales: school picker (leads come from the school master) */
.school-pick { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--soft); }
.sp-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sp-results { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.sp-results button { width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font: inherit; color: inherit; }
.sp-results button:hover, .sp-results button:focus-visible { border-color: var(--orange); }
.sp-new h3 { margin: 0 0 8px; }
.tag-amber { background: var(--amber-soft); color: #8A4B00; }

/* Sales: school classification (board, tier) */
.tag-board { background: #EEF2FF; color: #3730A3; }
.stier-premium { background: #FDF0EA; color: #B4441A; }
.stier-standard { background: #E8F5EE; color: #1F7A4D; }
.stier-budget { background: var(--soft); color: var(--muted); }
.class-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.class-box legend { font-weight: 650; padding: 0 6px; }

/* Expandable-group menu (Sales): groups open and close; narrow screens get a rail of group icons.
   Items sit 24px in from the group's edge, in line with the group title. */
.portal-layout:has(.gnav) { grid-template-columns: 248px minmax(0, 1fr); }
.side:has(.gnav) { z-index: 20; }
.gnav { display: flex; flex-direction: column; gap: 4px; }
.gnav-group { position: relative; }
.gnav-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 700; color: var(--navy); text-align: left; transition: background .15s; }
.gnav-head:hover { background: #fff; box-shadow: var(--shadow-sm); }
.gnav-head:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.gnav-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.gnav-group.has-active .gnav-icon { color: var(--orange); }
.gnav-title { flex: 1; }
.gnav-caret { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .18s ease; margin-right: 2px; }
.gnav-group.open .gnav-caret { transform: rotate(45deg); }
.gnav-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .18s ease; }
.gnav-group.open .gnav-body { grid-template-rows: 1fr; }
.gnav-items { overflow: hidden; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.gnav-items a { padding: 7px 10px 7px 36px; font-size: 14px; }
.gnav-items a .soon-mini { flex: 0 0 auto; }
/* Links indented under one menu item (PMO > Status Reports > each report). */
.gnav-items a.gnav-sub { padding: 5px 10px 5px 50px; font-size: 13px; }
.card.card-picked { box-shadow: 0 0 0 2px var(--orange); }
.gnav-group.open .gnav-items { padding: 2px 0 6px; }
.side-nav .gnav-items a.active { background: var(--orange-soft); color: var(--navy); box-shadow: inset 3px 0 0 var(--orange); }
.soon-mini { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; }
.gnav-flyout-title { display: none; }
@media (prefers-reduced-motion: reduce) { .gnav-body, .gnav-caret { transition: none; } }

/* A menu longer than the window used to scroll up with the page, because a
   sticky box taller than the viewport only sticks once its bottom is reached.
   Its first groups ended up behind the topbar and out of reach. Give it its
   own scroll area so it always starts below the header and every item stays
   reachable. Only above the rail breakpoint: the rail flyouts are positioned
   outside the menu box and a scroll container would clip them. */
@media (min-width: 1101px) {
  .side:has(.gnav) { max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
}
@media (max-width: 1100px) {
  /* Rail: one icon per group (tooltip = its name); its pages open in a flyout. */
  .portal-layout:has(.gnav) { grid-template-columns: 56px minmax(0, 1fr); gap: 20px; }
  .side:has(.gnav) { margin: 0; }
  .side-nav:has(.gnav) { flex-direction: column; overflow: visible; padding: 0; }
  .gnav { gap: 6px; }
  .gnav-head { width: 48px; height: 44px; justify-content: center; padding: 0; background: #fff; border: 1px solid var(--line); }
  .gnav-group.has-active .gnav-head { border-color: var(--orange); background: var(--orange-soft); }
  .gnav-title, .gnav-caret { display: none; }
  .gnav-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .gnav-head[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 56px; top: 50%; transform: translateY(-50%); background: var(--navy); color: #fff;
    font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 5px 9px; border-radius: 6px; z-index: 30; pointer-events: none; }
  .gnav-group.flyout .gnav-head[data-tip]:hover::after { display: none; }
  .gnav-body, .gnav-group.open .gnav-body { display: none; }
  /* max-height and top come from placeFlyout() in app.js, which measures the
     group against the window; the scrolling here is what makes a bounded
     flyout usable rather than merely clipped. */
  .gnav-group.flyout .gnav-body { display: block; position: absolute; left: 56px; top: 0; z-index: 40; min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
  .gnav-group.flyout .gnav-items { overflow: visible; padding: 0; }
  .gnav-flyout-title { display: block; font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 4px 10px 6px; }
  .side-nav .gnav-items a { padding: 8px 10px; background: none; border: 0; border-radius: 6px; white-space: normal; font-size: 14px; color: var(--navy-2); }
  .side-nav .gnav-items a.active { background: var(--orange-soft); color: var(--navy); box-shadow: inset 3px 0 0 var(--orange); }
  .side-nav .gnav-items a.gnav-sub { padding: 6px 10px 6px 24px; font-size: 13px; }
}
@media (max-width: 860px) {
  /* Phones: the rail runs across the top; flyouts drop below their icon. */
  .portal-layout:has(.gnav) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .side:has(.gnav) { position: static; }
  .gnav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .gnav-head[data-tip]:hover::after { left: 50%; top: 50px; transform: translateX(-50%); }
  .gnav-group.flyout .gnav-body { left: 0; top: 50px; min-width: min(260px, calc(100vw - 32px)); }
  .gnav-group:nth-last-child(-n+2).flyout .gnav-body { left: auto; right: 0; }
}

/* Employee workspace modules: library, requests, people, apps, rooms, payroll */
.lib-grid .lib-card h3 { font-size: 15.5px; }
.lib-thumb { height: 110px; border-radius: 8px; background: var(--soft); display: grid; place-items: center; overflow: hidden; }
.lib-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.article { line-height: 1.65; }
.article h2, .article h3, .article h4 { margin: 18px 0 8px; color: var(--navy); }
.article h2:first-child, .article h3:first-child { margin-top: 0; }
.article ul, .article ol { padding-left: 22px; }
.article li { margin-bottom: 4px; }
.timeline li.ev-internal { background: var(--amber-soft); border-radius: 8px; padding: 6px 8px; }
.person-top { display: flex; gap: 12px; align-items: center; }
.avatar-sm { width: 44px; height: 44px; font-size: 16px; }
.person-card h3 { font-size: 15.5px; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 8px; }
.app-tile { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.app-tile.app-hidden { opacity: .55; }
.app-link { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.app-link span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-link:hover b { color: var(--orange); }
.app-icon { flex: none; width: 42px; height: 42px; border-radius: 10px; color: #fff; display: grid; place-items: center; font-weight: 750; font-size: 15px; }
.app-admin { display: flex; gap: 10px; }
.room-scale { display: grid; grid-template-columns: 200px repeat(5, 1fr) 0; font-size: 11px; color: var(--muted); padding-left: 0; margin-bottom: 4px; }
.room-scale span:first-child { grid-column: 2; }
.room-row { display: grid; grid-template-columns: 200px 1fr; gap: 0; align-items: center; border-top: 1px solid var(--line); padding: 8px 0; }
.room-name { display: flex; flex-direction: column; padding-right: 12px; min-width: 0; }
.room-track { position: relative; height: 34px; background: repeating-linear-gradient(90deg, var(--soft) 0, var(--soft) calc(100% / 15 - 1px), #fff calc(100% / 15 - 1px), #fff calc(100% / 15)); border-radius: 6px; }
.room-booking { position: absolute; top: 3px; bottom: 3px; background: var(--navy); color: #fff; border-radius: 5px; font-size: 11.5px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 28px; }
.room-booking.mine { background: var(--orange); }
.slab-table input { max-width: 160px; }
.stat-good { border-color: var(--green-soft); background: var(--green-soft); }
@media (max-width: 700px) {
  .room-scale { display: none; }
  .room-row { grid-template-columns: 1fr; gap: 6px; }
}
.filters select { width: auto; max-width: 240px; }
.page-head .row-actions input[type=date] { width: auto; }

/* Department decks */
.deck-finance { --deck: #2E7D32; --deck-soft: #E8F5E9; }
.deck-legal { --deck: #6D4C41; --deck-soft: #F3ECE9; }
.deck-operations { --deck: #B26A00; --deck-soft: #FFF3E0; }
.deck-marketing { --deck: #C2185B; --deck-soft: #FCE4EC; }
.deck-pmo { --deck: #3949AB; --deck-soft: #E8EAF6; }
.deck-arb { --deck: #455A64; --deck-soft: #ECEFF1; }
.deck-rnd { --deck: #00838F; --deck-soft: #E0F7FA; }
.deck-academics { --deck: #5E35B1; --deck-soft: #EDE7F6; }
.nav-more { position: relative; }
.nav-more > summary { list-style: none; cursor: pointer; color: var(--muted); padding: 8px 12px; border-radius: 6px; font-weight: 600; font-size: 14.5px; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.nav-more > summary:hover, .nav-more[open] > summary, .nav-more.active > summary { color: var(--navy); background: var(--soft); }
.nav-more.active > summary { box-shadow: inset 0 -2px 0 var(--orange); border-radius: 0; background: none; }
.nav-more-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 270px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; }
.mainnav .nav-more-menu a { padding: 9px 12px; border-radius: 6px; white-space: nowrap; }
.mainnav .nav-more-menu a.active { box-shadow: inset 3px 0 0 var(--orange); background: var(--orange-soft); border-radius: 6px; }
@media (max-width: 860px) { .nav-more-menu { position: fixed; top: auto; left: 16px; right: 16px; } }

/* Department training and portal guides */
.dept-card h3 { font-size: 16px; }
.card-soon { opacity: .6; border-style: dashed; }
.dept-jump .chip { text-decoration: none; }
.guide { margin-bottom: 12px; padding: 0; }
.guide > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; font-weight: 700; color: var(--navy); }
.guide > summary::-webkit-details-marker { display: none; }
.guide > summary::after { content: '+'; font-size: 20px; color: var(--muted); margin-left: 8px; }
.guide[open] > summary::after { content: '\2212'; }
.guide > summary > span:first-child { flex: 1; }
.guide-body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.guide-body h3 { margin: 18px 0 10px; font-size: 15px; }
.guide-table td { vertical-align: top; font-size: 13.5px; }
.guide-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.guide-task { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: #fff; }
.guide-task h4, .flow-block h4 { margin: 0 0 8px; font-size: 14px; }
.guide-task ol { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.55; }
.flow-block { margin-bottom: 14px; }
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 26px; }
.flow-step { position: relative; flex: 0 1 150px; min-width: 120px; border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: 8px; background: #fff; padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.flow-step + .flow-step::before { content: '\2192'; position: absolute; left: -21px; top: 50%; transform: translateY(-50%); color: var(--orange); font-weight: 700; font-size: 16px; }
.flow-n { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; }
.flow-who { color: var(--muted); font-size: 12px; }
@media (max-width: 700px) {
  .flow { flex-direction: column; gap: 22px; }
  .flow-step { flex: none; }
  .flow-step + .flow-step::before { content: '\2193'; left: 50%; top: -19px; transform: translateX(-50%); }
}

/* Home hub, polished (13 Oct 2026): welcome band, live portals, planned departments */
/* The deck is sized to its contents, not to half the hero. It carries two task
   lines and a short notice list, so at 1.5fr it ran most of the way across with
   dead space down the right-hand side. Capped and right-aligned; the greeting
   takes the room that frees up. */
.hub-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 360px); gap: 28px; align-items: center; padding: 34px 36px; margin-bottom: 30px; border-radius: 20px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(233, 98, 36, .28) 0%, rgba(233, 98, 36, 0) 45%), linear-gradient(135deg, #0B2036 0%, #102A43 55%, #1B3A5C 100%); box-shadow: 0 18px 40px rgba(16, 42, 67, .18); }
.hub-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent 0%, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); pointer-events: none; }
.hub-hero > * { position: relative; }
.hub-date { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #F8B48F; margin-bottom: 10px; }
.hub-hero h1 { color: #fff; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 8px; }
.hub-hero p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 15px; }
.hub-today { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 16px 18px; backdrop-filter: blur(6px); }
.hub-today-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 8px; }
.hub-today ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.hub-today li { position: relative; padding-left: 14px; font-size: 14px; color: #fff; }
.hub-today li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.hub-today p { font-size: 14px; margin-bottom: 10px; }
.hub-today a { color: #F8B48F; font-size: 13px; font-weight: 650; text-decoration: none; }
.hub-today a:hover { text-decoration: underline; }
.hub-section { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 14px; }
.hub-section h2 { font-size: 13px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-2); margin: 0; }
.hub-section span { font-size: 13px; color: var(--muted); }
.decks + .hub-section { margin-top: 34px; }
.deck { gap: 6px; padding: 22px 22px 18px; min-height: 0; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16, 42, 67, .04); transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.deck::after { content: ""; position: absolute; inset: 0 0 auto 0; right: 0; bottom: auto; width: auto; height: 3px; border-radius: 0; background: var(--deck); opacity: 0; transition: opacity .25s ease; }
.deck::before { content: ""; position: absolute; top: -70px; right: -70px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--deck-soft) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.deck:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 2px 4px rgba(16, 42, 67, .04), 0 16px 36px rgba(16, 42, 67, .10); }
.deck:hover::after, .deck:focus-visible::after { opacity: 1; }
.deck-learning { border-color: var(--line); }
.deck-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.deck-icon { width: 44px; height: 44px; border-radius: 12px; margin: 0; background: var(--deck-soft); color: var(--deck); box-shadow: inset 0 0 0 1px rgba(16, 42, 67, .04); }
.deck-icon svg { width: 22px; height: 22px; }
.deck-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.deck-name { font-size: 19px; font-weight: 750; letter-spacing: -.015em; }
.deck-blurb { font-size: 14px; line-height: 1.5; }
.deck-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); font-weight: 500; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line); }
.deck-foot { padding-top: 12px; }
.deck-open { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--deck); }
.deck-open svg { transition: transform .25s ease; }
.deck:hover .deck-open svg { transform: translateX(3px); }
.decks-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.deck-mini { --deck: var(--navy); --deck-soft: #E6EDF5; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.deck-mini:hover { background: #fff; border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(16, 42, 67, .07); }
.deck-mini .deck-icon { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.deck-mini .deck-icon svg { width: 18px; height: 18px; }
.deck-mini-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.deck-mini-name { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.deck-mini-meta { font-size: 12px; color: var(--muted); }
.deck-mini-tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
@media (max-width: 900px) {
  .hub-hero { grid-template-columns: 1fr; padding: 28px 24px; }
  .hub-hero h1 { font-size: 28px; }
}
@media (max-width: 640px) {
  .hub-hero { padding: 24px 20px; border-radius: 16px; margin-bottom: 24px; }
  .hub-hero h1 { font-size: 25px; }
  .hub-section { flex-direction: column; gap: 2px; }
  .deck { padding: 16px 16px 14px; }
  .deck-top { margin-bottom: 2px; }
  .deck-icon { width: 38px; height: 38px; }
  .deck-name { font-size: 17px; }
  .deck-note { display: none; }
  .deck-foot { padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .deck, .deck-open svg, .deck-mini { transition: none; } .deck:hover { transform: none; } }

/* Learner guide reader (Microsoft Learn style) */
.app:has(> .rd) { max-width: 1440px; padding-top: 0; }
.rd { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 40px; align-items: start; }
.rd.rd-nav-hidden { grid-template-columns: minmax(0, 1fr); }
.rd.rd-nav-hidden .rd-nav { display: none; }
.rd-nav { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; border-right: 1px solid var(--line); padding: 20px 14px 0 0; }
.rd-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rd-nav-title { font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rd-icon-btn { border: 1px solid transparent; background: transparent; border-radius: 6px; width: 32px; height: 32px; font-size: 16px; color: var(--navy-2); cursor: pointer; display: inline-grid; place-items: center; }
.rd-icon-btn:hover { background: var(--soft); border-color: var(--line); }
.rd-filter input { width: 100%; padding: 8px 10px 8px 32px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; font-size: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23627D98' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3C/svg%3E") no-repeat 9px center; }
.rd-filter input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.rd-nav-scroll { flex: 1; overflow-y: auto; margin: 12px -4px 0 0; padding-right: 4px; }
.rd-tree, .rd-tree ul { list-style: none; margin: 0; padding: 0; }
.rd-tree ul { display: none; padding-left: 26px; }
.rd-tree li.open > ul { display: block; }
.rd-row { display: flex; align-items: flex-start; }
.rd-twisty, .rd-twisty-gap { flex: none; width: 22px; height: 30px; }
.rd-twisty { border: 0; background: transparent; cursor: pointer; position: relative; }
.rd-twisty::before { content: ""; position: absolute; left: 7px; top: 11px; width: 6px; height: 6px; border-right: 1.6px solid var(--navy-2); border-bottom: 1.6px solid var(--navy-2); transform: rotate(-45deg); transition: transform .15s; }
.rd-tree li.open > .rd-row .rd-twisty::before { transform: rotate(45deg); top: 9px; }
.rd-link { display: block; flex: 1; padding: 6px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.4; }
.rd-tree > li > a.rd-link { margin-left: 22px; }
.rd-link:hover { background: var(--soft); color: var(--navy); }
.rd-link.active { background: var(--soft); color: var(--navy); font-weight: 650; box-shadow: inset 3px 0 0 var(--orange); }
.rd-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.rd-download { margin: 10px 0 0; padding: 14px 10px 18px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; font: inherit; font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer; display: flex; gap: 8px; align-items: center; }
.rd-download:hover { color: var(--orange); }
.rd-main { --rd-size: 17px; min-width: 0; max-width: 860px; padding-top: 18px; }
.rd-top { position: sticky; top: 64px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; background: rgba(245, 247, 250, .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.rd-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; min-width: 0; }
.rd-crumbs a { color: var(--navy-2); text-decoration: none; }
.rd-crumbs a:hover { color: var(--orange); text-decoration: underline; }
.rd-crumbs span { color: var(--muted); }
.rd-show { display: none; }
.rd.rd-nav-hidden .rd-show { display: inline-grid; }
.rd-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.rd-size { border: 1px solid var(--line-strong); background: #fff; border-radius: 6px; height: 32px; min-width: 40px; padding: 0 8px; font: inherit; font-weight: 700; color: var(--navy); cursor: pointer; }
.rd-size[data-size="-1"] { font-size: 13px; }
.rd-size[data-size="1"] { font-size: 17px; }
.rd-size span { font-size: .8em; margin-left: 1px; }
.rd-size:hover { border-color: var(--navy); }
.rd-size-val { min-width: 44px; text-align: center; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rd-head h1 { font-size: calc(var(--rd-size) * 2.1); line-height: 1.18; letter-spacing: -.02em; margin: 6px 0 10px; color: var(--ink); }
.rd-lede { font-size: calc(var(--rd-size) * 1.08); color: var(--navy-2); margin: 0 0 12px; }
.rd-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--muted); padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.rd-draft { background: var(--amber-soft); color: #5C4813; border-radius: 999px; padding: 0 9px; }
.rd-body { font-size: var(--rd-size); line-height: 1.7; color: var(--ink); }
.rd-body p { margin: 0 0 1em; }
.rd-body ul, .rd-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.rd-body li { margin-bottom: .35em; }
.rd-body code { font-family: Consolas, "Courier New", monospace; font-size: .9em; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3em; }
.rd-sec { padding-top: 26px; scroll-margin-top: 130px; }
.rd-sec > h2 { font-size: 1.55em; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); margin: 0 0 .7em; padding-top: 6px; }
.rd-sub { scroll-margin-top: 130px; }
.rd-body h3 { font-size: 1.2em; color: var(--ink); margin: 1.4em 0 .5em; }
.rd-body h4 { font-size: 1.05em; color: var(--navy); margin: 1.2em 0 .4em; }
.rd-level { display: inline-block; vertical-align: middle; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--navy-2); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; margin-left: 6px; }
.rd-body blockquote { margin: 0 0 1.1em; padding: .4em 1em; border-left: 4px solid var(--line-strong); color: var(--navy-2); font-style: italic; }
.rd-note { display: flex; gap: 12px; margin: 0 0 1.1em; padding: .85em 1em; border-radius: 8px; background: #EAF3FB; border-left: 4px solid #2563A8; font-size: .95em; }
.rd-note-warn { background: var(--amber-soft); border-left-color: #C77700; }
.rd-note-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #2563A8; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; font-style: normal; margin-top: .15em; }
.rd-note-warn .rd-note-icon { background: #C77700; }
/* Codelabs (tracks RC and SD): code to type, block programs to build, check your work. */
.rd-minutes { display: inline-block; vertical-align: middle; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; margin-left: 6px; }
.rd-code { margin: 0 0 1.2em; border: 1px solid #1F2A37; border-radius: 8px; overflow: hidden; background: #111827; }
.rd-code figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 12px; background: #1F2A37; color: #CBD5E1; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.rd-copy { font: inherit; color: #E2E8F0; background: transparent; border: 1px solid #475569; border-radius: 6px; padding: 2px 10px; cursor: pointer; }
.rd-copy:hover { background: #334155; }
.rd-code pre { margin: 0; padding: 12px 14px; overflow-x: auto; }
/* .rd-body code is the inline-code pill; inside a panel it would box every line. */
.rd-body .rd-code code { display: block; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .86em; line-height: 1.6; color: #E5E7EB; white-space: pre; background: none; border: 0; border-radius: 0; padding: 0; }
.rd-code-blocks { background: #1D232E; border-color: #2E3846; }
.rd-code-blocks figcaption { background: #252C39; }
.rd-body .rd-code-blocks code { color: #FDE68A; }
.rd-checkwork { margin: 0 0 1.2em; padding: .85em 1.1em; border-radius: 8px; background: #ECF8F1; border-left: 4px solid #1F8A4C; }
.rd-checkwork h4 { margin: 0 0 .4em; color: #17663A; }
.rd-checkwork ul { list-style: none; margin: 0; padding: 0; }
.rd-checkwork li { margin: .3em 0; }
.rd-checkwork label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 1em; font-weight: 400; color: inherit; margin: 0; }
.rd-checkwork input { margin-top: .3em; accent-color: #1F8A4C; }
@media print {
  .rd-copy { display: none; }
  .rd-code, .rd-code-blocks { background: #fff; border-color: #999; }
  .rd-code figcaption { background: #eee; color: #000; }
  .rd-body .rd-code code, .rd-body .rd-code-blocks code { color: #000; white-space: pre-wrap; }
}
.rd-table-wrap { margin: 0 0 1.2em; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.rd-table { width: 100%; border-collapse: collapse; font-size: .88em; line-height: 1.5; }
.rd-table th { text-align: left; background: var(--navy); color: #fff; font-weight: 650; padding: 10px 12px; vertical-align: bottom; }
.rd-table td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.rd-table tbody tr:nth-child(even) td { background: #F7F9FC; }
.rd-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 1.1em; }
.rd-do, .rd-dont { border-radius: 10px; padding: .8em 1em; border: 1px solid var(--line); }
.rd-do { background: var(--green-soft); }
.rd-dont { background: var(--red-soft); }
.rd-do h4 { color: var(--green); margin-top: 0; }
.rd-dont h4 { color: var(--red); margin-top: 0; }
.rd-check { list-style: none; padding-left: 0 !important; }
.rd-check li { position: relative; padding-left: 1.6em; }
.rd-check li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.rd-pre { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 1em; }
.rd-pre > div { background: var(--soft); border-radius: 10px; padding: .7em 1em; font-size: .92em; }
.rd-pre ul { margin: .3em 0 0; }
.rd-duration { display: flex; flex-wrap: wrap; gap: 10px; margin: .4em 0 1em; }
.rd-duration div { border: 1px solid var(--line); border-radius: 10px; padding: .5em .9em; display: flex; flex-direction: column; background: #fff; }
.rd-duration span { font-size: .75em; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rd-duration b { font-size: .95em; color: var(--navy); }
.rd-end { margin: 40px 0 20px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
  .rd { grid-template-columns: minmax(0, 1fr); }
  .rd-nav { position: fixed; z-index: 30; top: 64px; left: 0; bottom: 0; width: min(320px, 86vw); height: auto; background: #fff; padding: 16px; box-shadow: 0 10px 40px rgba(16, 42, 67, .2); }
  .rd-show { display: inline-grid; }
  .rd-tools .btn { display: none; }
  .rd-top { flex-wrap: wrap; }
  .rd-dos { grid-template-columns: 1fr; }
  .rd-head h1 { font-size: calc(var(--rd-size) * 1.6); }
  .rd-sec > h2 { font-size: 1.35em; }
}
@media print {
  .topbar, .rd-nav, .rd-top, .rd-end, footer { display: none !important; }
  .rd { display: block; }
  .rd-main { max-width: none; }
  .rd-sec { break-inside: auto; }
  .rd-table th { background: #102A43 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* HR holiday calendar: a state's government list (summary beside the button, source and notes folded away). */
.hol-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hol-list-head h2 { margin-bottom: 4px; }
.hol-list-head p { margin: 0; }
.hol-list-head .btn { flex-shrink: 0; }
.hol-details { margin-top: 10px; }
.hol-details summary { cursor: pointer; font-weight: 650; color: var(--navy-2); font-size: 13.5px; }
.hol-details p { margin: 8px 0 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .hol-list-head { flex-direction: column; } }

/* Legal & Compliance */
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.plain li:last-child { border-bottom: 0; }
.plain a { text-decoration: none; }
.attention li a { display: block; }
.stack { display: grid; gap: 8px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--soft); }
.notice.warn { background: var(--amber-soft); border-color: #F0D58A; }
.legal-doc { max-width: 760px; margin: 0 auto; padding: 8px 4px; font-size: 14.5px; line-height: 1.65; text-align: justify; }
.legal-doc .ag-title { text-align: center; font-size: 22px; color: var(--navy); margin: 8px 0 18px; }
.legal-doc .ag-h { font-size: 15px; color: var(--navy); margin: 18px 0 4px; text-align: left; }
.legal-doc p { margin: 0 0 8px; }
.legal-doc .ag-li { padding-left: 18px; text-indent: -12px; }
.legal-doc .ag-sub { padding-left: 24px; }
.legal-doc .ag-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; text-align: left; }
.legal-doc .ag-table th, .legal-doc .ag-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.legal-doc .ag-table th { background: var(--soft); }
.legal-doc .ag-table .r { text-align: right; }
.legal-doc .ag-table .tot td { font-weight: 600; }
.legal-doc .ag-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; text-align: left; }
.legal-doc .ag-sig { border-top: 1px solid var(--line-strong); padding-top: 8px; }
.legal-doc .ag-sig-for { font-weight: 650; color: var(--navy); }
.legal-doc .ag-sig-open { color: var(--muted); font-style: italic; margin-top: 8px; }
.legal-doc .ag-sig-done { margin-top: 8px; }
@media (max-width: 640px) { .legal-doc .ag-sigs { grid-template-columns: 1fr; } }
.sign-wrap { max-width: 860px; margin: 0 auto; padding: 24px 16px 60px; }
.sign-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sign-head img { height: 34px; }
.sign-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 18px; }
.sign-doc { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: #fff; }
.sign-steps { display: grid; gap: 12px; }
.sign-code { letter-spacing: .4em; font-size: 22px; text-align: center; max-width: 220px; }

/* Confirmation banner after a submission */
.flash { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid #BFE3CF; background: var(--green-soft); color: #14532D; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.flash b { display: block; font-size: 15px; }
.flash > div > div { margin-top: 2px; }
.flash-x { flex-shrink: 0; border: 0; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.flash-x:hover { opacity: .7; }
.flash-warn { border-color: #F0D58A; background: var(--amber-soft); color: #7A5200; }

/* ---------------------------------------------------------------------------------------------------------------
   Polish layer (22 Oct 2026). One card system for every department: one radius scale, one elevation, one spacing
   rhythm, accessible greys, tabular figures, and quieter status colours (an accent edge, not a filled block).
   --------------------------------------------------------------------------------------------------------------- */
:root {
  --muted: #52667E;           /* was #627D98: 3.99:1 on the canvas, now 5.4:1 (WCAG AA) */
  --orange-ink: #B8481A;      /* orange for small text (5.3:1); --orange stays for fills, bars and focus */
  --line: #E2E7ED;
  --line-strong: #CFD7E0;
  --canvas: #F3F5F8;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 42, 67, .05), 0 1px 3px rgba(16, 42, 67, .03);
  --shadow-hover: 0 2px 4px rgba(16, 42, 67, .05), 0 10px 24px rgba(16, 42, 67, .09);
  --gap: 20px;
}
body { background: var(--canvas); }

/* Small orange text meets contrast; orange fills are unchanged. */
.eyebrow, .motto-line, .motto-en, .question .qn, .obj-level, .link-btn, .cert-motto, .cert-brand span, .app-link:hover b, .rd-download:hover, .rd-crumbs a:hover, .guide-step:hover { color: var(--orange-ink); }
.guide-step:hover span:last-child { color: var(--muted); }

/* Figures line up in columns. */
.stat b, table.data td, .kv dd, .xp-chip, .side-badge, .tag, .quote-totals, .funnel-row, .exam-clock b { font-variant-numeric: tabular-nums; }

/* Page header: title block and actions share one baseline; a quiet rule closes the header. */
.page-head { align-items: flex-end; margin-bottom: 24px; }
.page-head h1 { margin-bottom: 6px; }
.page-head .row-actions { flex-wrap: wrap; }

/* Stat tiles: tiles in the last row stretch, so a row never ends with one orphan tile. Warnings get an accent edge. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 28px; }
/* Seven or eight tiles sit as two balanced rows of four rather than six plus an orphan pair. */
.stats:has(> :nth-child(7)):not(:has(> :nth-child(9))) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats > .stat { min-width: 0; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--radius); border-color: var(--line); background: #fff; position: relative; overflow: hidden; }
.stat b { font-size: 26px; font-weight: 750; line-height: 1.15; }
.stat span { font-size: 13px; font-weight: 550; color: var(--muted); line-height: 1.35; }
a.stat { color: inherit; transition: box-shadow .2s, border-color .2s, transform .2s; }
a.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.stat-warn, .stat-good { background: #fff; border-color: var(--line); }
.stat-warn { box-shadow: inset 3px 0 0 var(--red), var(--shadow-sm); }
.stat-warn span { color: #8C2F27; }
.stat-good { box-shadow: inset 3px 0 0 var(--green), var(--shadow-sm); }
.stat-good b { color: var(--green); }
a.stat-warn:hover { box-shadow: inset 3px 0 0 var(--red), var(--shadow-hover); }
a.stat-good:hover { box-shadow: inset 3px 0 0 var(--green), var(--shadow-hover); }
@media (prefers-reduced-motion: reduce) { a.stat:hover { transform: none; } }

/* Panels: one card, one header style; the first heading never adds space above it. */
.panel { border-radius: var(--radius); border-color: var(--line); padding: 20px 22px; margin-bottom: var(--gap); }
.panel > h2 { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.panel > h2:not(:first-child) { margin-top: 22px; }
.panel > h2 + p.muted, .panel > h2 + .muted { margin-top: -8px; }
.panel > h3:first-child, .panel > h2:first-child { margin-top: 0; }
.panel h4 { font-size: 14px; color: var(--navy); margin: 16px 0 6px; }
.panel > :last-child { margin-bottom: 0; }
.panel .table-wrap { box-shadow: none; }
.panel > .table-wrap:first-child, .panel > h2 + .table-wrap { margin-top: 0; }

/* Columns: the same gap between columns as between stacked panels, and stacks end flush. */
.two-col { gap: var(--gap); margin-bottom: var(--gap); }
.two-col > .panel, .two-col > div > .panel:last-child, .two-col > form.panel { margin-bottom: 0; }
.two-col > .panel:only-child { grid-column: 1 / -1; }
.two-col + .panel, .two-col + section { margin-top: 0; }
.grid { gap: 16px; }
.card { border-color: var(--line); }

/* Lists inside panels. */
.plain li { padding: 10px 0; }
.plain li:first-child { padding-top: 2px; }
.plain li:last-child { padding-bottom: 2px; }
.timeline li { padding-bottom: 12px; }

/* Tables: quieter header, steady row height, numbers right-aligned where marked. */
.table-wrap { border-radius: var(--radius); border-color: var(--line); }
table.data th { font-size: 11px; letter-spacing: .06em; padding: 10px 14px; color: var(--muted); background: #F7F9FB; }
table.data td { padding: 12px 14px; border-bottom-color: #EDF1F5; }
table.data tbody tr:hover td { background: #F8FAFC; }

/* Tags: one pill shape and weight. */
.tag { font-size: 11.5px; font-weight: 650; line-height: 1.7; padding: 0 9px; border-radius: 999px; vertical-align: 1px; }

/* Messages: one family. A light tint with a left accent edge, not a heavy full-width block. */
.notice, .draft-banner, .soon-banner, .flash, .error, .success, .doc-instructions, .feedback {
  border-radius: 10px; border: 1px solid transparent; padding: 12px 16px; font-size: 14px; line-height: 1.5;
}
.notice, .draft-banner, .soon-banner, .flash-warn, .fb-change { background: #FFFBEF; border-color: #F1E2B8; box-shadow: inset 3px 0 0 #D69E2E; color: #5C4813; }
.flash, .success, .doc-instructions, .fb-ok { background: #F1FAF5; border-color: #CBE8D7; box-shadow: inset 3px 0 0 var(--green); color: #14532D; }
.error { background: #FEF4F3; border-color: #F4CFCB; box-shadow: inset 3px 0 0 var(--red); color: #8C2F27; }
.flash b { font-size: 14.5px; }
.flash-warn { color: #6B4E00; }
.soon-banner { margin-bottom: 20px; color: var(--navy-2); }
.panel .error, .panel .success, .panel .notice { margin: 12px 0; }

/* Empty states. */
.empty { border-radius: var(--radius); border-color: var(--line-strong); padding: 28px; font-size: 14px; }

/* Controls: one height for fields and buttons. */
input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=date], input[type=time], input[type=datetime-local], input[type=number], input[type=tel], input[type=search], select { min-height: 40px; padding: 8px 12px; }
.btn { min-height: 40px; padding: 8px 16px; }
.btn-sm { min-height: 32px; padding: 5px 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(36, 59, 83, .14); }
.row-form { gap: 14px; }
label { color: var(--navy-2); }

/* Key-value blocks. */
.kv dt { font-size: 11.5px; letter-spacing: .05em; }
.kv dd { font-weight: 550; }

/* Side menu and top bar. */
.side-nav a { font-size: 14px; }
.side-title { font-size: 11px; }
.mainnav a, .nav-more > summary { font-size: 14px; }

@media (max-width: 860px) {
  .stats { gap: 10px; }
  .stats, .stats:has(> :nth-child(7)):not(:has(> :nth-child(9))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat b { font-size: 22px; }
  .panel { padding: 16px; }
  .two-col { gap: 16px; }
  .page-head { align-items: flex-start; }
}

/* My learning: the motto sits under the page description (owner, 22 Oct 2026). */
.head-motto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 10px; }
.head-motto-ta { font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1.35; }
.head-motto-en { font-size: 14.5px; font-weight: 650; color: var(--orange-ink); }

/* HR > My Interviews: phone first */
.iv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.iv-card { border: 1px solid var(--line, #E4E7EB); border-radius: 12px; padding: 14px; display: grid; gap: 6px; background: var(--card, #fff); }
.iv-head { font-size: 17px; }
.iv-when { font-size: 16px; }
.iv-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.iv-row .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.iv-day { margin: 16px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #52606D); }
.iv-owed { border-left: 4px solid var(--orange, #F26B21); }
.iv-conflict { border-top: 1px dashed var(--line, #E4E7EB); padding-top: 8px; }
.iv-score .row-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
.iv-score .row-form > div { grid-column: auto !important; }
.iv-score select, .iv-score textarea, .iv-score input { width: 100%; min-height: 44px; font-size: 16px; }
.iv-score .btn { min-height: 44px; }
@media (min-width: 700px) { .iv-list { grid-template-columns: repeat(2, 1fr); } }

/* Account menu under the person's name (staff workspace). */
.acct { position: relative; }
.acct > summary { list-style: none; }
.acct > summary::-webkit-details-marker { display: none; }
.acct-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; color: var(--navy-2); font-weight: 600; font-size: 14px; transition: background .15s, border-color .15s; }
.acct-btn::after { content: ''; width: 6px; height: 6px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.acct-btn:hover, .acct[open] > .acct-btn { background: var(--soft); border-color: var(--line); }
.acct-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; flex: none; }
.acct-avatar-lg { width: 44px; height: 44px; font-size: 16px; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; }
.acct-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; }
.acct-head b { display: block; color: var(--navy); font-size: 15px; line-height: 1.3; }
.acct-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.acct-group { border-top: 1px solid var(--line); padding: 4px 0; }
.acct-menu a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--navy-2); text-decoration: none; font-size: 14px; font-weight: 550; }
.acct-menu a span { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.acct-menu a:hover, .acct-menu a:focus-visible { background: var(--soft); color: var(--navy); }
.acct-out { width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; padding: 10px; font: 600 14px var(--font); color: var(--red); cursor: pointer; border-radius: 0 0 8px 8px; }
.acct-out:hover { background: var(--red-soft); }
@media (max-width: 860px) {
  .acct-name { display: none; }
  .acct-btn { padding: 2px; }
  .acct-btn::after { display: none; }
  .acct-menu { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; }
}

/* IT > User administration: primary access with "+N more", and icon buttons that explain themselves on hover. */
.access-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.access-more { background: none; border: 0; padding: 2px 4px; color: var(--orange-ink, #B15608); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: underline; }
.access-rest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.access-note { flex-basis: 100%; }
.row-icons { display: flex; gap: 6px; flex-wrap: nowrap; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy); cursor: pointer; padding: 0; }
.icon-btn:hover, .icon-btn:focus-visible { border-color: var(--navy); background: var(--soft, #F2F6F8); }
.icon-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.icon-btn.icon-danger { color: #A3231C; }
.icon-btn.icon-danger:hover, .icon-btn.icon-danger:focus-visible { border-color: #A3231C; background: #FCEDEC; }
.icon-btn[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 20; width: max-content; max-width: 240px; background: var(--navy); color: #fff; font-size: .78rem; font-weight: 500; line-height: 1.35; padding: 6px 10px; border-radius: 6px; text-align: left; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; }
.icon-btn[data-tip]:hover::after, .icon-btn[data-tip]:focus-visible::after { opacity: 1; transform: none; }

/* Home: My tasks and Notices side by side in the hero. */
/* One deck in the hero, not two side by side: My tasks with Notices under it,
   divided by a rule rather than by a gap. Two cards split the eye and each got
   half the width for no gain -- both lists are short. */
.hub-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.hub-split { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); }
.hub-today > section > :last-child { margin-bottom: 0; }
.hub-tasks li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.hub-tasks .due { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.hub-tasks .due-over { color: #FFB4A8; }
.hub-more { font-size: 12.5px !important; color: rgba(255, 255, 255, .7); margin: 0 0 8px !important; }
.hub-notices { margin-bottom: 8px !important; }
.hub-notice { padding-left: 0 !important; display: block; border-left: 3px solid var(--orange); padding: 2px 0 2px 10px !important; }
.hub-notice::before { display: none; }
.hub-notice-decision { border-left-color: #7CC6FF; }
.hub-notice-important { border-left-color: #FF8A7A; }
.hub-notice .nk { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.hub-notice b { display: block; font-size: 14px; }
.hub-notice summary { cursor: pointer; font-size: 12.5px; color: #F8B48F; font-weight: 650; }
.hub-notice .nb { font-size: 13px; white-space: pre-wrap; margin: 6px 0 4px; color: rgba(255, 255, 255, .88); }
.hub-notice .nw { font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.hub-notice .nack { margin-top: 6px; background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.hub-notice .nack:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 1100px) { .hub-cards { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- HR > Me > Career Ladder
   The engineering individual-contributor ladder. Every class is prefixed iclad-
   because .ladder is already taken by the horizontal L1-L6 strip on My Career,
   and these two are different pictures of the same six levels.

   Read downwards while climbing upwards: rung 6 sits at the top, and the spine
   warms and thickens toward it. The number rides the spine; the card beside it
   carries the level, the years, and what actually changes at that rung. */
.iclad { position: relative; margin: 8px 0 28px; }
.iclad::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(to bottom, var(--orange) 0%, #C98A6A 38%, var(--line-strong) 100%); border-radius: 2px; }
.iclad-rung { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding-bottom: 16px; }
.iclad-rung:last-child { padding-bottom: 0; }
.iclad-mark { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; background: #fff; color: var(--rung-ink, var(--muted)); border: 2px solid var(--rung-line, var(--line-strong)); box-shadow: var(--shadow-sm); }
.iclad-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--rung-line, var(--line-strong)); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-sm); }
.iclad-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.iclad-name { font-size: 17px; font-weight: 750; color: var(--navy); margin: 0; }
.iclad-headline { color: var(--rung-ink, var(--navy-2)); font-weight: 650; font-size: 13px; margin: 0 0 8px; }
.iclad-card p { margin: 0 0 10px; }
.iclad-shape { margin: 0 0 10px !important; padding-left: 12px; border-left: 2px solid var(--line); color: var(--navy-2); font-style: italic; }
.iclad-titles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.iclad-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--soft); color: var(--navy-2); border: 1px solid var(--line); }
.iclad-pill-level { background: var(--rung-soft, var(--soft)); color: var(--rung-ink, var(--navy-2)); border-color: var(--rung-line, var(--line)); }

/* The four things the last rung actually asks for. */
.iclad-reqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
/* There are exactly four, so give them 2x2 once there is room: auto-fit alone
   lands them 3 + 1, which reads as a card that did not fit. */
@media (min-width: 900px) { .iclad-reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.iclad-req { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.iclad-req h3 { margin: 0 0 6px; font-size: 15px; color: var(--navy); }
.iclad-req p { margin: 0 0 10px; }
.iclad-test { margin: 0; padding: 10px 12px; background: var(--orange-soft); border-radius: 8px; color: var(--navy-2); font-size: 13px; }

@media (max-width: 620px) {
  .iclad::before { left: 19px; }
  .iclad-rung { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .iclad-mark { width: 40px; height: 40px; font-size: 15px; }
}

/* Organisation chart (HR > Organisation). A plain nested list with a rule down
   the left: it reads as a hierarchy, prints, and needs no layout library. */
.org-tree, .org-tree ul { list-style: none; margin: 0; padding: 0; }
.org-tree ul { margin-left: 18px; padding-left: 18px; border-left: 2px solid var(--line); }
.org-tree li { margin: 6px 0; }
.org-person { display: inline-block; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 6px 10px; box-shadow: var(--shadow-sm); }
@media (max-width: 720px) { .org-tree ul { margin-left: 10px; padding-left: 10px; } }

/* ---- In-portal help: the header action stack and the drawer ----------------
   Help sits ABOVE the page's primary action, right-aligned on the same edge.
   A labelled button rather than a mark beside the title: the title stays
   clean, and because pageHead() is shared by all fourteen portal UIs the same
   stack appears on every module without touching them one by one. */
.page-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* the right edges line up exactly */
  gap: 12px;
  flex-shrink: 0;
}
.page-actions .row-actions { justify-content: flex-end; }

.help-btn {
  min-height: 42px;        /* the spec's 40-44 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  /* Outlined secondary: visible, but it must not compete with the primary
     action sitting underneath it. No filled panel behind it. */
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--line-strong);
}
.help-btn:hover:not(:disabled) { background: var(--deck-soft); border-color: var(--navy); }
.help-btn-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: .78em;
  font-weight: 700;
  line-height: 1;
}
/* The primary action keeps its own weight and sits a little taller. */
.page-actions .row-actions .btn-primary { min-height: 46px; }

/* The drawer. No dark scrim: the page — and the Help button — stay visible
   while it is open, which is what the design asks for and also means you can
   read the help against the screen you are asking about. */
.help-panel {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 70;
  pointer-events: none;    /* clicks fall through to the page, except the panel */
  background: transparent;
}
.help-panel.open { display: block; }
.help-panel-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: min(480px, 100%);
  height: 100%;
  overflow-y: auto;
  background: var(--canvas);
  border-left: 1px solid var(--line);
  padding: 18px 22px 40px;
  box-shadow: -10px 0 30px rgba(9, 46, 82, .16);
  pointer-events: auto;
}
.help-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.help-panel-head h2 { margin: 0; font-size: 1.35rem; }
.help-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.help-close:hover, .help-close:focus-visible { color: var(--ink); border-color: var(--line-strong); }

.help-sec { margin-top: 18px; }
.help-sec h3 { margin: 0 0 8px; font-size: 1rem; }
.help-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--canvas);
}
.help-card h4 { margin: 0 0 6px; font-size: .95rem; }
.help-card ol { margin: 0; padding-left: 18px; }
.help-panel-inner .queue li { margin-bottom: 6px; }

@media (max-width: 760px) {
  /* Wraps rather than running off the screen when a page has several actions (Asset Management has four). */
  .page-actions { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
  .help-panel-inner { width: 100%; border-left: 0; }
}

/* ---- Help: the three-level drill-down (department > module > page) --------
   A labelled row of chips per level, as in the owner's sketch. The chips are
   the stylesheet's existing .chip / .chip.active, so Help looks like the rest
   of the portal rather than like a separate product. */
.chip-row { margin: 0 0 14px; }
.chip-row + .chip-row { margin-top: -4px; }
.chip-row-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
/* The rows can get long — 69 pages in HR — so they wrap rather than scroll. */
.chip-row .filters { flex-wrap: wrap; gap: 8px; margin: 0; }
.chip-n {
  font-size: 11px;
  font-weight: 700;
  opacity: .62;
}
.chip.active .chip-n { opacity: .82; }

/* ---- Help: the module view (themed cards of pages) ------------------------
   Three cards side by side, each a theme within the module, each listing its
   pages as rows you can click. Falls back to one card when a module has no
   authored themes, so the absence reads as a plainer layout. */
.help-module-head { display: flex; align-items: center; gap: 12px; }
.help-module-head h2 { margin: 0; }
.help-count {
  background: var(--deck-soft);
  color: var(--navy-2);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 700;
}
.help-module-blurb { margin: 6px 0 18px; }

.help-themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.help-theme {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: var(--canvas);
}
.help-theme-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.help-theme-head h3 { margin: 0 0 2px; font-size: 1.02rem; }
.help-theme-head p { margin: 0; }
.help-theme-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--deck-soft);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.help-theme-ico svg { width: 20px; height: 20px; }
.help-badge {
  display: inline-block;
  background: var(--green-soft);
  color: var(--green);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}

.help-rows { display: flex; flex-direction: column; }
.help-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 2px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.help-row:first-child { border-top: 0; }
.help-row:hover { color: var(--navy); }
.help-row-mark {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--deck-soft);
  color: var(--navy-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.help-row-ico { width: 16px; height: 16px; }
.help-row-label { flex: 1; font-weight: 600; font-size: .94rem; }
.help-row-go { color: var(--muted); font-size: 1.3rem; line-height: 1; }
.help-row:hover .help-row-go { color: var(--navy); }

.help-rest { margin-top: 16px; }
.help-module-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.help-module-foot a { font-weight: 650; }

/* HR > Organisation overview (the owner's design, 26 Oct 2026): count cards with an icon, announcements and holidays as cards, Quick access in three cards.
   Colours are the portal's own: tokens from :root, and the existing tag pairs (.tag-orange, .tag-green, .tag-blue, .tag-board). No colour is invented here. */
.org-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; }
.org-ico.tone-orange { background: var(--orange-soft); color: #9A3F12; }   /* the .tag-orange pair */
.org-ico.tone-blue { background: #E6F0FA; color: #1D4F91; }           /* the .tag-blue pair */
.org-ico.tone-green { background: var(--green-soft); color: var(--green); }   /* the .tag-green pair */
.org-ico.tone-purple { background: #EEF2FF; color: #3730A3; }         /* the .tag-board pair: the portal has no purple */
.org-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; }
.org-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
.org-stat:hover, .org-stat:focus-visible { border-color: var(--line-strong); box-shadow: var(--shadow); }
.org-stat-body { display: flex; flex-direction: column; min-width: 0; }
.org-stat-body b { font-size: 26px; line-height: 1.1; color: var(--navy); letter-spacing: -.02em; }
.org-stat-body span { color: var(--muted); font-size: 13px; }
.org-view { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; min-height: 24px; font-size: 13px; font-weight: 600; color: var(--navy); }
.org-view .org-ico-svg, .org-more .org-ico-svg { width: 14px; height: 14px; }
.org-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 8px; }
.org-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); padding: 18px 20px; }
.org-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.org-card-head h2 { margin: 0; font-size: 17px; }
.org-card-head p { margin: 2px 0 0; }
.org-more { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; min-height: 24px; font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; }
.org-more:hover { text-decoration: underline; }
.org-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 10px 14px; }
.org-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #E6F0FA; color: #1D4F91; margin-bottom: 10px; }
.org-empty-ico .org-ico-svg { width: 28px; height: 28px; }
.org-empty b { color: var(--navy); }
.org-empty p { margin: 6px 0 0; max-width: 34ch; color: var(--muted); font-size: 13px; }
.org-notices, .org-holidays, .org-links { list-style: none; margin: 0; padding: 0; }
.org-notices li { padding: 10px 0; }
.org-notices li + li, .org-holidays li + li { border-top: 1px solid var(--line); }
.org-holidays li { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.org-date { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; padding: 5px 0; border-radius: 8px; background: var(--orange-soft); color: #9A3F12; }
.org-date small { font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.org-date b { font-size: 18px; line-height: 1.1; }
.org-hol-body { display: flex; flex-direction: column; min-width: 0; }
.org-hol-body b { color: var(--navy); }
.org-quick-head { margin: 26px 0 12px; }
.org-quick-head h2 { margin: 0 0 4px; font-size: 20px; }
.org-quick-head p { margin: 0; }
.org-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.org-links li + li { border-top: 1px solid var(--line); }
.org-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; text-decoration: none; color: inherit; }
.org-links a > span { display: block; min-width: 0; }
.org-links b { display: block; color: var(--navy); font-weight: 600; }
.org-links a > span > span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.org-links a:hover b, .org-links a:focus-visible b { text-decoration: underline; }
.org-links .org-ico-svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--muted); }
@media (max-width: 520px) { .org-view { display: none; } .org-more { font-size: 12px; } }

/* Portal-wide finish, matching the Organisation overview (26 Oct 2026): the same card edge, hover, focus ring and quiet header rule on every page. Tokens only. */
.stat, .panel, .card, .table-wrap, .empty { border-color: var(--line); }
.stat b { color: var(--navy); letter-spacing: -.02em; }
a.card:hover, a.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
a.card:focus-visible, a.stat:focus-visible, .btn:focus-visible, .mainnav a:focus-visible, table.data a:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
.panel > h2, .section-head h2 { color: var(--navy); }
.page-head .eyebrow { margin-bottom: 4px; }
.page-head > div > p.muted { margin-top: 0; max-width: 78ch; }
table.data th { border-bottom: 1px solid var(--line); }
.section-head { margin-top: 4px; }
@media (max-width: 760px) { .panel { padding: 16px 16px; } .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

/* Home: the greeting is alone in the hero; My tasks and Notices sit in two light cards under the counts. */
.hub-hero { grid-template-columns: minmax(0, 1fr) auto; }
.hub-kural { margin: 0; text-align: right; max-width: 320px; }
.hub-kural blockquote { margin: 0; font-size: 13px; line-height: 1.6; color: var(--orange); font-weight: 600; text-align: right; }
@media (max-width: 900px) { .hub-hero { grid-template-columns: 1fr; } .hub-kural { text-align: left; max-width: none; } }
/* The Welcome page's Kural: one palm leaf holding both lines. The space is held while it loads so the greeting does not shift. */
.hub-leaf { margin: 0; width: clamp(360px, 38vw, 500px); min-height: 180px; opacity: 0; transition: opacity .25s ease; }
.hub-leaf.ready { opacity: 1; }
.hub-leaf a { display: block; border-radius: 12px; transition: transform .18s ease; }
.hub-leaf a:hover { transform: translateY(-2px) rotate(-.4deg); }
.hub-leaf a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hub-leaf svg { display: block; width: 100%; height: auto; overflow: visible; }
.hub-leaf figcaption { margin-top: 2px; text-align: center; font-size: 12.5px; letter-spacing: .01em; color: rgba(255, 255, 255, .72); }
@media (max-width: 900px) { .hub-leaf { width: 100%; max-width: 500px; min-height: 0; } }
@media (max-width: 560px) { .hub-leaf { width: calc(100% + 24px); max-width: none; margin: 0 -12px; } }
@media (prefers-reduced-motion: reduce) { .hub-leaf, .hub-leaf a { transition: none; } .hub-leaf a:hover { transform: none; } }
.org-card .hub-tasks, .org-card .hub-notices { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.org-card .hub-tasks li { position: relative; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 9px 0 9px 14px; font-size: 14px; color: var(--ink); }
.org-card .hub-tasks li + li { border-top: 1px solid var(--line); }
.org-card .hub-tasks li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.org-card .hub-tasks a { color: var(--navy); font-weight: 600; text-decoration: none; }
.org-card .hub-tasks a:hover { text-decoration: underline; }
.org-card .hub-tasks .due { color: var(--muted); }
.org-card .hub-tasks .due-over { color: var(--red); }
.org-card .hub-more { color: var(--muted); }
.org-card .hub-notice { padding: 8px 0 8px 10px !important; color: var(--ink); }
.org-card .hub-notice .nk, .org-card .hub-notice .nw { color: var(--muted); }
.org-card .hub-notice .nb { color: var(--ink); }
.org-card .hub-notice summary { color: var(--navy); }
.org-card .hub-notice .nack { background: #fff; color: var(--navy); border-color: var(--line-strong); }
.org-card .hub-notice .nack:hover { background: var(--soft); }
.org-card #hub-no-notices { margin: 0; color: var(--muted); font-size: 14px; }
.org-sub { margin: 14px 0 4px; font-size: 14px; }
.org-card .org-empty { padding: 14px 10px 8px; }
/* Home's three cards: one height (the tallest), at most two items each, and the "more" link pinned to the bottom right. */
.org-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; align-items: stretch; }
.org-three > .org-card { display: flex; flex-direction: column; }
.org-three > .org-card:not(.org-card-all) :is(.hub-notices, .org-notices, .org-holidays) > li:nth-child(n+3) { display: none; }
.org-card-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: flex-end; }
.org-card-foot[hidden] { display: none; }
button.org-more { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
@media (max-width: 1100px) { .org-three { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }

/* PMO project page: the new-milestone form is its own tinted box, clearly apart from the milestones already on the project. */
.ms-new { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 8px; margin-bottom: 22px; }
.ms-new h3 { margin: 0 0 10px; font-size: 14px; }
.ms-existing { margin: 0 0 6px; padding-top: 16px; border-top: 2px solid var(--line-strong); font-size: 14px; }

/* ---------------------------------------------------------------- the test screen
   One question at a time with a numbered navigator (owner's choice, 29 Oct 2026).
   Used by both the practice test and the assessment; practice adds the feedback block. */
.qz { display: flex; gap: 20px; align-items: flex-start; }
.qz-side { width: 232px; flex: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); position: sticky; top: 84px; }
.qz-side-head { font-weight: 700; color: var(--navy); font-size: 14px; margin-bottom: 10px; }
.qz-dots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.qz-dot { height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.qz-dot:hover { border-color: var(--navy-2); }
.qz-dot.done { background: var(--green); border-color: var(--green); color: #fff; }
.qz-dot.here { background: var(--navy); border-color: var(--navy); color: #fff; }
.qz-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.qz-legend i.d { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line-strong); background: #fff; margin-right: 6px; vertical-align: -1px; }
.qz-legend i.d.done { background: var(--green); border-color: var(--green); }
.qz-legend i.d.here { background: var(--navy); border-color: var(--navy); }
.qz-card { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow-sm); }
.qz-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 14px; }
.qz-head-right { display: flex; align-items: center; gap: 10px; }
.qz-speak { min-height: 44px; }
.qz-q { font-weight: 650; color: var(--navy); font-size: 18px; line-height: 1.45; margin-bottom: 14px; }
.qz-options { display: flex; flex-direction: column; gap: 9px; }
.qz-option { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; background: #fff; font-family: inherit; min-height: 44px; }
.qz-option:disabled { cursor: default; }
.qz-option.picked { border-color: var(--navy-2); background: #F3F6FA; }
/* A revealed answer beats the chosen-answer highlight. Both rules carry the same
   weight, so without these the later .picked rule would win and a wrong answer in
   practice would look merely selected. */
.qz-option.correct, .qz-option.picked.correct { border-color: var(--green); background: var(--green-soft); }
.qz-option.wrong, .qz-option.picked.wrong { border-color: var(--red); background: var(--red-soft); }
.qz-letter { font-weight: 700; color: var(--muted); flex: none; width: 18px; }
.qz-text { flex: 1; }
.qz-mark { flex: none; font-weight: 700; font-size: 13px; }
.qz-mark.ok { color: var(--green); }
.qz-mark.bad { color: var(--red); }
.qz-feedback { margin-top: 14px; border-radius: 10px; padding: 14px 16px; font-size: 14px; }
.qz-feedback.ok { background: var(--green-soft); border: 1px solid var(--green); }
.qz-feedback.bad { background: var(--red-soft); border: 1px solid var(--red); }
.qz-src, .why-src { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
/* The "About this module" tab on a module page: owner's choice, for this text only. */
.about-text { text-align: justify; }
.qz-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }
.qz-resume { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
.qz-resume .btn { flex: none; }
/* The section a "where this comes from" link landed on, so it is obvious which it was. */
.rd-landed { background: var(--amber-soft); border-radius: 8px; transition: background 1.2s ease 1s; }
@media (max-width: 900px) {
  .qz { flex-direction: column; }
  .qz-side { width: 100%; position: static; }
  .qz-dots { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .qz-card { padding: 18px; }
}

/* IT levels 1-3 read the IT administration pages (rule itAudit): no save or delete buttons, and a banner says why. */
body.ro-audit .portal-main::before { content: "Read only: your IT level lets you look at this page. Changes are made by an IT admin."; display: block; margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: 0.92rem; }
body.ro-audit .portal-main .btn-primary, body.ro-audit .portal-main .btn-danger, body.ro-audit .portal-main button[type="submit"] { display: none !important; }

/* Asset Management: QR label sheet. Each label is one asset; the QR opens its page. */
.asset-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.asset-label { border: 1px dashed var(--line, #cbd5e1); border-radius: 6px; padding: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; break-inside: avoid; page-break-inside: avoid; background: #fff; color: #111; }
.asset-label svg { width: 120px; height: 120px; }
.asset-label b { font-size: 14px; letter-spacing: .5px; }
.asset-label span { font-size: 11px; line-height: 1.3; }
@media print {
  .asset-labels { grid-template-columns: repeat(4, 1fr); }
  /* Only on a page that is showing a label sheet: every other printout keeps its layout. */
  body:has(.asset-labels) .page-head, body:has(.asset-labels) .tabs, body:has(.asset-labels) .two-col { display: none !important; }
}

/* Submission safety (SS-1): the shared confirmation dialog, busy and outcome panels, field errors. */
.ss-open { overflow: hidden; }
.ss-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(11,26,42,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ss-dialog { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 24px; outline: none; }
.ss-title { margin: 0 0 6px; font-size: 19px; color: var(--navy); }
.ss-message { margin: 0 0 14px; color: var(--ink); }
.ss-summary { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); padding: 4px 14px; }
.ss-summary div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ss-summary div:last-child { border-bottom: 0; }
.ss-summary dt { color: var(--muted); font-size: 13.5px; }
.ss-summary dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.ss-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.ss-separate { margin: 0 0 12px; }
.ss-separate summary { cursor: pointer; color: var(--navy-2); font-weight: 600; }
.ss-field-error { color: var(--red); font-size: 13.5px; margin-top: 4px; }
[aria-invalid="true"] { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-soft); }
.ss-panel { display: flex; gap: 12px; align-items: flex-start; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; outline: none; }
.ss-busy, .ss-checking { background: var(--soft); border: 1px solid var(--line); }
.ss-warn { background: var(--amber-soft); border: 1px solid #F3D99B; color: #5C4813; }
.ss-error { background: var(--red-soft); color: var(--red); }
.ss-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ss-outcome { border-left: 4px solid var(--green); outline: none; }
.ss-outcome h2 { color: var(--green); }
.ss-spinner { display: inline-block; flex: none; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ss-spin .8s linear infinite; }
.ss-panel .ss-spinner { margin-top: 2px; color: var(--navy-2); }
@keyframes ss-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ss-spinner { animation-duration: 2.4s; } }
@media (max-width: 560px) {
  .ss-dialog { padding: 18px 16px; }
  .ss-summary div { grid-template-columns: 1fr; gap: 2px; }
  .ss-actions { flex-direction: column-reverse; }
  .ss-actions .btn { width: 100%; justify-content: center; }
}

/* Course pre-assessment (3 Nov 2026): the lock panel, the catalogue note and the admin forms. */
.prelock { background: var(--amber-soft); border: 1px solid #F3D99B; border-radius: 14px; padding: 22px 26px; margin: 0 0 22px; max-width: 760px; }
.prelock h2 { margin: 8px 0 6px; }
.prelock p { margin: 0 0 8px; }
.prelock .row-actions { justify-content: flex-start; margin-top: 12px; }
.prenote { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.prestart { max-width: 760px; }
.pre-set, .pre-exc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* People Directory */
.dir-summary { display: flex; gap: 22px; margin: -8px 0 20px; color: var(--muted); font-size: 14px; }
.dir-summary b { color: var(--navy); font-weight: 750; font-variant-numeric: tabular-nums; }
.dir-tools { display: flex; gap: 10px; margin-bottom: 14px; }
.dir-search { position: relative; flex: 1; min-width: 0; margin: 0; }
.dir-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.dir-search input[type=search] { width: 100%; max-width: none; margin: 0; min-height: 44px; padding-left: 42px; border-radius: var(--radius); background: #fff; }
.dir-tools select { width: auto; flex: none; min-height: 44px; border-radius: var(--radius); background-color: #fff; font-weight: 550; color: var(--navy-2); }
.dir-chips { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.dir-count { margin: 0 0 12px; }
.dir-grid .empty { grid-column: 1 / -1; }
.dir-card { padding: 0; gap: 0; overflow: hidden; }
.dir-card:hover, .dir-card:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow); }
.dir-card-main { flex: 1; display: flex; flex-direction: column; gap: 22px; padding: 20px 18px 16px; }
.dir-card .avatar, .dir-dialog .avatar { background: #EAF1F8; color: var(--navy); font-size: 15px; font-weight: 650; }
.dir-who { min-width: 0; }
.dir-who h2, .dir-who h3 { margin: 0 0 2px; overflow-wrap: anywhere; }
.dir-who h2 { font-size: 18px; }
.dir-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.dir-tag { font-size: 12px; font-weight: 550; line-height: 1.3; color: var(--navy-2); background: #EEF3F9; border-radius: 6px; padding: 5px 8px; }
.dir-contact { display: flex; flex-direction: column; gap: 8px; min-height: 73px; margin: 0 18px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dir-contact div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dir-contact svg { flex: none; color: var(--muted); }
.dir-contact a { color: var(--navy-2); text-decoration: none; overflow-wrap: anywhere; }
.dir-contact a:hover { color: var(--navy); text-decoration: underline; }
.dir-open { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 8px 18px; border: 0; border-top: 1px solid var(--line); background: none; font: 550 13px var(--font); color: var(--navy-2); cursor: pointer; }
.dir-open:hover { background: var(--soft); color: var(--navy); }
.dir-open:focus-visible { outline: 2px solid var(--navy-2); outline-offset: -2px; }
.dir-dialog { width: min(440px, calc(100vw - 32px)); border: 0; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-lg); color: inherit; }
.dir-dialog::backdrop { background: rgba(11, 26, 42, .55); }
.dir-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 20px 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.dir-facts dt { color: var(--muted); font-weight: 550; }
.dir-facts dd { margin: 0; overflow-wrap: anywhere; }
.dir-dialog form { display: flex; justify-content: flex-end; margin: 0; }
@media (max-width: 560px) {
  .dir-tools { flex-direction: column; }
  .dir-tools select { width: 100%; }
}

/* ============================================================ Curriculum & Content (4 Nov 2026)
   The list's filter row, the upload box, and the review workspace: the document on the left and
   the review beside it on a wide screen, tabs on a narrow one. Navy and orange throughout, and
   the same panels, chips and tags as the rest of the portal rather than a second visual language
   for one screen. */
.cur-filters { align-items: center; }
.cur-filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cur-filter-row select, .cur-filter-row input { min-width: 9rem; }
.cur-table td { vertical-align: top; }
.cur-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.req { color: var(--orange); font-weight: 700; }
.cur-versions li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cur-v-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- the upload box */
.up-drop { border: 2px dashed var(--line); border-radius: 10px; padding: 18px; text-align: center; background: var(--soft); }
.up-drop.over { border-color: var(--orange); background: var(--orange-soft); }
.up-drop:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.up-input { display: none; }
.up-chosen { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.up-name { font-weight: 600; color: var(--navy); word-break: break-all; }
.up-bar { margin-top: 8px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.up-bar-fill { height: 100%; width: 0; background: var(--orange); transition: width .15s linear; }

/* ---- the workspace */
.rv-tabs { display: none; gap: 8px; margin-bottom: 12px; }
.rv-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.rv-pane { max-height: calc(100vh - 220px); overflow: auto; }
.rv-doc-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.rv-doc { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-height: 320px; }
.rv-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.rv-spacer { flex: 1; }
.rv-canvas-wrap { position: relative; overflow: auto; background: #fff; }
.rv-canvas-wrap canvas { display: block; }
/* The text layer sits exactly over the rendered page so a reviewer can select a sentence; it is
   invisible, not absent, because selecting text is the point of it. */
.rv-textlayer { position: absolute; inset: 0; color: transparent; }
.rv-textlayer span { position: absolute; white-space: pre; transform-origin: 0 0; cursor: text; }
.rv-textlayer ::selection { background: rgba(233, 98, 36, .35); }
.rv-blocks, .rv-slides { background: #fff; padding: 8px; }
.rv-block { display: flex; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.rv-block:hover { background: var(--soft); }
.rv-block.on { background: var(--orange-soft); box-shadow: inset 3px 0 0 var(--orange); }
.rv-bno { color: var(--muted); font-size: 12px; min-width: 2.2em; text-align: right; padding-top: 4px; }
.rv-bbody { flex: 1; min-width: 0; }
.rv-bbody img { max-width: 100%; height: auto; }
.rv-slide { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; cursor: pointer; }
.rv-slide.on { border-color: var(--orange); background: var(--orange-soft); }
.rv-sno { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.rv-shape + .rv-shape { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.rv-counts { padding: 8px 10px; background: var(--soft); border-radius: 6px; margin-bottom: 10px; }
.rv-blocking { color: var(--red); }
.rv-filters { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.rv-anchor { background: var(--soft); border-radius: 6px; padding: 8px; }
.rv-c { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.rv-c.addressed { border-left-color: var(--navy); }
.rv-c.resolved { border-left-color: var(--green); opacity: .8; }
.rv-c-top { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.rv-c-loc { font-weight: 600; }
.rv-c-obs { margin: 6px 0; }
.rv-quote { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--orange); background: var(--orange-soft); font-style: italic; }
.rv-replies { margin: 8px 0 0 12px; }
.rv-reply { border-left: 2px solid var(--line); padding: 4px 0 4px 10px; margin-top: 6px; }
.rv-c-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.rv-reply-box textarea { width: 100%; }
.rv-decide { margin-top: 16px; }
/* On a wide screen the history is not a tab: it runs full width under the two panes, so the
   document and the comments keep the room they need. */
#rv-pane-history { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .rv-tabs { display: flex; }
  .rv-wrap { grid-template-columns: 1fr; }
  .rv-pane { max-height: none; }
  .rv-wrap[data-tab="doc"] #rv-pane-comments, .rv-wrap[data-tab="doc"] #rv-pane-history { display: none; }
  .rv-wrap[data-tab="comments"] #rv-pane-doc, .rv-wrap[data-tab="comments"] #rv-pane-history { display: none; }
  .rv-wrap[data-tab="history"] #rv-pane-doc, .rv-wrap[data-tab="history"] #rv-pane-comments { display: none; }
  .rv-wrap[data-tab="history"] #rv-pane-history { display: block; }
}

.rv-outstanding { margin-bottom: 10px; }
.rv-carry { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.rv-carry input { flex: 1; min-width: 12rem; }
.cur-sup { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
/* Reason for a hire: the five answers under bold headings, one blank line between answers */
.req-why + .req-why { margin-top: 1.2em; }
.req-why-h { margin-bottom: .25em; font-weight: 700; }

/* Speaker notes are what the teacher is told to do, so they are shown as a distinct block
   rather than as more slide text: reviewing one as if it were the other is the mistake. */
.rv-notes { margin-top: 8px; padding: 8px 10px; background: var(--soft); border-radius: 6px; }
.rv-notes b { display: block; color: var(--muted); margin-bottom: 4px; }