/* Plan my time's dashboard before the trip (outing-day.js). */
.od { margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.od-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) { .od-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.od-tile { min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--panel-2, rgba(255, 255, 255, 0.05)); border: 1px solid var(--line, #3a2c1b); }
.od-k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted, #8a8a8a); }
.od-v { margin-top: 3px; font: 700 22px/1.15 Georgia, serif; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.od-s { margin-top: 2px; font-size: 11.5px; color: var(--muted, #8a8a8a); overflow-wrap: anywhere; }
.od-tile.ok .od-v { color: var(--ok, #82c99b); }
.od-tile.warn .od-v { color: var(--warn, #d9a441); }
.od-verdict { font-size: 13.5px; font-weight: 700; color: var(--muted, #8a8a8a); }
.od-verdict.ok { color: var(--ok, #82c99b); }
.od-verdict.warn { color: var(--warn, #d9a441); }
.od-line { position: relative; }
.od-track { display: flex; gap: 2px; height: 26px; padding: 3px; border-radius: 9px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line, #3a2c1b); overflow: hidden; }
.od-block { display: block; min-width: 3px; border-radius: 4px; }
.od-block.over { opacity: 0.55; background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.45) 0 4px, transparent 4px 8px) !important; }
.od-free { display: block; border-radius: 4px; border: 1px dashed rgba(130, 201, 155, 0.5); }
.od-end { position: absolute; top: -3px; bottom: 15px; width: 2px; background: var(--gold, #e5af4f); }
.od-cap { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--muted, #8a8a8a); }
.od-bars { display: flex; flex-direction: column; gap: 8px; }
.od-bar { display: grid; grid-template-columns: 5.5em minmax(60px, 1fr); gap: 2px 10px; align-items: center; }
.od-bar-n { font-weight: 700; font-size: 13px; color: var(--gold, #e5af4f); }
.od-bar-t { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.od-bar-t i { display: block; height: 100%; border-radius: 4px; }
.od-bar-t2 { grid-column: 2; font-size: 12px; color: var(--muted, #8a8a8a); }