/* The desk banner.

   Every value here is literal rather than a custom property, on purpose. The
   four desk pages run three different colour systems — site-shell.css on
   Overview, the kb-* palette on Daily Supply News, kb-* plus pd-* on the two
   Buyer/Cost pages — so a banner built on inherited variables would look
   different on each of them, which is the thing this component exists to stop.

   It is not pinned. It sits at the top of the document and scrolls away with
   it, which is the whole of "show it only at the top" — an earlier version
   used position:sticky plus a scroll listener to reproduce that, which is two
   mechanisms competing to undo each other. */
#desk-banner.dbar{
  position:relative;z-index:400;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:9px clamp(14px,3vw,26px);
  background:#FBF7EE;border-bottom:1px solid #D9D3C6;
  font:500 12px/1.3 "Manrope",system-ui,-apple-system,sans-serif;
  color:#3D4743;
}

.dbar-brand{
  display:flex;align-items:baseline;gap:8px;flex:0 0 auto;
  color:#073F35;font:700 15px/1 Georgia,"Times New Roman",serif;letter-spacing:.14em;text-decoration:none;
}
.dbar-brand small{font:700 8.5px/1 "Manrope",system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#6B736D}

.dbar-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}
.dbar-meta>span{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.dbar-hq{font-size:11.5px}
.dbar-hq b{font-weight:700;letter-spacing:.06em}
.dbar-led{
  align-self:center;width:7px;height:7px;border-radius:50%;
  background:#9AA3A0;box-shadow:0 0 0 3px rgba(154,163,160,.22);
}
/* terminal-status.js marks the wrapper when the workflow is current. */
[data-hq-status].is-online .dbar-led,[data-hq-status].online .dbar-led{background:#1F6B49;box-shadow:0 0 0 3px rgba(31,107,73,.2)}
.dbar-time b{font:600 13px/1 "IBM Plex Mono","DM Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;color:#211D17}
.dbar-hol small{font:700 8.5px/1 "Manrope",system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#8D8171}
.dbar-hol{font-size:11.5px}
.dbar-hol b{font-weight:600;color:#211D17}

.dbar-lang{position:relative;flex:0 0 auto;margin-left:auto}
.dbar-lang>summary{
  list-style:none;cursor:pointer;padding:5px 12px;border:1px solid #D9D3C6;border-radius:999px;
  font:700 10.5px/1 "Manrope",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#3D4743;
}
.dbar-lang>summary::-webkit-details-marker{display:none}
.dbar-lang>summary:hover{border-color:#073F35;color:#073F35}
.dbar-lang[open]>summary{border-color:#073F35;background:#073F35;color:#fff}
.dbar-lang>div{
  position:absolute;right:0;top:calc(100% + 7px);z-index:5;width:212px;padding:11px;
  background:#FBF7EE;border:1px solid #D9D3C6;border-radius:10px;box-shadow:0 10px 26px rgba(21,58,50,.12);
}
.dbar-lang select{
  width:100%;height:32px;padding:0 8px;border:1px solid #D9D3C6;border-radius:7px;background:#fff;
  font:500 12px "Manrope",system-ui,sans-serif;color:#211D17;
}
.dbar-lang small{display:block;margin-top:7px;color:#8D8171;font-size:10px;line-height:1.45}

.dbar-switch{display:flex;gap:2px;flex:0 0 auto;padding:2px;border:1px solid #D9D3C6;border-radius:999px}
.dbar-switch a{
  padding:4px 13px;border-radius:999px;text-decoration:none;
  font:700 10.5px/1.4 "Manrope",system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6B736D;
}
.dbar-switch a:hover{color:#073F35}
.dbar-switch a.on{background:#073F35;color:#fff}

@media(max-width:820px){
  #desk-banner.dbar{gap:12px;padding:8px 13px}
  .dbar-hol{display:none}
  .dbar-brand small{display:none}
}
@media print{#desk-banner.dbar{display:none!important}}