/* TheraIQ Vancomycin Calculator — Styles
Edit this file for all layout & visual changes.
Does NOT affect calculator logic. */
:root{
--navy:#1a3358; --navy-2:#24487a; --ink:#0e1e2e;
--orange:#d4700e; --orange-soft:#fce4c0;
--green:#237a32; --green-soft:#d0efd8;
--red:#b82020; --red-soft:#faddda;
--amber:#b87010; --amber-soft:#fce4b4;
--field:#fde4bf; --field-border:#d4960a;
--bg:#c2d0e4; --card:#ffffff; --line:#ccd6e4; --muted:#506070;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); overflow-x:hidden;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Roboto,sans-serif;
line-height:1.5; -webkit-font-smoothing:antialiased;}
.wrap{max-width:1400px; margin:0 auto; padding:0 12px 60px; overflow-x:hidden}
sub{font-size:.7em}
/* Header */
.appbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
padding:7px 2px 7px; border-bottom:3px solid var(--navy); margin-bottom:4px}
.logo{background:var(--navy); color:#fff; font-weight:900; letter-spacing:1.5px;
box-shadow:0 2px 8px rgba(31,58,95,.35); padding:9px 15px; border-radius:11px; font-size:1.05rem}
.logo .iq{color:var(--orange)}
.head-txt{display:flex; flex-direction:column}
.title{font-weight:900; font-size:1.2rem; color:var(--navy); line-height:1.1}
.title .o{color:var(--orange)}
.navsub{color:var(--muted); font-size:.7rem; font-weight:700; margin-top:1px}
/* Tabs */
.tabs{display:grid; grid-template-columns:repeat(2,1fr); gap:5px; margin-top:14px}
.tab{background:#dde3ee; color:var(--navy); border:none; cursor:pointer;
font-family:inherit; font-weight:800; font-size:.68rem; letter-spacing:.2px; text-transform:uppercase;
padding:8px 4px; border-radius:8px; border-bottom:3px solid transparent; width:100%}
.tab.active{background:var(--navy); color:#fff; border-bottom:3px solid var(--orange); box-shadow:0 2px 6px rgba(31,58,95,.25)}
.tab small{display:block; font-weight:700; font-size:.58rem; letter-spacing:.1px; text-transform:none; opacity:.8; margin-top:1px}
/* Sections */
.secbar{background:#1a3358; color:#fff;
padding:8px 12px; display:flex; align-items:center; justify-content:space-between;
font-weight:800; letter-spacing:1.2px; font-size:.76rem; text-transform:uppercase; border-left:3px solid var(--orange)}
.secbar.r{border-radius:10px 10px 0 0; margin-top:18px}
.secbar .pill{font-size:.66rem; padding:4px 13px; border-radius:14px; letter-spacing:1.2px; font-weight:800}
.pill.green{background:var(--green); color:#fff}
.pill.orange{background:var(--orange); color:#fff}
.secbody{background:var(--card); border:1px solid var(--line); border-top:none;
box-shadow:0 6px 20px rgba(20,45,90,.14), 0 1px 4px rgba(20,45,90,.08);
border-radius:0 0 10px 10px; padding:8px}
/* Fields */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:5px}
.field label{display:block; font-size:.78rem; font-weight:800; color:var(--navy)}
.field .ref{display:block; font-size:.62rem; color:var(--muted); font-weight:600; margin:0 0 3px}
.ip{display:flex; align-items:stretch; background:var(--field);
border:1.5px solid var(--field-border); border-radius:8px; overflow:hidden;
box-shadow:0 1px 4px rgba(0,0,0,.08)}
.ip:focus-within{outline:2px solid var(--orange); border-color:var(--orange)}
.ip input{flex:1; min-width:0; border:none; background:transparent; color:var(--ink);
padding:5px 6px; font-size:.82rem; font-weight:700; color:var(--ink); font-family:inherit}
.ip input:focus{outline:none}
.ip .u{background:var(--navy); color:#fff; font-weight:800; font-size:.72rem;
display:flex; align-items:center; padding:0 7px; white-space:nowrap; font-size:.65rem}
select.u{border:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:24px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 8px center}
.cream-sel{width:100%; background:var(--field); border:1.5px solid var(--field-border);
border-radius:8px; padding:7px 30px 7px 9px; font-size:.86rem; font-weight:800; color:var(--navy);
font-family:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center}
.cream-sel:focus{outline:2px solid var(--orange)}
.chk{display:flex; align-items:center; gap:9px; font-size:.88rem; font-weight:700; color:var(--navy); margin-top:14px}
.chk input{width:18px;height:18px;accent-color:var(--green)}
.tag{display:inline-block; font-size:.6rem; font-weight:800; text-transform:uppercase;
letter-spacing:.5px; padding:2px 7px; border-radius:6px; vertical-align:middle}
.tag.opt{background:#fbe8cf; color:var(--orange)}
.tag.gray{background:#e8ecf4; color:var(--muted)}
.tag.pref{background:#d8f0dd; color:var(--green)}
.toggles{display:flex; flex-wrap:wrap; gap:16px 22px; margin-top:16px; align-items:flex-end}
.btn{background:var(--green); color:#fff; border:none; border-radius:9px;
box-shadow:0 3px 8px rgba(46,140,62,.3);
padding:12px 24px; font-size:.94rem; font-weight:900; letter-spacing:.8px; cursor:pointer;
margin-top:14px; text-transform:uppercase; font-family:inherit}
.btn:hover{filter:brightness(.94)}
.hint{font-size:.74rem; color:var(--muted); font-weight:600; margin-top:10px}
/* Renal: anthro + table + drivers */
.anthro{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.apill{background:var(--field); border:1px solid var(--field-border); border-radius:18px;
padding:6px 13px; font-size:.78rem; color:var(--muted); font-weight:700}
.apill b{color:var(--navy)}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{padding:8px 6px; text-align:left; border-bottom:1px solid var(--line)}
th{font-size:.62rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:800}
.unit-lbl{font-size:.66rem; color:var(--muted); font-weight:600; display:block}
td.method{font-weight:800; color:var(--navy)}
td.val{font-variant-numeric:tabular-nums; font-weight:800}
.col-idx{color:var(--muted)}
.col-dose{color:var(--green)}
.badge{display:inline-block; font-size:.6rem; text-transform:uppercase; letter-spacing:.5px;
padding:2px 8px; border-radius:10px; font-weight:800}
.badge.staging{background:#dde6f0; color:var(--navy)}
.badge.dosing{background:#d8f0dd; color:var(--green)}
.na{color:#b7c0cd; font-style:italic; font-weight:600}
.lead{margin:0 0 12px; color:var(--muted); font-size:.85rem; font-weight:600}
.driver-opt{display:flex; align-items:center; gap:11px; padding:11px;
border:1.5px solid var(--line); border-radius:9px; margin-bottom:8px; cursor:pointer; background:#fafcff}
.driver-opt:hover{border-color:var(--orange)}
.driver-opt.sel{border-color:var(--navy); background:#f4f6fb; box-shadow:inset 4px 0 0 var(--orange)}
.driver-opt input{margin:0; width:18px;height:18px;accent-color:var(--navy)}
.driver-opt .label{font-weight:800; color:var(--navy); font-size:.92rem}
.driver-opt .meta{font-size:.76rem; color:var(--muted); font-weight:600}
.driver-opt .dv{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--green); font-weight:900; font-size:.9rem; white-space:nowrap}
.caveat{background:var(--navy); color:#eaf0f8; border-radius:9px; padding:14px 16px; margin-top:12px; font-size:.86rem; font-weight:600; display:none}
.caveat.show{display:block}
.caveat .ttl{color:var(--orange); font-weight:900; font-size:.68rem; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:6px}
/* Results */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px}
.kpi{background:#fff; border:1px solid #c0cedd; border-radius:9px; padding:10px 12px; box-shadow:0 2px 8px rgba(20,45,90,.1)}
.kpi .l{font-size:.58rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:800}
.kpi .v{font-size:1.05rem; font-weight:900; color:var(--navy); font-variant-numeric:tabular-nums; line-height:1.2}
.kpi .v .u{font-size:.72rem; color:var(--muted); font-weight:700}
.aucbox{border-radius:8px; padding:9px 12px; margin-bottom:10px; border-left:4px solid;
box-shadow:0 2px 8px rgba(0,0,0,.07)}
.aucbox .big{font-size:2rem; font-weight:900; font-variant-numeric:tabular-nums; line-height:1}
.aucbox .big .u{font-size:.8rem; font-weight:700}
.aucbox .stat{font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; margin-top:4px}
.auc-note{display:block;font-size:.7rem;font-weight:600;letter-spacing:.2px;opacity:.8;text-transform:none;margin-top:2px}
.auc-sub{background:#fde8c8; border-color:var(--orange); color:#7a3d08}
.auc-ther{background:#d8f0dd; border-color:var(--green); color:#1a5c24}
.auc-cau{background:#fce8c0; border-color:var(--amber); color:#704010}
.auc-tox{background:#fae8e6; border-color:var(--red); color:#7a241c}
.rec-muted{background:var(--muted);}
.rec{background:var(--navy); color:#eef3fa; border-radius:8px; padding:9px 12px; margin-top:8px;
box-shadow:0 3px 10px rgba(31,58,95,.25)}
.rec .ttl{color:var(--orange); font-weight:900; font-size:.68rem; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:7px}
.rec .dose{font-size:1.5rem; font-weight:900; color:#fff; font-variant-numeric:tabular-nums}
.rec .meta{font-size:.82rem; font-weight:600; margin-top:5px; opacity:.92}
.flag{border-radius:9px; padding:10px 12px; font-size:.83rem; font-weight:600; margin-top:8px; border-left:4px solid}
.flag.warn{background:var(--amber-soft); border-color:var(--amber); color:#7a4e0c}
.flag.alert{background:var(--red-soft); border-color:var(--red); color:#7a241c}
.flag.ok{background:var(--green-soft); border-color:var(--green); color:#1f6b29}
.flag.info{background:#eef3fa; border-color:var(--navy); color:#22436b}
.flag b{font-weight:900}
/* source banner on Initial */
.srcbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#f4f6fb;
border:1px dashed var(--navy); border-radius:9px; padding:10px 13px; margin-bottom:14px; font-size:.84rem; font-weight:700; color:var(--navy)}
.srcbar .v{color:var(--green); font-weight:900}
.srcbar .none{color:var(--muted); font-weight:700}
.disclaimer{font-size:.76rem; color:var(--muted); font-weight:600; text-align:center; margin-top:18px; line-height:1.5}
.pane{display:none} .pane.active{display:block}
.pkhead{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--navy);font-weight:900;margin:20px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.mstart{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.mstart label{font-size:.84rem;font-weight:800;color:var(--navy)}
.mstart .mrec{font-size:.76rem;color:var(--muted);font-weight:700}
.minfo{font-size:.82rem;font-weight:600;color:var(--ink);background:#f4f6fb;border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:12px}
.minfo b{color:var(--navy);font-weight:900}
/* i_graph svg handled in graph-lbl block */
table.cmp{width:100%;border-collapse:collapse;font-size:.84rem;margin-bottom:14px; table-layout:fixed}
table.cmp th{font-size:.68rem;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:800;padding:8px;border-bottom:2px solid var(--line);text-align:center}
table.cmp th:first-child{text-align:left}
table.cmp td{padding:9px 8px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink)}
table.cmp td.est{text-align:center;color:var(--navy)}
table.cmp td.alt{text-align:center;color:var(--navy);background:#fffdf7}
table.cmp thead th.ac{background:#fffdf7}
.altsel{padding:7px 10px;font-size:.85rem;font-weight:800}
.gtogrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 6px}
.gtl{font-size:.82rem;font-weight:800;color:var(--navy)}
.gtog{background:#eef1f6;color:var(--navy);border:1px solid var(--line);border-radius:8px;padding:8px 18px;font-family:inherit;font-weight:800;font-size:.82rem;cursor:pointer}
.gtog.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.cmpnote{font-size:.76rem;color:var(--muted);font-weight:600;margin:0 0 14px}
.troughs{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px;font-size:.82rem}
.trow{display:grid;grid-template-columns:1fr auto;gap:6px;padding:9px 11px;align-items:start;border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:none}
.trow.header{background:#f7f9fc;font-size:.66rem;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:800;padding:8px 13px}
.trow.measured{background:#fff}
.trow.extrap{background:#fffdf7;border-left:4px solid var(--orange)}
.trow.modeled{background:#f7fdf8;border-left:4px solid var(--green)}
.tsub{display:block;font-size:.7rem;color:var(--muted);font-weight:600}
.tv{font-weight:900;font-size:1.05rem;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.extv{color:var(--orange)}
.modv{color:var(--green)}
.tu{font-size:.68rem;font-weight:700;color:var(--muted)}
.tbasis{font-size:.68rem;color:var(--muted);font-weight:600;display:block;margin-top:2px;white-space:normal}
.altip{max-width:140px;display:inline-flex}
.altip input{padding:7px 8px;font-size:.95rem}
.altip .u{padding:0 10px;font-size:.74rem}
/* Special populations */
.spop-head{background:#d0dcea;border:1px solid var(--line);border-radius:9px;padding:11px 14px;
cursor:pointer;font-weight:800;font-size:.86rem;color:var(--navy);display:flex;justify-content:space-between;
align-items:center;margin-top:14px;user-select:none}
.spop-head:hover{background:#e0e6f0}
.spop-block{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:14px;margin-bottom:10px}
.amp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.amp-side{display:flex;flex-direction:column;gap:4px}
.amp-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:800;margin-bottom:4px}
/* Timing mode toggle */
.tmode-wrap{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.tmode-lbl{font-size:.82rem;font-weight:800;color:var(--navy)}
.tmode-btns{display:flex;gap:6px}
.tmode{background:#eef1f6;color:var(--navy);border:1px solid var(--line);border-radius:8px;
padding:7px 16px;font-family:inherit;font-weight:800;font-size:.82rem;cursor:pointer}
.tmode.on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* Timestamp block */
.tsblock{background:#f7f9fc;border:1px solid var(--line);border-radius:9px;padding:13px;display:flex;flex-direction:column;gap:10px}
.ts-lbl{font-size:.74rem;font-weight:800;color:var(--navy);white-space:nowrap;min-width:80px}
.ts-day{padding:7px 8px;font-size:.8rem;width:100%;min-width:0}
.ts-time{flex:1;min-width:0}
/* ── Desktop two-column layout (only on large screens) ── */
/* desktop layout below */
/* Model equation hint */
.model-eq{font-style:italic;color:var(--orange);font-weight:700}
/* Inline field validation */
.ip.err{border-color:var(--red)!important; box-shadow:0 0 0 2px rgba(192,57,43,.2)!important}
.cream-sel.err{border-color:var(--red)!important}
.ferr{color:var(--red);font-size:.68rem;font-weight:800;margin-top:3px;display:block}
/* Force 24hr on time inputs */
input[type=time]{-webkit-appearance:none;appearance:none}
input[type=time]::-webkit-datetime-edit-ampm-field{display:none!important}
.ts-time input[type=time]{width:100%;padding:7px 8px;font-size:.9rem;font-weight:700;background:var(--field);border:none}
/* Prevent any child from expanding its container */
.pane,.secbody,.desk-row,.desk-inputs,.desk-results{overflow-x:hidden}
.grid>.field{min-width:0}
.field,.ip,.cream-sel{max-width:100%}
.toggles>.field{min-width:0;flex:1 1 140px}
.ld-wrap{display:flex;gap:4px;margin-bottom:6px}
.ld-opt{flex:1;padding:5px 4px;font-size:.72rem;font-weight:800;border:1.5px solid var(--field-border);
border-radius:6px;cursor:pointer;font-family:inherit;background:var(--bg);color:var(--navy);text-align:center}
.ld-opt.on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* Graph labels below chart */
#i_graph{position:relative}
#i_graph svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px 10px 0 0;background:#fff}
.graph-lbl{background:#0f2040;color:#fff;border-radius:0 0 10px 10px;padding:9px 14px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:.8rem;font-weight:700;letter-spacing:.1px}
.gl-maint{color:#f5a030;font-weight:800}
.gl-val{color:#fff}
.gl-sep{color:rgba(255,255,255,.4)}
.gl-trough{color:#ff8080;font-weight:700}
.fda-note{background:#eef3fa;border:1px solid #b8cce8;border-left:3px solid var(--navy);
border-radius:8px;padding:10px 12px;font-size:.8rem;font-weight:600;color:var(--ink);margin-bottom:10px}
.fda-badge{display:inline-block;background:var(--navy);color:#fff;font-size:.62rem;font-weight:900;
letter-spacing:.8px;padding:2px 8px;border-radius:5px;margin-right:7px;vertical-align:middle}
/* Renal results 2-col on desktop */
.r-two-col{display:flex;flex-direction:column;gap:0}
.r-col-left,.r-col-right{min-width:0}
/* Initial dosing results 2-col */
.i-results-grid{display:flex;flex-direction:column;gap:0}
.i-col-left,.i-col-right{min-width:0}
/* inline labels */
/* Shrink input height */
.desk-inputs .ip input{padding:4px 6px; font-size:.82rem}
.desk-inputs .cream-sel{padding:4px 26px 4px 8px; font-size:.82rem}
/* ═══════════════════════════════════════════
DESKTOP LAYOUT — fires at 768px+
Left panel (inputs) + Right panel (results)
Everything scaled to fit one screen
═══════════════════════════════════════════ */
@media(min-width:768px){
/* Wrap */
.wrap{padding:0 12px 12px}
/* Tabs: single row */
.tabs{display:flex; flex-wrap:nowrap; gap:3px}
.tab{flex:1; width:auto; border-radius:6px 6px 0 0;
padding:6px 3px; font-size:.62rem; letter-spacing:.1px}
.tab small{font-size:.55rem; margin-top:1px}
/* Left/right layout */
.desk-row{display:flex; gap:10px; align-items:flex-start}
.desk-inputs{
flex:0 0 280px;
position:sticky; top:4px;
max-height:calc(100vh - 44px);
overflow-y:auto; overflow-x:hidden;
}
.desk-results{flex:1; min-width:0; overflow-x:hidden}
/* Compact left panel */
.desk-inputs .secbar{padding:5px 8px; font-size:.65rem; letter-spacing:.7px}
.desk-inputs .secbody{padding:4px 6px}
.desk-inputs .grid{grid-template-columns:repeat(2,1fr); gap:3px}
/* Label only — hide ref (unit badges in inputs are enough) */
.desk-inputs .field label{display:block; font-size:.72rem; font-weight:800; margin-bottom:2px}
.desk-inputs .field .ref{display:none}
/* Space before Calculate */
.desk-inputs .btn{margin-top:12px}
/* Compact inputs */
.desk-inputs .ip input{padding:3px 5px; font-size:.78rem}
.desk-inputs .ip .u{padding:0 5px; font-size:.6rem}
.desk-inputs .cream-sel{padding:3px 22px 3px 6px; font-size:.78rem}
.desk-inputs .btn{padding:7px 14px; font-size:.8rem; margin-top:5px}
.desk-inputs .chkrow,.desk-inputs .chk{font-size:.75rem}
.desk-inputs .spop-head{padding:5px 8px; font-size:.75rem}
.desk-inputs .hint{font-size:.62rem; margin-top:4px}
.desk-inputs .model-eq{font-size:.6rem}
.desk-inputs .fda-note{padding:6px 8px; font-size:.7rem; margin-bottom:6px}
.desk-inputs .lead{font-size:.72rem; margin-top:6px}
.desk-inputs .driver-opt{padding:7px 8px; margin-bottom:5px}
/* Results empty state */
/* empty state handled by .results-ph — no duplicate ghost needed */
/* KPIs row */
.kpis{grid-template-columns:repeat(4,1fr)}
/* Graph */
#i_graph svg{min-height:200px}
/* Renal results: estimates+discordance left, driver right */
.r-two-col{display:grid; grid-template-columns:1.1fr 0.9fr; gap:0 12px; align-items:start}
/* Initial dosing results: AUC+KPIs left, table+graph right */
.i-results-grid{display:grid; grid-template-columns:200px 1fr; gap:10px; align-items:start}
}
@media(min-width:1280px){
.desk-inputs{flex:0 0 310px}
.kpis{grid-template-columns:repeat(6,1fr)}
#i_graph svg{min-height:240px}
}
.desk-results-wrap{flex:1; min-width:0; display:flex; flex-direction:column}
.results-ph{
display:flex; align-items:center; justify-content:center;
flex:1; min-height:180px; text-align:center;
color:var(--muted); font-size:.9rem; font-weight:600; line-height:1.7;
background:var(--bg); border-radius:10px;
border:2px dashed rgba(26,51,88,.15);
padding:20px; margin:4px 0;
}
.results-ph span{display:block; color:var(--navy); opacity:.5}
.results-ph strong{font-weight:800}
/* ═══════════════════════════════════
RESULTS PANEL — compact at 768px+
Targets ALL 4 tab result containers
═══════════════════════════════════ */
@media(min-width:768px){
/* Target all results wrappers correctly */
#r_results, #i_out, #t_out, #p_out,
.r-col-left, .r-col-right {
font-size: 12.5px;
}
/* Secbars */
#r_results .secbar, #i_out .secbar,
#t_out .secbar, #p_out .secbar,
.r-col-left .secbar, .r-col-right .secbar {
padding:5px 9px; font-size:.68rem; letter-spacing:.7px
}
/* Secbodies */
#r_results .secbody, #i_out .secbody,
#t_out .secbody, #p_out .secbody,
.r-col-left .secbody, .r-col-right .secbody {
padding:7px 9px
}
/* Table */
#r_results th, .r-col-left th { font-size:.62rem; padding:4px 5px }
#r_results td, .r-col-left td { font-size:.76rem; padding:4px 5px }
/* Anthro pills */
.anthro { gap:4px; margin-bottom:7px; flex-wrap:wrap }
.apill { font-size:.68rem; padding:2px 7px; border-radius:12px }
/* Driver options */
.driver-opt { padding:6px 8px; margin-bottom:4px; gap:8px }
.driver-opt .dn { font-size:.76rem }
.driver-opt .dv { font-size:.7rem }
.driver-opt .dval { font-size:.88rem }
/* Flags + caveats */
.flag { padding:5px 8px; font-size:.74rem; margin-top:5px }
.caveat { padding:6px 8px; font-size:.74rem }
/* FDA note */
.fda-note { padding:6px 8px; font-size:.7rem; margin-bottom:6px }
.fda-badge { font-size:.6rem; padding:1px 6px }
/* Lead text */
.lead { font-size:.72rem; margin-top:5px; line-height:1.4 }
/* KPIs */
.kpi { padding:5px 7px }
.kpi .v { font-size:.92rem }
.kpi .l { font-size:.55rem }
/* AUC box */
.aucbox { padding:7px 10px; margin-bottom:7px }
.aucbox .big { font-size:1.3rem }
.aucbox .stat { font-size:.68rem }
.auc-note { font-size:.64rem }
/* Rec cards */
.rec { padding:7px 10px; margin-top:6px }
.rec .dose { font-size:1rem }
.rec .meta { font-size:.7rem }
/* Comparison table */
table.cmp td, table.cmp th { font-size:.76rem; padding:4px 6px }
/* Graph */
.graph-lbl { padding:5px 9px; font-size:.7rem }
/* Discordance */
#r_results .rflag, .rflag { font-size:.76rem; padding:6px 8px }
/* Source bar */
.srcbar { font-size:.72rem; padding:5px 8px }
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(min-width:768px){
.troughs{font-size:.8rem}
.trow{padding:6px 10px; gap:4px}
.tv{font-size:.88rem}
.tbasis{font-size:.66rem}
.tval{font-size:1.05rem}
.tval .u{font-size:.68rem}
}
/* Timing mode toggle — green theme matching Loading dose */
.tmode{background:#e8f9ef;border:1.5px solid #5daa78;color:#1a7a3c;
font-size:.72rem;font-weight:800;padding:5px 12px;border-radius:6px;
cursor:pointer;white-space:nowrap;transition:all .12s}
.tmode.on{background:#1a7a3c;border-color:#1a7a3c;color:#fff}
.tmode:hover{background:#5daa78;color:#fff;border-color:#5daa78}
/* Trough AUC & Peak/Trough timestamp rows */
.ts-hhmm{display:flex;align-items:center;gap:3px}
.ts-hhmm .ts-hh,.ts-hhmm .ts-mm{
padding:5px 4px;font-size:.8rem;font-weight:700;
border:1.5px solid var(--field-border);border-radius:6px;
background:var(--field);color:var(--navy);cursor:pointer;
width:50px;text-align:center}
.ts-sep{font-weight:800;color:var(--navy);font-size:.9rem;padding:0 1px}
.ts-day{min-width:100px;max-width:130px;font-size:.78rem}
.ts-row{display:flex;align-items:center;gap:5px;margin-bottom:7px;flex-wrap:nowrap}
.ts-row .ts-lbl{flex:0 0 78px;font-size:.72rem;font-weight:800;color:var(--navy);white-space:nowrap}
.ts-row .ts-day{flex:1 1 75px;min-width:65px;max-width:105px;font-size:.74rem}
.ts-row .ts-hhmm{flex:0 0 auto}
/* Peak & Trough hhmm (pt_ selects) */
.hhmm{display:flex;align-items:center;gap:3px}
.hhmm select{
padding:5px 4px;font-size:.8rem;font-weight:700;
border:1.5px solid var(--field-border);border-radius:6px;
background:var(--field);color:var(--navy);cursor:pointer;
width:50px;text-align:center}
.sep{font-weight:800;color:var(--navy);font-size:.9rem;padding:0 2px}
@media(max-width:767px){
.desk-row,.desk-inputs,.desk-results-wrap{display:block!important;width:100%!important;max-height:none!important;overflow:visible!important;position:static!important}
.pane.on{display:block!important}
.desk-inputs{padding-bottom:8px}
}
/* Model info button + floating popover */
.mib{background:none;border:none;color:#4a7abf;font-size:.85rem;cursor:pointer;
padding:0 2px;line-height:1;vertical-align:middle;opacity:.75}
.mib:hover{opacity:1;color:#1a3358}
.model-pop{position:absolute;z-index:200;background:#fff;border:1.5px solid #c0d0e8;
border-radius:9px;box-shadow:0 4px 20px rgba(26,51,88,.18);
padding:11px 14px;width:280px;font-size:.74rem;line-height:1.55}
.model-pop .mp-name{font-weight:800;color:var(--navy);font-size:.78rem;margin-bottom:4px}
.model-pop .mp-eq{font-family:monospace;color:#1a5a8a;background:#e8f0fc;
padding:2px 7px;border-radius:4px;display:inline-block;margin-bottom:5px;font-size:.75rem}
.model-pop .mp-desc{color:#3a4f6a;margin-bottom:5px}
.model-pop .mp-ref{font-size:.67rem;color:var(--muted);font-style:italic;
border-top:1px solid #e0e8f4;padding-top:4px;margin-top:4px}
.model-pop .mp-close{float:right;cursor:pointer;color:var(--muted);font-size:.9rem;
line-height:1;padding:0 2px;margin-left:4px}