/* Shared by the three road-safety pages: the section tabs, the "Ask" button and the copilot drawer (shell.js). */
.sections{display:inline-flex;gap:2px;background:#eef1f5;border-radius:9px;padding:2px;flex:none}
.sections a{font:700 12px var(--font);color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:7px;white-space:nowrap}
.sections a[aria-current="page"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.sections a:hover{color:var(--ink)}
.sections a:focus-visible,.ask-btn:focus-visible,.ask button:focus-visible,.ask textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ask-btn{flex:none;font:700 12px var(--font);color:#fff;background:var(--accent);border:0;border-radius:8px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.ask-btn[aria-expanded="true"]{background:#063d8a}
.ask-btn[hidden]{display:none}
.ask{position:absolute;z-index:20;top:var(--topbar-h);right:0;bottom:0;width:380px;max-width:100%;box-sizing:border-box;background:#fff;
  border-left:1px solid var(--line);box-shadow:-6px 0 20px rgba(20,40,80,.10);display:flex;flex-direction:column;font-size:13px}
.ask[hidden]{display:none}
.ask-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line)}
.ask-acts{display:flex;gap:6px}
.ask-new,.ask-x{font:600 12px var(--font);background:#eef1f5;color:var(--ink);border:0;border-radius:7px;padding:5px 9px;cursor:pointer}
.ask-log{flex:1 1 auto;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.msg{line-height:1.45;border-radius:10px;padding:8px 11px;max-width:92%;box-sizing:border-box;overflow-wrap:anywhere}
.msg p{margin:0 0 6px}.msg p:last-child{margin-bottom:0}
.msg ul,.msg ol{margin:4px 0 6px;padding-left:20px}.msg li{margin:2px 0}
.msg.you{align-self:flex-end;background:var(--accent);color:#fff;white-space:pre-wrap}
.msg.bot{align-self:flex-start;background:#f1f4f8}
.msg.err{align-self:flex-start;background:#fff7e6;border:1px solid #f0c36d;color:#5c3d00}
.msg.busy{color:var(--muted);font-style:italic}
.msg-go{align-self:flex-start;font:700 12px var(--font);color:var(--accent);background:#fff;border:1px solid var(--accent);border-radius:8px;padding:6px 10px;cursor:pointer}
.ask-intro{color:var(--muted);line-height:1.45;margin-top:auto}
.ask-sugg{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px}
.ask-sugg:empty{display:none}
.ask-sugg button{font:12px var(--font);text-align:left;color:var(--ink);background:#f6f8fb;border:1px solid var(--line);border-radius:14px;padding:6px 10px;cursor:pointer}
.ask-sugg button:hover{border-color:var(--accent)}
.ask-form{display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--line)}
.ask-form textarea{flex:1 1 auto;min-width:0;resize:none;font:14px var(--font);border:1px solid var(--line);border-radius:8px;padding:7px 9px;box-sizing:border-box}
.ask-form button{flex:none;font:700 13px var(--font);color:#fff;background:var(--accent);border:0;border-radius:8px;padding:0 14px;cursor:pointer}
.ask-form button:disabled{opacity:.5;cursor:default}
.ask-foot{font-size:10.8px;color:var(--muted);padding:0 12px 10px;line-height:1.4}
/* Wide screens (1100 px and up, so the map keeps at least 720 px beside the 380 px drawer): the map gives the drawer
   its space, and the bars over the map stay clear of it. */
@media (min-width:1100px){
  body.ask-open #map{right:380px}
  body.ask-open .pantally,body.ask-open .status,body.ask-open .state-nav,body.ask-open .controls{right:390px}
  body.ask-open .maplibregl-popup{max-width:min(300px, calc(100vw - 420px))!important}
}
/* Phones: one compact header (title, then the tabs and the Ask button on one line, then the view tabs, each
   scrolling sideways), and the drawer covers the screen. Touch targets are at least 36 px tall. */
@media (max-width:700px){
  .topbar{gap:6px 8px!important}
  .topbar .titles{flex:1 1 100%!important}
  .topbar h1{font-size:13.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sections{flex:1 1 0;min-width:0;overflow-x:auto;scrollbar-width:none}
  .sections a{padding:9px 9px}
  .ask-btn{padding:9px 14px}
  .ask-long{display:none}
  .topbar .seg{flex-wrap:nowrap!important;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .topbar .seg a{padding:8px 9px}
  .ask-form textarea{font-size:16px}   /* 16 px keeps iOS from zooming the page on focus */
}
/* Phones and tablets (under 1100 px): beside the drawer the map would be too narrow for its panel and controls, so
   the drawer covers the screen and the map shows when it closes. */
@media (max-width:1099px){
  .ask{position:fixed;top:0;left:0;width:100%;border-left:0;z-index:40}
}
@media print{ .ask,.ask-btn{display:none!important} }