/* THE HEAD STAYS ON SCROLL (2026-10-07, view/js/vk_stickhead.js). When the row of type chips has gone up under the app's header, one line slides down from
   behind it (his "quitale el fondo a la caja fija. y haz que aparezca de detras del header bajando desde arriba ... con easeinout fast"): the path in one
   pill, the chips in the middle, the buttons right - icons only, each filled like «Subir archivos». No background of its own: only its pieces have theirs. */
.vkStick{
    /* his values (2026-10-07, with a recording): 99 px from the top, z-index 100 - under the header's 120 (style.css), so it comes out from behind
       the header and its shadow */
    position: fixed; top: 99px; z-index: 100;
    display: flex; align-items: center; gap: 18px;
    min-height: 56px; padding: 6px 0; box-sizing: border-box;
    background: transparent; pointer-events: none;
    transform: translateY(-130%); transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.vkStick.is-in{ transform: translateY(0); }
/* CLOSER TO THE PANEL'S EDGES, THE TOPS ON ONE LINE, A BLURRED GROUND (2026-10-08, his words "puedes desenfocar este fondo de detras en esta parte en feeling de degradado para
   que se puedan distinguir un poco mas los botones. De paso ajunta mas las breadcrumbs a la parte izquierda y arriba, con espacio proporcional, y hazlo tambien con los demas
   bloques de botones. el del medio ajuntalo mas arriba como el breadcrumbs y el bloque de los botones de la derecha tambien pero a la derecha"). view/js/vk_stickhead.js puts the
   line 14 px inside the content panel on the left, the top and the right (--vk-stick-edge, and its top: his 99 px above is the fallback); here the path, the chips and the
   buttons start at its top (they were centred in 56 px), the path at its left, the buttons at its right. (The blurred ground behind it of that day went the same day, his
   words: "ok, ahora solo quita el desenfoque de la caja fija, y pon blancos los iconos de los botones de la parte derecha".) */
.vkStick{ align-items: flex-start; min-height: 0; padding: 0; }
/* no buttons on the right (a person's page: no actions in the head) - the type chips go to the right end instead of the middle (his words, 2026-10-08: "en estos casos
   cuando no hay parte derech de botones, pon los que te marco en la derecha") */
.vkStick-right:empty{ display: none; }
.vkStick.is-noacts .vkStick-mid{ justify-content: flex-end; }              /* view/js/vk_stickhead.js: no button showing in the head */
.vkStick[hidden]{ display: none; }
.vkStick > *{ pointer-events: auto; }                                 /* the gaps between the pieces let the cards under them be clicked */
.vkStick-left{ flex: 0 1 auto; min-width: 0; overflow: hidden; }
.vkStick-left .vkPath{
    margin: 0; flex-wrap: nowrap; white-space: nowrap; display: flex; align-items: center;
    height: 34px; padding: 0 14px; border-radius: 99px; box-sizing: border-box;
    border: 1px solid var(--vk-line-dddce5, #dddce5); background: var(--vk-surface, #ffffff);   /* one pill, as the type chips */
}
html[data-theme="dark"] .vkStick-left .vkPath{ border-color: #3d3d4a; }
.vkStick-mid{ flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; overflow: hidden; }
.vkStick-mid .vkTf{ margin: 0; max-width: 100%; width: auto !important; flex: 0 1 auto; }   /* its own width, so the middle centres it */
.vkStick-right{ flex: 0 0 auto; }
.vkStick-right .vkHead-actions{ position: static; display: flex; gap: 8px; margin: 0; transform: none !important; }
.vkStick-right .vkHead-actions button{ width: 42px; min-width: 42px; height: 42px; padding: 0; justify-content: center; gap: 0; }
/* «Colores y enlaces» and «Dar acceso a una persona» shaped like «Subir archivos» (12 px corners); in dark filled like it (#30303a, white icon) */
.vkStick-right .vkHead-actions .vkHead-brand, .vkStick-right .vkHead-actions .vkHead-give{ border-radius: 12px; }
html[data-theme="dark"] .vkStick-right .vkHead-actions .vkHead-brand, html[data-theme="dark"] .vkStick-right .vkHead-actions .vkHead-give{ background: #30303a; color: #ffffff; border: 0; }
/* in light every button of the line in the app's blue - his "los botones de la caja fija que son grises han de ser azules" (2026-10-07; they were three
   #16161a, the folder #f0eff5 and «⋯» white). Dark stays as it was, his word the same morning: "deja como estaba el estilo de los botones de la caja fija
   del dark mode" */
html:not([data-theme="dark"]) .vkStick .vkStick-right .vkHead-actions button{ background: var(--vk-brand, #0f52ff); color: var(--vk-brand-ink, #ffffff); border: 0; }
html:not([data-theme="dark"]) .vkStick .vkStick-right .vkHead-actions button:hover{ background: var(--vk-brand, #0f52ff); filter: brightness(1.12); }
/* THE LINE'S BUTTONS AS THE SELECTION'S KEYS (2026-10-08, his words "aplica el estilo de los botones de la foto2 a los estilos de los botones de la foto 1": photo 1 this line's
   five buttons, photo 2 the header's keys of a selection - view/css/vk_settings.css): the raised key - its face, the line on top, the bezel with its hairline, the shadow under it -
   with the light grey mark; 12 px corners, 14 px between faces so the bezels do not touch. In the light look the same key in the app's blue, as his "los botones de la caja fija
   que son grises han de ser azules" (2026-10-07) asked of this line. */
.vkStick .vkStick-right .vkHead-actions{ gap: 14px; padding: 0 4px; }
html[data-theme="dark"] .vkStick .vkStick-right .vkHead-actions button{
    border: 0; border-radius: 12px; color: #ffffff;                       /* white (his words, 2026-10-08: "pon blancos los iconos de los botones de la parte derecha"; it was #9d9ea4) */
    background: linear-gradient(180deg, #303139 0%, #2a2b32 100%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 0 0 1px #16161b, 0 0 0 4px #25262c, 0 -1px 0 4px #34353d, 0 8px 14px 2px rgba(0, 0, 0, .45);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
html[data-theme="dark"] .vkStick .vkStick-right .vkHead-actions button:hover{ background: linear-gradient(180deg, #34353e 0%, #2d2e36 100%); color: #ffffff; }
html:not([data-theme="dark"]) .vkStick .vkStick-right .vkHead-actions button{
    border: 0; border-radius: 12px; color: var(--vk-brand-ink, #ffffff);
    background: linear-gradient(180deg, color-mix(in srgb, var(--vk-brand, #0f52ff) 80%, #ffffff) 0%, var(--vk-brand, #0f52ff) 55%, color-mix(in srgb, var(--vk-brand, #0f52ff) 88%, #000000) 100%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(255, 255, 255, .15),
        0 0 0 1px color-mix(in srgb, var(--vk-brand, #0f52ff) 80%, #000000), 0 0 0 4px color-mix(in srgb, var(--vk-brand, #0f52ff) 12%, #ffffff),
        0 -1px 0 4px color-mix(in srgb, var(--vk-brand, #0f52ff) 22%, #ffffff), 0 7px 12px 2px color-mix(in srgb, var(--vk-brand, #0f52ff) 24%, transparent);
    transition: background .15s ease, filter .15s ease, transform .15s ease;
}
html:not([data-theme="dark"]) .vkStick .vkStick-right .vkHead-actions button:hover{ filter: brightness(1.1); }
/* THE PATH AND THE TYPE CHIPS AS KEYS TOO (2026-10-08, his words "pon el mismo estilo a los demas botones, como el los botones de la derecha. 1 caja con estilo del boton para
   las breadcrumbs y las extnsiones de archivo, aplicale estilo boton a cada una"): the path one key with its steps inside, each type chip a key of its own (the pressed one
   tinted violet, as it was); corners a fifth of the height. The pieces that clip (the path's box, the chips' strip, which scrolls) get room for the bezels and the shadow,
   given back with negative margins so nothing moves. Light colours in the light look. */
.vkStick-left{ padding: 6px 6px 16px; margin: -6px -6px -16px; }
.vkStick-mid{ padding: 6px 0 16px; margin: -6px 0 -16px; }
.vkStick-mid .vkTf{ gap: 14px; padding: 6px 6px 16px; margin: -6px 0 -16px; }
.vkStick .vkStick-left .vkPath, .vkStick .vkStick-mid .vkTf-chip{
    border: 0; border-radius: 9px;
    background: linear-gradient(180deg, #fdfdfe 0%, #f1f3f6 100%);
    box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .9),
        0 0 0 1px #d6dbe2, 0 0 0 4px #eef1f4, 0 -1px 0 4px #dfe4ea, 0 7px 12px 2px rgba(30, 45, 65, .16);
    transition: background .15s ease, transform .15s ease;
}
.vkStick .vkStick-left .vkPath{ border-radius: 10px; }
.vkStick .vkStick-mid .vkTf-chip:hover{ background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%); }
.vkStick .vkStick-mid .vkTf-chip[aria-pressed="true"]{      /* in the look's accent (2026-10-08: it was a fixed violet; the tree's labels take the same) */
    background: linear-gradient(180deg, color-mix(in srgb, var(--vk-violet, #6e1fd1) 5%, #ffffff) 0%, color-mix(in srgb, var(--vk-violet, #6e1fd1) 13%, #ffffff) 100%);
    box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .9),
        0 0 0 1px color-mix(in srgb, var(--vk-violet, #6e1fd1) 30%, #ffffff), 0 0 0 4px color-mix(in srgb, var(--vk-violet, #6e1fd1) 7%, #ffffff),
        0 -1px 0 4px color-mix(in srgb, var(--vk-violet, #6e1fd1) 18%, #ffffff), 0 7px 12px 2px color-mix(in srgb, var(--vk-violet, #6e1fd1) 16%, transparent);
}
.vkStick .vkStick-mid .vkTf-chip:active{ transform: translateY(1px); }
html[data-theme="dark"] .vkStick .vkStick-left .vkPath, html[data-theme="dark"] .vkStick .vkStick-mid .vkTf-chip{
    background: linear-gradient(180deg, #303139 0%, #2a2b32 100%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 0 0 1px #16161b, 0 0 0 4px #25262c, 0 -1px 0 4px #34353d, 0 8px 14px 2px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .vkStick .vkStick-mid .vkTf-chip:hover{ background: linear-gradient(180deg, #34353e 0%, #2d2e36 100%); }
html[data-theme="dark"] .vkStick .vkStick-mid .vkTf-chip[aria-pressed="true"]{
    background: linear-gradient(180deg, color-mix(in srgb, var(--vk-violet, #ba93f5) 26%, #303139) 0%, color-mix(in srgb, var(--vk-violet, #ba93f5) 18%, #2a2b32) 100%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 0 0 1px #16161b, 0 0 0 4px color-mix(in srgb, var(--vk-violet, #ba93f5) 14%, #25262c), 0 -1px 0 4px color-mix(in srgb, var(--vk-violet, #ba93f5) 26%, #34353d),
        0 8px 14px 2px rgba(0, 0, 0, .45);
}
.vkStick .vkStick-right .vkHead-actions button:active{ transform: translateY(1px); }
/* A PAGE WITH ITS BANNER ON TOP (brief CE, 2026-10-12; view/js/vk_stickhead.js adds .is-banner, view/css/sidebar_tree.css "A HUB'S OR GROUP'S PAGE WITH ITS BANNER ON TOP"): here the line is the page's
   own path and keys, standing on the banner as soon as the page's scripts run (inc/footer.php loads this one first: before the first paint, measured) - no slide in from behind the header. It
   stays where it stands (14 px inside the panel: 10 px inside the banner, as in his mockup) and follows the page when it scrolls. Only its middle - the type chips - keeps the old rule: it is out of sight until the row of chips has gone up under the
   header (.is-mid), and while it is out of sight it is no key to click either (visibility). The keys stand 14 px from the bar's edge, as the path does from the tree's: his mockup's
   13 (the 4 px of padding the line's keys have inside it are for the slide-in line's own look). */
.vkStick.is-banner{ transform: none; transition: none; }
.vkStick.is-banner .vkStick-mid{ opacity: 0; visibility: hidden; transition: opacity .2s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .2s; }
.vkStick.is-banner.is-mid .vkStick-mid{ opacity: 1; visibility: visible; transition-delay: 0s; }
.vkStick.is-banner .vkStick-right .vkHead-actions{ padding-right: 0; }
/* READABLE ON ANY PICTURE (brief CE: "dark with a light rim, readable on any picture"). Every piece carries its own solid face, so its words and icons never depend on the picture (6 to 16 against
   the face, measured); what does is its SILHOUETTE - the light look's pale path on a light banner was 1.06 against it, its blue keys on a mid one 1.7, the dark look's keys on a dark one 1.4.
   A hair-line round the bezel (outside it: outline-offset 4 px, which follows the corners) - light in the dark look, dark in the light one - gives each piece an edge on any picture; a
   keyboard focus ring (the stylesheet of the head's buttons) keeps its own outline. */
html[data-theme="dark"] .vkStick.is-banner .vkStick-left .vkPath,
html[data-theme="dark"] .vkStick.is-banner .vkStick-right .vkHead-actions button:not(:focus-visible){ outline: 1px solid rgba(255, 255, 255, .16); outline-offset: 4px; }
html:not([data-theme="dark"]) .vkStick.is-banner .vkStick-left .vkPath,
html:not([data-theme="dark"]) .vkStick.is-banner .vkStick-right .vkHead-actions button:not(:focus-visible){ outline: 1px solid rgba(0, 0, 0, .3); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce){ .vkStick.is-banner .vkStick-mid{ transition: none; } }
@media (prefers-reduced-motion: reduce){ .vkStick{ transition: none; } .vkStick .vkStick-right .vkHead-actions button{ transition: none; } .vkStick .vkStick-right .vkHead-actions button:active{ transform: none; } .vkStick .vkStick-mid .vkTf-chip{ transition: none; } .vkStick .vkStick-mid .vkTf-chip:active{ transform: none; } }

/* NO BREADCRUMBS UNDER 1126 PX (brief CW, 2026-10-16; his words: "do not include in movile view the breadcrumbs"): the line comes out from 1000 px, so on a tablet it would carry a copy of the path - not drawn there
   (view/css/sidebar_tree.css hides the path itself) */
@media (max-width: 1125px){
    .vkStick .vkStick-left .vkPath{ display: none !important; }
}