/* Today's day (day.js, Today First): the top card of the phase it is, Waiting for You, Coming Up and The Rest of Today.
   Built on app.css's neutral surfaces, rows, pills and colours (its tokens, light and dark), with nothing inline. */

/* ---- the sections ---- */
#top, #waiting, #coming, #rest { display: grid; min-width: 0; }
#rest { gap: 14px; }
#rest > .slabel, #waiting > .slabel, #coming > .slabel { margin-bottom: 0; }
#waiting > .slabel, #coming > .slabel { margin-bottom: 8px; }
#rest > .slabel, #waiting > .slabel, #coming > .slabel { margin-top: 18px; }
#waiting > .group, #coming > .group { min-width: 0; }
/* (the sections stand apart where the page lays them out, and in the four cards' own list before it does) */
#cards > .day-sec + .day-sec:not([hidden]) { margin-top: 10px; }

/* ---- the top card ---- */
.day-top { --dt-ac: var(--ifl-accent-fill, var(--c-inflite)); gap: 12px; padding-top: 20px; }
.day-top[data-kind="weather"] { --dt-ac: var(--ifl-accent-fill, var(--c-weather)); }
.day-top[data-kind="ride"], .day-top[data-kind="done"] { --dt-ac: var(--ifl-accent-fill, var(--c-fitness)); }
.day-top[data-kind="closed"] { --dt-ac: var(--ifl-accent-fill, var(--c-account)); }
.dt-chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--dt-ac) 22%, transparent); color: var(--text); font-size: 13.5px; font-weight: 650; overflow-wrap: anywhere; }
.dt-chip svg { flex: none; width: 15px; height: 15px; }
.dt-h { font-size: 28px; letter-spacing: -0.4px; }
.dt-rows { list-style: none; margin: 2px 0 0; padding: 0 14px; border-radius: var(--ifl-radius-row, 16px); background: var(--glass-ctl); }
.dt-rows li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 9px 0; font-size: 15px; line-height: 1.3; color: var(--text); }
.dt-rows li + li { box-shadow: 0 -0.5px 0 var(--line); }
.dt-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; }
.dt-ic-x { display: grid; place-items: center; background: var(--glass-ctl); color: var(--text-2); }
.dt-ic-x svg { width: 15px; height: 15px; }
.dt-lines { display: grid; gap: 4px; }
.dt-lines .tc-p:first-child { color: var(--text); }
.dt-history { min-width: 0; border-top: 1px solid var(--line); }
.dt-history > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px;
  padding: 8px 2px; list-style: none; cursor: pointer; color: var(--tint-text); font-size: 15px; font-weight: 600; border-radius: 8px; }
