/* ── v3 additions ────────────────────────────────────────────────────────
   app.css carries the design tokens, the fonts and the pseudo-state
   utilities, all unchanged from the handoff. This file holds only what v3
   added: the animations the new surfaces use, and the few rules that cannot
   be expressed as an inline style. */

@keyframes spin { to { transform: rotate(360deg); } }

/* The drop overlay's icon. A slow, small bob — enough to read as "this is
   live and waiting" without becoming something you notice twice. */
@keyframes drop-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Rows entering a listing are staggered by index in the component. This is
   the shape of that movement: a short slide from the right, which reads as
   "the list filled in" rather than "the page redrew". */
@keyframes msv-row-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

/* Anyone who has asked not to see motion gets none of it. Every animation in
   the app is decoration over a state change that has already happened, so
   removing them costs nothing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Keyboard focus has to be visible. The file list is operable entirely from
   the keyboard, and a focus ring that only shows on mouse users is the
   accessibility bug that follows from styling :focus instead. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Native controls inherit the theme rather than rendering as light-mode
   widgets on a dark page. */
input, select, textarea, button { color-scheme: inherit; }
select option { background: var(--surface); color: var(--text); }

/* Tables in the admin panel scroll rather than forcing the page wide. */
table { border-spacing: 0; }

/* A dialog opens over the page; the page behind it must not scroll with it. */
body.is-locked { overflow: hidden; }

/* ── The navigation rail (components/Rail.js) ─────────────────────────────
   80px of icons with labels under them, or a 240px drawer. Every colour is a
   --rail-* token (app.css), so the colored and neutral styles and both
   accents are the same CSS. The rail itself does not clip, so the toggle's
   tooltip can reach past it; the parts that could spill during the width
   animation clip themselves. */
.ms-rail {
  width: 80px; flex: none; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px 10px; background: var(--rail-bg); color: var(--rail-fg);
  height: calc(100vh - var(--notice-h, 0px)); position: sticky; top: var(--notice-h, 0px); z-index: 6;
  transition: width .22s cubic-bezier(.2, .8, .2, 1), padding .22s ease;
}
.ms-rail.is-open { width: 240px; padding-inline: 12px; }
.ms-rail :focus-visible { outline: 2px solid var(--rail-fg); outline-offset: -2px; }
.ms-rail-head { height: 48px; flex: none; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ms-rail-logo {
  width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--rail-card-bg); color: var(--rail-fg);
}
.ms-rail-toggle {
  position: relative; width: 60px; height: 48px; border: 0; padding: 0; background: transparent; cursor: pointer;
  border-radius: 12px; display: grid; place-items: center; color: var(--rail-fg);
}
.ms-rail-toggle > * { grid-area: 1 / 1; transition: opacity .18s ease, transform .18s ease; }
.ms-rail-expand {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--rail-hover-bg); opacity: 0; transform: scale(.9);
}
.ms-rail-toggle:hover .ms-rail-logo, .ms-rail-toggle:focus-visible .ms-rail-logo { opacity: 0; transform: scale(.9); }
.ms-rail-toggle:hover .ms-rail-expand, .ms-rail-toggle:focus-visible .ms-rail-expand { opacity: 1; transform: none; }
.ms-rail-toggle:focus-visible { outline-offset: 2px; }
.ms-rail-brand { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-rail-btn {
  width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; padding: 0;
  display: grid; place-items: center; color: var(--rail-fg-muted); flex: none; text-decoration: none;
}
.ms-rail-btn:hover { background: var(--rail-hover-bg); color: var(--rail-fg); }
.ms-rail-mini { width: 22px; height: 22px; border-radius: 6px; }
.ms-rail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; scrollbar-width: none; }
.ms-rail nav { display: flex; flex-direction: column; gap: 2px; }
.ms-rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px 7px; border-radius: 12px;
  color: var(--rail-fg-muted); text-decoration: none; font-size: 10.5px; font-weight: 700; line-height: 1.15;
  text-align: center; white-space: nowrap; min-width: 0;
}
.ms-rail-item:hover { background: var(--rail-hover-bg); color: var(--rail-fg); }
.ms-rail-item[aria-current="page"] { background: var(--rail-active-bg); color: var(--rail-fg); }
.ms-rail-item > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ms-rail.is-open .ms-rail-item { flex-direction: row; gap: 11px; padding: 9px 10px; font-size: 13.5px; text-align: left; border-radius: 10px; }
.ms-rail.is-open .ms-rail-item > span { flex: 1; }
.ms-rail-row { display: flex; align-items: center; gap: 2px; }
.ms-rail-row .ms-rail-item { flex: 1; }
.ms-rail-chev svg { transition: transform .18s ease; }
.ms-rail-chev[aria-expanded="true"] svg { transform: rotate(90deg); }
.ms-rail-divider { height: 1px; background: var(--rail-divider); margin: 8px 6px; flex: none; }
.ms-rail-sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 20px; }
/* display: flex above outranks the browser's own [hidden] rule, so the chevron
   flipped state and the list stayed on screen. */
