/* Drive's Storage view, below the drive's own figures: what each
   application keeps in this browser (backup-all.js counts it), and
   whether the browser has promised to keep it (drive.js). */

.dr-summary h4 { font-size: var(--text-sm); font-weight: 600; margin: 20px 0 6px; }
.dr-apps-table { width: 100%; max-width: 640px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dr-apps-table th, .dr-apps-table td { padding: 6px 8px 6px 0; text-align: left; font-weight: 400; border-bottom: 1px solid var(--rule); }
.dr-apps-table thead th { font-size: var(--text-2xs); color: var(--ink-soft); }
.dr-apps-table tbody th { white-space: nowrap; }
.dr-apps-bar { width: 50%; }
.dr-apps-bar span { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--accent-strong); }
.dr-apps-table .dr-apps-n { text-align: right; white-space: nowrap; padding-right: 0; }
.dr-keep p.is-kept { color: var(--ink); }
.dr-keep-ask { border: 1px solid var(--rule-strong); min-height: 44px; }
.dr-keep-ask:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
@media (max-width: 600px) { .dr-apps-bar { width: 30%; } }

/* An empty drive or folder: the shared start (theme.css .app-empty), in
   Drive's own buttons. drive.html's rules for the plain empty note, and
   its reset of every button's colour inside .dr, are undone here. */
.dr-empty .app-empty { max-width: 560px; }
.dr-empty .app-empty-title { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.dr .dr-empty .dr-btn { color: var(--on-accent); }
.dr .dr-empty .dr-empty-alt { border: 1px solid var(--rule-strong); padding: 0 18px; color: var(--ink); }

/* ------------------------------------------------------------------------
   Motion inside the window (30 October 2026). A folder's files appeared
   in one frame, and a row under the pointer changed colour in one. Now
   the rows or tiles of a place just gone to deal in a --stagger apart,
   eight steps then flat (drive.js marks the listing dr-arriving when the
   view or the folder changes, and not when the same listing is redrawn
   for a selection or a rename), and a row, a tile and a button ease
   their colour over --dur-2. Every distance is one of theme.css's,
   nought with motion switched down, and everything that arrives asks for
   the fade it keeps then. */
.dr-arriving .drive-card { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.dr-arriving .drive-card:nth-child(2) { animation-delay: var(--stagger); }
.dr-arriving .drive-card:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.dr-arriving .drive-card:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.dr-arriving .drive-card:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.dr-arriving .drive-card:nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.dr-arriving .drive-card:nth-child(n+7) { animation-delay: calc(var(--stagger) * 6); }
.dr .drive-card, .dr button, .dr [role="tab"] { transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }