:root{
  --ink:#17181c;--muted:#68696f;--faint:#8a8b90;
  --line:#e9e9e7;--line-strong:#dcdcda;
  --bg:#ffffff;--chrome:#f7f7f5;--panel:#ffffff;--panel-alt:#fafaf9;
  --accent:#4b4de6;--accent-hover:#3f42c9;--accent-soft:#eeeefc;--accent-ring:rgba(75,77,230,.22);
  --green:#0f7a45;--green-soft:#e6f4ec;
  --amber:#9a5b12;--amber-soft:#fbf0df;
  --red:#a3231f;--red-hover:#8a1c19;--red-soft:#fbe9e8;
  --avatar:#3f9e6b;
  --shadow:0 12px 40px rgba(23,24,28,.12);--shadow-sm:0 1px 2px rgba(23,24,28,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.config-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.config-tab.active{background:var(--ink,#17181c);color:#fff}.config-json{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;font-size:12px;max-height:360px;overflow:auto}.config-diagnostic{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}.config-summary{margin-bottom:18px}.config-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.template-body-preview{white-space:pre-wrap;background:#fff;border:1px solid #e7e8eb;border-radius:8px;padding:12px}.template-html-preview{display:block;width:100%;min-height:260px;margin-top:12px;background:#fff;border:1px solid #e7e8eb;border-radius:8px}.schema-editor.config-editor{min-height:300px}
.prompt-test-panel{max-width:1100px}.prompt-editor{min-height:240px!important}.prompt-input-editor{min-height:300px!important}.prompt-test-output{margin-top:18px}.prompt-test-output details{margin-top:14px}.prompt-test-output summary{cursor:pointer;font-weight:600}
.prompt-application-combobox{position:relative}.prompt-application-options{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow:auto;background:var(--bg);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--shadow);padding:4px}
.prompt-application-options button{display:block;width:100%;border:0;border-radius:6px;background:transparent;color:var(--ink);padding:9px 10px;text-align:left;font:inherit;cursor:pointer}
.prompt-application-options button:hover,.prompt-application-options button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.prompt-application-options small{display:block;margin-top:2px;color:var(--muted)}.prompt-application-empty{margin:0;padding:10px;color:var(--muted)}
.prompt-input-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.prompt-input-heading>.button{flex:none}

/* Shell: stacked account bar + top nav + content */
.shell{min-height:100vh;display:flex;flex-direction:column}
.shell.hidden{display:none!important}

/* Account bar */
.account-bar{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 28px;background:var(--chrome);border-bottom:1px solid var(--line)}
.account-left{display:flex;align-items:center;gap:12px;min-width:0}
.waffle{display:grid;place-items:center;color:var(--faint)}
.workspace{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-pill{flex:none;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg);
  color:var(--muted);font-size:11px;font-weight:600;padding:2px 8px}
.account-right{display:flex;align-items:center;gap:14px}
.account-help{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--muted);font-size:13px;font-weight:600;cursor:default}
.account-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--avatar);color:#fff;font-size:13px;font-weight:700}

/* Primary horizontal nav */
.topnav{background:var(--chrome);border-bottom:1px solid var(--line)}
.topnav-inner{display:flex;gap:4px;padding:0 20px;max-width:1320px;margin:0 auto}
.nav-item{position:relative;display:inline-flex;align-items:center;gap:8px;
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font:600 14px/1 Inter,sans-serif;padding:14px 12px;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.nav-item svg{width:17px;height:17px}
.nav-item:hover{color:var(--ink)}
.nav-item.active{color:var(--accent);border-bottom-color:var(--accent)}

/* Content */
main{flex:1;min-width:0;width:100%;max-width:1320px;margin:0 auto;padding:0 28px 56px}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:30px 0 22px}
.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.eyebrow{margin:0;color:var(--faint);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.topbar h1{margin:4px 0 0;font:700 28px/1.15 Inter,sans-serif;letter-spacing:-.01em}
.view{display:none}
.view.active{display:block}

/* Buttons */
.button{border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);
  border-radius:8px;padding:8px 14px;font:600 13px/1 Inter,sans-serif;cursor:pointer;
  transition:background .12s,border-color .12s,box-shadow .12s}
a.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.button:hover{background:var(--panel-alt);border-color:var(--faint)}
.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.button.danger{background:var(--red);border-color:var(--red);color:#fff}
.button.danger:hover{background:var(--red-hover);border-color:var(--red-hover)}
.button.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.button.ghost:hover{background:var(--panel-alt);color:var(--ink)}
.button.block{width:100%;padding:10px 14px}
.button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.button:disabled,
.button:disabled:hover{background:#f1f1ef;border-color:var(--line);color:#a7a7a3;box-shadow:none;cursor:not-allowed;opacity:.72}
.link-button{border:0;background:transparent;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:0}
.link-button:hover{color:var(--accent-hover)}
.volunteer-name-link{display:block;text-align:left;font-weight:700}

/* Two-column workspace (Volunteers) */
.workspace-layout{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start}
.subnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:20px}
.subnav-label{margin:0 0 6px;padding:0 10px;color:var(--faint);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.subnav-item{border:0;background:transparent;color:var(--muted);text-align:left;cursor:pointer;
  font:600 13px/1.2 Inter,sans-serif;padding:8px 10px;border-radius:7px}
.subnav-item:hover{background:var(--panel-alt);color:var(--ink)}
.subnav-item.active{background:var(--accent-soft);color:var(--accent)}
.workspace-main{min-width:0}

/* Metrics */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:15px 16px}
.metric small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:700}
.metric strong{display:block;margin-top:6px;font:700 26px/1 Inter,sans-serif;letter-spacing:-.01em}
.metric em{font-style:normal;color:var(--faint);font-size:11px}

/* Inputs */
input,select,textarea{border:1px solid var(--line-strong);border-radius:8px;background:var(--bg);
  color:var(--ink);padding:9px 11px;font:inherit;outline:none;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
input::placeholder{color:var(--faint)}

/* Panel + filters */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden}
.filters{padding:14px;display:flex;gap:10px;border-bottom:1px solid var(--line)}
.filters select{min-width:190px}
.filter-check{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;color:var(--muted)}
.account-filters{margin-bottom:14px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.search{flex:1;position:relative}
.search span{position:absolute;left:12px;top:9px;font-size:16px;color:var(--faint)}
.search input{width:100%;padding-left:34px}
.selection-bar{display:flex;justify-content:space-between;align-items:center;background:var(--accent-soft);
  padding:11px 16px;border-bottom:1px solid #dcdcf6}
.selection-bar>div{display:flex;align-items:center;gap:8px}

/* Table */
.table-wrap{overflow:auto}
/* Change reasons are free text and can be long; let that column wrap instead of
   widening the table until the row actions are pushed out of the scroll viewport. */
.form-admin-panel td:nth-child(5){white-space:normal;overflow-wrap:anywhere;min-width:180px;max-width:340px}
.form-admin-panel td:last-child{position:sticky;right:0;background:var(--panel)}
table{width:100%;border-collapse:collapse;white-space:nowrap}
th{background:var(--panel-alt);color:var(--muted);font-size:11px;font-weight:600;text-align:left;
  padding:10px 14px;border-bottom:1px solid var(--line)}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel-alt)}
.person{display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:12px}
.person strong,.person small{display:block}
.person small{color:var(--muted);font-weight:400}
.score{font:600 14px ui-monospace,SFMono-Regular,Menlo,monospace}
.table-footer{display:flex;justify-content:space-between;padding:12px 16px;color:var(--faint);font-size:12px}

/* Badges */
.badge{display:inline-flex;align-items:center;border-radius:6px;padding:3px 8px;
  background:#f0f0ee;color:var(--muted);font-size:11px;font-weight:600;line-height:1.3}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.orange{background:var(--amber-soft);color:var(--amber)}
.badge.blue{background:var(--accent-soft);color:var(--accent)}
.badge.red{background:var(--red-soft);color:var(--red)}
.account-closure{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* Section headings (non-table views) */
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}
.section-heading h2{margin:0;font:700 22px/1.15 Inter,sans-serif;letter-spacing:-.01em}
.section-heading p{color:var(--muted);margin:5px 0 0}
.heading-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow-sm)}
.card h3{margin:8px 0 4px;font:700 17px/1.2 Inter,sans-serif}
.card p{color:var(--muted);margin:0}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.card-grid span{font-size:12px;color:var(--muted)}
.card-grid strong{display:block;color:var(--ink);font-size:14px;font-weight:600;margin-top:2px}
.progress{height:6px;background:var(--line);border-radius:10px;overflow:hidden;margin-top:15px}
.progress span{display:block;height:100%;background:var(--accent)}

