/* Nav */
.nav-section { font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: 1px; text-transform: uppercase; padding: 12px 10px 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text2); font-size: 13px; transition: all .15s; position: relative; }
.nav-item:hover { background: var(--bg3); color: var(--text); }
.nav-item.active { background: rgba(79,124,255,0.12); color: var(--accent); }
.nav-item .ti { font-size: 16px; }
.nav-badge { margin-left: auto; background: var(--bg4); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 20px; color: var(--text2); }
.nav-badge.alert { background: rgba(255,82,99,0.2); color: var(--red); }
/* A badge with nothing in it is never drawn: an empty pill reads as a red dash. */
.nav-badge:empty { display: none !important; }
.nav-hidden { display: none !important; }
/* Sidebar footer — fixed at bottom */
.sidebar-footer { flex-shrink: 0; padding-top: 10px; border-top: 1px solid var(--border); background: var(--bg2); }
/* Cards */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card-title { font-size: 13px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: relative; overflow: hidden; }
.stat-card::after { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--accent); opacity: .6; }
.stat-card.r::after { background: var(--red); }
.stat-card.a::after { background: var(--amber); }
.stat-card.g::after { background: var(--green); }
.stat-card.t::after { background: var(--teal); }
.stat-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.stat-val { font-size: 28px; font-weight: 600; letter-spacing: -1px; }
.stat-sub { font-size: 11px; color: var(--text3); margin-top: 4px; }
.stat-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; padding: 2px 6px; border-radius: 4px; }
.trend-up { background: rgba(45,217,138,0.1); color: var(--green); }
.trend-down { background: rgba(255,82,99,0.1); color: var(--red); }
/* Table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }
/* Badges */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.badge-red { background: rgba(255,82,99,0.15); color: var(--red); }
.badge-amber { background: rgba(245,166,35,0.15); color: var(--amber); }
.badge-green { background: rgba(45,217,138,0.15); color: var(--green); }
.badge-blue { background: rgba(79,124,255,0.15); color: var(--accent); }
.badge-purple { background: rgba(155,125,255,0.15); color: var(--purple); }
.badge-gray { background: rgba(255,255,255,0.06); color: var(--text2); }
.badge-gold { background: rgba(255,174,0,0.15); color: var(--gold); }
.badge-teal { background: rgba(54,217,204,0.15); color: var(--teal); }
/* Priority dot */
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-red { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dot-amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.dot-green { background: var(--green); }
.dot-blue { background: var(--accent); }
.dot-gray { background: var(--text3); }
/* Form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group.full { grid-column: 1/-1; }
label { font-size: 11px; font-weight: 500; color: var(--text3); }
input, select, textarea { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; color: var(--text); font-family: var(--font); font-size: 12px; outline: none; transition: border .15s; width: 100%; height: 34px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
/* The rule above is written for text fields and sets width:100%;height:34px — on a
checkbox or a radio that is a 34px-tall box across the whole row. Every checkbox
in the app has had to undo it one at a time (.mfa-confirm input does); undo it
once, here, so the next one does not have to. Placed BEFORE the component rules,
which are equally specific and therefore still win where they say something. */
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
textarea { resize: vertical; min-height: 60px; height: auto; }
select option { background: var(--bg3); }
input[type="date"] { color-scheme: dark; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all .15s; font-family: var(--font); white-space: nowrap; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent2); }
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border2); }
.btn-secondary:hover { background: var(--bg4); }
.btn-danger { background: rgba(255,82,99,0.15); color: var(--red); border: 1px solid rgba(255,82,99,0.3); }
.btn-success { background: rgba(45,217,138,0.15); color: var(--green); border: 1px solid rgba(45,217,138,0.3); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; flex-shrink: 0; }
/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding-bottom: 20px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 32px; bottom: 0; width: 1px; background: var(--border); }
.tl-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; z-index: 1; }
.tl-content { padding-top: 6px; }
.tl-title { font-weight: 500; font-size: 13px; margin-bottom: 2px; }
.tl-meta { font-size: 11px; color: var(--text3); }
.tl-note { margin-top: 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; color: var(--text2); line-height: 1.6; }
/* Section header — sticky within .main scroll */
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: sticky; top: calc(-1 * var(--pad-y, 24px)); z-index: 10; padding: var(--pad-y, 24px) var(--pad-x, 28px) 16px; margin: calc(-1 * var(--pad-y, 24px)) calc(-1 * var(--pad-x, 28px)) 20px; background: rgba(15,17,23,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.section-header.elevated { border-bottom-color: var(--border); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.section-title { font-size: 18px; font-weight: 600; letter-spacing: -0.4px; }
.section-sub { font-size: 13px; color: var(--text3); margin-top: 2px; }
/* Progress bar */
.progress { height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width .4s; }
/* Error ID */
.error-id { font-family: var(--mono); font-size: 12px; color: var(--text3); background: var(--bg4); padding: 2px 6px; border-radius: 4px; }
/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 300; display: none; align-items: flex-start; justify-content: center; padding: 60px 16px 24px; overflow-y: auto; cursor: pointer; }
.modal-overlay.open { display: flex; }
.modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: 14px; width: 480px; max-width: 100%; max-height: calc(100vh - 84px); cursor: default; display: flex; flex-direction: column; overflow: hidden; }
.modal.wide { width: 600px; }
.modal.preview { width: min(1080px, 95vw); }
.modal-header { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-header h3, .modal-header div { font-size: 15px; }
.modal-body { padding: 16px 20px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; background: var(--bg2); position: relative; z-index: 1; }
/* School card */
.school-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: all .15s; }
.school-card:hover { border-color: var(--border2); transform: translateY(-1px); }
.school-avatar { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
/* A school is shown by the school icon, not its initials (owner, 2026-09-30). */
.school-avatar i { font-size: 21px; line-height: 1; }
.school-info { flex: 1; min-width: 0; }
.school-name { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.school-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.school-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* Charts */
.mini-bar { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.bar-col { background: var(--accent); border-radius: 2px 2px 0 0; min-width: 8px; opacity: .7; transition: opacity .15s; cursor: pointer; }
.bar-col:hover { opacity: 1; }
/* Grid layouts */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.report-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.inv-toolbar { position: sticky; top: 52px; z-index: 100; background: rgba(15,17,23,0.95); backdrop-filter: blur(12px); padding: 10px 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.inv-grid { padding: 14px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.inv-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Stands where the Add button stands, so the page reads as deliberately
read-only rather than as a page whose buttons failed to load. */
.inv-readonly-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 8px;
border: 1px solid var(--border); background: var(--bg2); color: var(--text3); font-size: 11px; font-weight: 500;
white-space: nowrap; }
.inv-header-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-info-table td { padding: 9px 12px; font-size: 13px; }
.detail-info-table td:nth-child(odd) { white-space: nowrap; }
/* Alert banner */
.alert-banner { display: flex; align-items: center; gap: 12px; background: rgba(255,82,99,0.08); border: 1px solid rgba(255,82,99,0.2); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px; }
.alert-banner .ti { color: var(--red); font-size: 18px; flex-shrink: 0; }
.alert-banner-text { flex: 1; font-size: 13px; }
.alert-banner-text strong { color: var(--red); }
/* Toast */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 10px; padding: 12px 16px; font-size: 13px; z-index: 400; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); transform: translateY(80px); opacity: 0; transition: all .3s; max-width: 90vw; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast .ti { color: var(--green); font-size: 18px; }
/* Chips */
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); color: var(--text2); cursor: pointer; transition: all .15s; background: transparent; }
.chip:hover, .chip.active, .chip.chip-active { background: rgba(79,124,255,0.15); border-color: rgba(79,124,255,0.4); color: var(--accent); }
/* Week pills */
.week-track { display: flex; gap: 6px; flex-wrap: wrap; }
.week-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 58px; height: 58px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg3); cursor: pointer; transition: all .15s; flex-shrink: 0; }
.week-pill:hover { border-color: var(--border2); }
.week-pill.done { background: rgba(45,217,138,0.12); border-color: rgba(45,217,138,0.3); }
.week-pill.due { background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.4); }
.week-pill.overdue { background: rgba(255,82,99,0.12); border-color: rgba(255,82,99,0.4); }
.week-pill .wk-num { font-size: 11px; font-weight: 700; }
.week-pill .wk-ic { font-size: 15px; }
/* Avatar */
.av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
/* Notification dot */
.notif-wrapper { position: relative; }
.notif-bell { position: relative; display: flex; align-items: center; cursor: pointer; padding: 4px; }
.notif-dot { width: 8px; height: 8px; background: var(--red); border-radius: 50%; position: absolute; top: 2px; right: 0; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.notif-count { position: absolute; top: -2px; right: -6px; min-width: 16px; height: 16px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; border-radius: 20px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2); z-index: 200; overflow: hidden; animation: dropIn .15s ease; }
.notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text); }
.notif-panel-count { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.notif-panel-body { max-height: 320px; overflow-y: auto; }
.notif-panel-body::-webkit-scrollbar { width: 4px; }
.notif-panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.notif-panel-footer { padding: 10px 16px; border-top: 1px solid var(--border); text-align: center; }
.notif-panel-footer a { font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 500; }
.notif-panel-footer a:hover { text-decoration: underline; }
.notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background .12s; }
.notif-item:hover { background: rgba(79,124,255,0.04); }
.notif-item + .notif-item { border-top: 1px solid var(--border); }
.notif-item-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.notif-item-content { flex: 1; min-width: 0; }
.notif-item-title { font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.4; }
.notif-item-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
.notif-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; font-size: 12px; color: var(--text3); }
.empty { color: var(--text3); text-align: center; padding: 40px 0; font-size: 13px; }
.empty .ti { font-size: 36px; display: block; margin-bottom: 12px; opacity: .5; }
/* Detail header */
.detail-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.detail-hero .school-avatar { width: 56px; height: 56px; font-size: 20px; border-radius: 14px; }
/* Topbar Profile */
.topbar-profile { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; cursor: pointer; transition: background .15s; position: relative; }
.topbar-profile:hover { background: rgba(255,255,255,0.05); }
/* A circle: a photo, or the drawn head-and-shoulders in the role's colour
(auth.js avatarArt). --av-ring is set per user; the ring separates the
picture from the dark topbar without a heavy border. */
.topbar-avatar {
width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
background: #1b1e27; display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 1.5px var(--bg2), 0 0 0 3px color-mix(in srgb, var(--av-ring, #4f7cff) 70%, transparent);
font-size: 11px; font-weight: 700; color: #fff;
}
.topbar-avatar .avatar-art { width: 100%; height: 100%; display: block; }
.topbar-user-info { display: flex; flex-direction: column; }
.topbar-username { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.3; white-space: nowrap; }
.topbar-role { font-size: 10.5px; color: var(--text3); text-transform: capitalize; }
/* Profile Dropdown */
.profile-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 260px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.55); z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .2s; overflow: hidden; }
.profile-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.profile-dropdown-header { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(79,124,255,0.07) 0%, rgba(155,125,255,0.05) 100%); }
.pd-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-name { font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-email { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-role-badge { display: inline-block; margin-top: 4px; font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; background: rgba(79,124,255,0.15); color: var(--accent); border: 1px solid rgba(79,124,255,0.25); width: fit-content; }
.profile-dropdown-items { padding: 8px; }
.profile-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13px; color: var(--text2); cursor: pointer; transition: all .15s; }
.profile-dropdown-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.profile-dropdown-item.danger { color: var(--red); }
.profile-dropdown-item.danger:hover { background: rgba(255,82,99,0.08); }
.pd-icon-box { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; font-size: 15px; flex-shrink: 0; }
.profile-dropdown-divider { height: 1px; background: var(--border); margin: 4px 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.ti-spin { animation: spin .8s linear infinite; }
/* Upload sending animation */
.upload-overlay {
position: absolute; inset: 0; z-index: 20;
background: rgba(15,17,23,0.94); backdrop-filter: blur(10px);
border-radius: var(--radius);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.upload-overlay.active { opacity: 1; pointer-events: all; }
.upload-overlay .upload-text {
font-size: 15px; font-weight: 600; color: var(--text);
}
.upload-overlay .upload-sub {
font-size: 12px; color: var(--text3); margin-top: -4px;
}
.upload-overlay .upload-sub::after {
content: ''; animation: loadDots 1.5s steps(4) infinite;
}
@keyframes loadDots {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
}
/* Submit animation — inline SVG on purpose. A Lottie player would add ~500KB
(more than the whole app's 490KB of JS+CSS) and depend on two external CDNs
at submit time, on a system whose schools have unreliable internet. */
.upload-anim svg { width: 120px; height: 120px; display: block; }
.upload-anim .ua-track { fill: none; stroke: var(--border); stroke-width: 3; }
.upload-anim .ua-arc {
fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
stroke-dasharray: 70 220; transform-origin: 60px 60px;
animation: uaSpin 1.1s linear infinite;
}
.upload-anim .ua-cloud { stroke: var(--text3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.upload-anim .ua-arrow { stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.upload-anim .ua-arrow { animation: uaLift 1.6s ease-in-out infinite; }
@keyframes uaSpin { to { transform: rotate(360deg); } }
@keyframes uaLift {
0%, 100% { transform: translateY(1px); opacity: .45; }
50% { transform: translateY(-2px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.upload-anim .ua-arc, .upload-anim .ua-arrow, .upload-overlay .upload-sub::after { animation: none; }
}
@media (max-width: 520px) {
.upload-anim svg { width: 90px; height: 90px; }
.upload-overlay .upload-text { font-size: 13px; }
.upload-overlay .upload-sub { font-size: 11px; }
}
@media (max-width: 920px) {
.topbar-user-info { display: none; }
.topbar-profile .ti-chevron-down { display: none; }
}
/* The topbar popovers are anchored to their trigger, which sits well inside the
right edge on a phone — a 340px panel would hang off the left of the screen.
Pin them to the viewport instead. */
@media (max-width: 520px) {
.notif-panel { position: fixed; top: calc(var(--topbar-h) + 4px); left: 10px; right: 10px; width: auto; }
.notif-panel-body { max-height: calc(100vh - 190px); }
.profile-dropdown { position: fixed; top: calc(var(--topbar-h) + 4px); right: 10px; left: auto; width: auto; min-width: 230px; max-width: calc(100vw - 20px); }
}
/* Login page */
.login-container { display: flex; background: var(--bg); position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 20px 14px; }
.login-container > * { margin: auto; flex-shrink: 0; }
.login-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 40px; width: 400px; max-width: 90vw; }
.login-title { font-size: 22px; font-weight: 600; text-align: center; margin-bottom: 8px; font-family: var(--font-brand); }
.login-sub { font-size: 13px; color: var(--text3); text-align: center; margin-bottom: 28px; }
.login-error { background: rgba(255,82,99,0.1); border: 1px solid rgba(255,82,99,0.3); color: var(--red); border-radius: 8px; padding: 10px 14px; font-size: 12px; margin-bottom: 16px; display: none; }
.login-error.show { display: block; }
.oe-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.oe-footer-logo { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: center; opacity: 0.7; }
/* ── Password visibility toggle ─────────────────────────────────────────────
Every password field in the app gets one (PasswordField in utils.js), so
nobody has to retype a password they cannot see on a cracked screen. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 40px !important; }
.pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
background: none; border: none; border-radius: 7px; cursor: pointer;
color: var(--text3); font-size: 16px; padding: 0; transition: color .15s, background .15s; }
.pw-toggle:hover { color: var(--accent); background: rgba(79,124,255,.1); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-toggle.is-on { color: var(--accent); }
/* AI Chat — full-height conversation surface.
The reading column is capped so long answers stay legible on a wide monitor,
and the history lives in a drawer on a phone rather than being hidden. */
.main.chat-active { overflow: hidden; padding: 0; }
.chat-page-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; padding: 16px 20px var(--footer-h, 32px); box-sizing: border-box; }
.chat-page-wrap .section-header { flex-shrink: 0; margin: 0 0 12px; padding: 0; }
.chat-container { display: grid; grid-template-columns: 232px 1fr; flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg1); }
/* --- history rail --- */
.chat-sidebar { background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.chat-sidebar-top { padding: 10px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.chat-new-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border2); background: var(--bg3); color: var(--text); font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: background .15s, border-color .15s; }
.chat-new-btn:hover { background: var(--bg4); border-color: var(--accent); }
.chat-rail-label { font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--text3); padding: 8px 12px 4px; }
.chat-history-scroll { flex: 1; overflow-y: auto; padding: 0 6px 8px; }
.chat-hist { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border-radius: 7px; cursor: pointer; font-size: 12px; color: var(--text2); border: 1px solid transparent; transition: background .15s, color .15s; margin-bottom: 2px; }
.chat-hist:hover { background: var(--bg3); color: var(--text); }
.chat-hist.act { background: rgba(79,124,255,0.1); border-color: rgba(79,124,255,0.22); color: var(--accent); }
.chat-hist span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-hist > i:first-child { font-size: 13px; opacity: .5; flex-shrink: 0; }
.chat-del { font-size: 13px; opacity: 0; flex-shrink: 0; transition: opacity .15s, color .15s; padding: 2px; border-radius: 4px; }
.chat-hist:hover .chat-del, .chat-hist.act .chat-del { opacity: .45; }
.chat-del:hover { opacity: 1 !important; color: var(--red) !important; }
.chat-no-hist { text-align: center; padding: 26px 10px; font-size: 11px; color: var(--text3); }
.chat-no-hist i { font-size: 20px; display: block; margin-bottom: 6px; opacity: .3; }
/* --- conversation --- */
.chat-body { display: flex; flex-direction: column; background: var(--bg1); overflow: hidden; min-width: 0; min-height: 0; }
/* min-height: 0 is what lets the message column shrink on a phone. Without it a
long answer keeps its content height (flex min-height:auto) and the composer
is pushed off the bottom of the screen — reported 2026-09-27: "AI ikishajibu,
input box haionekani kwenye simu". */
.chat-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 20px 0 8px; scroll-behavior: smooth; }
.chat-thread { max-width: 720px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 22px; }
.chat-input-wrap { flex-shrink: 0; border-top: 1px solid var(--border); background: var(--bg2); padding: 10px 20px 8px; }
.chat-input-inner { max-width: 720px; margin: 0 auto; }
.chat-row { display: flex; flex-direction: column; animation: cIn .22s ease; }
.chat-row.user { align-items: flex-end; }
@keyframes cIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat-u-bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--accent); color: #fff; font-size: 13.5px; line-height: 1.6; word-break: break-word; white-space: pre-wrap; }
.chat-ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.chat-ai-av { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #7c5cfc); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.chat-ai-av svg { width: 15px; height: 15px; }
.chat-ai-name { font-size: 11.5px; font-weight: 600; color: var(--text2); letter-spacing: .2px; }
.chat-ai-text { font-size: 13.5px; line-height: 1.72; color: var(--text); word-break: break-word; padding-left: 34px; }
.chat-ai-text > *:first-child { margin-top: 0; }
.chat-ai-text > *:last-child { margin-bottom: 0; }
.chat-row.err .chat-ai-text { color: var(--red); }
/* Caret shown while the answer is still arriving */
.chat-caret { display: inline-block; width: 2px; height: 1em; background: var(--accent); vertical-align: -2px; margin-left: 2px; animation: cCaret 1s steps(2) infinite; }
@keyframes cCaret { 50% { opacity: 0; } }
/* Per-message actions. Always visible on touch, hover-revealed with a pointer. */
.chat-acts { display: flex; gap: 4px; margin: 8px 0 0 34px; }
.chat-act { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--text3); font-size: 11px; font-family: var(--font); cursor: pointer; transition: background .15s, color .15s; }
.chat-act:hover { background: var(--bg3); color: var(--text); }
.chat-act i { font-size: 13px; }
@media (hover: hover) {
.chat-acts { opacity: 0; transition: opacity .15s; }
.chat-row:hover .chat-acts, .chat-acts:focus-within { opacity: 1; }
}
/* "Did this fix it?" — the two buttons under the last answer. Never faded on
hover like .chat-acts above: this one is a question being asked, not a tool
that appears when you reach for it. */
.chat-verdict { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 12px 0 0 34px; padding: 10px 12px 10px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; }
/* Question on the left, answers on the right: the bar is balanced end to end. */
.chat-verdict-q { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-verdict-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: rgba(54,217,204,.10); border: 1px solid rgba(54,217,204,.22); color: var(--teal); }
.chat-verdict-icon i { font-size: 16px; }
.chat-verdict-ask { font-size: 13px; color: var(--text); font-weight: 600; }
.chat-verdict-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.chat-verdict-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; font-family: var(--font); cursor: pointer; transition: background .15s, border-color .15s; }
.chat-verdict-btn i { font-size: 14px; }
.chat-verdict-btn.yes { background: rgba(45, 217, 138, .12); color: var(--green); border: 1px solid rgba(45, 217, 138, .28); }
.chat-verdict-btn.yes:hover { background: rgba(45, 217, 138, .2); }
.chat-verdict-btn.no { background: rgba(255, 82, 99, .1); color: var(--red); border: 1px solid rgba(255, 82, 99, .25); }
.chat-verdict-btn.no:hover { background: rgba(255, 82, 99, .18); }
.chat-verdict.done { display: flex; gap: 7px; font-size: 12px; color: var(--text2); }
.chat-verdict.done i { font-size: 15px; color: var(--text3); }
.chat-verdict.done.fixed i { color: var(--green); }
.chat-verdict.done.escalated i { color: var(--purple); }
.chat-verdict.done.failed i { color: var(--red); }
@media (max-width: 520px) {
/* The question stacks above the buttons, and the buttons share the width:
two 12px labels side by side with a question do not fit a 390px phone. */
.chat-verdict { margin-left: 0; gap: 9px; }
.chat-verdict-q, .chat-verdict-actions { flex: 0 0 100%; }
.chat-verdict-btn { flex: 1 1 0; justify-content: center; }
}
/* Waiting on the first token */
.chat-typing { display: flex; align-items: center; gap: 5px; padding-left: 34px; height: 20px; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .35; animation: cDot 1.1s ease-in-out infinite; }
.chat-typing span:nth-child(2) { animation-delay: .18s; }
.chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes cDot { 0%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* --- welcome state --- */
.chat-welcome-area { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.chat-welcome-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; }
.chat-welcome-inner { margin: auto; display: flex; flex-direction: column; align-items: center; padding: 24px 20px; max-width: 560px; width: 100%; }
.chat-w-icon { width: 52px; height: 52px; background: rgba(79,124,255,0.08); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--accent); }
.chat-w-title { font-size: 19px; font-weight: 600; letter-spacing: -0.3px; color: var(--text); margin-bottom: 6px; text-align: center; }
.chat-w-sub { font-size: 12.5px; color: var(--text3); text-align: center; line-height: 1.65; margin-bottom: 22px; }
.chat-w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.chat-sug { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; cursor: pointer; display: flex; align-items: center; gap: 9px; transition: border-color .18s, background .18s; font-size: 12px; color: var(--text2); text-align: left; font-family: var(--font); }
.chat-sug:hover { border-color: var(--accent); background: var(--bg3); color: var(--text); }
.chat-sug i { font-size: 15px; flex-shrink: 0; }
/* --- composer --- */
.chat-ibox { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 13px; background: var(--bg1); border: 1px solid var(--border); border-radius: 12px; transition: border-color .18s, box-shadow .18s; }
.chat-ibox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,124,255,0.08); }
.chat-ibox textarea { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 13.5px; font-family: var(--font); resize: none; line-height: 1.5; max-height: 168px; padding: 6px 0; }
.chat-ibox textarea::placeholder { color: var(--text3); }
.chat-send { width: 32px; height: 32px; border-radius: 9px; border: none; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, opacity .15s; flex-shrink: 0; }
.chat-send svg { width: 16px; height: 16px; }
.chat-send:hover { background: var(--accent2); }
.chat-send:disabled { opacity: .4; cursor: not-allowed; }
.chat-send.stop { background: var(--red); }
.chat-send.stop:hover { background: var(--red2); }
.chat-hint { text-align: center; font-size: 10px; color: var(--text3); margin-top: 6px; opacity: .75; }
.chat-title-shimmer { background: linear-gradient(90deg, var(--text) 0%, var(--accent) 50%, var(--text) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shTxt 4s ease-in-out infinite; }
@keyframes shTxt { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
/* --- rendered markdown inside an answer --- */
.chat-ai-text h1, .chat-ai-text h2, .chat-ai-text h3 { font-weight: 600; line-height: 1.35; margin: 16px 0 6px; }
.chat-ai-text h1 { font-size: 16px; }
.chat-ai-text h2 { font-size: 15px; }
.chat-ai-text h3 { font-size: 13.5px; }
.chat-ai-text p { margin: 0 0 10px; }
.chat-ai-text ul, .chat-ai-text ol { margin: 0 0 10px; padding-left: 22px; }
.chat-ai-text li { margin: 4px 0; padding-left: 2px; }
.chat-ai-text ol li::marker { color: var(--accent); font-weight: 600; }
.chat-ai-text ul li::marker { color: var(--text3); }
.chat-ai-text strong { font-weight: 600; color: var(--text); }
.chat-ai-text a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(79,124,255,0.35); }
.chat-ai-text a:hover { border-bottom-color: var(--accent); }
.chat-ai-text hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.chat-ai-text blockquote { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--amber); background: rgba(245,166,35,0.06); border-radius: 0 8px 8px 0; color: var(--text2); }
.chat-ai-text blockquote p:last-child { margin: 0; }
.chat-ic { padding: 1.5px 5px; border-radius: 4px; background: rgba(79,124,255,0.1); color: var(--accent); font-family: var(--mono); font-size: 12px; }
.chat-tbl-wrap { overflow-x: auto; margin: 0 0 10px; border: 1px solid var(--border); border-radius: 8px; }
.chat-ai-text table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.chat-ai-text th { background: var(--bg2); text-align: left; padding: 7px 10px; font-size: 11px; }
.chat-ai-text td { padding: 7px 10px; border-top: 1px solid var(--border); }
.chat-code { background: #12141c; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 0 0 10px; }
.chat-code-h { display: flex; align-items: center; justify-content: space-between; padding: 5px 6px 5px 11px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--text3); }
.chat-code pre { padding: 11px 13px; font-size: 12px; color: #e2e8f0; font-family: var(--mono); overflow-x: auto; margin: 0; line-height: 1.6; }
/* Resource Library recommendations below an AI answer. Three cards are visible
on desktop; the shelf stays horizontal at every breakpoint. */
.chat-resources { margin: 14px 0 0 34px; max-width: calc(100% - 34px); }
.chat-resource-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--text2); font-size: 11px; font-weight: 600; }
.chat-resource-head > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.chat-resource-head > span:first-child i { color: var(--accent); font-size: 14px; }
.chat-resource-arrows { display: flex; gap: 4px; }
.chat-resource-arrows button { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 7px; background: var(--bg2); color: var(--text2); cursor: pointer; }
.chat-resource-arrows button:hover { border-color: var(--accent); color: var(--accent); }
.chat-resource-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 3); gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 0 0 7px; }
.chat-resource-card { scroll-snap-align: start; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--bg2); color: var(--text); text-align: left; font-family: var(--font); cursor: pointer; transition: border-color .15s, background .15s; }
.chat-resource-card:hover, .chat-resource-card:focus-visible { border-color: var(--accent); background: var(--bg3); outline: none; }
.chat-resource-visual { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(145deg, var(--bg3), var(--bg4)); color: var(--purple); font-size: 25px; border-bottom: 1px solid var(--border); }
.chat-resource-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-resource-play { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(79,124,255,.92); color: #fff; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.chat-resource-copy { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 10px; min-width: 0; }
.chat-resource-copy strong { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-resource-copy small { color: var(--text3); font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-resource-notes { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; }
.chat-resource-label { color: var(--text3); font-size: 10px; font-weight: 600; letter-spacing: .45px; text-transform: uppercase; }
.chat-resource-fix { display: flex; align-items: flex-start; gap: 7px; color: var(--text2); font-size: 11.5px; line-height: 1.55; }
.chat-resource-fix i { color: var(--green); margin-top: 2px; flex-shrink: 0; }
.chat-resource-link { width: 100%; display: grid; grid-template-columns: 18px minmax(0,1fr) auto 16px; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text2); text-align: left; font-family: var(--font); cursor: pointer; }
.chat-resource-link:hover, .chat-resource-link:focus-visible { background: var(--bg3); border-color: var(--border); outline: none; }
.chat-resource-link > i:first-child { color: var(--accent); }
.chat-resource-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.chat-resource-link small { color: var(--text3); font-size: 9.5px; }
.chat-resource-link > i:last-child { color: var(--text3); }
/* --- history drawer (tablet and phone) --- */
.chat-rail-toggle { display: none; }
.chat-rail-backdrop { display: none; }
@media (max-width: 920px) {
.chat-page-wrap { padding: 16px 16px 0; }
.chat-container { grid-template-columns: 1fr; position: relative; }
/* The rail slides over the conversation instead of vanishing, so the history
stays reachable without a wide screen. */
.chat-sidebar { position: absolute; inset: 0 auto 0 0; width: 240px; max-width: 82%; z-index: 20; transform: translateX(-101%); transition: transform .22s ease; box-shadow: 0 0 30px rgba(0,0,0,0.45); }
.chat-sidebar.open { transform: translateX(0); }
.chat-rail-backdrop.show { display: block; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 15; }
.chat-rail-toggle { display: inline-flex; }
.chat-thread { padding: 0 14px; }
.chat-input-wrap { padding: 8px 14px 6px; }
.chat-input-inner { max-width: none; }
.chat-resource-row { grid-auto-columns: calc((100% - 10px) / 2); }
}
@media (max-width: 520px) {
.chat-page-wrap { padding: 12px 0 0; }
.chat-page-wrap .section-header { padding: 0 14px; margin-bottom: 10px; }
.chat-container { border-radius: 0; border-left: none; border-right: none; }
.chat-msgs { padding: 14px 0 6px; }
.chat-thread { gap: 18px; padding: 0 12px; }
.chat-u-bubble { max-width: 88%; font-size: 13px; }
.chat-ai-text { font-size: 13px; padding-left: 0; }
.chat-acts { margin-left: 0; }
.chat-resources { margin-left: 0; max-width: 100%; }
.chat-resource-row { grid-auto-columns: 82%; }
.chat-resource-arrows { display: none; }
.chat-typing { padding-left: 0; }
.chat-w-grid { grid-template-columns: 1fr; }
.chat-w-title { font-size: 17px; }
.chat-input-wrap { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); position: relative; z-index: 3; }
.chat-hint { display: none; }
}
@supports (height: 100dvh) {
.main.chat-active { height: calc(100dvh - var(--topbar-h)); }
}
/* Registration Page */
.reg-page { display: flex; padding: 20px 14px; overflow-y: auto; overflow-x: hidden; position: fixed; inset: 0; z-index: 1; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.reg-page > * { margin: auto; flex-shrink: 0; }
.reg-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 28px 28px 24px; max-width: 520px; width: 100%; animation: fadeUp .4s ease; }
.reg-card-status { text-align: center; max-width: 420px; }
.reg-header { text-align: center; margin-bottom: 16px; }
.reg-icon { width: 56px; height: 56px; margin: 0 auto 16px; background: rgba(79,124,255,0.08); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.reg-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.reg-sub { font-size: 12px; color: var(--text3); line-height: 1.5; }
.reg-error { background: rgba(255,82,99,0.08); border: 1px solid rgba(255,82,99,0.2); color: var(--red); border-radius: 8px; padding: 8px 12px; font-size: 12px; margin-bottom: 12px; }
.reg-form { display: flex; flex-direction: column; gap: 10px; }
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.reg-full { grid-column: 1 / -1; }
@media (max-width: 520px) {
.reg-grid { grid-template-columns: 1fr; }
/* Compact the long standalone forms so they need as little scrolling as possible. */
.reg-page { padding: 12px 10px; }
.reg-card { padding: 18px 16px 16px; border-radius: 14px; }
.reg-icon { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 10px; }
.reg-icon svg, .reg-icon i { transform: scale(.82); }
.reg-header { margin-bottom: 12px; }
.reg-title { font-size: 16px; }
.reg-sub { font-size: 11.5px; }
.reg-form { gap: 8px; }
.reg-field input, .reg-field select, .reg-select { padding: 9px 10px; }
.reg-footer { margin-top: 10px; }
.login-container { padding: 12px 10px; }
.login-box { padding: 22px 18px; max-width: 100%; border-radius: 14px; }
.login-title { font-size: 18px; }
.login-sub { font-size: 12px; margin-bottom: 18px; }
.oe-icon { width: 38px; height: 38px; }
.oe-icon svg { width: 30px; height: 30px; }
.oe-footer-logo { margin-top: 14px; padding-top: 12px; }
.oe-footer-logo svg { width: 130px; height: 14px; }
}
.reg-field { display: flex; flex-direction: column; gap: 3px; }
.reg-field label { font-size: 11px; font-weight: 500; color: var(--text2); }
.reg-field .req { color: var(--red); }
.reg-field input, .reg-field select { padding: 8px 10px; background: var(--bg1); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; font-family: var(--font); transition: border-color .2s; }
.reg-field input:focus, .reg-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,124,255,0.08); }
.reg-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; background: linear-gradient(135deg, var(--accent), #6366f1); color: #fff; border: none; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; font-family: var(--font); width: 100%; margin-top: 4px; }
.reg-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,124,255,0.3); }
.reg-btn:active { transform: scale(0.98); }
.reg-btn-outline { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.reg-btn-outline:hover { background: rgba(79,124,255,0.06); box-shadow: none; }
.reg-footer { text-align: center; margin-top: 14px; font-size: 12px; color: var(--text3); }
.reg-footer a { color: var(--accent); text-decoration: none; font-weight: 500; }
/* Custom School Dropdown */
.reg-select { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--bg1); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color .2s; position: relative; }
.reg-select:hover { border-color: var(--text3); }
.reg-select:focus-within, .reg-select.open { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,124,255,0.08); }
.reg-select-text { font-size: 13px; color: var(--text3); display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reg-select-text.selected { color: var(--text); }
.reg-select-arrow { color: var(--text3); flex-shrink: 0; transition: transform .2s; }
.reg-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 9999; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2); overflow: hidden; animation: dropIn .15s ease; }
.reg-dropdown.drop-up { top: auto; bottom: calc(100% + 4px); }
.reg-dropdown.drop-side { top: 0; left: calc(100% + 40px); right: auto; width: 280px; bottom: auto; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.reg-dropdown-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.reg-dropdown-search svg { color: var(--text3); flex-shrink: 0; }
.reg-dropdown-search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 13px; font-family: var(--font); }
.reg-dropdown-search input::placeholder { color: var(--text3); }
.reg-dropdown-list { max-height: 180px; overflow-y: auto; padding: 4px; }
.reg-dropdown-list::-webkit-scrollbar { width: 5px; }
.reg-dropdown-list::-webkit-scrollbar-track { background: transparent; }
.reg-dropdown-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.reg-dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: all .12s; }
.reg-dropdown-item:hover { background: rgba(79,124,255,0.08); }
.reg-dropdown-item:active { background: rgba(79,124,255,0.14); }
.reg-dropdown-name { font-size: 13px; color: var(--text); font-weight: 500; }
.reg-dropdown-zone { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: rgba(54,217,204,0.1); color: var(--teal); white-space: nowrap; }
.reg-field.reg-full { position: relative; }
/* Date picker — replaces , whose calendar is drawn by the
operating system, ignores every variable in variables.css, and escapes its
own modal. Field matches .reg-select exactly so a form reads as one thing. */
.dp { position: relative; }
.dp-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--bg1); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color .2s; }
.dp-field:hover { border-color: var(--text3); }
.dp-text { font-size: 13px; color: var(--text3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dp-text.has { color: var(--text); }
.dp-icon { font-size: 15px; color: var(--text3); flex-shrink: 0; }
.dp-field:hover .dp-icon { color: var(--accent); }
.dp-panel { position: fixed; z-index: 9999; width: 268px; padding: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.34), 0 2px 8px rgba(0,0,0,0.22); animation: dropIn .15s ease; }
/* Inline: in the flow of the form, for a short modal where a popup would cover
the very fields the user is trying to fill in. */
.dp-panel.dp-static { position: static; width: auto; box-shadow: none; background: var(--bg3); animation: none; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 8px; }
.dp-title { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; background: none; border: none; border-radius: 8px; color: var(--text); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s; }
.dp-title:hover { background: rgba(79,124,255,0.10); color: var(--accent); }
.dp-nav { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text2); cursor: pointer; transition: all .12s; }
.dp-nav:hover { background: rgba(79,124,255,0.10); border-color: rgba(79,124,255,0.25); color: var(--accent); }
.dp-nav i { font-size: 15px; }
.dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; }
.dp-dow span { text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text3); padding: 4px 0; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day { display: flex; align-items: center; justify-content: center; height: 32px; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text); font-family: var(--font); font-size: 12.5px; cursor: pointer; transition: all .12s; }
.dp-day:hover { background: rgba(79,124,255,0.12); }
.dp-day.other { color: var(--text3); opacity: .55; }
.dp-day.today { border-color: rgba(79,124,255,0.45); color: var(--accent); font-weight: 600; }
.dp-day.sel { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.dp-day.sel:hover { background: var(--accent); }
.dp-day.dis { opacity: .22; cursor: default; }
.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.dp-mon { display: flex; align-items: center; justify-content: center; height: 40px; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text); font-family: var(--font); font-size: 12.5px; cursor: pointer; transition: all .12s; }
.dp-mon:hover { background: rgba(79,124,255,0.12); }
.dp-mon.sel { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.dp-mon.dis { opacity: .22; cursor: default; }
.dp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.dp-act { background: none; border: none; padding: 4px 6px; border-radius: 6px; color: var(--text3); font-family: var(--font); font-size: 12px; cursor: pointer; transition: all .12s; }
.dp-act:hover { background: rgba(255,255,255,0.05); color: var(--text2); }
.dp-act.accent { color: var(--accent); }
.dp-act.accent:hover { background: rgba(79,124,255,0.12); }
/* Tooltip System — JS-powered card with bold title + description */
.tooltip-card {
position: fixed;
z-index: 99999;
padding: 16px 20px;
background: #1e2028;
border: 1px solid var(--border2);
border-radius: 12px;
max-width: 340px;
min-width: 200px;
box-shadow: 0 14px 44px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.35);
pointer-events: none;
opacity: 0;
transform: translateY(6px);
transition: opacity .2s ease, transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-family: var(--font);
}
.tooltip-card.visible {
opacity: 1;
transform: translateY(0);
}
.tooltip-card .tip-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
line-height: 1.3;
}
.tooltip-card .tip-desc {
font-size: 12.5px;
font-weight: 400;
color: var(--text2);
line-height: 1.65;
}
.tooltip-card.tip-red { border-color: rgba(255,82,99,0.25); }
.tooltip-card.tip-red .tip-title { color: var(--red); }
.tooltip-card.tip-green { border-color: rgba(45,217,138,0.25); }
.tooltip-card.tip-green .tip-title { color: var(--green); }
.tooltip-card.tip-purple { border-color: rgba(155,125,255,0.25); }
.tooltip-card.tip-purple .tip-title { color: var(--purple); }
.tooltip-card.tip-amber { border-color: rgba(245,166,35,0.3); }
.tooltip-card.tip-amber .tip-title { color: var(--amber); }
.tooltip-card.tip-teal { border-color: rgba(54,217,204,0.28); }
.tooltip-card.tip-teal .tip-title { color: var(--teal); }
/* Pending Animation */
.reg-pending-anim { margin-bottom: 20px; }
.reg-pending-circle { width: 72px; height: 72px; margin: 0 auto; background: rgba(245,166,35,0.06); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--amber); position: relative; }
.reg-pending-ring { position: absolute; inset: -4px; border: 2px solid var(--amber); border-radius: 50%; border-top-color: transparent; animation: spin 2s linear infinite; }
.reg-success-anim { margin-bottom: 20px; animation: scaleIn .4s ease; }
.reg-reject-anim { margin-bottom: 20px; }
@keyframes scaleIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.reg-status-card { background: var(--bg1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 16px 0; }
.reg-status-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 12px; }
.reg-status-row span:first-child { color: var(--text3); }
.reg-badge { padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; }
.reg-badge.pending { background: rgba(245,166,35,0.1); color: var(--amber); }
.reg-hint { font-size: 11px; color: var(--text3); margin-top: 16px; line-height: 1.6; }
/* Approvals & Teacher Management */
.tab-row { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.tab-btn { padding: 8px 16px; font-size: 12px; font-weight: 500; background: none; border: none; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; font-family: var(--font); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn:hover { color: var(--text); }
.approval-list { display: flex; flex-direction: column; gap: 10px; }
.approval-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--bg1); border: 1px solid var(--border); border-radius: 10px; transition: all .15s; }
.approval-item:hover { border-color: rgba(79,124,255,0.2); }
.approval-info { flex: 1; min-width: 0; }
.approval-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.approval-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.approval-msg { font-size: 12px; color: var(--text2); margin-top: 6px; padding: 8px; background: var(--bg2); border-radius: 6px; font-style: italic; }
.approval-actions { display: flex; gap: 6px; flex-shrink: 0; }
.empty-state { text-align: center; padding: 40px; color: var(--text3); font-size: 13px; }
.btn-icon { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; font-size: 12px; }
.btn-icon:hover { border-color: var(--accent); color: var(--accent); }
.badge-green { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 500; background: rgba(45,217,138,0.1); color: var(--green); }
.badge-red { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 500; background: rgba(255,82,99,0.1); color: var(--red); }
.badge-gray { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 500; background: var(--bg3); color: var(--text3); }
.badge-teal { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 500; background: rgba(54,217,204,0.12); color: var(--teal); }
/* School Admin rows */
.sa-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 8px; transition: all .15s; background: var(--bg1); }
.sa-row:hover { border-color: rgba(79,124,255,0.2); background: rgba(79,124,255,0.02); }
.sa-row:last-child { margin-bottom: 0; }
.sa-row-pending { border-left: 3px solid var(--amber); }
.sa-row-rejected { border-left: 3px solid var(--red); opacity: .8; }
.sa-row-rejected:hover { opacity: 1; }
.notif-badge-inline { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; border-radius: 20px; padding: 0 4px; margin-left: 6px; }
.sa-page { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - var(--pad-y, 24px) - var(--footer-h, 32px)); margin: calc(-1 * var(--pad-y, 24px)) calc(-1 * var(--pad-x, 28px)) -60px; padding: var(--pad-y, 24px) var(--pad-x, 28px) 0; overflow: hidden; }
.sa-toolbar { flex-shrink: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px 10px 0 0; padding: 10px 16px; display: flex; flex-direction: column; gap: 10px; }
.sa-toolbar .tab-row { gap: 2px; }
.sa-search { width: 100%; max-width: 360px; padding: 7px 12px; }
.sa-list { flex: 1; min-height: 0; overflow-y: auto; background: var(--bg2); border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; padding: 12px 16px; }
/* Page-specific responsive layouts */
.school-detail-stats { grid-template-columns: repeat(4, 1fr); }
.followup-layout { display: grid; grid-template-columns: 1fr 340px; }
.teachers-link-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.manuals-stats { grid-template-columns: repeat(4, 1fr); }
.explainer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.explainer-card { display: flex; align-items: center; gap: 14px; padding: 16px; cursor: pointer; transition: border-color .15s; }
.explainer-card:hover, .explainer-card:focus-visible { border-color: rgba(79,124,255,.45); outline: none; }
.film-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; }
.film-card { padding: 0; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.film-card:hover, .film-card:focus-visible { border-color: rgba(79,124,255,.45); outline: none; }
.film-thumb { position: relative; aspect-ratio: 16 / 9; background: #0b0d12; border-bottom: 1px solid var(--border); }
.film-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(79,124,255,.92); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.film-time { position: absolute; right: 10px; bottom: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(11,13,18,.82); color: var(--text); font-size: 11px; font-family: var(--font-mono); }
.help-layout { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.guide-detail-grid { display: grid; grid-template-columns: 1fr 240px; gap: 14px; align-items: start; }
.guide-sidebar { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 50px; }
.tracker-search { width: 200px; }
.tracker-sticky-header { position: sticky; top: calc(-1 * var(--pad-y, 24px)); z-index: 10; padding: var(--pad-y, 24px) var(--pad-x, 28px) 12px; margin: calc(-1 * var(--pad-y, 24px)) calc(-1 * var(--pad-x, 28px)) 16px; background: rgba(15,17,23,0.88); backdrop-filter: blur(12px); }
@media (max-width: 920px) {
.two-col { grid-template-columns: 1fr; }
.three-col { grid-template-columns: 1fr 1fr; }
.report-layout { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
.form-grid .form-group.full { grid-column: 1; }
.school-detail-stats { grid-template-columns: repeat(2, 1fr); }
.followup-layout { grid-template-columns: 1fr; }
.teachers-link-stats { grid-template-columns: 1fr 1fr 1fr; }
.manuals-stats { grid-template-columns: repeat(2, 1fr); }
.help-layout { grid-template-columns: 1fr; }
.guide-detail-grid { grid-template-columns: 1fr; }
.guide-sidebar { position: static; }
.help-nav { position: static !important; }
.tracker-search { width: 100%; min-width: 140px; flex: 1; }
/* The sticky section header is much taller here; a second sticky bar would
cover it (higher z-index), so these scroll away with the page instead. */
.inv-toolbar { position: static; padding: 10px 14px; flex-wrap: wrap; }
.inv-toolbar > div { min-width: 0 !important; flex: 1 1 auto; }
.inv-grid { padding: 10px 14px; grid-template-columns: 1fr 1fr; gap: 8px; }
.inv-header-actions { flex-wrap: wrap; }
.inv-header-stats { order: -1; width: 100%; margin-bottom: 4px; }
.section-header { flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.approval-item { flex-direction: column; align-items: flex-start; gap: 10px; }
.sa-row { flex-wrap: wrap; gap: 8px; }
.sa-row > div[style*="min-width:160px"] { min-width: 0 !important; width: 100%; }
.sa-row > div[style*="min-width:140px"] { min-width: 0 !important; width: 100%; }
.sa-toolbar { padding: 10px 12px; }
.sa-search { max-width: 100% !important; }
}
@media (max-width: 768px) {
.three-col { grid-template-columns: 1fr; }
.school-detail-stats { grid-template-columns: repeat(2, 1fr); }
.teachers-link-stats { grid-template-columns: 1fr 1fr; }
.inv-grid { grid-template-columns: 1fr; }
.inv-toolbar > div { min-width: 0 !important; flex: 1; }
}
@media (max-width: 520px) {
.school-detail-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
.followup-layout { grid-template-columns: 1fr; }
.teachers-link-stats { grid-template-columns: 1fr; }
.manuals-stats { grid-template-columns: 1fr 1fr; }
.stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
.stat-card { padding: 12px; }
.stat-val { font-size: 22px; }
.hide-mobile { display: none !important; }
.btn-label { display: none !important; }
.help-features-grid { grid-template-columns: 1fr !important; }
.manual-card-inner { flex-wrap: wrap; }
.manual-actions { width: 100%; justify-content: flex-start; gap: 6px; margin-top: 4px; }
.manual-actions button { padding: 6px 8px !important; }
.tracker-search { width: 100%; }
.chip-group { gap: 5px; flex-wrap: wrap; }
.chip { font-size: 11px; padding: 4px 9px; white-space: nowrap; }
.alert-banner { flex-wrap: wrap; }
.alert-banner-text { min-width: 0; }
.tab-row { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; gap: 0; }
.tab-btn { white-space: nowrap; flex-shrink: 0; padding: 7px 12px; }
.inv-toolbar { flex-direction: column; align-items: stretch; padding: 8px 10px; }
.inv-grid { padding: 8px 10px; gap: 6px; }
.inv-header-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.inv-header-actions .btn { font-size: 11px; padding: 5px 10px; }
/* On a phone the header stacks, so centre it rather than leaving the title
and buttons hugging the left edge. */
.section-header { align-items: center; text-align: center; }
.section-header > div { justify-content: center; }
.section-header > div:last-child { width: 100%; justify-content: center; flex-wrap: wrap; }
.section-header .btn { font-size: 11px; padding: 5px 10px; }
.detail-info-table tr { display: flex; flex-wrap: wrap; }
.detail-info-table tr td { flex: 1 1 50%; box-sizing: border-box; }
.detail-info-table tr td[colspan] { flex: 1 1 100%; }
.sa-row > div[style*="display:flex"][style*="flex-shrink"] { width: 100%; }
.sa-list { padding: 8px 10px; }
/* Moved from base.css: these selectors are re-declared later in this file,
so the overrides only take effect from here. */
.card { padding: 14px; }
.section-title { font-size: 16px; }
.section-sub { font-size: 12px; }
.btn { padding: 8px 14px; font-size: 12px; }
.btn-sm { padding: 5px 10px; font-size: 11px; }
table { font-size: 12px; }
th { padding: 8px 8px; }
td { padding: 8px 8px; }
.modal { width: 100%; max-width: 100%; border-radius: 14px 14px 0 0; max-height: 88vh; }
.modal-overlay { align-items: flex-end; padding: 0; }
.form-grid { gap: 10px; }
.alert-banner { padding: 10px 12px; font-size: 12px; }
.school-card { padding: 12px; }
.error-id { white-space: nowrap; }
}
/* LRS Inventory Responsive */
.lrs-header-stats { display: flex; gap: 6px; }
.lrs-header-actions { display: flex; gap: 8px; align-items: center; }
.lrs-toolbar { position: sticky; top: 52px; z-index: 100; background: rgba(15,17,23,0.95); backdrop-filter: blur(12px); padding: 10px 20px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--border); }
.lrs-grid { padding: 14px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; }
@media (max-width: 1200px) {
.lrs-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
@media (max-width: 920px) {
.lrs-header-stats { flex-wrap: wrap; gap: 4px; }
.lrs-header-actions { flex-wrap: wrap; }
.lrs-toolbar { position: static; flex-wrap: wrap; padding: 10px 14px; }
.lrs-grid { padding: 10px 14px; grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 768px) {
.lrs-grid { grid-template-columns: 1fr; }
.lrs-header-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.lrs-toolbar { gap: 8px; }
.lrs-toolbar > div { min-width: 0 !important; flex: 1; }
}
@media (max-width: 520px) {
.lrs-grid { padding: 8px 10px; gap: 6px; }
.lrs-header-stats { grid-template-columns: 1fr 1fr; }
.lrs-header-stats > div { font-size: 10px !important; padding: 3px 6px !important; }
.lrs-toolbar { padding: 8px 10px; flex-direction: column; align-items: stretch; }
.lrs-header-actions { flex-wrap: wrap; width: 100%; }
.lrs-header-actions .btn { order: 2; margin-top: 4px; }
.lrs-header-actions .lrs-header-stats { order: 1; width: 100%; }
}
/* ── Animated explainers (feature 15) ───────────────────────────────────────
Nothing here uses SMIL, the Web Animations API or animated custom properties:
these play on Amazon Fire's Silk, Huawei's browser and low-cost Android
builds, which is what the schools actually hold. Highlighting carries the
meaning; movement only decorates it, so reduced motion loses the movement and
keeps the sense. */
.ex-wrap { display: flex; flex-direction: column; gap: 14px; }
.ex-stage { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.ex-stage svg { display: block; width: 100%; height: auto; }
.ex-part { transition: opacity .35s ease, transform .35s ease; transform-origin: center; }
.ex-part.off { opacity: .22; }
.ex-part.on { opacity: 1; }
.ex-part.on:not(.ex-light) { transform: scale(1.035); }
/* A light that is being talked about pulses; everything else holds still. */
.ex-light.on circle { animation: exPulse 1.4s ease-in-out infinite; }
@keyframes exPulse { 0%, 100% { r: 5; opacity: 1; } 50% { r: 7.5; opacity: .55; } }
.ex-label { fill: var(--text3); font-size: 12px; font-family: var(--font); text-anchor: middle; }
.ex-tag { fill: var(--text2); font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.ex-caption {
min-height: 62px; font-size: 14px; line-height: 1.65; color: var(--text);
opacity: 0; transform: translateY(5px); transition: opacity .3s ease, transform .3s ease;
}
.ex-caption.in { opacity: 1; transform: none; }
.ex-dots { display: flex; gap: 7px; justify-content: center; }
.ex-dot {
width: 26px; height: 5px; border-radius: 3px; border: 0; padding: 0; cursor: pointer;
background: var(--bg4); transition: background .2s ease;
}
.ex-dot.done { background: var(--text3); }
.ex-dot.on { background: var(--accent); }
.ex-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; flex-wrap: wrap; }
.ex-transport { display: flex; gap: 8px; }
@media (max-width: 520px) {
.ex-caption { font-size: 13px; min-height: 76px; }
.ex-bar { flex-direction: column-reverse; align-items: stretch; }
.ex-transport { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
.ex-part, .ex-caption { transition: none; }
.ex-part.on:not(.ex-light) { transform: none; }
.ex-light.on circle { animation: none; }
.ex-caption { opacity: 1; transform: none; }
}
/* Dashboard list row — a school, a site, anything with an icon, a label and a
count. Flat, like .card: no glass, no hover transform, just a border tint. */
.dash-row {
display: flex; align-items: center; gap: 10px;
background: var(--bg2); border: 1px solid var(--border);
border-radius: 10px; padding: 11px 13px; cursor: pointer;
transition: border-color .15s;
}
.dash-row:hover { border-color: var(--bg4); }
/* Sub-admin dashboard responsive */
@media (max-width: 920px) {
.sa-metrics { grid-template-columns: 1fr 1fr !important; }
.sa-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
.sa-metrics { grid-template-columns: 1fr 1fr !important; }
.sa-metrics > div { padding: 14px !important; gap: 12px !important; }
.sa-metrics > div svg { width: 48px !important; height: 48px !important; }
.sa-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
.sa-metrics { grid-template-columns: 1fr !important; }
.sa-metrics > div { padding: 12px !important; }
.sa-task-card { padding: 10px 12px !important; }
.sa-task-card > div:last-child { flex-wrap: wrap; }
.dash-row { padding: 10px 11px; }
}
/* The calendar on a phone: a touch target that can actually be hit, and a
panel that fits a 320px screen with room to spare. */
@media (max-width: 520px) {
.dp-panel { width: 260px; padding: 9px; }
.dp-day { height: 34px; }
.dp-mon { height: 42px; }
}
/* Plan a visit — the calendar and the notes side by side, because the whole
point of drawing our own calendar was that nothing it does should hide the
rest of the form. Stacks below 640px, where two columns cannot both fit. */
.plan-grid { display: grid; grid-template-columns: 268px 1fr; gap: 14px; align-items: stretch; }
.plan-grid .form-group { display: flex; flex-direction: column; }
.plan-notes { flex: 1; min-height: 200px; resize: vertical; }
@media (max-width: 640px) {
.plan-grid { grid-template-columns: 1fr; }
.plan-notes { min-height: 90px; }
}
/* ===== Security Overview (#security, platform admin) ===== */
.sec-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 12px; font-weight: 500; border-radius: 8px; cursor: pointer; background: rgba(79,124,255,.12); color: var(--accent); border: 1px solid rgba(79,124,255,.25); white-space: nowrap; }
.sec-btn-teal { background: rgba(54,217,204,.12); color: var(--teal); border-color: rgba(54,217,204,.25); }
.sec-btn .ti { font-size: 15px; }
.sec-stat-of { font-size: 15px; color: var(--text3); font-weight: 500; margin-left: 2px; }
.sec-chip { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 20px; white-space: nowrap; letter-spacing: .2px; }
.sec-muted { font-size: 13px; color: var(--text3); }
.sec-foot { font-size: 11px; color: var(--text3); margin-top: 12px; line-height: 1.5; }
.sec-foot code, .sec-review-meta code { font-family: var(--font-mono); font-size: 11px; }
.sec-briefing p { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0 0 10px; max-width: 78ch; }
.sec-briefing p:last-child { margin-bottom: 0; color: var(--text2); }
.sec-layer-intro { font-size: 13px; color: var(--text2); margin: -6px 0 14px; line-height: 1.6; max-width: 78ch; }
/* Platform admin guide (sign-in and accounts): native , no script */
.sec-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.sec-guide-item { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; }
.sec-guide-item[open] { border-color: var(--border2); }
.sec-guide-item summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text); border-radius: 10px; }
.sec-guide-item summary::-webkit-details-marker { display: none; }
.sec-guide-item summary > i:first-child { font-size: 17px; flex-shrink: 0; }
.sec-guide-item summary span { flex: 1; min-width: 0; }
.sec-guide-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sec-guide-chev { font-size: 15px; color: var(--text3); transition: transform .15s; }
.sec-guide-item[open] .sec-guide-chev { transform: rotate(180deg); }
.sec-guide-body { padding: 0 14px 13px 41px; font-size: 13px; line-height: 1.65; color: var(--text2); }
.sec-guide-body p { margin: 0 0 8px; }
.sec-guide-body p:last-child { margin-bottom: 0; }
.sec-guide-body ol, .sec-guide-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.sec-guide-body strong { color: var(--text); font-weight: 600; }
.sec-guide-body code { font-family: var(--font-mono); font-size: 11.5px; background: var(--bg2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; word-break: break-all; }
@media (max-width: 920px) {
.sec-guide { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.sec-guide-body { padding-left: 14px; }
}
.sec-layers { display: flex; flex-direction: column; }
.sec-layer { display: grid; grid-template-columns: 22px 38px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); align-items: start; }
.sec-layer:first-child { border-top: 0; padding-top: 4px; }
.sec-layer-n { font-family: var(--font-mono); font-size: 11px; color: var(--text3); padding-top: 11px; text-align: right; }
.sec-layer-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.sec-layer-body { min-width: 0; }
.sec-layer-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.sec-layer-title { font-size: 14px; font-weight: 600; color: var(--text); }
.sec-layer-plain { font-size: 13px; color: var(--text); line-height: 1.6; max-width: 80ch; }
.sec-layer-tech { font-size: 12px; color: var(--text3); line-height: 1.55; margin-top: 4px; max-width: 80ch; }
.sec-evidence { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text2); margin-top: 7px; padding: 2px 8px; background: var(--bg3); border-radius: 6px; }
.sec-evidence .ti { font-size: 12px; }
.sec-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg3); border-radius: 10px; border: 1px solid var(--border); overflow: hidden; }
.sec-table td { padding: 10px 12px; vertical-align: top; }
.sec-table .sec-sep { padding: 0; height: 1px; background: var(--border); }
.sec-role-cell { width: 38%; }
.sec-role { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); }
.sec-role .ti { font-size: 15px; }
.sec-role-count { display: block; font-size: 11px; color: var(--text3); margin: 3px 0 0 22px; }
.sec-role-sees { font-size: 12.5px; color: var(--text2); line-height: 1.55; }
.sec-std { padding: 10px 0; border-top: 1px solid var(--border); }
.card-title + .sec-std { border-top: 0; padding-top: 0; }
.sec-std-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.sec-std-note { font-size: 12px; color: var(--text3); line-height: 1.55; margin-top: 3px; }
.sec-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text); padding: 7px 0; line-height: 1.5; }
.sec-check .ti { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.sec-review-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text2); margin: -6px 0 12px; flex-wrap: wrap; }
.sec-review { width: 100%; font-size: 13px; }
.sec-review th { text-align: left; font-size: 11px; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.sec-review td { padding: 10px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.sec-review tr:last-child td { border-bottom: 0; }
.sec-mono { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.sec-sev { font-weight: 700; font-size: 12px; }
.sec-limits { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.sec-limits li { font-size: 13px; color: var(--text2); line-height: 1.6; }
.sec-limits strong { color: var(--text); font-weight: 600; }
.sec-two { margin-bottom: 20px; }
.sec-two > .card { margin-bottom: 0; }
@media (max-width: 1200px) {
.sec-role-cell { width: 42%; }
}
@media (max-width: 920px) {
.sec-two { gap: 16px; }
.sec-two > .card { margin-bottom: 0; }
}
@media (max-width: 768px) {
.sec-layer { grid-template-columns: 38px 1fr; }
.sec-layer-n { display: none; }
.sec-review th:nth-child(2), .sec-review td:nth-child(2) { display: none; }
}
@media (max-width: 520px) {
.sec-btn { padding: 8px 11px; }
.sec-layer { grid-template-columns: 1fr; gap: 8px; }
.sec-layer-icon { width: 32px; height: 32px; font-size: 17px; }
.sec-table td { display: block; width: auto; }
.sec-role-cell { width: auto; padding-bottom: 2px !important; }
.sec-role-sees { padding-top: 0 !important; }
.sec-review thead { display: none; }
.sec-review tr { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.sec-review td { border: 0; padding: 0; }
.sec-review td:nth-child(2) { display: block; }
.sec-review td:nth-child(3) { grid-column: 1 / -1; }
.sec-briefing p { font-size: 13.5px; }
}
.sec-body > .card { margin-bottom: 20px; }
.sec-body > .sec-stats { margin-bottom: 20px; }
@media (max-width: 520px) {
.sec-body > .card, .sec-two { margin-bottom: 14px; }
}
/* Security Overview — request journey (animated with GSAP on this page only) */
.flow-card .card-title { gap: 10px; }
.flow-replay { padding: 5px 11px; font-size: 11px; text-transform: none; letter-spacing: 0; }
.flow-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.flow-chip { display: inline-flex; align-items: center; gap: 6px; }
.flow-chip .ti { font-size: 14px; }
.flow-stage { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 18px 14px 12px; overflow: hidden; }
.flow-stage::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold), rgba(255,174,0,.35) 55%, rgba(255,174,0,0)); }
.flow-svg { display: block; width: 100%; height: auto; font-family: inherit; }
.flow-narrow { max-width: 420px; margin: 0 auto; }
.flow-edge { fill: none; stroke: var(--border); stroke-width: 1.6; transition: stroke .3s; }
.flow-edge.lit { stroke: rgba(79,124,255,.7); }
.flow-edge.lit-stop { stroke: rgba(255,82,99,.75); stroke-dasharray: 4 4; }
.flow-box { fill: var(--bg2); stroke: var(--border); stroke-width: 1; transition: stroke .25s, fill .25s; }
.flow-node.is-pass .flow-box { stroke: rgba(45,217,138,.6); }
.flow-node.is-stop .flow-box { stroke: var(--red); fill: rgba(255,82,99,.08); }
.flow-t { font-size: 14px; font-weight: 600; fill: var(--text); }
.flow-s { font-size: 11.5px; fill: var(--text3); }
.flow-mark { opacity: 0; transition: opacity .2s; }
.flow-ok circle { fill: var(--green); }
.flow-no circle { fill: var(--red); }
.flow-mark path { fill: none; stroke: #0f1117; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flow-no path { stroke: #fff; }
.flow-node.is-pass .flow-ok, .flow-node.is-stop .flow-no { opacity: 1; }
.flow-dot { fill: var(--accent); filter: drop-shadow(0 0 5px rgba(79,124,255,.75)); }
.flow-dot.stop { fill: var(--red); filter: drop-shadow(0 0 5px rgba(255,82,99,.75)); }
.flow-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flow-step { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text2); line-height: 1.55; opacity: .35; transition: opacity .3s; }
.flow-step.on { opacity: 1; }
.flow-step strong { color: var(--text); font-weight: 600; }
.flow-step-ic { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; margin-top: 1px; }
.flow-step-ic.ok { background: rgba(45,217,138,.14); color: var(--green); }
.flow-step-ic.no { background: rgba(255,82,99,.14); color: var(--red); }
.flow-rep { font-family: var(--font-mono); font-size: 11px; color: var(--red); }
/* Security Overview — layers drawn as rings around the school data */
.sec-layers-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.sec-ring-box { position: sticky; top: 84px; }
.sec-ring-svg { display: block; width: 100%; max-width: 300px; margin: 0 auto; }
.sec-ring { fill: none; cursor: pointer; transition: opacity .2s, stroke-width .2s; }
.sec-ring.dim { opacity: .22; }
.sec-ring.hl { stroke-width: 9; }
.sec-ring-core { fill: var(--bg3); stroke: var(--gold); stroke-width: 1.5; }
.sec-ring-t { font-size: 12px; font-weight: 600; fill: var(--text); text-anchor: middle; }
.sec-ring-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 12px; font-size: 11px; color: var(--text3); }
.sec-ring-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.sec-ring-legend i.dash { background: none; border: 2px dashed; width: 10px; height: 10px; box-sizing: border-box; }
.sec-layer .sec-layer-title, .sec-layer .sec-layer-n { transition: color .15s; }
.sec-layer.hl .sec-layer-title, .sec-layer.hl .sec-layer-n { color: var(--accent); }
.sec-std-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
.sec-std-grid .sec-std { border-top: 1px solid var(--border); padding: 12px 0; }
.sec-std-grid .sec-std:nth-child(-n+3) { border-top: 0; padding-top: 0; }
@media (max-width: 1200px) {
.sec-layers-wrap { grid-template-columns: 240px 1fr; gap: 22px; }
.sec-std-grid { grid-template-columns: repeat(2, 1fr); }
.sec-std-grid .sec-std:nth-child(3) { border-top: 1px solid var(--border); padding-top: 12px; }
}
@media (max-width: 920px) {
.sec-layers-wrap { grid-template-columns: 1fr; }
.sec-ring-box { position: static; max-width: 280px; margin: 0 auto; }
}
@media (max-width: 768px) {
.sec-std-grid { grid-template-columns: 1fr; }
.sec-std-grid .sec-std:nth-child(2) { border-top: 1px solid var(--border); padding-top: 12px; }
}
@media (max-width: 520px) {
.flow-stage { padding: 14px 6px 8px; }
.flow-chip { font-size: 11px; }
.flow-card .card-title { flex-wrap: wrap; }
.sec-ring-box { max-width: 240px; }
}
/* Security Overview — honest limits, each labelled with its kind (D22) */
.sec-limits { list-style: none; padding-left: 0; gap: 12px; }
.sec-limits li { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.sec-limits li:last-child { border-bottom: 0; padding-bottom: 0; }
.sec-limit-tag { font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; }
/* Security Overview — what the system refused (security_events) */
.sig-rows { display: flex; flex-direction: column; gap: 10px; }
.sig-row { display: grid; grid-template-columns: minmax(200px, 280px) 1fr 150px; gap: 14px; align-items: center; }
.sig-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.sig-label .ti { font-size: 16px; flex-shrink: 0; }
.sig-track { height: 8px; background: var(--bg3); border-radius: 6px; overflow: hidden; }
.sig-bar { height: 100%; width: 0; border-radius: 6px; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.sig-num { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.sig-num span { display: block; font-size: 11px; font-weight: 400; color: var(--text3); }
@media (prefers-reduced-motion: reduce) { .sig-bar { transition: none; } }
@media (max-width: 768px) {
.sig-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
.sig-track { grid-column: 1 / -1; grid-row: 2; }
.sig-num { text-align: right; }
}
/* Two-step sign-in (SEC-007) */
.mfa-link { background: none; border: 0; padding: 0; color: var(--accent); font-size: 12px; cursor: pointer; text-align: left; }
.mfa-link:hover { text-decoration: underline; }
/* Trusted browsers (D34) */
.mfa-trust { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--text2); background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.mfa-trust input { margin-top: 2px; accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.mfa-trust strong { color: var(--text); font-weight: 600; }
.mfa-trust em { display: block; font-style: normal; color: var(--amber); margin-top: 2px; }
.mfa-trusted { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mfa-trusted-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text3); }
.mfa-trusted-empty { font-size: 12.5px; color: var(--text3); line-height: 1.55; }
.mfa-trusted-row { display: flex; align-items: center; gap: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; }
.mfa-trusted-row > i { font-size: 18px; color: var(--accent); }
.mfa-trusted-info { flex: 1; min-width: 0; font-size: 13px; color: var(--text); }
.mfa-trusted-info small { display: block; font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.mfa-trusted-this { font-size: 10.5px; font-weight: 600; color: var(--green); background: rgba(45,217,138,.12); border-radius: 5px; padding: 1px 6px; margin-left: 4px; }
.mfa-trusted-forget { background: rgba(255,82,99,.08); color: var(--red); border: 1px solid rgba(255,82,99,.22); border-radius: 7px; padding: 5px 10px; font-size: 11.5px; font-family: var(--font); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
.mfa-trusted-forget:hover { background: rgba(255,82,99,.16); }
.mfa-trusted-forget:disabled { opacity: .5; cursor: default; }
.mfa-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.55; color: var(--text2); background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.mfa-note .ti { font-size: 16px; flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.mfa-note.amber { background: rgba(245,166,35,.1); border-color: rgba(245,166,35,.25); }
.mfa-note.amber .ti { color: var(--amber); }
.mfa-note.green { background: rgba(45,217,138,.1); border-color: rgba(45,217,138,.25); }
.mfa-note.green .ti { color: var(--green); }
.mfa-setup { display: flex; flex-direction: column; gap: 14px; }
.mfa-steps { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text2); }
.mfa-steps span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(79,124,255,.14); color: var(--accent); font-size: 11px; font-weight: 700; margin-right: 8px; }
.mfa-qr { align-self: center; width: 200px; height: 200px; background: #fff; border-radius: 10px; padding: 6px; }
.mfa-qr svg { width: 100%; height: 100%; display: block; }
.mfa-key { display: flex; flex-direction: column; gap: 4px; }
.mfa-key label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .4px; }
.mfa-key code { font-family: var(--font-mono); font-size: 13px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; word-break: break-all; user-select: all; }
.mfa-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mfa-codes code { font-family: var(--font-mono); font-size: 13px; text-align: center; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 7px 4px; user-select: all; }
@media (max-width: 520px) {
.mfa-qr { width: 180px; height: 180px; }
.mfa-codes { grid-template-columns: 1fr; }
}
/* Platform Admin password recovery (D31) */
.auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-text-btn { appearance: none; border: 0; background: transparent; color: var(--accent); padding: 0; font: inherit; font-size: 11.5px; cursor: pointer; }
.auth-text-btn:hover { text-decoration: underline; }
.auth-text-btn:focus-visible, .recovery-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.recovery-shell { width: 100%; display: flex; justify-content: center; padding: 20px; }
.recovery-box { width: min(440px, 100%); }
.recovery-mark, .recovery-status { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: rgba(79,124,255,.12); color: var(--accent); font-size: 24px; }
.recovery-status.success { background: rgba(45,217,138,.12); color: var(--green); }
.recovery-kicker { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 7px; }
.recovery-title { color: var(--text); font-size: 22px; line-height: 1.25; font-weight: 600; margin: 0 0 9px; }
.recovery-copy { color: var(--text2); font-size: 13px; line-height: 1.6; margin: 0 0 20px; }
.recovery-field { margin-bottom: 15px; }
.recovery-primary { width: 100%; justify-content: center; min-height: 44px; }
.recovery-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 17px; padding: 2px 0; border: 0; background: transparent; color: var(--text2); font-family: var(--font); font-size: 12.5px; cursor: pointer; }
.recovery-back:hover { color: var(--text); }
.recovery-fallback, .recovery-trust { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg3); color: var(--text2); font-size: 12px; line-height: 1.5; padding: 11px 12px; margin-top: 18px; }
.recovery-fallback i, .recovery-trust i { color: var(--amber); font-size: 16px; flex: 0 0 auto; margin-top: 1px; }
.recovery-fallback div { display: flex; flex-direction: column; gap: 2px; }
.recovery-fallback strong { color: var(--text); font-weight: 600; }
.recovery-trust { margin-top: 20px; color: var(--text3); }
.recovery-trust i { color: var(--green); }
.recovery-code-input { font-family: var(--font-mono); font-size: 18px; letter-spacing: 4px; text-align: center; }
.recovery-hint { color: var(--text3); font-size: 11.5px; line-height: 1.5; margin-top: 6px; }
.recovery-toggle { display: inline-flex; align-items: center; gap: 5px; margin: -2px 0 16px; font-size: 12.5px; }
.mfa-confirm { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--text); cursor: pointer; }
.mfa-confirm input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent); }
@media (max-width: 520px) {
.recovery-shell { padding: 12px; }
.recovery-box { padding: 20px 18px; }
.recovery-title { font-size: 20px; }
}
/* Security Overview — incidents (D5 b, D6) */
.inc-list { display: flex; flex-direction: column; }
.inc-row { padding: 12px 0; border-top: 1px solid var(--border); }
.inc-row:first-child { border-top: 0; padding-top: 0; }
.inc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inc-rule { font-size: 13.5px; font-weight: 600; color: var(--text); }
.inc-status { margin-left: auto; font-size: 11px; color: var(--text3); }
.inc-status.open { color: var(--red); font-weight: 600; }
.inc-who { font-size: 12.5px; color: var(--text2); margin-top: 5px; display: flex; align-items: center; gap: 6px; }
.inc-who .ti { color: var(--text3); }
.inc-why { font-size: 12px; color: var(--text3); margin-top: 3px; line-height: 1.5; }
.inc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.inc-actions .sec-btn { padding: 5px 10px; font-size: 11.5px; }
.inc-close { background: var(--bg3); color: var(--text2); border-color: var(--border); }
.inc-evidence { margin-top: 8px; }
.inc-ev-table { width: 100%; font-size: 12px; }
.inc-ev-table th { text-align: left; font-size: 10.5px; color: var(--text3); text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.inc-ev-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--text2); }
.inc-empty { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); }
.inc-empty .ti { color: var(--green); font-size: 18px; }
@media (max-width: 520px) { .inc-status { margin-left: 0; width: 100%; } .inc-ev-table th:nth-child(4), .inc-ev-table td:nth-child(4) { display: none; } }
/* ── Guided tour (js/components/tour.js, DECISIONS.md D27) ─────────────────
Spotlight + bubble. Same surface as .tooltip-card; tinted buttons; no bounce. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tour-root { position: fixed; inset: 0; z-index: 100000; pointer-events: none; }
.tour-veil { position: absolute; inset: 0; pointer-events: auto; background: transparent; }
.tour-centered .tour-veil { background: rgba(8,10,16,0.62); }
.tour-spot {
position: fixed; border-radius: 10px; pointer-events: none;
box-shadow: 0 0 0 9999px rgba(8,10,16,0.62), 0 0 0 2px var(--accent);
transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease, opacity .2s ease;
}
.tour-bubble {
position: fixed; pointer-events: auto; outline: none;
background: var(--bg2); border: 1px solid var(--border2); border-radius: 12px;
padding: 16px 18px 14px; font-family: var(--font);
box-shadow: 0 14px 44px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.35);
animation: tourIn .2s ease;
transition: left .25s ease, top .25s ease;
}
@keyframes tourIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tour-still .tour-spot, .tour-still .tour-bubble { transition: none; animation: none; }
.tour-arrow { position: absolute; width: 12px; height: 12px; background: var(--bg2); transform: rotate(45deg); display: none; }
.tour-arrow.right { left: -7px; border-left: 1px solid var(--border2); border-bottom: 1px solid var(--border2); }
.tour-arrow.left { right: -7px; border-right: 1px solid var(--border2); border-top: 1px solid var(--border2); }
.tour-arrow.bottom { top: -7px; border-left: 1px solid var(--border2); border-top: 1px solid var(--border2); }
.tour-arrow.top { bottom: -7px; border-right: 1px solid var(--border2); border-bottom: 1px solid var(--border2); }
.tour-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tour-count { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); }
.tour-x { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 16px; padding: 2px; border-radius: 6px; line-height: 1; }
.tour-x:hover, .tour-x:focus-visible { color: var(--text); background: rgba(255,255,255,0.06); }
.tour-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; line-height: 1.3; }
.tour-body { font-size: 13px; color: var(--text2); line-height: 1.6; }
.tour-body b { color: var(--text); font-weight: 600; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.tour-nav { display: flex; gap: 8px; margin-left: auto; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border2); transition: background .15s; }
.tour-dots span.on { background: var(--accent); }
.tour-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 12.5px; font-weight: 500;
font-family: var(--font); border-radius: 8px; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.tour-btn i { font-size: 14px; }
.tour-btn.primary { background: rgba(79,124,255,.14); color: var(--accent); border: 1px solid rgba(79,124,255,.32); }
.tour-btn.primary:hover, .tour-btn.primary:focus-visible { background: rgba(79,124,255,.24); }
.tour-btn.ghost { background: transparent; color: var(--text2); border: 1px solid var(--border); }
.tour-btn.ghost:hover, .tour-btn.ghost:focus-visible { color: var(--text); border-color: var(--border2); }
.tour-btn:focus-visible, .tour-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-welcome-icon {
width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
background: rgba(155,125,255,.12); color: var(--purple); font-size: 22px; margin-bottom: 12px;
}
.tour-foot-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text3); }
.tour-foot-note b { color: var(--text2); font-weight: 600; }
.tour-page-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 12.5px; font-family: var(--font);
background: rgba(155,125,255,.12); color: var(--purple); border: 1px solid rgba(155,125,255,.28); border-radius: 8px; cursor: pointer; transition: all .15s;
}
.tour-page-btn:hover, .tour-page-btn:focus-visible { background: rgba(155,125,255,.2); }
.tour-page-btn i { font-size: 15px; }
@media (max-width: 520px) {
.tour-bubble { padding: 14px 14px 12px; }
.tour-title { font-size: 14px; }
.tour-body { font-size: 12.5px; }
.tour-btn { padding: 8px 12px; }
}
/* How It Works — joining and the fault chain, drawn and written (D35).
Reuses the Security Overview's .flow-* diagram and .sec-guide-item . */
.wf-tabs { margin: 0 0 16px; flex-wrap: wrap; }
.wf-tabs .tab-btn { display: inline-flex; align-items: center; font-size: 13px; padding: 9px 16px; }
.wf-card { margin-bottom: 16px; }
.wf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.wf-howto-list { display: flex; flex-direction: column; gap: 8px; }
.wf-howto summary { flex-wrap: wrap; }
.wf-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg4, var(--bg2)); border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text2); margin-right: 8px; vertical-align: 1px; }
.wf-howto summary .wf-who { flex: 0 0 auto; }
.wf-who { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 20px; white-space: nowrap; letter-spacing: .2px; }
.wf-howto-body { padding: 0 14px 12px 41px; font-size: 13px; line-height: 1.65; color: var(--text2); }
.wf-howto-body ol { margin: 0 0 8px; padding-left: 18px; }
.wf-howto-body li { margin-bottom: 4px; }
.wf-howto-body p { margin: 0 0 6px; }
.wf-howto-body code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text3); }
.wf-ui { color: var(--text); font-weight: 600; background: rgba(79,124,255,.10); border: 1px solid rgba(79,124,255,.2); border-radius: 5px; padding: 0 5px; white-space: nowrap; }
.flow-step .wf-ui { font-weight: 600; }
.wf-facts { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.wf-fact-l { padding: 10px 12px; vertical-align: top; width: 42%; }
.wf-fact-l span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text3); }
.wf-fact-l .ti { font-size: 13px; }
.wf-fact-v { padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.5; }
.wf-fact-sep { padding: 0; height: 1px; background: var(--border); }
@media (max-width: 1200px) {
.wf-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 920px) {
.wf-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.wf-tabs .tab-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 520px) {
.wf-tabs .tab-btn { font-size: 12px; padding: 8px 10px; }
.wf-howto-body { padding: 0 12px 12px 14px; }
.wf-ui { white-space: normal; }
.wf-fact-l { width: 40%; }
}
/* ============ Feature Switchboard (pages/features.js) ============ */
/* Mission-control switchboard: state rail, sliding 3-state switch, live pulse. */
.fs-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fs-hero-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%); box-shadow: 0 6px 20px rgba(79,124,255,0.35), inset 0 1px 0 rgba(255,255,255,0.25); flex-shrink: 0; }
.fs-hero-title { font-family: var(--font-brand); font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }
.fs-hero-sub { font-size: 13px; color: var(--text3); margin-top: 2px; }
.fs-hero-stats { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.fs-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--border); color: var(--text2); }
.fs-stat i { font-size: 13px; }
.fs-stat.on { color: var(--green); border-color: rgba(45,217,138,0.3); }
.fs-stat.pilot { color: var(--teal); border-color: rgba(54,217,204,0.3); }
.fs-stat.off { color: var(--text3); }
/* The ladder: off → pilot → on, as a visual flight path instead of a paragraph. */
.fs-ladder { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; }
.fs-step { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text2); padding: 5px 10px; border-radius: 999px; }
.fs-step i { font-size: 14px; }
.fs-step.s-off { color: var(--red); }
.fs-step.s-pilot { color: var(--teal); }
.fs-step.s-on { color: var(--green); }
.fs-step small { font-weight: 500; color: var(--text3); }
.fs-arrow { color: var(--text3); font-size: 12px; opacity: .7; }
.fs-ladder-note { width: 100%; margin-top: 8px; font-size: 12px; color: var(--text3); line-height: 1.5; }
/* One card per feature. The left rail carries the state colour. */
.fs-card { position: relative; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px 20px 26px; margin-bottom: 14px; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.fs-card:hover { transform: translateY(-2px); border-color: var(--border2); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.fs-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--text3); opacity: .6; }
.fs-card[data-state="on"]::before { background: linear-gradient(180deg, var(--green), var(--green2)); opacity: 1; }
.fs-card[data-state="pilot"]::before { background: linear-gradient(180deg, var(--teal), #1f9e94); opacity: 1; }
.fs-card[data-state="off"]::before { background: linear-gradient(180deg, var(--red), var(--red2)); opacity: .9; }
.fs-card.locked::before { background: linear-gradient(180deg, var(--amber), var(--amber2)); opacity: 1; }
.fs-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.fs-id { flex: 1; min-width: 220px; }
.fs-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fs-name { font-family: var(--font-brand); font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }
.fs-key { font-family: var(--font-mono); font-size: 11px; color: var(--text3); background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }
.fs-desc { font-size: 13px; color: var(--text2); margin-top: 5px; line-height: 1.55; max-width: 640px; }
/* Status pill with a pulse when the feature is live for someone. */
.fs-status { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }
.fs-status .fs-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; position: relative; }
.fs-status.on { background: rgba(45,217,138,0.14); color: var(--green); }
.fs-status.on .fs-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--green); animation: fs-pulse 1.8s ease-out infinite; }
.fs-status.pilot { background: rgba(54,217,204,0.12); color: var(--teal); }
.fs-status.pilot .fs-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--teal); animation: fs-pulse 1.8s ease-out infinite; }
.fs-status.off { background: rgba(255,82,99,0.12); color: var(--red); }
.fs-status.locked { background: rgba(245,166,35,0.14); color: var(--amber); }
@keyframes fs-pulse { 0% { transform: scale(.5); opacity: .9; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
/* Audience + risk rows */
.fs-meta { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.fs-reach { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text); line-height: 1.5; }
.fs-reach-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--bg3); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.fs-reach small { display: block; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; margin-bottom: 1px; }
.fs-risk { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text3); line-height: 1.5; border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 2px; }
.fs-risk i { color: var(--amber); margin-top: 1px; }
/* The 3-state switch — a real switchboard toggle with a sliding thumb. */
.fs-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fs-switch { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bg3); border: 1px solid var(--border2); border-radius: 999px; padding: 4px; min-width: 240px; }
.fs-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; transition: transform .28s cubic-bezier(.34,1.3,.5,1), background .28s ease, box-shadow .28s ease; }
.fs-switch[data-state="off"] .fs-thumb { transform: translateX(0); background: rgba(255,82,99,0.22); box-shadow: inset 0 0 0 1px rgba(255,82,99,0.45); }
.fs-switch[data-state="pilot"] .fs-thumb { transform: translateX(100%); background: rgba(54,217,204,0.18); box-shadow: inset 0 0 0 1px rgba(54,217,204,0.45); }
.fs-switch[data-state="on"] .fs-thumb { transform: translateX(200%); background: rgba(45,217,138,0.2); box-shadow: inset 0 0 0 1px rgba(45,217,138,0.5); }
.fs-seg { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--text3); background: none; border: none; border-radius: 999px; cursor: pointer; transition: color .2s; font-family: var(--font); }
.fs-seg i { font-size: 13px; }
.fs-seg:hover { color: var(--text2); }
.fs-switch[data-state="off"] .fs-seg[data-s="off"] { color: var(--red); }
.fs-switch[data-state="pilot"] .fs-seg[data-s="pilot"] { color: var(--teal); }
.fs-switch[data-state="on"] .fs-seg[data-s="on"] { color: var(--green); }
.fs-switch.locked { opacity: .45; pointer-events: none; }
.fs-pilot-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text2); background: var(--bg3); border: 1px solid var(--border2); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: all .18s; font-family: var(--font); }
.fs-pilot-btn:hover { color: var(--accent); border-color: rgba(79,124,255,0.45); }
.fs-pilot-btn .ti-chevron-down { transition: transform .25s; }
.fs-pilot-btn.open .ti-chevron-down { transform: rotate(180deg); }
/* Server-setting lock banner */
.fs-lock { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--amber); background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.25); border-radius: 10px; padding: 11px 14px; }
.fs-lock i { margin-top: 1px; }
.fs-lock code { font-family: var(--font-mono); font-size: 11px; background: rgba(245,166,35,0.12); padding: 1px 6px; border-radius: 5px; }
/* Pilot panel — opens with a slide. */
.fs-panel { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; animation: fs-slide .3s ease; }
@keyframes fs-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.fs-panel-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text3); background: var(--bg3); border-radius: 8px; padding: 9px 12px; margin-bottom: 16px; }
.fs-panel-hint i { color: var(--teal); }
.fs-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; }
.fs-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fs-chips.scroll { max-height: 170px; overflow-y: auto; padding-right: 4px; }
.fs-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text2); background: var(--bg3); border: 1px solid var(--border2); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: all .15s; user-select: none; }
.fs-chip:hover { border-color: var(--accent); color: var(--text); }
.fs-chip input { display: none; }
.fs-chip .fs-check { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--text3); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: transparent; transition: all .15s; flex-shrink: 0; }
.fs-chip.on { background: rgba(54,217,204,0.12); border-color: rgba(54,217,204,0.5); color: var(--teal); }
.fs-chip.on .fs-check { background: var(--teal); border-color: var(--teal); color: #06302b; }
.fs-users { display: flex; align-items: center; gap: 10px; }
.fs-users i { color: var(--text3); }
.fs-users input { flex: 1; max-width: 360px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px; color: var(--text); font-family: var(--font-mono); font-size: 13px; padding: 9px 12px; transition: border-color .15s; }
.fs-users input:focus { outline: none; border-color: var(--accent); }
.fs-panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
/* Stagger the cards in */
.fs-card.reveal.visible { transition: opacity .4s ease, transform .4s ease, border-color .2s ease, box-shadow .2s ease; }
@media (max-width: 920px) {
.fs-controls { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
.fs-switch { min-width: 220px; flex: 1; max-width: 340px; }
.fs-hero-stats { margin-left: 0; }
}
@media (max-width: 520px) {
.fs-hero-icon { width: 40px; height: 40px; font-size: 20px; border-radius: 11px; }
.fs-hero-title { font-size: 19px; }
.fs-card { padding: 16px 16px 16px 20px; }
.fs-controls { flex-direction: column; align-items: stretch; }
.fs-switch { max-width: none; min-width: 0; width: 100%; }
.fs-pilot-btn { justify-content: center; }
.fs-users input { max-width: none; }
.fs-ladder { padding: 12px 14px; }
}
/* Escalation alerts card on the switchboard */
.fs-alerts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px; }
.fs-chip.static { cursor: default; }
.fs-chip.static:hover { border-color: var(--border2); color: var(--text2); }
.fs-chip small { font-weight: 500; }
.fs-chip-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 3px; opacity: .7; }
.fs-chip-x:hover { opacity: 1; color: var(--red); }
.fs-alerts-add { display: flex; gap: 8px; margin-top: 10px; }
.fs-alerts-add input { flex: 1; min-width: 0; background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px; color: var(--text); padding: 8px 12px; font-size: 13px; font-family: var(--font); }
.fs-alerts-add input:focus { outline: none; border-color: var(--accent); }
.fs-alerts-foot { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; font-size: 12px; color: var(--text3); display: flex; gap: 18px; flex-wrap: wrap; line-height: 1.5; }
@media (max-width: 920px) {
.fs-alerts-grid { grid-template-columns: 1fr; }
}
/* The assistant's answer, reproduced inside a fault. It arrives as Markdown, so
it is rendered rather than printed — "**Check the power light**" used to reach
head office with the asterisks showing, in one unbroken block (2026-09-30).
Scoped tightly: these tags only ever appear inside a rendered fault story. */
.fault-story p { margin: 0 0 9px; font-size: 13px; line-height: 1.65; color: var(--text2); }
.fault-story p:last-child { margin-bottom: 0; }
.fault-story strong { color: var(--text); font-weight: 600; }
.fault-story ol, .fault-story ul { margin: 0 0 10px; padding-left: 20px; }
.fault-story li { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--text2); }
.fault-story li::marker { color: var(--text3); }
.fault-story code { background: var(--bg); border-radius: 4px; padding: 1px 5px; font-family: var(--font-mono); font-size: 12px; }
.fault-story h1, .fault-story h2, .fault-story h3, .fault-story h4 {
margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--text);
}
.fault-story blockquote { margin: 0 0 10px; padding-left: 10px; border-left: 2px solid var(--border); color: var(--text3); }
/* The platform admin's Backup button. Labelled and tinted on purpose: an icon
alone beside the bell read as one more icon, and a backup must not be missed. */
/* Teal in every state — the owner's choice. A stale or failing backup shows on
the dot and in the tooltip, never by recolouring the whole button. */
.topbar-backup-btn {
--bk: 54,217,204;
display: inline-flex; align-items: center; gap: 6px; position: relative;
height: 34px; padding: 0 12px; border-radius: 8px; cursor: pointer;
background: rgba(var(--bk), .12); color: rgb(var(--bk)); border: 1px solid rgba(var(--bk), .28);
font: 600 12.5px var(--font);
transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.topbar-backup-btn i { font-size: 17px; transition: transform .15s; }
.topbar-backup-btn:hover {
background: rgba(var(--bk), .2); border-color: rgba(var(--bk), .55);
box-shadow: 0 4px 14px rgba(var(--bk), .22); transform: translateY(-1px);
}
.topbar-backup-btn:hover i { transform: translateY(-1px); }
.topbar-backup-btn:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(var(--bk), .2); background: rgba(var(--bk), .26); }
.topbar-backup-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--bk), .35); }
.topbar-backup-btn.nav-hidden { display: none; }
@media (prefers-reduced-motion: reduce) {
.topbar-backup-btn, .topbar-backup-btn i { transition: none; }
.topbar-backup-btn:hover, .topbar-backup-btn:hover i { transform: none; }
}
/* "Get the app": the Backup button's look, for everyone. `hidden` must win over
the inline-flex above, or the attribute app.js removes would never hide it. */
.topbar-app-btn { text-decoration: none; }
.topbar-app-btn[hidden], .login-app-link[hidden] { display: none; }
/* Sign In and the app link share one row (owner, 2026-10-01: the sign-in page
scrolled). Sign In grows; the link keeps its natural width and the row's
height. On a very narrow phone the link wraps beneath rather than squeezing. */
.login-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.login-actions .login-signin { flex: 1 1 150px; justify-content: center; padding: 12px; }
.login-app-link {
flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px;
border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--teal); white-space: nowrap;
background: rgba(54,217,204,.10); border: 1px solid rgba(54,217,204,.24); transition: background .15s;
}
@media (max-width: 340px) { .login-app-link { flex: 1 1 100%; padding: 11px 16px; } }
.login-app-link:hover { background: rgba(54,217,204,.18); }
.login-app-link i { font-size: 17px; }
/* The Resource Library's offline button while it saves (manuals.js offlineButton). */
.ml-spin { display: inline-block; animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ml-spin { animation: none; } }
.topbar-btn-dot {
position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
background: var(--amber); box-shadow: 0 0 0 2px var(--bg2);
}
.topbar-btn-dot.red { background: var(--red); }
@media (max-width: 520px) {
/* The topbar is crowded on a phone: keep the button, drop the word. */
.topbar-backup-btn { padding: 0; width: 34px; justify-content: center; }
.topbar-backup-label { display: none; }
}
/* ── Identity: who is signed in, top and foot of the sidebar (components/identity.js).
Layout studied from Leora's branded sidebar. Colour: "Midnight Teal" (2026-09-30).
Leora's saturated blues were made for white; on a dark UI saturated colour
halates and tires the eye, so this is one desaturated accent — teal, in
tints — over slate surfaces, with elevation shown by lighter surfaces and
hairline edges rather than shadows. Every text colour here measures 9:1 or
better on its surface. Never the brand gold. ── */
@property --id-angle { syntax: ""; initial-value: 0deg; inherits: false; }
@keyframes id-spin { to { --id-angle: 360deg; } }
@keyframes id-shine { 0%, 62% { transform: translateX(-220%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes id-tick { 0%, 18% { transform: translateX(0); } 45%, 60% { transform: translateX(var(--id-over)); } 88%, 100% { transform: translateX(0); } }
@keyframes id-rot { to { transform: rotate(360deg); } }
.id-card, .id-foot {
--id-t100: #C9F5F0; /* highlights */
--id-t200: #9BEBE2; /* chip text, 12:1 */
--id-t300: #6FDDD2; /* position, 10:1 */
--id-teal: #36d9cc; /* the accent itself */
--id-t600: #1F9D94;
--id-surface: #1A1F2C;/* one step above the sidebar */
}
/* Two parts, as Leora draws it — a banner, a body, the face on the edge. */
.id-card {
border-radius: 12px; overflow: hidden; flex-shrink: 0; margin-bottom: 8px;
background: var(--id-surface); border: 1px solid rgba(255,255,255,.06);
box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.id-banner {
height: 50px; position: relative; overflow: hidden;
background:
radial-gradient(120% 150% at 100% 0%, rgba(54,217,204,.32) 0%, rgba(54,217,204,0) 58%),
linear-gradient(135deg, #0F3B3A 0%, #11272F 52%, #151C2A 100%);
border-bottom: 1px solid rgba(111,221,210,.22);
}
.id-shine {
position: absolute; inset: 0; width: 55%;
background: linear-gradient(90deg, transparent, rgba(201,245,240,.10), transparent);
animation: id-shine 9s ease-in-out infinite;
}
/* Two fine rings instead of a filled blob: quieter, and it reads as crafted. */
.id-orb {
position: absolute; top: -26px; right: -20px; width: 78px; height: 78px; border-radius: 50%;
border: 1px solid rgba(155,235,226,.20); box-shadow: 0 0 0 10px rgba(155,235,226,.05);
}
.id-body { padding: 0 12px 12px; margin-top: -24px; position: relative; }
/* The ring: a comet of teal tints turning slowly, fading to almost nothing. */
.id-ring {
width: 46px; height: 46px; border-radius: 50%; padding: 2px; margin-bottom: 7px;
background: conic-gradient(from var(--id-angle), var(--id-t100), var(--id-teal) 30%, var(--id-t600) 60%, rgba(31,157,148,.12) 85%, var(--id-t100));
animation: id-spin 6s linear infinite;
box-shadow: 0 0 0 3px var(--id-surface);
}
.id-ring-sm { width: 36px; height: 36px; margin: 0; flex-shrink: 0; box-shadow: 0 0 0 2px var(--id-surface); }
.id-face { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #141824; }
.id-face img, .id-face svg { width: 100%; height: 100%; display: block; object-fit: cover; }
/* The clip that holds a moving line: it gives way, never the layout. */
.id-clip { flex: 1; min-width: 0; overflow: hidden; }
.id-tick { display: inline-block; white-space: nowrap; }
.id-tick.ticking { animation: id-tick 11s linear infinite; }
.id-clip:has(.ticking) {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 10px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 10px), transparent);
}
/* Name, then Verified right after it — Leora's order. Two names only, never
moving. The chip folds to its sparkle (identity.js measure) when the pair
would not fit, so it is never the reason a name is cut. */
.id-namerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Verified holds the right edge, so the name has breathing room beside it. */
.id-namerow .id-verified { margin-left: auto; }
.id-name {
flex: 0 1 auto; min-width: 0;
font-size: 13px; font-weight: 700; color: #EEF1F6; line-height: 1.3; letter-spacing: -.1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.id-verified.compact { width: 20px; padding: 0; justify-content: center; gap: 0; }
.id-verified.compact span { display: none; }
.id-verified.compact .id-spark { width: 12px; height: 12px; }
.id-role {
margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--id-t300); letter-spacing: .2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.id-place-row { margin-top: 1px; }
.id-place { font-size: 11px; font-weight: 500; color: var(--text2); }
.id-verified {
flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px 0 5px;
border-radius: 20px; font-size: 10.5px; font-weight: 600; letter-spacing: .2px; position: relative; overflow: hidden;
color: var(--id-t200);
background: rgba(54,217,204,.10); border: 1px solid rgba(54,217,204,.24);
}
.id-verified::after {
content: ""; position: absolute; inset: 0; width: 50%;
background: linear-gradient(90deg, transparent, rgba(201,245,240,.14), transparent);
animation: id-shine 7s ease-in-out infinite;
}
.id-spark { width: 12px; height: 12px; flex-shrink: 0; animation: id-rot 10s linear infinite; position: relative; z-index: 1; }
.id-verified span { position: relative; z-index: 1; }
/* Footer: the same ring, smaller; the position as a chip that truncates. */
.id-foot {
display: flex; align-items: center; gap: 10px; padding: 9px 10px; min-width: 0;
background: var(--id-surface); border: 1px solid rgba(255,255,255,.05); border-radius: 10px;
}
.id-foot-text { flex: 1; min-width: 0; }
.id-foot-name { font-size: 12.5px; font-weight: 600; color: #EEF1F6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-chip {
display: inline-block; max-width: 100%; margin-top: 3px; padding: 1px 7px; border-radius: 20px;
font-size: 9.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top;
color: var(--id-t300); background: rgba(54,217,204,.09); border: 1px solid rgba(54,217,204,.22);
}
/* A short window (a 1366x768 laptop is ~630px inside the browser): the card
shrinks but keeps its two parts. Hiding the banner here once made the card
read as one flat block on exactly the screens most people have. */
@media (max-height: 720px) {
.id-banner { height: 36px; }
.id-body { margin-top: -18px; padding-bottom: 10px; }
.id-ring:not(.id-ring-sm) { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
.id-ring, .id-shine, .id-verified::after, .id-spark, .id-tick.ticking { animation: none; }
.id-tick { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
/* iPhone home-screen app: the sign-in and registration pages stay clear of the notch and the
home bar. max() leaves every other device exactly as it was (the insets are 0 there). */
.login-container, .reg-page { padding-top: max(12px, var(--safe-top)); padding-bottom: max(12px, var(--safe-bottom)); }
@media (min-width: 521px) { .login-container, .reg-page { padding-top: max(20px, var(--safe-top)); padding-bottom: max(20px, var(--safe-bottom)); } }