/* THE PHONE'S OWN PIECES, SHARED BY THE VISITORS' WEB AND A PERSON'S ACCOUNT (brief PV, 2026-10-17). 1125 px and under (the panel's phone breakpoint); nothing here is drawn above it.
 * His words, 2026-10-17, with five pictures (data/test-tools/design/pv-11 .. pv-14): "colocal el logo de nawtus arriba (Fuentes: departure mono para wrackets y Akira Expanded para la fuente). Hazlo igual.
 * Tambien haz el boton del menu igual", "Dentro de un hub en la web publica: el header igual que la home ... pero con el logo del hub en el que se esta", "User link account ... adoptamos totalmente la
 * estetica de la home publica, lo unico que cambia son los botones de abajo", "...el bottom se amplia para arriba y sale un campo de buscar (Utilizaremos este tipo de emergente para cualquier tipo de modal)".
 * MEASURED ON HIS PICTURES, AND THE SCALE THAT MATTERS: pictures 11, 13 and 14 are 1139 x 2000 px and 12 is 480 x 841 - the same screen, 480 x 842 CSS px (scale 2.373), not the 390 x 685 the first reading
 * took them for (the radar's 83 px, the title's 28 px and the 12 px sides all fit 480, none fit 390). Every number below is in CSS px at that 480-wide screen.
 * The visitors' web draws the frame (view/custom/mi-estilo.css + search/css/vk_phone_frame.css) around body.vkLanding; a person's account draws the same frame in view/css/vk_person_phone.css. */

@font-face{
    font-family: "Akira Expanded"; font-style: normal; font-weight: 800; font-display: swap;
    src: url("../fonts/akira-expanded-demo.woff2") format("woff2");
}

.vkMark{ display: none; }
.vkLines{ display: none; }

