/* Index Forecast Lab - the daily forecast (ifl_daily.py: the rail card, scoped .ifl-app .ifl-daily) and the phone
   view (ifl_mobile.py: inside the mobile shell, every rule under #mb_root .iflm). Served globally by Dash like
   every stylesheet under assets/, so nothing here may leak outside those two scopes. Tokens as the page
   (ifl_style.css) and the shell (assets/mobile/mb_style.css). */

/* ---- the rail card (desktop) ------------------------------------------------------------------------------- */
.ifl-app .ifl-daily-h { display: flex; align-items: center; gap: 6px; color: #cfefff; font-size: .74rem; font-weight: 650;
                        margin: 2px 0 6px; }
.ifl-app .ifl-daily-h i { color: #f0a030; }
.ifl-app .ifl-daily-ctl { display: flex; flex-direction: column; gap: 6px; }
.ifl-app .ifl-daily-pills label { font-size: .72rem; }
.ifl-app .ifl-daily-time { min-width: 0; }
.ifl-app .ifl-daily-note { color: #cfd9e3; font-size: .7rem; line-height: 1.5; margin-top: 4px; }
.ifl-app .ifl-daily-why { color: #f5d6a3; }
.ifl-app .ifl-daily-arm { margin-top: 6px; border-color: rgba(240,160,48,.75); color: #f5d6a3; background: rgba(240,160,48,.14); }

/* ---- the phone view ---------------------------------------------------------------------------------------- */
#mb_root .iflm { padding: 4px 14px calc(28px + env(safe-area-inset-bottom)); }
#mb_root .iflm .pos { color: var(--mb-good); }
#mb_root .iflm .neg { color: var(--mb-bad); }
#mb_root .iflm-hero { padding: 12px 12px 10px; }
#mb_root .iflm-hero-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#mb_root .iflm-hero-t { min-width: 0; }
#mb_root .iflm-setup { display: flex; flex-direction: column; gap: 1px; }
#mb_root .iflm-setup b { color: var(--mb-head); font-weight: 650; font-size: .98rem; line-height: 1.3; }
#mb_root .iflm-setup span { color: var(--mb-muted); font-size: .76rem; }
#mb_root .iflm-when { color: var(--mb-muted); font-size: .78rem; margin-top: 4px; line-height: 1.4; }
#mb_root .iflm-when i { color: var(--mb-acc); }
#mb_root .iflm-alert { color: #f5d6a3; font-size: .8rem; line-height: 1.4; padding: 8px 10px; border-radius: 12px; margin-top: 8px;
                       background: rgba(240,160,48,.08); border: 1px solid rgba(240,160,48,.35); }
#mb_root .iflm-alert i { color: var(--mb-acc); }
#mb_root .iflm-ib { flex: 0 0 44px; width: 44px; height: 44px; margin: -6px -6px 0 0; border-radius: 50%; background: var(--mb-chip);
                    border: 1px solid var(--mb-line); color: var(--mb-muted); }
#mb_root .iflm-ib:active { color: var(--mb-acc); border-color: var(--mb-acc); }
#mb_root .iflm-studies { margin: 0 0 8px; }
#mb_root .iflm-studies label { min-height: 40px; font-size: .8rem; }
#mb_root .iflm-tabs { margin: 0 0 10px; flex-wrap: nowrap; gap: 6px; }
#mb_root .iflm-tabs label { min-height: 44px; font-size: .86rem; padding: 0 6px; white-space: nowrap; }
#mb_root .iflm-tab { display: none; }
#mb_root .iflm-tabs-body.t-today .iflm-tab[data-l="today"], #mb_root .iflm-tabs-body.t-options .iflm-tab[data-l="options"],
#mb_root .iflm-tabs-body.t-follow .iflm-tab[data-l="follow"] { display: block; }

/* Today: one row per horizon, with a small band chart */
#mb_root .iflm-laws { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
#mb_root .iflm-law { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0;
                     border-top: 1px solid rgba(255,255,255,.05); }
#mb_root .iflm-law:first-child { border-top: 0; }
#mb_root .iflm-lh { flex: 0 0 74px; display: flex; flex-direction: column; line-height: 1.2; }
#mb_root .iflm-lh b { color: var(--mb-head); font-size: .86rem; font-weight: 600; }
#mb_root .iflm-lh span { color: var(--mb-muted); font-size: .66rem; }
#mb_root .iflm-lmid { flex: 1 1 auto; min-width: 0; }
#mb_root .iflm-lm { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#mb_root .iflm-lm b { font-size: 1rem; font-variant-numeric: tabular-nums; }
#mb_root .iflm-lm span { color: var(--mb-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
#mb_root .iflm-lp { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
#mb_root .iflm-lp b { color: #fff; font-size: .96rem; font-variant-numeric: tabular-nums; }
#mb_root .iflm-lp span { color: var(--mb-muted); font-size: .64rem; }
#mb_root .iflm-band { position: relative; height: 10px; margin-top: 5px; border-radius: 5px; background: rgba(255,255,255,.05); }
#mb_root .iflm-band span { position: absolute; top: 0; bottom: 0; }
#mb_root .iflm-b90 { background: rgba(240,160,48,.28); border-radius: 5px; }
#mb_root .iflm-b50 { background: rgba(240,160,48,.62); border-radius: 5px; }
#mb_root .iflm-b0 { width: 1px; top: -2px !important; bottom: -2px !important; background: rgba(255,255,255,.55); }
#mb_root .iflm-bmu { width: 6px; height: 6px; top: 2px !important; margin-left: -3px; border-radius: 50%; background: #fff; }
#mb_root .iflm-pos { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; }
#mb_root .iflm-big { color: #fff; font-size: 1.7rem; font-weight: 650; font-variant-numeric: tabular-nums; }
#mb_root .iflm-pos span { color: var(--mb-text); font-size: .84rem; }
#mb_root .iflm-ul { margin: 4px 0 0; padding-left: 18px; color: var(--mb-text); font-size: .82rem; line-height: 1.45; }
#mb_root .iflm-ul li { margin: 3px 0; }
#mb_root .iflm-warn { color: var(--mb-muted); font-size: .76rem; line-height: 1.45; padding: 0 4px 12px; }
#mb_root .iflm-warn i { color: var(--mb-acc); }

/* Options: expiries and proposals, each a <details> */
#mb_root .iflm-k { color: var(--mb-muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; margin: 12px 0 6px; }
#mb_root .iflm-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
#mb_root .iflm-row { border-radius: 14px; background: var(--mb-panel); border: 1px solid var(--mb-line); overflow: hidden; }
#mb_root .iflm-row > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px;
                               cursor: pointer; }
