/* Drive's own styles — everything app-specific, layered on the kit's tokens.
   The kit owns buttons, chips, inputs, menus and the shell; this file owns the
   grid, the tiles, the lightbox, the FAB and the upload panel. Anything generic
   enough for the next Lumen app belongs in the kit (mirrored in
   ~/dev/lumen_framework), not here. */

[x-cloak] { display: none !important; }

.drive-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-5) var(--space-8);
}

/* The right end of the top bar: the avatar, which is the account menu —
   Settings and Log out both live behind it. */
.drive-nav-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
/* The kit's menu panel opens left-aligned; against the bar's right edge it
   must hang the other way. */
.drive-nav-end .dropdown__menu { left: auto; right: 0; }

/* Inline icon glyphs (Lucide) — sized to sit in a line of text or a button. */
.drive-ico { display: inline-flex; width: 1em; flex: none; }
.drive-ico svg { width: 100%; height: auto; }

.drive-title { font-size: var(--text-xl); margin-bottom: var(--space-5); }

/* == Settings rows ======================================================== */

.setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}
.setting__label { min-width: 0; }
.setting__hint { color: var(--text-muted); font-size: var(--text-sm); }

/* Volume fullness bar on the settings page. */
.drive-meter {
    flex: 0 0 10rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--field);
    overflow: hidden;
}
.drive-meter__fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); }

/* == Landing ============================================================== */

.landing {
    display: grid;
    place-items: center;
    min-height: 70vh;
    padding: var(--space-5);
}
.landing__card {
    width: min(26rem, 100%);
    display: grid;
    gap: var(--space-4);
    background: var(--surface);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-1);
    padding: var(--space-7);
    /* --field is contextual (see kit/tokens.css): on the page it's white, and a
       card must re-tint it or its inputs vanish white-on-white. Same rule the
       kit's own .card carries. */
    --field: var(--bg);
}
[data-theme="dark"] .landing__card { --field: var(--surface-2); }
/* …and re-tinted fields recess, same as the kit's .card/.topbar rule. */
.landing__card .input { box-shadow: var(--field-inset); }

/* Google's mark keeps its brand colours, so it sits on a white chip — correct
   at every accent instead of at one. (From Screenlog.) */
.btn__gmark {
    display: grid; place-items: center; flex: none;
    width: 1.3rem; height: 1.3rem;
    background: #fff; border-radius: var(--radius-full);
}
.btn__gmark svg { display: block; width: 0.85rem; height: 0.85rem; }

/* The brand glyph is an svg, not a character — give it a box that matches the
   type size the kit set for the logo slot. */
.topbar__logo { display: inline-flex; }
.topbar__logo svg { width: 1.1em; height: auto; }
.landing__title { font-size: var(--text-2xl); }
.landing__blurb { color: var(--text-muted); }
.landing__email summary { cursor: pointer; color: var(--text-muted); font-size: var(--text-sm); }
.landing__form { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.landing__actions { display: flex; gap: var(--space-2); }

/* == Toolbar ============================================================== */

/* The search lives in the topbar's middle slot: it takes the slack between
   brand and account cluster, capped so it reads as a field, not a void.
   Filters ride inside the query itself (type:video, sort:name) — no chip row. */
.topbar .drive-search { flex: 1 1 auto; min-width: 0; max-width: 26rem; margin-left: auto; position: relative; }
.drive-search__input { width: 100%; }
/* The centered "placeholder": a magnifier + "Find" overlay, gone the moment
   the field is focused or holds a query (the real placeholder is one space,
   so :placeholder-shown means empty). */
.drive-search__hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--text-muted);
    pointer-events: none;
}
.drive-search__input:focus + .drive-search__hint,
.drive-search__input:not(:placeholder-shown) + .drive-search__hint { display: none; }

/* The syntax suggestions under the field — the kit's floating surface, shown
   while the field has focus (see search_form). */
