/* ═══════════════════════════════════════════════════════════════════════
   R4-26 · HOURS TREATMENTS  —  styles for two day-page mocks
   · docked scrolling Hours band   (ported from R4-14 Hours Band Prototype)
   · side Hours rail · option 1     (ported from R4-12 Mini Hours Options)
   Loaded on top of ct-canon.css. Nothing here redefines a canon/pattern class.
   ═══════════════════════════════════════════════════════════════════════ */
:root{ --now:#566173; }

/* small shared bits the ported widgets expect */
.sec-lbl{font-family:var(--sc);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.bmeta{font-family:var(--sc);font-size:8px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--icon);white-space:nowrap;}
.max-lbl{position:absolute;font-family:var(--sc);font-size:8px;color:var(--icon);letter-spacing:.04em;}
.ph-g{font-family:'Physis','Segoe UI Symbol',serif;font-variant-emoji:text;line-height:1;flex-shrink:0;}

/* ── shared transit popup + hour tip ─────────────────────────────────── */
.pop{position:absolute;z-index:50;width:236px;background:var(--white);border:1px solid var(--vpale);border-radius:8px;box-shadow:0 14px 40px rgba(30,35,48,.22);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .12s,transform .12s;}
.pop.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.pop-caret{position:absolute;width:0;height:0;display:none;transform:translateY(-50%);z-index:31;}
.pop-caret.right{display:block;right:-7px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid var(--white);filter:drop-shadow(1.5px 0 0 var(--vpale));}
.pop-caret.left{display:block;left:-7px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid var(--white);filter:drop-shadow(-1.5px 0 0 var(--vpale));}
.pop-top{padding:13px 14px 11px;border-bottom:1px solid var(--vpale);}
.pop-nm{font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:7px;}
.pop-nm .pg{font-size:17px;}
.pop-win{font-family:var(--sc);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:5px;}
.pop-body{padding:11px 14px 13px;font-size:11.5px;line-height:1.5;color:var(--muted);}
.pop-foot{display:flex;gap:8px;padding:0 14px 13px;}
.btn{font-family:var(--sc);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;padding:8px 13px;border-radius:20px;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:5px;}
.btn.primary{background:var(--blue);color:#fff;}
.btn.primary:hover{background:#35618a;}

.htip{position:absolute;z-index:40;background:var(--ink);color:#fff;border-radius:6px;padding:8px 11px;font-size:10.5px;line-height:1.45;box-shadow:0 10px 30px rgba(30,35,48,.3);opacity:0;transform:translateY(3px);transition:opacity .1s,transform .1s;pointer-events:none;max-width:250px;}
.htip.show{opacity:1;transform:translateY(0);}
.htip .h{font-family:var(--sc);font-size:9.5px;font-weight:600;letter-spacing:.06em;display:flex;align-items:center;gap:6px;}
.htip .h .pg{font-size:13px;}
.htip .w{font-family:var(--sc);font-size:7.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-top:3px;}
.htip .fav{opacity:.85;margin-top:4px;font-size:10px;}

/* ═══════════ CT-DV10 · docked scrolling Hours band (R4-14) ═══════════ */
.bandzone{flex-shrink:0;border-bottom:1px solid var(--vpale);background:var(--white);padding:8px 0 0;}
.bandcap{display:flex;align-items:center;gap:12px;margin-bottom:7px;padding:0 26px;}
.bandcap .hair{flex:1;height:1px;background:var(--vpale);border:none;}
.jump{display:none;align-items:center;gap:6px;font-family:var(--sc);font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--now);background:rgba(86,97,115,.08);border:1px solid rgba(86,97,115,.25);border-radius:20px;padding:4px 11px;cursor:pointer;white-space:nowrap;}
.jump.show{display:inline-flex;}
.jump:hover{background:rgba(86,97,115,.14);}
.jump .jdot{width:6px;height:6px;border-radius:50%;background:var(--now);}
/* show / hide toggle (new for this mock) */
.h26-toggle{display:inline-flex;align-items:center;gap:6px;font-family:var(--sc);font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:20px;white-space:nowrap;}
.h26-toggle:hover{background:rgba(63,109,150,.08);}
.h26-toggle svg{width:9px;height:9px;transition:transform .18s;}
.bandzone:not(.collapsed) .h26-toggle svg{transform:rotate(180deg);}
.bandzone.collapsed .jump,.bandzone.collapsed .bmeta{display:none;}
.bandzone.collapsed .bv-wrap{display:none;}
.bandzone.collapsed{padding-bottom:9px;}
.bandzone.collapsed .bandcap{cursor:pointer;}
.bandzone.collapsed .bandcap:hover .sec-lbl{color:var(--blue);}
.bv-wrap{position:relative;}
.bv-wrap::before,.bv-wrap::after{content:"";position:absolute;top:0;bottom:0;width:34px;z-index:9;pointer-events:none;opacity:0;transition:opacity .15s;}
.bv-wrap::before{left:0;background:linear-gradient(to right,var(--white),rgba(255,255,255,0));}
.bv-wrap::after{right:0;background:linear-gradient(to left,var(--white),rgba(255,255,255,0));}
.bv-wrap.fade-l::before{opacity:1;}
.bv-wrap.fade-r::after{opacity:1;}
.bv{overflow-x:auto;overflow-y:hidden;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;border-top:1px solid var(--vpale);background:var(--white);}
.bv.dragging{cursor:grabbing;}
.bi{position:relative;height:102px;}
.tr-lane{position:absolute;left:0;right:0;top:14px;height:34px;}
.hours{position:absolute;left:0;right:0;top:54px;height:26px;border-top:1px solid var(--vpale);border-bottom:1px solid var(--vpale);}
.axisrow{position:absolute;left:0;right:0;top:82px;height:18px;}
.phseg{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:filter .1s;}
.phseg:hover{filter:brightness(.94);}
.vline{position:absolute;top:54px;height:26px;width:0;z-index:6;pointer-events:none;}
.vline::before{content:"";position:absolute;top:0;bottom:0;left:0;border-left-width:1.5px;border-left-style:dashed;}
.vline .tag{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);font-family:var(--sc);font-size:7px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:1.5px 7px;border-radius:10px;white-space:nowrap;}
.vline.asc::before{border-color:rgba(86,97,115,.5);}
.vline.asc .sic{color:var(--now);}
.vline.desc::before{border-color:rgba(86,97,115,.5);}
.vline.desc .sic{color:var(--now);}
.vline .sic{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);display:inline-flex;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255,255,255,.95));pointer-events:auto;}
.vline.now::before{border-left-style:solid;border-color:rgba(86,97,115,.9);}
.vline.now .tag{color:#fff;background:var(--now);font-size:7.5px;padding:2px 8px;}
.vline.now .dot{position:absolute;top:-3px;left:-3.25px;width:7px;height:7px;border-radius:50%;background:var(--now);}
.htr{position:absolute;top:2px;height:30px;border-radius:5px;border-left:2.5px solid;cursor:pointer;z-index:4;overflow:hidden;padding:4px 10px;transition:box-shadow .1s,filter .1s;}
.htr:hover{filter:brightness(.97);box-shadow:0 3px 12px rgba(30,35,48,.16);z-index:5;}
.htr .tname{font-family:var(--sc);font-size:9.5px;font-weight:600;display:flex;align-items:center;gap:5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.htr .ttime{font-family:var(--sc);font-size:7px;line-height:1;letter-spacing:.05em;opacity:.7;margin-top:1px;white-space:nowrap;}

/* ═══════════ CT-DV11 · side Hours rail · option 1 (R4-12) ═══════════ */
.o1-body{display:flex;align-items:stretch;height:860px;}
.o1-col{flex:1;min-width:0;overflow:auto;padding:34px 40px 40px;}
.o1-col .inner{max-width:820px;margin:0 auto;}
.o1-rail{width:256px;flex-shrink:0;border-left:1px solid var(--vpale);background:var(--paper);position:relative;display:flex;}
.o1-axis{width:34px;position:relative;flex-shrink:0;}
.o1-lane{position:relative;flex:1;border-left:1px solid var(--vpale);background:var(--white);}
.o1-cap{position:absolute;left:0;right:0;top:0;z-index:7;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 8px 6px;background:linear-gradient(to bottom,var(--white) 55%,rgba(255,255,255,0));pointer-events:none;}
.o1-cap .t{font-family:var(--sc);font-size:8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
/* collapse the rail to a slim re-open tab — the focus-the-text control */
.o1-rail{transition:width .22s ease;overflow:hidden;}
.o1-railtog{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;border:1px solid var(--vpale);background:var(--white);border-radius:20px;color:var(--blue);cursor:pointer;padding:3px 8px;font-family:var(--sc);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;pointer-events:auto;}
.o1-railtog:hover{border-color:var(--blue);background:rgba(63,109,150,.06);}
.o1-railtog svg{width:9px;height:9px;}
.o1-railtab{display:none;}
.o1-body.rail-collapsed .o1-rail{width:42px;background:var(--paper);}
.o1-body.rail-collapsed .o1-axis,.o1-body.rail-collapsed .o1-lane,.o1-body.rail-collapsed .mini-hint{display:none;}
.o1-body.rail-collapsed .o1-railtab{display:flex;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;padding-top:30px;cursor:pointer;}
.o1-railtab .lab{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sc);font-size:8.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.o1-railtab:hover .lab{color:var(--blue);}

.mini-lane{position:absolute;top:0;bottom:0;}
.mtr{position:absolute;border-radius:4px;overflow:hidden;cursor:pointer;z-index:4;border-left:2.5px solid;transition:box-shadow .1s,filter .1s;}
.mtr:hover{filter:brightness(.97);box-shadow:0 3px 12px rgba(30,35,48,.16);z-index:5;}
.mtr .tname{font-family:var(--sc);font-weight:600;letter-spacing:.01em;display:flex;align-items:center;gap:4px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mtr .ttime{font-family:var(--sc);letter-spacing:.03em;opacity:.7;}
.mini-hint{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--sc);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--icon);background:rgba(246,249,252,.92);border:1px solid var(--vpale);border-radius:20px;padding:4px 11px;z-index:8;white-space:nowrap;}

/* vertical treatment A pieces */
.va-nightw{position:absolute;left:0;right:0;background:rgba(90,104,130,.12);pointer-events:none;}
.va-nowband{position:absolute;left:0;right:0;background:rgba(30,110,240,.17);pointer-events:none;}
.va-hline{position:absolute;left:0;right:0;height:0;pointer-events:none;}
.va-gut-g{position:absolute;pointer-events:none;font-family:'Physis','Segoe UI Symbol',serif;font-variant-emoji:text;line-height:1;}
.va-ebt{position:absolute;transform:translateY(-50%);padding:0.5px 4px;border-radius:3px;font-family:var(--sc);font-size:7px;font-weight:500;letter-spacing:.02em;color:var(--icon);pointer-events:none;white-space:nowrap;z-index:8;}
.va-ebt.strong{color:var(--muted);font-weight:600;}
.va-axis-now{position:absolute;right:2px;transform:translateY(-50%);font-family:var(--sc);font-size:6.5px;font-weight:600;color:#fff;background:#566173;padding:1px 3px;border-radius:9px;letter-spacing:.02em;white-space:nowrap;z-index:4;box-shadow:0 1px 3px rgba(43,50,64,.25);}
.va-nline{position:absolute;left:0;right:0;height:0;z-index:6;pointer-events:none;}
.va-nline::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1.5px solid rgba(86,97,115,.9);}
.va-nline .dot{position:absolute;left:-3px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:#566173;}
.va-sunline{position:absolute;left:0;right:0;height:0;z-index:5;pointer-events:none;}
.va-sunline::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1.5px dashed rgba(86,97,115,.9);}
.va-sic{position:absolute;z-index:7;display:inline-flex;color:#566173;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255,255,255,.95));pointer-events:auto;}