/* The traffic dashboard uses OWEN's existing light/dark surface tokens. */
body[data-route="faculty"] .pipeline-layout[data-active-panel="usage"] { grid-template-columns:minmax(0,1fr); max-width:1240px; width:100%; margin-inline:auto; }
body[data-route="faculty"] .pipeline-layout[data-active-panel="usage"]>.pipeline-steps { display:none; }
body[data-route="faculty"] .pipeline-layout[data-active-panel="usage"]>.pipeline-sidebar { position:static; max-height:none; height:auto; overflow:visible; }
body[data-route="faculty"] .pipeline-layout[data-active-panel="usage"] #liveUsagePanel.active { overflow:visible; scrollbar-gutter:auto; }
body[data-route="faculty"] .pipeline-layout[data-active-panel="usage"] #facultyTabNav { max-width:680px; }
/* Let the entire Live Usage page grow; the library's viewport cap must not
   compress the account registry into the old two-card scroll area. */
body[data-route="faculty"] .pipeline-layout[data-active-panel="usage"] :is(.faculty-tab-container,#liveUsagePanel,.live-usage-card,#trafficLiveView) { height:auto; max-height:none; overflow:visible; flex-shrink:0; min-width:0; }
.student-account-registry { min-width:0; flex-shrink:0; }
.student-account-registry__list { --student-account-card-height:6.25rem; display:flex; flex-direction:column; max-height:calc(15 * var(--student-account-card-height) + 14 * 6px); overflow-y:auto; overflow-x:hidden; min-width:0; }
.student-account-registry__list .live-usage-user { box-sizing:border-box; flex:0 0 auto; min-height:var(--student-account-card-height); height:auto; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:max-content; align-content:center; gap:3px; overflow-wrap:anywhere; }
.student-account-registry__list .live-usage-user__primary { white-space:normal; overflow:visible; text-overflow:clip; }
.student-account-registry__actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:3px; }
.student-account-registry__delete { color:var(--text-supporting); }
.student-account-registry__delete:hover { color:var(--color-danger); }
.student-account-registry__status:empty { display:none; }
.student-account-registry__status[data-error="true"],.student-account-delete-dialog__status[data-error="true"] { color:var(--color-danger); }
.student-account-delete-dialog { box-sizing:border-box; width:min(540px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid var(--color-border); border-radius:var(--radius-xl,18px); background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-popover,0 20px 70px #0004); font:inherit; }
.student-account-delete-dialog::backdrop { background:rgb(0 0 0 / .45); }
.student-account-delete-dialog h2 { margin:0 0 16px; font-size:1.35rem; }
.student-account-delete-dialog p { margin:12px 0; font-size:.875rem; line-height:1.6; overflow-wrap:anywhere; }
.student-account-delete-dialog__identity { white-space:pre-line; font-weight:650; padding:12px; background:var(--surface-mint); border-radius:var(--radius-md,10px); }
.student-account-delete-dialog__actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:20px; }
.student-account-delete-dialog__status:empty { display:none; }
.student-account-delete-dialog :is(button):focus-visible,.student-account-registry :is(button,input):focus-visible { outline:3px solid var(--focus-ring,var(--color-accent)); outline-offset:3px; }
@media(max-width:600px) { .student-account-delete-dialog { padding:18px; } .student-account-delete-dialog__actions .btn { flex:1 1 auto; white-space:normal; } }
.traffic-dashboard { display:grid; gap:16px; color:var(--color-text); font-family:var(--font-body); font-size:.8125rem; line-height:1.6; min-width:0; }
.traffic-dashboard [hidden],#trafficLiveView[hidden] { display:none!important; }
.traffic-dashboard :is(h2,h3,h4,p) { margin:0; }
.traffic-dashboard :is(h2,h3,h4) { color:var(--text-heading); }
.traffic-dashboard h2 { font-size:1.5rem; line-height:1.25; letter-spacing:-.025em; }
.traffic-dashboard h3 { font-size:1rem; }
.traffic-dashboard h4 { font-size:.875rem; margin-bottom:8px; }
.traffic-dashboard :is(p,small) { color:var(--text-supporting); }
.traffic-toolbar,.traffic-presets,.traffic-section-heading,.traffic-date-range { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.traffic-presets { justify-content:flex-start; gap:6px; }
.traffic-dashboard .traffic-presets button[aria-pressed="true"] { background:var(--surface-mint); color:var(--text-heading); border-color:var(--color-accent-strong,var(--color-accent)); box-shadow:inset 0 -2px 0 var(--color-accent-strong,var(--color-accent)); font-weight:750; }
.traffic-field { display:grid; gap:4px; font-size:.6875rem; font-weight:650; color:var(--text-supporting); min-width:0; }
.traffic-dashboard :is(select,input[type="date"]) { min-width:0; min-height:40px; border:1px solid var(--border-mint); background:var(--color-surface); color:var(--text-heading); border-radius:var(--radius-md,10px); padding:8px 10px; font:inherit; font-size:.8125rem; }
.traffic-dashboard select { max-width:220px; }
.traffic-dashboard :is(button,input,select,summary,.traffic-table-scroll):focus-visible { outline:3px solid var(--focus-ring,var(--color-accent)); outline-offset:3px; }
.traffic-date-range { justify-content:flex-start; align-items:flex-end; }
.traffic-scope,.traffic-caption,.traffic-status,.traffic-comparison { font-size:.75rem; }
.traffic-status:empty,.traffic-comparison:empty { display:none; }
.traffic-status { color:var(--color-danger,var(--text-supporting))!important; }
.traffic-history { display:grid; gap:18px; }
.traffic-section-heading { align-items:flex-start; }
.traffic-section-heading p { max-width:70ch; font-size:.75rem; margin-top:3px; }
.traffic-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.traffic-card { display:flex; flex-direction:column; gap:7px; min-width:0; padding:16px 13px; background:var(--surface-mint); border:1px solid var(--border-mint); border-radius:var(--radius-xl,18px); box-shadow:var(--shadow-inset); }
.traffic-card>span,.traffic-usage-card>span { color:var(--text-supporting); font-size:.6875rem; font-weight:650; }
.traffic-card strong { font-size:2rem; font-weight:750; line-height:1.2; font-variant-numeric:tabular-nums; color:var(--text-heading); }
.traffic-card small { font-size:.625rem; line-height:1.5; }
.traffic-surface { padding:20px; background:var(--surface-pearl); border:1px solid var(--border-mint); border-radius:var(--radius-xl,18px); min-width:0; box-shadow:var(--shadow-inset); }
.traffic-chart-wrap { position:relative; min-width:0; }
.traffic-chart { width:100%; height:286px; min-height:0; overflow:visible; display:block; margin-top:14px; }
.traffic-chart text { font-family:inherit; font-size:12px; fill:var(--text-supporting); }
.traffic-grid line { stroke:var(--color-border); stroke-width:1; stroke-dasharray:3 4; }
.traffic-line { stroke:var(--color-accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.traffic-point { cursor:crosshair; outline:none; }
.traffic-point[role="button"] { cursor:pointer; }
.traffic-point circle { fill:var(--color-accent); stroke:var(--color-surface); stroke-width:2; }
.traffic-point .traffic-point-target { fill:transparent; stroke:transparent; }
.traffic-point:focus-visible .traffic-point-target,.traffic-point:hover .traffic-point-target { fill:var(--color-accent-weak); stroke:var(--color-accent); stroke-width:1.5; }
.traffic-point--peak circle:not(.traffic-point-target) { fill:var(--color-surface); stroke:var(--color-accent); stroke-width:3; }
.traffic-point--peak text { font-size:11px; font-weight:700; fill:var(--color-accent-strong,var(--color-accent)); }
.traffic-chart-empty { position:absolute; inset:42% 15% auto; background:var(--surface-pearl); text-align:center; padding:8px; }
.traffic-tooltip { display:block; border:1px solid var(--border-mint); border-radius:var(--radius-md,10px); background:var(--surface-mint); padding:10px 12px; min-height:43px; box-sizing:border-box; color:var(--text-heading); font-size:.75rem; font-variant-numeric:tabular-nums; }
.traffic-caption { margin-top:8px!important; }
.traffic-dashboard details summary { cursor:pointer; padding:10px 0; font-size:.75rem; color:var(--text-heading); }
.traffic-table-scroll { overflow:auto; max-width:100%; scrollbar-width:thin; overscroll-behavior:contain; margin-top:12px; }
.traffic-dashboard details .traffic-table-scroll { max-height:340px; }
.traffic-dashboard table { width:100%; border-collapse:collapse; text-align:left; font-size:.75rem; }
.traffic-dashboard th,.traffic-dashboard td { padding:10px 8px; border-bottom:1px solid var(--color-border); vertical-align:top; }
.traffic-dashboard thead th { color:var(--text-supporting); font-size:.6875rem; font-weight:650; background:var(--color-surface-2); }
.traffic-dashboard tbody th { color:var(--text-heading); font-weight:550; }
.traffic-dashboard td { white-space:nowrap; font-variant-numeric:tabular-nums; }
.traffic-dashboard tbody tr:hover { background:var(--color-accent-weak); }
.traffic-day-link { border:0; padding:0; background:none; font:inherit; color:var(--color-accent-strong,var(--color-accent)); cursor:pointer; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.traffic-usage-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-block:16px 22px; }
.traffic-usage-card { display:grid; gap:4px; padding:12px; background:var(--color-surface-2); border-radius:var(--radius-md,10px); }
.traffic-usage-card strong { font-size:1.5rem; line-height:1.3; color:var(--text-heading); }
.traffic-usage-card small { font-size:.625rem; }
.traffic-rankings { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.traffic-rankings>div { min-width:0; }
.traffic-rankings th { overflow-wrap:anywhere; }
.traffic-empty { font-size:.75rem; padding:12px 0; }
.traffic-coverage { padding:12px 16px; border-left:3px solid var(--color-accent); border-radius:0 10px 10px 0; background:var(--color-accent-weak); font-size:.75rem; color:var(--text-supporting); }
.traffic-definitions { padding-inline:4px; }
.traffic-definitions dl { margin:0; font-size:.75rem; }
.traffic-definitions dt { margin-top:10px; font-weight:650; color:var(--text-heading); }
.traffic-definitions dd { margin:3px 0 0; color:var(--text-supporting); }
#trafficLiveView { display:grid; gap:16px; }
@media(max-width:900px) { .traffic-summary { grid-template-columns:repeat(3,minmax(0,1fr)); } .traffic-usage-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .traffic-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .traffic-summary .traffic-card:first-child { grid-column:1/-1; } .traffic-toolbar { align-items:flex-start; } .traffic-presets { gap:4px; } .traffic-surface { padding:14px 10px; } .traffic-rankings { grid-template-columns:1fr; gap:18px; } .traffic-section-heading .traffic-field { width:100%; } .traffic-section-heading select { width:100%; max-width:none; } .traffic-card strong { font-size:1.7rem; } }