/* Dialog */
dialog{width:min(1100px,calc(100% - 30px));max-height:calc(100vh - 30px);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:0;overflow:auto}
dialog::backdrop{background:rgba(23,24,28,.4);backdrop-filter:blur(3px)}
#dialog-form{padding:26px;position:relative}
.dialog-close{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:24px;color:var(--faint);cursor:pointer;line-height:1}
.dialog-close:hover{color:var(--ink)}
.dialog-title{margin:0 0 6px;font:700 22px/1.2 Inter,sans-serif;letter-spacing:-.01em}
.dialog-subtitle{margin:0 0 22px;color:var(--muted)}
.dialog h3{margin:20px 0 10px;font:700 15px Inter,sans-serif}
.dialog p{margin:6px 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:5px}
.field.full{grid-column:1/-1}
.field>span{font-size:13px;font-weight:500;color:var(--ink)}
.field input,.field select,.field textarea{width:100%}
.field textarea{min-height:100px;resize:vertical}
.choice-field,.quiz-field{border:1px solid var(--line);border-radius:10px;padding:12px;margin:0}
.choice-field legend,.quiz-field legend{font-size:13px;font-weight:600;color:var(--ink);padding:0 4px}
.choice-field{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 12px}
.choice-field label,.checkbox-field span{font-size:13px;color:var(--ink);display:flex;align-items:center;gap:7px}
.choice-field input,.checkbox-field input{width:auto}
.quiz-question{border:0;border-top:1px solid var(--line);display:grid;gap:8px;margin:12px 0 0;padding:12px 0 0}
.quiz-question legend{color:var(--muted);font-size:13px;font-weight:500;line-height:1.4;padding:0}
.quiz-question label{align-items:center;color:var(--ink);display:flex;font-size:13px;gap:7px;line-height:1.35}
.quiz-question input{width:auto}
.quiz-question-text{display:grid;gap:5px;margin-top:10px}
.quiz-question-text span{font-size:13px;color:var(--muted)}
.field-error{display:none;color:#c0362c;font-size:12px;font-weight:500;line-height:1.35;margin-top:5px}
.field-error:not(:empty){display:block}
.choice-field>.field-error,.quiz-field>.field-error{grid-column:1/-1}
.has-error>input,.has-error>select,.has-error>textarea{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.16)}
.field.has-error>span,.has-error>legend{color:#c0362c}
.form-section+.form-section{border-top:1px solid var(--line);margin-top:18px;padding-top:4px}
.location-list{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.location-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.location-group-heading{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.location-group-heading h3{margin:0}
.location-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.location-row:first-child{border-top:none}
.location-row>div>strong{display:block;font-size:14px}
.location-row>div>small{color:var(--muted);font-size:12px}
.location-row.is-inactive{opacity:.55}
.location-map-link{display:inline-block;margin-top:3px;color:var(--accent);font-size:12px;font-weight:600;text-decoration:none}
.location-map-link:hover{text-decoration:underline}

/* Training sessions */
.session-list{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.session-row{display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(160px,auto);align-items:center;gap:24px;padding:18px 20px;border-top:1px solid var(--line)}
.session-row:first-child{border-top:0}
.session-row-main{min-width:0}
.session-row-main h3{margin:7px 0 2px;font:700 17px/1.25 Inter,sans-serif}
.session-row-main small{display:block;color:var(--muted);overflow-wrap:anywhere}
.session-row-main .badge+.badge{margin-left:5px}
.session-row-stats{display:grid;grid-template-columns:repeat(4,minmax(72px,auto));gap:18px}
.session-row-stats span{color:var(--muted);font-size:11px}
.session-row-stats strong{display:block;color:var(--ink);font-size:14px;margin-top:2px}
.session-row-actions{flex-wrap:wrap}
.session-detail-page{display:grid;gap:16px}
.session-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px}
.session-detail-header h2{margin:4px 0;font:700 24px/1.2 Inter,sans-serif}
.session-summary-grid{grid-template-columns:repeat(6,1fr);margin-top:0}
.session-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.session-detail-side{display:grid;gap:16px}
.participant-bulk-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel-alt);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:4px}
.participant-bulk-controls{display:grid;gap:10px}
.participant-select-all{display:flex;align-items:center;gap:8px;font-weight:600}
.participant-filters{display:grid;gap:7px}
.participant-filter-control{display:grid;grid-template-columns:48px minmax(150px,1fr);align-items:center;gap:8px}
.participant-filter-control span{color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.participant-filter-control select{width:100%;min-width:150px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);font:inherit;padding:7px 28px 7px 9px}
.participant-bulk-bar>span{color:var(--muted);font-size:12px}
.participant-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.participant-list{display:flex;flex-direction:column}
.participant-row{display:grid;grid-template-columns:22px minmax(210px,1fr) minmax(430px,1.6fr);align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.participant-row.is-filtered-out{display:none}
.participant-row:first-child{border-top:0}
.participant-select{display:grid;place-items:center}
.participant-select input,.participant-bulk-bar input{width:16px;height:16px;margin:0;cursor:pointer}
.participant-statuses{display:grid;grid-template-columns:repeat(3,minmax(95px,1fr));gap:12px}
.participant-statuses>span{color:var(--muted);font-size:11px}
.participant-statuses strong,.participant-statuses small{display:block}
.participant-statuses strong{color:var(--ink);font-size:12px;margin-top:2px}
.participant-statuses small{margin-top:2px;overflow-wrap:anywhere}
.participant-status-link{display:block;text-align:left;font-size:11px}
.participant-name{display:block;text-align:left;font-size:14px}
.trainer-participant-row{grid-template-columns:minmax(220px,1fr) minmax(360px,1.4fr) auto}
.trainer-participant-actions{display:grid;grid-template-columns:repeat(2,minmax(90px,1fr))}
.trainer-history-summary{margin-top:12px!important}
.trainer-email-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.session-facts{display:grid;gap:0;margin:0}
.session-facts>div{display:grid;grid-template-columns:105px 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.session-facts>div:first-child{border-top:0}
.session-facts dt{color:var(--muted);font-size:12px}
.session-facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.requirement-list{display:flex;flex-wrap:wrap;gap:7px}
.wait-list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.wait-list-row:first-child{border-top:0}
.wait-list-row strong,.wait-list-row small{display:block}
.wait-list-row small{color:var(--muted);font-size:12px}
.session-audit-list>div{padding:9px 0;border-top:1px solid var(--line)}
.session-audit-list>div:first-child{border-top:0}
.session-audit-list strong,.session-audit-list small{display:block}
.session-audit-list strong{font-size:12px;text-transform:capitalize}
.session-audit-list small{color:var(--muted);font-size:11px;margin-top:2px}
.file-help{color:var(--muted);font-size:12px;line-height:1.5}
.location-chips{display:flex;flex-wrap:wrap;gap:8px;min-height:20px}
.location-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel-alt);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px;font-size:13px;color:var(--ink)}
.location-chip-remove{border:none;background:transparent;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0 4px;border-radius:50%}
.location-chip-remove:hover{color:#c0362c}
.choice-field label.is-full{color:var(--muted)}
.location-full{color:var(--muted);font-size:12px}
#location-picker.has-error #location-error{display:block}
.dialog-actions{display:flex;justify-content:flex-end;gap:9px;border-top:1px solid var(--line);margin-top:22px;padding-top:17px;flex-wrap:wrap}
.dialog-actions.staff-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
.dialog-actions.staff-card-actions .button{min-width:0;width:100%;white-space:normal}
.preview{background:var(--panel-alt);border:1px solid var(--line);border-radius:10px;padding:13px;margin-top:16px}
.preview strong{font-size:17px}
.preview-reasons{font-size:12px;color:var(--muted);margin-top:4px}
.form-admin-panel+.form-admin-panel{margin-top:16px}
.form-admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border-bottom:1px solid var(--line)}
.form-admin-head h3{margin:0;font:700 17px/1.2 Inter,sans-serif}
.form-admin-head p{margin:4px 0 0;color:var(--muted)}
.row-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.schema-editor{min-height:360px;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
.preview-grid{display:grid;grid-template-columns:1fr 300px;gap:16px;margin-top:12px}
.mobile-preview{border-left:1px solid var(--line);padding-left:16px}

/* Volunteer detail */
.volunteer-detail-page{display:grid;gap:16px}
.volunteer-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow-sm)}
.volunteer-detail-header h2{margin:4px 0;font:700 24px/1.15 Inter,sans-serif;letter-spacing:-.01em}
.volunteer-action-bar{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;max-width:620px}
.volunteer-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.volunteer-detail-main{min-width:0}
.volunteer-detail-side{display:grid;gap:16px;min-width:0}
.volunteer-summary-grid{margin:0 0 16px}
.panel-pad h3{margin:20px 0 10px;font:700 15px Inter,sans-serif}
.panel-pad h3:first-child{margin-top:0}
.volunteer-training-history{display:grid;gap:12px}
.training-history-row{background:var(--panel-alt);border:1px solid var(--line);border-radius:10px;padding:16px}
.training-history-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.training-history-heading>div{display:grid;gap:5px;min-width:0}
.training-history-heading strong,.training-history-heading .link-button{font-size:17px;font-weight:700;text-align:left}
.training-history-heading small,.training-history-statuses small{display:block;color:var(--muted)}
.training-history-statuses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.training-history-statuses span{display:grid;gap:4px;color:var(--muted);font-size:12px}
.training-history-statuses strong{color:var(--ink);font-size:15px;overflow-wrap:anywhere}
.training-history-notes{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}
.training-history-notes p{margin:4px 0;color:var(--muted);font-size:13px}

