/* today.css: the first screen (an inbox, D-052) and the compact route overview; also "How a route works". Uses the tokens of app.css.
   CLASSES
     .inbox .inbox-row .inbox-main .inbox-title .inbox-why .inbox-alarm .inbox-age .inbox-act .inbox-head .inbox-calm .inbox-calm-title .inbox-foot
     .route-table .route-name .route-word .route-how .route-why .route-wait .route-boxes .route-box .route-none
     .route-stack .route-card .route-dl
     .flow .flow-step .flow-n .flow-main .flow-title .flow-what .flow-rule .flow-side .flow-where .sys .flow-others
*/

/* ---------------------------------------------------------------------------------------------- what needs doing */
.inbox-head { align-items: center; }
.inbox { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.inbox-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) 72px auto; align-items: center; column-gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.inbox-row > .dot { align-self: start; margin-top: 7px; }
.inbox-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inbox-title { font: 500 var(--fs-body)/1.45 var(--font); }
.inbox-title a { color: var(--ink); text-decoration: none; }
.inbox-title a:hover { text-decoration: underline; }
.inbox-why { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); max-width: 80ch; }
.inbox-why .who { color: var(--ink); margin-right: var(--s2); }
.inbox-alarm { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }
.inbox-age { font-size: var(--fs-label); color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inbox-act { display: flex; justify-content: flex-end; min-width: 140px; }
.inbox-act .btn { min-width: 140px; }
.inbox-calm { padding: var(--s5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s1); }
.inbox-calm-title { display: flex; align-items: center; gap: var(--s3); font: 500 var(--fs-body)/1.5 var(--font); }
.inbox-calm .muted { padding-left: calc(8px + var(--s3)); }
.inbox-foot { margin-top: var(--s3); }
@media (max-width: 720px) {
  .inbox-row { grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-areas: "dot main age" ". act act"; row-gap: var(--s3); column-gap: var(--s3); }
  .inbox-row > .dot { grid-area: dot; }
  .inbox-main { grid-area: main; }
  .inbox-age { grid-area: age; align-self: start; }
  .inbox-act { grid-area: act; justify-content: stretch; min-width: 0; }
  .inbox-act .btn { width: 100%; }
  .inbox-head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}

/* ---------------------------------------------------------------------------------------------- routes, compact */
.route-table th[scope="row"] { font-weight: 400; min-width: 180px; }
.route-table td, .route-table th[scope="row"] { padding-top: var(--s4); padding-bottom: var(--s4); }
.route-name { display: flex; align-items: center; gap: var(--s2); font: 500 var(--fs-small)/1.45 var(--font); color: var(--ink); }
.route-word { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s3); margin: 2px 0 0 calc(8px + var(--s2)); }
.route-word .tag::before { display: none; }
.route-how { font-size: var(--fs-label); }
.route-why { margin: 2px 0 0 calc(8px + var(--s2)); font-size: var(--fs-label); line-height: 1.4; max-width: 28ch; }
.route-wait { display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; font-size: var(--fs-small); }
.route-wait:hover .num { text-decoration: underline; }
.route-wait .muted, .route-wait.muted { color: var(--muted); }
.route-boxes { display: flex; flex-direction: column; gap: var(--s1); align-items: flex-start; }
.route-box { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); text-decoration: none; white-space: nowrap; }
.route-box:hover span { text-decoration: underline; }
.route-none { color: var(--idle); }
.route-stack { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.route-card { padding: var(--s4) 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s2); }
.route-card .route-name .tag { margin-left: auto; }
.route-card .route-why { margin: 0; max-width: none; }
.route-dl { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s2) var(--s3); margin: 0; font-size: var(--fs-small); }
.route-dl dt { color: var(--muted); }
.route-dl dd { margin: 0; min-width: 0; }
.route-dl .route-boxes { flex-direction: row; flex-wrap: wrap; gap: var(--s1) var(--s4); }

/* ---------------------------------------------------------------------------------------------- how a route works */
.flow-others { margin: calc(var(--s5) * -1) 0 var(--s5); }
.flow { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.flow-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) 260px; column-gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.flow-n { font: 500 var(--fs-small)/1.6 var(--font); color: var(--muted); }
.flow-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.flow-title { font: 500 var(--fs-body)/1.45 var(--font); }
.flow-what { font-size: var(--fs-small); line-height: 1.55; max-width: 72ch; }
.flow-rule { display: flex; gap: var(--s2); font-size: var(--fs-small); line-height: 1.5; color: var(--muted); max-width: 72ch; }
.flow-rule .label { flex: none; min-width: 52px; }
.flow-rule.is-off { color: var(--look); }
.flow-side { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.flow-side .who { color: var(--ink); }
.flow-where { display: flex; flex-wrap: wrap; gap: var(--s1); }
.sys { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--bg-2); font: 500 var(--fs-label)/1 var(--font); color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) {
  .flow-step { grid-template-columns: 24px minmax(0, 1fr); row-gap: var(--s2); }
  .flow-side { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }
}