.ms-rail-sub[hidden] { display: none; }
.ms-rail-sub a {
  display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 8px; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: var(--rail-fg-muted); text-decoration: none; white-space: nowrap;
}
.ms-rail-sub a span { overflow: hidden; text-overflow: ellipsis; }
.ms-rail-sub a:hover { background: var(--rail-hover-bg); color: var(--rail-fg); }
.ms-rail-sub a[aria-current="page"] { background: var(--rail-active-bg); color: var(--rail-fg); }
.ms-rail-note { font-size: 12px; color: var(--rail-fg-muted); padding: 4px 10px 6px; white-space: normal; }
.ms-rail-foot { flex: none; display: flex; flex-direction: column; padding-top: 8px; }
.ms-rail-store { border-radius: 12px; background: var(--rail-card-bg); padding: 11px 12px 10px; margin-top: 6px; overflow: hidden; }
.ms-rail-store-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 8px; white-space: nowrap; }
.ms-rail-bar { height: 6px; border-radius: 3px; background: var(--rail-divider); overflow: hidden; }
.ms-rail-bar i { display: block; height: 100%; border-radius: 3px; background: var(--rail-fg); transition: width .4s ease; }
.ms-rail-bar i.is-warn { background: var(--status-warn-bg); }
.ms-rail-bar i.is-crit { background: var(--status-crit-bg); }
.ms-rail-store-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--rail-fg-muted); margin-top: 7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-rail-store-meta span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ms-rail-badge {
  display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 10px;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ms-rail-badge.is-warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.ms-rail-badge.is-crit { background: var(--status-crit-bg); color: var(--status-crit-fg); }
.ms-rail-badge.is-ok { color: var(--rail-fg-muted); padding: 0; }
.ms-rail-ring { display: grid; justify-items: center; gap: 5px; margin-top: 6px; padding: 6px 0 4px; color: var(--rail-fg); text-decoration: none; border-radius: 12px; }
/* The colour is restated: the global a:hover (accent-strong) outranks the
   plain class, and on a green rail that turns the number green on green. */
.ms-rail-ring:hover, .ms-rail-ring:focus-visible { background: var(--rail-hover-bg); color: var(--rail-fg); }
.ms-rail-ring-dial { width: 44px; height: 44px; position: relative; display: grid; place-items: center; }
.ms-rail-ring-dial svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ms-rail-ring-dial b { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-rail-version {
  font: 500 10.5px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--rail-fg-muted);
  padding: 8px 4px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-rail:not(.is-open) .ms-rail-version { text-align: center; font-size: 9.5px; }
.ms-rail [data-tip] { position: relative; }
.ms-rail [data-tip]::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: #11161b; color: #f3f6f9; font: 700 11.5px/1 'Manrope', system-ui, sans-serif; padding: 7px 8px; border-radius: 7px;
  white-space: pre; pointer-events: none; opacity: 0; transition: opacity .12s ease; z-index: 30;
}
.ms-rail [data-tip]:hover::after, .ms-rail [data-tip]:focus-visible::after { opacity: 1; transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) {
  .ms-rail, .ms-rail *, .ms-rail *::after { transition: none !important; }
}

/* Small screens: the rail becomes a bar across the top rather than eating
   the width. The file list is the content, and on a phone it should get all
   of what there is. */
@media (max-width: 820px) {
  .ms-shell { flex-direction: column; }
  .ms-rail, .ms-rail.is-open {
    position: sticky; top: var(--notice-h, 0px); width: 100%; height: auto; flex-direction: row; align-items: center;
    padding: 6px 8px; gap: 4px; overflow-x: auto; scrollbar-width: none;
  }
  .ms-rail-head, .ms-rail-divider, .ms-rail-sub, .ms-rail-chev, .ms-rail-store, .ms-rail-version, .ms-rail-note { display: none; }
  .ms-rail-scroll, .ms-rail-foot { flex: none; flex-direction: row; overflow: visible; padding: 0; }
  .ms-rail nav { flex-direction: row; }
  .ms-rail-item, .ms-rail.is-open .ms-rail-item { flex-direction: row; gap: 6px; padding: 7px 10px; font-size: 12.5px; border-radius: 9px; }
  .ms-rail-ring { margin: 0; padding: 0 4px; grid-auto-flow: column; align-items: center; }
  .ms-rail-ring-dial { width: 34px; height: 34px; }
}

/* ── Search: a pill, with its shortcut showing until you type ────────── */
.ms-search {
  height: 38px; width: 300px; max-width: 34vw; border-radius: 19px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 13.5px; padding: 0 36px 0 38px; outline: none;
}
.ms-search::-webkit-search-cancel-button { display: none; }
.ms-search-kbd {
  position: absolute; right: 9px; top: 9px; font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace;
  padding: 4px 6px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--faint); pointer-events: none;
}
.ms-search-clear {
  position: absolute; right: 8px; top: 9px; width: 20px; height: 20px; border: none; border-radius: 10px;
  background: transparent; color: var(--faint); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
@media (max-width: 820px) {
  .ms-search { width: 100%; max-width: none; }
  /* The toolbar wraps: the breadcrumb takes its own line, search takes what
     is left of the next, and "New folder" keeps just its icon. */
  .ms-toolbar { flex-wrap: wrap; padding: 10px 12px !important; gap: 8px !important; }
  .ms-toolbar > nav { flex-basis: 100% !important; }
  .ms-toolbar > div:has(> .ms-search) { flex: 1 1 90px !important; min-width: 0; }
  .ms-toolbar > span[aria-hidden="true"] { display: none; }
  .ms-hide-phone { display: none; }
}

/* The Details pane is always on when switched on, which is the point on a
   laptop and a problem on a tablet: 286px out of a narrow window leaves the
   file list too little room to be a list. Below this width it steps aside,
   and so does its switch — right-click and the bottom bar still carry every
   action it offered. */
@media (max-width: 1000px) {
  .ms-details, .ms-details-toggle { display: none !important; }
}

/* ── Listing: list rows and grid tiles ───────────────────────────────────
   Selection and hover change colour and shadow only, never a size — a
   border that grows or padding that changes on click moves every pixel
   after it, and that read as the view jumping. */

/* Columns, shared by the heading and every row so they cannot drift apart. */
.ms-col-art { flex: none; width: 32px; display: flex; align-items: center; justify-content: center; }
.ms-col-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ms-col-updated { flex: none; width: clamp(170px, 28%, 290px); font-size: 12.5px; color: var(--dim);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-col-size { flex: none; width: 96px; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ms-col-actions { flex: none; width: 132px; display: flex; justify-content: flex-end; gap: 2px; }

.ms-list-head {
  display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 40px;
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .06em;
}

.ms-row {
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  min-height: calc(36px + var(--rowpad, 10px) * 2);
  border-bottom: 1px solid var(--border); cursor: pointer; outline: none;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.ms-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.ms-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.ms-row.is-selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.ms-row.is-drop { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ms-row-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-row-sub { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-row-thumb { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; display: block; }
.ms-row-actions { opacity: 0; transition: opacity .12s ease; }
.ms-row:hover .ms-row-actions, .ms-row:focus-within .ms-row-actions, .ms-row.is-selected .ms-row-actions { opacity: 1; }

/* The small round markers: a shared link, a PIN, a star. */
.ms-badge {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--dim);
}
.ms-badge.is-star { color: var(--warn); }

.ms-item-btn {
  width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
  color: var(--dim); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.ms-item-btn:hover { background: var(--surface-2); color: var(--text); }

/* Grid tiles. */
.ms-tile {
  position: relative; padding: 10px 10px 6px; border-radius: 14px; cursor: pointer; outline: none;
  transition: background-color .15s ease, box-shadow .18s ease;
}
.ms-tile:hover, .ms-tile:focus-within {
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22), 0 0 0 1px var(--border);
}
.ms-tile.is-selected { background: var(--accent-soft); box-shadow: 0 0 0 1.5px var(--accent); }
.ms-tile.is-selected:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .22), 0 0 0 1.5px var(--accent); }
.ms-tile.is-drop { background: var(--accent-soft); box-shadow: 0 0 0 1.5px var(--accent), 0 10px 28px rgba(0, 0, 0, .22); }

.ms-tile-thumb {
  position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.ms-tile-name {
  margin-top: 10px; text-align: center; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-tile-foot { position: relative; height: 32px; }
.ms-tile-meta, .ms-tile-actions { position: absolute; inset: 0; display: flex; align-items: center; transition: opacity .12s ease; }
.ms-tile-meta {
  justify-content: center; font-size: 11.5px; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 32px; text-align: center;
}
.ms-tile-actions { justify-content: space-around; opacity: 0; }
.ms-tile:hover .ms-tile-meta, .ms-tile:focus-within .ms-tile-meta, .ms-tile.is-selected .ms-tile-meta { opacity: 0; }
.ms-tile:hover .ms-tile-actions, .ms-tile:focus-within .ms-tile-actions, .ms-tile.is-selected .ms-tile-actions { opacity: 1; }

.ms-tile-badges { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }

/* Checkboxes: visible without hovering in the list — discoverable — but
   quiet until they matter. On a tile the corner stays clean until it is
   pointed at, as in Box. Ctrl+click remains a shortcut, never the only way. */
.ms-check {
  opacity: .3; transition: opacity .14s ease; accent-color: var(--accent);
  cursor: pointer; width: 15px; height: 15px; margin: 0; flex: none;
}
.ms-row:hover .ms-check, .ms-row.is-selected .ms-check, .ms-check:focus-visible,
.ms-anyselected .ms-check, .ms-list-head .ms-check:hover { opacity: 1; }

.ms-tile-check {
  position: absolute; top: 8px; right: 8px; z-index: 2; padding: 3px; border-radius: 6px;
  background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); display: flex;
  opacity: 0; transition: opacity .14s ease;
}
.ms-tile-check .ms-check { opacity: 1; }
.ms-tile:hover .ms-tile-check, .ms-tile:focus-within .ms-tile-check,
.ms-tile.is-selected .ms-tile-check, .ms-anyselected .ms-tile-check { opacity: 1; }

/* Nothing to hover with on a touch screen: show what hover would reveal. */
@media (hover: none) {
  .ms-row-actions, .ms-tile-actions, .ms-tile-check { opacity: 1; }
  .ms-tile-meta { opacity: 0; }
  .ms-check { opacity: 1; }
}

/* Narrow windows keep Name and Size; Updated is the first to give way. */
@media (max-width: 900px) {
  .ms-col-updated { display: none; }
  .ms-col-actions { width: 70px; }
}

/* ── Sorting ─────────────────────────────────────────────────────────────
   The heading in use keeps its arrow; the others show a faint one only on
   hover, pointing the way a click would sort. Space for the arrow is always
   reserved, so hovering never nudges the label sideways. */

.ms-sort-head {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.ms-sort-head:hover, .ms-sort-head.is-active { color: var(--text); }
.ms-sort-arrow { display: inline-flex; opacity: 0; transition: opacity .12s ease; }
.ms-sort-head:hover .ms-sort-arrow { opacity: .45; }
.ms-sort-head:focus-visible .ms-sort-arrow { opacity: .45; }
.ms-sort-arrow.is-active, .ms-sort-head:hover .ms-sort-arrow.is-active { opacity: 1; color: var(--accent); }

.ms-sort-flip, .ms-sort-current {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 8px; border-radius: 8px; border: none;
  background: transparent; cursor: pointer;
  color: var(--accent); font: 700 11.5px/1 inherit;
  text-transform: uppercase; letter-spacing: .06em;
}
.ms-sort-flip:hover, .ms-sort-current:hover { background: var(--accent-soft); }

.ms-sort-menu { position: relative; }
.ms-sort-options {
  position: absolute; top: 100%; left: 0; z-index: 8; min-width: 150px;
  padding: 6px; margin-top: 2px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
/* Hover opens it; so does focus anywhere inside, for the keyboard. The gap
   above is covered by the padding-top of the wrapper so the pointer can
   travel from the button to the list without it closing on the way. */
.ms-sort-menu:hover .ms-sort-options,
.ms-sort-menu:focus-within .ms-sort-options {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .12s ease, transform .12s ease, visibility 0s;
}
.ms-sort-options button {
  text-align: left; height: 32px; padding: 0 11px; border: none; border-radius: 8px;
  background: transparent; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
}
.ms-sort-options button:hover { background: var(--surface-2); }
.ms-sort-options button.is-active { color: var(--accent); }

/* ── Dropdowns and the empty-folder drop zone ────────────────────────── */

.ms-dropdown {
  position: absolute; top: calc(100% + 6px); z-index: 20; min-width: 190px;
  padding: 6px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 1px;
  animation: msv-menu .14s ease both;
}
.ms-dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 36px; padding: 0 11px; border: none; border-radius: 8px;
  background: transparent; color: var(--text); font-size: 13px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.ms-dropdown button:hover, .ms-dropdown button:focus-visible { background: var(--surface-2); }

/* The listing fills what the toolbar leaves. The deep bottom padding is the
   room the bulk-action bar needs when something is selected. */
.ms-listing { flex: 1; padding: 8px 14px 90px; }

/* An empty folder is one big target: the drop zone takes the whole height,
   and the gap kept for the bulk bar — which cannot appear with nothing to
   select — shrinks to match the sides. */
.ms-listing:has(> .ms-dropzone) { display: flex; flex-direction: column; padding-bottom: 14px; }

.ms-dropzone {
  flex: 1; margin: 6px 0 0; min-height: 320px;
  display: flex; align-items: center; justify-content: center; padding: 32px 20px;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* ── Profile menu ────────────────────────────────────────────────────── */

.ms-avatar-button {
  display: flex; padding: 2px; border: none; border-radius: 50%;
  background: transparent; cursor: pointer;
  box-shadow: 0 0 0 1.5px transparent; transition: box-shadow .14s ease;
}
.ms-avatar-button:hover, .ms-avatar-button[aria-expanded="true"] { box-shadow: 0 0 0 1.5px var(--accent); }

.ms-profile { min-width: 272px; padding: 8px; }
.ms-profile-who { display: flex; align-items: center; gap: 11px; padding: 6px 6px 12px; }
.ms-profile-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-profile-email { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ms-profile-look {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 6px; border-top: 1px solid var(--border);
}
.ms-dropdown-rule { height: 1px; background: var(--border); margin: 4px 2px; }

/* Two icons that read as a switch: the one that is on is filled. */
.ms-theme-switch { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-2); }
.ms-profile .ms-theme-switch button {
  width: 32px; height: 28px; padding: 0; justify-content: center;
  border-radius: 8px; color: var(--faint);
}
.ms-profile .ms-theme-switch button:hover { background: var(--surface-3); color: var(--text); }
.ms-profile .ms-theme-switch button.is-on { background: var(--accent); color: var(--on-accent); }

.ms-swatches { display: flex; gap: 7px; }

/* Colored or neutral sidebar: two words that read as a switch, like the
   theme icons above them. */
.ms-profile-rail {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 6px 10px; font-size: 12.5px; font-weight: 700; color: var(--dim);
}
.ms-rail-style { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-2); }
.ms-profile .ms-rail-style button {
  height: 26px; padding: 0 10px; justify-content: center; border-radius: 8px;
  font-size: 12px; font-weight: 700; color: var(--dim);
}
.ms-profile .ms-rail-style button:hover { background: var(--surface-3); color: var(--text); }
.ms-profile .ms-rail-style button.is-on { background: var(--accent); color: var(--on-accent); }
.ms-profile .ms-swatches button {
  width: 20px; height: 20px; padding: 0; border-radius: 50%;
  background: var(--swatch); border: 2px solid transparent;
}
.ms-profile .ms-swatches button:hover { background: var(--swatch); transform: scale(1.1); }
.ms-profile .ms-swatches button.is-on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface); }

/* ── Dialogs ─────────────────────────────────────────────────────────────
   Three things used to make every dialog flicker, on opening and again on
   clicking into a field, all of them paint-level rather than anything
   re-rendering:

   * The dimmed page behind was also blurred (backdrop-filter) while its
     opacity animated. Browsers drop or recompute that blur mid-fade and pop
     it in at the end, and every repaint inside the dialog afterwards — the
     caret blinking, a focus ring appearing — made the whole blurred page get
     redrawn. Firefox shows that as a flicker. The dimming alone does the job.
   * It scaled in. Text inside a scaling layer is drawn soft and snaps sharp
     when the animation ends: a visible jolt just after it appears.
   * It was centred by moving itself half its own size, which on an odd
     width lands on half a pixel and keeps the text soft.

   Now the backdrop centres the dialog with flex, and the dialog rises a few
   pixels while fading in, finishing at no transform at all — so its text is
   drawn once, sharp, and left alone. */

.ms-scrim {
  position: fixed; inset: 0; z-index: 66;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 16px;
  background: var(--overlay);
  animation: msv-pop-o .14s ease both;
}
.ms-dialog {
  position: relative; max-height: 86vh; overflow: auto;
  border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow); padding: 22px;
  animation: msv-dialog .18s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes msv-dialog {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Storage page ────────────────────────────────────────────────────── */

.ms-card {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 20px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 14px;
}
.ms-usage-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.ms-usage-bar span { display: block; height: 100%; }
.ms-storage-hint {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); font-size: 12.5px; color: var(--dim);
}

.ms-storage-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ms-segmented { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-2); }
.ms-segmented button {
  height: 28px; padding: 0 14px; border: none; border-radius: 8px; background: transparent;
  color: var(--dim); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.ms-segmented button.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.ms-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.ms-chips button {
  height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--dim); font-size: 12px; font-weight: 600; cursor: pointer;
}
.ms-chips button.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.ms-storage-selection {
  display: flex; align-items: center; gap: 9px; padding: 10px 16px;
  background: var(--accent-soft); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600;
}
.ms-storage-head {
  display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 38px;
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .06em;
}
.ms-storage-row {
  display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 56px;
  border-bottom: 1px solid var(--border); transition: background-color .12s ease;
}
.ms-storage-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.ms-storage-row.is-selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.ms-storage-name {
  border: none; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-storage-name:hover { color: var(--accent); }
.ms-storage-empty { margin: 0; padding: 28px 16px; text-align: center; font-size: 13px; color: var(--faint); }

.ms-size-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.ms-size-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

.ms-quiet-btn {
  height: 32px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ms-danger-btn {
  height: 32px; padding: 0 13px; border-radius: 9px; border: none; display: inline-flex; align-items: center; gap: 7px;
  background: var(--danger); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer;
}

@media (max-width: 760px) {
  .ms-storage-head > :nth-child(n+3), .ms-storage-row > span:nth-last-child(2) { display: none; }
}

/* ── Toasts ──────────────────────────────────────────────────────────────
   Tinted by kind, bordered in the same colour, one line where the message
   allows and two at most. Success stays green whatever accent is chosen:
   "it worked" should not change colour with a preference.
   Corners match the selection bar (13px) and its buttons (9px), not a pill:
   the toast is the same kind of floating strip and should look like it. */

:root { --toast-success: #3ecf8e; --toast-info: #6db1ff; }
[data-theme="light"] { --toast-success: #0c8056; --toast-info: #2f6fdb; }

.ms-toasts {
  position: fixed; left: 0; right: 0; top: calc(var(--notice-h, 0px) + 70px); z-index: 70;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 16px; pointer-events: none;
}
.ms-toast {
  --tone: var(--toast-info);
  pointer-events: auto; display: flex; align-items: center; gap: 11px;
  max-width: min(560px, 100%); padding: 10px 10px 10px 16px; border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
  background: color-mix(in srgb, var(--tone) 12%, var(--surface));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  animation: msv-toast-in .22s cubic-bezier(.2, .9, .3, 1) both;
}
.ms-toast.is-success { --tone: var(--toast-success); }
.ms-toast.is-error   { --tone: var(--danger); }
.ms-toast.is-warning { --tone: var(--warn); }
.ms-toast-icon { flex: none; display: flex; color: var(--tone); }
.ms-toast-message {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.ms-toast-action {
  flex: none; height: 30px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--tone); background: transparent; color: var(--text);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.ms-toast-action:hover { background: color-mix(in srgb, var(--tone) 18%, transparent); }
.ms-toast-close {
  flex: none; width: 30px; height: 30px; border-radius: 9px; border: none; background: transparent;
  color: var(--dim); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ms-toast-close:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
@keyframes msv-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Upload tray ─────────────────────────────────────────────────────── */

.ms-tray {
  position: fixed; right: 20px; bottom: 20px; width: 340px; max-width: calc(100vw - 32px); z-index: 55;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow);
  animation: msv-pop .22s ease both; transition: opacity .25s ease, transform .25s ease;
}
.ms-tray.is-leaving { opacity: 0; transform: translateY(14px); pointer-events: none; }
.ms-tray-head { display: flex; align-items: center; gap: 9px; padding: 11px 10px 11px 14px; }
.ms-tray-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-tray-link { border: none; background: transparent; color: var(--dim); cursor: pointer; font-size: 12px; font-weight: 600; padding: 4px 6px; border-radius: 6px; }
.ms-tray-link:hover { color: var(--text); background: var(--surface-2); }
.ms-tray-icon {
  flex: none; width: 26px; height: 26px; border: none; border-radius: 7px; background: transparent;
  color: var(--faint); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.ms-tray-icon:hover { background: var(--surface-2); color: var(--text); }
.ms-tray-pill {
  flex: none; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--danger);
  background: transparent; color: var(--text); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.ms-tray-pill:hover { background: var(--danger-soft); }
.ms-tray-overall { height: 3px; background: var(--surface-3); }
.ms-tray-overall span { display: block; height: 100%; background: var(--accent); transition: width .2s linear; }
.ms-tray-list { max-height: 260px; overflow: auto; border-top: 1px solid var(--border); }
.ms-tray-row { padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--border); outline: none; }
.ms-tray-row:last-child { border-bottom: none; }
.ms-tray-row.is-failed { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.ms-tray-row.is-failed:focus-visible, .ms-tray-row.is-failed:focus { box-shadow: inset 3px 0 0 var(--danger); }
.ms-tray-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; display: flex; }
.ms-mid-head { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-mid-tail { flex: none; white-space: nowrap; }
.ms-tray-state { font-size: 11px; font-weight: 700; color: var(--faint); display: inline-flex; align-items: center; gap: 4px; }
.ms-tray-state.is-done { color: var(--toast-success); }
.ms-tray-bar { margin-top: 7px; height: 4px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.ms-tray-bar span { display: block; height: 100%; background: var(--accent); transition: width .2s linear; }
.ms-tray-sub { font-size: 10.5px; color: var(--faint); margin-top: 5px; font-variant-numeric: tabular-nums; }
.ms-tray-error { font-size: 11.5px; color: var(--danger); margin-top: 5px; line-height: 1.4; }
.ms-tray-spinner {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--surface-3); border-top-color: var(--accent); animation: spin .8s linear infinite;
}

/* ── New rows ────────────────────────────────────────────────────────────
   A wash of the accent that fades over two seconds, so what just arrived
   can be found without anything moving. Drawn on a layer of its own,
   because the rows already run their entrance animation inline. */
.ms-row, .ms-tile { position: relative; }
.ms-row.is-new::after, .ms-tile.is-new::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent);
  animation: msv-new 2.6s ease forwards;
}
@keyframes msv-new { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }

/* ── Details pane ────────────────────────────────────────────────────────
   One frame for nothing, one item and several, so switching between them
   never changes the size of the preview box. */

.ms-dp {
  width: 286px; flex: none; border-left: 1px solid var(--border); background: var(--surface);
  height: calc(100vh - var(--notice-h, 0px)); position: sticky; top: var(--notice-h, 0px);
  display: flex; flex-direction: column; animation: msv-pane .2s ease both;
}
.ms-dp-tabs {
  flex: none; display: flex; align-items: flex-end; gap: 4px;
  padding: 0 12px 0 18px; border-bottom: 1px solid var(--border);
}
.ms-dp-tab {
  height: 48px; display: flex; align-items: center; margin-bottom: -1px;
  font-size: 13px; font-weight: 800; border-bottom: 2px solid var(--accent);
}
.ms-dp-spacer { flex: 1; }
.ms-dp-close {
  margin-bottom: 10px; width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent;
  color: var(--faint); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ms-dp-close:hover { background: var(--surface-2); color: var(--text); }
.ms-dp-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px 24px; }

.ms-dp-preview {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; padding: 0;
  border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; color: inherit;
}
.ms-dp-preview.is-image {
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 300% 100%; animation: msv-shimmer 1.4s ease infinite;
}
.ms-dp-preview.is-static, .ms-dp-preview:disabled { cursor: default; }
/* A picture that could not load shows its type instead of shimmering on. */
.ms-dp-preview.is-image > .ms-dp-type { display: none; }
.ms-dp-preview.is-image.is-failed { animation: none; background: var(--surface-2); }
.ms-dp-preview.is-image.is-failed > .ms-dp-type { display: flex; }
/* Locked by a PIN not yet entered this session: say so, and offer to unlock. */
.ms-dp-locked { display: grid; justify-items: center; gap: 8px; color: var(--dim); font-size: 12.5px; font-weight: 700; }
.ms-dp-unlock {
  height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.ms-dp-unlock:hover { background: var(--surface-3); }
/* Only the main picture fades in; the small cards in a stack are shown as
   they arrive, and never get the "loaded" signal the fade waits for. */
.ms-dp-preview > img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .3s ease; }
.ms-dp-preview > img.is-loaded { opacity: 1; }
.ms-dp-open {
  position: absolute; right: 8px; bottom: 8px; height: 24px; padding: 0 9px; border-radius: 999px;
  background: rgba(10, 14, 18, .62); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; gap: 5px; opacity: 0; transition: opacity .15s ease;
}
.ms-dp-preview:hover .ms-dp-open, .ms-dp-preview:focus-visible .ms-dp-open { opacity: 1; }
.ms-dp-type {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: color-mix(in srgb, var(--tone) 12%, var(--surface-2));
}
.ms-dp-ext {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; color: color-mix(in srgb, var(--tone) 85%, var(--text));
}
.ms-dp-stack { position: relative; display: block; width: 100%; height: 100%; background: var(--surface-2); }
.ms-dp-card {
  position: absolute; top: 50%; left: 50%; display: block; width: 46%; aspect-ratio: 4 / 3;
  border-radius: 9px; overflow: hidden; border: 2px solid var(--surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28); background: var(--surface-3);
}
.ms-dp-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-dp-card .ms-dp-ext { font-size: 9.5px; }
.ms-dp-badge {
  position: absolute; right: 10px; bottom: 10px; height: 24px; padding: 0 9px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 800; display: flex; align-items: center;
}

.ms-dp-toolbar { display: flex; align-items: center; gap: 4px; margin: 12px 0 18px; min-height: 34px; }
.ms-dp-tool {
  position: relative; width: 38px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--dim); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.ms-dp-tool:hover { color: var(--text); background: var(--surface-3); }
.ms-dp-tool.is-danger { color: var(--danger); }
.ms-dp-tool[data-tip]:hover::after, .ms-dp-tool[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 5px 8px; border-radius: 7px; background: var(--text); color: var(--bg);
  font-size: 11px; font-weight: 700; z-index: 5; pointer-events: none;
}
.ms-dp-more { position: relative; }
.ms-dp-more .ms-dropdown { min-width: 200px; }
.ms-dropdown button.is-danger, .ms-dropdown button.is-danger svg { color: var(--danger); }

.ms-dp-title { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: -.005em; }
.ms-dp-props { display: flex; flex-direction: column; gap: 14px; }
.ms-dp-prop { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ms-dp-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ms-dp-value { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.ms-dp-value time { border-bottom: 1px dotted var(--border-strong); cursor: help; }
.ms-dp-person { display: inline-flex; align-items: center; gap: 8px; }
.ms-dp-avatar {
  width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.ms-dp-bytes { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ms-muted { color: var(--faint); }
.ms-dp-hint { margin: 18px 0 0; font-size: 12px; line-height: 1.55; color: var(--faint); text-align: center; }

.ms-dp-help {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  margin-left: 4px; vertical-align: 1px; border-radius: 50%; border: 1px solid var(--border-strong);
  color: var(--faint); font-size: 9px; font-weight: 800; letter-spacing: 0; text-transform: none; cursor: help;
}
.ms-dp-help-tip {
  display: none; position: absolute; left: 0; right: 0; top: 20px; z-index: 8;
  padding: 8px 10px; border-radius: 8px; background: var(--text); color: var(--bg);
  font-size: 11.5px; font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none;
}
.ms-dp-help:hover + .ms-dp-help-tip, .ms-dp-help:focus-visible + .ms-dp-help-tip { display: block; }

.ms-dp-desc-input {
  display: block; width: 100%; margin: 0; resize: none; overflow: hidden;
  min-height: 36px; padding: 8px 14px; font: inherit; font-size: 13px; line-height: 1.45; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 18px;
  transition: border-radius .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ms-dp-desc-input::placeholder { color: var(--faint); }
.ms-dp-desc-input:hover { border-color: var(--border-strong); }
.ms-dp-desc-input:not(.is-editing) { white-space: nowrap; text-overflow: ellipsis; }
.ms-dp-desc-input.is-editing {
  border-radius: 12px; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg); outline: none;
}
.ms-dp-desc-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px; }
.ms-dp-desc-status { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); transition: opacity .4s ease; }
.ms-dp-desc-status.ok { color: var(--accent); }
.ms-dp-desc-status.err { color: var(--danger); }
.ms-dp-desc-status.is-fading { opacity: 0; }
.ms-dp-retry {
  border: none; background: none; padding: 0; margin-left: 4px; color: var(--danger);
  font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer;
}
.ms-dp-desc-count { margin-left: auto; color: var(--faint); font-variant-numeric: tabular-nums; }
.ms-dp-desc-count.is-over { color: var(--danger); font-weight: 700; }
.ms-dp-desc-read { white-space: pre-wrap; }

/* PIN fields spread their digits wide and set them large, which is right
   for "4821" and wrong for the hint: letter-spaced, it read as
   "4 – 6   d i g i t s". The placeholder gets the ordinary face. */
.ms-pin::placeholder {
  letter-spacing: normal; font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13.5px; font-weight: 500; color: var(--faint);
}

/* The reverse-order button holds one arrow and nothing else: square, with
   the arrow in the middle. */
.ms-sort-flip { width: 28px; padding: 0; justify-content: center; }


/* ── Shared (components/SharedPage.js) ───────────────────────────────────
   Everything you have shared, one row per share, and the side panel that
   edits a share in place. */
.ms-sh { padding: 16px 20px 40px; }
.ms-sh-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.ms-sh-lede { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--dim); max-width: 72ch; }
.ms-sh-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.ms-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.ms-seg button {
  border: 0; background: transparent; color: var(--dim); font: inherit; font-size: 12.5px; font-weight: 800;
  height: 28px; padding: 0 11px; border-radius: 8px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.ms-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.ms-seg-count { color: var(--faint); margin-left: 2px; }
.ms-pill {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px;
  font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--dim);
}
.ms-pill.is-warn { background: color-mix(in srgb, var(--warn) 7%, var(--bg)); color: var(--warn); }
.ms-pill.is-crit { background: color-mix(in srgb, var(--danger) 6%, var(--bg)); color: var(--danger); }
.ms-pill.is-plain { background: transparent; padding: 0; }
.ms-sh-table { border-top: 1px solid var(--border); }
.ms-sh-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) 132px 180px 76px; align-items: center;
  min-height: 56px; padding-left: 12px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.ms-sh-row.is-head { min-height: 38px; cursor: default; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.ms-sh-row:not(.is-head):hover { background: var(--surface-2); }
.ms-sh-row.is-selected { background: var(--accent-ui-subtle); }
.ms-sh-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ms-sh-item { display: flex; align-items: center; gap: 11px; min-width: 0; padding-right: 12px; }
.ms-sh-stack { display: grid; min-width: 0; }
.ms-sh-name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.ms-sh-name:hover { text-decoration: underline; }
.ms-sh-sub { display: block; font-size: 11.5px; font-weight: 600; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-sh-who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; padding-right: 10px; }
.ms-sh-who > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-sh-avatar, .ms-sh-mark {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; background: var(--accent-soft); color: var(--text);
}
.ms-sh-mark { border-radius: 6px; background: var(--surface-2); color: var(--dim); }
.ms-sh-access { font-size: 12.5px; color: var(--text); }
.ms-sh-actions { display: flex; justify-content: flex-end; gap: 2px; padding-right: 8px; }
.ms-sh-actions button {
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--dim);
  display: grid; place-items: center; cursor: pointer;
}
.ms-sh-actions button:hover { background: var(--surface-3); color: var(--text); }
.ms-sh-actions button.is-danger:hover { color: var(--danger); }
.ms-sh-empty { display: grid; justify-items: center; gap: 8px; padding: 48px 20px; color: var(--dim); text-align: center; font-size: 13px; }
.ms-sh-empty.is-small { padding: 22px; }
.ms-sh-empty p { margin: 0; max-width: 46ch; }
.ms-sh-edit { display: grid; gap: 16px; }
.ms-sh-edit-head { display: flex; gap: 11px; align-items: center; min-width: 0; }
.ms-sh-field { display: grid; gap: 6px; }
.ms-sh-hint { font-size: 12px; font-weight: 500; color: var(--dim); line-height: 1.45; margin: 0; }
.ms-sh-hint strong, .ms-sh-strong { color: var(--text); font-size: 13px; }
.ms-sh-input {
  height: 36px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  padding: 0 10px; font: inherit; font-size: 13px; font-weight: 600; width: 100%; min-width: 0;
}
.ms-sh-input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ms-sh-inline { display: flex; gap: 6px; }
.ms-sh-recip { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.ms-sh-recip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-sh-recip button { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--dim); display: grid; place-items: center; cursor: pointer; }
.ms-sh-recip button:hover { background: var(--surface-2); color: var(--text); }
.ms-sh-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ms-sh-switch-row .ms-sh-hint { display: block; }
.ms-switch {
  appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--border-strong); position: relative;
  cursor: pointer; margin: 0; flex: none; transition: background .15s ease;
}
.ms-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s ease;
}
.ms-switch:checked { background: var(--accent); }
.ms-switch:checked::after { transform: translateX(16px); }
.ms-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ms-sh-btn {
  height: 34px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.ms-sh-btn:hover:not([disabled]) { background: var(--surface-2); }
.ms-sh-btn[disabled] { opacity: .45; cursor: default; }
.ms-sh-btn.is-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.ms-sh-btn.is-primary:hover:not([disabled]) { background: var(--accent-strong); }
.ms-sh-btn.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.ms-sh-btn.is-danger:hover { background: var(--danger-soft); }
.ms-sh-btn.is-danger-solid { background: var(--danger); color: var(--bg); border-color: transparent; }
.ms-sh-actions-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-sh-rule { height: 1px; background: var(--border); }
.ms-sh-confirm {
  display: grid; gap: 10px; padding: 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft);
}
.ms-sh-confirm p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; }
@media (max-width: 900px) {
  .ms-sh-row { grid-template-columns: minmax(0, 1fr) 150px 76px; }
  .ms-sh-row > :nth-child(2), .ms-sh-row > :nth-child(3) { display: none; }
}

/* Shared with me: the sharer and when access ends, where Updated and Size were. */
.ms-list-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.ms-listing.is-shared .ms-col-size { width: 170px; }

/* The share dialog: a role that can change where it stands. */
.ms-sh-role {
  height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 0 6px;
}
.ms-sh-edit-link { border: none; background: transparent; color: var(--faint); cursor: pointer; display: flex; padding: 4px; border-radius: 6px; }


/* ── Selecting and opening ──────────────────────────────────────────────── */
/* Read out, not shown: how many are selected, as it changes. */
.ms-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A name is a link to the thing itself. */
.ms-row-name, .ms-tile-name { cursor: pointer; }
.ms-row-name:hover, .ms-tile-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ms-trash .ms-row-name:hover { text-decoration: none; }
.ms-dp-clear {
  justify-self: start; border: 0; background: transparent; padding: 2px 0; color: var(--accent);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* ── The delete question ────────────────────────────────────────────────── */
.ms-del-list { list-style: none; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); display: grid; gap: 5px; }
.ms-del-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; min-width: 0; }
.ms-del-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-del-list .ms-del-more { color: var(--dim); font-weight: 600; }

/* ── Move… (components/MoveDialog.js) ───────────────────────────────────── */
.ms-mv { display: grid; gap: 10px; }
.ms-mv-search {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 19px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.ms-mv-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ms-mv-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; }
.ms-mv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--dim); }
.ms-mv-crumb { display: inline-flex; align-items: center; gap: 4px; }
.ms-mv-crumb button { border: 0; background: transparent; padding: 2px 4px; border-radius: 6px; color: var(--dim); font: inherit; font-weight: 600; cursor: pointer; }
.ms-mv-crumb button:hover { color: var(--text); background: var(--surface-2); }
.ms-mv-crumb strong { color: var(--text); padding: 2px 4px; }
.ms-mv-table { border: 1px solid var(--border); border-radius: 10px; max-height: 300px; overflow: auto; }
.ms-mv-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 150px; align-items: center; min-height: 42px;
  border-top: 1px solid var(--border); cursor: pointer;
}
.ms-mv-row:first-child { border-top: 0; }
.ms-mv-row.is-head { min-height: 32px; cursor: default; position: sticky; top: 0; background: var(--surface); z-index: 1;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.ms-mv-row:not(.is-head):hover { background: var(--surface-2); }
.ms-mv-row.is-chosen { background: var(--accent-ui-subtle); }
.ms-mv-row.is-blocked { opacity: .5; cursor: not-allowed; }
.ms-mv-radio { margin: 0 0 0 12px; accent-color: var(--accent); width: 15px; height: 15px; }
.ms-mv-name { display: flex; align-items: center; gap: 9px; min-width: 0; padding-right: 10px; }
.ms-mv-name button {
  border: 0; background: transparent; padding: 0; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.ms-mv-name button:hover:not([disabled]) { text-decoration: underline; text-underline-offset: 3px; }
.ms-mv-name button[disabled] { cursor: not-allowed; }
.ms-mv-where { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-mv-when { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }
.ms-mv-sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ms-mv-empty { padding: 20px; text-align: center; font-size: 13px; color: var(--dim); }
.ms-mv-to { margin: 0; font-size: 13px; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.ms-mv-to strong { color: var(--text); }
.ms-mv-error { margin: 10px 0 0; font-size: 12.5px; color: var(--danger); line-height: 1.5; }
.ms-mv-resolve { display: grid; gap: 12px; max-height: 380px; overflow: auto; }
.ms-mv-lede { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.55; }
.ms-mv-lede strong { color: var(--text); }
.ms-mv-clash { border: 1px solid var(--border); border-radius: 10px; margin: 0; padding: 8px 12px 10px; display: grid; gap: 6px; }
.ms-mv-clash legend { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 13px; font-weight: 700; }
.ms-mv-choice { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; cursor: pointer; }
.ms-mv-choice input { margin: 2px 0 0; accent-color: var(--accent); }
.ms-mv-choice > span { display: grid; gap: 1px; }
.ms-mv-hint { font-size: 12px; color: var(--dim); line-height: 1.45; margin: 0; }
.ms-mv-all { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ms-mv-all input { accent-color: var(--accent); }
@media (max-width: 560px) { .ms-mv-row { grid-template-columns: 34px minmax(0, 1fr); } .ms-mv-row > :nth-child(3) { display: none; } }

/* ── Versions ────────────────────────────────────────────────────────────
   The vN pill on a row, the "Version history" row in Details, the history
   itself (in Details and beside the viewer), and the banner over an older
   version. The current version is the one card with the accent on it; the
   rest are plain rows, their secondary text in --dim so it still reads. */

.ms-row-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ms-row-line .ms-row-name { min-width: 0; }
.ms-vpill {
  flex: none; position: relative; height: 21px; min-width: 28px; padding: 0 6px; border-radius: 7px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--dim);
  font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
}
.ms-vpill:hover, .ms-vpill:focus-visible { color: var(--accent-strong); border-color: var(--accent); }
.ms-vpill.is-behind { border-style: dashed; color: var(--warn); border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.ms-vpill.is-behind::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ms-vpill.is-static { cursor: default; height: 17px; font-size: 10px; }
.ms-vpill[data-tip]:hover::after, .ms-vpill[data-tip]:focus-visible::after,
.ms-row-pencil[data-tip]:hover::after, .ms-row-pencil[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 5px 8px; border-radius: 7px; background: var(--text); color: var(--bg);
  font-family: 'Manrope', system-ui, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3;
  z-index: 30; pointer-events: none; letter-spacing: 0;
}
.ms-row-pencil {
  flex: none; position: relative; width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent;
  color: var(--dim); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s ease;
}
.ms-row:hover .ms-row-pencil, .ms-row:focus-within .ms-row-pencil, .ms-row-pencil:focus-visible { opacity: 1; }
.ms-row-pencil:hover { background: var(--surface-3); color: var(--text); }
@media (hover: none) { .ms-row-pencil { opacity: 1; } }

.ms-vh-row {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 11px; margin: 0 0 18px;
  border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.ms-vh-row:hover { background: var(--surface-2); }
.ms-vh-row > svg { color: var(--dim); flex: none; }
.ms-vh-row-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; }
.ms-vh-row-text b { font-size: 13px; font-weight: 800; }
.ms-vh-row-text span { font-size: 12.5px; color: var(--dim); font-weight: 600; }

.ms-vh { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* The same 49px as the Details tab bar, so drilling in moves nothing. */
.ms-vh-head { align-items: center; height: 49px; flex: none; }
.ms-vh-back {
  width: 30px; height: 30px; margin-left: -8px; border-radius: 8px; border: 0; background: transparent;
  color: var(--dim); display: grid; place-items: center; cursor: pointer;
}
.ms-vh-back:hover { background: var(--surface-2); color: var(--text); }
.ms-vh-title { margin: 0; font-size: 13.5px; font-weight: 800; outline: none; }
.ms-vh-head .ms-dp-close { margin-bottom: 0; }
.ms-vh-body { padding-top: 12px; }
.ms-vh-list { display: grid; gap: 4px; }
.ms-vh-group {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
  margin: 12px 2px 2px;
}
.ms-vh-group:first-child { margin-top: 2px; }
.ms-vh-item {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px 9px 9px;
  border-radius: 12px; border: 1.5px solid transparent; outline: none; cursor: pointer;
}
.ms-vh-item:hover { background: var(--surface-2); }
.ms-vh-item:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.ms-vh-item.is-current { border-color: var(--accent); background: var(--accent-soft); }
.ms-vh-item.is-viewing:not(.is-current) { background: var(--surface-2); border-color: var(--border-strong); }
.ms-vh-badge {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font: 800 11.5px/1 'JetBrains Mono', ui-monospace, monospace; background: var(--surface-3); color: var(--dim);
  border: 1px solid var(--border);
}
.ms-vh-item.is-current .ms-vh-badge { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ms-vh-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ms-vh-text > :first-child { padding-right: 26px; }
.ms-vh-label { font-size: 12px; font-weight: 800; color: var(--accent-strong); }
.ms-vh-label.is-newer { color: var(--dim); font-weight: 700; font-style: italic; }
.ms-vh-by { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-vh-item.is-current .ms-vh-by { font-weight: 700; }
.ms-vh-when { font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ms-vh-size { white-space: nowrap; }
.ms-vh-comment {
  margin-top: 4px; padding: 5px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; line-height: 1.4; display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere;
}
.ms-vh-item.is-current .ms-vh-comment { background: var(--surface); }
.ms-vh-comment svg { flex: none; margin-top: 2px; color: var(--dim); }
.ms-vh-more-wrap { position: absolute; top: 6px; right: 5px; }
.ms-vh-more {
  width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--dim);
  display: grid; place-items: center; cursor: pointer;
}
.ms-vh-more:hover, .ms-vh-more[aria-expanded="true"] { background: var(--surface-3); color: var(--text); }
.ms-vh-menu { position: fixed; min-width: 232px; z-index: 80; }
.ms-vh-menu button { height: auto; min-height: 36px; padding: 6px 11px; position: relative; }
.ms-vh-menu button:focus { background: var(--surface-2); outline: none; }
.ms-vh-mi { display: grid; gap: 1px; }
.ms-vh-mi small { font-size: 11px; color: var(--dim); font-weight: 600; }
.ms-vh-menu button.is-disabled, .ms-vh-menu button.is-disabled svg { color: var(--faint); cursor: not-allowed; }
.ms-vh-menu button[data-tip]:hover::after, .ms-vh-menu button[data-tip]:focus::after {
  content: attr(data-tip); position: absolute; left: 8px; right: 8px; bottom: calc(100% + 4px);
  padding: 6px 8px; border-radius: 7px; background: var(--text); color: var(--bg);
  font-size: 11px; font-weight: 700; line-height: 1.35; white-space: normal; z-index: 2; pointer-events: none;
}
.ms-vh-only, .ms-vh-note { margin: 12px 2px 0; font-size: 12px; color: var(--dim); line-height: 1.5; }
.ms-vh-only { display: flex; gap: 7px; align-items: center; font-size: 12.5px; }
.ms-vh-skel { display: flex; gap: 10px; padding: 9px; }
.ms-vh-skel i, .ms-vh-skel-badge {
  display: block; border-radius: 7px;
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 300% 100%; animation: msv-shimmer 1.4s ease infinite;
}
.ms-vh-skel-badge { width: 32px; height: 32px; flex: none; border-radius: 9px; }
.ms-vh-skel > span { flex: 1; display: grid; gap: 7px; padding-top: 2px; }
.ms-vh-skel > span i { height: 10px; }
.ms-vh-error { display: grid; justify-items: center; gap: 8px; padding: 26px 8px; text-align: center; color: var(--dim); font-size: 12.5px; }
.ms-vh-error b { color: var(--text); font-size: 13.5px; }
.ms-vh-lock {
  display: grid; gap: 7px; padding: 11px 12px; margin-bottom: 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45;
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
}
.ms-vh-lock b { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ms-vh-lock .ms-dp-unlock { justify-self: start; }
.ms-vh-pane {
  width: 300px; flex: none; border-left: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; min-height: 0; animation: msv-pane .2s ease both;
}
.ms-vh-pane .ms-dp-tabs { padding-left: 18px; }

.ms-vbanner {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 22px 0;
  padding: 9px 10px 9px 14px; border-radius: 12px; font-size: 13px; font-weight: 700;
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
}
.ms-vbanner-text { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; }
.ms-vbanner-text > svg { color: var(--warn); flex: none; }
.ms-vbanner-state { color: var(--dim); font-weight: 600; }
.ms-vbanner-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-vbanner-btn {
  height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; text-decoration: none;
}
.ms-vbanner-btn:hover { background: var(--surface-2); color: var(--text); }
.ms-vbanner-btn.is-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ms-vbanner-btn.is-primary:hover { background: var(--accent-strong); color: var(--on-accent); }

/* Rename: the name, and its extension kept beside it */
.ms-rn-label { display: block; font-size: 12px; font-weight: 800; color: var(--dim); margin-bottom: 6px; }
.ms-rn-req { color: var(--danger); margin-left: 2px; }
.ms-rn-field {
  display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 12px; border-radius: 10px;
  border: 1.5px solid var(--border-strong); background: var(--bg);
}
.ms-rn-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ms-rn-field.is-invalid { border-color: var(--danger); }
.ms-rn-field.is-invalid:focus-within { box-shadow: 0 0 0 3px var(--danger-soft); }
.ms-rn-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; }
.ms-rn-ext { flex: none; color: var(--faint); font-size: 14px; font-weight: 600; }
.ms-rn-msg { min-height: 1.35em; margin: 7px 0 0; font-size: 12.5px; font-weight: 700; color: var(--danger); line-height: 1.4; }
.ms-rn-hint { margin: 2px 0 0; font-size: 12px; color: var(--dim); line-height: 1.45; }
.ms-vc-field {
  width: 100%; min-height: 74px; resize: vertical; border-radius: 10px; border: 1.5px solid var(--border-strong);
  background: var(--bg); color: var(--text); padding: 9px 12px; font: inherit; font-size: 13.5px; outline: none;
}
.ms-vc-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ms-vc-count { text-align: right; font-size: 11.5px; color: var(--dim); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }