/* RAIL DIVISIONS (CJ 10/15 rail reorg, js/divisions.js). Desktop: #divrail (5 division buttons) sits where the rail was; #rail is now the
   flyout beside it and only shows the open division's tabs (.dv-in). Phones: #divstrip (5 icons) sits in the tab strip's slot; tapping one
   swaps in #catstrip, filtered to that division, with a back chip first. Loaded after phone.css so it wins over the per-module rail rules. */

/* ---------------- desktop: division rail ---------------- */
#divrail{position:fixed;z-index:9;left:var(--g);top:calc(var(--topy) + var(--toph) + 12px);bottom:calc(var(--botb) + var(--both) + 10px);width:var(--railw);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
html[data-theme="light"] #divrail{backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
#divrail::-webkit-scrollbar{display:none}
#divrail .sp{flex:1;min-height:6px}
#divrail button{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 2px 10px;color:var(--dim);border-left:2px solid transparent;transition:color .15s,background .15s,border-color .15s}
#divrail button+button{box-shadow:inset 0 1px 0 var(--line2)}
#divrail button svg{width:22px;height:22px;transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s}
#divrail button>span{font:600 8px/1.2 var(--mono);letter-spacing:.03em;text-align:center;max-width:100%;padding:0 2px}
#divrail button:hover{color:var(--ink-hi);background:var(--hover)}
#divrail button:focus-visible,#divstrip button:focus-visible,#catstrip .dv-back:focus-visible,#rail.dv-fly>button:focus-visible{outline:1px solid var(--cy);outline-offset:-3px}
#divrail button.has-on{color:var(--ink)}
#divrail button.on{color:color-mix(in srgb,var(--c) var(--hue-mix),var(--hue-base));border-left-color:var(--c)}
#divrail button.open{color:color-mix(in srgb,var(--c) var(--hue-mix),var(--hue-base));border-left-color:var(--c);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 22%,transparent),color-mix(in srgb,var(--c) 6%,transparent))}
#divrail button.open svg{transform:scale(1.1);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 70%,transparent))}
/* the open division points at its flyout: a small notch on the rail's right edge */
#divrail button.open::after{content:"";position:absolute;right:0;top:50%;width:0;height:0;margin-top:-6px;border:6px solid transparent;border-right-color:var(--c)}
/* tab pips: one per tab, filled = something ON in it, red outline = locked, tall = the open tab */
#divrail .dv-pips{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;max-width:52px;text-decoration:none;min-height:5px}
#divrail .dv-pips i{width:5px;height:5px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);transition:background .2s,height .2s}
#divrail .dv-pips i.on{background:var(--c);border-color:var(--c);box-shadow:0 0 5px var(--c)}
#divrail .dv-pips i.lk{border-color:var(--red);opacity:.75}
#divrail .dv-pips i.cur{height:9px;margin-top:-2px;border-color:var(--c)}
/* rolled-up ON badge (sum of the division's tabs) */
.dv-ob{position:absolute;top:3px;left:3px;padding:0 3px;font:700 8px/12px var(--mono);font-style:normal;letter-spacing:.04em;color:#00131c;background:var(--c);box-shadow:0 0 8px var(--c);white-space:nowrap;pointer-events:none}
html[data-theme="light"] .dv-ob{box-shadow:none;background:color-mix(in srgb,var(--c) 42%,#08141c);color:#fff}
/* every tab in the division locked for this plan: the red closed padlock (same glyph as phone.css tab locks) */
#divrail button.dv-lk::before,#divstrip button.dv-lk::before{content:"";position:absolute;top:5px;right:5px;width:9px;height:11px;background:var(--red);-webkit-mask:var(--lock) center/contain no-repeat;mask:var(--lock) center/contain no-repeat}
#divrail button.dv-lk{opacity:.8}
#divrail button.dv-ldr svg,#divstrip button.dv-ldr svg{animation:dv-ldr 1.2s ease-in-out infinite}
@keyframes dv-ldr{50%{opacity:.35}}
#divrail .dv-ft{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 16px;color:var(--mute);border-top:1px solid var(--line2)}
#divrail .dv-ft b{font:600 18px/1 var(--hd);color:var(--dim);font-variant-numeric:tabular-nums}
#divrail .dv-ft span{font-size:7.5px;line-height:1.15;letter-spacing:.14em;text-align:center}
#divrail .dv-ft.has-on b{color:var(--ok);text-shadow:0 0 10px color-mix(in srgb,var(--ok) 60%,transparent)}

/* ---------------- desktop: #rail is the flyout ---------------- */
#rail.dv-fly{display:none;z-index:12;left:calc(var(--g) + var(--railw) + 6px);bottom:auto;width:262px;padding:0 0 8px;background:var(--glass2);border:1px solid color-mix(in srgb,var(--dc,var(--cy)) 40%,transparent);border-left:2px solid var(--dc,var(--cy));box-shadow:inset 0 0 40px color-mix(in srgb,var(--dc,var(--cy)) 7%,transparent);scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
#rail.dv-fly.dv-open{display:flex;animation:dv-in .18s cubic-bezier(.2,.8,.2,1)}
@keyframes dv-in{from{opacity:0;transform:translateX(-10px)}}
#rail.dv-fly .sp{display:none}
#rail.dv-fly>button:not(.dv-in){display:none}
#rail.dv-fly .dv-hd{order:-10;position:sticky;top:0;z-index:2;display:grid;grid-template-columns:36px 1fr;gap:11px;align-items:center;padding:13px 12px 11px;margin-bottom:4px;border-bottom:1px solid color-mix(in srgb,var(--dc,var(--cy)) 30%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--dc,var(--cy)) 16%,var(--glass2)),var(--glass2) 75%)}
#rail.dv-fly .dv-hd::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--dc,var(--cy)),transparent 70%)}
#rail.dv-fly .dv-ic{width:36px;height:36px;display:grid;place-items:center;color:color-mix(in srgb,var(--dc,var(--cy)) var(--hue-mix),var(--hue-base));border:1px solid color-mix(in srgb,var(--dc,var(--cy)) 55%,transparent);background:color-mix(in srgb,var(--dc,var(--cy)) 10%,transparent);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
#rail.dv-fly .dv-ic svg{width:20px;height:20px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--dc,var(--cy)) 60%,transparent))}
#rail.dv-fly .dv-tt{min-width:0}
#rail.dv-fly .dv-tt b{display:block;font:700 16px/1 var(--hd);letter-spacing:.18em;color:var(--ink-hi);white-space:nowrap}
#rail.dv-fly .dv-tt small{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.02em;color:var(--ink2)}
#rail.dv-fly .dv-tt em{display:block;margin-top:5px;font:normal 8.5px var(--mono);letter-spacing:.16em;color:color-mix(in srgb,var(--dc,var(--cy)) var(--hue-mix),var(--hue-base))}
/* tab rows: icon | name + plain-English line | ON badge, lock on the far right */
#rail.dv-fly>button.dv-in{display:grid;grid-template-columns:22px 1fr auto;align-items:center;column-gap:11px;padding:9px 30px 9px 12px;margin:0 6px;text-align:left;font-size:12px;letter-spacing:.12em;border-left:2px solid transparent;animation:dv-row .22s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 26ms)}
@keyframes dv-row{from{opacity:0;transform:translateX(-8px)}}
#rail.dv-fly>button.dv-in svg{width:20px;height:20px;color:color-mix(in srgb,var(--c,var(--cy)) var(--hue-mix),var(--hue-base));opacity:.85}
#rail.dv-fly>button.dv-in>span{font:600 13px/1.1 var(--hd);letter-spacing:.14em;color:var(--ink);text-transform:uppercase;min-width:0}
#rail.dv-fly>button.dv-in[data-cat="transport"]>span{font-size:13px;letter-spacing:.08em}
#rail.dv-fly>button.dv-in>span::after{content:attr(data-sub);display:block;margin-top:3px;font:400 9.5px/1.2 var(--mono);letter-spacing:.02em;text-transform:none;color:var(--dim)}
#rail.dv-fly>button.dv-in>span::before{top:50%;right:10px;margin-top:-6px}
#rail.dv-fly>button.dv-in .ob{position:static;grid-column:3}
#rail.dv-fly>button.dv-in .n{bottom:auto;top:8px;right:24px}
#rail.dv-fly>button.dv-in:hover{background:var(--hover)}
#rail.dv-fly>button.dv-in:hover svg{opacity:1}
#rail.dv-fly>button.dv-in.on{background:linear-gradient(90deg,color-mix(in srgb,var(--c,var(--cy)) 18%,transparent),transparent);border-left-color:var(--c,var(--cy))}
#rail.dv-fly>button.dv-in.on>span{color:color-mix(in srgb,var(--c,var(--cy)) var(--hue-mix),var(--hue-base))}
#rail.dv-fly>button.dv-in.lk-tab>span::after{color:var(--mute)}
@media (min-width:761px) and (max-height:700px){
  #divrail button{padding:9px 2px 7px;gap:4px}#divrail button svg{width:19px;height:19px}
  #rail.dv-fly>button.dv-in{padding:7px 30px 7px 12px}#rail.dv-fly .dv-hd{padding:9px 12px 8px}
}
@media (min-width:761px) and (max-height:520px){ #divrail .dv-pips,#divrail .dv-ft{display:none} }

/* ---------------- phones: division strip + drill-in tab strip ---------------- */
#divstrip{display:none}
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  #divrail,#rail.dv-fly.dv-open{display:none}
  #divstrip{display:flex;position:fixed;z-index:9;left:0;right:0;bottom:calc(var(--botb) + var(--both) + 2px);height:50px;background:var(--glass2);border-top:1px solid var(--line);padding:0 var(--g);gap:2px}
  #divstrip button{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--dim);font-size:9px;letter-spacing:.08em;border-bottom:2px solid transparent;transition:color .15s,background .15s}
  #divstrip button svg{width:20px;height:20px}
  #divstrip button>span{white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%}
  #divstrip .dv-pips{display:none}
  #divstrip button.has-on{color:var(--ink)}
  #divstrip button.on{color:color-mix(in srgb,var(--c) var(--hue-mix),var(--hue-base));border-bottom-color:var(--c);background:linear-gradient(0deg,color-mix(in srgb,var(--c) 14%,transparent),transparent)}
  #divstrip .dv-ob{top:2px;left:50%;margin-left:3px}
  body.dv-drill #divstrip{display:none}
  body:not(.dv-drill) #catstrip{display:none}
  body.dv-drill #catstrip{border-top-color:color-mix(in srgb,var(--dc,var(--cy)) 55%,transparent);gap:0}
  #catstrip>button:not(.dv-in):not(.dv-back){display:none}
  #catstrip>button.dv-in{flex:1 0 auto;max-width:128px;padding:6px 7px;font-size:9.5px;letter-spacing:.06em}
  #catstrip.dv-anim>button.dv-in{animation:dv-row .2s cubic-bezier(.2,.8,.2,1) both}
  #catstrip .dv-back{order:-10;position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:56px;padding:5px 8px 5px 14px;margin-right:4px;color:color-mix(in srgb,var(--c) var(--hue-mix),var(--hue-base));background:linear-gradient(90deg,color-mix(in srgb,var(--c) 20%,transparent),color-mix(in srgb,var(--c) 6%,transparent));border-right:1px solid color-mix(in srgb,var(--c) 45%,transparent)}
  #catstrip .dv-back svg.ic{width:18px;height:18px}
  #catstrip .dv-back .dv-chev{position:absolute;left:1px;top:50%;width:13px;height:13px;margin-top:-7px}
  #catstrip .dv-back b{font:600 9px var(--mono);letter-spacing:.08em}
  /* QA 10/15: both strips are solid (the globe and its place pill no longer show through and garble the labels) */
  #divstrip,#catstrip{background:linear-gradient(var(--glass2),var(--glass2)),var(--bg)}
  /* QA 10/15: the N ON badge sat on the tab icon: it now owns a 10px band above the icon, centred */
  #catstrip>button,#catstrip>button.dv-in{padding-top:12px}
  #catstrip>button:not(.dv-back) svg{width:18px;height:18px}
  #catstrip>button .ob{top:1px;left:50%;transform:translateX(-50%);font-size:7.5px;line-height:10px;box-shadow:0 0 5px var(--c,var(--cy))}
  #divstrip button{padding-top:10px}
  #divstrip .dv-ob{top:1px;left:50%;margin-left:0;transform:translateX(-50%);font-size:7.5px;line-height:10px;box-shadow:0 0 5px var(--c)}
  /* QA 10/15: the WHERE AM I pill sat behind the strip; on phones it lives just under the top bar instead (toasts land below it) */
  #whereami{top:calc(var(--topy) + var(--toph) + 8px);bottom:auto}
}
@media (max-height:500px) and (pointer:coarse){ #divstrip{height:44px} #divstrip button svg{width:18px;height:18px} }
@media (prefers-reduced-motion:reduce){ #rail.dv-fly.dv-open,#rail.dv-fly>button.dv-in,#catstrip.dv-anim>button.dv-in,#divrail button.dv-ldr svg,#divstrip button.dv-ldr svg{animation:none} #divrail button svg{transition:none} }