/* ==========================================================================
   css/v2/rss-news.css - the RSS news boxes of the BSE trades pages
   (Business / News / International), WEB-INF/tags/v2/rssNewsBox.tag.
   Linked by screens/bse/transactions/transactions.jsp and
   transactions_history.jsp, after markets.css (the picker buttons are its
   .btn_action / .btn_ghost).  The box itself is a plain v2 .small_infobox
   (base.css); this file adds
     .rss_btn      the gear and collapse buttons in the heading
     .rss_panel    the source picker, a popover under the heading
     .rss_list     the items: time + source on one line, the title under it
     .rss_below    the "below the trades" layout (?rss=below)
   js/v2/rss-news.js prepends refreshed items (li.rss_new flashes) and sets
   .is_collapsed on a box the viewer has closed.
   ========================================================================== */

body.v2 .rss_box { position: relative; }
body.v2 .rss_box .heading { margin-bottom: 6px; gap: 6px; }
body.v2 .rss_box .heading .rule { margin-right: 4px; }

/* ---- heading buttons ---- */
body.v2 .rss_btn {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 34px; height: 34px; padding: 0; margin: 0;
    border: 1px solid transparent; border-radius: 8px;
    background: none; color: #1e4280; cursor: pointer; text-decoration: none;
}
body.v2 .rss_btn:hover,
body.v2 .rss_btn:focus-visible,
body.v2 .rss_btn[aria-expanded="true"].rss_gear {
    background: #f0f3f6; border-color: #dfe7f0; text-decoration: none;
}
body.v2 .rss_btn svg { display: block; width: 18px; height: 18px; }
body.v2 .rss_toggle svg { transition: transform .15s ease; }

/* ---- collapsed box: the heading only ---- */
body.v2 .rss_box.is_collapsed { padding-bottom: 12px; }
body.v2 .rss_box.is_collapsed .heading { margin-bottom: 0; }
body.v2 .rss_box.is_collapsed .rss_list,
body.v2 .rss_box.is_collapsed .rss_panel { display: none; }
body.v2 .rss_box.is_collapsed .rss_toggle svg { transform: rotate(180deg); }