#mb_root .iflm-row > summary::-webkit-details-marker { display: none; }
#mb_root .iflm-row[open] > summary { background: rgba(255,255,255,.04); }
#mb_root .iflm-eh { flex: 0 0 64px; display: flex; flex-direction: column; line-height: 1.2; }
#mb_root .iflm-eh b { color: var(--mb-head); font-size: .92rem; }
#mb_root .iflm-eh span { color: var(--mb-muted); font-size: .68rem; }
#mb_root .iflm-em { flex: 1 1 auto; min-width: 0; font-size: .78rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
#mb_root .iflm-dim { color: var(--mb-muted); }
#mb_root .iflm-tbl { width: calc(100% - 20px); margin: 4px 10px 0; border-collapse: collapse; font-size: .8rem;
                     font-variant-numeric: tabular-nums; }
#mb_root .iflm-tbl th { color: var(--mb-muted); font-weight: 500; font-size: .68rem; text-align: right; padding: 4px 4px;
                        border-bottom: 1px solid var(--mb-line); }
#mb_root .iflm-tbl td { text-align: right; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
#mb_root .iflm-tbl th:first-child, #mb_root .iflm-tbl td:first-child { text-align: left; color: var(--mb-head); }
#mb_root .iflm-tbl tr.atm td { background: rgba(75,233,250,.06); }
#mb_root .iflm-note { color: var(--mb-muted); font-size: .72rem; line-height: 1.4; padding: 8px 12px 12px; }
#mb_root .iflm-tmid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
#mb_root .iflm-tmid b { color: #fff; font-size: .86rem; font-weight: 600; }
#mb_root .iflm-tmid span { color: var(--mb-muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mb_root .iflm-tp { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
#mb_root .iflm-tp b { font-size: .96rem; font-variant-numeric: tabular-nums; }
#mb_root .iflm-tp span { color: var(--mb-muted); font-size: .64rem; }
#mb_root .iflm-kvs { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 12px; border-top: 1px solid var(--mb-line); }
#mb_root .iflm-kv { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; font-variant-numeric: tabular-nums; }
#mb_root .iflm-kk { color: var(--mb-muted); }
#mb_root .iflm-foot { color: #7f93a8; font-size: .72rem; line-height: 1.45; padding: 2px 4px 10px; }

/* Follow */
#mb_root .iflm-one { margin-top: 10px; }
#mb_root .iflm-times label { min-height: 44px; flex: 1 1 28%; font-size: .84rem; white-space: nowrap; }
#mb_root .iflm .ms-push-status { font-size: .86rem; margin-top: 8px; color: var(--mb-text); }
#mb_root .iflm .ms-push-btns { flex-direction: column; gap: 0; margin-top: 2px; }
#mb_root .iflm .ms-push .ms-push-on, #mb_root .iflm .ms-push .ms-push-off,
#mb_root .iflm .ms-push .ms-push-test { display: none; color: var(--mb-head); background: var(--mb-chip);
                                        border-color: var(--mb-line); font-weight: 500; }
#mb_root .iflm .ms-push[data-ms-push-state="on"] .ms-push-status { color: #a9e6b0; }
#mb_root .iflm .ms-push[data-ms-push-state="blocked"] .ms-push-status,
#mb_root .iflm .ms-push[data-ms-push-state="server"] .ms-push-status { color: #ffb4ac; }
#mb_root .iflm .ms-push[data-ms-push-state="off"] .ms-push-on { display: flex; color: #1b1205; background: var(--mb-acc);
                                                               border-color: var(--mb-acc); font-weight: 650; }
#mb_root .iflm .ms-push[data-ms-push-state="on"] .ms-push-off,
#mb_root .iflm .ms-push[data-ms-push-state="on"] .ms-push-test { display: flex; }