/* ================= SIMPLE MODE (11 Oct 2026) =================
   Victor: "always load aireckon.ing in simple mode going fwd: at log in show (Always) the sidebar and navbar but at front and
   center The Reckoning Times ... no other buttons except for TV and the toggle to switch to advanced, and nothing else".
   html.simple is set in index.html's head on every load; site/sidebar.js runs the switch. Simple: the Times fills the page,
   the rail holds the Times and the TV, the navbar holds the mark, the radio (both modes, Victor 11 Oct), the switch, your account and the menu (the
   weather and the signed-in chips wait in advanced; the Times prints the day's weather in its own header). Advanced: everything as before. */

/* what simple mode sets aside */
html.simple main > section:not(#today):not(#frame):not(#frame2){display:none!important}
html.simple #side-list,html.simple .side-more,html.simple .side.can-more::after{display:none!important}
html.simple .subbar{display:none!important}
/* the navbar keeps three things on the right: the switch, your account, the menu. Everything else the page adds there once you
   sign in (Pulse, View as, garden, level and XP, Invite, Founding, Campus, Beta) waits in advanced (Victor, 11 Oct: "still
   too busy"); an allowlist, so a chip added later stays out of simple too */
html.simple .bar-mid > :not(.radio),html.simple .bar-r > :not(#mode-sw):not(#fil-me):not(.burger),html.simple .leo,html.simple .cp-back{display:none!important}
html:not(.simple) .side-simple{display:none}

/* the simple rail: the same door tiles as the five doors, two of them */
.side-simple{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.side-simple li.door5 .tile{position:relative}
html body .side .side-simple li.door5 .tile > svg.lk{position:absolute;left:calc(50% + 7px);right:auto;top:4px;bottom:auto;width:9px!important;height:9px!important;
  padding:2px!important;border-radius:50%!important;background:rgba(10,12,40,.92)!important;box-shadow:none!important;color:rgba(236,232,222,.8);transform:none!important}
html body .side .side-simple li.gated.open .tile > svg.lk{display:none}

/* a lock note says it in full: the tile's hover tip steps back while it shows */
body:has(#lock-note.on) .side-simple .tip{opacity:0!important}

/* THE SWITCH, in the navbar (11 Oct 2026, Victor: "move the s/a toggle to navbar"): its word, then a small track lit in the
   five innovators' colours when advanced is on (the five doors it opens). Same place in both modes. */
.mode-sw{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 6px 0 12px;background:none;border:0;border-radius:999px;cursor:pointer;
  color:rgba(236,232,222,.62);font:500 13px/1 var(--sans,"IBM Plex Sans",sans-serif);letter-spacing:.01em;white-space:nowrap;transition:color .25s,background .25s}
@media (hover:hover){.mode-sw:hover{color:var(--ink,#ECE8DE);background:rgba(255,255,255,.05)}}
.mode-sw:focus-visible{outline:2px solid rgba(236,232,222,.7);outline-offset:2px}
.ms-track{position:relative;flex:none;width:34px;height:20px;border-radius:999px;box-sizing:border-box;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:box-shadow .35s}
.ms-track::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:linear-gradient(90deg,rgb(245,206,52),rgb(255,92,34) 25%,rgb(47,120,255) 50%,rgb(46,200,110) 75%,rgb(150,80,225))}
.ms-track i{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:rgba(236,232,222,.75);
  box-shadow:0 1px 3px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s}
@media (hover:hover){.mode-sw:hover .ms-track{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}}
.mode-sw[aria-checked="true"]{color:var(--ink,#ECE8DE)}
.mode-sw[aria-checked="true"] .ms-track{box-shadow:0 0 14px -3px rgba(150,80,225,.6)}
.mode-sw[aria-checked="true"] .ms-track::before{opacity:.9}
.mode-sw[aria-checked="true"] .ms-track i{transform:translateX(14px);background:#fff}
@media (prefers-reduced-motion:reduce){.ms-track,.ms-track::before,.ms-track i{transition:none}}

/* phone and tablet: the bottom tab bar is the Times and the TV, side by side */
@media (max-width:959px){
  html.simple .side{display:flex!important;align-items:stretch}
  html.simple .side-simple{flex:1 1 0;flex-direction:row;gap:0;height:100%}
  html.simple .side-simple li.door5{flex:1 1 0;min-width:0;display:flex}
  html body .side .side-simple li.door5 .tile > svg.lk{left:calc(50% + 14px);top:8px}
}
/* phone: the switch's word sits under its track, so the bar keeps its room */
@media (max-width:759px){
  .mode-sw{flex-direction:column;justify-content:center;gap:4px;height:44px;padding:0 4px;font-size:10px}
  .mode-sw .ms-l{order:2}
  html:not(.simple) body .bar-r{gap:5px}   /* advanced keeps all its buttons: a little less air between them so the bar fits 390 */
}