/* ---- items ---- */
body.v2 ul.rss_list a {
    display: block; padding: 9px 0; font-size: 15px; line-height: 1.4;
}
body.v2 ul.rss_list a::before { content: none; }
body.v2 .rss_meta {
    display: flex; gap: 8px; min-width: 0; margin-bottom: 2px;
    font-size: 12.5px; line-height: 1.4; color: #6b7686;
    font-variant-numeric: tabular-nums;
}
body.v2 .rss_time { flex: 0 0 auto; font-weight: 600; color: #5b6675; }
body.v2 .rss_site { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.v2 .rss_title { display: block; color: #1e4280; overflow-wrap: anywhere; }
body.v2 ul.rss_list a:hover .rss_title { text-decoration: underline; }
body.v2 ul.rss_list a:hover { text-decoration: none; }
body.v2 ul.rss_list li.rss_empty { padding: 10px 0; font-size: 14px; color: #6b7686; }
/* a refreshed item, like the flashed rows of the trades table */
body.v2 ul.rss_list li.rss_new { animation: rss_flash 6s ease-out; }
@keyframes rss_flash {
    from { background: #fdfbe2; }
    to   { background: transparent; }
}

/* ---- source picker ---- */
body.v2 .rss_panel {
    position: absolute; z-index: 20; top: 54px; left: 10px; right: 10px;
    padding: 14px 16px 14px;
    background: #fff; border: 1px solid #cdd6e2; border-radius: 8px;
    box-shadow: 0 6px 20px rgba(20, 35, 60, .14);
}
body.v2 .rss_panel[hidden] { display: none; }
body.v2 .rss_panel_title {
    margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #5b6675;
}
body.v2 .rss_src {
    display: flex; align-items: center; gap: 8px; min-height: 32px;
    font-size: 15px; color: #1f2733; cursor: pointer;
}
body.v2 .rss_src input {
    flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: #1e4280;
}
body.v2 .rss_src_all {
    font-weight: 600; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid #eef2f7;
}
body.v2 .rss_sources {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 12px;
}
body.v2 .rss_hint { margin: 8px 0 12px; font-size: 13px; line-height: 1.4; color: #6b7686; }
body.v2 .rss_actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.v2 .rss_actions .btn_action { min-height: 40px; }

@media (max-width: 640px) {
    /* on a phone the picker is a panel in the flow, not a popover */
    body.v2 .rss_panel {
        position: static; margin: 4px 0 10px; box-shadow: none;
    }
    body.v2 .rss_actions .btn_action { flex: 1 1 auto; }
}

/* ==========================================================================
   Layout B - under the trades card (?rss=below).  The grid answers to the
   width of the left column, not of the window (a container query), since
   the column is ~720px beside the sidebar and full width without it:
     < 560px   one column, the boxes stacked
     560-959   Business | News side by side, International across both
               with its items in two columns (three 230px columns would
               leave the titles five and six lines tall)
     >= 960px  three columns
   Without container query support the boxes simply stack.
   ========================================================================== */
body.v2 .rss_below { margin-top: 24px; container-type: inline-size; }
body.v2 .rss_below_grid {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start;
}
body.v2 .rss_below_grid > .small_infobox { margin: 0; }
@container (min-width: 560px) {
    body.v2 .rss_below_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.v2 .rss_below_grid > .rss_box:nth-child(3) { grid-column: 1 / -1; }
    body.v2 .rss_below_grid > .rss_box:nth-child(3) ul.rss_list { columns: 2; column-gap: 28px; }
    body.v2 .rss_below_grid > .rss_box:nth-child(3) ul.rss_list li { break-inside: avoid; }
}
@container (min-width: 960px) {
    body.v2 .rss_below_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.v2 .rss_below_grid > .rss_box:nth-child(3) { grid-column: auto; }
    body.v2 .rss_below_grid > .rss_box:nth-child(3) ul.rss_list { columns: auto; }
}

/* ==========================================================================
   Layout A2 - the sidebar variant with one card and a tab per group
   (?rss=tabs).  The three boxes sit inside .rss_tabs unchanged; here they
   lose their own card, title and collapse button, only the chosen one shows
   (js/v2/rss-news.js sets [hidden]) and its list scrolls inside the card:
   about five items show, the box holds 50.  js/v2/rss-news.js adds
     li.rss_day        day headers, sticky at the top of the scroller
     .can_up/.can_down on the box while there is more above / below (fades)
     .rss_newpill      "N new" over the list when the reader is scrolled down
     .rss_badge        the count on the tab of a hidden box that got items
   ========================================================================== */
/* the clock alone next to the day headers; the other layouts keep the
   "dd.MM HH:mm" of an older item and have no headers */
body.v2 .rss_clock { display: none; }
body.v2 .rss_tabs .rss_time { display: none; }
body.v2 .rss_tabs .rss_clock { display: inline; flex: 0 0 auto; font-weight: 600; color: #5b6675; }

body.v2 .rss_tabs { padding-top: 6px; padding-bottom: 8px; }
body.v2 .rss_tabbar {
    display: flex; margin: 0; border-bottom: 2px solid #739fcc;
}
body.v2 .rss_tab {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    flex: 1 1 auto; min-width: 0;
    padding: 10px 4px 8px; margin: 0 0 -2px;
    border: 0; border-bottom: 3px solid transparent; background: none;
    color: #5b6675; font: 15px/20px "Trebuchet MS", Arial, sans-serif;
    white-space: nowrap; cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
body.v2 .rss_tab:hover { color: #1e4280; }
body.v2 .rss_tab[aria-selected="true"] { color: #1e4280; font-weight: 700; border-bottom-color: #1e4280; }
body.v2 .rss_tab:focus-visible { outline: 2px solid #6699cc; outline-offset: -2px; border-radius: 4px 4px 0 0; }
/* new items in a tab not being looked at */
body.v2 .rss_badge {
    display: inline-block; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: #c62828; color: #fff;
    font: 700 11px/18px Arial, sans-serif; text-align: center;
    font-variant-numeric: tabular-nums;
}

body.v2 .rss_tabs .rss_box {
    position: relative; margin: 0; padding: 0;
    border: 0; border-radius: 0; box-shadow: none; background: none;
}
body.v2 .rss_tabs .rss_box[hidden] { display: none; }
body.v2 .rss_tabs .rss_box .heading {
    position: absolute; z-index: 3; top: 4px; right: 0; margin: 0;
}
body.v2 .rss_tabs .rss_box .heading > span,
body.v2 .rss_tabs .rss_box .heading .rule,
body.v2 .rss_tabs .rss_toggle { display: none; }
body.v2 .rss_tabs .rss_btn { width: 30px; height: 30px; background: #fff; }
body.v2 .rss_tabs .rss_panel { top: 40px; left: 0; right: 0; }

/* ---- the scroller ---- */
body.v2 .rss_tabs ul.rss_list {
    max-height: 468px; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 -6px 0 0; padding: 0 6px 0 0;
    scrollbar-width: thin; scrollbar-color: #cdd6e2 transparent;
    -webkit-overflow-scrolling: touch;
}
body.v2 .rss_tabs ul.rss_list::-webkit-scrollbar { width: 6px; }
body.v2 .rss_tabs ul.rss_list::-webkit-scrollbar-thumb { background: #cdd6e2; border-radius: 3px; }
body.v2 .rss_tabs ul.rss_list::-webkit-scrollbar-thumb:hover { background: #9fb0c7; }
body.v2 .rss_tabs ul.rss_list:focus-visible { outline: 2px solid #6699cc; outline-offset: 2px; border-radius: 4px; }
/* fades at the edge that has more to scroll */
body.v2 .rss_tabs .rss_box.can_down ul.rss_list {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
body.v2 .rss_tabs .rss_box.can_up ul.rss_list {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 44px);
            mask-image: linear-gradient(to bottom, transparent, #000 44px);
}
body.v2 .rss_tabs .rss_box.can_up.can_down ul.rss_list {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 44px, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 44px, #000 calc(100% - 40px), transparent);
}

/* day headers: stick to the top while their day scrolls under them */
body.v2 .rss_tabs ul.rss_list li.rss_day {
    position: sticky; top: 0; z-index: 2;
    padding: 12px 40px 6px 0; margin: 0;
    background: #fff; border-bottom: 1px solid #e3e9f1;
    font: 700 11.5px/16px Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase;
    color: #5b6675;
}
body.v2 .rss_tabs ul.rss_list li.rss_day + li { border-top: 0; }

/* "N new" - the reader is scrolled down and new items came in above */
body.v2 .rss_newpill {
    position: absolute; z-index: 4; top: 44px; left: 50%; transform: translateX(-50%);
    padding: 6px 14px; border: 0; border-radius: 999px;
    background: #1e4280; color: #fff; cursor: pointer;
    font: 700 13px/18px Arial, sans-serif; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(20, 35, 60, .25);
    animation: rss_pill_in .2s ease-out;
}
body.v2 .rss_newpill:hover { background: #15325f; }
body.v2 .rss_newpill:focus-visible { outline: 2px solid #6699cc; outline-offset: 2px; }
body.v2 .rss_newpill[hidden] { display: none; }
@keyframes rss_pill_in {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 640px) {
    /* a phone scrolls the page with the same thumb: a shorter box leaves
       room to scroll past it */
    body.v2 .rss_tabs ul.rss_list { max-height: min(468px, 60vh); }
    body.v2 .rss_tab { font-size: 15px; padding: 12px 4px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    body.v2 .rss_newpill, body.v2 ul.rss_list li.rss_new { animation: none; }
}