/* alert-feeds.css — r89.183 (#390), r89.189, r89.190 (Joe 2026-11-07): the selected-feed chips, the root-level
   "Customize Intelligence Feeds" overlay (tap-to-toggle category cards in a horizontal swipe track) and ONE intelligence
   banner for the added feeds. Inherits the homepage tokens (--panel, --rule, --text, --muted, --mono, the colour set). */
.af-bar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0;min-height:28px;font:500 12px var(--mono)}
/* r89.195: the controls sit between the strips and YOUR FEEDS; on desktop the strips' legend (absolutely placed under them, at
   the right) shares that row, so the chips keep clear of it */
@media(min-width:1001px){.af-bar{padding-right:250px}}
.af-chips{display:contents}
.af-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 4px 0 9px;border:1px solid var(--rule2);border-radius:13px;background:var(--panel2);color:var(--text);white-space:nowrap;max-width:100%}
.af-chip .af-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--af-c,#46d3d6)}
.af-chip .af-st{color:var(--muted);font-size:10.5px;text-transform:lowercase}
.af-chip .af-st.UNAVAILABLE{color:var(--red)}
.af-chip .af-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:var(--muted);font:600 14px/1 var(--sans);cursor:pointer;padding:0}
.af-chip .af-x:hover,.af-chip .af-x:focus-visible{background:var(--rule);color:var(--text)}
.af-add,.af-reset{height:26px;padding:0 10px;border:1px dashed var(--rule2);border-radius:13px;background:transparent;color:var(--cyan);font:600 12px var(--mono);cursor:pointer;white-space:nowrap}
.af-add:hover,.af-add:focus-visible,.af-add[aria-expanded="true"]{border-style:solid;background:var(--panel2)}
.af-reset{border:0;color:var(--muted);text-decoration:underline;padding:0 4px}
.af-empty{color:var(--muted)}

/* ---- the selector (r89.190): ONE root-level overlay, sized from the visible viewport by alert-feeds-ui.js -------------
   Root cause of the r89.189 iPhone "sliver": the sheet was a flex column with only a max-height and its list was flex:1
   (a 0% basis). WebKit, the engine of every iOS browser including Chrome, sizes such a list to zero inside an indefinite
   height, so only the header and footer showed; Chromium sizes it from its content, so desktop emulation passed. The
   panel below has an explicit height, as a percentage of an overlay whose pixel size comes from window.visualViewport. */
.afm{position:fixed;z-index:2147483000;left:0;top:0;width:100vw;height:100vh;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  font:16px/1.35 var(--sans);color:var(--text);-webkit-text-size-adjust:100%;text-size-adjust:100%}
.afm[hidden]{display:none}
.afm-scrim{position:absolute;inset:0;background:rgba(2,8,12,.72)}
.afm-panel{position:relative;box-sizing:border-box;width:min(980px,100%);height:min(620px,85%);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;
  background:var(--panel);border:1px solid var(--rule2);border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.65);overflow:hidden}