@media (max-width: 1125px){
    /* THE {NAWTUS} MARK: on the page's ground above the panel's dip at the top right (the dip's centre: 55 + 88 px from the right edge); #5E7A92 sampled on his picture; the braces Departure Mono, the word Akira Expanded.
       Text, not a picture; the word is one PHP value (core/vk/landing.php vk_app_mark_name()). */
    .vkMark{
        position: fixed; top: 21.5px; right: 79.4px; width: 120px; height: 20px; z-index: 1004; display: flex; align-items: center; justify-content: space-between;
        color: #5E7A92; pointer-events: none; user-select: none; -webkit-user-select: none; line-height: 1;
    }
    html body .vkMark{ gap: 1px; justify-content: center; }
    html body .vkMark .vkMark-br{ font-family: var(--vk-departure, "Departure Mono", ui-monospace, Consolas, monospace) !important; font-size: 21.5px; font-weight: 400; line-height: 20px; margin: 0 -1.6px; }
    html body .vkMark .vkMark-word{ font-family: "Akira Expanded", "Departure Mono", sans-serif !important; font-size: 14.7px; font-weight: 800; letter-spacing: .8px; line-height: 20px; }

    /* THE MENU KEY'S LINES: three, #24D29B, round ends, the third short (his: 23 px, 23 px, 15 px long, 2.5 px thick, 6.8 px apart) */
    /* the search key beside it: the lens in the accent's teal, #58A99C (sampled), a little thinner than the house icons; both keys sit where his picture puts them (the lens 8 px further left, the lines 7 px further right than the keys' own centres) */
    html[data-theme] body.vkLanding header.vkL-head button.vkL-findOpen, html[data-theme] body.vkLanding header.vkL-head button.vkL-findOpen:hover{ color: #58A99C; }
    html body.vkLanding header.vkL-head .vkL-findOpen .vkI{ stroke-width: 1.8px; transform: translateX(-8px); }
    /* A HUB'S PAGE: the circle is the header's (its picture changed by search/js/vk_demo.js headLogo()), so the page's own face is not drawn; the title starts where the start page's does */
    body.vkLanding .vkHead-top--brand > .vkHead-logo{ display: none; }
    html body.vkLanding .vkHead-top--brand{ padding-bottom: 10px; }                  /* his picture 12: the description 53 px under the title's line (it stood 71) */
    .vkLines{
        display: block; width: 26px; height: 18px; margin: 0 auto; transform: translateX(7px);
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M1.5 2H24.5M1.5 9H24.5M1.5 16H16.5' fill='none' stroke='%2324D29B' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px 18px no-repeat;
    }
}

/* ================================================================== THE SHEET (view/js/vk_sheet.js): the bar grows upward and what a window says comes out inside it.
   His words, 2026-10-17: "Mediante interpolacion ligera el bottom se amplia para arriba y sale un campo de buscar (Utilizaremos este tipo de emergente para cualquier tipo de modal ok?)", "El icono ejecutor se
   ilumina por abajo", "aplica este stilo de modal en la web publica. y tambien en el dropdown de notificaciones". One length drives it all: --vkP-up, 0 at rest, the sheet's height while one is open, on <html>,
   REGISTERED so that it transitions (about .28 s, ease-out, height only: the panel above is not pushed). The frame's foot pieces take it on top of their rest place: a person's (view/css/vk_person_phone.css)
   and the visitors' (below: the same pieces his view/custom/mi-estilo.css and search/css/vk_phone_frame.css place, written again with it). Measures from his picture 14 at its 480 px screen: the bar's top edge
   rose to 577 px (a rise of 200), the label «Searching in · place» 11 px under it in Departure Mono, #518876, the pill 61 px tall between 47 and 430, its glass #537074 to #2F4C52, «Search» centred in
   Departure Mono, a green arrow at its right; the key that opened it white with a soft green glow under it on the screen's foot. */
@property --vkP-up{ syntax: '<length>'; inherits: true; initial-value: 0px; }
.vkSheet{ display: none; }
.vkSheet-backdrop{ display: none; }
@media (max-width: 1125px){
    /* THE BACKDROP OF EVERY WINDOW (brief PW 7; view/js/vk_sheet.js #vkSheetBackdrop): the drawer's own dimming (rgba(22, 22, 26, .45)), over the panel and under the bar's glass (1001), the header and the mark -
       the bar, the radar and the keys stay whole and reachable. It comes and goes with the sheet, on its easing. */
    html:has(body.vkPhonePerson) .vkSheet-backdrop, html:has(body.vkLanding) .vkSheet-backdrop{
        display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(22, 22, 26, .45); opacity: 0; visibility: hidden; -webkit-tap-highlight-color: transparent;
        transition: opacity .28s cubic-bezier(.2, .7, .25, 1), visibility 0s linear .28s;
    }
    html.vkP-sheet:has(body.vkPhonePerson) .vkSheet-backdrop, html.vkP-sheet:has(body.vkLanding) .vkSheet-backdrop{ opacity: 1; visibility: visible; transition: opacity .28s cubic-bezier(.2, .7, .25, 1); }
    @media (prefers-reduced-motion: reduce){ html:has(body.vkPhonePerson) .vkSheet-backdrop, html:has(body.vkLanding) .vkSheet-backdrop{ transition: none; } }
    html{ --vkS-clear: 24px; --vkP-safe: env(safe-area-inset-bottom, 0px); --vkS-dock: calc(66px + env(safe-area-inset-bottom, 0px)); transition: --vkP-up .28s cubic-bezier(.2, .7, .25, 1); }
    html.vkP-sheet{ --vkP-up: var(--vkP-sheetH, 200px); }
    @media (prefers-reduced-motion: reduce){ html{ transition: none; } }

    html[data-sheet="search"] .vkSheet{
        display: block; position: fixed; left: 12px; right: 12px; bottom: var(--vkS-dock); height: var(--vkP-up); overflow: hidden; z-index: 1002; pointer-events: none;
    }
    html[data-sheet="search"] .vkSheet-in{ position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 79px; pointer-events: auto; }
    .vkSheet-label{
        margin: 0 0 13px; padding: 0 16px; text-align: center; font-family: var(--vk-departure, "Departure Mono", ui-monospace, Consolas, monospace) !important; font-size: 12.5px; line-height: 1.2; color: #518876;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .vkSheet-label span{ font: inherit !important; color: inherit; }
    .vkSheet-field{
        position: relative; display: block; height: 61px; margin: 0 35px; border-radius: 31px; overflow: hidden;
        background: linear-gradient(100deg, #5a787c 0%, #537074 22%, #3a5a5f 62%, #2F4C52 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .06);
    }
    .vkSheet-field::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, .13) 20%, rgba(255, 255, 255, 0) 34%); }
    html #vkSheet .vkSheet-field input{
        position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 74px 0 74px; margin: 0; border: 0 !important; border-radius: 0 !important; outline: 0; box-shadow: none !important; background: transparent !important;
        text-align: center; font-family: var(--vk-departure, "Departure Mono", ui-monospace, Consolas, monospace) !important; font-size: 21px; color: #f1f4f4 !important; -webkit-appearance: none; appearance: none;
    }
    html #vkSheet .vkSheet-field input::placeholder{ color: #c4cdce; opacity: 1; }
    html #vkSheet .vkSheet-field input::-webkit-search-cancel-button{ display: none; }
    html #vkSheet .vkSheet-field button{
        position: absolute; right: 18px; top: 0; width: 46px; height: 100%; margin: 0; padding: 0; border: 0; background: transparent !important; color: #24D29B; display: flex; align-items: center; justify-content: center; cursor: pointer;
        box-shadow: none !important; -webkit-tap-highlight-color: transparent;
    }
    html #vkSheet .vkSheet-field button:active{ opacity: .6; }

    /* THE RADAR'S LIST AS THE SHEET (a person's): the panel itself, dressed - it is not moved - between the bar's top edge and the keys */
    html[data-sheet="bell"] body.vkPhonePerson header .secondline .vkBellPanel,
    html[data-sheet="measure-bell"] body.vkPhonePerson header .secondline .vkBellPanel{
        position: fixed !important; left: 12px !important; right: 12px !important; bottom: calc(var(--vkS-dock) + var(--vkS-clear)) !important; top: auto !important; width: auto !important; max-width: none !important;
        max-height: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; z-index: 1; padding-top: 22px; padding-bottom: 26px;
        overflow-y: auto !important; overflow-x: hidden;
    }
    html[data-sheet="bell"] body.vkPhonePerson header .secondline .vkBellPanel{ height: calc(var(--vkP-up) - var(--vkS-clear)) !important; }
    html[data-sheet="measure-bell"] body.vkPhonePerson header .secondline .vkBellPanel{ height: auto !important; visibility: hidden; }

    /* A BOOTSTRAP WINDOW AS THE SHEET (the person's and the visitors'): the dialog stands between the bar's top edge and the keys, its content scrolling inside it, its own close key where it was; the page is not dimmed */
    html[data-sheet="measure"] .modal, html[data-sheet="modal"] .modal{ background: transparent !important; overflow: visible !important; pointer-events: none; padding: 0 !important; }
    html[data-sheet="measure"] .modal .modal-dialog, html[data-sheet="modal"] .modal .modal-dialog{
        position: fixed !important; left: 12px !important; right: 12px !important; bottom: calc(var(--vkS-dock) + var(--vkS-clear)) !important; top: auto !important; width: auto !important; max-width: none !important; margin: 0 !important;
        -webkit-transform: none !important; transform: none !important; transition: none !important; pointer-events: auto;
    }
    html[data-sheet="modal"] .modal .modal-dialog{ height: calc(var(--vkP-up) - var(--vkS-clear)); overflow-x: hidden; overflow-y: auto; padding-top: 22px; box-sizing: border-box; }
    html[data-sheet="measure"] .modal .modal-dialog{ visibility: hidden; padding-top: 22px; }
    html[data-sheet] .modal-backdrop{ display: none !important; }
    /* a Bootstrap window still leaving while the list or the search came (brief PW 8) is not shown, as a plain window, for the length of its fade */
    html[data-sheet="bell"] .modal.in, html[data-sheet="search"] .modal.in{ display: none !important; }
    html[data-sheet="measure"] .modal .modal-content, html[data-sheet="modal"] .modal .modal-content{ background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    html[data-sheet="modal"] .modal .modal-content .stylemodal, html[data-sheet="modal"] .modal .modal-body{ background: transparent !important; box-shadow: none; }
    html[data-sheet="modal"] .modal .vkAsk-card, html[data-sheet="measure"] .modal .vkAsk-card{ background: transparent !important; box-shadow: none !important; border-radius: 0 !important; width: 100%; }
    /* (2026-10-17, his picture of «Pedir acceso» on a phone) the labels are the fields' placeholders (view/js/vk_sheet.js placeholders()): their words put away, read by a screen reader still */
    html body .vkSheet-lbl{ position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
    /* ...the close key up in the sheet's top corner (his arrow) */
    html[data-sheet="modal"] .modal .modal-dialog .vkAsk-x, html[data-sheet="measure"] .modal .modal-dialog .vkAsk-x{ position: absolute !important; top: -18px !important; right: 6px !important; margin: 0 !important; z-index: 2; }
    /* ...and THE VISITORS' WEB'S WINDOWS IN THE PERSON'S COLOURS (his words: "Aplica los colores que utilizas en el usuario link account, pues en la home"): the house's keys take their colour from --vk-brand
       (view/css/vk_modalkeys.css, his mi-estilo.css): inside the visitors' windows on a phone it is the person's accent #25D79F (measured on a person's upload window, its «Pujar») instead of the app's blue */
    /* (2026-10-17, later the same day, his picture of «Put inside» / «Cancel» of a public window: "Color de los botones, aplicalo. modal") - not the green: the slate key of that picture, #465A72 (measured:
       the middle of its gradient 70,90,114, its foot 60,79,103 = 86 %), in the windows of the visitors' web AND of a person's phone; the other keys stay the house's dark key (his «Cancel») */
    html[data-sheet="modal"] body.vkLanding .modal .modal-dialog, html[data-sheet="measure"] body.vkLanding .modal .modal-dialog,
    html[data-sheet="modal"] body.vkPhonePerson .modal .modal-dialog, html[data-sheet="measure"] body.vkPhonePerson .modal .modal-dialog{ --vk-brand: #465A72; --vk-brand-ink: #ffffff; }

    /* the side bumps stand out of the panel's sides, which end above the raised bar: they fade while the sheet is open */
    html.vkP-sheet body.vkLanding #vkLHome::before, html.vkP-sheet body.vkLanding #vkLHome::after, html.vkP-sheet body.vkLanding #vkLView > .detailphoto::before, html.vkP-sheet body.vkLanding #vkLView > .detailphoto::after,
    html.vkP-sheet body.vkLanding #vkL::after, html.vkP-sheet body.vkLanding #vkLMain::after,
    html.vkP-sheet body.vkPhonePerson .vkPf-l::after, html.vkP-sheet body.vkPhonePerson .vkPf-r::after, html.vkP-sheet body.vkPhonePerson .vkPf-le::before, html.vkP-sheet body.vkPhonePerson .vkPf-re::before{ opacity: 0 !important; }

    /* A WINDOW OPENED FROM A FILE'S DETAIL (2026-10-21, his picture of «Download optimized» lying on the picture): the detail (#watch_item_modal, z-index 9999999) stood over the backdrop (1000) and the bar's
       glass (1001-1002), so the sheet's window - transparent by design, it sits on the raised bar - floated on the detail. While a sheet is open the detail goes under the backdrop: the bar rises over it, dimmed
       behind, as from any other page. It comes back on top when the sheet closes. */
    html.vkP-sheet body.vkLanding #watch_item_modal, html.vkP-sheet body.vkPhonePerson #watch_item_modal{ z-index: 999 !important; }

    /* THE GRAB HANDLE on the panel's foot edge while a sheet is open (his picture 14: a pill, 84 x 5, a dark teal #23393C, centred, 14 px above the panel's bottom edge): it rises with the edge (--vkP-up) and fades in and out */
    html:has(body.vkPhonePerson)::after, html:has(body.vkLanding)::after{
        content: ""; position: fixed; left: 50%; width: 84px; height: 6px; margin-left: -42px; border-radius: 3px; background: #23393C; pointer-events: none; z-index: 1002;
        bottom: calc(var(--vkS-dock) + var(--vkP-up) + 14px); opacity: 0; transition: opacity .2s ease;
    }
    html.vkP-sheet:has(body.vkPhonePerson)::after, html.vkP-sheet:has(body.vkLanding)::after{ opacity: 1; }

    /* THE KEY THAT OPENED IT IS LIT FROM BELOW (the visitors' lens: a person's keys are lit in view/css/vk_phonebar.css) */
    html body.vkLanding header.vkL-head button.vkL-findOpen.is-lit{ color: #ffffff; }
    html body.vkLanding header.vkL-head button.vkL-findOpen.is-lit::after{
        content: ""; position: absolute; left: 50%; bottom: -14px; width: 62px; height: 21px; margin-left: -31px; pointer-events: none;
        background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(214, 255, 238, .95) 0%, rgba(36, 210, 155, .8) 14%, rgba(36, 210, 155, .3) 48%, rgba(36, 210, 155, 0) 100%);
    }
}

/* THE VISITORS' FRAME RISES WITH THE SHEET: the foot's pieces of his view/custom/mi-estilo.css and search/css/vk_phone_frame.css, placed again with --vkP-up on top of their rest place (the glass and its mask, the
   two corners, the tab above the bar, the line along the panel's foot - its own anchor, .vkPf-f, since a background cannot rise out of its box -, the sides' end, the screen's foot pieces). Dark look: the public web is
   always dark. */
@media (max-width: 1125px){
    html[data-theme="dark"] body.vkLanding.vkLanding .sidebarblock{ background: none !important; }
    html[data-theme="dark"] body.vkLanding .vkPf-f::before, html[data-theme="dark"] body.vkLanding .vkPf-f::after{
        content: ""; position: fixed; bottom: calc(var(--vkS-dock) + var(--vkP-up) - 1px); height: 1px; width: calc(33.5% - 46px); z-index: 1002; pointer-events: none; background: var(--vkF-edge, rgba(215, 232, 255, .34));
    }
    html[data-theme="dark"] body.vkLanding .vkPf-f::before{ left: 28px; }
    html[data-theme="dark"] body.vkLanding .vkPf-f::after{ right: 28px; }
    html[data-theme="dark"] body.vkLanding.vkLanding .sidebarblock::before, html[data-theme="dark"] body.vkLanding.vkLanding .sidebarblock::after{ bottom: calc(3px + var(--vkP-up)); }
    html[data-theme="dark"] body.vkLanding.vkLanding div#topupl::after{ bottom: calc(60px + var(--vkP-up)); }
    html[data-theme="dark"] body.vkLanding.vkLanding::after{
        height: calc(82px + env(safe-area-inset-bottom, 0px) + var(--vkP-up));
        -webkit-mask:
            linear-gradient(#000, #000) 0 100% / 100% calc(var(--vkS-dock) + var(--vkP-up)) no-repeat,
            radial-gradient(circle at 100% 0, transparent 15.5px, #000 16px) left 0 bottom calc(3px + var(--vkP-up)) / 28px 79px no-repeat,
            radial-gradient(circle at 0 0, transparent 15.5px, #000 16px) right 0 bottom calc(3px + var(--vkP-up)) / 28px 79px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 V8 C7 8 9 0 18 0 H82 C91 0 93 8 100 8 V14 Z'/%3E%3C/svg%3E") left 50% bottom calc(60px + var(--vkP-up)) / calc(33% + 36px) 14px no-repeat;
        mask:
            linear-gradient(#000, #000) 0 100% / 100% calc(var(--vkS-dock) + var(--vkP-up)) no-repeat,
            radial-gradient(circle at 100% 0, transparent 15.5px, #000 16px) left 0 bottom calc(3px + var(--vkP-up)) / 28px 79px no-repeat,
            radial-gradient(circle at 0 0, transparent 15.5px, #000 16px) right 0 bottom calc(3px + var(--vkP-up)) / 28px 79px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 V8 C7 8 9 0 18 0 H82 C91 0 93 8 100 8 V14 Z'/%3E%3C/svg%3E") left 50% bottom calc(60px + var(--vkP-up)) / calc(33% + 36px) 14px no-repeat;
    }
    html[data-theme="dark"] body.vkLanding #vkL::before, html[data-theme="dark"] body.vkLanding #vkLMain::before{ height: calc(100vh - 144px - var(--vkP-up)) !important; height: calc(100svh - 144px - var(--vkP-up)) !important; }
    html[data-theme="dark"] body.vkLanding #loadmenuCats::before, html[data-theme="dark"] body.vkLanding #loadmenuCats::after{ bottom: calc(82px + var(--vkP-up)); }
}