/* THE TABS IN THE HEADER (brief BV, 2026-10-16; core/vk/tabs.php draws them, view/js/vk_tabs.js keeps them). His words, 2026-10-16, with a picture of his panel: "47. pestanas en la cabecera,
 * observa la foto adjunta 1, lo quiero asi" (data/test-tools/design/tabs-2026-10-16.png).
 *
 * WHERE. Not in the header's bar: the tabs grow out of the TOP EDGE OF THE CONTENT PANEL - the page, where the path, the hub's head and the grid are - starting flush with that panel's left edge
 * (the sidebar's right edge) and standing in the lower 31 px of the header, so that the active tab's foot is the panel's top. They end before the right-hand keys («Publicar cambios», the radar,
 * the select-all box, the search), which stay where they are: the strip is the last child of the bar and starts a formatting context of its own, so the floats of those keys take their room first
 * and it keeps what is left - it gets narrower by itself when the keys of a selection appear.
 * WHAT. 31 px tall; a tab's right side is a slant going down and out at 45 degrees (31 px of run, measured on his picture), its top-left corner rounded (11 px), the next tab starting under
 * the slant of the one before it, so they read as overlapping folder tabs - a step of 141 px from one idle tab to the next, the active one 187 px wide, as in his picture; after the last one
 * a slot of the same shape holds a «+». The ACTIVE tab is the panel's own colour and joins it with no line; the others are a little lighter than the bar around them; the active label and its
 * dot are the accent (green in the dark look, the app's violet in the light one), an idle label a muted green-grey. The mono face of the app's chrome (vk_mono.css dresses [role="tab"]);
 * 11 px, one line, an ellipsis when long. Crowded, the tabs shrink together down to 104 px; the ones that still do not fit are put away and «⌄» lists them all.
 * COLOURS are tokens, so the light look and a hub's colours still work: --vk-page and --vk-surface for the panel and the bar, --vk-violet for the accent (a hub account's and a person's
 * follows the hub, core/vk/hub_brand.php). The active tab takes the panel's colour as the header's shadow leaves it at the join (measured: 87 % of the page in dark, 95.5 % in light).
 * FROM 1181 px wide, where the header is the logo panel's 90 px bar; under it the header is a corner and the strip is not drawn (view/js/vk_tabs.js stops following the page there too).
 * THE VISITORS' WEB wears the same strip (brief CW, 2026-10-16: core/vk/landing_demo.php vk_ld_tabs_html(), search/js/vk_landing_tabs.js - kept in the visitor's own browser); on a phone, none, as here. */

.vkTabs{ display: none; }
.vkTabs *, .vkTabs *::before, .vkTabs *::after{ box-sizing: border-box; }