.afm-head{display:flex;align-items:center;gap:10px;padding:10px 8px 6px 18px;border-bottom:1px solid var(--rule)}
.afm-head h2{margin:0;flex:1;min-width:0;font:700 19px/1.25 var(--sans);color:var(--text)}
.afm-close{flex:none;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:500 28px/1 var(--sans);cursor:pointer}
.afm-close:hover{background:var(--panel2);color:var(--text)}
.afm-hint{margin:8px 18px 4px;color:var(--muted);font-size:16px}
.afm-trackwrap{position:relative;min-height:0}
.afm-track{box-sizing:border-box;height:100%;display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-columns:200px;gap:10px;
  padding:8px 18px 10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding:0 18px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.afm-cat{position:relative;box-sizing:border-box;min-width:44px;min-height:44px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 12px 10px;
  border:2px solid var(--rule2);border-radius:12px;background:var(--panel2);color:var(--text);font:16px/1.3 var(--sans);text-align:left;cursor:pointer;scroll-snap-align:start;overflow:hidden;
  -webkit-tap-highlight-color:transparent;touch-action:pan-x}
.afm-cat:hover{border-color:var(--af-c)}
.afm-cat.on{border-color:var(--af-c);background:var(--af-cb);box-shadow:inset 0 0 0 1px var(--af-c)}
.afm-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--af-cb);border:1px solid var(--af-c)}
.afm-ic .af-ico{width:22px;height:22px}
.af-ico{width:18px;height:18px;fill:none;stroke:var(--af-c,#46d3d6);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.afm-name{font-weight:700;font-size:17px;line-height:1.25}
.afm-desc{color:var(--muted);font-size:16px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.afm-state{margin-top:auto;display:flex;align-items:center;gap:8px;font:600 14px var(--mono);color:var(--muted)}
.afm-box{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid var(--rule2);display:inline-flex;align-items:center;justify-content:center}
.afm-cat.on .afm-box{background:var(--af-c);border-color:var(--af-c)}
.afm-cat.on .afm-box::after{content:"";width:6px;height:11px;border:solid #04121a;border-width:0 3px 3px 0;transform:translateY(-1px) rotate(45deg)}
.afm-cat.on .afm-state{color:var(--af-c)}
.afm-more{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:flex-end;width:72px;padding-right:8px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--panel) 70%);color:var(--cyan);font:700 14px var(--mono)}
.afm-more[hidden]{display:none}
.afm-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 14px max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--rule);background:var(--panel)}
.afm-count{font:600 16px var(--mono);color:var(--text)}
.afm-reset{min-height:44px;padding:0 6px;border:0;background:transparent;color:var(--muted);font:600 15px var(--mono);text-decoration:underline;cursor:pointer}
.afm-actions{margin-left:auto;display:flex;gap:10px}
.afm-cancel,.afm-go{min-height:48px;min-width:44px;padding:0 16px;border-radius:10px;font:700 16px var(--mono);cursor:pointer}
.afm-cancel{border:1px solid var(--rule2);background:transparent;color:var(--text)}
.afm-go{border:0;background:var(--cyan);color:#04121a}
.afm :focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
/* a phone: a large bottom panel across the usable width, 80% of the visible height */
@media (max-width:600px){
  .afm{align-items:flex-end;padding:max(8px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
  .afm-panel{width:100%;height:80%;border-radius:18px}
  .afm-track{grid-auto-columns:calc((100% - 46px) / 2.25);padding:8px 14px 10px;scroll-padding:0 14px}
  .afm-foot{padding:10px 12px max(10px,env(safe-area-inset-bottom))}
  .afm-count{flex:1 1 auto}
  .afm-actions{flex:1 1 100%;margin:0}
  .afm-cancel{flex:1 1 35%}.afm-go{flex:1 1 65%}
}
/* a short visible viewport (landscape phone, keyboard): one row of cards, a taller share of the screen */
.afm.afm-short .afm-panel{height:94%}
.afm.afm-short .afm-track{grid-template-rows:minmax(0,1fr)}
.afm.afm-short .afm-hint{display:none}
.af-bar :focus-visible,.af-feed :focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (max-width:600px){
  .af-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .af-bar::-webkit-scrollbar{display:none}
  .af-chip .af-x{width:28px;height:28px}
  .af-add{order:-1;flex:none;height:32px}
}
html.af-locked{overflow:hidden}

/* ---- YOUR FEEDS (r89.194): the third strip, on the strips' own .as-strip / .as-card component (index.html) -------------
   Only what differs from the two strips lives here: the accent, the per-card category colour and icon, the NEW tag, the
   links row, and on a phone a two-line headline. Height never depends on how many feeds are selected. */
.af-feed{margin:10px 0 0}
.af-feed[hidden]{display:none}
.as-strip[data-plane="feeds"]{--as-acc:#46d3d6}
.af-strip .as-view[hidden],.af-strip .as-empty[hidden]{display:none}
.af-strip .as-card{border-left:3px solid var(--af-c)}
.af-strip .as-r1 .af-ic{flex:none;display:inline-flex;width:14px;height:14px}
.af-strip .as-r1 .af-ic .af-ico{width:14px;height:14px}
.af-strip .af-catl{color:var(--af-c);flex:0 1 auto}
.af-strip .as-lvl.lvl-medium{color:#8fb4d9}.af-strip .as-lvl.lvl-low{color:var(--muted)}
.af-strip .af-newtag{display:none;flex:none;margin-left:auto;padding:0 4px;font:700 10px "IBM Plex Mono",monospace;color:#ff8c2e;border:1px solid #ff8c2e;letter-spacing:.06em}
.af-strip .as-card.af-new .af-newtag{display:inline-block}
.af-strip .as-r3 .as-meta{flex:1 1 auto}
.af-strip .af-links{flex:none;display:inline-flex;gap:10px}
.af-strip .as-view:focus-visible{box-shadow:inset 0 0 0 2px var(--cyan)}
/* motion is the strips' own (snap only when still: index.html's [data-motion="reduced"] rule); touch swipes natively */
@media(max-width:760px){
  .af-strip{grid-template-rows:52px 90px}
  .af-strip .as-view,.af-strip .as-empty{height:90px}
  .af-strip .as-card{height:80px;grid-template-rows:16px 36px 14px;width:min(280px,calc(100vw - 72px))}
  .af-strip .as-h{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:18px;font-size:14px}
  .af-strip .af-links .as-d{display:inline-flex;align-items:center;min-height:14px}
}
/* r89.194 (Joe 2026-11-07) — category colours; ORANGE IS RESERVED for the two-hour NEW glow and is never a category colour
   (tests/r891940 fails on any orange category) */
.af-c-coral{--af-c:#eb5b55;--af-cb:rgba(235,91,85,.12)}
.af-c-crimson{--af-c:#e0446f;--af-cb:rgba(224,68,111,.12)}
.af-c-magenta{--af-c:#d64fd0;--af-cb:rgba(214,79,208,.12)}
.af-c-red{--af-c:#ff4040;--af-cb:rgba(255,64,64,.12)}
.af-c-cyan{--af-c:#46d3d6;--af-cb:rgba(70,211,214,.12)}
.af-c-teal{--af-c:#22b8a0;--af-cb:rgba(34,184,160,.12)}
.af-c-violet{--af-c:#a98bf0;--af-cb:rgba(169,139,240,.12)}
.af-c-green{--af-c:#5fd37a;--af-cb:rgba(95,211,122,.12)}
.af-c-blue{--af-c:#5b95f5;--af-cb:rgba(91,149,245,.12)}
.af-c-lime{--af-c:#a8d94a;--af-cb:rgba(168,217,74,.12)}
.af-c-indigo{--af-c:#8a8ff5;--af-cb:rgba(138,143,245,.12)}
/* ?alerts=cards (r88.1): the strips are replaced by production's cards and the feeds script does not run; the chips and the
   banner are hidden with the strips, so no control is shown that does nothing */
html.as-cards .af-bar,html.as-cards .af-feed,html.as-cards .afm{display:none!important}