.drive-search__sug {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    z-index: 40;
    display: grid;
    background: var(--surface);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-3);
    padding: var(--space-1);
}
.drive-search__sug-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    border-radius: var(--radius-1);
    cursor: pointer;
    transition: var(--transition);
}
.drive-search__sug-item:hover { background: var(--hover-tint); }
.drive-search__sug-item.is-active { background: var(--accent-soft); color: var(--accent-text); }
.drive-search__sug-item .drive-ico { width: 1rem; }

/* == Drive page =========================================================== */

/* File-manager chrome, not prose: clicks and drags on the grid must never
   start a text selection (clicking near a tile was highlighting its size
   label). The dialog (teleported to <body>) and the topbar search live
   outside this wrapper, so actual text entry keeps native selection. */
.drive { user-select: none; }

/* == Breadcrumb =========================================================== */

.drive-crumbs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
}
.drive-crumbs a { color: var(--text-muted); text-decoration: none; }
.drive-crumbs a:hover { color: var(--accent); }
.drive-crumbs__here { color: var(--text); font-weight: var(--weight-medium); }
.drive-crumbs__sep { color: var(--text-muted); }
.drive-crumbs__ico { display: inline-flex; color: var(--text-muted); margin-right: var(--space-1); }
.drive-crumbs__ico svg { width: 1rem; height: 1rem; }

/* == Folder tiles ========================================================= */

.drive-folders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.drive-folder {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    transition: var(--transition);
}
.drive-folder:hover { background: var(--hover-tint); }
.drive-folder__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    padding: var(--space-3);
    text-decoration: none;
    color: var(--text);
}
.drive-folder__icon { display: inline-flex; width: 1.4rem; color: var(--accent); flex: none; }
.drive-folder__icon svg { width: 100%; }
.drive-folder__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drive-folder__count { color: var(--text-muted); font-size: var(--text-xs); flex: none; }
.drive-folder__menu { padding-right: var(--space-1); opacity: 0; transition: var(--transition); }
.drive-folder:hover .drive-folder__menu,
.drive-folder__menu:focus-within { opacity: 1; }

/* == File tiles =========================================================== */

.drive-files {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--space-2);
}
.drive-file {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    transition: var(--transition);
    /* The whole card is clickable and draggable, meta strip included — not
       just the thumb button. */
    cursor: pointer;
}
.drive-file.is-selected { outline: 2px solid var(--accent); }

/* The rubber-band rectangle drive.js drags over empty grid space. Positioned
   in page coordinates on <body>; z-index above tiles, below the action bar. */
.drive-marquee {
    position: absolute;
    z-index: 20;
    border: 1px solid var(--accent);
    background: var(--accent-soft);
    pointer-events: none;
}

/* The ghost riding the cursor while file tiles are dragged toward a folder:
   up to three mini thumbs fanned out, and a count chip past one. */
.drive-drag {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    display: flex;
    align-items: center;
    padding: var(--space-2);
    background: var(--surface);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-3);
    animation: drive-drag-in 0.16s ease;
}
@keyframes drive-drag-in {
    from { transform: scale(0.5); opacity: 0; }
}
.drive-drag__thumb {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: cover;
    border-radius: var(--radius-1);
    box-shadow: 0 0 0 2px var(--surface);
}
.drive-drag__thumb + .drive-drag__thumb { margin-left: -1.1rem; }
.drive-drag__thumb--icon {
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--text-muted);
}
.drive-drag__thumb--icon svg { width: 1.1rem; height: 1.1rem; }
.drive-drag__count {
    margin-left: var(--space-2);
    min-width: 1.4rem;
    padding: 0 0.4em;
    text-align: center;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

/* The folder tile currently under the dragged files. */
.drive-folder.is-dropover {
    outline: 2px solid var(--accent);
    background: var(--accent-soft);
}

/* While a tile drag is in flight the hand closes, everywhere — the ghost is
   the cursor's cargo, whatever it happens to pass over. */
body.is-tile-dragging,
body.is-tile-dragging * { cursor: grabbing; }
.drive-file__body {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 0;
    padding: 0;
    background: var(--surface-2);
    cursor: pointer;
    position: relative;
}
.drive-file__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.drive-file__icon { display: grid; place-items: center; height: 100%; color: var(--text-muted); }
.drive-file__icon svg { width: 2.5rem; }
.drive-file__badge {
    position: absolute;
    right: var(--space-1);
    bottom: var(--space-1);
    background: rgb(0 0 0 / 0.65);
    color: #fff;
    font-size: var(--text-xs);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-1);
}
/* The tick floats over the thumbnail, whose colours are the file's, not the
   theme's — so like the duration badge it uses a fixed dark scrim with white
   ink, legible on a white scan and a black poster alike. Selection swaps in
   the accent. */