.dt-history > summary::-webkit-details-marker { display: none; }
.dt-history-chevron { flex: none; display: grid; transition: transform var(--ifl-motion-release, .42s) var(--ifl-motion-spring, var(--ease-out)); }
.dt-history-chevron svg { width: 16px; height: 16px; }
.dt-history[open] > summary .dt-history-chevron { transform: rotate(90deg); }
.dt-history[open] > :not(summary) { animation: day-in var(--ifl-motion-enter, .36s) var(--ifl-motion-glide, var(--ease-out)); }
/* Native disclosure interpolation is progressive; older browsers keep the normal details interaction. */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  .dt-history { interpolate-size: allow-keywords; }
  .dt-history::details-content { block-size: 0; overflow: clip; transition: block-size var(--ifl-motion-layout, .28s) var(--ifl-motion-glide, var(--ease-out)), content-visibility var(--ifl-motion-layout, .28s) allow-discrete; }
  .dt-history[open]::details-content { block-size: auto; }
}
.dt-history .tc-foot { margin-top: 12px; }
.dt-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.dt-stats > div { min-width: 0; padding: 9px 12px 10px; border-radius: 16px; background: var(--glass-ctl); }
.dt-stats dt { font-size: 12px; font-weight: 500; color: var(--text-2); }
.dt-stats dd { margin: 2px 0 0; font: 700 19px/1.15 var(--font-d); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dt-stats .dt-up dd, .dt-stats .dt-good dd { color: var(--good-text); }
.dt-stats .dt-down dd { color: var(--danger); }
.dt-stats .dt-warn dd { color: var(--warn); }
.dt-wrote { display: grid; gap: 6px; }
.dt-said { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--glass-ctl); font-size: 15px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.dt-to { margin: 0; font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.day-top .tc-foot .pill svg { width: 16px; height: 16px; }
.day-top .tc-foot a[data-do="open"] svg { order: 2; width: 14px; height: 14px; opacity: 0.75; }
.dt-h:focus { outline: none; }

/* ---- Waiting for You ---- */
.dw-row { position: relative; }
.dw-row + .dw-row::before { content: ""; position: absolute; top: 0; left: 72px; right: 0; height: 0.5px; background: var(--line); }
.dw-main { align-items: center; }
.dw-main .tx small { color: var(--text-2); }
.dw-words { font-size: 15px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.dw-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px 72px; margin-top: -4px; }
.dw-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--glass-ctl);
  box-shadow: var(--ifl-shadow-control, 0 1px 4px rgba(0,0,0,.08)); color: var(--text); font: 600 14px/1 var(--font); text-decoration: none; }
.dw-chip svg { width: 15px; height: 15px; }

/* ---- Coming Up ---- */
.dc-row { position: relative; display: flex; align-items: center; min-width: 0; }
.dc-row + .dc-row::before { content: ""; position: absolute; top: 0; left: 72px; right: 0; height: 0.5px; background: var(--line); }
.dc-main { flex: 1; min-width: 0; gap: 12px; -webkit-touch-callout: none; }
.dc-row[data-sends] .dc-main { padding-right: 6px; }
.dc-tm { flex: none; width: 46px; display: grid; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.dc-tm small { font-size: 12px; font-weight: 500; color: var(--text-2); }
.dc-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; }
.dc-send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: 8px; border-radius: 50%; color: var(--tint-text); text-decoration: none; }
.dc-send svg { width: 19px; height: 19px; }
.dc-send:active { background: var(--press); }

/* ---- Mail on Your Day (trip.js): the trip card above Waiting for You, Mail's rows in Coming Up, the trip day by day and
   a booking's sheet. Mail's teal for what came from Mail, the trip's violet for the trip itself ---- */