@media (min-width: 1181px){
    header .secondline .vkTabs{
        --vkT-h: 31px; --vkT-run: 31px; --vkT-r: 11px; --vkT-lap: 27px;
        --vkT-on: var(--vk-violet, #6e1fd1);
        --vkT-join: color-mix(in srgb, var(--vk-page, #e6e6e6) 95.5%, #000);
        --vkT-idleTop: color-mix(in srgb, var(--vk-surface, #ffffff) 45%, var(--vk-page, #e6e6e6));
        --vkT-idleBot: color-mix(in srgb, var(--vk-surface, #ffffff) 75%, var(--vk-page, #e6e6e6));
        --vkT-hoverTop: color-mix(in srgb, var(--vk-surface, #ffffff) 20%, var(--vk-page, #e6e6e6));
        --vkT-off: color-mix(in srgb, var(--vk-violet, #6e1fd1) 32%, #8d8c98);
        --vkT-offHover: color-mix(in srgb, var(--vk-violet, #6e1fd1) 70%, #5f5e6b);
        --vkT-edge: rgba(0, 0, 0, .09);
        display: flex; align-items: flex-end; position: relative; z-index: 2;
        height: var(--vkT-h); min-width: 0; contain: inline-size;
        /* 49 px under the bar's own 10 px edge = 59 px from the top, so the strip's foot is the bar's foot (90 px); left: the sidebar's right edge (calc(16.7% + 78px) of the window) minus where
           the bar's content box starts (8.5 px in), written in the percentages of that box, which is 9 px narrower than the window (measured at 1181-1920: the strip's edge is the sidebar's).
           The gap before the right-hand keys is padding: the strip's border box may not overlap their floats, but a margin may. */
        margin: 49px 0 0 calc(16.7% + 71px); padding-right: 14px;
        font-size: 11px; line-height: 1;
    }
    html[data-theme="dark"] header .secondline .vkTabs{
        --vkT-join: color-mix(in srgb, var(--vk-page, #17171c) 87%, #000);
        --vkT-idleTop: color-mix(in srgb, color-mix(in srgb, var(--vk-surface, #1e1e24) 97%, var(--vk-violet, #25d79f)) 97.4%, #fff);
        --vkT-idleBot: color-mix(in srgb, var(--vk-surface, #1e1e24) 98%, #fff);
        --vkT-hoverTop: color-mix(in srgb, color-mix(in srgb, var(--vk-surface, #1e1e24) 93%, var(--vk-violet, #25d79f)) 96%, #fff);
        --vkT-off: color-mix(in srgb, var(--vk-violet, #25d79f) 17%, #545058);
        --vkT-offHover: color-mix(in srgb, var(--vk-violet, #25d79f) 72%, #b8b7c2);
        --vkT-edge: rgba(0, 0, 0, .34);
    }

    /* a selection's keys at a narrow window leave little room: the script (view/js/vk_tabs.js fit()) takes «+» away, then lowers the least of the one tab, and under 60 px draws nothing */
    header .secondline .vkTabs.is-tight .vkTabs-add{ display: none; }
    header .secondline .vkTabs.is-tighter .vkTab{ min-width: 72px; }
    header .secondline .vkTabs.is-tighter .vkTab-main{ padding: 0 calc(var(--vkT-run) + 2px) 0 10px; }
    header .secondline .vkTabs.is-tighter .vkTab-x, header .secondline .vkTabs.is-tighter .vkTab.is-lone.is-active .vkTab-main::after{ display: none; }
    header .secondline .vkTabs.is-none{ visibility: hidden; pointer-events: none; }

    /* the list: the tabs, shrinking together down to their least; what does not fit is put away by the script (view/js/vk_tabs.js fit()) */
    header .secondline .vkTabs .vkTabs-list{ display: flex; align-items: flex-end; flex: 0 1 auto; min-width: 0; height: var(--vkT-h); overflow: hidden; padding-right: 2px; }

    /* ONE TAB. The shape is two pieces of one fill - a body with the rounded corner, and a skewed piece that makes the slant - behind the label. */
    header .secondline .vkTabs .vkTab{
        --vkT-fill: linear-gradient(180deg, var(--vkT-idleTop), var(--vkT-idleBot));
        position: relative; z-index: var(--vkT-z, 2); flex: 0 1 168px; width: 168px; min-width: 104px; height: var(--vkT-h);
        margin: 0 0 0 calc(var(--vkT-lap) * -1); padding: 0; pointer-events: none;
    }
    header .secondline .vkTabs .vkTab.is-first{ margin-left: 0; }
    /* THE FIRST TAB AT REST (his words, 2026-10-17: "cuando pasa a estado de reposo hay un gap con el borde redondo de abajo y queda mal... en la primera si es pasiva colocar un degradado al principio
       para disimular ese desajuste visual"): the panel under it has its top-left corner rounded (16 px in the dark look), and under an idle tab - lighter than the panel - that corner left a
       step between the tab's colour and the column beside the panel (the wedge: --vk-surface, 30,30,36 in the dark look, measured). A gradient from that column's colour at the tab's foot-left
       corner, fading out within ~46 px, makes the tab melt into it (a gradient from the panel's colour made it worse: dark above the light wedge); the active first tab is the panel and needs none. */
    header .secondline .vkTabs .vkTab.is-first:not(.is-active)::before{
        background: radial-gradient(circle at 0 100%, var(--vk-surface, #1e1e24) 0, var(--vk-surface, #1e1e24) 15px, transparent 46px), var(--vkT-fill, linear-gradient(180deg, var(--vkT-idleTop), var(--vkT-idleBot)));
    }
    header .secondline .vkTabs .vkTab[hidden]{ display: none; }
    header .secondline .vkTabs .vkTab.is-active{ --vkT-fill: var(--vkT-join); flex-basis: 187px; width: 187px; z-index: 99; }
    header .secondline .vkTabs .vkTab:not(.is-active):hover{ --vkT-idleTop: var(--vkT-hoverTop); }
    header .secondline .vkTabs .vkTab::before,
    header .secondline .vkTabs .vkTab::after,
    header .secondline .vkTabs .vkTabs-add::before,
    header .secondline .vkTabs .vkTabs-add::after{ content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; background: var(--vkT-fill, linear-gradient(180deg, var(--vkT-idleTop), var(--vkT-idleBot))); pointer-events: none; }
    header .secondline .vkTabs .vkTab::before,
    header .secondline .vkTabs .vkTabs-add::before{ left: 0; right: var(--vkT-run); border-top-left-radius: var(--vkT-r); }
    header .secondline .vkTabs .vkTab::after,
    header .secondline .vkTabs .vkTabs-add::after{
        right: 0; width: calc(var(--vkT-run) * 2); border-top-right-radius: 7px;
        transform: skewX(45deg); transform-origin: 100% 100%; box-shadow: 1px 0 0 var(--vkT-edge);
    }

    /* the label: the whole shape is the press (the clip keeps the empty corner of the slant out of it) */
    header .secondline .vkTabs .vkTab-main{
        position: absolute; inset: 0; display: flex; align-items: center; margin: 0; --vkT-pl: clamp(14px, calc((100% - 104px) * .35 + 14px), 36px); padding: 0 calc(var(--vkT-run) + 22px) 0 var(--vkT-pl);
        color: var(--vkT-off); cursor: pointer; pointer-events: auto; outline: none; user-select: none; -webkit-user-select: none;
        clip-path: polygon(0 0, calc(100% - var(--vkT-run)) 0, 100% 100%, 0 100%);
        font-size: 11px; line-height: 1; letter-spacing: 0;
    }
    /* an idle tab after the first starts under the slant of the one before it: its name begins 10 px further in, as in his picture */
    header .secondline .vkTabs .vkTab:not(.is-first):not(.is-active) .vkTab-main{ padding-left: calc(var(--vkT-pl) + 10px); }
    /* an idle tab keeps no room for the dot: its name runs up to the slant (the «x» that comes on the pointer has a ground of its own and covers the end of a long name) */
    header .secondline .vkTabs .vkTab:not(.is-active) .vkTab-main{ padding-right: calc(var(--vkT-run) * .5 + 14px); }
    header .secondline .vkTabs .vkTab:not(.is-active):hover .vkTab-main{ color: var(--vkT-offHover); }
    header .secondline .vkTabs .vkTab.is-active .vkTab-main{ color: var(--vkT-on); }
    header .secondline .vkTabs .vkTab-name{ display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    header .secondline .vkTabs .vkTab-main:focus-visible .vkTab-name{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 3px; border-radius: 3px; }

    /* the dot of the active tab, and where «x» comes in its place when the pointer or the keys are on the tab */
    header .secondline .vkTabs .vkTab-x{
        position: absolute; top: 50%; right: calc(var(--vkT-run) + 2px); z-index: 2; width: 18px; height: 18px; margin: -9px 0 0; padding: 0;
        display: block; border: 0; border-radius: 50%; background: transparent; color: var(--vkT-offHover); cursor: pointer; pointer-events: auto; box-shadow: none; opacity: 0;
        font-size: 15px; line-height: 18px; text-align: center;
    }
    header .secondline .vkTabs .vkTab-x::after{ content: "\00d7"; display: none; }
    header .secondline .vkTabs .vkTab.is-active .vkTab-x{ opacity: 1; }
    header .secondline .vkTabs .vkTab.is-active .vkTab-x::before{ content: ""; display: block; position: absolute; left: 6.5px; top: 6.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--vkT-on); }
    header .secondline .vkTabs .vkTab:hover .vkTab-x,
    header .secondline .vkTabs .vkTab:focus-within .vkTab-x{ opacity: 1; }
    header .secondline .vkTabs .vkTab:not(.is-active) .vkTab-x{ right: calc(var(--vkT-run) + 10px); }     /* clear of the next tab's slant, which stands over the end of this one */
    header .secondline .vkTabs .vkTab:not(.is-active):hover .vkTab-x,
    header .secondline .vkTabs .vkTab:not(.is-active):focus-within .vkTab-x{ background: var(--vkT-idleTop); }
    header .secondline .vkTabs .vkTab:hover .vkTab-x::before,
    header .secondline .vkTabs .vkTab:focus-within .vkTab-x::before{ display: none; }
    header .secondline .vkTabs .vkTab:hover .vkTab-x::after,
    header .secondline .vkTabs .vkTab:focus-within .vkTab-x::after{ display: block; }
    header .secondline .vkTabs .vkTab-x:hover{ background: color-mix(in srgb, var(--vkT-offHover) 22%, transparent); color: var(--vkT-on); }
    header .secondline .vkTabs .vkTab-x:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 1px; }
    /* a lone tab has nothing to close: its dot stands alone */
    header .secondline .vkTabs .vkTab.is-lone.is-active .vkTab-main::after{ content: ""; position: absolute; right: calc(var(--vkT-run) + 8.5px); top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--vkT-on); }

    /* The first tab, when it is the active one, IS the panel's top-left corner: the corner the sidebar rounds beside the page (16 px in the dark look, vk_dark.css; 19 in the light one,
       sidebar_tree.css - both are the tree's ::before, which stands above the header) is left out under it, so the tab's left edge goes straight down into the panel's. Where :has()
       is not known the corner stays and nothing else changes. */
    html:has(.vkTabs .vkTab.is-first.is-active) .vkTree::before{ display: none; }

    /* renaming */
    header .secondline .vkTabs .vkTab-edit{
        display: block; width: 100%; min-width: 0; height: 21px; margin: 0; padding: 0 6px; border: 1px solid var(--vkT-on); border-radius: 5px; box-shadow: none;
        background: color-mix(in srgb, var(--vk-page, #e6e6e6) 70%, transparent); color: var(--vk-text, #16161a); font: inherit; font-size: 11px; line-height: 19px; outline: none;
    }

    /* «+»: a slot of the same shape after the last tab */
    header .secondline .vkTabs .vkTabs-add{
        --vkT-fill: linear-gradient(180deg, var(--vkT-idleTop), var(--vkT-idleBot));
        position: relative; z-index: 1; flex: none; width: 77px; height: var(--vkT-h); margin: 0 0 0 calc(var(--vkT-lap) * -1); padding: 0 18px 0 0;
        display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--vkT-on); cursor: pointer;
        font-size: 0; line-height: 0;
    }
    header .secondline .vkTabs .vkTabs-add:hover:not(:disabled){ --vkT-idleTop: var(--vkT-hoverTop); }
    /* the cross is drawn, 11 px with 2 px strokes as his picture's (a character of the face came out thin); its words are the button's label */
    header .secondline .vkTabs .vkTabs-add{ --vkT-plus: var(--vkT-on); }
    header .secondline .vkTabs .vkTabs-add > span{
        position: relative; display: block; width: 11px; height: 11px; margin: 0 0 0 10px; overflow: hidden; color: transparent;
        background: linear-gradient(var(--vkT-plus), var(--vkT-plus)) center / 11px 2px no-repeat, linear-gradient(var(--vkT-plus), var(--vkT-plus)) center / 2px 11px no-repeat;
    }
    header .secondline .vkTabs .vkTabs-add:disabled{ --vkT-plus: var(--vkT-off); cursor: default; opacity: .7; }
    header .secondline .vkTabs .vkTabs-add:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: -3px; }

    /* «⌄»: the list of all of them, at the strip's right end, once not all of them fit */
    header .secondline .vkTabs .vkTabs-more{
        flex: none; align-self: center; width: 30px; height: 24px; margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; justify-content: center;
        border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--vkT-offHover); cursor: pointer; font-size: 17px; line-height: 1;
    }
    header .secondline .vkTabs .vkTabs-more[hidden]{ display: none; }
    header .secondline .vkTabs .vkTabs-more:hover, header .secondline .vkTabs .vkTabs-more[aria-expanded="true"]{ background: color-mix(in srgb, var(--vkT-offHover) 18%, transparent); color: var(--vkT-on); }
    header .secondline .vkTabs .vkTabs-more:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 1px; }

    /* the list's menu is the tree's (.vkMenu, sidebar_tree.css), fixed under the key by the script; the name takes the line and an ellipsis */
    header .secondline .vkTabs .vkTabs-menu{ width: 250px; }
    header .secondline .vkTabs .vkTabs-menu[hidden]{ display: none; }
    header .secondline .vkTabs .vkTabs-menuName{ display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    header .secondline .vkTabs .vkTabs-menuNew{ margin-top: 4px !important; border-top: 1px solid var(--vk-line, #e4e3ea) !important; border-radius: 0 0 9px 9px !important; color: var(--vk-violet, #6e1fd1) !important; }
    header .secondline .vkTabs .vkTabs-menuNew:disabled{ opacity: .5; cursor: default; }
}