.drive-file__tick {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    border: 0;
    background: rgb(0 0 0 / 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: var(--transition);
}
.drive-file__tick svg { width: 0.9rem; height: 0.9rem; }
.drive-file:hover .drive-file__tick,
.drive-file.is-selected .drive-file__tick { opacity: 1; }
.drive-file.is-selected .drive-file__tick { background: var(--accent); color: var(--on-accent); }
.drive-file__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}
.drive-file__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
}
.drive-file__size { color: var(--text-muted); font-size: var(--text-xs); flex: none; }

/* Centred against the viewport, not the content flow: the chrome above the
   grid (topbar, padding, breadcrumb) is ~8rem tall, so pulling twice that off
   100dvh puts the block's centre on the screen's centre. */
.drive-empty {
    min-height: calc(100dvh - 16rem);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-4);
    text-align: center;
    color: var(--text-muted);
}
.drive-empty__icon svg { width: 6rem; height: 6rem; opacity: 0.25; }

/* == Selection action bar ================================================= */

.drive-actions {
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-3);
    padding: var(--space-2) var(--space-4);
    z-index: 30;
}
.drive-actions__count { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.drive-actions__move { position: relative; }
.drive-actions__folders {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    left: 0;
    min-width: 12rem;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-3);
    padding: var(--space-1);
    display: grid;
}
.drive-actions__dest {
    text-align: left;
    border: 0;
    background: none;
    color: var(--text);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-1);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drive-actions__dest:hover { background: var(--hover-tint); }

.drive-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    position: fixed;
    left: var(--space-5);
    bottom: var(--space-4);
    /* Stop short of the FAB's corner (3.5rem disc at --space-5): on narrow
       screens the line wraps instead of running under the button. */
    right: calc(2 * var(--space-5) + 3.5rem);
    width: fit-content;
    z-index: 20;
    color: var(--text-muted);
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-1);
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}
.drive-footer__item { display: inline-flex; align-items: center; gap: var(--space-1); }

/* == Lightbox ============================================================= */

.drive-box {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(0 0 0 / 0.85);
    display: grid;
    place-items: center;
}
.drive-box__body { width: 100%; height: 100%; display: grid; place-items: center; }
.drive-box__frame {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    max-width: 94vw;
    max-height: 94vh;
}
.drive-box__media {
    max-width: 94vw;
    max-height: 82vh;
    border-radius: var(--radius-2);
    object-fit: contain;
}
/* The control bar under media: a translucent pill, white ink throughout. The
   theme's button colours are for theme surfaces — on the scrim they vanish, so
   the bar restyles .btn locally. */
.drive-box__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: #fff;
    font-size: var(--text-sm);
    max-width: 94vw;
    background: rgb(255 255 255 / 0.09);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
}
.drive-box__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-box__info { color: rgb(255 255 255 / 0.6); white-space: nowrap; flex: none; }
.drive-box__bar .btn {
    color: #fff;
    background: rgb(255 255 255 / 0.14);
    flex: none;
}
.drive-box__bar .btn:hover { background: rgb(255 255 255 / 0.26); }

/* Close: one X, fixed in the corner of the overlay, same chip as the arrows. */
.drive-box__close {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    border: 0;
    background: rgb(255 255 255 / 0.12);
    color: #fff;
    cursor: pointer;
    transition: var(--transition);
    z-index: 1;
}
.drive-box__close:hover { background: rgb(255 255 255 / 0.25); }
.drive-box__close svg { width: 1.2rem; }

