/* Usability pass (Nov 11 2026, ~11 PM CST; Lance via CoS: "make it easy to use", mobile view). Loaded last.
   Rollback: remove the ux.css <link> and the #layers-toggle button from index.html. Product rules (pin fade, NEW ring, L1/L2,
   Flood Warning styling, checklist rows, attribution text) are not touched here. */

/* 1. Map attribution: was black text on a black strip at night and sat under the tickers / phone feed.
      Readable text in both themes, and lifted above the bottom tickers so it can be seen and opened. */
.maplibregl-ctrl-attrib{color:#c9d8db!important}
.maplibregl-ctrl-attrib a{color:#9fd3dc!important}
html:not([data-theme="day"]) .maplibregl-ctrl-attrib-button{filter:invert(1) brightness(1.4)}
.maplibregl-ctrl-bottom-right{bottom:56px} /* above the ticker and the coordinates line */
body.has-cyber-lane .maplibregl-ctrl-bottom-right{bottom:82px}

/* 1b. The rotating sweep (160vmax) made phones lay the page out about 1,000px wide (sideways pan / zoom-out on a phone).
       It now sits in a full-screen clip box; it looks and toggles the same. */
#sweep-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}

/* 2. Checklist rows never wrap ("Radar sweep" was splitting onto two lines). */
#layers label{white-space:nowrap;min-width:0}

/* 3. LAYERS show/hide bar (feed panel). Phone: closed by default so the story list is visible; desktop: open by default. */
#layers-toggle{display:flex;align-items:center;gap:8px;width:100%;flex:none;margin:0;padding:6px 12px;min-height:30px;background:transparent;border:0;
  border-bottom:1px solid var(--line);color:var(--amber);font-family:var(--mono);font-size:10px;letter-spacing:.18em;cursor:pointer;text-align:left}
#layers-toggle:hover{background:#ffb00010}
#layers-toggle:focus-visible{outline:2px solid #fff;outline-offset:-2px}
#layers-toggle .lt-sum{display:flex;align-items:center;gap:3px;min-width:0;overflow:hidden;white-space:nowrap;color:var(--dim);letter-spacing:.04em;font-size:10px}
#layers-toggle .lt-sum .sw{flex:none;width:8px;height:8px}
#layers-toggle .lt-sum .czsw{width:12px;height:8px}
#layers-toggle .lt-sum b{font-weight:400;margin-left:4px;color:var(--txt)}
#layers-toggle .lt-c{margin-left:auto;flex:none;color:var(--txt);letter-spacing:.08em;font-size:10px;border:1px solid var(--line);padding:2px 7px}
#feed.layers-closed #layers,#feed.layers-closed #cz-layers{display:none}
html[data-theme="day"] #layers-toggle{border-bottom-color:#3b4952}
html[data-theme="day"] #layers-toggle .lt-c{border-color:#4a5a63}

@media (max-width:760px){
  /* Taller story list. Closed: about four or five stories. Open: checklist + conflict rows + the top of the list. */
  #feed{height:40vh}
  #feed:not(.layers-closed){height:68vh}
  #feed.is-searching{height:52vh}
  #hud{bottom:calc(40vh + 34px)}
  body.has-cyber-lane #hud{bottom:calc(40vh + 60px)}
  body:has(#feed:not(.layers-closed)) #hud{display:none}
  /* above the coordinates line (HUD) that sits on top of the feed */
  .maplibregl-ctrl-bottom-right{bottom:calc(40vh + 54px)}
  body.has-cyber-lane .maplibregl-ctrl-bottom-right{bottom:calc(40vh + 80px)}
  /* Checklist on a phone: two readable columns with counts, rows tall enough to tap. */
  #layers{grid-template-columns:1fr 1fr!important;gap:0 14px;font-size:11px;padding:4px 12px}
  #layers label{min-height:32px}
  #layers em{display:inline!important}
  #cz-layers label{min-height:30px}
  #layers-toggle{min-height:38px;font-size:10.5px}
  #layers-toggle .lt-c{padding:4px 9px}
  /* Bigger tap targets. */
  #signin-btn,#signup-btn{min-height:30px;display:inline-flex;align-items:center}
  #theme-ctl button{min-height:28px}
  #close,.pclose,#auth-x,#tip-x{width:40px;height:40px;font-size:15px}
  .d-band{padding-right:52px}
  #feed-list li{padding:9px 12px}
}
@media (max-width:360px){
  #layers{gap:0 8px;font-size:10.5px;padding:4px 10px}
}
/* Desktop: the map's zoom +/- sat under the header clock (zoom-in could not be clicked). Start it below the header. */
@media (min-width:761px){.maplibregl-ctrl-top-right{top:var(--tlm-hdr,52px)}}