/* Custom Overrides for UHL POCUS Teaching */
html {
    scroll-behavior: smooth;
}

/* Compact role / tutor / track / skill badges (works without rebuilding tailwind.css) */
.badge-xs {
    font-size: 9px !important;
    line-height: 1 !important;
    padding: 3px !important;
}
.badge-mentor, .badge-supervisor { text-transform: uppercase !important; font-weight: 700 !important; letter-spacing: 0.05em !important; }
.badge-mentor { background-color: #172554; color: #93c5fd; border: 1px solid rgba(59,130,246,0.4); }
.badge-supervisor { background-color: #1a2e05; color: #bef264; border: 1px solid rgba(132,204,22,0.45); }
/* Role / student / tutor badges: same shape as the Mentor / Supervisor badges */
.badge-role-user { background-color: #0f172a; color: #94a3b8; border: 1px solid rgba(100,116,139,0.6); }
.badge-role-admin { background: linear-gradient(135deg, #64748b 0%, #e2e8f0 50%, #94a3b8 100%); color: #0f172a; border: 1px solid #cbd5e1; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.badge-role-super { background: linear-gradient(135deg, #a16207 0%, #fde047 50%, #ca8a04 100%); color: #2e1f00; border: 1px solid #eab308; text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.badge-track-famus { background-color: #166534; color: #bbf7d0; border: 1px solid #22c55e; }
/* Metallic track badges (Members & roles) */
.badge-metal { border: 1px solid; font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4); }
.badge-metal-both { background: linear-gradient(160deg, #0c4a6e 0%, #38bdf8 45%, #075985 55%, #0369a1 100%); color: #f0f9ff; border-color: #7dd3fc; }
.badge-metal-famus { background: linear-gradient(160deg, #14532d 0%, #4ade80 45%, #166534 55%, #15803d 100%); color: #f0fdf4; border-color: #86efac; }
.badge-metal-fusic { background: linear-gradient(160deg, #3b0764 0%, #c084fc 45%, #581c87 55%, #7e22ce 100%); color: #faf5ff; border-color: #d8b4fe; }
.badge-metal-none { background: linear-gradient(160deg, #1e293b 0%, #94a3b8 45%, #334155 55%, #475569 100%); color: #f1f5f9; border-color: #94a3b8; }
.badge-role-student { background-color: #082f49; color: #7dd3fc; border: 1px solid rgba(14,165,233,0.45); }
.badge-role-tutor { background-color: #022c22; color: #6ee7b7; border: 1px solid rgba(16,185,129,0.45); }
.badge-role-fusic { background-color: #500724; color: #f9a8d4; border: 1px solid rgba(236,72,153,0.5); }

/* Native date / time pickers: light icons on the dark theme */
input[type="time"], input[type="date"], input[type="month"], input[type="datetime-local"] { color-scheme: dark; }
input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6); opacity: .9; cursor: pointer;
}

/* Time inputs: a sky-blue clock drawn on the field (like the calendar icon on the date field); the browser's own icon is kept but invisible so a click still opens the picker */
input[type="time"] { background-repeat: no-repeat; background-position: right .75rem center; background-size: 1rem 1rem; padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0; width: 1.4rem; cursor: pointer; }

/* Manage Attendance: counts sit in a dark box so they are easy to read */
.att-num { display: inline-block; min-width: 2.6rem; padding: .3rem .6rem; background: #050914; border: 1px solid #1e293b; border-radius: .5rem; font-size: .95rem; font-weight: 700; line-height: 1.1; }


/* Fallbacks for classes used by the dashboard User Stats tiles (in case tailwind.css has not been rebuilt) */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt-4 { margin-top: 1rem; }

/* ---- Floating toast messages (shown just under the sticky header, fade away, never push content down) ---- */
.toast-host { position: fixed; left: 0; right: 0; top: 7rem; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; padding: 0 1rem; }
.toast { pointer-events: auto; cursor: pointer; max-width: 36rem; display: flex; align-items: center; gap: .65rem; padding: .8rem 1.1rem; border-radius: .85rem; font-size: .875rem; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.5); backdrop-filter: blur(6px); }
.toast i { font-size: 1.15rem; }
/* 10.8 s in all: starts bright and settles to its normal colours over the first 2 s, stays until 10 s, then fades out */
.toast-success { background: rgba(2,44,34,.95); border: 1px solid rgba(16,185,129,.6); color: #a7f3d0; animation: toastLife 10.8s ease forwards, toastBrightOk 2s ease-out; }
.toast-error { background: rgba(76,5,25,.95); border: 1px solid rgba(244,63,94,.6); color: #fecdd3; animation: toastLife 10.8s ease forwards, toastBrightErr 2s ease-out; }
.toast-success i { color: #34d399; }
.toast-error i { color: #fb7185; }
@keyframes toastBrightOk { from { background: #059669; border-color: #6ee7b7; color: #fff; box-shadow: 0 0 26px rgba(52,211,153,.75), 0 10px 30px rgba(0,0,0,.5); } }
@keyframes toastBrightErr { from { background: #e11d48; border-color: #fda4af; color: #fff; box-shadow: 0 0 26px rgba(251,113,133,.75), 0 10px 30px rgba(0,0,0,.5); } }
@keyframes toastLife {
  0% { opacity: 0; transform: translateY(-10px); }
  1% { opacity: 1; transform: translateY(0); }
  92.6% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); visibility: hidden; }
}

/* ---- Dashboard: yellow "TODAY" badge and a flexible analytics grid (add more stat tiles any time) ---- */
.badge-today { background: rgba(113,63,18,.65); color: #fde047; border: 1px solid rgba(250,204,21,.55); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .75rem; }
.stat-grid > * { min-width: 0; }
@media (min-width: 640px) { .stat-grid > .stat-wide { grid-column: span 2; } }

/* Analytics tiles: titles always start at the top of the tile, all tiles the same height */
.stat-grid > div { align-items: flex-start !important; min-height: 6.5rem; }

/* ---- Sessions page: completed sessions are greyed out; share button; shared-link highlight ---- */
.session-completed { background-color: #0f172a !important; border-color: #1e293b !important; }
.session-completed h4 { color: #9ca3af !important; }
.btn-record-attendance { color: #1c1917 !important; background-color: #f59e0b !important; transition: background-color .15s; }
.btn-record-attendance:hover { background-color: #fcd34d !important; }
.share-session-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: .25rem .55rem; border-radius: .5rem; background: rgba(30,41,59,.9); color: #7dd3fc; border: 1px solid rgba(71,85,105,.8); cursor: pointer; transition: background .15s; }
.share-session-btn:hover { background: rgba(51,65,85,1); color: #e0f2fe; }
.session-focus { animation: sessionFocus 3s ease 1; box-shadow: 0 0 0 2px rgba(56,189,248,.9), 0 0 24px rgba(56,189,248,.35) !important; }
@keyframes sessionFocus { 0% { box-shadow: 0 0 0 4px rgba(56,189,248,1), 0 0 36px rgba(56,189,248,.6); } 100% { box-shadow: 0 0 0 2px rgba(56,189,248,.9), 0 0 24px rgba(56,189,248,.35); } }

/* ---- My Booked Sessions pager ---- */
.booked-nav-btn { width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; background: #1e293b; color: #e2e8f0; border: 1px solid #334155; font-size: 1rem; line-height: 1; cursor: pointer; transition: background .15s; }
.booked-nav-btn:hover:not(:disabled) { background: #334155; }
.booked-nav-btn:disabled { opacity: .35; cursor: default; }
.booked-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: #475569; border: 0; padding: 0; cursor: pointer; transition: background .15s, transform .15s; }
.booked-dot.active { background: #38bdf8; transform: scale(1.25); }

/* Session cards: the info column is full width on phones so the capacity bar is the same size on every card */
.session-info-col { width: 100%; min-width: 0; }
@media (min-width: 640px) { .session-info-col { width: auto; } }

/* Session heading row (all screen sizes): the Share button sits at the far right, in line with the Slots Left badge; the date drops to its own line below */
[data-sess="left"] { display: contents !important; }
[data-sess="left"] ~ .share-session-btn { order: 2; margin-left: auto; }
[data-sess="date"] { order: 3; flex-basis: 100%; }

/* Completed sessions: the session details are dimmed to 50%; the attendees box is dimmed too when nobody had signed up */
.session-completed .session-fade { opacity: .5; }

/* Back to top: round arrow button, bottom right, appears once you scroll down */
.back-to-top-fab { position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:9999px; border:1px solid #38bdf8; background:#0284c7; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.45); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s, transform .25s, visibility .25s, background .15s; z-index:60; }
.back-to-top-fab.show { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top-fab:hover { background:#0ea5e9; }
.back-to-top-fab:focus-visible { outline:2px solid #fbbf24; outline-offset:2px; }

/* Online (non-bedside) sessions: violet so they stand out from bedside (sky/emerald) */
.badge-online { background:#4c1d95; color:#ddd6fe; border:1px solid rgba(167,139,250,.55); display:inline-flex; align-items:center; gap:.2rem; }
.session-online:not(.session-completed) { background-color:#1a1938 !important; }
.session-full:not(.session-completed) { background-color:#2b1620 !important; border-color:#5b2434 !important; }
.session-full:not(.session-completed):hover { border-color:#f43f5e !important; }
.session-online:hover { border-color:#a78bfa !important; }

/* "Join online session" link (plain link, shown only to members who signed up) */
.join-online-link { display:inline-flex; align-items:center; gap:.4rem; color:#c4b5fd; font-weight:600; text-decoration:none; }
.join-online-link:hover { color:#ddd6fe; text-decoration:underline; }

/* ---- Curriculum page: programme highlights ---- */
.pw-card { background:#0f172a; border:1px solid #1e293b; border-radius:1rem; padding:1.5rem; box-shadow:0 20px 25px -5px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:1.25rem; }
@media (min-width:640px) { .pw-card { padding:2rem; } }
.pw-title { font-size:1.05rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:.5rem; }
.pw-lead { margin-top:.6rem; font-size:.85rem; line-height:1.65; color:#cbd5e1; max-width:60rem; }
.pw-lead strong { color:#7dd3fc; }
.pw-guarantee { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; border-radius:.9rem; background:linear-gradient(90deg, rgba(245,158,11,.20), rgba(245,158,11,.06)); border:1px solid rgba(245,158,11,.55); }
.pw-guarantee-icon { flex:0 0 auto; width:3rem; height:3rem; border-radius:50%; background:#f59e0b; color:#1c1917; display:flex; align-items:center; justify-content:center; font-size:1.3rem; box-shadow:0 0 18px rgba(245,158,11,.45); }
.pw-guarantee-title { font-size:1rem; font-weight:700; color:#fde68a; line-height:1.3; }
.pw-guarantee-text { margin-top:.2rem; font-size:.8rem; color:#e2e8f0; line-height:1.5; }
.pw-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px) { .pw-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .pw-grid { grid-template-columns:repeat(4,1fr); } }
.pw-tile { background:#090e1a; border:1px solid #334155; border-radius:.9rem; padding:1.1rem; }
.pw-tile h3 { margin:.7rem 0 .35rem; }
.pw-tile p { font-size:.78rem; line-height:1.55; color:#cbd5e1; }
.pw-tile p strong { color:#6ee7b7; }
.pw-tile-icon { width:2.4rem; height:2.4rem; border-radius:.7rem; background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.5); color:#34d399; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.pw-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
@media (min-width:1024px) { .pw-stats { grid-template-columns:repeat(4,1fr); } }
.pw-stat { background:#090e1a; border:1px solid #1e293b; border-radius:.8rem; padding:.8rem 1rem; display:flex; align-items:center; gap:.75rem; }
.pw-stat-num { font-size:1.6rem; font-weight:700; color:#38bdf8; line-height:1; min-width:2.6rem; }
.pw-stat-label { font-size:.72rem; color:#94a3b8; line-height:1.35; }
.pw-path { border-top:1px solid #1e293b; padding-top:1.25rem; }
.pw-subtitle { font-size:.95rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:.5rem; }
















/* ---- Curriculum page: module cards (example image left, bullet points right) ---- */
.mod-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:768px) { .mod-grid { grid-template-columns:repeat(2,1fr); } }
.mod-card { display:flex; gap:1rem; align-items:stretch; background:#090e1a; border:1px solid #334155; border-radius:.9rem; padding:1rem; }
.mod-img { position:relative; flex:0 0 auto; width:8.5rem; min-height:8.5rem; border-radius:.7rem; overflow:hidden; background:linear-gradient(135deg,#0b1730,#12213f); border:1px solid #1e3a5f; display:flex; align-items:center; justify-content:center; color:#38bdf8; font-size:2rem; opacity:1; }
.mod-img img, .mod-img video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.mod-body { min-width:0; flex:1 1 auto; }
.mod-title { font-size:.85rem; font-weight:700; color:#38bdf8; display:flex; align-items:center; gap:.4rem; margin-bottom:.5rem; }
.mod-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem; }
.mod-list li { position:relative; padding-left:1rem; font-size:.78rem; line-height:1.45; color:#cbd5e1; }
.mod-list li::before { content:""; position:absolute; left:.1rem; top:.5rem; width:.35rem; height:.35rem; border-radius:50%; background:#38bdf8; }
@media (max-width:479px) { .mod-card { flex-direction:column; } .mod-img { width:100%; min-height:10rem; } }

/* FUSIC Heart pathway additions */
.pw-note { margin-top:.5rem; font-size:.8rem; line-height:1.6; color:#cbd5e1; max-width:60rem; }
.pw-note strong { color:#7dd3fc; }





.pw-foot { margin-top:.9rem; font-size:.75rem; color:#94a3b8; line-height:1.6; }
.pw-foot strong { color:#e2e8f0; }
.pw-link { margin-left:.5rem; color:#7dd3fc; font-weight:600; text-decoration:none; white-space:nowrap; }
.pw-link:hover { color:#bae6fd; text-decoration:underline; }

/* Curriculum: assessments table, collapsibles */
.cv-wide { grid-column:1 / -1; }
.cv-wide > * + * { margin-top:.75rem; }
.cv-scroll { overflow-x:auto; }
.cv-table { width:100%; min-width:420px; border-collapse:collapse; font-size:.75rem; color:#cbd5e1; }
.cv-table th { padding:.4rem .5rem; text-align:center; color:#94a3b8; font-weight:600; }
.cv-table td { padding:.4rem .5rem; text-align:center; border-top:1px solid #1e293b; }
.cv-table .cv-l { text-align:left; padding-left:0; }
.cv-table .cv-n { font-weight:700; color:#fff; }
.cv-table .cv-dash { color:#64748b; }
.cv-note { font-size:.75rem; line-height:1.6; color:#94a3b8; }
.cv-two { display:grid; grid-template-columns:1fr; gap:.75rem; }
@media (min-width:640px) { .cv-two { grid-template-columns:1fr 1fr; } }
.cv-box { border:1px solid #1e293b; border-radius:.5rem; padding:.75rem; }
.cv-box > * + * { margin-top:.25rem; }
.cv-details { background:#090e1a; border:1px solid #334155; border-radius:.75rem; padding:1rem; }
.cv-details summary { cursor:pointer; font-size:.75rem; font-weight:700; color:#38bdf8; display:flex; align-items:center; gap:.5rem; }
.cv-lead { font-size:.75rem; color:#94a3b8; margin:.75rem 0 .5rem; }
.cv-ul { font-size:.75rem; line-height:1.6; color:#cbd5e1; list-style:disc; padding-left:1.25rem; }
.cv-ul li + li { margin-top:.375rem; }
.cv-alpha { list-style:lower-alpha; }
.cv-refs { margin-top:.75rem; }

/* Pathways: FAMUS and FUSIC Heart side by side (stacked on small screens); each step is a compact row: number on the left, text on the right */
.pw-paths { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:900px) { .pw-paths { grid-template-columns:1fr 1fr; align-items:start; } .pw-paths .pw-path:nth-child(3) { grid-column:1 / -1; } .pw-paths .pw-prereq { grid-template-columns:1fr 1fr; } }
@media (min-width:1200px) { .pw-paths { grid-template-columns:repeat(3,minmax(0,1fr)); } .pw-paths .pw-path:nth-child(3) { grid-column:auto; } .pw-paths .pw-prereq { grid-template-columns:1fr; } }
.pw-prereq { display:grid; grid-template-columns:1fr; gap:.9rem; }




.pw-paths .pw-prereq .text-xs { font-size:.8rem; }
.pw-paths .pw-path { border:1px solid #1e293b; border-radius:1rem; background:rgba(9,14,26,.55); padding:1.1rem 1.1rem 1.2rem; }
.pw-paths .pw-subtitle { padding-bottom:.7rem; margin-bottom:.9rem; border-bottom:1px solid #1e293b; }






.pw-paths .pw-note { margin:0 0 1rem; }





/* ===================== Logbook (logbook.php, admin Logbook Progress) ===================== */
.lb-page { display:flex; flex-direction:column; gap:1.25rem; }
.lb-title { font-size:1.25rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:.6rem; }
.lb-title i { color:#38bdf8; }
.lb-sub { font-size:.8rem; color:#94a3b8; margin-top:.25rem; max-width:48rem; line-height:1.5; }
.lb-tabs { display:flex; flex-wrap:wrap; gap:.5rem; border-bottom:1px solid #1e293b; padding-bottom:.6rem; }
.lb-tab { font-size:.78rem; font-weight:700; padding:.5rem 1rem; border-radius:.75rem; background:#090e1a; color:#94a3b8; border:1px solid #1e293b; display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; }
.lb-tab:hover { color:#fff; }
.lb-tab-on { background:#0369a1; color:#fff; border-color:#38bdf8; }
.lb-notice, .lb-alert { display:flex; gap:.75rem; align-items:flex-start; border-radius:.9rem; padding:.85rem 1rem; font-size:.78rem; line-height:1.55; }
.lb-notice { background:rgba(14,165,233,.08); border:1px solid rgba(14,165,233,.35); color:#cbd5e1; }
.lb-notice i { color:#38bdf8; margin-top:.15rem; }
.lb-notice b { color:#e0f2fe; }
.lb-alert { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.5); color:#fde68a; }
.lb-alert i { color:#fbbf24; margin-top:.15rem; }
.lb-alert .lb-alert-ico { font-size:1.9rem; line-height:1; margin-top:.1rem; }
.lb-alert-link { transition:border-color .15s, background .15s; }
.lb-alert-open { transition:color .15s; }
@media (hover:hover) { .lb-alert-link:hover { border-color:rgba(251,191,36,.85); } .lb-alert-link:hover .lb-alert-open { color:#fff7d6; } }
.lb-actionbar { display:flex; flex-wrap:wrap; gap:.6rem; }
.lb-inline { display:inline; margin:0; }
.lb-hidden { display:none !important; }

.lb-form { scroll-margin-top:11rem; background:#131c33; border:1px solid #334155; border-radius:1rem; padding:1.1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.9rem; }
.lb-form h3 { font-size:1.125rem; font-weight:700; color:#fff; }
.lb-grid-form { display:grid; grid-template-columns:1fr; gap:.8rem; }
@media (min-width:700px) { .lb-grid-form { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .lb-grid-form { grid-template-columns:repeat(4,1fr); } }
.lb-grid-2 { grid-template-columns:1fr; }
@media (min-width:700px) { .lb-grid-2 { grid-template-columns:1fr 1fr; } }
.lb-field { display:flex; flex-direction:column; gap:.35rem; font-size:.72rem; }
.lb-field > span { font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; font-size:.65rem; }
.lb-field em { font-style:normal; text-transform:none; letter-spacing:0; font-weight:500; color:#64748b; }
.lb-full { grid-column:1 / -1; }
.lb-field input, .lb-field select, .lb-field textarea { width:100%; background:#090e1a; border:1px solid #334155; border-radius:.6rem; padding:.55rem .65rem; color:#fff; font-size:.8rem; font-family:inherit; }
.lb-field input:focus, .lb-field select:focus, .lb-field textarea:focus { outline:2px solid #0ea5e9; outline-offset:0; border-color:#0ea5e9; }
.lb-field textarea { resize:vertical; min-height:3.2rem; }
.lb-field input[type=date] { color-scheme:dark; -webkit-appearance:none; appearance:none; display:block; min-width:0; max-width:100%; box-sizing:border-box; min-height:2.45rem; text-align:left; }
.lb-pathfields { border:1px solid #1e293b; border-radius:.75rem; padding:.7rem .85rem .8rem; background:#0b1329; }
.lb-pathfields legend { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; padding:0 .4rem; }
.lb-pathfields legend small { text-transform:none; letter-spacing:0; font-weight:500; color:#64748b; }
.lb-checks { display:grid; grid-template-columns:1fr; gap:.4rem .9rem; }
@media (min-width:700px) { .lb-checks { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .lb-checks { grid-template-columns:repeat(3,1fr); } }
.lb-check { display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:#cbd5e1; cursor:pointer; }
.lb-check input { accent-color:#0ea5e9; width:1rem; height:1rem; }
.lb-hint { font-size:.72rem; color:#94a3b8; line-height:1.5; }
.lb-form-actions { display:flex; gap:.6rem; flex-wrap:wrap; }

.lb-section { background:#0f172a; border:1px solid #1e293b; border-radius:1rem; padding:1.1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.85rem; }
.lb-section > h3 { font-size:1.125rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:.5rem; }
.lb-section > h3 i { color:#38bdf8; }

.lb-cards { display:grid; grid-template-columns:1fr; gap:.8rem; }
@media (min-width:700px) { .lb-cards { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px) { .lb-cards { grid-template-columns:repeat(3,1fr); } }
.lb-card { background:#090e1a; border:1px solid #1e293b; border-radius:.9rem; padding:.85rem .95rem; display:flex; flex-direction:column; gap:.4rem; }
.lb-card-head { display:flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:700; color:#fff; margin-bottom:.15rem; }
.lb-card-head i { color:#38bdf8; }
.lb-card-head b { margin-left:auto; font-size:.68rem; font-weight:700; color:#94a3b8; background:#131c33; border:1px solid #334155; border-radius:999px; padding:.1rem .55rem; }
.lb-row { display:flex; justify-content:space-between; gap:.5rem; font-size:.74rem; color:#cbd5e1; margin-top:.15rem; }
.lb-row > span:last-child { font-weight:700; color:#fff; }
.lb-bar { height:.45rem; border-radius:999px; background:#1e293b; overflow:hidden; display:flex; }
.lb-bar-none { background:transparent; height:.1rem; }
.lb-fill { display:block; height:100%; border-radius:999px; }
.lb-zero { background:#334155; }
.lb-part { background:#0ea5e9; }
.lb-ok { background:#10b981; }
.lb-done { color:#34d399 !important; }
.lb-muted { color:#94a3b8 !important; font-weight:600 !important; }
.lb-month { margin-top:.35rem; padding-top:.45rem; border-top:1px solid #1e293b; }
.lb-month-ok > span:last-child { color:#34d399; }
.lb-month-todo > span:last-child { color:#fbbf24; }

.lb-scroll { overflow-x:auto; }
.lb-grid { width:100%; min-width:560px; border-collapse:separate; border-spacing:3px; font-size:.74rem; text-align:center; }
.lb-grid th { color:#94a3b8; font-weight:700; padding:.35rem .2rem; font-size:.68rem; }
.lb-grid th.lb-cur { color:#7dd3fc; }
.lb-grid .lb-l { text-align:left; color:#e2e8f0; font-weight:700; padding-left:.2rem; white-space:nowrap; }
.lb-grid td { border-radius:.4rem; padding:.45rem .2rem; font-weight:700; }
.lb-c-ok { background:rgba(16,185,129,.22); color:#6ee7b7; }
.lb-c-miss { background:rgba(244,63,94,.18); color:#fda4af; }
.lb-c-now { background:rgba(14,165,233,.15); color:#7dd3fc; outline:1px solid rgba(14,165,233,.55); }
.lb-c-future { background:#0b1329; color:#475569; }
.lb-c-min { background:transparent !important; color:#94a3b8 !important; }
.lb-legend { display:flex; flex-wrap:wrap; gap:1rem; font-size:.68rem; color:#94a3b8; }
.lb-legend span { display:inline-flex; align-items:center; gap:.35rem; }
.lb-sw { display:inline-block; width:.8rem; height:.8rem; border-radius:.2rem; }

.lb-paths { display:grid; grid-template-columns:1fr; gap:.9rem; }
@media (min-width:700px) { .lb-paths { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px) { .lb-paths { grid-template-columns:repeat(3,1fr); } }
.lb-pathgroup { background:#090e1a; border:1px solid #1e293b; border-radius:.9rem; padding:.8rem .95rem; display:flex; flex-direction:column; gap:.55rem; }
.lb-pathgroup h4 { color:#38bdf8; }
.lb-path { display:flex; flex-direction:column; gap:.25rem; }
.lb-path-top { display:flex; justify-content:space-between; gap:.6rem; font-size:.74rem; color:#cbd5e1; }
.lb-path-top > span:last-child { font-weight:700; color:#fff; white-space:nowrap; }

.lb-details { background:#090e1a; border:1px solid #1e293b; border-radius:.9rem; padding:.2rem .9rem; }
.lb-details > summary { cursor:pointer; list-style:none; padding:.7rem 0; font-size:.82rem; font-weight:700; color:#e2e8f0; display:flex; align-items:center; gap:.5rem; }
.lb-details > summary::-webkit-details-marker { display:none; }
.lb-details > summary::after { content:""; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.6rem; margin-left:auto; color:#64748b; }
.lb-details[open] > summary::after { content:""; }
.lb-details > summary i { color:#38bdf8; }
.lb-details > summary b { font-size:.68rem; color:#94a3b8; background:#131c33; border:1px solid #334155; border-radius:999px; padding:.05rem .5rem; }
.lb-empty { font-size:.75rem; color:#64748b; padding:0 0 .8rem; }
.lb-table { width:100%; min-width:640px; border-collapse:collapse; font-size:.74rem; margin-bottom:.8rem; }
.lb-table th { text-align:left; color:#94a3b8; font-size:.65rem; text-transform:uppercase; letter-spacing:.04em; padding:.4rem .5rem; border-bottom:1px solid #1e293b; }
.lb-table td { padding:.55rem .5rem; border-bottom:1px solid #131c33; vertical-align:top; color:#cbd5e1; }
.lb-table tbody tr { transition:background-color .12s; }
@media (hover:hover) { .lb-table tbody tr:hover > td { background:#16213b; } }
.lb-wide { min-width:14rem; }
.lb-nowrap { white-space:nowrap; }
.lb-interp { margin-top:.35rem; color:#94a3b8; font-size:.7rem; }
.lb-interp b { color:#7dd3fc; font-weight:700; }
.lb-type { font-size:.65rem; font-weight:700; border-radius:.4rem; padding:.12rem .45rem; border:1px solid; }
.lb-type-supervised { background:rgba(14,165,233,.12); color:#7dd3fc; border-color:rgba(14,165,233,.5); }
.lb-type-mentored { background:rgba(16,185,129,.12); color:#6ee7b7; border-color:rgba(16,185,129,.5); }
.lb-actions { text-align:right; }

/* Super Admin: trainee progress table */
.lbp-wrap { overflow-x:auto; border:1px solid #1e293b; border-radius:.75rem; }   /* same look as the Manage Tutors table */
.lbp-table { width:100%; min-width:760px; border-collapse:collapse; font-size:.75rem; }
.lbp-table th { text-align:left; background:#090e1a; color:#94a3b8; font-size:.625rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:.5rem .75rem; border-bottom:1px solid #1e293b; }
.lbp-table td { padding:.5rem .75rem; border-bottom:1px solid #1e293b; vertical-align:middle; color:#cbd5e1; }
.lbp-table tbody tr:last-child td { border-bottom:0; }
.lbp-table tr.lbp-row:hover td { background:#131c33; }
.lbp-name { font-weight:700; color:#fff; }
.lbp-name small { display:block; font-weight:500; color:#64748b; font-size:.66rem; }
.lbp-flag { font-size:.65rem; font-weight:700; border-radius:.4rem; padding:.15rem .5rem; border:1px solid; white-space:nowrap; display:inline-block; }
.lbp-flag-ok { background:rgba(16,185,129,.12); color:#6ee7b7; border-color:rgba(16,185,129,.5); }
.lbp-flag-bad { background:rgba(245,158,11,.12); color:#fcd34d; border-color:rgba(245,158,11,.5); }
.lbp-flag-none { background:#131c33; color:#94a3b8; border-color:#334155; }
.lbp-detail { background:#0b1329; border:1px solid #1e293b; border-radius:1rem; padding:1.1rem; display:flex; flex-direction:column; gap:1rem; }
.lbp-detail h5 { font-size:.8rem; font-weight:700; color:#e2e8f0; margin-bottom:.4rem; }
.lbp-note { background:#090e1a; border:1px solid #1e293b; border-radius:.75rem; padding:.7rem .85rem; font-size:.76rem; color:#cbd5e1; line-height:1.5; }
.lbp-note small { display:block; color:#64748b; font-size:.66rem; margin-bottom:.2rem; }
.lbp-note .lbp-flag { margin-right:.4rem; }
.lbp-note-form { display:grid; gap:.6rem; }
.lbp-note-form textarea, .lbp-note-form select { width:100%; background:#090e1a; border:1px solid #334155; border-radius:.6rem; padding:.55rem .65rem; color:#fff; font-size:.78rem; font-family:inherit; }
.lbp-back { display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:700; color:#7dd3fc; text-decoration:none; }
.lbp-back:hover { text-decoration:underline; }

.lb-pending { display:inline-flex; align-items:center; gap:.3rem; font-size:.65rem; font-weight:700; color:#fcd34d; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.5); border-radius:.4rem; padding:.12rem .5rem; white-space:nowrap; }
.lb-pendline { font-size:.7rem; font-weight:700; color:#fcd34d; display:flex; align-items:center; gap:.4rem; }
.lb-pendfill { background:#f59e0b; border-radius:0; }
.lb-pendtxt { color:#fcd34d; font-weight:700; font-size:.85em; }

.lb-card { min-height:12.2rem; }

.lb-notice { font-size:.8rem; }
.lb-yearbadge { background:#082f49; color:#7dd3fc; border:1px solid rgba(14,165,233,.4); font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.25rem .6rem; border-radius:.5rem; margin-left:.4rem; white-space:nowrap; }
.lb-actionbar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.lb-actionbar-right { margin-left:auto; display:flex; flex-wrap:wrap; gap:.5rem; }
.lb-ok-sup, .lb-fill.lb-sup { background:#059669; }
.lb-bullets { margin:.2rem 0 0; padding-left:1.1rem; font-size:.78rem; line-height:1.6; color:#cbd5e1; list-style:disc; display:flex; flex-direction:column; gap:.25rem; }
.lb-bullets b { color:#fff; }
.lb-import-form { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.lb-file { font-size:.8rem; color:#cbd5e1; background:#0b1220; border:1px solid #334155; border-radius:.6rem; padding:.45rem .6rem; max-width:100%; }

.lb-type-supervised { background:rgba(134,239,172,.2); color:#bbf7d0; border-color:rgba(134,239,172,.6); }
.lb-type-mentored { background:#1e3a8a; color:#dbeafe; border-color:#3b82f6; }
.lb-imported { display:inline-block; margin-top:.2rem; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#c4b5fd; background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.5); border-radius:.4rem; padding:.08rem .4rem; white-space:nowrap; }

/* Compact analytics tiles: 4 per row on the dashboard so more stat tiles fit (add tiles inside .stat-grid any time) */
.stat-grid { gap:.6rem; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.stat-grid > .stat-wide { grid-column:span 2; }
@media (min-width: 900px) { .stat-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.stat-grid > div { padding:.65rem .8rem !important; min-height:4.6rem !important; gap:.5rem; }
.stat-grid > div .space-y-1 > * + * { margin-top:.12rem !important; }
.stat-grid .w-10.h-10 { width:1.9rem !important; height:1.9rem !important; font-size:.85rem !important; border-radius:.55rem !important; flex:0 0 auto; }
.stat-grid h4.text-2xl { font-size:1.3rem; line-height:1.2; }
.stat-grid .stat-wide .text-2xl { font-size:1.3rem; }
.stat-grid .stat-wide .mb-2 { margin-bottom:.35rem !important; }
.stat-grid .stat-wide .mt-1\.5 { margin-top:.2rem !important; }

.beta-badge { font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fcd34d; background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.6); border-radius:.2rem; padding:.18rem .5rem; align-self:flex-start; margin-top:.35rem; line-height:1.2; }

/* Logbook header: title, notice, collapsible How To Use, tabs */
.lb-top-stack { display:flex; flex-direction:column; gap:1rem; }

/* Monthly minimum table: row headings stay put while the months scroll sideways */
.lb-grid .lb-l { position:sticky; left:0; z-index:1; background:#0f172a; padding-right:.5rem; box-shadow:6px 0 6px -4px rgba(2,6,23,.8); }

/* Pathologies to see: one small box per required scan, filled green as scans are logged */
.lb-boxes { display:flex; flex-wrap:wrap; gap:3px; }
.lb-box { display:block; width:.65rem; height:.65rem; border-radius:.15rem; border:1px solid #334155; background:#0b1329; }
.lb-box-on { background:#10b981; border-color:#34d399; }
.lb-path-met, .lb-path-met > span:last-child { color:#34d399; }

/* Manage sessions: the Update Details button sits at the far right of its row, like Delete and Add Student */
@media (min-width: 1024px) { .upd-btn-cell { grid-column: 5 / span 2; } }

/* Admin Statistics tab grids */
.stat-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.stat-tiles > *{min-width:0;overflow-wrap:anywhere}
@media(min-width:720px){.stat-tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}}
.stat-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
@media(min-width:560px){.stat-pair{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}

/* News (dashboard panel, news page, editor) */
.news-summary{font-size:13.5px;line-height:1.6;color:#cbd5e1}
.news-article-summary{font-size:15px;line-height:1.6;color:#e2e8f0}
.news-article-body{font-size:15px;line-height:1.75;color:#cbd5e1}
.news-article-body strong{color:#fff}
/* News article text: shared by the News page (.news-article-body) and the editor box in admin.php (.news-ed-area) */
.news-ed-area{font-size:15px;line-height:1.75;color:#cbd5e1}
.news-article-body p,.news-ed-area p{margin:0 0 .85em}
.news-article-body>:last-child{margin-bottom:0}
/* Heading (h3): bold white. Subheading (h4): normal size, bold blue */
.news-article-body h3,.news-ed-area h3{font-size:1.05rem;line-height:1.4;font-weight:700;color:#fff;margin:1.1em 0 .4em;text-transform:none;letter-spacing:normal}
.news-article-body h4,.news-ed-area h4{font-size:15px;line-height:1.75;font-weight:400;color:#7dd3fc;margin:.9em 0 .3em;text-transform:none;letter-spacing:normal}
.news-article-body h3:first-child,.news-article-body h4:first-child,.news-ed-area h3:first-child,.news-ed-area h4:first-child{margin-top:0}
.news-ed-area strong,.news-ed-area b{color:#fff}
.news-article-body mark,.news-ed-area mark{background:#fde047;color:#1e293b;padding:0 4px;border-radius:3px}
.news-article-body hr,.news-ed-area hr{border:0;border-top:1px solid #334155;margin:1.2em 0}
.news-article-body blockquote,.news-ed-area blockquote{border-left:3px solid #38bdf8;margin:0 0 .85em;padding:.1em 0 .1em 1rem;color:#94a3b8}
.news-article-body blockquote p:last-child,.news-ed-area blockquote p:last-child{margin-bottom:0}
.news-ed-area a{color:#7dd3fc;text-decoration:underline}
.news-list{list-style:disc;margin:.4rem 0 .6rem 1.6rem}
.news-list-ol{list-style:decimal}
.news-list .news-list{list-style:circle;margin:.2rem 0 .2rem 1.4rem}
.news-list .news-list-ol{list-style:decimal}
.news-list li{margin:.2rem 0}
.news-ed-area ul,.news-ed-area ol{list-style:disc;margin:.4rem 0 .6rem 1.6rem}
.news-ed-area ol{list-style:decimal}
.news-ed-area li ul,.news-ed-area li ol{margin:.2rem 0 .2rem 1.4rem}
.news-ed-area li ul{list-style:circle}
.news-ed-area li{margin:.2rem 0}
.news-img{max-width:100%;height:auto;border-radius:.5rem;margin:.4rem 0}
.news-table-wrap{overflow-x:auto;margin:0 0 .85em}
.news-article-body table,.news-ed-area table{border-collapse:collapse;margin:0 0 .85em;min-width:40%}
.news-article-body th,.news-article-body td,.news-ed-area th,.news-ed-area td{border:1px solid #334155;padding:.4rem .7rem;text-align:left;vertical-align:top;min-width:3rem}
.news-article-body th,.news-ed-area th{background:#1e293b;color:#fff;font-weight:700}

/* News editor box (admin.php > Content > News) */
.news-ed{position:relative}
.news-ed-bar,.news-ed-tablebar{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.4rem;background:#0f172a;border:1px solid #1e293b;border-bottom:0}
.news-ed-bar{border-radius:.5rem .5rem 0 0}
.news-ed-tablebar{background:#0c1a2e;border-top:1px solid #1e293b;padding:.3rem .4rem}
.news-ed-bar[hidden],.news-ed-tablebar[hidden],.news-ed-pop[hidden],.news-ed-msg[hidden],.news-ed-pop-err[hidden]{display:none}
.news-ed-sep{width:1px;align-self:stretch;margin:.2rem .3rem;background:#334155}
.news-ed-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #334155;background:#131c33;color:#e2e8f0;font-size:13px;cursor:pointer}
.news-ed-btn:hover:not(:disabled){background:#1e293b}
.news-ed-btn[aria-pressed=true]{background:#0c4a6e;border-color:#38bdf8;color:#fff}
.news-ed-btn:disabled{opacity:.35;cursor:not-allowed}
.news-ed-tbtn{padding:.25rem .6rem;border-radius:8px;border:1px solid #334155;background:#131c33;color:#e2e8f0;font-size:12px;cursor:pointer}
.news-ed-tbtn:hover{background:#1e293b}
.news-ed-tbtn[data-act=tableDel]{color:#fda4af;border-color:rgba(244,63,94,.5)}
.news-ed-btn:focus-visible,.news-ed-tbtn:focus-visible,.news-ed-pop button:focus-visible,.news-ed-pop input:focus-visible{outline:2px solid #38bdf8;outline-offset:1px}
.news-ed-area{height:clamp(12rem,50vh,26rem);height:clamp(12rem,50dvh,26rem);overflow-y:auto;overflow-x:auto;padding:.75rem .9rem;background:#090e1a;border:1px solid #1e293b;border-radius:0 0 .5rem .5rem;outline:none;position:relative}
.news-ed-area:focus{border-color:#38bdf8}
.news-ed-area[data-empty=true]::before{content:attr(data-placeholder);position:absolute;color:#64748b;pointer-events:none}
.news-ed-area img{max-width:100%;height:auto;border-radius:.5rem}
.news-ed-area td,.news-ed-area th{min-width:4rem}
.news-ed-msg{margin:.4rem 0 0;font-size:12px;color:#fcd34d}
.news-ed-pop{position:absolute;z-index:30;width:21rem;max-width:calc(100% - 1rem);background:#0f172a;border:1px solid #334155;border-radius:.6rem;padding:.75rem;box-shadow:0 12px 30px rgba(0,0,0,.55)}
.news-ed-pop-menu{width:auto;min-width:11rem;padding:.3rem}
.news-ed-pop-title{font-weight:700;color:#fff;font-size:13px;margin-bottom:.5rem}
.news-ed-field{display:block;margin-bottom:.55rem}
.news-ed-field span{display:block;color:#94a3b8;font-weight:700;margin-bottom:.2rem}
.news-ed-field small{display:block;color:#64748b;margin-top:.2rem;font-size:11px}
.news-ed-field input{width:100%;background:#090e1a;border:1px solid #334155;border-radius:.5rem;padding:.4rem .5rem;color:#fff}
.news-ed-pop-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}
.news-ed-pop-ok{padding:.35rem .9rem;border-radius:.6rem;background:#0284c7;color:#fff;font-weight:700;border:0;cursor:pointer}
.news-ed-pop-ok:hover{background:#0ea5e9}
.news-ed-pop-cancel{padding:.35rem .8rem;border-radius:.6rem;border:1px solid #475569;background:transparent;color:#e2e8f0;cursor:pointer}
.news-ed-pop-cancel:hover{background:#1e293b}
.news-ed-pop-err{color:#fda4af;font-size:12px;margin:0 0 .4rem}
.news-ed-menuitem{display:block;width:100%;text-align:left;padding:.4rem .7rem;border-radius:.4rem;background:transparent;border:0;color:#e2e8f0;cursor:pointer}
.news-ed-menuitem:hover{background:#1e293b}
.news-ed-menu-h3{font-weight:700;color:#fff}
.news-ed-menu-h4{font-weight:400;color:#7dd3fc}

/* ---- Assessments ---- */
.assess-sec { border:1px solid rgba(148,163,184,.25); border-radius:.7rem; padding:.7rem .85rem; margin-bottom:.7rem; background:rgba(15,23,42,.35); }
.assess-sec-head { margin-bottom:.5rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.assess-row { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; padding:.4rem 0; border-top:1px solid rgba(148,163,184,.15); }
/* Admin assessment panel: name | status | buttons | PDF icon on one roomier row (wraps on phones) */
.assess-admin-panel .assess-row { display:grid; grid-template-columns:minmax(11rem,max-content) minmax(5rem,1fr) auto 1.8rem; gap:.5rem .8rem; padding:.85rem 0; }
.assess-admin-panel .assess-name { min-width:0; font-size:.95rem; }
.assess-admin-panel .assess-state { min-width:0; font-size:.85rem; text-align:left; }
.assess-admin-panel .assess-dot { width:1.9rem; height:1.9rem; font-size:.9rem; }
.assess-admin-panel .assess-acts { justify-content:flex-end; }
.assess-admin-panel .assess-acts .btn-sm { padding:.4rem .8rem; font-size:.8rem; }
.assess-admin-panel .assess-row > .assess-pdf { justify-self:end; font-size:1.2rem; }
@media (max-width:560px) { .assess-admin-panel .assess-row { display:flex; } }
.assess-name { min-width:12rem; font-weight:600; font-size:.85rem; display:flex; align-items:center; gap:.4rem; }
.assess-state { min-width:9rem; font-size:.78rem; opacity:.85; }
.assess-acts { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
.assess-pend { color:#fcd34d; font-size:.75rem; font-weight:700; }
.assess-dot { display:inline-flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem; border-radius:999px; font-size:.8rem; flex:none; }
.assess-grey { background:rgba(148,163,184,.2); color:#94a3b8; }
.assess-amber { background:rgba(245,158,11,.2); color:#fbbf24; }
.assess-green { background:rgba(16,185,129,.2); color:#34d399; }
.assess-red { background:rgba(244,63,94,.2); color:#fb7185; }
.assess-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:.6rem; }
.assess-card { display:flex; gap:.6rem; align-items:flex-start; padding:.6rem .7rem; border-radius:.6rem; border:1px solid rgba(148,163,184,.25); }
.assess-card-amber { border-color:rgba(245,158,11,.55); background:rgba(245,158,11,.07); }
.assess-card-green { border-color:rgba(16,185,129,.5); background:rgba(16,185,129,.07); }
.assess-card-red { border-color:rgba(244,63,94,.5); background:rgba(244,63,94,.07); }
.assess-msg { font-size:.76rem; opacity:.9; margin-top:.15rem; }
.assess-msg a { color:#fcd34d; text-decoration:underline; }
.assess-banner { margin-top:.7rem; padding:.7rem 1rem; border-radius:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:center; color:#3b2a00; background:linear-gradient(135deg,#fde68a,#f59e0b 55%,#fbbf24); border:1px solid #b45309; box-shadow:0 0 18px rgba(245,158,11,.35); }
.assess-banner small { font-weight:600; letter-spacing:0; text-transform:none; margin-left:.5rem; }
.assess-gold { color:#3b2a00; background:linear-gradient(135deg,#fde68a,#f59e0b); border-radius:999px; padding:.1rem .6rem; font-size:.7rem; font-weight:700; }
.assess-signoff { margin-top:.6rem; padding-top:.5rem; border-top:1px dashed rgba(148,163,184,.25); }
.assess-hist { font-size:.78rem; margin-top:.4rem; } .assess-hist ul { margin:.3rem 0 0 1rem; list-style:disc; }
.assess-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.1rem .5rem; border-radius:.35rem; background:rgba(245,158,11,.15); color:#fcd34d; border:1px solid rgba(245,158,11,.5); }
.assess-pill { display:inline-block; font-size:.6rem; font-weight:700; padding:.05rem .2rem; border-radius:.3rem; margin:0; }
.assess-pill.assess-grey { background:rgba(148,163,184,.18); } .assess-pill.assess-amber { background:rgba(245,158,11,.2); } .assess-pill.assess-green { background:rgba(16,185,129,.2); } .assess-pill.assess-red { background:rgba(244,63,94,.2); }
.assess-pending-box { border:1px solid rgba(245,158,11,.55); background:rgba(245,158,11,.08); border-radius:.8rem; padding:.8rem 1rem; }
.assess-flash { animation:assessFlash 2.4s ease-out 1; }
@keyframes assessFlash { 0%,40% { box-shadow:0 0 0 3px #f59e0b; background:rgba(245,158,11,.18);} 100% { box-shadow:none; } }
.assess-mix { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .9rem; }
.assess-mix label { white-space:nowrap; }
.assess-formlink { color:#7dd3fc; font-size:.72rem; text-decoration:underline; white-space:nowrap; }
.assess-formlink:hover { color:#bae6fd; }

.sess-panels { display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-start; }
.assess-badge-row { display:inline-flex; flex-wrap:wrap; gap:.35rem .5rem; align-items:center; }
@media (max-width:640px) { .assess-badge-row { flex-basis:100%; } }
.assess-results { border:1px solid rgba(245,158,11,.4); background:#090e1a; border-radius:.75rem; padding:.75rem; font-size:.75rem; }
.assess-results-todo { border-color:#f59e0b; box-shadow:0 0 0 1px rgba(245,158,11,.35); background:#090e1a; }
.assess-result-row { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem; padding:.45rem 0; border-top:1px solid rgba(148,163,184,.15); font-size:.72rem; }
.assess-todo-pill { display:inline-block; background:#f59e0b; color:#0f172a; font-size:.62rem; font-weight:700; padding:.05rem .45rem; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.assess-btn { display:inline-flex; align-items:center; gap:.3rem; font-weight:700; font-size:.75rem; padding:.3rem .9rem; border-radius:.55rem; background:transparent; border:2px solid; cursor:pointer; transition:background .15s, color .15s, transform .1s, box-shadow .15s; }
.assess-btn-pass { color:#34d399; border-color:#10b981; }
.assess-btn-pass:hover, .assess-btn-pass:focus-visible { background:#10b981; color:#fff; box-shadow:0 0 0 3px rgba(16,185,129,.35); transform:translateY(-1px); }
.assess-btn-fail { color:#fb7185; border-color:#f43f5e; }
.assess-btn-fail:hover, .assess-btn-fail:focus-visible { background:#f43f5e; color:#fff; box-shadow:0 0 0 3px rgba(244,63,94,.35); transform:translateY(-1px); }

/* Assessment inside "Your progress" */
.lb-assess-sub { background:#090e1a; border:1px solid #1e293b; border-radius:.9rem; padding:.7rem .85rem .8rem; }
.lb-assess-sub-head { font-size:.82rem; font-weight:700; color:#fff; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
.lb-assess-sub-head i { color:#f59e0b; }
.assess-student .assess-sec { border:0; background:transparent; padding:0; margin:0; }
.assess-student .assess-grid { grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.55rem; }
.assess-student .assess-card { align-items:center; gap:.55rem; padding:.4rem .65rem; background:#0f172a; border:1px solid #1e293b; border-radius:.7rem; transition:background .15s, border-color .15s, transform .12s; }
.assess-student .assess-card:hover { background:#16213b; border-color:#38bdf8; transform:translateY(-1px); }
.assess-student .assess-card-green { border-color:rgba(16,185,129,.45); }
.assess-student .assess-card-green:hover { background:rgba(16,185,129,.14); border-color:#10b981; }
.assess-student .assess-card-amber:hover { background:rgba(245,158,11,.14); border-color:#f59e0b; }
.assess-student .assess-card-red:hover { background:rgba(244,63,94,.14); border-color:#f43f5e; }
.assess-student .assess-card-body { min-width:0; line-height:1.25; }
.assess-student .assess-card-body > b { font-size:.8rem; color:#fff; }
.assess-student .assess-msg { font-size:.72rem; margin-top:.05rem; color:#94a3b8; }
.assess-student .assess-msg-green { color:#34d399; font-weight:700; letter-spacing:.04em; }
.assess-student .assess-msg-amber { color:#fcd34d; }
.assess-student .assess-msg-red { color:#fb7185; font-weight:700; }
.assess-student .assess-dot { width:1.4rem; height:1.4rem; font-size:.7rem; }
.assess-student .assess-banner { margin-top:.55rem; padding:.45rem .8rem; }

/* PDF icon on assessment cards */
.assess-pdf { flex:none; margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:1.7rem; height:1.7rem; border-radius:.45rem; color:#f87171; font-size:1rem; transition:background .15s, color .15s; text-decoration:none; }
.assess-pdf:hover, .assess-pdf:focus-visible { background:#f87171; color:#fff; }
/* Ready link: no underline, highlight on hover */
.assess-student .assess-msg a, .assess-msg a { text-decoration:none; color:#fcd34d; font-weight:700; padding:.05rem .3rem; margin-left:-.3rem; border-radius:.35rem; transition:background .15s, color .15s; }
.assess-student .assess-msg a:hover, .assess-msg a:hover { background:#f59e0b; color:#0f172a; }
/* Pending-scans signing box: readable dropdown and slightly larger text */
.lb-alert select, .lb-alert input[type=text] { background:#0f172a; color:#f1f5f9; border:1px solid #475569; border-radius:.5rem; padding:.45rem .6rem; font-size:.85rem; }
.lb-alert select option { background:#0f172a; color:#f1f5f9; }
.lb-alert select:hover, .lb-alert select:focus, .lb-alert input[type=text]:focus { border-color:#fbbf24; outline:none; }
form.lb-alert { font-size:.88rem; }

/* Assessment cell sits in the progress grid, to the right of the last module card */
.lb-cards-extra { grid-column:1 / -1; }
@media (min-width:1100px) { .lb-cards-extra { grid-column:span 2; } }
.lb-cards-extra .lb-assess-sub { height:100%; }
@media (min-width:640px) { .assess-student .assess-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:639px) { .assess-student .assess-grid { grid-template-columns:1fr; } }
.assess-msg a { white-space:nowrap; display:inline-block; }
/* Super Admin trainee assessment panels: same dark look as the progress panels */
.assess-sec { background:#090e1a; border-color:#1e293b; }

/* Admin panel sub-menu tabs: hover highlight */
.tab-btn { transition:background-color .15s, color .15s; }
.tab-btn:not(.bg-sky-600):hover { background-color:#1b2a4a !important; color:#fff !important; }
.tab-btn.bg-sky-600:hover { background-color:#0ea5e9 !important; }

/* Former student note sits in the action bar */
.lb-former-note { display:flex; gap:.55rem; align-items:flex-start; flex:1 1 22rem; min-width:0; background:rgba(76,5,25,.55); border:1px solid rgba(244,63,94,.65); color:#fecdd3; border-radius:.7rem; padding:.45rem .7rem; font-size:.74rem; line-height:1.4; }
.lb-former-note i { color:#fb7185; margin-top:.15rem; }
.lb-former-note .btn i { color:inherit; margin-top:0; }
/* How to use: button + popover */
/* Flash a changed area: yellow for a moment, then fade out over 1s */
@keyframes pocusFlash { 0%, 15% { background-color:rgba(250,204,21,.45); } }
.pocus-flash { animation:pocusFlash 1.25s ease-out; }

/* Anchored targets (#session-14 etc.) stop below the sticky header instead of being covered by it */
:root { --hdr-h: 140px; }
[id^="session-"], .admin-session-card, [id^="entries-"], .session-card { scroll-margin-top: calc(var(--hdr-h) + 14px); }

.assess-badge-mini { display:inline-block; font-size:.56rem; font-weight:700; letter-spacing:.05em; padding:0 .35rem; border-radius:.25rem; background:rgba(245,158,11,.15); color:#fcd34d; border:1px solid rgba(245,158,11,.5); line-height:1.35; }

/* ---- Cohort report (cohort_report.php) ---- */
.co-page { display:flex; flex-direction:column; gap:1.1rem; }
.co-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; }
.co-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.co-title h1 i { color:#38bdf8; }
.co-title p { font-size:.75rem; color:#94a3b8; margin-top:.2rem; }
.co-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); gap:.75rem; }
.co-tile { background:#0b1329; border:1px solid #1e293b; border-radius:1rem; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.15rem; transition:background .15s; }
.co-tile:hover { background:#101a36; }
.co-tile b { font-size:1.7rem; line-height:1.1; font-weight:700; color:#fff; }
.co-tile span { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; }
.co-tile.co-green b { color:#34d399; } .co-tile.co-sky b { color:#38bdf8; } .co-tile.co-amber b { color:#fbbf24; } .co-tile.co-grey b { color:#94a3b8; }
.co-card { background:#0f172a; border:1px solid #1e293b; border-radius:1.1rem; padding:1.15rem 1.2rem; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.co-card h2 { margin-bottom:.8rem; }
.co-mods { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.8rem; }
.co-mod { background:#0b1329; border:1px solid #1e293b; border-radius:.85rem; padding:.75rem .85rem; transition:background .15s; }
.co-mod:hover { background:#101a36; }
.co-mod-h { font-size:.78rem; font-weight:700; color:#e2e8f0; margin-bottom:.45rem; display:flex; align-items:center; gap:.4rem; }
.co-mod-h i { color:#38bdf8; }
.co-mod-n { font-size:.68rem; color:#94a3b8; margin-top:.4rem; line-height:1.4; } .co-mod-n b { color:#fff; }
.co-bar { height:.5rem; background:#1e293b; border-radius:999px; overflow:hidden; }
.co-bar i { display:block; height:100%; background:linear-gradient(90deg,#0ea5e9,#38bdf8); border-radius:999px; }
.co-bar i.co-complete { background:linear-gradient(90deg,#10b981,#34d399); } .co-bar i.co-behind { background:linear-gradient(90deg,#f59e0b,#fbbf24); } .co-bar i.co-none { background:#475569; }
.co-filter { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-bottom:.8rem; }
.co-filter h2 { margin:0; margin-right:auto; }
.co-chips { display:flex; flex-wrap:wrap; gap:.35rem; }
.co-chips button { font-size:.7rem; font-weight:700; padding:.35rem .75rem; border-radius:999px; background:#131c33; color:#94a3b8; border:1px solid #334155; cursor:pointer; transition:background .15s,color .15s; }
.co-chips button:hover { background:#1e293b; color:#fff; } .co-chips button.on { background:#0369a1; border-color:#38bdf8; color:#fff; }
#coSearch { background:#090e1a; border:1px solid #334155; border-radius:.6rem; padding:.4rem .7rem; font-size:.75rem; color:#fff; width:11rem; }
.co-scroll { overflow-x:auto; }
.co-table { width:100%; border-collapse:collapse; font-size:.76rem; min-width:56rem; }
.co-table th { text-align:left; font-size:.64rem; text-transform:uppercase; letter-spacing:.07em; color:#94a3b8; padding:.55rem .6rem; border-bottom:1px solid #1e293b; white-space:nowrap; }
.co-table td { padding:.6rem .6rem; border-bottom:1px solid rgba(30,41,59,.7); color:#cbd5e1; vertical-align:middle; }
.co-table tbody tr { transition:background .12s; } .co-table tbody tr:hover { background:rgba(30,41,59,.55); }
.co-table .c { text-align:center; white-space:nowrap; }
.co-name { color:#fff; font-weight:700; text-decoration:none; } .co-name:hover { color:#7dd3fc; }
.co-table small { display:block; font-size:.65rem; color:#64748b; margin-top:.1rem; }
.co-chip { display:inline-block; font-size:.66rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.co-chip.co-complete { background:rgba(16,185,129,.15); color:#6ee7b7; border-color:rgba(16,185,129,.4); }
.co-chip.co-ontrack { background:rgba(14,165,233,.15); color:#7dd3fc; border-color:rgba(14,165,233,.4); }
.co-chip.co-behind { background:rgba(245,158,11,.15); color:#fcd34d; border-color:rgba(245,158,11,.5); }
.co-chip.co-none { background:rgba(100,116,139,.18); color:#cbd5e1; border-color:rgba(100,116,139,.45); }
.co-ov { min-width:9rem; white-space:nowrap; } .co-ov .co-bar { width:5.5rem; display:inline-block; vertical-align:middle; margin-right:.45rem; } .co-ov b { color:#fff; }
.co-cell { display:inline-block; min-width:2.9rem; padding:.15rem .4rem; border-radius:.45rem; background:#131c33; color:#cbd5e1; font-weight:700; }
.co-cell.full { background:rgba(16,185,129,.18); color:#6ee7b7; } .co-cell.zero { color:#64748b; }
.co-pass { color:#34d399; margin-left:.2rem; } .co-ready { color:#fbbf24; margin-left:.2rem; } .co-na { color:#475569; }
.co-last { white-space:nowrap; color:#94a3b8; } .co-empty { text-align:center; color:#64748b; padding:1.5rem !important; }
.co-key { font-size:.68rem; color:#64748b; margin-top:.9rem; line-height:1.55; } .co-key b { color:#94a3b8; }
@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body, html { background:#fff !important; }
    header, footer, .no-print, #backToTopBtn, #idleWarn, nav { display:none !important; }
    .co-page { gap:.6rem; }
    .co-tile, .co-mod, .co-table tbody tr, .co-chips button { transition:none !important; }
    .co-title h1, .co-tile b, .co-card h2, .co-mod-h, .co-mod-n b, .co-name, .co-ov b { color:#0f172a !important; }
    .co-title p, .co-tile span, .co-mod-n, .co-table small, .co-key, .co-table th, .co-last { color:#475569 !important; }
    .co-tile, .co-card, .co-mod { background:#fff !important; border:1px solid #cbd5e1 !important; box-shadow:none !important; }
    .co-table td { color:#0f172a !important; border-color:#e2e8f0 !important; }
    .co-table { min-width:0; font-size:.68rem; }
    .co-bar { background:#e2e8f0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .co-bar i, .co-chip, .co-cell, .co-tile { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .co-cell { background:#f1f5f9 !important; color:#0f172a !important; } .co-cell.full { background:#d1fae5 !important; color:#065f46 !important; }
    .co-chip.co-complete { color:#065f46 !important; } .co-chip.co-ontrack { color:#075985 !important; } .co-chip.co-behind { color:#92400e !important; } .co-chip.co-none { color:#334155 !important; }
    .co-tr, .co-table tr { page-break-inside:avoid; }
    main, .max-w-7xl { max-width:none !important; padding:0 !important; }
}

/* ---- Privacy notice (privacy.php) ---- */
.pv-page { max-width:60rem; margin:0 auto; display:flex; flex-direction:column; gap:1.1rem; padding-bottom:1rem; }
.pv-head h1 i { color:#38bdf8; }
.pv-head p { font-size:.78rem; color:#94a3b8; margin-top:.25rem; }
.pv-card { background:#0f172a; border:1px solid #1e293b; border-radius:1.1rem; padding:1.25rem 1.4rem; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.pv-card p, .pv-card li { font-size:.85rem; line-height:1.65; color:#cbd5e1; }
.pv-card b { color:#fff; }
.pv-card a { color:#38bdf8; } .pv-card a:hover { text-decoration:underline; }
.pv-intro p { font-size:.92rem; }
.pv-warn { display:flex; gap:.9rem; align-items:flex-start; background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.45); }
.pv-warn i { color:#fbbf24; font-size:1.2rem; margin-top:.15rem; }
.pv-warn p { color:#fde68a; margin:0; } .pv-warn b { color:#fef3c7; }
.pv-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; align-items:start; }
.pv-col { display:flex; flex-direction:column; gap:1.1rem; }
.pv-card h2 { color:#38bdf8; margin:0 0 .75rem; display:flex; align-items:center; gap:.55rem; }
.pv-card ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.pv-card li { position:relative; padding-left:1.1rem; }
.pv-card li::before { content:""; position:absolute; left:0; top:.65em; width:.4rem; height:.4rem; border-radius:999px; background:#0ea5e9; }
@media (max-width:760px) { .pv-grid { grid-template-columns:1fr; } .pv-card { padding:1.1rem; } }

/* ---- Logbook: "How to use" button beside the title + inline panel ---- */
.lb-title-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; }
.lb-guide-btn { margin-left:auto; }

/* Site logo in the header (left of the title) */
.site-logo { width:64px; height:64px; flex:none; display:block; }
@media (max-width:640px) { .site-logo { width:48px; height:48px; } }
/* Header (title bar and menu) casts a soft shadow onto the page below */
body > header { box-shadow:0 8px 14px 5px rgba(0,0,0,.6); }

/* ---- Educational Resources ---- */
.res-media { position: relative; aspect-ratio: 16 / 9; background: #090e1a; border-radius: .6rem; overflow: hidden; }
.res-media img, .res-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.res-player { object-fit: contain; }
.res-media .res-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #334155; font-size: 2rem; }
.res-play { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; padding: 0; }
.res-play span { width: 3.2rem; height: 3.2rem; border-radius: 9999px; background: rgba(2, 132, 199, .92); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; padding-left: .15rem; transition: transform .15s, background .15s; }
.res-play:hover span, .res-play:focus-visible span { transform: scale(1.08); background: #0ea5e9; }
.res-year { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .5rem; border-radius: .25rem; border: 1px solid; }
.res-year-current { background: #0369a1; color: #fff; border-color: #38bdf8; }
.res-year-old { background: #451a03; color: #f59e0b; border-color: rgba(217, 119, 6, .45); }
.res-cat-head { font-size: .8rem; font-weight: 700; color: #cbd5e1; border-bottom: 1px solid #1e293b; padding-bottom: .35rem; margin-top: .5rem; }
.res-admin-row { background: #090e1a; border: 1px solid #1e293b; border-radius: .75rem; padding: .85rem; font-size: .75rem; }
.res-admin-row.is-archived { opacity: .7; border-style: dashed; }
.res-admin-main { display: flex; align-items: center; gap: .75rem; }
.res-admin-thumb { position: relative; flex: none; width: 96px; height: 54px; background: #131c33; border-radius: .4rem; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #334155; }
.res-admin-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.res-admin-info { flex: 1; min-width: 0; }
.res-status { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .5rem; border-radius: .25rem; border: 1px solid; }
.res-status.active { color: #6ee7b7; border-color: rgba(16, 185, 129, .4); background: #022c22; }
.res-status.archived { color: #fcd34d; border-color: rgba(217, 119, 6, .4); background: #451a03; }
.res-progress { position: relative; height: 1.5rem; background: #0b1220; border: 1px solid #38bdf8; border-radius: .5rem; overflow: hidden; max-width: 28rem; box-shadow: 0 0 10px rgba(56, 189, 248, .28); }
.res-progress div { height: 100%; width: 0; background: linear-gradient(90deg, #0369a1, #0ea5e9, #38bdf8, #0ea5e9, #0369a1); background-size: 200% 100%; animation: resBarMove 2.8s linear infinite; box-shadow: 0 0 12px rgba(56, 189, 248, .65), inset 0 0 8px rgba(186, 230, 253, .35); transition: width .2s; }
.res-progress::after { content: "Upload progress: " attr(data-pct) "%"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); pointer-events: none; }
@keyframes resBarMove { to { background-position: -200% 0; } }
.res-thumb-preview { display: flex; align-items: center; gap: .75rem; }
.res-thumb-preview img { border-radius: .4rem; border: 1px solid #1e293b; }
.res-thumb-preview.hidden, .res-progress.hidden, .res-quota.hidden { display: none; }

.res-grid { display: grid; gap: 1rem; }
.res-grid-lecture { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.res-grid-path { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.res-card.hidden { display: none; }
.res-desc { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.res-filter-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.res-group-btn { padding: .375rem .75rem; background: #090e1a; color: #94a3b8; transition: color .15s, background .15s; }
.res-group-btn:hover { color: #fff; }
.res-group-btn.is-on { background: #0369a1; color: #fff; }
.res-count { margin-left: .25rem; background: rgba(15, 23, 42, .55); border-radius: 9999px; padding: .1rem .4rem; font-size: 10px; }
.res-quota { color: #fcd34d; background: #451a03; border: 1px solid rgba(217, 119, 6, .45); border-radius: .5rem; padding: .5rem .75rem; }
.res-edit-field { width: 100%; background: #1e293b; border: 1px solid #64748b; border-radius: .5rem; padding: .5rem; color: #fff; }
.res-edit-field:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, .25); }
.res-admin-row.hidden { display: none; }

.res-badges { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; max-width: 50%; }
.res-badge { font-size: 10px; font-weight: 700; padding: .15rem .5rem; border-radius: .25rem; border: 1px solid; }
.res-badge-module { color: #7dd3fc; border-color: rgba(2, 132, 199, .45); background: #082f49; }
@media (max-width: 640px) { .res-admin-main { flex-wrap: wrap; align-items: flex-start; } .res-admin-thumb { width: 80px; height: 45px; } .res-admin-info { flex: 1 1 calc(100% - 80px - .75rem); } .res-badges { flex: 1 1 100%; max-width: 100%; justify-content: flex-start; } }

.res-frame-input { width: 5.5rem; }
.res-edit-thumb-img { border-radius: .3rem; border: 1px solid #334155; object-fit: cover; }

.res-share, .res-expand { flex: none; width: 1.5rem; height: 1.5rem; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .3rem; background: #1e293b; color: #7dd3fc; border: 1px solid #334155; cursor: pointer; transition: background .15s, color .15s; }
.res-share:hover, .res-share:focus-visible, .res-expand:hover, .res-expand:focus-visible { background: #334155; color: #fff; }
.res-share.is-copied { background: #065f46; color: #d1fae5; border-color: #10b981; }
.res-added { font-size: 11px; color: #94a3b8; }
.res-card.res-focus { animation: resFocus 3.5s ease-out 1; }
@keyframes resFocus { 0%, 60% { box-shadow: 0 0 0 3px #38bdf8; border-color: #38bdf8; } 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); } }
.res-preview-video { width: 100%; max-width: 28rem; aspect-ratio: 16 / 9; background: #000; border-radius: .5rem; display: block; }
.res-edit-video { max-width: 24rem; }
.res-badge-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.res-badge-group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }

/* File pickers in Manage Resources: show "Choose file" as a proper button */
#resources-tab input[type="file"] { font-size: .75rem; color: #94a3b8; }
#resources-tab input[type="file"]::file-selector-button { margin-right: .75rem; padding: .45rem .9rem; border-radius: .5rem; border: 1px solid #38bdf8; background: #0369a1; color: #fff; font-weight: 600; font-size: .75rem; cursor: pointer; transition: background .15s; }
#resources-tab input[type="file"]::file-selector-button:hover { background: #0284c7; }

/* ---- Logbook: Summary of Training Record ---- */
.str-panel { background:#090e1a; border:1px solid #1e293b; border-radius:.9rem; padding:.95rem 1rem; display:flex; flex-direction:column; gap:.75rem; }
.str-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .6rem; font-weight:700; color:#fff; }
.str-head > i { color:#38bdf8; }
.str-sub { font-weight:500; color:#94a3b8; font-size:.75rem; }
.str-grid { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.str-group { background:#0f172a; border:1px solid #1e293b; border-radius:.75rem; padding:.7rem .8rem; display:flex; flex-direction:column; gap:.45rem; }
.str-group-head { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#7dd3fc; display:flex; align-items:center; gap:.4rem; padding-bottom:.35rem; border-bottom:1px solid #1e293b; }
.str-row { display:flex; align-items:flex-start; gap:.55rem; font-size:.78rem; }
.str-row > i { margin-top:.15rem; font-size:.95rem; flex:none; width:1rem; text-align:center; }
.str-ok { color:#22c55e; }
.str-todo { color:#475569; }
.str-wait { color:#f59e0b; }
.str-row-body { display:flex; flex-direction:column; gap:.1rem; min-width:0; flex:1; }
.str-label { color:#e2e8f0; font-weight:700; }
.str-value { color:#94a3b8; }
.str-row.is-done .str-value { color:#86efac; }
.str-form { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.35rem; }
.str-input { background:#131c33; border:1px solid #475569; border-radius:.45rem; color:#fff; padding:.3rem .45rem; font-size:.75rem; color-scheme:dark; }
.str-input:focus { outline:none; border-color:#38bdf8; }
.str-input-wide { flex:1 1 12rem; min-width:0; }
.str-edit > summary { cursor:pointer; color:#7dd3fc; font-size:.72rem; font-weight:600; width:max-content; margin-top:.15rem; }
.str-final { border-top:1px solid #1e293b; padding-top:.6rem; }

/* One bold weight across the site: <b>/<strong> inside bold text would otherwise turn extra bold */
b, strong { font-weight: 700; }

/* Page and panel titles in Title Case. In the base layer so Tailwind's uppercase / normal-case classes still win
   (normal-case is used on titles people type themselves: sessions, videos, news). */
@layer base { h2, h3 { text-transform: capitalize; } h3 span { line-height: 1.5; } }

/* Dashboard resource cards: icon beside the title, link bottom-right */
.hub-row { display: flex; align-items: flex-start; gap: .85rem; }
.hub-icon { flex: none; }
.hub-text { min-width: 0; }
.hub-link { align-self: flex-end; margin-top: .6rem; }

.lbp-name-link { color:inherit; text-decoration:none; border-bottom:1px dotted #475569; }
.lbp-name-link:hover, .lbp-name-link:focus-visible { color:#7dd3fc; border-bottom-color:#7dd3fc; }

/* Resources: pop-up player for Google Drive videos */
html.res-modal-open { overflow: hidden; }
.res-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(2, 6, 23, .88); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.res-modal-box { width: min(1100px, 100%); display: flex; flex-direction: column; gap: .5rem; }
.res-modal-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: #e2e8f0; font-weight: 700; font-size: .9rem; }
.res-modal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-modal-close { flex: none; width: 2.2rem; height: 2.2rem; border-radius: .5rem; background: #1e293b; color: #fff; border: 1px solid #334155; cursor: pointer; }
.res-modal-close:hover { background: #334155; }
/* Video area is 16:9, plus room for the bar Drive adds at the top; never taller than the screen */
.res-modal-frame { position: relative; width: 100%; height: min(calc(min(1100px, 100vw - 2rem) * 9 / 16 + 64px), calc(100vh - 6rem)); background: #000; border-radius: .6rem; overflow: hidden; }
.res-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Hides Drive's "open in new window" button (top right) and stops it being clicked */
.res-modal-cover { position: absolute; top: 0; right: 0; width: 72px; height: 64px; background: #000; }

/* Loop switch over the video (top right) */
.res-loop { position: absolute; top: .5rem; right: .5rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: .4rem; font-size: .68rem; font-weight: 700; color: #cbd5e1; background: rgba(15, 23, 42, .78); border: 1px solid #334155; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.res-loop:hover, .res-loop:focus-visible { color: #fff; border-color: #64748b; }
.res-loop.is-on { color: #fff; background: rgba(2, 132, 199, .9); border-color: #38bdf8; }

/* Resources page: module colours (badges and filter buttons), stat-tile icons */
.res-mod { border: 1px solid transparent; }
.res-mod-lung    { background: #0369a1; color: #e0f2fe; border-color: #38bdf8; }
.res-mod-abdomen { background: #713f12; color: #fde047; border-color: #eab308; }
.res-mod-dvt     { background: #581c87; color: #e9d5ff; border-color: #a855f7; }
.res-mod-echo    { background: #172554; color: #93c5fd; border-color: #1d4ed8; }
.res-mod-advanced { background: #134e4a; color: #99f6e4; border-color: #14b8a6; }
.res-mod-other   { background: #1e293b; color: #cbd5e1; border-color: #475569; }
.res-modchip { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .3rem .6rem; border-radius: .5rem; cursor: pointer; opacity: .75; transition: opacity .15s, box-shadow .15s; }
.res-modchip:hover { opacity: 1; }
.res-modchip.is-on { opacity: 1; box-shadow: 0 0 0 2px currentColor; }
.res-ico { width: 2.5rem; height: 2.5rem; border-radius: .75rem; border: 1px solid; }
.res-ico-sky    { background: #082f49; color: #38bdf8; border-color: rgba(7, 89, 133, .8); }
.res-ico-rose   { background: #4c0519; color: #fb7185; border-color: rgba(159, 18, 57, .8); }
.res-ico-violet { background: #2e1065; color: #a78bfa; border-color: rgba(91, 33, 182, .8); }
.res-ico-green  { background: #022c22; color: #34d399; border-color: rgba(6, 95, 70, .8); }

/* Resources: three stat tiles on one row; slider for a resource with extra videos / pictures (arrows and dots reuse the My Booked Sessions look) */
@media (min-width: 900px) { .stat-grid.res-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.res-viewport { overflow: hidden; border-radius: .6rem; }
.res-track { display: flex; transition: transform .35s ease; }
.res-slide { flex: 0 0 100%; min-width: 0; }
.res-slider-nav { display: flex; align-items: center; justify-content: center; gap: .75rem; padding-top: .5rem; }
.res-media-img img { object-fit: contain; }

/* Manage Resources: extra videos and pictures */
.res-extras { border-top: 1px solid #1e293b; padding-top: .75rem; }
.res-extra-list { display: grid; gap: .5rem; margin-top: .5rem; }
.res-extra-row { background: #090e1a; border: 1px solid #1e293b; border-radius: .6rem; padding: .6rem .7rem; display: grid; gap: .5rem; }
.res-extra-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.res-extra-head select { background: #131c33; border: 1px solid #334155; border-radius: .4rem; padding: .3rem .5rem; color: #fff; }
.res-x-del { margin-left: auto; font-size: .7rem; font-weight: 700; color: #fda4af; background: transparent; border: 1px solid #9f1239; border-radius: .4rem; padding: .25rem .6rem; cursor: pointer; }
.res-x-del:hover { background: #4c0519; }
.res-extra-have { display: flex; align-items: center; gap: .6rem; background: #090e1a; border: 1px solid #1e293b; border-radius: .6rem; padding: .4rem .6rem; }
.res-extra-have img { width: 64px; height: 36px; object-fit: cover; border-radius: .3rem; background: #000; flex: none; }
.res-extra-have .res-x-ico { width: 64px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; background: #131c33; border-radius: .3rem; color: #334155; }
.res-x-url { width: 100%; background: #131c33; border: 1px solid #334155; border-radius: .5rem; padding: .4rem .55rem; color: #fff; }

/* Resources: slider arrows and dots sit in the badge row, enlarge pop-up, pathology pages */
.res-row-end { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; margin-left: auto; flex: none; }
.res-nav { display: inline-flex; align-items: center; gap: .4rem; margin-right: .3rem; }
.res-nav .booked-nav-btn { width: 1.5rem; height: 1.5rem; font-size: .95rem; border-radius: .3rem; }
.res-added i { font-size: .65rem; margin-right: .15rem; }
.res-big-box { width: min(1100px, 100%, calc((100vh - 9rem) * 16 / 9 + 2rem)); background: #0f172a; border: 1px solid #1e293b; border-radius: .9rem; padding: 1rem; gap: .75rem; }
.res-big-box .res-modal-title { font-size: 1rem; }
.res-big-body .res-media { border-radius: .6rem; }
.res-big-body .res-slider-nav, .res-big-nav { display: flex; align-items: center; justify-content: center; gap: .75rem; padding-top: .25rem; }
.res-big-nav .booked-nav-btn { width: 1.5rem; height: 1.5rem; }
.res-pager { display: flex; align-items: center; justify-content: center; gap: .9rem; padding-top: .25rem; }
#resTabs, #theory, #pathology { scroll-margin-top: calc(var(--hdr-h) + 14px); }
/* Resources: no image drag, no iOS long-press "Save image", no text selection on the media */
.res-card img, .res-modal img, .res-card video, .res-modal video { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Logbook sub-menu (Progress / Summary Record / Pathologies Seen / Your Scans) */
.lb-subtabs { display:flex; flex-wrap:wrap; gap:.5rem; border-bottom:1px solid #1e293b; padding-bottom:.6rem; margin:.25rem 0 .9rem; }
.lb-subtabs button.lb-tab { cursor:pointer; font-family:inherit; }
.lb-pane { display:flex; flex-direction:column; gap:1rem; }
.lb-pane[hidden] { display:none; }
/* Resources: video counts on the tabs (light blue, so they do not look like the orange "pending" numbers) */
.res-tabcount { background:#7dd3fc; color:#082f49; font-size:10px; font-weight:700; border-radius:9999px; padding:.125rem .375rem; line-height:1; margin-left:.25rem; display:inline-block; }
/* Logbook: Summary Record panel sits straight on the page (no outer box); inner panels are the darker colour */
.lb-pane .str-panel { background:#0f172a; }
.lb-pane .str-group { background:#090e1a; }
.lb-yearbadge-new { white-space:nowrap; }
.mod-img img, .mod-img video { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Resources: slider arrows and dots sit over the top-left corner of the video / picture */
.res-media-wrap { position: relative; }
.res-media-wrap > .res-nav { position: absolute; top: .5rem; left: .5rem; z-index: 4; margin: 0; padding: .2rem .4rem; gap: .4rem; background: rgba(9, 14, 26, .72); border: 1px solid rgba(51, 65, 85, .9); border-radius: .5rem; }
/* Resources: Enlarge sits at the far right of the title line, under the video */
.res-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.res-title-row h3 { flex:1; min-width:0; }

/* Calendar day details: shown on hover (mouse) and on tap (touch screens, which have no hover) */
#pocusCalendar .cal-tip-open { z-index: 20; }
#pocusCalendar .cal-tip-open > .cal-tooltip { display: block !important; }

/* Cancelled sessions: dark, low-contrast red badge in the same style as the other badges */
.badge-cancelled { background-color: #2a1220; color: #fda4af; border: 1px solid rgba(190,70,95,.35); }
.booked-cancelled { border-color: #1e293b; opacity: .65; }


/* Beta feedback button: small round icon beside the site name; expands to show its label on hover / keyboard focus */
.feedback-chip { display:inline-flex; align-items:center; height:1.5rem; min-width:1.5rem; padding:0; border-radius:9999px; border:1px solid #fbbf24; background:#f59e0b; color:#1c1002; cursor:pointer; overflow:hidden; vertical-align:middle; transition:background .15s; }
.feedback-chip, .feedback-chip span { letter-spacing:normal; }
.feedback-chip i { width:1.5rem; text-align:center; font-size:.9rem; flex:none; }
.feedback-chip span { max-width:0; opacity:0; white-space:nowrap; font-size:.72rem; font-weight:700; transition:max-width .22s ease, opacity .18s ease, padding .22s ease; }
.feedback-chip:hover span, .feedback-chip:focus-visible span { max-width:5rem; opacity:1; padding-right:.6rem; }
.feedback-chip:hover { background:#fbbf24; }
.feedback-chip:focus-visible { outline:2px solid #fff; outline-offset:2px; }
#feedbackModal[hidden] { display:none !important; }

/* FAQ page */
.faq-page { max-width: 52rem; margin: 0 auto; padding: 1rem 0 2rem; }
.faq-head p { color:#94a3b8; font-size:.8rem; margin:.2rem 0 1rem; }
.faq-search { position:relative; margin-bottom:1rem; }
.faq-search i { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:#64748b; font-size:.85rem; }
.faq-search input { width:100%; background:#0f172a; border:1px solid #1e293b; border-radius:.8rem; padding:.7rem .9rem .7rem 2.3rem; color:#e2e8f0; font-size:.9rem; }
.faq-search input:focus { outline:2px solid #38bdf8; outline-offset:1px; }
.faq-none { color:#94a3b8; font-size:.85rem; padding:.5rem 0; }
.faq-cat { margin-bottom:1.4rem; }
.faq-cat h2 { color:#7dd3fc; margin-bottom:.5rem; }
.faq-item { background:#0f172a; border:1px solid #1e293b; border-radius:.8rem; margin-bottom:.45rem; }
.faq-item[open] { border-color:#334155; background:#131c33; }
.faq-item summary { cursor:pointer; list-style:none; padding:.8rem 2.4rem .8rem 1rem; color:#f1f5f9; font-weight:400; font-size:.9rem; position:relative; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:#38bdf8; font-size:1.2rem; font-weight:700; }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 1rem .9rem; color:#cbd5e1; font-size:.85rem; line-height:1.55; }
.faq-answer p { margin:.4rem 0; }
.faq-answer.news-article-body { font-size:.85rem; line-height:1.55; }
.faq-answer ul { margin:.4rem 0 .4rem 1.1rem; list-style:disc; }
.faq-answer a, .faq-card a { color:#38bdf8; text-decoration:underline; }
.faq-card { display:flex; gap:.75rem; align-items:flex-start; background:#0f172a; border:1px solid #1e293b; border-radius:.9rem; padding:.9rem 1rem; color:#cbd5e1; font-size:.85rem; margin-top:.8rem; }
.faq-card > i { color:#38bdf8; margin-top:.15rem; }
.faq-link { background:none; border:0; color:#38bdf8; text-decoration:underline; cursor:pointer; font:inherit; padding:0; }

/* Logbook sub-menu: tabs that are switched off (no longer enrolled) */
.lb-tab.lb-tab-off, .lb-tab.lb-tab-off:hover { background:#0b1120; color:#475569; border-color:#172033; cursor:not-allowed; opacity:.7; pointer-events:auto; }

/* Resource tags */
.res-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.res-tag { font-size: .65rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; background: #0b1120; color: #7dd3fc; border: 1px solid #1e3a5f; cursor: pointer; line-height: 1.3; }
.res-tag:hover { background: #172554; color: #e0f2fe; }
.res-tag.is-on { background: #0369a1; color: #e0f2fe; border-color: #38bdf8; }
.res-tag-sugg { font-size: .65rem; padding: .1rem .45rem; border-radius: 999px; background: #0b1120; color: #94a3b8; border: 1px dashed #334155; cursor: pointer; }
.res-tag-sugg:hover { color: #e0f2fe; border-color: #38bdf8; }

/* ===================================================================
 * How to use: guide page (.gd-*), page hints (.hint-*), guided tour (.tour-*)
 * =================================================================== */
.gd-page { max-width:64rem; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }
.gd-head p { color:#94a3b8; font-size:.85rem; margin:.3rem 0 0; }
.gd-tabs { display:flex; gap:.5rem; flex-wrap:wrap; border-bottom:1px solid #1e293b; padding-bottom:.6rem; }
.gd-tab { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem 1rem; border-radius:.75rem; font-size:.8rem; font-weight:700; background:#090e1a; color:#94a3b8; border:1px solid #1e293b; transition:.15s; }
.gd-tab:hover { color:#fff; border-color:#334155; }
.gd-tab-on { background:#0369a1; color:#fff; border-color:#0ea5e9; }
.gd-role-note { color:#94a3b8; font-size:.8rem; margin:-.25rem 0 0; }
.gd-tools { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:space-between; }
.gd-search { position:relative; flex:1 1 16rem; max-width:24rem; }
.gd-search i { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:#64748b; font-size:.8rem; }
.gd-search input { width:100%; background:#0f172a; border:1px solid #1e293b; border-radius:.75rem; padding:.55rem .8rem .55rem 2.2rem; color:#e2e8f0; font-size:.85rem; }
.gd-search input:focus { outline:none; border-color:#38bdf8; }
.gd-btn { display:inline-flex; align-items:center; gap:.4rem; background:#131c33; color:#7dd3fc; border:1px solid #1e293b; border-radius:.75rem; padding:.5rem .85rem; font-size:.75rem; font-weight:700; cursor:pointer; transition:.15s; }
.gd-btn:hover:not(:disabled) { background:#1e293b; }
.gd-btn:disabled { color:#34d399; cursor:default; }
.gd-toc { display:flex; flex-wrap:wrap; gap:.4rem; }
.gd-chip { display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:600; color:#cbd5e1; background:#0f172a; border:1px solid #1e293b; border-radius:999px; padding:.3rem .7rem; transition:.15s; }
.gd-chip i { color:#38bdf8; font-size:.7rem; }
.gd-chip:hover { border-color:#38bdf8; color:#fff; }
.gd-none { text-align:center; color:#94a3b8; font-size:.85rem; padding:1.5rem; }
.gd-grid { display:block; column-gap:1rem; }  /* panels flow in columns, so there are no gaps under shorter panels */
.gd-card { break-inside:avoid; margin:0 0 1rem; background:#0f172a; border:1px solid #1e293b; border-radius:1rem; padding:1.15rem 1.25rem 1.25rem; scroll-margin-top:7rem; box-shadow:0 10px 30px rgba(2,6,23,.35); }
.gd-card:target { border-color:#38bdf8; box-shadow:0 0 0 1px #38bdf8, 0 10px 30px rgba(2,6,23,.35); }
.gd-card-head { display:flex; align-items:center; gap:.75rem; }
.gd-ico { flex:0 0 2.4rem; height:2.4rem; border-radius:.75rem; background:#082f49; border:1px solid #075985; color:#38bdf8; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.gd-card-title { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; }
.gd-card-title h3 { color:#fff; font-weight:700; margin:0; }
.gd-badge { font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fcd34d; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.45); border-radius:.4rem; padding:.1rem .45rem; }
.gd-intro { color:#94a3b8; font-size:.82rem; margin:.65rem 0 .8rem; }
.gd-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.gd-steps li { display:flex; gap:.7rem; align-items:flex-start; background:#0b1329; border:1px solid #1e293b; border-radius:.75rem; padding:.6rem .8rem; color:#cbd5e1; font-size:.85rem; line-height:1.5; }
.gd-steps li > span { flex:0 0 1.45rem; height:1.45rem; border-radius:999px; background:#0ea5e9; color:#fff; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:.05rem; }
.gd-steps b { color:#fff; }
.gd-tip { margin-top:.8rem; display:flex; gap:.6rem; align-items:flex-start; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.4); border-radius:.75rem; padding:.6rem .8rem; color:#e2e8f0; font-size:.82rem; line-height:1.5; }
.gd-tip i { color:#fbbf24; margin-top:.2rem; }
.gd-tip b { color:#fcd34d; }
.gd-link { margin:.8rem 0 0; font-size:.8rem; }
.gd-link a { color:#38bdf8; font-weight:700; }
.gd-link a:hover { color:#7dd3fc; }
.gd-foot { display:flex; gap:.7rem; align-items:center; background:#0f172a; border:1px solid #1e293b; border-radius:1rem; padding:.9rem 1.1rem; color:#94a3b8; font-size:.85rem; }
.gd-foot i { color:#38bdf8; font-size:1.1rem; }
.gd-foot a { color:#38bdf8; font-weight:700; text-decoration:underline; }
@media (min-width:900px) { .gd-grid { column-count:2; } }

/* Page hints */
/* "?" help icons */
.qh { position:relative; display:inline-block; margin-left:.35rem; vertical-align:middle; text-transform:none; letter-spacing:normal; font-weight:400; }
.qh-btn { width:1.05rem; height:1.05rem; border-radius:999px; border:1px solid #475569; background:#131c33; color:#94a3b8; display:inline-flex; align-items:center; justify-content:center; font-size:.55rem; cursor:pointer; }
.qh-btn:hover, .qh-open .qh-btn { background:#0c4a6e; border-color:#0ea5e9; color:#e0f2fe; }
.qh-btn:focus-visible { outline:2px solid #38bdf8; outline-offset:2px; }
.qh-pop { position:absolute; z-index:60; left:0; top:1.5rem; width:15rem; max-width:70vw; background:#0f172a; border:1px solid #334155; border-radius:.7rem; padding:.55rem .7rem; color:#cbd5e1; font-size:.75rem; font-weight:400; line-height:1.45; text-align:left; white-space:normal; box-shadow:0 12px 32px rgba(0,0,0,.55); }
.qh-pop[hidden] { display:none; }
/* Getting-started checklist (dashboard) */
.checklist { background:#0f172a; border:1px solid #1d283c; border-radius:1rem; padding:.8rem 1rem .9rem; }
.welcome-row { display:grid; gap:1.25rem 1.5rem; align-items:start; margin-bottom:1.5rem; }
@media (min-width:1024px) { .welcome-row.has-cl { grid-template-columns:minmax(0,1fr) 22rem; } }
.cl-head { display:flex; align-items:center; gap:.6rem; }
.cl-title { color:#fff; font-weight:700; font-size:.82rem; display:flex; align-items:center; gap:.5rem; flex:1; }
.cl-title i { color:#38bdf8; }
.cl-count { font-size:.66rem; font-weight:700; color:#7dd3fc; }
.cl-x { background:transparent; border:0; color:#64748b; cursor:pointer; padding:.2rem .4rem; border-radius:.4rem; }
.cl-x:hover { color:#fff; background:#1e293b; }
.cl-bar { height:3px; background:#1e293b; border-radius:999px; margin:.6rem 0 .7rem; overflow:hidden; }
.cl-bar span { display:block; height:100%; background:linear-gradient(90deg,#7dd3fc,#0ea5e9,#1d4ed8); border-radius:999px; }
.cl-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.4rem .9rem; }
.cl-list a { display:flex; align-items:center; gap:.6rem; color:#e2e8f0; font-size:.74rem; padding:.25rem .2rem; border-radius:.5rem; text-decoration:none; }
.cl-list a:hover { background:rgba(56,189,248,.08); color:#fff; }
.cl-tick { flex:0 0 1.15rem; height:1.15rem; border-radius:999px; border:1.5px solid #475569; display:flex; align-items:center; justify-content:center; font-size:.6rem; color:#fff; }
.cl-done a { color:#94a3b8; }
.cl-done .cl-tick { background:#0ea5e9; border-color:#0ea5e9; }
/* Page tip: lightbulb button in the corner of the page, opens a popover (nothing on the page moves) */
main { position:relative; }
.tip-wrap { position:absolute; top:.45rem; right:1rem; z-index:30; visibility:hidden; }
.tip-wrap.tip-ready { visibility:visible; }
.tip-inline { position:relative; top:auto; right:auto; display:inline-block; margin-left:.6rem; vertical-align:middle; font-size:.72rem; font-weight:400; line-height:1; text-transform:none; letter-spacing:normal; }
.tip-inline .tip-pop { left:0; right:auto; text-align:left; white-space:normal; }
.tip-inline.tip-flip .tip-pop { left:auto; right:0; }
.tip-wrap + * { margin-top:0 !important; }   /* the tip button is out of the flow, so the content after it must not get the 'space-y' gap */
.tip-btn { position:relative; width:1.6rem; height:1.6rem; border-radius:999px; background:#0b1a30; border:1px solid #1e3a5f; color:#7dd3fc; display:flex; align-items:center; justify-content:center; font-size:.72rem; cursor:pointer; transition:background .15s, color .15s; }
.tip-btn:hover, .tip-open .tip-btn { background:#0c4a6e; color:#e0f2fe; }
.tip-btn:focus-visible { outline:2px solid #38bdf8; outline-offset:2px; }
.tip-dot { position:absolute; top:-2px; right:-2px; width:.5rem; height:.5rem; border-radius:999px; background:#f59e0b; box-shadow:0 0 0 2px #0b1220; }
.tip-pop { position:absolute; top:2.1rem; right:0; width:21rem; max-width:calc(100vw - 2rem); background:#0f172a; border:1px solid #334155; border-radius:.9rem; padding:.8rem .9rem; color:#cbd5e1; font-size:.82rem; line-height:1.5; box-shadow:0 14px 40px rgba(0,0,0,.55); }
.tip-pop[hidden] { display:none; }
.tip-pop b { color:#fff; }
.tip-pop .tip-head { display:flex; align-items:center; gap:.4rem; font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#38bdf8; margin-bottom:.3rem; }
.hint-more { color:#38bdf8; font-weight:700; white-space:nowrap; font-size:.75rem; }
.hint-more:hover { color:#7dd3fc; }

/* Guided tour */
.tour-fab { position:relative; display:inline-flex; align-items:center; height:2.75rem; min-width:2.75rem; padding:0; background:#0c5a86; color:#e0f2fe; border:1px solid #2b7fb3; border-radius:999px; font-size:.8rem; font-weight:700; cursor:pointer; overflow:hidden; box-shadow:0px 0px 16px 16px rgba(0, 0, 0, .38), 0 1px 4px rgba(0, 0, 0, .3); transition:background .15s, color .15s; }
.tour-fab i { width:2.65rem; text-align:center; font-size:1.1rem; flex:none; }
.tour-fab span { max-width:0; opacity:0; white-space:nowrap; transition:max-width .25s ease, opacity .2s ease, padding .25s ease; }
.tour-fab:hover span, .tour-fab:focus-visible span { max-width:8rem; opacity:1; padding-right:1rem; }
.tour-fab:hover, .tour-fab:focus-visible { background:#1f87c2; border-color:#6cc2ef; color:#fff; }
/* the main Help circle stays highlighted while its menu is open */
.help-fab:hover #helpToggle, .help-fab:focus-within #helpToggle, .help-fab.open #helpToggle { background:#1f87c2; border-color:#6cc2ef; color:#fff; }
.help-fab:hover #helpToggle i, .help-fab:focus-within #helpToggle i, .help-fab.open #helpToggle i { color:inherit; }
.tour-fab:hover i, .tour-fab:focus-visible i { color:inherit; }
.tour-fab:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.tour-on .help-fab { display:none; }
/* Help button (bottom left): hover, focus or tap reveals Quick Tour and Help */
.help-fab { position:fixed; left:16px; bottom:20px; z-index:45; display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }
.help-menu { display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.help-fab:hover .help-menu, .help-fab:focus-within .help-menu, .help-fab.open .help-menu { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.help-menu .tour-fab { box-shadow:0 2px 10px rgba(0, 0, 0, .5); }
.tour-shield { position:fixed; inset:0; z-index:9990; background:transparent; }
.tour-spot { position:fixed; z-index:9991; border-radius:.7rem; background:rgba(255,255,255,.06); box-shadow:0 0 0 9999px rgba(2,6,23,.66); pointer-events:none; opacity:0; transition:opacity .5s ease; }
.tour-spot.tour-spot-on { opacity:1; animation:tourFlash 1.4s ease-out .25s 1 both; }
@keyframes tourFlash {
  0%   { box-shadow:0 0 0 9999px rgba(2,6,23,.66), 0 0 0 2px rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0); }
  30%  { box-shadow:0 0 0 9999px rgba(2,6,23,.66), 0 0 0 2px rgba(255,255,255,.55), 0 0 14px 3px rgba(255,255,255,.28); }
  100% { box-shadow:0 0 0 9999px rgba(2,6,23,.66), 0 0 0 2px rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0); }
}
.tour-pop { position:fixed; z-index:9992; width:22rem; max-width:calc(100vw - 1.5rem); background:#0f172a; border:1px solid #64748b; border-radius:1rem; padding:1rem 1.1rem 1rem; box-shadow:0 20px 60px rgba(0,0,0,.65); color:#cbd5e1; }
.tour-pop { opacity:0; transition:opacity .4s ease; }
.tour-pop.tour-pop-on { opacity:1; }
.tour-pop-sheet { left:.75rem; right:.75rem; bottom:.75rem; top:auto !important; width:auto; max-width:none; }
.tour-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.35rem; }
.tour-count { font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#38bdf8; }
.tour-x { background:transparent; border:0; color:#64748b; cursor:pointer; padding:.2rem .4rem; border-radius:.4rem; }
.tour-x:hover { color:#fff; background:#1e293b; }
.tour-title { color:#fff; font-size:1rem; font-weight:700; margin:0 0 .3rem; text-transform:none; }
.tour-text { font-size:.83rem; line-height:1.55; }
.tour-text b { color:#fff; }
.tour-bar { height:3px; background:#1e293b; border-radius:999px; margin:.8rem 0 .7rem; overflow:hidden; }
.tour-bar span { display:block; height:100%; background:linear-gradient(90deg,#7dd3fc,#0ea5e9,#1d4ed8); border-radius:999px; transition:width .25s; }
.tour-actions { display:flex; justify-content:space-between; gap:.5rem; }
.tour-btn { background:#131c33; color:#cbd5e1; border:1px solid #334155; border-radius:.65rem; padding:.45rem .9rem; font-size:.78rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
.tour-btn:hover:not(:disabled) { background:#1e293b; color:#fff; }
.tour-btn:disabled { opacity:.4; cursor:default; }
.tour-btn-primary { background:#0369a1; border-color:#38bdf8; color:#fff; }
.tour-btn-primary:hover:not(:disabled) { background:#0ea5e9; }
@media print { .help-fab, .tour-fab, .tip-wrap, .checklist, .qh { display:none !important; } }

/* Pending account approval row: on phones the role / student / Approve / Reject controls wrap inside the box */
.pa-form { display:contents; }
@media (min-width:768px) { .pa-form { display:flex; align-items:center; gap:.5rem; } }

/* Admin Panel menu: the second row belongs to the selected group above it */
.admin-menu { border-bottom:1px solid #1e293b; padding-bottom:.85rem; margin-bottom:1rem; }
#adminGroups { padding-bottom:.55rem; }
.admin-menu:not(:has(.admin-subbar)) #adminGroups { padding-bottom:0; }


.admin-subbar { display:flex; gap:.5rem; overflow-x:auto; background:rgba(12,74,110,.22); border:1px solid #0c4a6e; border-radius:.8rem; padding:.45rem .5rem; }

/* Sessions calendar, "My Sessions" view: days with a session you tutor get an amber outline */
.cal-mine { border:2px solid #f59e0b !important; box-shadow:0 0 0 2px rgba(245,158,11,.22), 0 0 10px rgba(245,158,11,.25) !important; }

/* Super Admin's view of a student's logbook > Assessment: the FAMUS and FUSIC Heart panels sit side by side (stack on narrow screens) */
.assess-admin-panel { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(24rem,100%),1fr)); gap:.75rem; align-items:start; }
.assess-admin-panel > * { margin-top:0 !important; min-width:0; }
.assess-admin-panel > :not(.assess-sec) { grid-column:1 / -1; }
.assess-admin-panel .assess-sec { margin-bottom:0; }

/* Dashboard next-step cards (includes/dashboard_cards.php) */
.dash-card{border-radius:1rem;padding:1.25rem;margin-bottom:1.25rem;border:1px solid #1e293b;background:#0f172a;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.dash-card h2{font-size:1rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem}

.dash-card-amber{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.30)}.dash-card-amber h2{color:#fde68a}
.dash-sub{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8;margin:.7rem 0 .3rem}
.dash-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;background:#131c33;border:1px solid #1e293b;border-radius:.75rem;padding:.5rem .75rem;margin-bottom:.4rem;text-decoration:none}
.dash-main{min-width:0;display:flex;flex-direction:column;font-size:.8rem;color:#e2e8f0}.dash-main a{font-weight:600;color:#fff}.dash-main a:hover{color:#7dd3fc}.dash-main span{font-size:.7rem;color:#94a3b8}
.dash-today{color:#fbbf24}.dash-acts{display:flex;flex-wrap:wrap;gap:.4rem}.dash-acts form{margin:0}
.dash-btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;color:#fff;background:#334155;border:0;border-radius:.5rem;padding:.35rem .7rem;cursor:pointer;text-decoration:none}
.dash-btn:hover{background:#475569}.dash-btn-go{background:#047857}.dash-btn-go:hover{background:#059669}

.dash-num{background:#f59e0b;color:#0f172a;font-weight:800;font-size:.75rem;border-radius:999px;min-width:1.6rem;height:1.6rem;display:inline-flex;align-items:center;justify-content:center}

.dash-next{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1.25rem;padding:.65rem .9rem;border-radius:.9rem;background:rgba(14,165,233,.09);border:1px solid rgba(14,165,233,.3);color:#e2e8f0;text-decoration:none;font-size:.82rem}
.dash-next:hover{border-color:#38bdf8}.dash-next>i{color:#38bdf8}.dash-next span{flex:1 1 14rem}.dash-next u{text-decoration:none;font-weight:700;color:#7dd3fc;font-size:.75rem}

.undo-bar{position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);z-index:9998;display:flex;align-items:center;gap:.75rem;max-width:min(92vw,34rem);background:#0f172a;border:1px solid #38bdf8;border-radius:.9rem;padding:.55rem .8rem;box-shadow:0 8px 30px rgba(0,0,0,.55);color:#e2e8f0;font-size:.8rem}
.undo-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.undo-bar form{margin:0}
.undo-btn{background:#0ea5e9;color:#fff;border:0;border-radius:.5rem;font-weight:700;font-size:.75rem;padding:.35rem .75rem;cursor:pointer}.undo-btn:hover{background:#38bdf8}
.undo-x{background:none;border:0;color:#94a3b8;cursor:pointer;padding:.2rem .35rem}.undo-x:hover{color:#fff}

/* Accessibility: clear keyboard focus everywhere, and a skip link for keyboard / screen-reader users */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,[role=button]:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}
main:focus{outline:none}
.skip-link{position:absolute;left:.75rem;top:-4rem;z-index:10000;background:#0369a1;color:#fff;padding:.55rem .9rem;border-radius:.5rem;font-weight:700;font-size:.85rem;text-decoration:none;transition:top .15s}
.skip-link:focus{top:.6rem}




.assess-reset-form{margin:0 0 0 auto;display:inline-flex}.assess-btn-reset{background:#1e293b;color:#cbd5e1;border:1px solid #334155;border-radius:.4rem;width:1.45rem;height:1.45rem;display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;cursor:pointer;padding:0}.assess-btn-reset:hover,.assess-btn-reset:focus-visible{background:#475569;color:#fff}

.att-reopen-btn{background:#1e293b;color:#cbd5e1;border:1px solid #334155;border-radius:.5rem;width:1.7rem;height:1.7rem;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer}.att-reopen-btn:hover{background:#334155;color:#fff}

/* Calendar: soft shadow on the day tooltip */
#pocusCalendar .cal-tooltip{box-shadow:0 10px 28px -4px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.28)}
/* My sessions note: the space is always reserved so the page does not jump when switching between All and My sessions */
#mineCalNote{display:flex;visibility:hidden;min-height:2.2rem;align-items:flex-start}
#mineCalNote.is-on{visibility:visible}

.dash-toggle{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.5rem;width:100%;cursor:pointer;font:inherit;color:inherit;padding:.1rem 0;border-radius:.4rem}.dash-toggle:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}.dash-toggle .dash-chev{margin-left:auto;font-size:.75rem;color:#94a3b8;transition:transform .2s}.dash-toggle.is-closed .dash-chev{transform:rotate(180deg)}

.stat-grid.res-stats > div{background-color:#0f172a !important}

/* Calendar tooltips stay below the sticky header / menu when scrolling */
#pocusCalendar .cal-tooltip{z-index:20 !important}

/* My Tutor Stats: tiles two across on phones, four across on wider screens; the two info panels share a row from small tablets up */
.ts-tiles{display:grid;gap:.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:720px){.ts-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1000px){.ts-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ts-more{display:grid;gap:.75rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.ts-more{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Logbook section tabs: folder-style tabs like page dividers - each tab sits over the one to its right; the active tab is in front of all; hover never changes the order */
.lb-subtabs{display:flex;flex-wrap:nowrap;gap:0;border-bottom:1px solid #38bdf8;padding:0 8px;margin:.25rem 0 .9rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.lb-subtabs::-webkit-scrollbar{display:none}
.lb-subtabs .lb-tab{position:relative;flex:0 0 auto;white-space:nowrap;border-radius:.8rem .8rem 0 0;background:#172036;color:#8fa3bd;border:1px solid #2b3b58;border-bottom:1px solid #38bdf8;margin-bottom:-1px;margin-left:-8px;padding:.6rem 1.3rem .6rem 1.2rem;box-shadow:4px 0 6px -3px rgba(0,0,0,.5)}
.lb-subtabs .lb-tab:first-child{margin-left:0}
.lb-subtabs .lb-tab:nth-child(1){z-index:8}.lb-subtabs .lb-tab:nth-child(2){z-index:7}.lb-subtabs .lb-tab:nth-child(3){z-index:6}.lb-subtabs .lb-tab:nth-child(4){z-index:5}.lb-subtabs .lb-tab:nth-child(5){z-index:4}.lb-subtabs .lb-tab:nth-child(6){z-index:3}.lb-subtabs .lb-tab:nth-child(7){z-index:2}.lb-subtabs .lb-tab:nth-child(8){z-index:1}
.lb-subtabs .lb-tab:hover{background:#1d3a5c;color:#fff}
.lb-subtabs .lb-tab.lb-tab-on,.lb-subtabs .lb-tab.lb-tab-on:hover{background:#0369a1;color:#fff;border-color:#38bdf8;border-bottom-color:#0369a1;z-index:20;padding-bottom:.7rem}
.lb-subtabs .lb-tab.lb-tab-off,.lb-subtabs .lb-tab:disabled{background:#121a2c;color:#5b6a85;border-color:#222e47;border-bottom-color:#38bdf8;cursor:not-allowed}
.lb-subtabs .lb-tab.lb-tab-off:hover,.lb-subtabs .lb-tab:disabled:hover{background:#121a2c;color:#5b6a85}
@media(max-width:520px){.lb-subtabs{padding:0 2px}.lb-subtabs .lb-tab{font-size:.66rem;padding:.55rem .55rem .55rem .5rem;gap:.3rem;margin-left:-6px}.lb-subtabs .lb-tab.lb-tab-on{padding-bottom:.65rem}.lb-subtabs .lb-tab i{display:none}}

/* Pill buttons (logbook FAMUS / FUSIC switch, admin sub menu): soft background highlight on hover */
.lb-tabs a.lb-tab:not(.lb-tab-on):hover,.admin-subbar .lb-tab:not(.lb-tab-on):hover{background:#1d3a5c;color:#fff}
.admin-subbar .lb-tab{flex:0 0 auto}
.admin-subbar .lb-tab.lb-tab-on{background:#0369a1;color:#fff;border-color:#38bdf8}

/* Admin menu: first row = folder tabs (same as the logbook sections); active tabs have no hover effect in either row */
#adminGroups.lb-subtabs{margin:0 0 .7rem;padding-bottom:0}
.tab-btn.lb-tab{transition:none}
.tab-btn.lb-tab:not(.lb-tab-on):hover{background-color:#1d3a5c !important;color:#fff !important}
.tab-btn.lb-tab.lb-tab-on,.tab-btn.lb-tab.lb-tab-on:hover{background-color:#0369a1 !important;color:#fff !important;cursor:default}
.admin-menu:has(#adminGroups.lb-subtabs){padding-bottom:.85rem}
/* Admin menu: when the selected group has a second row, the active tab is joined to that panel (one continuous shape) */
.admin-menu:has(.admin-subbar) #adminGroups.lb-subtabs{margin-bottom:0;border-bottom-color:#1b5f8f}
.admin-menu:has(.admin-subbar) .admin-subbar{background:#0f2740;border:1px solid #1b5f8f;border-top:0;border-radius:0 0 .8rem .8rem}
.admin-menu:has(.admin-subbar) #adminGroups .tab-btn.lb-tab.lb-tab-on,.admin-menu:has(.admin-subbar) #adminGroups .tab-btn.lb-tab.lb-tab-on:hover{background-color:#0f2740 !important;border-color:#1b5f8f;border-bottom-color:#0f2740;box-shadow:none}
.admin-subbar .tab-btn.lb-tab.lb-tab-on,.admin-subbar .tab-btn.lb-tab.lb-tab-on:hover{background-color:#0369a1 !important;border-color:#38bdf8}
/* Joined tab: no line under the active tab. The line is the sub menu's own top border; the active tab overlaps it with the panel colour. */
.admin-menu:has(.admin-subbar) #adminGroups.lb-subtabs{border-bottom:0;padding-bottom:1px;position:relative;z-index:2}
.admin-menu:has(.admin-subbar) #adminGroups .lb-tab:not(.lb-tab-on){border-bottom-color:#1b5f8f}
.admin-menu:has(.admin-subbar) .admin-subbar{border-top:1px solid #1b5f8f;margin-top:-1px;border-radius:0 0 .8rem .8rem}
/* Admin first menu keeps its icons on phones (the logbook tabs still hide theirs) */
@media(max-width:520px){#adminGroups.lb-subtabs .lb-tab i{display:inline-block;margin-right:0;font-size:.7rem}#adminGroups.lb-subtabs .lb-tab{padding-left:.38rem;padding-right:.38rem;gap:.2rem}}
/* Dashboard: attention strip + full-width Your Teaching with tiles */
.dash-strip{padding:.7rem 1rem}.dash-strip .dash-strip-in{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}.dash-strip h2{margin:0 .4rem 0 0}
.dash-chip{display:inline-flex;align-items:center;gap:.5rem;background:#131c33;border:1px solid rgba(245,158,11,.35);border-radius:999px;padding:.2rem .8rem .2rem .25rem;font:inherit;font-size:.78rem;font-weight:600;color:#e2e8f0;text-decoration:none;cursor:pointer}
.dash-chip:hover{border-color:rgba(245,158,11,.75);background:#18233f}.dash-chip>.fa-arrow-right,.dash-chip>.dash-chev{color:#fbbf24;font-size:.65rem}.dash-chip.is-open>.dash-chev{transform:rotate(180deg)}
.dash-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}.dash-tiles .dash-row{margin:0;align-content:space-between}
@media(min-width:720px){.dash-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Dashboard session lines: small icons */
.dash-main .dash-meta{display:flex;flex-wrap:wrap;gap:.15rem .8rem;margin-top:.15rem}.dash-meta .dm{display:inline-flex;align-items:center;white-space:nowrap}.dash-meta .dm i{color:#38bdf8;font-size:.72rem;width:.9rem;margin-right:.3rem;text-align:center}.dash-meta .dash-today{font-weight:800}
/* Dashboard tiles: side column with badges (top right) and icon-only buttons */
.dash-tiles .dash-row{flex-wrap:nowrap;align-items:stretch;gap:.5rem}.dash-tiles .dash-main{flex:1 1 auto}
.dash-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:.4rem;flex:0 0 auto}
.dash-side .dash-acts{flex-wrap:nowrap;align-items:center;justify-content:flex-end}
.dash-badges{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:flex-end}
.dash-bdg{font-size:.56rem !important;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.1rem .4rem !important;border-radius:.3rem;display:inline-flex;align-items:center;gap:.2rem;white-space:nowrap}
.dash-ico{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:1.9rem;border-radius:.55rem;color:#fff;font-size:1rem;text-decoration:none;transition:background .15s}
.dash-ico-qr{background:#0284c7}.dash-ico-qr:hover{background:#0ea5e9}.dash-ico-att{background:#f59e0b}.dash-ico-att:hover{background:#fbbf24}
/* Curriculum: FAMUS guarantee box in gold */
.pw-guarantee{background:linear-gradient(135deg,#2e2208 0%,#5a420f 38%,#7a5a14 52%,#4a350b 72%,#2a1f07 100%);border:1px solid #d4af37;box-shadow:0 0 0 1px rgba(255,226,140,.18) inset,0 8px 24px -8px rgba(212,175,55,.45)}
.pw-guarantee-icon{background:linear-gradient(145deg,#fff1b8 0%,#f2cf63 35%,#c99a1d 70%,#8a6410 100%);color:#3b2a05;border:1px solid #fff0b0;box-shadow:0 0 20px rgba(246,214,102,.55),inset 0 1px 2px rgba(255,255,255,.7)}
.pw-guarantee-title{color:#ffe9a3;text-shadow:0 1px 2px rgba(0,0,0,.45);letter-spacing:.01em}
.pw-guarantee-text{color:#f5ecd2}

/* ===================== Curriculum: accreditation pathways (one at a time, steps open on hover) ===================== */
.pw-paths.pw-paths-one{grid-template-columns:1fr !important;margin-top:1.25rem}
.pw-paths.pw-paths-one .pw-prereq{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)) !important}
.pwx{margin-top:1.25rem;border:1px solid #1e293b;border-radius:1rem;background:rgba(9,14,26,.55);padding:1.1rem 1.1rem 1.2rem}
.pwx-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.7rem}
.pwx-switch{display:inline-flex;gap:.35rem;padding:.25rem;border-radius:.9rem;background:#0b1120;border:1px solid #1e293b}
.pwx-tab{font:inherit;font-size:.8rem;font-weight:700;color:#94a3b8;background:transparent;border:0;border-radius:.65rem;padding:.5rem 1rem;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:background .2s,color .2s}
.pwx-tab:hover{background:#1d3a5c;color:#fff}.pwx-tab.on,.pwx-tab.on:hover{background:#0369a1;color:#fff;cursor:default}
.pwx-hint{font-size:.7rem;color:#64748b}
.pwx-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.68rem;color:#94a3b8;margin-bottom:.8rem}.pwx-legend span{display:inline-flex;align-items:center;gap:.4rem}
.pwx-dot{display:inline-block;width:.65rem;height:.65rem;border-radius:.2rem}.pwx-dot-prog{background:#10b981}.pwx-dot-req{background:#f43f5e}.pwx-dot-sup{background:#0ea5e9}
.pwx-view{overflow:hidden;transition:height .4s cubic-bezier(.4,0,.2,1)}
.pwx-track{display:flex;align-items:flex-start;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.pwx-panel{flex:0 0 100%;min-width:0;box-sizing:border-box;visibility:hidden;transition:visibility 0s .5s}
.pwx-panel.on{visibility:visible;transition-delay:0s}
.pwx-panel .pw-subtitle{margin:0 0 .9rem}
.pwx-steps{list-style:none;margin:0;padding:0;display:flex;gap:.5rem;height:9.5rem}
.pwx-step{position:relative;flex:.0001 0 3.3rem;min-width:0;overflow:hidden;box-sizing:border-box;border-radius:.9rem;border:1px solid #334155;background:#090e1a;padding:.8rem .5rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.8rem;color:#cbd5e1;font-size:.85rem;font-weight:600;line-height:1.45;transition:flex-grow .4s cubic-bezier(.4,0,.2,1),background .25s,border-color .25s,padding .3s;outline:0}
.pwx-step:hover:not(.open),.pwx-step:focus-visible:not(.open){border-color:#38bdf8;background:#0f1a2e}
.pwx-step.open{flex-grow:1;align-items:flex-start;padding:.9rem 1.1rem;border-color:#38bdf8;background:#0c1a30;box-shadow:0 0 0 1px rgba(56,189,248,.25),0 10px 24px -10px rgba(14,165,233,.35)}
.pwx-num{flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:50%;background:#1e293b;color:#94a3b8;font-size:.8rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.pwx-step.open .pwx-num{background:#38bdf8;color:#082f49}
.pwx-body{min-width:15rem;opacity:0;pointer-events:none;transition:opacity .15s}
.pwx-step.open .pwx-body{opacity:1;pointer-events:auto;transition:opacity .3s .18s}
.pwx-body em{font-style:normal;font-weight:500;color:#94a3b8}
.pwx-body small{display:block;margin-top:.4rem;font-size:.75rem;font-weight:700;color:#6ee7b7}

.pwx-prog{border-color:rgba(16,185,129,.6);background:rgba(16,185,129,.10)}.pwx-prog .pwx-num{background:#10b981;color:#022c22}
.pwx-prog:hover:not(.open),.pwx-prog.open{border-color:#10b981}.pwx-prog.open{background:rgba(16,185,129,.14);box-shadow:0 0 0 1px rgba(16,185,129,.3),0 10px 24px -10px rgba(16,185,129,.4)}
.pwx-sup{border-color:rgba(14,165,233,.65);background:rgba(14,165,233,.12)}.pwx-sup .pwx-num{background:#0ea5e9;color:#082f49}.pwx-sup small{color:#7dd3fc}
.pwx-final{border-color:rgba(245,158,11,.7);background:rgba(245,158,11,.14);color:#fde68a}.pwx-final .pwx-num,.pwx-final.open .pwx-num{background:#f59e0b;color:#1c1917}.pwx-final small{color:#fcd34d}
.pwx-final.open{border-color:#fbbf24;box-shadow:0 0 0 1px rgba(251,191,36,.3),0 10px 24px -10px rgba(245,158,11,.5)}
.pwx-step.pwx-prog.open .pwx-num{background:#10b981;color:#022c22}.pwx-step.pwx-sup.open .pwx-num{background:#0ea5e9;color:#082f49}
@media (max-width:1000px){
  .pwx-steps{flex-direction:column;height:auto;gap:.4rem}
  .pwx-step{flex:none;flex-direction:row;align-items:flex-start;gap:.8rem;max-height:3.2rem;padding:.7rem .8rem;transition:max-height .4s ease,background .25s,border-color .25s}
  .pwx-step.open{max-height:16rem;padding:.7rem .8rem}
  .pwx-body{min-width:0;flex:1}
  .pwx-hint{display:none}
}

/* pathway steps: dimmed background picture fading into the box colour, next step peeks open */
.pwx-step{--bgc:#090e1a;background:var(--bgc);isolation:isolate;transition:flex-grow .4s cubic-bezier(.4,0,.2,1),flex-basis .4s cubic-bezier(.4,0,.2,1),background .25s,border-color .25s,padding .3s}
.pwx-step.open{--bgc:#0c1a30}
.pwx-prog{--bgc:#0a1f24;background:var(--bgc)}.pwx-prog.open{--bgc:#0b2428;background:var(--bgc)}
.pwx-sup{--bgc:#0a2033;background:var(--bgc)}.pwx-sup.open{--bgc:#0b2640;background:var(--bgc)}
.pwx-final{--bgc:#2a2218;background:var(--bgc)}.pwx-final.open{--bgc:#33281a;background:var(--bgc)}
.pwx-step:hover:not(.open){background:var(--bgc)}
.pwx-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.pwx-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;transition:opacity .3s}
.pwx-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bgc) 22%,rgba(0,0,0,0) 120%)}
.pwx-step.open .pwx-bg::after{background:linear-gradient(90deg,var(--bgc) 28%,rgba(0,0,0,0) 105%)}
.pwx-step.open .pwx-bg img{object-position:right center;opacity:.5}
.pwx-bg-logo img{object-fit:contain;filter:invert(1) grayscale(1);mix-blend-mode:screen;opacity:.3}
.pwx-step.open .pwx-bg-logo img{object-fit:contain;object-position:right center;opacity:.38}
.pwx-step.peek{flex-basis:9.5rem;align-items:flex-start;padding:.8rem .8rem}
.pwx-step.peek .pwx-body{opacity:.6;-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 100%);mask-image:linear-gradient(90deg,#000 45%,transparent 100%)}
.pwx-step.peek .pwx-req,.pwx-step.peek small{display:none}
@media (max-width:1000px){.pwx-step.peek{flex-basis:auto;max-height:3.2rem;padding:.7rem .8rem}.pwx-step.peek .pwx-body{opacity:0;-webkit-mask-image:none;mask-image:none}.pwx-bg::after,.pwx-step.open .pwx-bg::after{background:linear-gradient(90deg,var(--bgc) 30%,rgba(0,0,0,0) 110%)}}
.pwx-bg img[src$=".svg"]{object-fit:contain;object-position:center 88%;opacity:.55}
.pwx-step.open .pwx-bg img[src$=".svg"]{object-position:right center;opacity:.6}
.pwx-step.peek .pwx-bg img[src$=".svg"]{object-position:right center}
.pwx-step.peek .pwx-bg img,.pwx-step.peek .pwx-bg img[src$=".svg"]{opacity:.2}
.pwx-bg-logo img[src*="fusic_logo"]{filter:grayscale(1) brightness(1.7);mix-blend-mode:normal;opacity:.3}
.pwx-step.open .pwx-bg-logo img[src*="fusic_logo"]{opacity:.35}
.pwx-bg-logo img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%);mask-image:linear-gradient(90deg,transparent 0,#000 45%)}

.pwx-bg-logo img,.pwx-bg-logo img[src*="fusic_logo"]{filter:none;mix-blend-mode:normal;opacity:.28}
.pwx-step.open .pwx-bg-logo img,.pwx-step.open .pwx-bg-logo img[src*="fusic_logo"]{opacity:.38}

/* pathway: fixed number position, essential badge (icon only until open), gold final step */
@media (min-width:1001px){
  .pwx-step,.pwx-step.open,.pwx-step.peek{align-items:flex-start;padding:.8rem .7rem}
}
.pwx-req{margin-top:auto;display:inline-flex;align-items:center;height:1.9rem;min-width:1.9rem;box-sizing:border-box;border-radius:999px;background:rgba(244,63,94,.18);border:1px solid rgba(244,63,94,.65);color:#fda4af;font-size:.64rem;font-weight:700;white-space:nowrap;overflow:hidden;justify-content:center;transition:background .25s}
.pwx-req>i{flex:0 0 auto;width:1.9rem;text-align:center;font-size:.72rem;margin-left:-1px}
.pwx-req-t{max-width:0;opacity:0;overflow:hidden;transition:max-width .4s cubic-bezier(.4,0,.2,1),opacity .25s,padding .3s}
.pwx-step.open .pwx-req{justify-content:flex-start}
.pwx-step.open .pwx-req-t{max-width:22rem;opacity:1;padding-right:.8rem;transition:max-width .5s cubic-bezier(.4,0,.2,1) .1s,opacity .3s .25s,padding .3s}
.pwx-step.peek .pwx-req-t{display:none}
@media (max-width:1000px){
  .pwx-step{flex-wrap:wrap;row-gap:.5rem}
  .pwx-req{margin:0 0 0 auto;align-self:flex-start;height:1.6rem;min-width:1.6rem}.pwx-req>i{width:1.6rem}
  .pwx-step.open .pwx-req{flex-basis:auto;margin:.1rem 0 .1rem 2.6rem;order:3}
  .pwx-step.open .pwx-body{flex:1 1 calc(100% - 3rem)}
}
/* gold final step */
.pwx-final{--bgc:#33270b;border:1px solid #d4af37;box-shadow:0 0 0 1px rgba(255,226,140,.16) inset}
.pwx-final.open{--bgc:#3d2e0c;border-color:#f0cd5d;box-shadow:0 0 0 1px rgba(255,226,140,.28) inset,0 0 26px -4px rgba(212,175,55,.55),0 10px 24px -10px rgba(245,158,11,.5)}
.pwx-final .pwx-bg::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 82% 50%,rgba(246,214,102,.34),rgba(246,214,102,0) 62%)}
.pwx-final .pwx-bg::after{background:linear-gradient(180deg,var(--bgc) 15%,rgba(0,0,0,0) 120%)}
.pwx-final.open .pwx-bg::after{background:linear-gradient(90deg,var(--bgc) 26%,rgba(0,0,0,0) 105%)}
.pwx-final .pwx-bg img{filter:sepia(1) saturate(3.5) brightness(1.25);opacity:.34}
.pwx-final.open .pwx-bg img{opacity:.5}
.pwx-final .pwx-num,.pwx-final.open .pwx-num{background:linear-gradient(145deg,#fff1b8 0%,#f2cf63 38%,#c99a1d 72%,#8a6410 100%);color:#3b2a05;border:1px solid #fff0b0;box-shadow:0 0 14px rgba(246,214,102,.5)}
.pwx-final .pwx-body{color:#ffe9a3;text-shadow:0 1px 2px rgba(0,0,0,.5);font-weight:700}
.pwx-final small{color:#fcd34d}
.pwx-step.peek .pwx-req{display:inline-flex}
@media (max-width:1000px){.pwx-step.open .pwx-req{height:auto;min-height:1.6rem;white-space:normal;border-radius:.9rem;max-width:calc(100% - 3rem)}.pwx-step.open .pwx-req>i{align-self:flex-start;margin-top:.35rem;width:1.6rem;height:1rem}.pwx-step.open .pwx-req-t{padding:.3rem .7rem .3rem 0;white-space:normal;line-height:1.3}}

/* phones: every step is fully open and fades in as you scroll down */
@media (max-width:1000px){
  .pwx-step{max-height:none}
  .pwx-step.open{max-height:none;flex-direction:row}
  .pwx-step.open .pwx-body{opacity:1;pointer-events:auto}
  .pwx-step.open .pwx-req-t{max-width:22rem;opacity:1}
  .pwx-root-dummy{display:none}
  .pwx.pwx-js .pwx-step{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease,border-color .25s}
  .pwx.pwx-js .pwx-step.in{opacity:1;transform:none}
  .pwx-steps{gap:.6rem}
}
@media (prefers-reduced-motion:reduce){.pwx.pwx-js .pwx-step{opacity:1;transform:none;transition:none}}
@media (max-width:1000px){.pwx-step.open .pwx-req{height:1.6rem;white-space:nowrap;border-radius:999px}.pwx-step.open .pwx-req>i{margin-top:0;height:auto}.pwx-step.open .pwx-req-t{padding:0 .7rem 0 0;white-space:nowrap}}
.pwx-step.open .pwx-bg img[src$=".svg"]{opacity:.6}
.pwx-bg img[src$=".svg"]{box-sizing:border-box;padding:.8rem .4rem}
.pwx-step.open .pwx-bg img[src$=".svg"]{padding:.8rem 1.4rem .8rem .4rem}
/* partly open step: keep the text on one line (clipped and faded), and keep illustrations clear of the essential badge */
.pwx-step.peek .pwx-body{white-space:nowrap}
.pwx-step:not(.open) .pwx-bg img[src$=".svg"]{top:3.2rem;bottom:auto;height:calc(100% - 6.4rem);padding:.2rem}
.pwx-step.peek .pwx-bg img[src$=".svg"]{object-position:right center}
/* open-step text keeps one fixed width in every state, so it never re-wraps while a step opens or closes (set from curriculum.php) */
@media (min-width:1001px){.pwx-body{width:var(--pwx-bw,26rem);min-width:var(--pwx-bw,26rem);flex:0 0 auto}}
/* stacked layout fixes: flag centred in its badge; panel padding so the left border / glow of steps is not clipped by the sliding view */
.pwx-panel{padding:6px}
@media (max-width:1000px){
  .pwx-req{align-items:center}
  .pwx-req>i,.pwx-step.open .pwx-req>i{align-self:center;margin:0;height:auto;line-height:1;display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:480px){.pwx-step.open .pwx-req{margin-left:0;max-width:100%}}
@media (max-width:400px){.pwx-step.open .pwx-req{height:auto;min-height:1.6rem;border-radius:.9rem}.pwx-step.open .pwx-req-t{white-space:normal;line-height:1.2;padding:.25rem .6rem .25rem 0;max-width:none}}

/* News editor on phones: one scrollable toolbar row and a shorter writing box (the on-screen keyboard takes the rest) */
@media(max-width:640px){
.news-ed{scroll-margin-top:14rem}
.news-ed-bar,.news-ed-tablebar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.news-ed-bar>*,.news-ed-tablebar>*{flex:0 0 auto}
.news-ed-area{height:clamp(8rem,34dvh,18rem);height:clamp(8rem,34vh,18rem);height:clamp(8rem,34dvh,18rem)}
}

/* ---------------------------------------------------------------- Upload a scan (scan_upload.php, scan_view.php, scan_review.php, js/cliptrim.js) */
.lb-btn-off { opacity:.45; cursor:not-allowed; }
.lb-btn-off:hover { background:#1e293b; color:#e2e8f0; }
.sc-card { background:#0f172a; border:1px solid #1e293b; border-radius:1rem; padding:1rem 1.1rem; margin:0 0 1rem; display:flex; flex-direction:column; gap:.7rem; }
.sc-h3 { font-size:1rem; color:#fff; margin:0; }
.sc-h3 small { color:#94a3b8; font-weight:500; font-size:.7rem; text-transform:none; }
.sc-h4 { font-size:.85rem; color:#7dd3fc; margin:.6rem 0 .1rem; }
.sc-chip { display:inline-block; font-size:.65rem; font-weight:700; padding:.15rem .5rem; border-radius:999px; border:1px solid #334155; background:#131c33; color:#cbd5e1; white-space:nowrap; }
.sc-chip-draft { color:#94a3b8; }
.sc-chip-ready { background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.6); color:#fcd34d; }
.sc-chip-sent_back { background:rgba(244,63,94,.12); border-color:rgba(244,63,94,.5); color:#fda4af; }
.sc-chip-signed { background:rgba(16,185,129,.15); border-color:rgba(16,185,129,.55); color:#6ee7b7; }
.sc-fb { background:#090e1a; border-left:3px solid #f59e0b; border-radius:.4rem; padding:.45rem .65rem; margin:.4rem 0 0; font-size:.78rem; color:#e2e8f0; }
.sc-msg { min-height:1.1em; font-size:.78rem; color:#7dd3fc; margin:0; }
.sc-bad { color:#fda4af; }
.sc-view { border-top:1px solid #1e293b; padding-top:.7rem; margin-top:.4rem; }
.sc-view-head { display:flex; gap:.5rem; align-items:center; color:#e2e8f0; font-size:.82rem; margin-bottom:.4rem; }
.sc-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.7rem; }
.sc-slot { background:#090e1a; border:1px solid #1e293b; border-radius:.7rem; padding:.55rem; display:flex; flex-direction:column; gap:.4rem; }
.sc-slot-media:empty { display:none; }
.sc-slot-media video, .sc-slot-media img { width:100%; max-height:220px; border-radius:.5rem; background:#000; object-fit:contain; display:block; }
.sc-slot-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.sc-slot:not([data-media]) .sc-del { display:none; }
.sc-slot-status { font-size:.7rem; color:#94a3b8; min-height:1em; }
.sc-hidden { font-size:.72rem; color:#fda4af; border:1px dashed rgba(244,63,94,.5); border-radius:.5rem; padding:.6rem; }
.sc-qrow { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; padding:.35rem 0; border-bottom:1px solid #1e293b; font-size:.8rem; color:#e2e8f0; }
.sc-qrow[hidden] { display:none; }
.sc-q { flex:1 1 220px; }
.sc-tri { display:inline-flex; gap:.3rem; flex-wrap:nowrap; }
.sc-pill { cursor:pointer; position:relative; }
.sc-pill input { position:absolute; opacity:0; width:1px; height:1px; }
.sc-pill span { display:inline-block; min-width:2.4rem; text-align:center; font-size:.72rem; font-weight:700; padding:.35rem .6rem; border-radius:.5rem; border:1px solid #334155; background:#131c33; color:#cbd5e1; }
.sc-pill input:checked + span { background:#0369a1; border-color:#38bdf8; color:#fff; }
.sc-pill input:focus-visible + span { outline:2px solid #38bdf8; outline-offset:1px; }
.sc-grid th, .sc-grid td { text-align:center; white-space:nowrap; }
.sc-grid th[scope=row] { text-align:left; white-space:normal; min-width:9rem; }
.sc-fld { margin:.2rem 0; }
.sc-confirm { align-items:flex-start; }
.sc-ro-line { display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0; border-bottom:1px solid #1e293b; font-size:.8rem; color:#e2e8f0; flex-wrap:wrap; }
.sc-ro-line > b { color:#94a3b8; font-weight:600; }


.sc-na { color:#64748b; }
.sc-ans, .sc-ans-yes, .sc-ans-no, .sc-ans-ua { color:#fff; font-weight:600; }
/* clip picker (js/cliptrim.js) and image picker */
body.sc-modal-open { overflow:hidden; }
.sc-modal { position:fixed; inset:0; z-index:1000; background:rgba(2,6,23,.85); display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:1rem .6rem; }
.sc-modal-box { background:#0f172a; border:1px solid #334155; border-radius:1rem; padding:1rem; width:100%; max-width:640px; display:flex; flex-direction:column; gap:.6rem; color:#e2e8f0; }
.sc-modal-head { display:flex; justify-content:space-between; align-items:center; gap:.6rem; color:#fff; padding-bottom:.75rem; border-bottom:1px solid #1e293b; }
.sc-note { font-size:.75rem; color:#94a3b8; margin:0; }
.sc-warn { font-size:.75rem; color:#fcd34d; margin:0; }
.sc-video { width:100%; max-height:300px; background:#000; border-radius:.6rem; }
.sc-row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.sc-strong { font-weight:700; color:#fff; }
.sc-prev { max-width:100%; border-radius:.5rem; background:#000; }
.sc-confirm { background:#090e1a; border:1px solid #334155; border-radius:.6rem; padding:.55rem .7rem; }
.sc-progress { height:8px; background:#1e293b; border-radius:999px; overflow:hidden; }
.sc-progress-fill { height:8px; width:0; background:#0ea5e9; }
.ct-bar { position:relative; height:78px; margin:12px 14px 0; touch-action:none; user-select:none; -webkit-user-select:none; }
.ct-trk { position:absolute; left:0; right:0; top:22px; height:10px; border-radius:5px; background:#1e293b; cursor:pointer; }
.ct-sel { position:absolute; top:22px; height:10px; background:#0ea5e9; border-radius:5px; pointer-events:none; }
.ct-head { position:absolute; top:14px; height:26px; width:2px; margin-left:-1px; background:#fff; pointer-events:none; opacity:.85; }
.ct-ov { position:relative; height:30px; margin:8px 14px 0; border-radius:8px; background:#1e293b; touch-action:none; user-select:none; -webkit-user-select:none; cursor:pointer; }
.ct-ovsel { position:absolute; top:11px; height:8px; border-radius:4px; background:#0ea5e9; pointer-events:none; }
.ct-ovbox { position:absolute; top:0; bottom:0; border:2px solid #94a3b8; border-radius:8px; background:rgba(148,163,184,.2); box-sizing:border-box; cursor:grab; touch-action:none; }
.ct-move { position:absolute; top:10px; height:34px; cursor:grab; touch-action:none; }
.ct-h { position:absolute; top:10px; width:22px; height:34px; margin-left:-11px; border-radius:8px; background:#f8fafc; border:3px solid #0ea5e9; box-sizing:border-box; cursor:grab; box-shadow:0 2px 6px rgba(0,0,0,.5); touch-action:none; }
.ct-h:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.ct-h:active { cursor:grabbing; }
.ct-l { position:absolute; top:50px; transform:translateX(-50%); font-size:12px; font-weight:700; color:#e2e8f0; white-space:nowrap; background:#0f172a; border:1px solid #334155; border-radius:6px; padding:1px 6px; pointer-events:none; }
@media (max-width:600px) { .sc-slots { grid-template-columns:1fr; } .sc-qrow { align-items:flex-start; } }

/* Upload a scan: the logbook form (scan-form) and the Upload and Report Form button */
.sc-steps { margin:.2rem 0 .4rem 1.1rem; padding:0; font-size:.78rem; color:#cbd5e1; display:flex; flex-direction:column; gap:.25rem; list-style:decimal; }
.sc-upload-row { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:.4rem 0; }
.sc-up { background:#0369a1; border-color:#38bdf8; color:#fff; }
.sc-up:hover { background:#075985; color:#fff; }
.sc-up-partial { background:#0c4a6e; border-color:#38bdf8; }
.sc-up-complete { background:rgba(16,185,129,.18); border-color:rgba(16,185,129,.7); color:#6ee7b7; }
.sc-up-complete:hover { background:rgba(14,165,233,.25); border-color:#38bdf8; color:#fff; }
.sc-up-complete:hover .sc-up-ic::before { content:""; }   /* pencil-square: it can be clicked to edit */

/* Upload a scan: tip, media icon, flash of the saved row */
.sc-tipbtn { display:inline-flex; vertical-align:middle; margin-left:.5rem; }
.sc-tipbtn.sc-tip-on { background:#0c4a6e; color:#e0f2fe; }
.sc-tip { background:#0f172a; border:1px solid #334155; border-radius:.9rem; padding:.7rem .9rem; color:#cbd5e1; font-size:.8rem; line-height:1.5; }
.sc-tip[hidden] { display:none; }
.sc-tip .tip-head { display:flex; align-items:center; gap:.4rem; font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#38bdf8; margin-bottom:.3rem; }
.sc-tip .sc-steps { margin-bottom:0; }
.sc-unfinished a { color:#7dd3fc; font-weight:700; margin-right:.4rem; }
.sc-media-ic { color:#7dd3fc; margin-left:.35rem; font-size:.95rem; }
.sc-media-ic:hover { color:#fff; }
.lb-row-flash td { animation:lbRowFlash 3s ease-out 1; }
@keyframes lbRowFlash { 0%,35% { background:rgba(14,165,233,.28); } 100% { background:transparent; } }



/* scan feedback box: no left bar; reviewer on its own line with badge, feedback underneath */
.sc-fb { border-left:0; }
.sc-fb-by { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; font-weight:700; color:#fde68a; margin-bottom:.2rem; }
.sc-fb-from { font-weight:400; color:#94a3b8; font-size:.72rem; }
.sc-fb-body { color:#e2e8f0; }
/* attention count next to a module / tab */
.lb-attn { display:inline-flex; align-items:center; justify-content:center; min-width:1.15rem; height:1.15rem; padding:0 .3rem; border-radius:999px; background:#f59e0b; color:#0b1120; font-size:.65rem; font-weight:800; line-height:1; }
.lb-attn-back { background:#f43f5e; color:#fff; }
/* module panels: visible arrow showing the panel opens and closes */
.lb-details > summary::after { content:none; }
.lb-details > summary::before { content:""; flex:0 0 auto; width:0; height:0; border-left:.38rem solid transparent; border-right:.38rem solid transparent; border-top:.5rem solid #38bdf8; transition:transform .15s; transform:rotate(-90deg); }
.lb-details[open] > summary::before { transform:rotate(0); }

/* ---- Upload a scan pages: panels and headings match the rest of the site (bg-[#131c33] rounded-xl border-slate-800, bold white h3 with a coloured icon) ---- */
.sc-card { background:#131c33; border:1px solid #1e293b; border-radius:.75rem; padding:1.25rem; }
.sc-h3 { font-size:1.125rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:.5rem; text-transform:none; }
.sc-card > h3 small { color:#94a3b8; font-weight:500; font-size:.7rem; }
.sc-page > .sc-card, .sc-page > .sc-two > .sc-card { margin:0; }
.sc-two { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.25rem; align-items:start; }
@media (max-width:900px) { .sc-two { grid-template-columns:minmax(0, 1fr); } }
.sc-two > *, .sc-page > * { min-width:0; }
.sc-toprow { display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; }
.sc-share-wrap { position:relative; }
.sc-share-pop { position:absolute; right:0; top:calc(100% + .4rem); z-index:20; width:min(20rem, 86vw); background:#0f172a; border:1px solid #334155; border-radius:.75rem; padding:.85rem; display:flex; flex-direction:column; gap:.6rem; font-size:.78rem; color:#e2e8f0; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.sc-share-pop[hidden] { display:none; }
/* scan details with icons */
.sc-kv { display:flex; flex-direction:column; margin:0; }
.sc-kv > div { display:grid; grid-template-columns:1.1rem 9.5rem 1fr; column-gap:.6rem; align-items:baseline; padding:.55rem .2rem; border-bottom:1px solid #1e293b; }
.sc-kv > div:last-child { border-bottom:0; }
.sc-kv > div > i { color:#7dd3fc; font-size:.8rem; text-align:center; }
.sc-kv > div > span { font-size:.78rem; color:#94a3b8; font-weight:600; }
.sc-kv > div > b { font-size:.86rem; color:#fff; font-weight:600; overflow-wrap:anywhere; }
@media (max-width:480px) { .sc-kv > div { grid-template-columns:1.1rem 1fr; } .sc-kv > div > b { grid-column:2; } }
/* clips: up to 3 side by side, 16:9 like the pathology clips in Resources */
.sc-slots.sc-slots-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:900px) { .sc-slots.sc-slots-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:600px) { .sc-slots.sc-slots-3 { grid-template-columns:1fr; } }
.sc-slot-media { position:relative; aspect-ratio:16 / 9; background:#090e1a; border-radius:.6rem; overflow:hidden; }
.sc-slot-media video, .sc-slot-media img { position:absolute; inset:0; width:100%; height:100%; max-height:none; border-radius:0; object-fit:contain; background:#000; }
.sc-slot-media .sc-hidden { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; }
/* reviewer: optional feedback per view */
.sc-fbv-wrap { margin-top:.6rem; display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; }
.sc-fb-toggle em { font-style:normal; color:#94a3b8; font-weight:400; }
.sc-fb-edit { width:100%; display:flex; flex-direction:column; gap:.5rem; }
.sc-fb-edit[hidden] { display:none; }
.sc-fb-edit textarea { width:100%; background:#090e1a; border:1px solid #334155; border-radius:.6rem; color:#e2e8f0; padding:.55rem .7rem; font-size:.82rem; }
.sc-fb-row { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
/* text typed by the student: black box */
.sc-student { background:#02040a; border:1px solid #1e293b; border-radius:.75rem; padding:.7rem .85rem; margin:.45rem 0; }
.sc-student-by { font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:#7dd3fc; display:flex; align-items:center; gap:.4rem; }
.sc-student p { margin:.35rem 0 0; font-size:.85rem; color:#e2e8f0; line-height:1.55; }
.sc-fb { background:#090e1a; border:1px solid #1e293b; border-radius:.7rem; padding:.6rem .8rem; }

/* Logbook Progress (one trainee): FAMUS / FUSIC switch and jump links */
.lbp-jump { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; background:#0f172a; border:1px solid #1e293b; border-radius:.9rem; padding:.5rem .8rem; }
.lbp-jump { position:sticky; top:var(--lbp-top, 140px); z-index:30; }
@media (max-width:899px) {   /* phones: one slim row that scrolls sideways, so it takes little of the screen while stuck */
  .lbp-jump { flex-direction:row; flex-wrap:nowrap; align-items:center; gap:.5rem; padding:.4rem .55rem; overflow-x:auto; scrollbar-width:none; }
  .lbp-jump::-webkit-scrollbar { display:none; }
  .lbp-jump .lbp-links { flex-wrap:nowrap; flex:none; }
  .lbp-jump .lbp-links-lbl { display:none; }
  .lbp-jump .lbp-links a, .lbp-jump .lbp-switch-btn { white-space:nowrap; }
  .lbp-jump .lbp-switch { flex:none; align-self:center; }
}
.lbp-switch { display:inline-flex; align-self:flex-start; background:#090e1a; border:1px solid #334155; border-radius:999px; padding:.2rem; gap:.2rem; }
.lbp-switch-btn { border:0; background:transparent; color:#94a3b8; font-size:.78rem; font-weight:700; padding:.4rem .95rem; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; transition:background .15s, color .15s; }
.lbp-switch-btn:hover { color:#fff; }
.lbp-switch-btn.is-on { background:#0284c7; color:#fff; box-shadow:0 1px 6px rgba(2,132,199,.5); }
.lbp-links { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.lbp-links-lbl { font-size:.7rem; color:#64748b; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-right:.2rem; }
.lbp-links a { font-size:.72rem; font-weight:600; color:#cbd5e1; background:#131c33; border:1px solid #334155; border-radius:.5rem; padding:.28rem .6rem; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; }
.lbp-links a i { color:#38bdf8; }
.lbp-links a:hover { color:#fff; border-color:#64748b; }
.lbp-links a.is-active { color:#fff; background:#0369a1; border-color:#38bdf8; }
.lbp-links a.is-active i { color:#fff; }
.lbp-sec[hidden] { display:none; }
.lbp-sec, #lbNotes { scroll-margin-top:var(--lbp-scroll, 12rem); }
.lbp-sec [id^="lb-"] { scroll-margin-top:var(--lbp-scroll, 12rem); }

/* report read-only view: banded rows, all answers white */
.sc-ro > .sc-ro-line { padding:.4rem .6rem; border-bottom:0; border-radius:.4rem; }
.sc-ro > .sc-ro-line:nth-of-type(even) { background:rgba(148,163,184,.08); }
.sc-ro .sc-grid tbody tr:nth-child(even) > * { background:rgba(148,163,184,.08); }
.sc-ro .sc-grid td.sc-ans { color:#fff; font-weight:600; }

/* Logbook Progress: ready for mentored practice, inside each module card */
.lb-gate { border-top:1px dashed #1e293b; margin-top:.35rem; padding-top:.5rem; display:flex; flex-direction:column; gap:.4rem; }
.lb-gate-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.78rem; color:#cbd5e1; }
.lb-gate-pill { font-size:.7rem; font-weight:800; padding:.12rem .55rem; border-radius:999px; border:1px solid; white-space:nowrap; }
.lb-gate-yes { color:#6ee7b7; background:rgba(16,185,129,.15); border-color:rgba(16,185,129,.55); }
.lb-gate-no { color:#fda4af; background:rgba(244,63,94,.12); border-color:rgba(244,63,94,.5); }
.lb-gate-form { display:flex; align-items:center; gap:.5rem; margin:0; }
.lb-gate-lbl { font-size:.7rem; color:#94a3b8; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.lb-gate-btn { display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; font-weight:800; padding:.25rem .7rem; border-radius:.5rem; border:1px solid; cursor:pointer; color:#fff; }
.lb-gate-btn.is-on { background:#047857; border-color:#34d399; }
.lb-gate-btn.is-on:hover { background:#059669; }
.lb-gate-btn.is-off { background:#be123c; border-color:#fb7185; }
.lb-gate-btn.is-off:hover { background:#e11d48; }
/* the jump row once it is stuck under the header */
.lbp-jump { transition:border-color .15s, box-shadow .15s; }
.lbp-jump.is-stuck { border-color:#38bdf8; box-shadow:0 6px 18px rgba(2,132,199,.25); }

/* views: number, Mandatory badge; empty slots show only their buttons */
.sc-vno { display:inline-flex; align-items:center; justify-content:center; min-width:1.5rem; height:1.5rem; border-radius:999px; background:#0c4a6e; color:#7dd3fc; font-size:.72rem; font-weight:800; flex:0 0 auto; }
.sc-mand { display:inline-block; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.1rem .45rem; border-radius:5px; background:rgba(255,224,0,.14); border:1px solid rgba(255,224,0,.55); color:#ffe000; vertical-align:middle; }
.sc-slot:not([data-media]) { background:transparent; border-color:transparent; padding:0; }
/* clip picker: padding, and the drag-to-crop preview */
.sc-modal-box { padding:1.4rem 1.5rem; gap:.9rem; }
@media (max-width:600px) { .sc-modal-box { padding:1rem; } }
.sc-modal-box .lb-check > span { flex:1; min-width:0; }
.ct-stage { position:relative; width:100%; margin:14px 0; user-select:none; -webkit-user-select:none; touch-action:none; }
.ct-stage canvas { display:block; width:100%; height:auto; border-radius:.5rem; background:#000; max-width:100%; }
.ct-red { position:absolute; left:0; right:0; background:rgba(220,0,0,.5); pointer-events:none; }
.ct-red-top { top:0; border-radius:.5rem .5rem 0 0; }
.ct-red-bot { bottom:0; border-radius:0 0 .5rem .5rem; }
.ct-edge { position:absolute; left:0; right:0; height:22px; margin-top:-11px; cursor:ns-resize; touch-action:none; z-index:2; }
.ct-edge::before { content:""; position:absolute; left:0; right:0; top:10px; height:2px; background:#fff; box-shadow:0 0 0 1px rgba(220,0,0,.9); }
.ct-edge::after { content:"↕ drag"; position:absolute; left:50%; top:0; transform:translateX(-50%); height:22px; line-height:22px; padding:0 .7rem; border-radius:999px; background:#fff; color:#b91c1c; border:2px solid #dc2626; font-size:11px; font-weight:800; white-space:nowrap; box-sizing:border-box; }
.ct-edge:focus-visible::after { outline:2px solid #38bdf8; outline-offset:2px; }
.ct-stage.is-off .ct-red, .ct-stage.is-off .ct-edge { display:none; }

/* clip / image pickers: even spacing between every block */
.sc-modal-box > div[data-r="stage"]:not([hidden]) { display:flex; flex-direction:column; gap:.95rem; }
.sc-modal-box .sc-note, .sc-modal-box .lb-hint, .sc-modal-box .sc-warn { margin:0; }
.sc-modal-box .sc-confirm { padding:.75rem .9rem; margin:0; }
.sc-modal-box .lb-form-actions { margin:.2rem 0 0; padding:0; }
.sc-modal-box .lb-field { margin:0; }
/* upload page: Add clip / Add image side by side, larger; a slot with a clip or image keeps its box */
.sc-slots.sc-slots-up { display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-start; grid-template-columns:none; }
.sc-slots-up .sc-slot:not([data-media]) { flex:0 0 auto; }
.sc-slots-up .sc-slot:not([data-media]) .sc-slot-actions .sc-add { font-size:.85rem; padding:.65rem 1.2rem; }
.sc-slots-up .sc-slot[data-media] { flex:1 1 15rem; max-width:calc((100% - 1.6rem) / 3); min-width:15rem; }
@media (max-width:600px) { .sc-slots-up .sc-slot[data-media] { max-width:100%; flex-basis:100%; } }

/* upload page: Add disappears once a clip / image is there (delete it to add another); optional comment per clip / image */
.sc-slot[data-media] .sc-add { display:none; }
.sc-slot:not([data-media]) .sc-cm, .sc-slot:not([data-media]) .sc-cm-box { display:none; }
.sc-cm-box { display:flex; flex-direction:column; gap:.45rem; }
.sc-cm-box[hidden] { display:none; }
.sc-cm-text { width:100%; background:#090e1a; border:1px solid #334155; border-radius:.6rem; color:#e2e8f0; padding:.5rem .65rem; font-size:.8rem; }
.sc-slots-up .sc-slot[data-media] { flex:0 0 calc((100% - 1.6rem) / 3); max-width:none; min-width:15rem; }
@media (max-width:600px) { .sc-slots-up .sc-slot[data-media] { flex-basis:100%; } }
/* started but not finished: amber */
.sc-up-partial { background:#b38600; border-color:#ffbf00; color:#fff; }   /* same pattern as the green Export Logbook button, in shades of #FFBF00 */
.sc-up-partial:hover { background:#cc9900; color:#fff; }
/* student's comment under a clip / image (scan page) */
.sc-slot-comment { background:#02040a; border:1px solid #1e293b; border-radius:.6rem; padding:.5rem .65rem; font-size:.8rem; color:#e2e8f0; line-height:1.5; }
.sc-slot-comment b { display:flex; align-items:center; gap:.35rem; font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:#7dd3fc; margin-bottom:.2rem; }
/* help toggle in the clip picker */
.ct-help { width:1.45rem; height:1.45rem; border-radius:999px; border:1px solid #475569; background:#131c33; color:#7dd3fc; font-size:.78rem; font-weight:800; cursor:pointer; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.ct-help:hover, .ct-help[aria-expanded="true"] { background:#0369a1; color:#fff; border-color:#38bdf8; }

/* "None": the student could not get a usable view */
.sc-slots-up .sc-slot-none { flex:0 0 auto; background:transparent; border-color:transparent; padding:0; }
.sc-slots-up .sc-slot-none .sc-none { font-size:.85rem; padding:.65rem 1.2rem; }
.sc-slots-up .sc-slot-none[data-on] , .sc-view.is-none .sc-slot-none { flex:1 1 18rem; max-width:32rem; }
.sc-view.is-none .sc-slot:not(.sc-slot-none) { display:none; }
.sc-view:has(.sc-slot[data-media]) .sc-slot-none { display:none; }
.sc-none-note { font-size:.78rem; color:#fde68a; margin:.2rem 0 .4rem; }
.sc-none-text { width:100%; background:#0b1120; border:1px solid #334155; border-radius:.6rem; color:#e2e8f0; padding:.5rem .6rem; font-size:.82rem; }
.sc-none-view { display:flex; flex-direction:column; gap:.2rem; background:#2a2108; border:1px solid #ffbf00; border-radius:.6rem; padding:.55rem .75rem; margin-bottom:.6rem; color:#fde68a; font-size:.82rem; }
.sc-none-view b { color:#ffd54a; }

/* Site pop-ups (js/dialog.js): replace the browser's own confirm / alert boxes */
body.pm-open { overflow:hidden; }
.pm-overlay { position:fixed; inset:0; z-index:10000; background:rgba(2,6,23,.85); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:1rem; }
.pm-box { background:#131c33; border:1px solid #1e293b; border-radius:1rem; max-width:28rem; width:100%; max-height:90vh; overflow:auto; padding:1.25rem 1.3rem 1.1rem; box-shadow:0 20px 60px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:.7rem; color:#e2e8f0; }
.pm-title { display:flex; align-items:flex-start; gap:.5rem; color:#fff; font-weight:800; font-size:1.05rem; text-transform:none; line-height:1.35; }
.pm-title i { color:#38bdf8; margin-top:.2rem; }
.pm-danger .pm-title i { color:#fda4af; }
.pm-msg { margin:0; color:#94a3b8; font-size:.85rem; line-height:1.55; white-space:pre-line; }
.pm-input { width:100%; background:#0b1120; border:1px solid #334155; border-radius:.6rem; color:#e2e8f0; padding:.55rem .7rem; font-size:.82rem; }
.pm-actions { display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; margin-top:.2rem; }
.pm-actions .btn { min-width:6rem; justify-content:center; }

/* Zone diagram beside the views (js/lungmap.js). Desktop: right column, sticky. Phones: full size above the views, then docked small at the right while scrolling. */
.sc-mapgrid { display:block; }
.sc-mapmain { min-width:0; }
.sc-map-slot { margin-bottom:.8rem; }
.sc-map { background:#000; border:1px solid #1e293b; border-radius:.8rem; overflow:hidden; padding:0; width:100%; max-width:22rem; margin:0 auto; }
.sc-map svg { width:100%; height:auto; display:block; }
@media (min-width:1000px) {
    .sc-mapgrid { display:grid; grid-template-columns:minmax(0,1fr) 22rem; gap:1.4rem; align-items:start; }
    .sc-map-slot { order:2; position:sticky; top:var(--sc-map-top, 8.5rem); margin:0; }
    .sc-map { max-width:none; margin:0; }
}
@media (max-width:999px) {
    .sc-mapgrid { --sc-dock-w:min(34vw, 22vh); }
    .sc-mapgrid.is-docked .sc-map { position:fixed; top:var(--sc-map-top, 5.2rem); right:8px; width:var(--sc-dock-w); max-width:none; margin:0; z-index:25; box-shadow:0 6px 14px rgba(2,6,23,.7); }
    .sc-mapgrid.is-docked.is-docked-off .sc-map { display:none; }
    .sc-mapgrid.is-docked .sc-map-key { display:none; }
}
.sc-mc { cursor:pointer; outline:none; }
/* numbers are drawn larger so they stay readable when the diagram shrinks on a phone; the selected / hovered one grows more and glows */
.sc-mc-c { transform:scale(1.25); transition:transform .15s; }
.sc-map[data-big] .sc-mc-c { transform:none; }   /* leg diagram: circles are already drawn larger */
.sc-mc.is-on .sc-mc-c { transform:scale(1.5); }
.sc-map[data-big] .sc-mc.is-on .sc-mc-c { transform:scale(1.2); }
@media (hover:hover) { .sc-mc:hover .sc-mc-c { transform:scale(1.5); } .sc-map[data-big] .sc-mc:hover .sc-mc-c { transform:scale(1.2); } .sc-mc:hover .sc-mc-ring { opacity:1; } }
.sc-mc-dot { fill:#254680; stroke:#fff; stroke-width:3; transition:fill .15s; }
.sc-mc-ring { fill:none; stroke:#bae6fd; stroke-width:9; opacity:0; transition:opacity .15s; filter:drop-shadow(0 0 7px rgba(125,211,252,.95)); }
.sc-mc-n { fill:#fff; font:600 38px "Inter",system-ui,sans-serif; pointer-events:none; }
.sc-mc.is-done .sc-mc-dot { fill:#16a34a; stroke:#86efac; filter:drop-shadow(0 0 6px rgba(34,197,94,.6)); }
.sc-mc.is-none .sc-mc-dot { fill:#dc2626; stroke:#fca5a5; filter:drop-shadow(0 0 6px rgba(239,68,68,.6)); }
.sc-mc.is-on .sc-mc-ring, .sc-mc:focus-visible .sc-mc-ring { opacity:1; }
.sc-mc.is-on .sc-mc-dot, .sc-mc:focus-visible .sc-mc-dot { fill:#0284c7; stroke:#fff; stroke-width:5; filter:drop-shadow(0 0 14px rgba(56,189,248,1)); }
.sc-mc.is-on.is-done .sc-mc-dot { fill:#22c55e; }
.sc-mc.is-on.is-none .sc-mc-dot { fill:#ef4444; }
.sc-map-key { padding:.1rem .5rem .6rem; display:flex; flex-wrap:wrap; gap:.3rem .8rem; justify-content:center; font-size:.68rem; color:#94a3b8; margin-top:.4rem; }
.sc-map-key i { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; margin-right:.25rem; vertical-align:-.05rem; border:2px solid #fff; }
 .sc-k-done { background:#16a34a; border-color:#86efac !important; } .sc-k-none { background:#dc2626; border-color:#fca5a5 !important; }
.sc-view.is-hl { background:rgba(56,189,248,.05); box-shadow:-.6rem 0 0 rgba(56,189,248,.05), .6rem 0 0 rgba(56,189,248,.05); border-radius:.4rem; }
.sc-view { transition:background .15s; }


.sc-sub { font-size:.78rem; font-weight:700; color:#7dd3fc; margin-bottom:.25rem; }
/* the selected number pulses */
.sc-mc-c { transform-box:fill-box; transform-origin:center; }
.sc-mc.is-on .sc-mc-ring { animation:scRing 1s ease-in-out infinite; }
@keyframes scRing { 0%,100% { opacity:1; } 50% { opacity:.15; } }
@media (prefers-reduced-motion:reduce) { .sc-mc.is-on .sc-mc-ring { animation:none; } }
@media (max-width:999px) { .sc-mapgrid.is-docked .sc-map { opacity:.92; } }

/* With the diagram column beside them, clips and images go two across (they were three across the full width) */
@media (min-width:1000px) {
    .sc-mapgrid .sc-slots-up .sc-slot[data-media] { flex:0 0 calc((100% - .8rem) / 2); min-width:0; max-width:none; }
    .sc-mapgrid .sc-slots.sc-slots-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ultrasound probes on the abdomen diagram: hidden, and they fade in for the selected view only */
.sc-probe { opacity:0; transition:opacity .4s ease; pointer-events:none; }
.sc-mc.is-on .sc-probe { opacity:1; }
.sc-mc .sc-probe-l, .sc-mc.is-on .sc-probe-l { opacity:0; }
.sc-mc[data-sub="2"] .sc-probe-t, .sc-mc.is-on[data-sub="2"] .sc-probe-t { opacity:0; }
.sc-mc.is-on[data-sub="2"] .sc-probe-l { opacity:1; }
@media (prefers-reduced-motion:reduce) { .sc-probe { transition:none; } }

/* findings card and conclusion card side by side on a wide screen */
.sc-pair { display:grid; grid-template-columns:minmax(0,1fr); gap:0 1rem; align-items:start; }
@media (min-width:900px) { .sc-pair { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

/* "please wait" panel in the Add a clip window */
.sc-busy { border:1px solid #0ea5e9; background:rgba(14,165,233,.1); border-radius:.6rem; padding:.7rem .8rem; margin:.5rem 0; }
.sc-busy-row { display:flex; align-items:center; gap:.7rem; margin-bottom:.55rem; }
.sc-busy-row > .sc-spin { flex:0 0 auto; width:2.1rem; height:2.1rem; color:#38bdf8; animation:scSpin 1s steps(10, end) infinite; }
@keyframes scSpin { to { transform:rotate(360deg); } }
.sc-busy-row b { display:block; color:#f8fafc; font-size:.85rem; }
.sc-busy-row span { display:block; color:#94a3b8; font-size:.74rem; margin-top:.1rem; }
.sc-busy .sc-progress { height:10px; position:relative; }
.sc-busy .sc-progress-fill { height:10px; transition:width .2s ease; }
.sc-busy.is-ind .sc-progress-fill { width:35% !important; position:absolute; left:0; animation:scBusySlide 1.2s ease-in-out infinite; }
@keyframes scBusySlide { 0% { left:-35%; } 100% { left:100%; } }
@media (prefers-reduced-motion:reduce) { .sc-busy.is-ind .sc-progress-fill { animation:none; width:100% !important; opacity:.5; } .sc-busy-row > .sc-spin { animation:none; } }

/* tick boxes in the report sit right after their text */
.sc-qrow.sc-qcheck { justify-content:flex-start; gap:.6rem; cursor:pointer; }

/* tall diagrams (legs) never grow taller than the screen */
.sc-mapgrid:not(.is-docked) .sc-map svg { max-height:calc(100vh - var(--sc-map-top, 8.5rem) - 5rem); width:auto; max-width:100%; margin:0 auto; }
.sc-map.sc-dim .sc-mc-dot { fill-opacity:.7; }
.sc-req { font-size:.72rem; font-weight:500; color:#94a3b8; font-style:normal; }
.sc-view[hidden], .sc-h4[hidden] { display:none; }

/* Heart diagram: plain circles until a view is hovered / selected; shared windows (1+2, 4+5) are one circle; red probe-marker dot shows with the number */
.sc-mc.sc-alt:not(.is-on), .sc-mc.is-under { opacity:0; pointer-events:none; }
.sc-idle0 .sc-mc:not(.is-on) .sc-mc-n { opacity:0; }
.sc-mc-n { transition:opacity .15s; }
.sc-mc-rd { fill:#ef4444; stroke:#fff; stroke-width:1.5; opacity:0; transition:opacity .15s; pointer-events:none; }
.sc-mc.is-on .sc-mc-rd { opacity:1; }
@media (min-width:900px) { .sc-pair-swap > :first-child { order:2; } }

/* Scan clips / images: the Enlarge button sits under the picture (see js/scanmedia.js) and opens this pop-up */
.sc-big-body { display:flex; justify-content:center; background:#000; border-radius:.6rem; overflow:hidden; }
.sc-big-body video, .sc-big-body img { max-width:100%; max-height:calc(100vh - 8rem); object-fit:contain; display:block; }

.sam-sec { scroll-margin-top:var(--lbp-scroll, 12rem); }

/* Scans to review: tabs + scan cards (same on phone and desktop; the Open button is always on the card) */
.rv-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.9rem; }
.rv-tabs { display:flex; gap:.4rem; flex-wrap:wrap; }
.rv-tab { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; color:#94a3b8; background:#090e1a; border:1px solid #1e293b; border-radius:.7rem; padding:.5rem .8rem; cursor:pointer; font-family:inherit; }
.rv-tab i { color:#64748b; }
.rv-tab b { font-size:.68rem; background:#131c33; border:1px solid #334155; border-radius:999px; padding:.02rem .45rem; color:#cbd5e1; }
.rv-tab:hover { color:#fff; border-color:#475569; }
.rv-tab.is-on { background:#0369a1; border-color:#38bdf8; color:#fff; }
.rv-tab.is-on i { color:#e0f2fe; }
.rv-tab.is-on b { background:rgba(255,255,255,.18); border-color:transparent; color:#fff; }
.rv-tab-ready:not(.is-on) b { background:#f59e0b; border-color:#f59e0b; color:#0b1120; }
.rv-filters { display:flex; gap:.5rem; flex:1 1 16rem; justify-content:flex-end; }
.rv-filters input, .rv-filters select { background:#090e1a; border:1px solid #1e293b; border-radius:.6rem; padding:.5rem .7rem; color:#fff; font-size:.78rem; min-width:0; }
.rv-filters input { flex:1 1 9rem; max-width:16rem; }
.rv-filters select { flex:0 1 11rem; min-width:0; max-width:100%; text-overflow:ellipsis; }
.rv-pane[hidden] { display:none; }
.rv-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:.7rem; }
@media (min-width:720px) { .rv-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1000px) { .rv-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.rv-card { display:flex; flex-direction:column; align-items:stretch; gap:.7rem; background:#131c33; border:1px solid #1e293b; border-radius:.75rem; padding:1rem; }
.rv-card { transition:background-color .15s, border-color .15s; }
@media (hover:hover) { .rv-card:hover { background:#16213b; border-color:#334155; } }
.rv-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem; }
.rv-top { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.rv-name { color:#fff; font-size:.95rem; }
.rv-sub { font-size:.8rem; color:#cbd5e1; }
.rv-dot { color:#64748b; }
.rv-meta { display:flex; flex-wrap:wrap; gap:.25rem .9rem; font-size:.72rem; color:#94a3b8; }
.rv-meta i { color:#64748b; margin-right:.2rem; }
.rv-late { color:#fda4af; font-weight:700; }
.rv-late i { color:#fda4af; }
.rv-open { flex:none; white-space:nowrap; align-self:flex-end; }   /* normal-size button, bottom right of the card */
.rv-empty { color:#94a3b8; font-size:.85rem; padding:1.2rem; background:#090e1a; border:1px dashed #1e293b; border-radius:.8rem; text-align:center; }
.rv-empty i { color:#38bdf8; margin-right:.4rem; }
.rv-none { color:#94a3b8; font-size:.8rem; }
.rv-more-wrap { display:flex; justify-content:center; margin-top:.8rem; }
@media (max-width:640px) {
    .rv-tabs { width:100%; } .rv-tab { flex:1 1 0; justify-content:center; padding:.55rem .4rem; font-size:.72rem; } .rv-tab i { display:none; }
    .rv-filters { flex:1 1 100%; justify-content:stretch; width:100%; } .rv-filters input { max-width:none; flex:1 1 0; } .rv-filters select { flex:1 1 0; }
}

/* Logbook: figures that pulse red (colour only, no size change) when the trainee is behind in a module */
@keyframes lbLatePulse { 0%,100% { color:#fca5a5; } 50% { color:#ef4444; text-shadow:0 0 8px rgba(239,68,68,.55); } }
@keyframes lbLateCell { 0%,100% { background:rgba(244,63,94,.16); color:#fda4af; } 50% { background:rgba(244,63,94,.5); color:#fff1f2; } }
.lb-month-late > span:last-child { color:#f87171; font-weight:700; animation:lbLatePulse 1.8s ease-in-out infinite; }
.lb-c-miss.lb-late { animation:lbLateCell 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .lb-month-late > span:last-child, .lb-c-miss.lb-late { animation:none; } .lb-month-late > span:last-child { color:#f87171; } }
/* FAMUS / FUSIC logbook switch on logbook.php (same pill as Logbook Progress > student's logbook) */
.lb-switch-links { margin-bottom:.2rem; }
.lb-switch-links .lbp-switch-btn { text-decoration:none; }

/* "Log a scan" chooser (logbook.php): step 1 supervised / mentored, step 2 how it is reported */
.lb-chooser { margin-bottom: 14px; }
.lb-chooser-q { margin: 10px 0 8px; color: #cbd5e1; font-size: 0.9rem; }
.lb-chooser-q b { color: #38bdf8; }
.lb-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.lb-choice { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; cursor: pointer; transition: border-color .15s, background .15s; font: inherit; }
.lb-choice:hover { border-color: #38bdf8; background: #12203a; }
.lb-choice > i { font-size: 1.25rem; color: #38bdf8; margin-top: 2px; flex: none; }
.lb-choice > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lb-choice b { color: #fff; font-size: 0.95rem; }
.lb-choice em { font-style: normal; color: #94a3b8; font-size: 0.8rem; line-height: 1.35; }
.lb-choice.is-on { border-color: #38bdf8; background: #14304f; box-shadow: 0 0 0 1px #38bdf8 inset; }
.lb-choice-off { opacity: .55; cursor: not-allowed; }
.lb-choice-off:hover { border-color: #334155; background: #0f172a; }
.lb-choice[hidden] { display: none; }
@media (max-width: 560px) { .lb-choices { grid-template-columns: 1fr; } }

/* Scans to review: kind of scan chips, kind filter, same-day bulk sign */
.rv-kind { display:flex; flex-wrap:wrap; gap:.35rem; margin:.15rem 0 .1rem; }
.rv-kchip { display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:600; padding:.12rem .5rem; border-radius:999px; border:1px solid #334155; color:#cbd5e1; background:#0f172a; }
.rv-k-sup { color:#7dd3fc; border-color:#0c4a6e; }
.rv-k-men-form, .rv-k-men-media { color:#c4b5fd; border-color:#4c1d95; }
.rv-k-men-media { color:#f9a8d4; border-color:#831843; }
.rv-k-form { color:#94a3b8; }
.rv-bulk { background:#101a30; border:1px solid #1e3a5f; border-radius:.75rem; padding:.8rem 1rem; margin-bottom:1rem; display:flex; flex-direction:column; gap:.6rem; }
.rv-bulk-h { margin:0; color:#e2e8f0; font-size:.9rem; }
.rv-bulk-h span { display:block; color:#94a3b8; font-size:.78rem; margin-top:.15rem; }
.rv-bulk-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; color:#cbd5e1; font-size:.85rem; border-top:1px solid #1e293b; padding-top:.6rem; }
.rv-bulk-act { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
@media (max-width:560px) { .rv-bulk-row { flex-direction:column; align-items:stretch; } }

/* Tutor signing PIN: the tutor's card (Scans to review) and the student's "Tutor with you?" panel (scan page) */
.rv-pin, .lb-pinsign { background:#101a30; border:1px solid #1e3a5f; border-radius:.75rem; padding:.7rem 1rem; margin-bottom:1rem; }
.rv-pin > summary, .lb-pinsign > summary { cursor:pointer; color:#e2e8f0; font-weight:600; font-size:.9rem; list-style:none; display:flex; align-items:center; gap:.5rem; }
.rv-pin > summary::-webkit-details-marker, .lb-pinsign > summary::-webkit-details-marker { display:none; }
.rv-pin > summary i, .lb-pinsign > summary i { color:#38bdf8; }
.lb-pinsign > summary b { background:#f59e0b; color:#0b1120; border-radius:999px; padding:.02rem .5rem; font-size:.72rem; }
.rv-pin-st { font-size:.7rem; font-weight:600; padding:.1rem .5rem; border-radius:999px; border:1px solid #92400e; color:#fbbf24; }
.rv-pin-st.is-set { border-color:#065f46; color:#6ee7b7; }
.rv-pin-row, .lb-pinsign-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.6rem; }
.rv-pin-row input, .lb-pinsign-row input, .lb-pinsign-row select { background:#090e1a; border:1px solid #1e293b; border-radius:.6rem; padding:.5rem .7rem; color:#fff; font-size:.85rem; min-width:0; flex:1 1 9rem; }
.lb-pinsign-list { display:flex; flex-direction:column; gap:.3rem; margin:.5rem 0; }
@media (max-width:560px) { .rv-pin-row .btn, .lb-pinsign-row .btn { flex:1 1 100%; } }

/* Tutor reads and signs on the student's phone (logbook) */



/* Home page welcome text: open on the first visit, collapsed after (click the heading to reopen) */
.welcome-intro > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem}
.welcome-intro > summary::-webkit-details-marker{display:none}
.welcome-intro > summary h1{margin:0}
.welcome-tog{color:#7dd3fc;font-size:.8rem;transition:transform .15s}
.welcome-intro:not([open]) .welcome-tog{transform:rotate(-90deg)}

.sc-path-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.sc-path-list li { background:#0c4a6e; color:#e0f2fe; border-radius:999px; padding:.25rem .7rem; font-size:.8rem; font-weight:600; }
.sc-path-list li i { color:#7dd3fc; margin-right:.3rem; font-size:.7rem; }

/* report tables: the first column stays in view while the rest scrolls sideways */
.sc-grid thead th:first-child, .sc-grid th[scope=row] { position:sticky; left:0; z-index:2; background:#131c33; box-shadow:1px 0 0 #1e293b; }
.sc-ro .sc-grid tbody tr:nth-child(even) > th[scope=row] { background:#1d273e; }

/* scan page top row: details (and feedback) on the left, pathologies and findings on the right */
.sc-col { display:flex; flex-direction:column; gap:1.25rem; min-width:0; }
.sc-col > .sc-card { margin:0; }

/* clips nominated for Resources */
.sc-nom { display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center; margin-top:.5rem; font-size:.78rem; }
.sc-nom-badge { display:inline-flex; align-items:center; gap:.35rem; background:#3b2f08; color:#fde68a; border:1px solid #854d0e; border-radius:999px; padding:.2rem .65rem; font-weight:700; }
.sc-nom-badge.sc-nom-pub { background:#052e1b; color:#6ee7b7; border-color:#047857; }
.sc-nom-note { color:#94a3b8; }
.sc-nom-form { flex-basis:100%; display:flex; flex-direction:column; gap:.4rem; }
.sc-nom-form[hidden] { display:none; }
.sc-nom-text { width:100%; background:#090e1a; border:1px solid #334155; border-radius:.5rem; color:#e2e8f0; padding:.45rem .6rem; font-size:.8rem; }

/* further comments added after sign-off (in the Feedback panel): tutor = blue, admin = violet */
.sc-fb-post { background:#0b1730; }
.sc-fb-post-admin { background:#14102b; }
.sc-fb-post .sc-fb-by { color:#bae6fd; }
.sc-fb-post-admin .sc-fb-by { color:#ddd6fe; }
.sc-cm-form { margin-top:.6rem; }
.sc-cm-box[hidden] { display:none; }
.sc-cm-box { margin-top:.4rem; }

/* Scan page: room under the last button of a view */
.sc-view { padding-bottom:.9rem; }
.sc-nom { margin-bottom:.2rem; }
/* Publish / Nominate for Resources: yellow button, brighter on hover (same family as the other site buttons) */
.sc-nom-open { background:#b38600; border:1px solid #ffbf00; color:#fff; font-weight:700; transition:background .15s, border-color .15s; }
.sc-nom-open:hover, .sc-nom-open:focus-visible { background:#cc9900; border-color:#ffd24d; color:#fff; }
.sc-nom-open i { color:#ffe08a; }
/* the Continue / Send nomination button is an ordinary blue button, not as wide as the text box */
.sc-nom-form .btn { align-self:flex-start; width:auto; }
/* Add a further comment (Tutor / Admin): blue for tutor, violet for admin, both brighter on hover */
.sc-cm-open { font-weight:700; transition:background .15s, border-color .15s; }
.sc-cm-form-tutor .sc-cm-open { background:#0369a1; border:1px solid #38bdf8; color:#fff; }
.sc-cm-form-tutor .sc-cm-open:hover, .sc-cm-form-tutor .sc-cm-open:focus-visible { background:#0284c7; border-color:#7dd3fc; color:#fff; }
.sc-cm-form-admin .sc-cm-open { background:#6d28d9; border:1px solid #a78bfa; color:#fff; }
.sc-cm-form-admin .sc-cm-open:hover, .sc-cm-form-admin .sc-cm-open:focus-visible { background:#7c3aed; border-color:#c4b5fd; color:#fff; }
.sc-cm-form-tutor .sc-cm-add { background:#0369a1; border-color:#38bdf8; }
.sc-cm-form-admin .sc-cm-add { background:#6d28d9; border-color:#a78bfa; }
/* Resources: chosen student scans (star on the card, and a filter button) */
.res-chosen { display:inline-flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem; border-radius:.45rem; background:rgba(255,191,0,.16); border:1px solid rgba(255,191,0,.6); color:#ffd24d; font-size:.72rem; }
.res-chosenchip { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.3rem .6rem; border-radius:.5rem; cursor:pointer; background:rgba(255,191,0,.12); border:1px solid rgba(255,191,0,.55); color:#ffd24d; opacity:.85; transition:opacity .15s, background .15s, box-shadow .15s; }
.res-chosenchip:hover { opacity:1; background:rgba(255,191,0,.22); }
.res-chosenchip.is-on { opacity:1; background:#b38600; color:#fff; box-shadow:0 0 0 2px #ffbf00; }

.res-added { display:flex; flex-wrap:wrap; gap:.2rem .9rem; }

.res-admin-row { scroll-margin-top: calc(var(--hdr-h, 80px) + 14px); }

/* ===== SHARED STYLE CLASSES (buttons, panels, headings) - added 5 Nov 2026 =====
   See docs/STYLE-CLASSES.txt for how to use them.
   Placed in the "components" layer, so any Tailwind class on the same element
   (spacing, a different colour, a different size) still wins over these. */
/* ---- Storage page (admin.php?tab=storage): capacity gauge with 70 / 80 / 90 % markers ---- */
.st-gauge { position:relative; display:flex; height:1.6rem; border-radius:.6rem; background:#1e293b; border:1px solid #334155; overflow:hidden; }
.st-seg { display:block; height:100%; }
.st-seg-clip { background:#0ea5e9; }
.st-seg-img { background:#a78bfa; }
.st-warn .st-seg-clip { background:#f59e0b; }
.st-hot .st-seg-clip { background:#f43f5e; }
.st-mark { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:rgba(248,250,252,.55); }
.st-scale { position:relative; height:1.4rem; font-size:.75rem; color:#94a3b8; margin-top:.45rem; }
.st-scale span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.st-scale span:first-child { transform:none; }
.st-scale span:last-child { transform:translateX(-100%); }
.st-legend { display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; font-size:.75rem; color:#cbd5e1; }
.st-dot { display:inline-block; width:.7rem; height:.7rem; border-radius:.2rem; margin-right:.3rem; vertical-align:-.05rem; }
.st-dot-free { background:#1e293b; border:1px solid #475569; }
.st-chart { width:100%; max-width:44rem; height:12.5rem; display:block; }
.st-chart text { fill:#94a3b8; font-size:11px; }
.st-chart .st-axis-title { fill:#64748b; font-size:10px; }
.st-chart line { stroke:#1e293b; }
.st-chart .st-bar { fill:#0ea5e9; }
.st-chart .st-bar:hover { fill:#38bdf8; }
.st-tip { position:absolute; z-index:5; pointer-events:none; display:flex; flex-direction:column; gap:.1rem; background:#020617; border:1px solid #38bdf8; border-radius:.5rem; padding:.3rem .55rem; font-size:.72rem; color:#cbd5e1; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.5); }
.st-tip b { color:#fff; font-size:.75rem; }
.st-chart .st-none { fill:#64748b; font-size:13px; }
.lb-alert-red { background:rgba(244,63,94,.1); border-color:rgba(244,63,94,.55); color:#fecdd3; }
.lb-alert-red i { color:#fb7185; }
@media (hover:hover) { .lb-alert-red.lb-alert-link:hover { border-color:rgba(251,113,133,.9); } .lb-alert-red.lb-alert-link:hover .lb-alert-open { color:#fff1f2; } }
.tbl-zebra tbody tr:hover { background:#131c33; }
.tbl-zebra tbody tr.tbl-alt { background:rgba(148,163,184,.07); }
.tbl-zebra tbody tr.tbl-alt:hover { background:#131c33; }
@layer components {
/* ---- Buttons (all 0.5rem radius) ---- */
.btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;line-height:1rem;font-weight:600;padding:.5rem 1rem;border-radius:.5rem;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background-color .1s,color .1s}
.btn-sm{font-size:.7rem;padding:.375rem .625rem;gap:.3rem}
.btn-block{display:flex;width:100%;justify-content:center}
.btn-primary{background:#0084d1;color:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}.btn-primary:hover{background:#00a6f4}
.btn-secondary{background:#1e293b;color:#e2e8f0;border-color:#334155}.btn-secondary:hover{background:#334155;color:#fff}
.btn-success{background:#009966;color:#fff}.btn-success:hover{background:#00bc7d}
.btn-highlight{background:#f59e0b;color:#0f172a}.btn-highlight:hover{background:#fbbf24}
.btn-danger{background:rgba(76,5,25,.6);color:#fda4af;border-color:rgba(244,63,94,.5)}.btn-danger:hover{background:rgba(136,19,55,.7);color:#fff}
.btn-soft{background:rgba(5,47,75,.4);color:rgba(0,188,255,.8);border-color:rgba(0,90,138,.4)}.btn-soft:hover{background:#00a6f4;color:#fff}
/* Hover-only colour: use with btn btn-secondary (looks plain until hovered or focused, then fills green / red / amber) */
.btn-hover-success:hover,.btn-hover-success:focus-visible{background:#009966;border-color:#34d399;color:#fff}
.btn-hover-danger:hover,.btn-hover-danger:focus-visible{background:#be123c;border-color:#fb7185;color:#fff}
.btn-hover-highlight:hover,.btn-hover-highlight:focus-visible{background:#f59e0b;border-color:#fbbf24;color:#0f172a}
.btn-whatsapp{background:linear-gradient(135deg,#25d366,#128c7e,#3ee88a,#0f7f70,#25d366);background-size:400% 400%;background-position:0% 50%;color:#fff;border-color:rgba(255,255,255,.18);padding:.6rem 1.1rem;font-size:.8125rem;border-radius:.75rem;box-shadow:0 4px 14px rgba(37,211,102,.28);animation:wa-lava 14s ease-in-out infinite;animation-play-state:paused}
.btn-whatsapp:hover,.btn-whatsapp:focus-visible{color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.4);animation-play-state:running}
@keyframes wa-lava{0%{background-position:0% 50%}25%{background-position:70% 20%}50%{background-position:100% 60%}75%{background-position:30% 90%}100%{background-position:0% 50%}}
@media (prefers-reduced-motion:reduce){.btn-whatsapp{animation:none}}
.btn-whatsapp i{font-size:1.1rem}
.btn-disabled,.btn:disabled{background:#1e293b;color:#64748b;border-color:transparent;cursor:not-allowed}
/* ---- Panels: colours, border, corners, shadow only. Padding, spacing and layout stay as Tailwind classes ---- */
.panel{background:#0f172a;border:1px solid #1d293d;border-radius:1rem;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.panel-amber{border-color:rgba(252,152,0,.7);color:#fef3c6}
.panel-glow{transition:box-shadow .3s,border-color .3s}
.panel-glow:hover{box-shadow:0 0 20px rgba(56,189,248,.2);border-color:rgba(0,188,255,.8)}
.panel-glow-violet:hover{box-shadow:0 0 20px rgba(168,85,247,.2);border-color:rgba(194,122,255,.8)}
.panel-inset{background:#090e1a;border:1px solid #1d293d;border-radius:.75rem}
.panel-raised{background:#131c33}
/* ---- Headings (capitalised; override colour or size with a Tailwind class when needed) ---- */
.t-h1{font-size:1.25rem;line-height:1.75rem;font-weight:700;color:#fff;text-transform:capitalize;display:flex;align-items:center;gap:.5rem}
.text-center .t-h1,.text-center .t-h2,.text-center .t-h3,.text-center .t-h4{justify-content:center}
.t-h2{font-size:1.125rem;line-height:1.75rem;font-weight:700;color:#fff;text-transform:capitalize;display:flex;align-items:center;gap:.5rem}
.t-h3{font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;text-transform:capitalize;display:flex;align-items:center;gap:.5rem}
.t-h4{font-size:.9rem;line-height:1.3rem;font-weight:700;color:#cbd5e1;display:flex;align-items:center;gap:.5rem}
.t-label{font-size:.6875rem;line-height:1rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}
.stat-value{font-size:1.5rem;line-height:2rem;font-weight:700;color:#fff}
/* Score ring (feedback average out of 5): ring fills with --p (percent); colour class sets --c */
.score-ring{--p:0;--c:#475569;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.75rem;height:2.75rem;border-radius:9999px;background:conic-gradient(var(--c) calc(var(--p) * 1%),#1e293b 0);color:#f8fafc;font-weight:700;font-size:.8rem;line-height:1;text-decoration:none}
.score-ring::before{content:"";position:absolute;inset:.26rem;border-radius:9999px;background:#0b1220}
.score-ring>span{position:relative}
.score-ring-good{--c:#22c55e}
.score-ring-mid{--c:#f59e0b}
.score-ring-low{--c:#f97316}
.score-ring-none{--c:#475569;color:#94a3b8;font-weight:600}
.score-ring-lg{width:5.5rem;height:5.5rem;font-size:1.6rem}
.score-ring-lg::before{inset:.42rem}
a.score-ring:hover{filter:brightness(1.2)}
/* Achievement badges (includes/badges.php): round medal, level by metal colour; dots under the name show how many levels exist */
.badge-item{display:flex;flex-direction:column;align-items:center;width:74px;margin:0 auto;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.badge-item.hidden{display:none}
.badge-name{font-size:11.5px;font-weight:700;line-height:1.15;margin-top:.4rem;text-align:center;color:#e2e8f0}
.badge-medal{--bs:56px;--ring:#2b8fe0;--face:radial-gradient(circle at 35% 25%,#22305a,#0b1329 72%);--ic:#5db4f5;position:relative;display:block;box-sizing:border-box;width:var(--bs);height:var(--bs);padding:var(--bw,4px);border-radius:50%;background:var(--ring);font-size:calc(var(--bs)*.4);box-shadow:0 3px 8px rgba(0,0,0,.55);transition:filter .2s,box-shadow .2s}
.badge-face{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;box-sizing:border-box;background:var(--face);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.badge-face i{display:block;line-height:1;padding:.15em;background:var(--ic);-webkit-background-clip:text;background-clip:text;color:transparent}
.badge-bronze{--ring:conic-gradient(from 210deg,#ffd0a8,#e8803a,#9a3f0c,#e8803a,#ffd0a8,#e8803a,#9a3f0c,#e8803a,#ffd0a8);--face:radial-gradient(circle at 35% 25%,#9a4a18,#55240a 75%);--ic:linear-gradient(145deg,#ffd9b8,#f08a3e)}
.badge-silver{--ring:conic-gradient(from 210deg,#fff,#b4cbea,#5f7ea8,#b4cbea,#fff,#b4cbea,#5f7ea8,#b4cbea,#fff);--face:radial-gradient(circle at 35% 25%,#7f97b8,#44587a 75%);--ic:linear-gradient(145deg,#fff,#a8c4ea)}
.badge-gold{--ring:conic-gradient(from 210deg,#fff3b0,#f5b82e,#a66a05,#f5b82e,#fff3b0,#f5b82e,#a66a05,#f5b82e,#fff3b0);--face:radial-gradient(circle at 35% 25%,#9a6a0c,#5a3c04 75%);--ic:linear-gradient(145deg,#fff3b0,#f0a916)}
.badge-bronze::after,.badge-silver::after,.badge-gold::after,.badge-special::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.13) 46%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.13) 54%,transparent 60%),linear-gradient(135deg,rgba(255,255,255,.28) 0,rgba(255,255,255,.06) 28%,transparent 42%)}
.badge-bronze .badge-face::after,.badge-silver .badge-face::after,.badge-gold .badge-face::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.04) 30%,transparent 48%)}
.badge-special{--ring:conic-gradient(from 210deg,#fff3b0,#f5b82e,#a66a05,#f5b82e,#fff3b0,#f5b82e,#a66a05,#f5b82e,#fff3b0);--face:radial-gradient(circle at 35% 25%,#fff6c4,#f7c948 45%,#c98a0b 100%);--ic:linear-gradient(145deg,#a05d00,#5c3300);box-shadow:0 0 16px rgba(255,200,60,.65),0 3px 8px rgba(0,0,0,.55)}
.badge-special .badge-face{box-shadow:inset 0 2px 5px rgba(120,70,0,.55),inset 0 -2px 4px rgba(255,255,255,.5)}
.badge-special .badge-face i{filter:drop-shadow(1px 1px 0 rgba(255,244,190,.7))}
.badge-special::after{background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 46%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.22) 54%,transparent 60%),linear-gradient(135deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 22%,transparent 40%)}
.badge-amber{--ring:conic-gradient(from 210deg,#ffd9a0,#ff8a00,#a34400,#ff8a00,#ffd9a0,#ff8a00,#a34400,#ff8a00,#ffd9a0);--face:radial-gradient(circle at 35% 25%,#ffb24d,#ff8200 58%,#d85a00 100%);--ic:linear-gradient(145deg,#6b2600,#3a1400);box-shadow:0 0 16px rgba(255,130,0,.6),0 3px 8px rgba(0,0,0,.55)}
.badge-amber .badge-face{box-shadow:inset 0 2px 5px rgba(110,40,0,.55),inset 0 -2px 4px rgba(255,210,150,.5)}
.badge-amber .badge-face i{filter:drop-shadow(1px 1px 0 rgba(255,215,160,.7))}
.badge-platinum{--ring:conic-gradient(from 210deg,#fff,#d4dfee,#8394ad,#e6eef8,#fff,#d4dfee,#8394ad,#e6eef8,#fff);--face:radial-gradient(circle at 35% 25%,#f6f9ff,#aebace 78%);--ic:linear-gradient(145deg,#fff,#c9d9ff);box-shadow:0 0 14px rgba(200,220,255,.5),0 3px 8px rgba(0,0,0,.55)}
.badge-platinum .badge-face{box-shadow:inset 0 2px 5px rgba(35,50,85,.6),inset 0 -1px 2px rgba(255,255,255,.75)}
.badge-amber::after,.badge-platinum::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 46%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.14) 54%,transparent 60%),linear-gradient(135deg,rgba(255,255,255,.4) 0,rgba(255,255,255,.08) 28%,transparent 42%)}
.badge-face img{display:block;width:74%;height:74%}
.badge-item:hover .badge-amber{box-shadow:0 0 22px 5px rgba(255,130,0,.75)}
.badge-item:hover .badge-platinum{box-shadow:0 0 20px 4px rgba(210,228,255,.7)}
.badge-locked{--ring:conic-gradient(#38bdf8 calc(var(--p,0)*1%),#1e293b 0);--face:#0b1329;--ic:#475569;box-shadow:none}
.badge-item:hover .badge-medal:not(.badge-locked){filter:brightness(1.18) saturate(1.1);box-shadow:0 0 14px 3px rgba(255,255,255,.28),0 3px 8px rgba(0,0,0,.55)}
.badge-item:hover .badge-blue{filter:none;box-shadow:0 3px 8px rgba(0,0,0,.55)}
.badge-item:hover .badge-special{box-shadow:0 0 22px 5px rgba(255,210,90,.8)}
.badge-item:hover .badge-locked{filter:brightness(1.3)}
.badge-dots{display:flex;gap:3px;justify-content:center;margin-top:.25rem;min-height:7px}
.badge-dots i{width:6px;height:6px;border-radius:50%;background:#1e293b;border:1px solid #475569}
.badge-dots i.on{background:#e2e8f0;border-color:#e2e8f0}
/* the Supervised scans icon: document with an eye on its corner, centred as one icon (boxes have fixed widths so it looks the same in every Font Awesome version) */
.badge-face .badge-stack{position:relative;display:block;width:0;height:0;padding:0;background:none}
.badge-face .badge-stack i{position:absolute;display:block;padding:0;line-height:1;text-align:center}
.badge-face .badge-stack .fa-file-lines{left:-.715em;top:-.31em;width:.79em;font-size:1.05em}
.badge-face .badge-stack .fa-eye{left:-.375em;top:-.78em;width:1.125em;font-size:1em;filter:drop-shadow(0 0 2px #3a2503)}
/* Special badges (Site Creator, Beta tester, Full set, and any gold badge): a light shimmer sweeps across the medal once every 8 seconds, in a loop. The sweep takes about 1.2 s, then the medal rests. Locked and blue/bronze/silver badges do not shimmer. */
.badge-special::before,.badge-amber::before,.badge-platinum::before,.badge-gold::before{content:"";position:absolute;inset:0;z-index:3;border-radius:50%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);background-size:300% 100%;background-repeat:no-repeat;background-position:130% 0;animation:badge-shimmer 8s ease-in-out infinite}
@keyframes badge-shimmer{0%{background-position:130% 0}15%,100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.badge-special::before,.badge-amber::before,.badge-platinum::before,.badge-gold::before{animation:none;opacity:0}}
/* Shared tooltip (click/hover note under an item): near-black panel, blue border, arrow. Position and width with Tailwind (absolute z-50 w-56); --ax = arrow distance from the left edge */
.tooltip{--ax:1.5rem;background:#020617;border:1px solid #38bdf8;border-radius:.6rem;padding:.55rem .75rem;font-size:.75rem;line-height:1.45;color:#94a3b8;box-shadow:0 10px 28px -4px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.35)}
.tooltip::before{content:"";position:absolute;top:-6px;left:var(--ax);width:10px;height:10px;margin-left:-5px;background:#020617;border-left:1px solid #38bdf8;border-top:1px solid #38bdf8;transform:rotate(45deg)}
.tooltip-meta{color:#7dd3fc;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.25rem}
.tooltip-title{color:#fff;font-size:.8rem;font-weight:700;margin-bottom:.15rem}
.tooltip-text{color:#94a3b8}
/* Sideways-scrolling tables (js/tablescroll.js): add table-scroll next to overflow-x-auto / lb-scroll. When the table is wider than the screen the script adds is-scrollable:
   soft fade on the right edge (is-more), first column pinned (shadow when scrolled), and a pulsing arrow (.table-scroll-arrow, made by the script) over the title row until the first scroll. */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; --ts-fade:0px; }
.table-scroll.is-more { --ts-fade:44px; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--ts-fade)),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - var(--ts-fade)),transparent 100%); }
.table-scroll.is-scrollable th:first-child, .table-scroll.is-scrollable td:first-child { position:sticky; left:0; z-index:2; }
.table-scroll.is-scrolled th:first-child, .table-scroll.is-scrolled td:first-child { box-shadow:6px 0 8px -4px rgba(0,0,0,.65); }
.table-scroll-wrap { position:relative; }
.table-scroll-arrow { position:absolute; right:6px; width:22px; height:30px; margin-top:-15px; display:flex; align-items:center; justify-content:center; color:#38bdf8; font-size:2rem; font-weight:700; line-height:1; pointer-events:none; z-index:3; animation:ts-glow 2s ease-in-out infinite; transition:opacity .25s; }
.table-scroll-arrow.is-off { opacity:0; animation:none; }
@keyframes ts-glow { 0%,100% { opacity:.5; text-shadow:0 0 0 rgba(56,189,248,0); } 50% { opacity:1; text-shadow:0 0 6px #38bdf8,0 0 14px rgba(56,189,248,.9),0 0 26px rgba(56,189,248,.6); } }
@media (prefers-reduced-motion: reduce) { .table-scroll-arrow { animation:none; opacity:.9; } }
}

/* Slim site bar for phones (includes/header.php): small title + UHL + beta + feedback, and the user's name, shown above the menu once the page has scrolled past the big top bar.
   It grows from 0 to 40 px (and the header's bottom margin shrinks by the same amount) so the page never jumps. */
.hdr-mini { display:flex; align-items:center; justify-content:space-between; gap:.5rem; height:0; opacity:0; visibility:hidden; overflow:hidden; padding:0 1rem; background:#0b1329; box-sizing:border-box; transition:height .22s ease, opacity .22s ease, visibility .22s; }
.hdr-mini.is-on { height:40px; opacity:1; visibility:visible; }
.hdr-mini-brand { display:flex; align-items:center; gap:.4rem; min-width:0; flex:none; }
.hdr-mini-title { display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; font-weight:700; color:#fff; text-decoration:none; white-space:nowrap; }
.hdr-mini .beta-badge { font-size:.5rem; padding:.08rem .3rem; letter-spacing:.08em; }
.hdr-mini .feedback-chip { height:1.25rem; min-width:1.25rem; }
.hdr-mini .feedback-chip i { width:1.25rem; font-size:.75rem; }
.hdr-mini-user { min-width:0; flex:0 1 auto; display:inline-flex; align-items:center; gap:.35rem; font-size:.68rem; font-weight:700; color:#e2e8f0; white-space:nowrap; }
.hdr-mini-user > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.hdr-mini-user > i { font-size:.7rem; flex:none; }
/* Role shown by the colour of the user icon: grey = everyone else, light blue = Admin, gold = Super Admin */
.user-ico { color:#0381c5; }
.user-ico-admin { color:#d1d5db; text-shadow:0 0 6px rgba(209,213,219,.55); }
.user-ico-super { color:#fbbf24; text-shadow:0 0 6px rgba(251,191,36,.55); }
.user-ico-admin.user-ava { box-shadow:0 0 8px rgba(209,213,219,.4); text-shadow:none; }
.user-ico-super.user-ava { box-shadow:0 0 8px rgba(251,191,36,.4); text-shadow:none; }
.user-ava { display:flex; align-items:center; justify-content:center; border-radius:9999px; border:2px solid currentColor; background:rgba(148,163,184,.12); }
@media (max-width:899px) { header { transition:margin-bottom .22s ease; } }
@media (min-width:900px) { .hdr-mini, .hdr-mini.is-on { display:none; } }

/* Dashboard hub panels: the whole panel is a link (the arrow link stretches over the panel); hover look comes from panel-glow / panel-glow-violet */
.hub-card { position:relative; }
.hub-card:has(a.hub-link) { cursor:pointer; }
.hub-card a.hub-link::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.hub-card a.hub-link:focus-visible { outline:none; }
.hub-card:has(a.hub-link:focus-visible) { outline:2px solid #38bdf8; outline-offset:2px; }

/* Logbook "Export Logbook" button with a small choose-what-to-download panel */
.lb-export { position:relative; display:inline-block; }
.lb-export-chev { font-size:.7em; margin-left:.25rem; transition:transform .15s; }
.lb-export.is-open .lb-export-chev { transform:rotate(180deg); }
.lb-export-panel { position:absolute; right:0; top:calc(100% + .5rem); z-index:30; width:min(20rem, 88vw); background:#0f172a; border:1px solid #334155; border-radius:.9rem; padding:.9rem; box-shadow:0 14px 34px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:.55rem; }
.lb-export-panel.lb-hidden { display:none !important; }
.lb-export-title { font-size:.8rem; font-weight:700; color:#fff; }
.lb-export-opt { display:flex; align-items:center; gap:.7rem; padding:.55rem .65rem; border:1px solid #334155; border-radius:.7rem; background:#0b1329; cursor:pointer; transition:border-color .15s, background .15s; }
.lb-export-opt:hover { border-color:#38bdf8; }
.lb-export-opt:has(input:checked) { border-color:#38bdf8; background:rgba(56,189,248,.08); }
.lb-export-opt.is-off { opacity:.5; cursor:not-allowed; }
.lb-export-opt input { accent-color:#38bdf8; width:1rem; height:1rem; flex:none; }
.lb-export-opt b { display:block; font-size:.8rem; color:#e2e8f0; }
.lb-export-opt small { display:block; font-size:.7rem; color:#94a3b8; }
.lb-export-ico { width:2rem; height:2rem; flex:none; display:flex; align-items:center; justify-content:center; border-radius:.55rem; font-size:1rem; }
.lb-export-ico-x { background:rgba(16,185,129,.15); color:#34d399; }
.lb-export-ico-p { background:rgba(244,63,94,.15); color:#fb7185; }
.lb-export-note { font-size:.68rem; color:#94a3b8; line-height:1.35; }
.lb-export-go { align-self:flex-end; }
.lb-export-go:disabled { opacity:.5; cursor:not-allowed; }

/* ---- Site messages (header message icon + panel) ---- */
.msg-btn { position:relative; }
.msg-btn:hover, .msg-btn[aria-expanded="true"] { background:#facc15; border-color:#facc15; color:#1c1002; }
.msg-btn:hover i, .msg-btn[aria-expanded="true"] i { color:#1c1002; }
.msg-badge { position:absolute; top:-.45rem; right:-.4rem; min-width:1rem; height:1rem; padding:0 .25rem; border-radius:9999px; background:#f43f5e; color:#fff; font-size:.62rem; font-weight:800; line-height:1rem; text-align:center; box-shadow:0 0 0 2px #131c33; }
.msg-badge[hidden] { display:none; }
.msg-btn-mini { display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; border-radius:9999px; border:1px solid #334155; background:#1e293b; color:#cbd5e1; font-size:.72rem; cursor:pointer; }
.msg-btn-mini .msg-badge { top:-.4rem; right:-.45rem; box-shadow:0 0 0 2px #0b1329; }
.msg-panel { position:fixed; z-index:9990; display:flex; flex-direction:column; background:rgba(15,23,42,.83); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid #334155; border-radius:.9rem; overflow:hidden; box-shadow:0px 4px 9px 5px rgb(2 6 23 / 88%); }
.msg-panel[hidden] { display:none; }
.msg-panel { transform-origin:top right; }
.msg-panel:not([hidden]) { animation:msg-drop .24s cubic-bezier(.2,.8,.25,1) both, msg-flash .5s ease-out; }
@keyframes msg-flash { from { background-color:#facc15; } }
@keyframes msg-drop { from { opacity:0; transform:translateY(-14px) scaleY(.6); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .msg-panel:not([hidden]) { animation:none; } }
.msg-head { display:flex; align-items:center; padding:.6rem .8rem .35rem; flex:none; }
.msg-head-t { display:flex; align-items:center; gap:.45rem; margin:0; color:#fff; font-size:.9rem; font-weight:600; text-transform:none; }
.msg-head-t i { color:#fbbf24; font-size:.8rem; }
.msg-del { background:none; border:0; color:#64748b; cursor:pointer; padding:.15rem .3rem; border-radius:.35rem; font-size:.8rem; line-height:1; }
.msg-del:hover { color:#fff; background:#1e293b; }
.msg-list { overflow-y:auto; flex:1 1 auto; padding:.55rem .65rem; display:flex; flex-direction:column; gap:.7rem; }
.msg-item { min-width:0; }

.msg-bubble { margin:.25rem 0 0 3rem; padding:.5rem .7rem .4rem; background:#162036; border:1px solid #243049; border-radius:0 1rem 1rem 1rem; }
.msg-bubble-new { background:rgba(245,158,11,.12); border-color:rgba(251,191,36,.6); }
.msg-from { display:flex; align-items:center; gap:.4rem; font-size:.74rem; padding-left:.2rem; }
.msg-name { color:#e2e8f0; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-auto-ico { color:#38bdf8; }
.msg-new { background:#f59e0b; color:#1c1002; font-size:.5rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:0 .3rem; border-radius:5px; }
.msg-del { margin-left:auto; }
.msg-body { display:block; color:#cbd5e1; font-size:.7rem; line-height:1.4; overflow-wrap:anywhere; white-space:pre-wrap; }
.msg-foot { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin-top:.35rem; }
.msg-act { color:#fcd34d; font-size:.7rem; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.msg-act:hover { color:#fde68a; }
.msg-when { margin-left:auto; color:#64748b; font-size:.66rem; text-align:right; }
.msg-bubble-new .msg-when { color:#b89b4a; }
.msg-empty { color:#94a3b8; font-size:.8rem; padding:1.1rem .8rem; text-align:center; }
.msg-more { flex:none; background:none; border:0; border-top:1px solid #1e293b; color:#fbbf24; font-size:.76rem; font-weight:700; padding:.55rem; cursor:pointer; }
.msg-more:hover { background:#1e293b; color:#fde047; }
.msg-more[hidden] { display:none; }
.msg-cmp-back { position:fixed; inset:0; z-index:9995; background:rgba(2,6,23,.82); display:flex; align-items:center; justify-content:center; padding:1rem; }
.msg-cmp-back[hidden] { display:none; }
.msg-cmp-box { background:#0f172a; border:1px solid #1e293b; border-radius:1rem; width:100%; max-width:28rem; padding:1.1rem; box-shadow:0px 4px 9px 5px rgb(2 6 23 / 88%); }
.msg-cmp-title { color:#fff; font-weight:800; text-transform:none; margin-bottom:.6rem; overflow-wrap:anywhere; }
.msg-cmp-text { width:100%; background:#090e1a; border:1px solid #334155; border-radius:.6rem; padding:.55rem .65rem; color:#e2e8f0; font-size:.88rem; resize:vertical; min-height:6rem; }
.msg-cmp-text:focus { outline:none; border-color:#0ea5e9; }
.msg-cmp-foot { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.55rem; }
.msg-cmp-count { color:#64748b; font-size:.7rem; }
.msg-cmp-btns { display:flex; gap:.5rem; }
.msg-cmp-err { margin-top:.6rem; font-size:.78rem; color:#fda4af; }
.msg-cmp-err[hidden] { display:none; }
.msg-cmp-ok { color:#6ee7b7; }
/* Message icon while the Creator has the message system switched off: blanked out, no hover colour */
.msg-btn.msg-off, .msg-btn.msg-off:hover { opacity:.35; cursor:not-allowed; background:#1e293b; border-color:#334155; color:#94a3b8; }
.msg-btn.msg-off i, .msg-btn.msg-off:hover i { color:#94a3b8; }
.msg-btn.msg-off .msg-badge { display:none; }
/* Send Message tab: scrolling list of people to pick from (fixed height, no borders between names) */
.sm-list { height:12rem; overflow-y:auto; background:#090e1a; border-radius:.75rem; padding:.3rem; }
.sm-row { display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; border-radius:.5rem; cursor:pointer; font-size:.75rem; }
.sm-row:hover { background:rgba(51,65,85,.45); }
.sm-row:has(input:checked) { background:rgba(14,165,233,.14); }
/* TEST SITE strip: shown above the header on the test copy only (site_staging_banner() in includes/security.php). Always stuck to the top; the sticky header sits just below it (includes/header.php). */
.staging-banner { position:sticky; top:0; z-index:50; background:#c026d3; color:#fff; text-align:center; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.12rem .5rem; line-height:1.2; }
.staging-banner-fixed { position:fixed; top:0; left:0; right:0; z-index:9999; }