/* "Ara": the big card of what's on now, the day's progress and the row of photo cards. */
.dayprog{display:flex;gap:4px;margin:4px 0 16px}
.dayprog i{flex:1;height:6px;border-radius:3px;background:var(--line)}
.dayprog i.ok{background:var(--ok)}
.dayprog i.now{background:var(--now)}
.sim-badge{margin:2px 0 12px}

.nowcard,.countcard{background:var(--panel);border-radius:28px;padding:8px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.nowcard.live{box-shadow:0 0 0 2px color-mix(in srgb,var(--now) 45%,transparent),var(--shadow)}
.photo.hero{height:min(46vw,210px);border-radius:22px}
.nc-body{display:flex;flex-direction:column;gap:10px;padding:14px 10px 12px}
.nc-kicker{display:inline-flex;align-items:center;gap:7px;font:700 var(--fs-s)/1 var(--body);color:var(--muted)}
.nc-kicker.red{color:var(--now)}
.nc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.nc-head h2{font-size:clamp(24px,7vw,28px);overflow-wrap:anywhere}
.nc-time{font:800 var(--fs-l)/1 var(--body);flex:none}
.nc-note{margin:0;color:var(--muted);font-size:var(--fs-m)}
.nc-acts{display:flex;gap:8px;margin-top:4px}
.nc-acts .btn{flex:1;min-height:56px;font-size:19px}
.tickbig{flex:none;width:56px;height:56px;border-radius:50%;border:0;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;padding:0}
.tickbig svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tickbig[aria-pressed="true"]{background:var(--ok);color:#fff}
.nc-after{margin:2px 0 0;color:var(--muted);font-size:var(--fs-s)}
.nc-after b{color:var(--ink)}
.pbar{height:4px;background:var(--rule);margin:0 -8px -8px}
.pbar b{display:block;height:100%;background:var(--now)}
.count{font:700 clamp(56px,18vw,80px)/.9 var(--display);letter-spacing:-.02em}
.count small{font:700 var(--fs-l)/1 var(--body);margin-left:8px;color:var(--muted);letter-spacing:0}

/* Swipe-sideways row of photo cards */
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(-1*max(20px,env(safe-area-inset-left,0px)));padding:0 max(20px,env(safe-area-inset-left,0px)) 4px}
.rail::-webkit-scrollbar{display:none}
.railcard{flex:none;width:200px;height:150px;border-radius:var(--r-card);position:relative;overflow:hidden;scroll-snap-align:start;
  color:#fff;text-decoration:none;background:var(--dark);box-shadow:var(--shadow)}
.railcard .photo.fill{position:absolute;inset:0;background:#1F5058;color:#9CCFC8}
.railcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.75))}
.rc-time{position:absolute;left:12px;top:12px;z-index:1;padding:6px 10px;border-radius:999px;background:#fff;color:var(--ink);font:700 var(--fs-xs)/1 var(--body)}
.rc-text{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;display:grid;gap:2px}
.rc-text b{font:600 18px/1.1 var(--display);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rc-text small{font-size:var(--fs-xs);opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Day done / trip done / things to check */
.donecard{background:var(--panel);border-radius:28px;padding:24px;text-align:center;display:grid;justify-items:center;gap:8px}
.donecard .ico.big{width:56px;height:56px;border-radius:50%;background:var(--ok-bg);color:var(--ok)}
.donecard .ico.big svg{width:26px;height:26px;stroke-width:2.6}
.notecard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:12px;background:var(--p-peach);
  border:0;border-radius:var(--r-card);padding:14px 16px}
.notecard>span:nth-child(2){flex:1;display:grid;gap:2px}
.notecard small{color:var(--muted);font-size:var(--fs-s)}