/* ---- Drive (pages/drive.js) ----
   The phone draws the same: components/pages/DrivePage.tsx and components/drive/*.
   Everything here is the theme's variables, so light and dark come for free;
   a kind's colour arrives as --k on the element. */

.screen-scroll > .inner.drv-page {
  max-width: 980px; margin: 0 auto; display: flex; flex-direction: column;
  /* Under the floating rail at the top, above the composer at the foot. */
  padding: calc(52px + env(safe-area-inset-top)) 0 calc(var(--bar-clear, 0px) + 100px);
}
.drv-page svg { stroke: currentColor; fill: none; stroke-width: 34; }
.drv-page .grow, .drv-selbar .grow { flex: 1; }

/* the head: title, search, chips */
.drv-top { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.drv-titlerow { display: flex; align-items: center; gap: 10px; }
.drv-title { margin: 0; flex: 1; font-size: 28px; font-weight: 800; letter-spacing: -0.6px; color: var(--ink); font-family: var(--font-display, inherit); }
.drv-newbtn { display: none; align-items: center; gap: 6px; border-radius: 14px; padding: 9px 16px; font-weight: 700; }
.drv-newbtn svg { width: 18px; height: 18px; stroke-width: 44; }
.drv-search {
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 14px;
  border-radius: 23px; border: 1px solid var(--border); background: var(--surface);
}
.drv-search:focus-within { border-color: var(--accent); }
.drv-search-ico { display: flex; color: var(--ink-muted); }
.drv-search-ico svg { width: 18px; height: 18px; }
.drv-search-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 15.5px; color: var(--ink); padding: 8px 0; }
.drv-icon-btn {
  width: 40px; height: 40px; flex: none; border: none; background: none; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; color: var(--ink-muted); cursor: pointer;
}
.drv-icon-btn:hover { background: var(--tint, var(--accent-soft)); }
.drv-icon-btn svg { width: 20px; height: 20px; stroke-width: 40; }
.drv-icon-btn.sm { width: 32px; height: 32px; margin-left: -6px; }
.drv-icon-btn.accent { color: var(--accent); }
.drv-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 4px; margin: 0 -16px; }
.drv-chips::-webkit-scrollbar { display: none; }
.drv-chip {
  flex: none; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer;
}
.drv-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, var(--bg)); }

/* picking several */
.drv-selbar { display: flex; align-items: center; gap: 4px; padding: 0 8px; min-height: 56px; flex-wrap: wrap; }
.drv-selcount { font-size: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.drv-selbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.drv-selbtn svg { width: 17px; height: 17px; stroke-width: 36; }
.drv-selbtn.danger { color: var(--danger); }
.drv-selbtn:disabled { opacity: 0.4; cursor: default; }
.drv-selall { border: none; background: none; color: var(--accent); font-weight: 700; font-size: 14.5px; padding: 0 8px; height: 38px; cursor: pointer; }

/* where you are in Files */
.drv-crumbs { display: flex; align-items: center; gap: 2px; padding: 8px 8px 0; min-height: 44px; }
.drv-crumb-list { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-left: 6px; }
.drv-crumb-list::-webkit-scrollbar { display: none; }
.drv-crumb {
  flex: none; border: none; background: none; padding: 6px 6px; border-radius: 8px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--ink-muted); max-width: 40vw; white-space: normal; overflow-wrap: break-word;
}
.drv-crumb.here { color: var(--ink); font-size: 19px; font-weight: 700; }
.drv-crumb:hover { background: var(--tint, var(--accent-soft)); }
.drv-crumb.drop-on { background: var(--accent-soft); outline: 2px solid var(--accent); }
.drv-crumb-sep { color: var(--ink-muted); flex: none; }

.drv-sortrow { display: flex; align-items: center; gap: 6px; padding: 4px 12px 2px 16px; }
.drv-sort {
  appearance: none; -webkit-appearance: none; border: none; background: none; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; padding: 6px 4px; cursor: pointer;
}
.drv-dir { width: 36px; height: 36px; border-radius: 18px; border: none; background: var(--tint, var(--accent-soft)); color: var(--accent); display: grid; place-items: center; cursor: pointer; }
.drv-dir svg { width: 15px; height: 15px; stroke-width: 44; }

.drv-trashnote {
  display: flex; align-items: center; gap: 10px; margin: 6px 16px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--ink-muted);
}
.drv-trashnote > span { flex: 1; min-width: 0; }
.drv-link { border: none; background: none; font-weight: 700; font-size: 14px; color: var(--accent); cursor: pointer; white-space: nowrap; padding: 4px 6px; min-height: 40px; }
.drv-link.danger { color: var(--danger); }

.drv-h2 { font-size: 15px; font-weight: 700; color: var(--ink); padding: 14px 16px 8px; }

/* Home's cards */
.drv-cards { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; }
.drv-cards::-webkit-scrollbar { display: none; }
.drv-card {
  flex: none; width: 150px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
  overflow: hidden; padding: 0; text-align: left; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column;
}
.drv-card:hover { border-color: var(--accent); }
.drv-card-words { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; min-width: 0; }
.drv-card-name { font-size: 13.5px; font-weight: 600; white-space: normal; overflow-wrap: break-word; }
.drv-card-sub { font-size: 11.5px; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }

