/* css/modules/tl.css: the .tl-* module — split out of css/app.css by #360's sibling stage (#362).
   Load order is core.css, then every modules/*.css alphabetically; rules here
   are in their original relative order, and no selector in this file appears in
   any other (asserted in tests/css-split-check.js). */

.tl-l--grey{border-top-color:#c3cad6}
.tl-l--amber{border-top-color:#e8890c}
.tl-l--green{border-top-color:#1f9d55}
.tl-l--red{border-top-color:#c62828}
/* The pip is the LEGEND's swatch. It is deliberately NOT drawn on a run — see the
   measurement in tlRow(): a pip plus three chips needs 125px in a 94px row and
   wrapped to three lines. */
.tl-pip{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  border-radius:999px;border:1px solid rgba(34,31,32,.16);flex:none}
.tl-pip i{font-style:normal;font-weight:900;font-size:9px;line-height:1}
.tl-pip--grey{background:#dfe4ec;color:#5c6472}
.tl-pip--amber{background:#f9a825;color:#3d2b00}
.tl-pip--green{background:#1f9d55;color:#fff}
.tl-pip--red{background:#c62828;color:#fff}
/* One chip per phase this component covers, and they have to fit a ~94px row:
   the letter code carries the identity, the fill and the glyph carry the state,
   and the padding is as tight as it is because three of them measured 84px here
   against 94px available. */
.tl-c{display:inline-flex;align-items:center;gap:1px;padding:1px 2px;border-radius:4px;
  font-size:8px;font-weight:900;white-space:nowrap;
  border:1px solid rgba(34,31,32,.14)}
.tl-c i{font-style:normal;font-weight:900;font-size:8px}
.tl-c--grey{background:#eef1f6;color:#5c6472}
.tl-c--amber{background:#ffe6b8;color:#7a4a06}
.tl-c--green{background:#d6efdf;color:#125c32}
.tl-c--red{background:#fbdcda;color:#9c1f1f}
/* The legend, and the HORIZON note under it — which is the honest half. */
.tl-leg{padding:16px 18px;margin-top:14px}
.tl-leg__row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:9px}
.tl-k{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--ink)}
.tl-leg__p{margin:0 0 8px;color:var(--muted);font-weight:600;font-size:12.5px;line-height:1.6}
.tl-leg__p b{color:var(--ink)}
.tl-leg__p:last-child{margin-bottom:0}
.tl-leg__p--hz{color:#7a4a12;background:#fff6ef;border-left:4px solid var(--orange);
  border-radius:0 9px 9px 0;padding:9px 12px;font-weight:700}
/* The same answer written out, in the run edit modal — the chips are 8px and
   their explanation is a hover title, which is no use on a touch screen. */
.tl-p{margin-top:2px;padding:11px 13px;border-radius:10px;background:#f8fafc;border:1px solid var(--line)}
.tl-p--red{background:#fdf0ee;border-color:#f3cdc6}
.tl-p--none{color:var(--muted);font-weight:700;font-size:12.5px;line-height:1.55}
.tl-p__hd{display:flex;align-items:center;gap:7px;font-size:13.5px;margin-bottom:7px}
.tl-p__r{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:12.5px;
  font-weight:700;padding:4px 0;border-top:1px dashed var(--line)}
.tl-p__s{color:var(--muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
.tl-p__w{flex-basis:100%;color:var(--muted);font-weight:600;font-size:11.5px;line-height:1.5}
.tl-p__f{margin:8px 0 0;color:var(--muted);font-weight:600;font-size:11.5px;line-height:1.5}
.tl-p__f b{color:var(--ink)}