/* A file with no preview gets a real card — theme surface, theme buttons —
   instead of controls floating on the scrim. */
.drive-box__card {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-3);
    padding: var(--space-8) var(--space-7) var(--space-6);
    width: min(24rem, 90vw);
}
.drive-box__card-icon { color: var(--text-muted); }
.drive-box__card-icon svg { width: 3.5rem; }
.drive-box__card-name {
    font-weight: var(--weight-medium);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drive-box__card-size { color: var(--text-muted); font-size: var(--text-sm); }
.drive-box__card-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.drive-box__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    border: 0;
    background: rgb(255 255 255 / 0.12);
    color: #fff;
    font-size: var(--text-xl);
    cursor: pointer;
    transition: var(--transition);
}
.drive-box__nav:hover { background: rgb(255 255 255 / 0.25); }
.drive-box__nav--prev { left: calc(-1 * var(--space-7)); }
.drive-box__nav--next { right: calc(-1 * var(--space-7)); }

/* == Drop overlay ========================================================= */
/* Shown while an OS file drag is over the window (body.is-dropping, set by
   drive.js). Never a pointer target — the drop handlers live on window. */
.drive-drop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    place-items: center;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    pointer-events: none;
}
body.is-dropping .drive-drop { display: grid; }
.drive-drop__card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-7);
    background: var(--surface);
    border: 2px dashed var(--accent);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-3);
    font-weight: var(--weight-medium);
}
.drive-drop__card svg { width: 1.5rem; height: 1.5rem; color: var(--accent-text); }

/* == FAB ================================================================== */
/* The corner "+": accent disc, rotating to × while the speed dial is open.
   The dial items are label-tag + mini-disc pairs stacked above it; they reuse
   the modal's pop transition for the reveal. */
.drive-fab {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
}
.drive-fab__btn {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-3);
    cursor: pointer;
    transition: var(--transition);
}
.drive-fab__btn:hover { background: var(--accent-hover); }
.drive-fab__btn svg { width: 1.5rem; height: 1.5rem; transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1.25); }
.drive-fab__btn.is-open svg { transform: rotate(45deg); }
.drive-fab__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
}
.drive-fab__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--text);
    cursor: pointer;
}
.drive-fab__tag {
    background: var(--surface);
    padding: 0.2rem var(--space-2);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-1);
    font-size: var(--text-sm);
}
.drive-fab__mini {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-2);
    transition: var(--transition);
}
.drive-fab__item:hover .drive-fab__mini { background: var(--hover-tint); }
.drive-fab__mini svg { width: 1.1rem; height: 1.1rem; }

/* == Dialog =============================================================== */
/* The page's one modal (views::dialog) on the kit's modal_shell chrome; the
   kit owns backdrop/panel/animation, these are just the layout details it
   leaves to the app. The panel is a .stack, so children only zero their own
   margins. */
.drive-dialog__title { margin: 0; }
.drive-dialog__msg { margin: 0; color: var(--text-muted); }
.drive-dialog__actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-2);
}

/* == Upload panel ========================================================= */

.drive-uploads {
    position: fixed;
    right: var(--space-4);
    /* Above the FAB, which owns the corner itself. */
    bottom: calc(var(--space-5) + 4.5rem);
    z-index: 50;
    display: grid;
    gap: var(--space-1);
    width: min(20rem, calc(100vw - 2 * var(--space-4)));
    background: var(--surface);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-3);
    padding: var(--space-3);
}
.drive-uploads__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
}
.drive-uploads__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-uploads__row progress { width: 5rem; accent-color: var(--accent); }
.drive-uploads__row.is-done progress { accent-color: var(--success); }
.drive-uploads__row.is-failed { color: var(--danger); }

@media (max-width: 640px) {
    .drive-box__nav--prev { left: var(--space-1); }
    .drive-box__nav--next { right: var(--space-1); }
    /* Two folder tiles to a phone row — the 13rem desktop minimum forces one.
       The item count yields; at this width the name is the tile. */
    .drive-folders { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
    .drive-folder__count { display: none; }
}