/* a file's picture, or its kind's icon on its colour */
.drv-thumb, .drv-card-art, .drv-tile-art {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none;
  color: var(--k, var(--ink-muted)); background: color-mix(in srgb, var(--k, var(--ink-muted)) 13%, transparent);
}
.drv-thumb { width: 42px; height: 42px; border-radius: 10px; }
.drv-thumb svg { width: 21px; height: 21px; stroke-width: 36; }
.drv-thumb.sm { width: 38px; height: 38px; }
.drv-thumb.xl { width: 120px; height: 120px; border-radius: 16px; }
.drv-thumb.xl svg { width: 56px; height: 56px; }
.drv-thumb.folder { color: var(--accent); background: var(--tint, var(--accent-soft)); }
.drv-thumb.folder svg { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.drv-card-art { width: 100%; height: 96px; }
.drv-card-art svg { width: 40px; height: 40px; stroke-width: 30; }
.drv-tile-art { width: 100%; aspect-ratio: 4 / 3; }
.drv-tile-art svg { width: 44px; height: 44px; stroke-width: 30; }
.drv-thumb img, .drv-card-art img, .drv-tile-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A page is read from the top: a PDF's thumbnail shows its head, not its middle. */
[data-kind="pdf"] img { object-position: top; }
.pic > svg:first-child { visibility: hidden; }
.drv-play { position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 9px; background: rgba(0, 0, 0, 0.55); display: grid; place-items: center; }
.drv-play svg { width: 9px; height: 9px; fill: #fff; stroke: none; }
.drv-card-art .drv-play, .drv-tile-art .drv-play { width: 28px; height: 28px; border-radius: 14px; right: 8px; bottom: 8px; }
.drv-card-art .drv-play svg, .drv-tile-art .drv-play svg { width: 12px; height: 12px; }

/* the list */
.drv-list { display: flex; flex-direction: column; padding: 4px 0; }
.drv-listhead { display: none; }
.drv-row {
  display: grid; grid-template-columns: auto 42px minmax(0, 1fr) 40px; align-items: center; column-gap: 12px;
  padding: 8px 8px 8px 16px; min-height: 60px; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; outline: none;
}
.drv-row:hover { background: var(--tint, var(--accent-soft)); }
.drv-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.drv-row.on { background: var(--tint, var(--accent-soft)); }
.drv-row.drop-on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.drv-words { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.drv-name { font-size: 15.5px; font-weight: 600; color: var(--ink); white-space: normal; overflow-wrap: break-word; }
.drv-sub { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--ink-muted); }
.drv-subtext { white-space: normal; overflow-wrap: break-word; }
.drv-badge { display: flex; flex: none; }
.drv-badge svg { width: 12px; height: 12px; stroke-width: 40; }
.drv-badge.star svg { fill: currentColor; }
.drv-col { display: none; font-size: 13px; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.drv-more {
  width: 40px; height: 40px; border: none; background: none; border-radius: 20px; color: var(--ink-muted);
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.drv-more:hover { background: var(--surface); color: var(--ink); }
.drv-more svg { width: 20px; height: 20px; stroke-width: 44; }
.drv-check {
  display: none; width: 22px; height: 22px; border-radius: 11px; border: 2px solid var(--ink-faint);
  align-items: center; justify-content: center; color: transparent; flex: none;
}
.drv-check svg { width: 14px; height: 14px; stroke-width: 56; }
.drv-page.selecting .drv-check { display: flex; }
.drv-row.on .drv-check, .drv-tile.on .drv-check { border-color: var(--accent); background: var(--accent); color: var(--on-accent, var(--bg)); }
.drv-page:not(.selecting) .drv-row { grid-template-columns: 42px minmax(0, 1fr) 40px; }
.drv-page.selecting .drv-tile .drv-more { display: none; }

/* the foot bar while picking, phone-wide (the phone's selection bar) */
.drv-selfoot {
  position: absolute; left: 12px; right: 12px; bottom: calc(var(--bar-clear, 0px) + 12px); z-index: 12;
  border-radius: 20px; border: 1px solid var(--border); background: var(--surface-solid, var(--surface));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); padding: 6px;
}
.drv-selfoot .drv-selactions { display: flex; justify-content: space-around; }
.drv-footbtn {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; padding: 6px 4px; border: none; background: none;
  border-radius: 12px; color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer;
}
.drv-footbtn svg { width: 21px; height: 21px; stroke-width: 36; }
/* Four actions (Move, Star, Download, Trash) share the bar in one row at any width: equal shares, never a second row
   (at 320 wide Trash wrapped alone and the bar grew over the list's last file), the words a size down on a narrow phone. */
.drv-selfoot .drv-selactions { flex-wrap: nowrap; }
.drv-selfoot .drv-footbtn { flex: 1 1 0; min-width: 0; padding-left: 1px; padding-right: 1px; }
.drv-footbtn span { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
@media (max-width: 359.98px) { .drv-footbtn { font-size: 11px; } }
.drv-footbtn.danger { color: var(--danger); }
.drv-footbtn:disabled { opacity: 0.35; }
.drv-selactions { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* the grid */
.drv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 6px 16px; }
.drv-grid.folders .drv-tile-foot { min-height: 52px; }
.drv-tile {
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; outline: none;
}
.drv-tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.drv-tile:focus-visible, .drv-tile.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.drv-tile.drop-on { border-color: var(--accent); background: var(--accent-soft); }
.drv-tile-foot { display: flex; align-items: center; gap: 7px; padding: 6px 4px 6px 10px; min-height: 48px; }
.drv-tile-kind { display: flex; flex: none; }
.drv-tile-kind svg { width: 16px; height: 16px; stroke-width: 38; }
.drv-tile-kind.folder { color: var(--accent); }
.drv-tile-kind.folder svg { width: 19px; height: 19px; fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.drv-tile-name {
  flex: 1; min-width: 0; font-size: 13.5px; line-height: 17px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere;
  display: block;
}
/* A narrow phone: the kind icon goes from the tile's foot (the picture above
   already says what it is) and the ⋯ tightens, so a name breaks between words
   ("Budget / 2026.csv"), never inside one ("Budge / t"). */
@media (max-width: 360px) {
  .drv-tile-foot { gap: 4px; padding-left: 8px; }
  .drv-tile-foot .drv-tile-kind:not(.folder) { display: none; }
  .drv-tile-name { overflow-wrap: break-word; word-break: normal; font-size: 13px; }
  /* a folder keeps its icon and takes the whole row instead */
  .drv-tile:has(.drv-tile-kind.folder) { grid-column: 1 / -1; }
}
.drv-tile-sub { font-size: 12px; color: var(--ink-muted); padding: 0 10px 10px; margin-top: -8px; }
.drv-tile .drv-check { margin-right: 8px; }

.drv-footer { text-align: center; font-size: 13px; color: var(--ink-muted); padding: 14px 0; }
.drv-wait { display: flex; justify-content: center; padding: 50px 0; }
.drv-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 50px 32px 0; gap: 4px; }
.drv-empty-ico { width: 72px; height: 72px; border-radius: 36px; background: var(--tint, var(--accent-soft)); color: var(--accent); display: grid; place-items: center; margin-bottom: 10px; }
.drv-empty-ico svg { width: 34px; height: 34px; stroke-width: 32; }
.drv-empty-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.drv-empty-line { font-size: 14px; color: var(--ink-muted); }
.drv-empty .drv-meter { align-self: stretch; margin-top: 22px; }
/* A short phone: the empty words sit higher, and the line under the title keeps clear of the + in the corner (UI review, 19 Oct 2026). */
@media (max-height: 700px) { .drv-empty { padding-top: 16px; } .drv-empty-line { max-width: calc(100% - 96px); } }

/* storage */
.drv-meter {
  display: flex; flex-direction: column; gap: 8px; margin: 18px 16px 0; padding: 14px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface); font: inherit; text-align: left; cursor: pointer; color: var(--ink);
}
/* A <button> lays its children out with align-items: flex-start in Chrome's own
   sheet, which squeezed the track to nothing: every part of the meter is full width. */
.drv-meter > * { align-self: stretch; width: 100%; box-sizing: border-box; }
.drv-meter-head { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); }
.drv-meter-head svg { width: 18px; height: 18px; }
.drv-meter-title { flex: 1; font-size: 15px; font-weight: 700; color: var(--ink); }
.drv-meter-cost { font-size: 13.5px; font-weight: 600; }
.drv-meter-track { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.drv-meter-fill { display: block; height: 6px; border-radius: 3px; background: var(--accent); }
.drv-meter-line { font-size: 12.5px; color: var(--ink-muted); }

/* what floats over the page: +, an upload, the snack — measured from the page's
   own foot, which is the top of the bar already (.screen ends there), so no
   --bar-clear: counting the bar twice put the + over the tabs at 320x568 */
.drv-floats svg { stroke: currentColor; fill: none; stroke-width: 34; }
.drv-fab {
  position: absolute; right: 18px; bottom: 16px; z-index: 12;
  width: 58px; height: 58px; border-radius: 20px; border: none; background: var(--accent); color: var(--on-accent, var(--bg));
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.drv-fab svg { width: 30px; height: 30px; stroke-width: 44; }
.drv-upload {
  position: absolute; left: 16px; right: 92px; bottom: 20px; z-index: 12;
  display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface-solid, var(--surface)); color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.drv-upload svg { width: 20px; height: 20px; flex: none; }
.drv-upload-words { flex: 1; min-width: 0; }
.drv-upload-text { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: normal; overflow-wrap: break-word; }
.drv-upload-track { height: 4px; border-radius: 2px; background: var(--border); margin-top: 6px; overflow: hidden; }
.drv-upload-fill { height: 4px; border-radius: 2px; background: var(--accent); transition: width 0.2s; }
.drv-snack {
  position: absolute; left: 16px; right: 16px; bottom: 88px; z-index: 13;
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px;
  background: var(--ink); color: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); font-size: 14px;
}
.drv-snack.in-viewer { background: #F2F2F2; color: #111; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 5; }
.drv-snack-text { flex: 1; min-width: 0; }
.drv-snack-act { border: none; background: none; color: var(--accent2, var(--accent)); font-weight: 800; font-size: 14.5px; cursor: pointer; padding: 2px 4px; }
.drv-snack.in-viewer .drv-snack-act { color: #2F6FEB; }
.drv-drop { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.drv-drop-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 36px; border-radius: 20px; background: var(--surface-solid, var(--surface)); color: var(--ink); font-weight: 700; border: 2px dashed var(--accent); }
.drv-drop-card svg { width: 34px; height: 34px; stroke: var(--accent); fill: none; stroke-width: 36; }

/* sheets (panel()) and the popover menu */
.drv-sheet { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 18px; }
.drv-sheet svg { stroke: currentColor; fill: none; stroke-width: 34; }
.drv-sheet-title { font-size: 19px; font-weight: 800; color: var(--ink); }
.drv-sheet-line { font-size: 13.5px; color: var(--ink-muted); line-height: 1.4; }
.drv-sheet-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.btn.danger-fill { background: var(--danger); color: #fff; border-color: var(--danger); }
.drv-name-input {
  width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border-radius: 12px; margin-top: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 16px; outline: none;
}
.drv-name-input:focus { border-color: var(--accent); }
.drv-menu-head { display: flex; align-items: center; gap: 12px; padding: 6px 4px 8px; }
.drv-menu-words { display: flex; flex-direction: column; min-width: 0; }
.drv-menu-name { font-size: 15.5px; font-weight: 700; color: var(--ink); white-space: normal; overflow-wrap: break-word; }
.drv-menu-sub { font-size: 12.5px; color: var(--ink-muted); }
.drv-menu-row {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 48px; padding: 0 8px; border: none; border-radius: 12px;
  background: none; color: var(--ink); font: inherit; font-size: 15.5px; text-align: left; cursor: pointer;
}
.drv-menu-row:hover, .drv-menu-row:focus-visible { background: var(--tint, var(--accent-soft)); outline: none; }
.drv-menu-row svg { width: 20px; height: 20px; flex: none; stroke-width: 36; }
.drv-menu-row.danger { color: var(--danger); }
.drv-pop {
  position: fixed; z-index: 1200; min-width: 230px; max-width: 300px; padding: 6px; border-radius: 16px;
  background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}
.drv-pop svg { stroke: currentColor; fill: none; stroke-width: 34; }
.drv-pop .drv-menu-row { min-height: 40px; font-size: 14.5px; }
.drv-pop .drv-menu-head { border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.drv-new-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.drv-new-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.drv-new-btn:hover { border-color: var(--accent); }
.drv-new-ico { width: 46px; height: 46px; border-radius: 23px; background: var(--tint, var(--accent-soft)); color: var(--accent); display: grid; place-items: center; }
.drv-new-ico svg { width: 24px; height: 24px; }
.drv-info-art { display: flex; justify-content: center; padding: 16px 0; border-radius: 16px; background: var(--surface); margin-bottom: 8px; }
.drv-info-name { font-size: 18px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; margin-bottom: 6px; }
.drv-info-row { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 14px; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; font-family: inherit; width: 100%; }
.drv-info-row .k { width: 110px; flex: none; color: var(--ink-muted); }
.drv-info-row .v { flex: 1; min-width: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.drv-info-row.link { cursor: pointer; }
.drv-info-row.link .v { color: var(--accent); }
.drv-cost { margin-top: 8px; }
.drv-cost-row { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--border); font-size: 15px; color: var(--ink); }
.drv-cost-row b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-muted); }

/* the move picker */
.drv-mp-back { position: absolute; inset: 0; z-index: 38; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; }
.drv-mp {
  position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  padding-top: env(safe-area-inset-top);
}
.drv-mp svg { stroke: currentColor; fill: none; stroke-width: 34; }
.drv-mp-top { display: flex; align-items: center; gap: 6px; padding: 6px 8px; min-height: 52px; }
.drv-mp-title { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; white-space: normal; overflow-wrap: break-word; }
.drv-mp-crumb { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 48px; border-bottom: 1px solid var(--border); }
.drv-mp-ico { display: flex; color: var(--accent); }
.drv-mp-ico svg { width: 18px; height: 18px; fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.drv-mp-name { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; white-space: normal; overflow-wrap: break-word; }
.drv-mp-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.drv-mp-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 0 16px; border: none; background: none;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.drv-mp-row:hover { background: var(--tint, var(--accent-soft)); }
.drv-mp-row:disabled { opacity: 0.4; cursor: default; }
.drv-mp-row > svg { width: 18px; height: 18px; color: var(--ink-faint); flex: none; }
.drv-mp-row-name { flex: 1; min-width: 0; font-size: 15.5px; white-space: normal; overflow-wrap: break-word; }
.drv-mp-empty { text-align: center; color: var(--ink-muted); font-size: 14px; padding: 40px 0; display: flex; justify-content: center; }
.drv-mp-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface-solid, var(--surface)); }
.drv-mp-bar .btn { display: inline-flex; align-items: center; gap: 6px; height: 46px; border-radius: 14px; }
.drv-mp-bar .btn svg { width: 18px; height: 18px; stroke-width: 44; }
.drv-mp-here { flex: 1; justify-content: center; font-weight: 700; }
.drv-mp-here:disabled { opacity: 0.4; }

/* the viewer */
.dv {
  position: absolute; inset: 0; z-index: 36; background: #0B0B0C; color: #F2F2F2; display: flex; flex-direction: column; outline: none;
}
.dv svg { stroke: currentColor; fill: none; stroke-width: 34; }
.dv-top {
  display: flex; align-items: center; gap: 8px; padding: calc(6px + env(safe-area-inset-top)) 8px 8px; flex: none;
  background: rgba(20, 20, 20, 0.86); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dv-btn { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.14); background: #1F1F23; border-radius: 16px; color: #F2F2F2; display: grid; place-items: center; cursor: pointer; flex: none; transition: transform 90ms ease-out, background 120ms; }
.dv-btn:hover { background: #2A2A30; }
.dv-btn:active { transform: scale(0.95); }
.dv-btn svg { width: 22px; height: 22px; stroke-width: 40; }
.dv-kind { display: flex; flex: none; }
.dv-kind svg { width: 18px; height: 18px; stroke-width: 38; }
.dv-title { flex: 1; min-width: 0; }
.dv-name { font-size: 15.5px; font-weight: 700; white-space: normal; overflow-wrap: break-word; }
.dv-sub { font-size: 12.5px; color: rgba(242, 242, 242, 0.6); }
.dv-stage { flex: 1; min-height: 0; position: relative; display: flex; overflow: hidden; }
.dv-stage > * { flex: 1; min-width: 0; }
.dv-wait { display: flex; align-items: center; justify-content: center; }
.dv-imgwrap { display: flex; align-items: center; justify-content: center; overflow: auto; }
.dv-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; }
.dv-img.zoom { max-width: none; max-height: none; cursor: zoom-out; }
.dv-video { width: 100%; height: 100%; background: #000; }
.dv-audio, .dv-noprev { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; }
.dv-audio-art, .dv-noprev-art { width: 140px; height: 140px; border-radius: 26px; display: grid; place-items: center; color: var(--k); background: color-mix(in srgb, var(--k) 22%, transparent); }
.dv-audio-art svg, .dv-noprev-art svg { width: 64px; height: 64px; stroke-width: 26; }
.dv-audio audio { width: min(420px, 90%); margin-top: 16px; }
.dv-noprev-name { font-size: 16px; font-weight: 700; margin-top: 10px; overflow-wrap: anywhere; }
.dv-noprev-sub { font-size: 13px; color: rgba(242, 242, 242, 0.6); }
.dv-open { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; height: 46px; padding: 0 22px; border-radius: 23px; border: none; background: #F2F2F2; color: #111; font-weight: 700; font-size: 15px; cursor: pointer; }
.dv-open svg { width: 18px; height: 18px; stroke-width: 40; }
.dv-pages { overflow-y: auto; padding: 16px 12px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dv-page { margin: 0; width: min(100%, 860px); }
.dv-page img { display: block; width: 100%; height: auto; min-height: 120px; background: #fff; border-radius: 4px; }
.dv-page figcaption { text-align: center; font-size: 12px; color: rgba(242, 242, 242, 0.55); margin-top: 4px; }
.dv-textwrap { overflow: auto; padding: 16px; display: flex; flex-direction: column; align-items: center; }
.dv-text {
  width: min(100%, 860px); box-sizing: border-box; margin: 0; padding: 18px; border-radius: 10px; background: #fff; color: #1C1C1E;
  font: 14.5px/1.5 -apple-system, system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere;
}
.dv-text.code { font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; }
.dv-tablewrap { width: min(100%, 960px); overflow: auto; border-radius: 8px; background: #fff; }
.dv-table { border-collapse: collapse; color: #1C1C1E; font-size: 13px; min-width: 100%; }
.dv-table th, .dv-table td { border: 1px solid #E3E3E7; padding: 7px 10px; text-align: left; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; /* preview: a long free-text preview a tap opens in full — the one sanctioned cut */ }
.dv-table th { background: #F1F1F4; font-weight: 700; }
.dv-table td.n { background: #F7F7F9; color: #8A8A90; text-align: center; width: 36px; }
.dv-more { font-size: 12.5px; color: rgba(242, 242, 242, 0.6); margin-top: 10px; }
.dv-nav {
  position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 23px; border: none; z-index: 2;
  background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.dv-nav:hover { background: rgba(255, 255, 255, 0.24); }
.dv-nav svg { width: 22px; height: 22px; stroke-width: 44; }
.dv-nav.prev { left: 12px; }
.dv-nav.next { right: 12px; }
.dv-nav[hidden] { display: none; }
.dv-bottom {
  display: flex; justify-content: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); flex: none;
  background: rgba(20, 20, 20, 0.86); border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Icons, the word as the tooltip (13 Oct 2026). */
.dv-tool {
  width: 48px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); background: #1F1F23;
  color: #F2F2F2; cursor: pointer; border-radius: 16px; transition: transform 90ms ease-out, background 120ms;
}
.dv-tool:hover { background: #2A2A30; }
.dv-tool:active { transform: scale(0.95); }
.dv-tool svg { width: 22px; height: 22px; stroke-width: 34; }
.dv-tool.on { color: #FFC83D; }
.dv-tool.on svg { fill: currentColor; }
.dv-tool.lead { background: var(--k, #D8579E); border-color: var(--k, #D8579E); color: #fff; }
.dv-tool.lead:hover { filter: brightness(1.06); }

/* A wide page (the app installed on a computer): Google Drive's table — name,
   modified, size — New in the head, arrows in the viewer. The page sets
   .drv-wide on itself from its own width, not the window's: in a browser the
   app is a phone-wide column however wide the window is. */
.dv:not(.wide) .dv-nav { display: none; }
.drv-wide .drv-newbtn { display: inline-flex; }
.drv-wide .drv-fab { display: none; }
.drv-wide .drv-top { padding: 0 24px; }
.drv-wide .drv-chips { padding-left: 24px; padding-right: 24px; margin: 0 -24px; }
.drv-wide .drv-row { padding-left: 24px; }
.drv-wide .drv-page:not(.selecting) .drv-row, .drv-wide .drv-row { grid-template-columns: 22px 42px minmax(0, 1fr) 130px 100px 40px; }
.drv-wide .drv-col { display: block; }
.drv-wide .drv-check { display: flex; visibility: hidden; }
.drv-wide .drv-row:hover .drv-check, .drv-wide .drv-page.selecting .drv-check, .drv-wide .drv-row.on .drv-check { visibility: visible; }
.drv-wide .drv-listhead {
  display: grid; grid-template-columns: 22px 42px minmax(0, 1fr) 130px 100px 40px; column-gap: 12px; padding: 6px 8px 6px 24px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-muted); border-bottom: 1px solid var(--border);
}
.drv-wide .drv-listhead-name { grid-column: 3; }
.drv-th { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.drv-th:hover, .drv-th.on { color: var(--ink); }
.drv-th svg { width: 13px; height: 13px; stroke-width: 48; }
.drv-wide .drv-sort, .drv-wide .drv-dir { display: none; }
.drv-wide .drv-grid.folders { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.drv-wide .drv-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); padding: 6px 24px; }
.drv-wide .drv-snack { left: 50%; right: auto; width: min(480px, calc(100% - 32px)); transform: translateX(-50%); bottom: calc(var(--bar-clear, 0px) + 24px); }
.drv-wide .drv-upload { left: auto; right: 24px; width: 340px; }
.drv-wide .drv-h2, .drv-wide .drv-cards, .drv-wide .drv-sortrow, .drv-wide .drv-trashnote { margin-left: 8px; margin-right: 8px; }
.drv-wide .drv-meter { margin-left: 24px; margin-right: 24px; }
.drv-mp-back.wide .drv-mp { inset: auto; width: min(480px, 92%); height: min(620px, 84%); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .drv-upload-fill { transition: none; } }

/* ---- shared with people: the two halves of Shared, a folder of someone
   else's, and the share sheet (pages/drive.js shareSheet; the phone's
   components/drive/ShareSheet.tsx) ---- */
.drv-seg { display: flex; gap: 4px; margin: 10px 16px 2px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.drv-seg-btn {
  flex: 1; min-height: 36px; border: none; border-radius: 10px; background: none; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--ink-muted);
}
.drv-seg-btn.on { background: var(--accent); color: var(--on-accent, var(--bg)); }
.drv-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drv-wide .drv-seg { max-width: 320px; margin-left: 8px; }

.drv-crumbs.guest { gap: 4px; padding-top: 10px; }
.drv-guest-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0 6px; }
.drv-guest-name { font-size: 19px; font-weight: 700; color: var(--ink); white-space: normal; overflow-wrap: break-word; }
.drv-guest-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--ink-muted); }

.drv-face { flex: none; display: block; overflow: hidden; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.drv-face.sm { width: 24px; height: 24px; }
.drv-face.xs { width: 18px; height: 18px; }
/* A stock face is its own drawing: none of the page's icon strokes. */
.drv-sheet .drv-face svg, .drv-page .drv-face svg { stroke: none; fill: initial; stroke-width: initial; width: 100%; height: 100%; display: block; }
.drv-badge.people svg { width: 13px; height: 13px; }

.drv-sheet.share { gap: 8px; }
.drv-share-title { display: block; overflow-wrap: anywhere; white-space: normal; }
.drv-share-h { margin-top: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-muted); }
.drv-share-h.sub { margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.drv-share-wait { display: grid; place-items: center; min-height: 56px; }
.drv-share-none { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.drv-share-none-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.drv-people { display: flex; flex-direction: column; }
.drv-person { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 4px 0; }
.drv-found { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--accent); }
.drv-found-acts { display: flex; align-items: center; gap: 8px; }
.drv-found-acts .drv-role { flex: 1; width: auto; max-width: none; min-width: 0; min-height: 44px; }
.drv-found-acts .grow { flex: 1; }
/* A narrow window: what they may do takes its own line under the name, whole, and the buttons the line after. */
@media (max-width: 400px) {
  .drv-found-acts { flex-wrap: wrap; }
  .drv-found-acts .drv-role { flex: 1 1 100%; }
}
.drv-person-words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* A name takes a second line before it is cut; what someone may do is never cut (the phone's ShareSheet, the same). */
.drv-person-name { font-size: 15.5px; line-height: 19px; font-weight: 600; color: var(--ink); display: block; overflow-wrap: anywhere; }
.drv-person-sub { font-size: 12.5px; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.drv-person-role { flex: none; font-size: 13.5px; font-weight: 600; color: var(--ink-muted); padding: 0 6px; }
.drv-role {
  flex: none; min-height: 44px; padding: 0 6px 0 8px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.drv-role:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.drv-share-add { display: flex; align-items: center; gap: 8px; }
.drv-share-input { flex: 1; min-width: 0; width: auto; margin-top: 0; }
.drv-share-btn { flex: none; min-height: 44px; border-radius: 14px; padding: 0 16px; font-weight: 700; white-space: nowrap; }
.drv-share-note { font-size: 13.5px; color: var(--ink-muted); }
.drv-share-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.drv-share-chip {
  display: flex; align-items: center; gap: 6px; min-height: 40px; min-width: 0; padding: 0 12px 0 8px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer;
}
.drv-share-chip:hover { background: var(--tint, var(--accent-soft)); }
.drv-share-chip { max-width: 100%; }
.drv-share-chip > span:last-child { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.drv-share-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.drv-share-link > .drv-sheet-line { flex: 1; min-width: 160px; }
.drv-share-linkbtns { display: flex; gap: 8px; margin-left: auto; }

/* A narrow phone: smaller faces and tighter rows, so a name keeps room beside what its person may do. */
@media (max-width: 360px) {
  .drv-person { gap: 8px; }
  .drv-person > .drv-face { width: 32px; height: 32px; }
  .drv-role { font-size: 13px; }
}

/* ---- Drive's three buttons: Files · Photos · Passwords (pages/drive-hub.js,
   driveViews.mjs; the phone's components/pages/DriveHub.tsx) ----
   One tray under the floating rail, three equal buttons, the one you are on
   filled with the ink — the strongest thing on the page, so the tabs and
   chips of the view under it (which wear the accent) read as its own. */
.screen.drv-hub { display: flex; flex-direction: column; }
.drv-hub-bar { flex: none; padding: calc(52px + env(safe-area-inset-top)) 12px 6px; display: flex; justify-content: center; }
.drv-hub-seg {
  width: 100%; max-width: 460px; display: flex; gap: 2px; padding: 3px; border-radius: 15px;
  border: 1px solid var(--border); background: var(--surface);
}
.drv-hub-tab {
  flex: 1 1 0; min-width: 0; height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 4px;
  border: none; border-radius: 12px; background: none; color: var(--ink-muted); cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: -0.2px;
}
.drv-hub-tab span { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.drv-hub-tab svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 36; }
.drv-hub-tab:hover { color: var(--ink); }
.drv-hub-tab.on { background: var(--ink); color: var(--bg); cursor: default; }
/* 320 wide leaves each button about 94px, and "Passwords" beside its key needs 100: the words alone, then. */
/* Two buttons since 13 Oct 2026 (Passwords left Drive's top): each has room for its icon at any width. */
.drv-hub-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The view itself: the box a page was always drawn in, less the room it left for the rail (the buttons took it). */
.drv-hub-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.drv-hub-body > .inner { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; }
.drv-hub-body .screen-scroll > .inner.drv-page,
.drv-hub-body .screen-scroll > .inner.ph-page { padding-top: 4px; }
.drv-hub-body .pw-top { padding-top: 6px; }
.drv-hub-body .pw-center { padding-top: 28px; }
.drv-hub-body .pw-split:not(.wide) .pw-detail { padding-top: 6px; }
.drv-hub-body .ph-busy { top: 12px; }
.drv-hub-body .ph-scrub { top: 12px; }
/* The buttons say Files; the page's own "Drive" title would say it twice. Wide, New sits beside the search box instead of beside a title. */
.drv-hub-body .drv-title { display: none; }
/* ---- Storage (pages/storage.js, storageTabs.mjs; the phone's components/pages/StoragePage.tsx) ----
   Passwords · Photos · Files · Camera as a bar at the page's foot, just over the row (21 Oct 2026,
   the user: "a swipable bar at the bottom on top of the regular nav bar kind of like how WhatsApp
   has their bar"): one tray, each tab its icon over its name, a lit key under the chosen one that
   slides to the next (and follows a slide along the bar). Each tab's page sits over it in a
   .drv-hub-body of its own, kept while hidden — except the Camera's, which is put away. */
/* Storage's pages already stop above the bar, the row and the box: what they keep clear of the box (--bar-clear —
   Drive's Move/Star/Trash bar, its +, the lists' foot room, Photos' date scrubber) is nothing in here. */
.stg-bodies { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: calc(52px + env(safe-area-inset-top)); --bar-clear: 0px; }
.stg-body[hidden] { display: none !important; }
.stg-bar { flex: none; padding: 6px 12px 10px; display: flex; justify-content: center; }
.stg-seg {
  position: relative; width: 100%; max-width: 460px; display: flex; padding: 4px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface);
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.stg-lit {
  position: absolute; top: 4px; left: 4px; height: 52px; width: calc((100% - 8px) / var(--n, 4)); border-radius: 16px;
  background: var(--ink); transform: translateX(calc(100% * var(--at, 0))); transition: transform 240ms cubic-bezier(.3, 1.3, .5, 1);
  pointer-events: none;
}
.stg-seg.sliding .stg-lit { transition-duration: 140ms; }
.stg-tab {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0; height: 52px; padding: 0 2px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; border: none; border-radius: 16px; background: none;
  color: var(--ink-muted); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: -0.1px;
  transition: color 120ms;
}
.stg-tab span { max-width: 100%; white-space: nowrap; }
.stg-tab svg { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 36; }
.stg-tab:hover:not(.lit) { color: var(--ink); }
.stg-tab.lit { color: var(--bg); font-weight: 800; }
.stg-tab.on { cursor: default; }
.stg-seg.sliding .stg-tab { cursor: grabbing; }
.stg-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Four tabs at 320 wide leave each 72px, and "Passwords" in bold needs 71 at 12px: a size down there, never cut. */
@media (max-width: 359.98px) { .stg-tab { font-size: 11px; letter-spacing: -0.2px; } }
/* A short window (an SE, a landscape tablet): a slimmer bar, still a whole thumb, so the foot is not two stacked bars. */
@media (max-height: 699.98px) {
  .stg-bar { padding: 4px 12px 6px; }
  .stg-tab, .stg-lit { height: 46px; }
  .stg-tab { gap: 0; }
}
/* The vault's first screens scroll from the top of their tab: what scrolls up fades out there instead of being sliced
   (Files and Photos are .screen-scroll lists, which fade the same way once scrolled — shell.css). */
.stg-body .pw-center { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
.stg-keys .stg-bar { display: none; }
.stg-error { padding: 24px 16px; color: var(--ink-muted); text-align: center; }
/* The bar is the page's own foot: no fade over it (the page's list fades into the bar instead). */
.app-shell > .screen.stg-screen {
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(env(safe-area-inset-top) + 24px), #000 calc(env(safe-area-inset-top) + 44px));
  mask-image: linear-gradient(to bottom, transparent calc(env(safe-area-inset-top) + 24px), #000 calc(env(safe-area-inset-top) + 44px));
}
.stg-screen:not(.stg-on-camera) .stg-bodies {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent 100%);
}
.app-shell > .screen.stg-on-camera { -webkit-mask-image: none; mask-image: none; }
.drv-hub-body .drv-titlerow { display: none; }
.drv-hub-body.drv-wide .drv-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.drv-hub-body.drv-wide .drv-titlerow { display: flex; grid-column: 2; grid-row: 2; }
.drv-hub-body.drv-wide .drv-search { grid-column: 1; grid-row: 2; }
.drv-hub-body.drv-wide .drv-chips, .drv-hub-body.drv-wide .drv-tabs { grid-column: 1 / -1; }
/* The storage card stands first, across the whole head (13 Oct 2026). */
.drv-hub-body.drv-wide .drv-store { grid-column: 1 / -1; grid-row: 1; }
.drv-hub-body.drv-wide .drv-top { row-gap: 10px; }
/* Photos' own tabs, under the ink buttons: the accent, like Drive's chips. */
.drv-hub-body .ph-tabs .seg-tab.active { background: var(--accent); color: var(--on-accent, var(--bg)); }

/* ---- 13 Oct 2026: icon tabs, the storage card, previews for everything ---- */

/* Home · Folders · Starred · Shared · Trash, as icons (their words are the tooltip and the label) */
.drv-tabs { display: flex; justify-content: center; gap: 8px; padding: 4px 0 2px; }
.drv-tab {
  flex: 1; max-width: 88px; height: 46px; border-radius: 16px; border: 1px solid var(--border); border-bottom-width: 3px;
  background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer;
  transition: transform 90ms ease-out, background 120ms, border-color 120ms;
}
.drv-tab svg { width: 22px; height: 22px; stroke-width: 36; }
.drv-tab:hover { background: var(--tint, var(--accent-soft)); }
.drv-tab:active { transform: translateY(2px); border-bottom-width: 1px; margin-top: 2px; height: 44px; }
.drv-tab.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, var(--bg)); }
.drv-tab.on svg { stroke-width: 44; }
.drv-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the storage at the top, opened in place */
.drv-store { position: relative; border-radius: 18px; border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface); overflow: hidden; }
.drv-store-head {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; background: none; color: inherit;
  text-align: left; cursor: pointer; font: inherit;
}
.drv-store-head:hover .drv-store-more { background: var(--tint, var(--accent-soft)); }
.drv-store-ico {
  width: 40px; height: 40px; flex: none; border-radius: 14px; display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.drv-store.paid .drv-store-ico { color: #FF8A3D; background: color-mix(in srgb, #FF8A3D 16%, transparent); }
.drv-store-ico svg { width: 21px; height: 21px; fill: currentColor; stroke: none; }
.drv-store-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.drv-store-headline { font: 900 16px/1.2 var(--arc-font, inherit); color: var(--ink); white-space: normal; overflow-wrap: break-word; }
.drv-store-track { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.drv-store-fill { display: block; height: 6px; border-radius: 3px; background: var(--accent); transition: width 420ms cubic-bezier(.2,.9,.3,1); }
.drv-store.paid .drv-store-fill { background: #FF8A3D; }
.drv-store-line { font-size: 12.5px; color: var(--ink-muted); display: block; overflow-wrap: break-word; }
.drv-store-more {
  width: 44px; height: 44px; flex: none; border-radius: 16px; border: 1px solid var(--border); background: var(--bg);
  display: grid; place-items: center; color: var(--ink);
}
.drv-store.open .drv-store-more { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.drv-store-more svg { width: 22px; height: 22px; stroke-width: 40; }
.drv-store-body { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px; animation: drv-open 220ms cubic-bezier(.2,.9,.3,1.1); }
@keyframes drv-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.drv-store-chips { display: flex; gap: 8px; margin-bottom: 4px; }
.drv-store-chip {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; height: 32px; padding: 0 6px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--bg); font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.drv-store-chip svg { width: 14px; height: 14px; flex: none; color: var(--ink-muted); stroke-width: 40; }
.drv-store-chip span { white-space: normal; overflow-wrap: break-word; }
.drv-store-price { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.drv-store-sub { font-size: 13px; color: var(--ink-muted); }
.drv-store-sub.paid { color: #E8730C; }
.drv-store-sub.center { text-align: center; }
.drv-store-table { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-top: 6px; }
.drv-store-cell { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 13px; color: var(--ink-muted); border-top: 1px solid var(--border); }
.drv-store-cell:nth-child(-n+2) { border-top: none; }
.drv-store-cell:nth-child(even) { border-left: 1px solid var(--border); }
.drv-store-cell b { color: var(--ink); font-size: 13.5px; }
.drv-store-cell span { font-variant-numeric: tabular-nums; }
.drv-store-buy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.drv-store-btn.arc-candy { min-height: 44px; padding: 0 8px; font-size: 15px; width: 100%; }
.drv-store-btn.arc-candy:disabled { opacity: 0.45; cursor: default; transform: none; }
.drv-store-wait { display: grid; place-items: center; min-height: 49px; }
/* On a phone a size sits over its price, so "+1,000 GB" is never broken over two lines (it did at 375). */
@media (max-width: 599px) {
  .drv-store-cell { flex-direction: column; align-items: flex-start; gap: 1px; }
}
@media (max-width: 370px) {
  .drv-store-buy { grid-template-columns: 1fr 1fr; }
  /* Smaller chips keep their numbers whole. */
  .drv-store-chip { font-size: 12px; gap: 4px; padding: 0 4px; }
  .drv-store-chip svg { width: 13px; height: 13px; }
}

/* the viewer's round buttons inside a page */
.dv-rbtn {
  width: 44px; height: 44px; flex: none; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.14); background: #1F1F23;
  color: #F2F2F2; display: grid; place-items: center; cursor: pointer;
}
.dv-rbtn:hover { background: #2A2A30; }
.dv-rbtn svg { width: 21px; height: 21px; stroke-width: 40; }

/* a picture that zooms */
.dv-zoom { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: zoom-in; outline: none; }
.dv-zoom.zoomed { cursor: grab; }
.dv-zoom.zoomed:active { cursor: grabbing; }
.dv-zimg { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; transform-origin: center center; will-change: transform; }

/* PDF pages: where you are, and zoom */
.dv-pdf { position: relative; display: flex; min-width: 0; }
.dv-pdf .dv-pages { flex: 1; --pz: 1; }
.dv-pdf .dv-page { width: min(calc(100% * var(--pz)), calc(860px * var(--pz))); max-width: none; flex: none; }
.dv-pagepill {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 14px;
  background: rgba(20, 20, 20, 0.82); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none;
}
.dv-zoombar {
  position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 4px;
  border-radius: 18px; background: rgba(20, 20, 20, 0.86); border: 1px solid rgba(255, 255, 255, 0.1);
}
.dv-zoombar .dv-rbtn { width: 40px; height: 40px; border-radius: 14px; }
.dv-zoombar svg { stroke: currentColor; stroke-width: 44; }
.dv-zlabel { min-width: 44px; text-align: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* code, coloured */
.dv-code {
  width: min(100%, 980px); box-sizing: border-box; display: flex; border-radius: 12px; overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1); font: 13px/1.55 ui-monospace, Menlo, Consolas, monospace;
}
.dv-code-nums {
  flex: none; padding: 14px 10px 14px 12px; text-align: right; white-space: pre; color: var(--gut); user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.06); position: sticky; left: 0; background: inherit;
}
.dv-code-pre { margin: 0; padding: 14px 16px; white-space: pre; flex: 1; }
.dv-code-body { font: inherit; }

/* Markdown, read as a page */
.dv-md { white-space: normal; padding: 22px 24px; }
.dv-md h1, .dv-md h2, .dv-md h3 { line-height: 1.25; margin: 0.6em 0 0.35em; }
.dv-md p { margin: 0.55em 0; }
.dv-md pre { background: #F3F3F6; border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.dv-md code { background: #F3F3F6; border-radius: 4px; padding: 0 4px; }
.dv-md a { color: #2F6FEB; }

/* a font's specimen */
.dv-font { gap: 12px; }
.dv-font-name { width: min(100%, 860px); font-size: 22px; font-weight: 800; }
.dv-font-img { width: min(100%, 860px); border-radius: 14px; background: #fff; }

/* inside an archive */
.dv-arch { display: flex; flex-direction: column; min-height: 0; position: relative; }
.dv-arch-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex: none; width: min(100%, 860px); box-sizing: border-box; margin: 0 auto; }
.dv-arch-summary { width: min(100%, 860px); box-sizing: border-box; margin: 0 auto; padding: 12px 18px 4px; }
.dv-arch-badge { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; color: var(--k); background: color-mix(in srgb, var(--k) 22%, transparent); }
.dv-arch-badge svg { width: 21px; height: 21px; }
.dv-arch-kind { display: flex; flex: none; }
.dv-arch-kind svg { width: 18px; height: 18px; stroke-width: 38; }
.dv-arch-title { flex: 1; min-width: 0; }
.dv-arch-list { flex: 1; overflow-y: auto; padding: 0 12px 96px; width: min(100%, 860px); box-sizing: border-box; margin: 0 auto; }
.dv-arch-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px; border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: none; color: #F2F2F2; text-align: left; cursor: pointer; font: inherit;
}
.dv-arch-row:hover { background: rgba(255, 255, 255, 0.05); }
.dv-arch-row.locked { opacity: 0.5; }
.dv-arch-row > svg { width: 18px; height: 18px; color: rgba(242, 242, 242, 0.6); stroke-width: 40; flex: none; }
.dv-arch-ico { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--k); background: color-mix(in srgb, var(--k) 22%, transparent); }
.dv-arch-ico svg { width: 19px; height: 19px; }
.dv-arch-words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dv-arch-name { font-size: 15px; font-weight: 600; white-space: normal; overflow-wrap: break-word; }
.dv-arch-empty { text-align: center; padding: 30px 0; }
.dv-arch-file { flex: 1; min-height: 0; display: flex; }
.dv-arch-file > * { flex: 1; min-width: 0; }
.dv-arch-pic { display: flex; align-items: center; justify-content: center; padding: 12px; }
.dv-arch-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dv-arch-bar { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; justify-content: center; }
.dv-arch-bar .arc-candy { width: min(100%, 420px); }
.dv-arch-unpack svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 34; }
.dv-arch-job {
  width: min(100%, 420px); display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 18px;
  background: #1F1F23; border: 1px solid rgba(255, 255, 255, 0.14);
}
.dv-arch-job .grow { flex: 1; }
.dv-arch-open.arc-candy { min-height: 40px; padding: 0 16px; font-size: 15px; margin-bottom: 5px; }