/* metrics/assets/slug.css */
:root{--fg:#0f172a;--muted:#64748b;--panel:#ffffff;--border:rgba(15,23,42,0.12);--shadow:0 10px 30px rgba(2,6,23,0.08);}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f6f5f2;color:var(--fg);}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:18px;}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:12px;}
.title{font-size:28px;font-weight:800;line-height:1.1}
.sub{color:var(--muted);font-size:13px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:16px;}
.muted{color:var(--muted)}
.pill{display:inline-flex;gap:6px;align-items:center;background:rgba(255,255,255,0.6);border:1px solid rgba(15,23,42,0.12);padding:6px 10px;border-radius:999px;font-size:12px}
.pillBuilderYes{border-color:rgba(22,163,74,0.35);background:rgba(22,163,74,0.08)}
.pillBuilderNo{border-color:rgba(100,116,139,0.25);background:rgba(100,116,139,0.06)}
.quickTake,.sevenOutlook{border:1px solid var(--border);border-radius:16px;padding:14px;margin:12px 0}
.qtTop,.sevenTop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.qtLabel,.sevenTitle{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.qtRight{display:flex;align-items:center;gap:10px}
.qtIcos,.qtWx{display:flex;align-items:center;gap:8px}
.qtText,.sevenText{margin-top:10px;font-size:15px;line-height:1.4}
.qtMeta{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
table{border-collapse:separate;border-spacing:0;width:100%}
.summaryWrap{margin-top:12px}
.summary th,.summary td{vertical-align:top;border:1px solid rgba(15,23,42,0.12);padding:10px}
.summary th{font-weight:800}
.summary tr:first-child th:first-child{border-top-left-radius:14px}
.summary tr:first-child th:last-child{border-top-right-radius:14px}
.summary tr:last-child td:first-child{border-bottom-left-radius:14px}
.summary tr:last-child td:last-child{border-bottom-right-radius:14px}
.thWrap{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.thRight{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.cellLine{font-size:13px;margin:6px 0}
.rawWrap{margin-top:18px}
.rawTbl{width:100%;font-size:13px}
.rawTbl th,.rawTbl td{border-bottom:1px solid rgba(15,23,42,0.12);padding:8px 6px;text-align:left}
.rawTbl th{font-weight:800;color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.08em}
.badge{display:inline-block;border-radius:999px;border:1px solid rgba(15,23,42,0.15);padding:3px 10px;font-size:12px;background:rgba(255,255,255,0.6)}
.slugInfo{border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:12px;background:rgba(255,255,255,0.6)}
.slugTitle{font-size:13px;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.slugName{margin-top:6px;font-size:16px;font-weight:900;line-height:1.25}
.slugPills{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.mapBtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.geBtn{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;text-decoration:none;transition:opacity .15s}.geBtn:hover{opacity:.82}
.geBtnEarth{background:#1a73e8;color:#fff}.geBtnMaps{background:#34a853;color:#fff}
.chartWrap{height:320px;border:1px solid var(--border);border-radius:16px;padding:8px;background:rgba(255,255,255,0.6);margin:10px 0 18px 0}
.obsForm input[type=date],.obsForm select,.obsForm textarea{width:100%;max-width:520px;padding:10px;border-radius:12px;border:1px solid var(--border);font-size:14px;font-family:inherit;background:#fff}
.obsForm textarea{max-width:760px}
.formRow{display:flex;gap:12px;flex-wrap:wrap}
.formRow label{font-size:13px;color:var(--fg);font-weight:700}
.obsForm button{padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#0f172a;color:#fff;font-weight:800;cursor:pointer}
.obsForm button:hover{opacity:.92}
.thWrap{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.thRight{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.cellLine{margin-bottom:4px}
.mobile-only{display:none}.desktop-only{display:block}
.debugWrap{margin-top:16px;display:none;}
html.debugOn .debugWrap{display:block;}
.debugTbl{width:100%;border-collapse:collapse;font-size:12px;line-height:1.35;}
.debugTbl th,.debugTbl td{border:1px solid #e5e7eb;padding:4px 6px;text-align:right;vertical-align:top;}
.debugTbl th:first-child,.debugTbl td:first-child{text-align:left;white-space:nowrap;}
.debugTbl .mutedCell{color:#6b7280;}

/* ── Observed History Controls ── */
.obsControls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 6px;}
.obsCtrlGroup{display:flex;align-items:center;gap:4px;}
.obsNavGroup{gap:8px;}
.obsCtrlLabel{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-right:2px;}
.obsBtn,.obsAmtBtn{font-family:inherit;font-size:12px;font-weight:700;color:var(--muted);background:rgba(255,255,255,0.7);border:1px solid var(--border);border-radius:8px;padding:5px 11px;cursor:pointer;transition:background .12s,color .12s;}
.obsBtn:hover,.obsAmtBtn:hover{background:#f1f5f9;color:var(--fg);}
.obsBtn.active,.obsAmtBtn.active{background:#F0FDFA;color:#0f766e;border-color:rgba(15,118,110,0.3);}
.obsNavBtn{font-family:inherit;font-size:12px;font-weight:700;color:var(--fg);background:rgba(255,255,255,0.7);border:1px solid var(--border);border-radius:8px;padding:5px 12px;cursor:pointer;transition:background .12s;}
.obsNavBtn:hover{background:#f1f5f9;}
.obsNavBtn:disabled{opacity:.4;cursor:default;}
.obsNavLabel{font-size:12px;font-weight:600;color:var(--muted);min-width:130px;text-align:center;}
.obsRangeDisplay{font-size:12px;font-weight:600;color:var(--muted);margin-left:8px;}
/* Desktop stacked-week grid for multi-week obs views */
.obsHistGrid{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.obsHistRow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.obsHistRow .sumCard{border-radius:10px;padding:8px;overflow:hidden;line-height:1.2;}
.obsHistRow .sumTop{display:grid;grid-template-columns:1fr;gap:4px;}
.obsHistRow .sumDate{font-weight:900;font-size:11px;}
.obsHistRow .sumIcons{display:flex;gap:4px;align-items:center;}
.obsHistRow .sumIcons img{width:14px;height:14px;}
.obsHistRow .sumIcos{display:flex;gap:3px;align-items:center;flex-wrap:wrap;}
.obsHistRow .sumIcos img{width:14px;height:14px;}
.obsHistRow .sumBody{margin-top:4px;}
.obsHistRow .sumLvl{font-size:11px;font-weight:700;}
.obsHistRow .sumTrend,.obsHistRow .sumMeta{font-size:10px;color:rgba(0,0,0,0.60);}
