/* 20261112sq1 (Jon, 12 Nov): laptop widths. A battle-mark or map-zone card in the right dock used to open 540px wide and
   leave about 250px of map between it and the tour card at 1366. From 1100px up to 1599px it now floats over the map as a
   narrower drawer (24vw, 300-380px) that can be tucked to the right edge with its tab; the map keeps its framing
   (battle-explain / louvain-march ignore the drawer when they aim). Picture cards, phone and 1600px+ are unchanged. */
:root{--owh-drawer-w:clamp(300px,24vw,380px)}
#owh-drawer-tab{display:none}
@media (min-width:1100px) and (max-width:1599.98px){
  body.tour-left-stacked.tour-dock-float:not(.owh-m) #tour-info-dock[data-dock="right"]:has(> #panel.open:is(.bh-card,.fd-card)){
    left:auto!important;right:18px!important;width:var(--owh-drawer-w)!important;
    transition:transform .22s ease,box-shadow .22s ease!important;
  }
  body.owh-drawer-collapsed.tour-left-stacked.tour-dock-float:not(.owh-m) #tour-info-dock[data-dock="right"]:has(> #panel.open:is(.bh-card,.fd-card)){
    transform:translateX(calc(100% + 24px));box-shadow:none;pointer-events:none;visibility:hidden;
    transition:transform .22s ease,visibility 0s linear .22s!important;
  }
  /* the two casualty columns stay side by side at the narrower width; slightly smaller type */
  body.owh-drawer #panel.bh-card .bm-grid{gap:6px}
  body.owh-drawer #panel.bh-card .bm-side{padding:5px 6px;font-size:12px}
  body.owh-drawer #panel.bh-card .bm-num{font-size:18px}
  body.owh-drawer #panel.bh-card,body.owh-drawer #panel.bh-card #panel-date{--panel-year-size:28px}
  body.owh-drawer #panel.bh-card #panel-title{font-size:19px}
  body.owh-drawer #owh-drawer-tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    position:fixed;z-index:5;top:var(--owh-drawer-top,104px);right:calc(18px + var(--owh-drawer-w));
    width:26px;min-height:96px;padding:8px 0;box-sizing:border-box;
    border:1px solid rgba(255,255,255,.16);border-right:0;border-radius:10px 0 0 10px;
    background:var(--card,#0c0e12);color:var(--text,#e8ecf6);box-shadow:-4px 6px 18px rgba(0,0,0,.35);
    font:600 11px/1 system-ui,sans-serif;letter-spacing:.06em;cursor:pointer;opacity:.92;
    transition:right .22s ease,opacity .15s ease;
  }
  body.owh-drawer #owh-drawer-tab:hover,body.owh-drawer #owh-drawer-tab:focus-visible{opacity:1;outline:none;border-color:var(--accent,#ffba46)}
  body.owh-drawer #owh-drawer-tab .owh-drawer-chev{font-size:14px;line-height:1}
  body.owh-drawer #owh-drawer-tab .owh-drawer-lbl{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
  body.owh-drawer.owh-drawer-collapsed #owh-drawer-tab{right:0;border-right:0;opacity:1;min-height:120px;
    background:var(--accent,#ffba46);color:#1a1206;border-color:transparent}
  body.theme-light.owh-drawer #owh-drawer-tab{background:var(--card,#fffdf6);color:var(--text,#1e2a44);border-color:rgba(30,45,90,.2);box-shadow:-4px 6px 18px rgba(60,80,120,.22)}
  body.theme-light.owh-drawer.owh-drawer-collapsed #owh-drawer-tab{background:var(--accent,#b8650a);color:#fff}
}
@media (prefers-reduced-motion:reduce){
  #owh-drawer-tab,body.tour-dock-float #tour-info-dock[data-dock="right"]{transition:none!important}
}