#trip { --c-trip: var(--ifl-accent-fill, #73d781); }
#trip:not([hidden]) { margin-top: 14px; }
.trip-card { width: 100%; padding: 14px; gap: 10px; text-align: left; border-radius: var(--r-card); color: var(--text); }
.trip-card:active { transform: scale(0.99); }
.trip-card:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
.tp-hd { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.tp-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ifl-accent-gradient, var(--c-trip)); color: var(--ifl-on-accent, #10150d); box-shadow: none; }
.tp-ic svg { width: 21px; height: 21px; }
.tp-hd .tx { display: grid; gap: 1px; min-width: 0; }
.tp-h { font: 700 19px/1.2 var(--font-d); letter-spacing: -0.2px; overflow-wrap: anywhere; }
.tp-hd small { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.tp-hd .chev, .trip-card .chev { color: var(--text-3); display: grid; }
.tp-hd .chev svg { width: 18px; height: 18px; }
.tp-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border-radius: var(--ifl-radius-row, 16px); background: var(--glass-ctl); font-size: 14px; line-height: 1.3; }
.tp-next .tx b { font-weight: 650; }
.tp-next .tx span { color: var(--text-2); }
.tp-next .tx { overflow-wrap: anywhere; }
.tp-pill { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text-2); white-space: nowrap; }
.tp-ref { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-wx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tp-day { display: grid; justify-items: center; gap: 1px; padding: 7px 4px; border-radius: var(--ifl-radius-row, 16px); background: var(--glass-ctl); }
.tp-day small { font-size: 12px; color: var(--text-2); }
.tp-day b { font: 650 15px/1.2 var(--font); font-variant-numeric: tabular-nums; }
.tp-day .wi { display: block; }
/* (Weather's icons are drawn for its own dark skies: in the light, a shadow keeps their pale clouds in sight, as the
   Weather card's own icon has one) */
.tp-day .wi, .tv-wx .wi { filter: drop-shadow(0 1px 1.5px rgba(10, 20, 50, 0.28)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) :is(.tp-day, .tv-wx) .wi { filter: drop-shadow(0 0 1px rgba(10, 20, 50, 0.55)) drop-shadow(0 1px 2px rgba(10, 20, 50, 0.3)); } }
:root[data-theme="light"] :is(.tp-day, .tv-wx) .wi { filter: drop-shadow(0 0 1px rgba(10, 20, 50, 0.55)) drop-shadow(0 1px 2px rgba(10, 20, 50, 0.3)); }
/* (rows from Mail: the thing's kind in Mail's teal, a small envelope on it that says it came from Mail, and the number that
   matters on the right, its day under it) */
.bk-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--c-mail); color: #fff; box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35); }
.bk-ic svg { width: 18px; height: 18px; }
.ml-ic { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-mail); color: #fff; box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35); }
.ml-ic > svg { width: 20px; height: 20px; }
.ml-ic.dc-ic, .ml-ic.bk-ic { width: 32px; height: 32px; border-radius: 9px; }
.ml-ic.dc-ic > svg, .ml-ic.bk-ic > svg { width: 18px; height: 18px; }
.ml-via { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; background: var(--glass-strong, #fff); color: var(--c-mail);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--text) 8%, transparent); }
.ml-via svg { width: 10px; height: 10px; }
.ml-amt { flex: none; display: grid; justify-items: end; gap: 1px; text-align: right; }
.ml-amt b { font: 600 16px/1.2 var(--font); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.ml-amt small { font-size: 12.5px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .chg, .bk-p .chg, .ml-n .chg { display: inline-block; padding: 0 6px; border-radius: 7px; font-size: 12px; font-weight: 700; line-height: 1.5; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); font-variant-numeric: tabular-nums; }
button.dc-main, button.dm-main { font: inherit; }
/* (Coming Up's: no time on the left, the number on the right; on a computer the left kept, so the icons stay on the
   timeline's line with the others) */
.dc-mail .dc-tm:empty { display: none; }
@media (min-width: 1100px) { .day-side #coming .dc-mail .dc-tm:empty { display: grid; visibility: hidden; } }
/* (a parcel's four-part bar: a part for each step done, the one it's at half filled) */
.ml-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.ml-track i { height: 4px; border-radius: 2px; background: var(--glass-ctl); }
.ml-track i.on { background: var(--c-mail); }
.ml-track i.now { background: linear-gradient(90deg, var(--c-mail) 50%, var(--glass-ctl) 50%); }
.ml-tracklab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.ml-tracklab span:nth-child(2), .ml-tracklab span:nth-child(3) { text-align: center; }
.ml-tracklab span:last-child { text-align: right; }
.ml-tracklab span.on { color: var(--text-2); }
.ml-hero { margin: 4px 0 12px; }
.ml-hero .ml-track { margin-top: 0; }
.ml-hero .ml-track i { height: 6px; border-radius: 3px; }
/* (Waiting for You's rows from Mail, and the quiet line of what paid itself) */
.dm-main { align-items: center; }
.dm-quiet { display: block; width: 100%; margin: 0; padding: 11px 18px 13px 72px; border: 0; background: none; text-align: left; font: 600 14px/1.35 var(--font); color: var(--text-3); position: relative; }
.dm-quiet::before { content: ""; position: absolute; top: 0; left: 72px; right: 0; height: 0.5px; background: var(--line); }
.group > .dm-quiet:first-child::before { display: none; }
button.dm-quiet { cursor: pointer; }
button.dm-quiet:active { background: var(--press); }
.dm-quiet:focus-visible, .dm-main:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }
/* (the trip, day by day, in its sheet) */
.tv-head { display: flex; justify-content: space-between; gap: 10px; margin: 0 4px 12px; font-size: 15px; color: var(--text-2); }
.tv-cnt { flex: none; font-size: 13.5px; font-weight: 600; color: var(--text-3); }
/* (a booking hidden, still in its day: faded, with Put Back) */
.tv-hid .bk-ic { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--line); }
.tv-hid .tx b, .tv-hid .tx small { color: var(--text-3); }
.tv-back { flex: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--glass-ctl); color: var(--tint-text); font: 700 14px/1 var(--font); cursor: pointer; }
.tv-back:active { filter: brightness(1.15); }
.tv-back:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
.tv-list { padding-bottom: 4px; }
.tv-day { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; padding: 14px 18px 4px; font: 700 12.5px/1.2 var(--font); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-3); }
.tv-wx { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13.5px; color: var(--text-2); }
.tv-row { font: inherit; }
.tv-row + .tv-row::before { left: 64px; }
.tv-tm { flex: none; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.tv-none { margin: 0; padding: 6px 18px 12px 64px; font-size: 14px; color: var(--text-3); }
/* (a booking's sheet: what and when, then its three things to do, one under another) */
.bk-sheet { display: grid; gap: 4px; }
.bk-p { margin: 0; font-size: 16px; color: var(--text); overflow-wrap: anywhere; }
.bk-when { margin: 0 0 10px; font-size: 14.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bk-acts { display: grid; gap: 8px; }
.bk-act { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 16px; background: var(--glass-ctl); color: var(--text); font: 600 16px/1.2 var(--font); text-decoration: none; text-align: left; }
.bk-act svg { flex: none; width: 19px; height: 19px; color: var(--tint-text); }
.bk-act.go { background: var(--ifl-accent-gradient, var(--c-mail)); color: var(--ifl-on-accent, #10150d); }
.bk-act.go svg { color: inherit; }
.bk-act:active { filter: brightness(1.12); }
.bk-act:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
/* (a repeating invite's next dates) */
.bk-occ { margin: 2px 0 12px; }
.bk-o { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 16px; }
.bk-o + .bk-o::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--line); }
.bk-od { display: grid; justify-items: center; line-height: 1.1; }
.bk-od small { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
.bk-od b { font: 700 20px/1.1 var(--font-d); font-variant-numeric: tabular-nums; }
.bk-o .tx { display: block; min-width: 0; }
.bk-o .tx b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-o .tx small { display: block; font-size: 13px; color: var(--text-2); }
.bk-o.off .tx b { text-decoration: line-through; opacity: 0.6; }
.bk-o .chg { display: inline-block; padding: 0 6px; border-radius: 7px; font-size: 12px; font-weight: 700; line-height: 1.5; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.bk-pill { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good-text); white-space: nowrap; }
.bk-pill.off { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
/* (the Bills sheet: the month big, six months of bars, the split by kind; then its rows) */
.ml-bills { display: grid; gap: 0; }
.ml-bills > .slabel { margin: 18px 18px 8px; }
.ml-big { display: grid; gap: 3px; padding: 14px 16px 16px; border-radius: var(--r-group); }
.ml-big > small { font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
.ml-big > b { font: 700 30px/1.15 var(--font-d); font-variant-numeric: tabular-nums; }
.ml-n { font-size: 14px; color: var(--text-2); }
.ml-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; height: 56px; margin-top: 24px; }
.ml-bars i { position: relative; display: block; height: var(--h, 50%); border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--c-mail) 50%, transparent); }
.ml-bars i.now { background: var(--c-mail); }
.ml-bars em { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); font: 700 11.5px/1 var(--font); font-style: normal; color: var(--text); white-space: nowrap; }
.ml-barlab { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--text-3); text-align: center; }
.ml-split { display: flex; gap: 3px; height: 8px; margin-top: 14px; }
.ml-split i { flex: var(--share, 1) 1 0; min-width: 4px; border-radius: 4px; }
.ml-cats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.ml-cats span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ml-cats i { width: 8px; height: 8px; border-radius: 3px; }
.t-mail { background: var(--c-mail); } .t-weather { background: var(--c-weather); } .t-trip { background: #6c5ce7; } .t-fitness { background: var(--c-fitness); } .t-markets { background: var(--c-markets); }

/* ---- what Chat's engine says, faded in as it comes (about a second after the day's drawn) ---- */
.dw-words.in, .dt-said.in { animation: day-in var(--ifl-motion-enter, .36s) var(--ifl-motion-glide, var(--ease-out)); }
@keyframes day-in { from { opacity: .86; transform: translateY(3px); } }

/* ---- narrow screens ---- */
@media (max-width: 360px) {
  .dt-h { font-size: 21px; }
  .dw-chips { padding-left: 18px; }
  .dc-tm { width: 42px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .dw-words.in, .dt-said.in, .dt-history[open] > :not(summary) { animation: none; } .dt-history-chevron, .dt-history::details-content { transition: none; } }

/* ---- desktop: one ordered grid for the summary, timeline and app cards.
   layout.js measures natural heights into small row spans; CSS alone remains a readable grid. ---- */
.day-side { display: grid; min-width: 0; }
@media (min-width: 1100px) {
  #today.view { max-width: 1800px; display: grid; grid-template-columns: repeat(var(--today-columns, 2), minmax(0, 1fr));
    gap: 20px; align-items: start; grid-auto-flow: row; }
  #today.view > #top { grid-column: span var(--today-summary-columns, 2); }
  #today.view > #kept { grid-column: 1 / -1; }
  #today.view > .day-side, #today.view > #rest { display: contents; }
  #today.view > .day-side > section, #today.view > #rest > .tcard { min-width: 0; margin: 0; }
  #today.view > .day-side > section > .slabel { margin: 0 12px 10px; }
  /* App headings identify the cards; retain the group heading for assistive technology. */
  #today.view > #rest > .slabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #today.view.today-packed { grid-auto-rows: 4px; row-gap: 0; }
  #today.view.today-packed > :not(.day-side):not(#rest),
  #today.view.today-packed > .day-side > section,
  #today.view.today-packed > #rest > :not(.slabel) { grid-row-end: span var(--tile-rows, 1); align-self: start; }
  .today-in:has(#today:not([hidden])) #hd .ifh { padding-left: max(28px, calc((100% - 1800px) / 2 + 28px));
    padding-right: max(28px, calc((100% - 1800px) / 2 + 28px)); }
}
@media (min-width: 1100px) {
  /* (Coming Up as a timeline: Now at its head, a line through the rows' icons, no rules between them) */
  .day-side #coming > .group { position: relative; padding: 0 0 6px; }
  .day-side #coming > .group::before { content: "Now"; display: flex; align-items: center; height: 40px; padding-left: 18px; font-size: 15px; font-weight: 700; color: var(--tint-text); }
  .day-side #coming > .group::after { content: ""; position: absolute; z-index: 0; left: 86px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--tint);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tint) 22%, transparent); }
  .day-side #coming .dc-row { z-index: 1; }
  .day-side #coming .dc-row::after { content: ""; position: absolute; z-index: -1; left: 90px; top: 0; bottom: 0; width: 2px; background: var(--line); }
  .day-side #coming .dc-row:last-child::after { bottom: 50%; }
  .day-side #coming .dc-row + .dc-row::before { display: none; }
  .day-side #coming .dc-main { min-height: 54px; }
  .day-side #coming .dc-ic { position: relative; z-index: 1; }
}