/* Toast + empty */
#toast{position:fixed;right:24px;bottom:24px;max-width:min(420px,calc(100vw - 32px));background:var(--ink);color:#fff;padding:12px 16px;
  border-radius:9px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none;font-weight:500;z-index:10}
#toast.show{opacity:1;transform:none}
.empty{padding:36px;text-align:center;color:var(--muted)}

/* Auth */
.auth-view{min-height:100vh;display:grid;place-items:center;background:var(--chrome);padding:24px}
.auth-view.hidden{display:none}
.auth-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:34px;display:grid;gap:14px;box-shadow:var(--shadow)}
.auth-card h1{margin:0;font:700 22px/1.2 Inter,sans-serif;letter-spacing:-.01em}
.auth-card .eyebrow{margin:6px 0 0}
.auth-lead{margin:0 0 6px;color:var(--muted)}
.auth-card .brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--accent);color:#fff;font:800 22px/1 Inter,sans-serif}
.auth-card small{color:var(--faint)}
.plain-link{color:var(--accent);font-weight:600;text-decoration:none}
.plain-link:hover{color:var(--accent-hover);text-decoration:underline}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--panel-alt);border:1px solid var(--line);border-radius:8px;padding:3px}
.auth-tab{border:0;background:transparent;color:var(--muted);border-radius:6px;padding:7px 10px;font:600 13px/1 Inter,sans-serif;cursor:pointer}
.auth-tab.active{background:var(--bg);color:var(--ink);box-shadow:var(--shadow-sm)}
.auth-panel{display:none;gap:14px}
.auth-panel.active{display:grid}
.auth-link{justify-self:center}
.volunteer-auth-card{width:min(520px,100%)}
.team-auth-card{width:min(620px,100%)}
.team-access-links{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.team-access-link{display:grid;gap:5px;border:1px solid var(--line-strong);border-radius:11px;padding:18px;
  color:var(--ink);text-decoration:none;transition:border-color .12s,box-shadow .12s,background .12s}
.team-access-link:hover{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-ring)}
.team-access-link strong{font-size:15px}
.team-access-link span{color:var(--muted);font-size:12px}
.team-volunteer-link{text-align:center;margin-top:2px}
.volunteer-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.volunteer-panel{overflow:visible}
.volunteer-panel.full-width{grid-column:1/-1}
.panel-pad{padding:20px}
.panel-pad h2{margin:4px 0 4px;font:700 20px/1.2 Inter,sans-serif}
.muted-line{margin:0;color:var(--muted)}
.volunteer-notes{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
#preferences-form>.muted-line{margin-bottom:14px}
/* The location picker is injected after the preference grid, so it needs its own
   breathing room above the heading and below the explanatory paragraph. */
#location-picker{margin-top:22px}
#location-picker h3{margin-bottom:12px}
#location-picker .location-intro{margin-bottom:14px}
/* Parental consent is three distinct steps — where the document stands, what the
   volunteer has to do, and the upload itself. Left flush they read as one paragraph of
   grey text, so each step gets its own band and the prose gets a readable measure
   instead of stretching the full width of the panel. */
#consent-status .card-grid{padding-bottom:18px;border-bottom:1px solid var(--line)}
#consent-status .preview-reasons{margin-top:18px;font-size:13px;line-height:1.55}
#consent-status .consent-instructions{max-width:72ch;margin:20px 0 22px;line-height:1.6}
#consent-status .form-grid{max-width:560px}
.section-heading.compact{margin-bottom:14px}
.section-heading.compact h2{font-size:18px}
.volunteer-session-cards{margin-top:14px}
.volunteer-session-cards .button{margin-top:16px}
.answer-list{display:grid;grid-template-columns:minmax(150px,280px) 1fr;gap:10px 18px;margin:0}
.answer-list dt{color:var(--muted);font-weight:600;overflow-wrap:anywhere}
.answer-list dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.answer-list dd div+div{margin-top:8px}
.answer-list dd strong{display:block;font-size:12px;color:var(--muted)}
.answer-list dd span{display:block}

/* Responsive */
@media(max-width:900px){
  .workspace-layout{grid-template-columns:1fr;gap:16px}
  .subnav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
  .subnav-label{width:100%;margin-bottom:2px}
  .metrics{grid-template-columns:1fr 1fr}
  .filters{flex-wrap:wrap}
  .search{min-width:100%}
  main,.account-bar{padding-left:18px;padding-right:18px}
  .topnav-inner{padding:0 8px}
  .volunteer-grid{grid-template-columns:1fr}
  .volunteer-detail-header{display:grid}
  .volunteer-action-bar{justify-content:flex-start;max-width:none}
  .volunteer-detail-grid{grid-template-columns:1fr}
  .session-row{grid-template-columns:1fr;gap:14px}
  .session-row-stats{grid-template-columns:repeat(4,1fr)}
  .session-row-actions{justify-content:flex-start}
  .session-detail-grid{grid-template-columns:1fr}
  .session-summary-grid{grid-template-columns:repeat(3,1fr)}
  .participant-row{grid-template-columns:22px minmax(0,1fr)}
  .participant-select{grid-row:1/-1;align-self:start;margin-top:3px}
  .participant-row>.person,.participant-statuses{grid-column:2}
  .trainer-participant-row{grid-template-columns:minmax(0,1fr)}
  .trainer-participant-row>.person,.trainer-participant-row>.participant-statuses,.trainer-participant-row>.trainer-participant-actions{grid-column:1}
  .training-history-statuses{grid-template-columns:1fr}
  .volunteer-panel.full-width{grid-column:auto}
  .preview-grid{grid-template-columns:1fr}
  .mobile-preview{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:12px}
}
@media(max-width:640px){
  .nav-item span{display:none}
  .nav-item{padding:14px 14px}
  .metrics{grid-template-columns:1fr 1fr}
  .filters select{min-width:0;flex:1}
  .selection-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .section-heading{align-items:flex-start;flex-direction:column}
  .heading-actions{justify-content:flex-start;width:100%}
  .location-row{align-items:flex-start;flex-direction:column}
  .session-detail-header{display:grid}
  .session-summary-grid{grid-template-columns:1fr 1fr}
  .participant-statuses{grid-template-columns:1fr}
  .session-row-stats{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .plan-pill{display:none}
  .account-bar{align-items:flex-start}
  .account-right{gap:10px}
  #dialog-form{padding:22px 18px}
  .dialog-actions{justify-content:stretch}
  .dialog-actions .button{flex:1;min-width:140px}
  .answer-list{grid-template-columns:1fr}
  .answer-list dt{border-top:1px solid var(--line);padding-top:10px}
  .team-access-links{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}