/* Flows Learnable Technicals (apps.py: _flt_body + the three figures), harmonized with the other idea apps on
   2026-10-16: a brand header that leaves room for the app toolbar, the amber button, charts in cards (the page kit's
   .pk-card), the next-day distribution and the learned geometry side by side. Loaded globally: flt- scoped.
   Tokens: panels rgba(0,0,0,.6), radius 10px, text #e8e8e8, muted #9fb3c8, headings #cfefff, accent #f0a030. */

.flt-app { color: #e8e8e8; font-size: 13px; }
.flt-app * { box-sizing: border-box; }
.flt-top { display: flex; align-items: flex-end; gap: 18px; padding: 0 200px 10px 0; }
.flt-brand h3 { margin: 0; font-size: 1.32rem; color: #cfefff; font-weight: 600; letter-spacing: .2px; }
.flt-brand h3 span { color: #9fb3c8; font-weight: 400; font-size: .95rem; }
.flt-brand > div { color: #9fb3c8; font-size: .78rem; max-width: 1060px; line-height: 1.45; }
.flt-bar { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; flex-wrap: wrap; }
.flt-bar .pk-btn { height: 34px; }
.flt-hint { color: #9fb3c8; font-size: .78rem; }
.flt-card { padding: 10px 12px 6px; margin-bottom: 12px; }
.flt-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.flt-graph { height: 360px; width: 100%; }
.flt-graph.tall { height: 400px; }
.flt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.flt-grid .flt-card { margin-bottom: 0; }
@media (max-width: 1100px) { .flt-grid { grid-template-columns: 1fr; } .flt-top { padding-right: 120px; } }