/* Design tokens lifted from the Mouseion.dc.html prototype. */
:root {
  --bg: #fbf9f6;
  --surface: #ffffff;
  --sidebar: #f5f1eb;
  --sidebar-hover: #eae3d9;
  --row-hover: #f9f6f2;
  --ink: #1c1a18;
  --ink-soft: #4a423c;
  --muted: #6b645d;
  --faint: #9a928a;
  --fainter: #b3aba2;
  --border: #e4ded6;
  --border-strong: #d8d0c6;
  --border-light: #efeae3;
  --accent: #7a2b2b;
  --accent-hover: #611f1f;
  --accent-bg: #f4e9e7;
  --accent-border: #e8c9c3;
  --accent-soft: #fbf0ee;
  --folder: #e4d6c3;
  --ok: #2f6b4f;
  --warn: #8a5a12;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Libre Franklin', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
input, button, select { font-family: inherit; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hidden { display: none !important; }
.mono { font-family: var(--mono); }
/* This class hides a word from sighted users, but a screen reader and a
   text-based test still reach it. `display: none` hides the word from
   BOTH, so this clips the box instead. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── layout ─────────────────────────────────────────────────────────── */

.shell { display: flex; min-height: 100vh; align-items: stretch; }

.sidebar {
  width: 252px; flex: none; background: var(--sidebar); border-right: 1px solid var(--border);
  padding: 32px 20px; display: flex; flex-direction: column; gap: 36px;
  position: sticky; top: 0; height: 100vh;
}

.brand { display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.brand-mark {
  width: 26px; height: 26px; background: var(--accent); color: var(--bg); border-radius: 3px;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
}
.brand-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.nav { display: flex; flex-direction: column; gap: 2px; }
/* The Admin entry is an <a>, not a <button>, because it navigates to a real
   page: a middle click and a Ctrl-click have to work (the same reason the
   file rows are links). The rule used to name `.nav button` only, so the
   anchor matched NOTHING here: it took the global link colour (the accent
   red), the page's own font size, and no padding at all — which is what
   made it sit out of line with the rows above it. Name both, so a nav item
   looks the same whichever element it is. */
.nav button, .nav a {
  text-align: left; background: transparent; border: none; border-radius: 6px;
  padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--ink);
  font-family: inherit; text-decoration: none; cursor: pointer;
}
/* The colour and the underline are set again for the hover, because the
   global `a:hover` (top of this file) would otherwise put the accent red and
   an underline back on the Admin row, and no sibling does that. No width or
   display here on purpose: a flex item is already blockified and stretched,
   and at 720px the nav turns into a ROW where a width would squash it. */
.nav button:hover, .nav a:hover {
  background: var(--sidebar-hover); color: var(--ink); text-decoration: none;
}
.nav button[aria-current='page'], .nav a[aria-current='page'] {
  background: var(--sidebar-hover);
}

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.signed-in-as { font-size: 12px; color: var(--muted); line-height: 1.5; }
.signed-in-as strong { color: var(--ink); font-weight: 500; display: block; }
.token-state { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 99px; background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.expired { background: var(--accent); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.screen { padding: 56px clamp(24px, 4.5vw, 64px) 96px; max-width: 1120px; width: 100%; }
.screen.detail { padding-top: 40px; }
.screen.narrow { max-width: 820px; }

h1 { margin: 0 0 8px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.lede { margin: 0; font-size: 15px; color: var(--muted); max-width: 52ch; text-wrap: pretty; }

/* ── controls ───────────────────────────────────────────────────────── */

.btn {
  border-radius: 6px; font-size: 14px; cursor: pointer; padding: 12px 18px;
  border: 1px solid transparent; font-weight: 500;
}
.btn-primary { background: var(--accent); color: var(--bg); border: none; font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--border-strong); }
.btn-ghost:hover { color: var(--ink); border-color: var(--accent); }
.btn-dark { background: var(--ink); color: var(--bg); border: none; font-weight: 600; }
.btn-dark:hover { background: #3a3530; }
.btn-danger { background: transparent; border-color: var(--accent-border); color: var(--accent); font-weight: 600; }
.btn-danger:hover { background: var(--accent-soft); }
.btn-sm { padding: 10px 16px; font-size: 13px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* The word of an icon-only button moves to a `.sr-only` span (above).
   This class centres the icon alone in a square-ish box. */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex: none; font-size: 16px;
}

.input {
  width: 100%; padding: 11px 12px; font-size: 14px;
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg);
}
.input.sm { padding: 9px 12px; font-size: 13px; background: var(--surface); }
.field-label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.field-hint { font-size: 12px; color: var(--muted); margin-top: 8px; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 32px; margin-bottom: 24px;
}
.card h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.card p { margin: 0 0 16px; font-size: 13px; color: var(--muted); max-width: 56ch; }

.chip {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  border-radius: 99px; padding: 8px 14px; font-size: 13px; cursor: pointer;
}
.chip[aria-pressed='true'] { background: var(--sidebar-hover); color: var(--ink); border-color: var(--border-strong); }

.perm {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 7px;
  border-radius: 4px; background: var(--accent-bg); color: var(--accent);
}

.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tabs button {
  background: transparent; border: none; padding: 0 0 12px; font-size: 14px; font-weight: 500;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--accent); }

/* ── storage list ───────────────────────────────────────────────────── */

.list-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 36px;
}
.list-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px; flex-wrap: wrap;
}
.list-toolbar .input { width: 240px; margin-bottom: 10px; }

.row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; text-align: left; width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--border-light); padding: 22px 8px; cursor: pointer;
}
.row:hover { background: var(--sidebar); }
.row-main { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 16px; }
.row-name {
  font-size: 16px; font-weight: 500; margin-bottom: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-sub { font-size: 13px; color: var(--muted); }
.row-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.row-meta .muted { font-size: 13px; color: var(--muted); white-space: nowrap; }
.row-meta .faint { font-size: 13px; color: var(--faint); white-space: nowrap; }

/* One grid for the storage list's header and every row (backlogs/
   storage-list-sort.md): Name, Rights, Lifecycle, Created. The last
   three columns have fixed widths, so they line up from row to row.
   The Mine tab shows no rights chips, so its grid has no Rights column
   at all: renderList sets data-rights="off" on #storage-list. */
.storage-grid {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 88px 200px 110px;
  align-items: center; column-gap: 24px;
}
#storage-list[data-rights='off'] .storage-grid { grid-template-columns: 28px minmax(0, 1fr) 200px 110px; }
#storage-list[data-rights='off'] .cell-rights { display: none; }
/* The row is a div on the grid (backlogs/pinned-storages.md): the name
   cell is the button the gates click (`#rows button.row`), and the pin
   is a button of its own. Inside the grid the name button gives up
   `.row`'s own width, padding, and border, as the files table's folder
   button does. */
.storage-row { padding: 22px 8px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
.storage-row:hover { background: var(--sidebar); }
#rows .cell-name { display: flex; align-items: center; gap: 16px; min-width: 0; }
#rows .cell-name.row {
  width: 100%; padding: 0; border: none; background: transparent; justify-content: flex-start;
  flex-wrap: nowrap; font: inherit; color: inherit;
}
.cell-pin { display: flex; align-items: center; justify-content: center; }
.pin {
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px; background: transparent;
  cursor: pointer; font-size: 18px; line-height: 1; color: var(--faint);
}
.pin:hover { color: var(--accent); background: var(--accent-bg); }
.pin[aria-pressed='true'] { color: var(--accent); }
.cell-rights { display: flex; gap: 5px; }
.cell-lifecycle { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-created { font-size: 13px; color: var(--faint); white-space: nowrap; text-align: right; }
@media (max-width: 720px) {
  .storage-grid { grid-template-columns: 28px minmax(0, 1fr) 88px 100px; column-gap: 12px; }
  #storage-list[data-rights='off'] .storage-grid { grid-template-columns: 28px minmax(0, 1fr) 100px; }
  .storage-grid .cell-lifecycle { display: none; }
}

/* ── the pinned rail (backlogs/pinned-storages.md) ─────────────────────
   Quick access to the pinned storages, on the right of every screen. It
   shows only while a pin has a row; below 1100 px it folds away, and the
   pinned rows on top of the list carry the same access. */
.rail {
  width: 236px; flex: none; border-left: 1px solid var(--border); padding: 32px 16px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--bg);
}
.rail-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); padding: 0 8px 12px;
}
.rail-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 8px;
  border: none; border-radius: 6px; background: transparent; cursor: pointer; font: inherit;
  font-size: 14px; color: var(--ink);
}
.rail-item:hover { background: var(--sidebar); }
.rail-item[aria-current='true'] { background: var(--sidebar-hover); }
.rail-item .folder-icon { width: 18px; height: 14px; }
.rail-item .rail-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .rail { display: none; } }

.folder-icon {
  flex: none; width: 26px; height: 21px; background: var(--folder);
  border-radius: 2px 4px 4px 4px; position: relative; display: block;
}
.folder-icon::before {
  content: ''; position: absolute; top: -5px; left: 0; width: 12px; height: 5px;
  background: var(--folder); border-radius: 2px 2px 0 0; display: block;
}

.empty { padding: 64px 8px; text-align: center; }
.empty-title { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.empty-body { font-size: 14px; color: var(--muted); }
.note { margin-top: 20px; font-size: 12px; color: var(--faint); padding-left: 8px; }

/* ── detail ─────────────────────────────────────────────────────────── */

.back {
  background: transparent; border: none; padding: 0; font-size: 13px;
  color: var(--muted); cursor: pointer; margin-bottom: 24px;
}
.back:hover { color: var(--accent); }

.detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 32px; margin-bottom: 8px; flex-wrap: wrap;
}
.detail-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.detail-title-row h1 { margin: 0; }
.detail-pin {
  width: 32px; height: 32px; font-size: 22px; display: inline-flex; align-items: center; justify-content: center;
}
.detail-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-actions { flex: 0 1 300px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.detail-actions .hint { font-size: 12px; color: var(--muted); max-width: 30ch; text-wrap: pretty; }

.status-pill {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 5px 9px;
  border-radius: 4px; background: var(--accent-bg); color: var(--accent);
}
.status-pill.deactivated { background: var(--sidebar-hover); color: var(--muted); }


.grant-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--border-light); flex-wrap: wrap;
}

/* ── files table (grid) ─────────────────────────────────────────────── */
/* One grid-template-columns rule for the header and every data row.
   A folder row and a file row then line up under the same columns. The
   first column holds the multi-select checkbox (backlogs/
   file-multi-select.md); it stays in the grid, empty, for a read-only
   session, so the other five columns never shift. */
.file-grid {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 90px 100px 170px 90px;
  align-items: center; column-gap: 16px;
}
.cell-select { display: flex; align-items: center; justify-content: center; }
.file-head, .storage-head { padding: 12px 20px; border-bottom: 1px solid var(--border-light); background: var(--row-hover); }
.file-head > div, .storage-head > div {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint);
}
.file-head button, .storage-head button {
  background: transparent; border: none; padding: 0; margin: 0; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.file-head button:hover, .storage-head button:hover { color: var(--ink); }
.file-head .sort-mark, .storage-head .sort-mark { font-size: 9px; }
/* The storage list's header sits under the tabs, not in a card: the
   rows' own side padding, and no background of its own. */
.storage-head { padding: 10px 8px; background: transparent; }

#file-rows .grant-row { padding: 14px 20px; }
#file-rows .cell-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
#file-rows .cell-name a, #file-rows .cell-name .row-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; color: inherit; margin: 0;
}
/* The folder name is a button, not a link. It keeps the `.row` class,
   so it still matches what the platform's gates select. Inside the
   grid it must still give up `.row`'s own width, padding, and border. */
#file-rows .cell-name.row {
  width: 100%; min-width: 0; padding: 0; border: none; background: transparent; justify-content: flex-start;
}
#file-rows .cell-name.row:hover { background: transparent; }
#file-rows .cell-name.row:hover .row-name { color: var(--accent); }
#file-rows .cell-name .folder-icon { width: 20px; height: 16px; }

.file-icon {
  flex: none; width: 15px; height: 19px; background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: 2px;
}

.cell-type, .cell-modified {
  font-size: 13px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cell-size { font-size: 13px; color: var(--muted); white-space: nowrap; text-align: right; }

/* The Delete button of a file row stays in the DOM for a writable
   session. A keyboard user can reach it with Tab. It stays out of
   sight until the row gains hover or focus.
   WARNING: Do not use `display: none` or `visibility: hidden` here.
   Both also take a focused button out of the Tab order. Both also
   hide a button that a test clicks by its word. `opacity` alone does
   neither. */
#file-rows .cell-actions .btn { opacity: 0; transition: opacity 0.12s ease; }
#file-rows .grant-row:hover .cell-actions .btn,
#file-rows .grant-row:focus-within .cell-actions .btn { opacity: 1; }

/* ── the Actions menu (multi-select) ───────────────────────────────────
   backlogs/file-multi-select.md: the toolbar's "Actions (N)" button opens
   this menu. `.menu-wrap` gives the absolutely positioned `.menu` a frame
   to sit under. */
.menu-wrap { position: relative; }
.menu {
  position: absolute; top: 100%; left: 0; margin: 6px 0 0; padding: 6px; z-index: 30;
  list-style: none; min-width: 168px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 24px rgba(28, 26, 24, 0.16);
}
.menu li { margin: 0; padding: 0; }
.menu button {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  padding: 9px 10px; font-size: 13px; color: var(--ink); border-radius: 5px; cursor: pointer;
  font-family: inherit;
}
.menu button:hover { background: var(--sidebar); }

/* The destination dialog is a real <dialog>: `showModal()` centers the
   box and supplies the `::backdrop` layer, so `.modal` only sets its
   own box. */
#destination-dialog::backdrop { background: rgba(28, 26, 24, 0.42); }
#destination-dialog[open] { display: flex; flex-direction: column; }
#destination-input { margin-top: 4px; margin-bottom: 4px; }

/* ── token screen ───────────────────────────────────────────────────── */

.token-box { background: var(--ink); border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; }
.token-box code {
  font-family: var(--mono); font-size: 12px; line-height: 1.7;
  color: #f0eae2; word-break: break-all; display: block;
}
.token-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.warn-text { font-size: 12px; color: var(--faint); }
.link-btn {
  background: transparent; border: none; padding: 0; font-size: 12px;
  color: var(--muted); cursor: pointer; text-decoration: underline;
}
.link-btn:hover { color: var(--accent); }
.id-chip {
  font-family: var(--mono); font-size: 13px; background: var(--sidebar);
  border: 1px solid var(--border); border-radius: 6px; padding: 11px 14px;
}

/* ── sign in ────────────────────────────────────────────────────────── */

.signin { min-height: 100vh; display: grid; place-items: center; padding: 48px; }
.signin-card { width: 100%; max-width: 460px; text-align: center; }
.signin-card .brand-mark { width: 34px; height: 34px; font-size: 19px; margin: 0 auto 26px; }
.signin-card h1 { font-size: 26px; margin-bottom: 12px; }
.signin-card p { margin: 0 0 32px; font-size: 15px; color: var(--muted); line-height: 1.6; text-wrap: pretty; }

.alert {
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  border-radius: 10px; padding: 24px; text-align: left;
}
.alert-title { font-size: 15px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.alert p { margin: 0 0 16px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.alert-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.alert-code { font-family: var(--mono); font-size: 12px; color: var(--faint); }

.spinner {
  width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 99px; animation: spin 0.7s linear infinite; display: inline-block;
}
.busy { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; }
.busy span:last-child { font-size: 14px; color: var(--muted); }

/* ── modal ──────────────────────────────────────────────────────────── */

.backdrop {
  position: fixed; inset: 0; background: rgba(28, 26, 24, 0.42);
  display: grid; place-items: center; padding: 32px; z-index: 40;
}
.modal {
  width: 100%; max-width: min(96vw, 1100px); max-height: 88vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 36px; animation: rise 0.18s ease-out;
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 8px; }
.modal-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.modal-close {
  background: transparent; border: none; font-size: 20px; color: var(--faint);
  cursor: pointer; line-height: 1; padding: 2px 6px;
}
.modal-close:hover { color: var(--ink); }
.modal p.lede { margin: 0 0 28px; font-size: 14px; }

.callout {
  background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 24px; font-size: 13px; color: var(--accent); line-height: 1.55;
}
/* Code block.
   Code SCROLLS, it does not wrap: the previous rule used `pre-wrap` with
   `word-break: break-all`, which broke identifiers and string literals at
   arbitrary characters, so a reader could not tell a wrapped line from a real
   one — and copying by eye produced something that would not run. */
.snippet {
  background: var(--ink); border-radius: 8px; margin-bottom: 14px; overflow: hidden;
}
.snippet-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid rgba(240, 234, 226, 0.1);
}
.snippet-lang {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(240, 234, 226, 0.45);
}
.snippet-copy {
  border: 1px solid rgba(240, 234, 226, 0.2); background: transparent;
  color: rgba(240, 234, 226, 0.8); font: inherit; font-size: 12px;
  padding: 4px 12px; border-radius: 5px; cursor: pointer; transition: 0.12s;
}
.snippet-copy:hover { background: rgba(240, 234, 226, 0.1); color: #f0eae2; }

.snippet pre {
  margin: 0; padding: 16px 0; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  color: #f0eae2; white-space: pre; tab-size: 4;
}
.snippet pre:focus-visible { outline: 2px solid rgba(240, 234, 226, 0.35); outline-offset: -2px; }
.snippet .line { display: block; min-height: 1.65em; padding-right: 20px; }
/* The gutter stays put while the code scrolls under it, so a long line never
   costs you your place. `background` is what hides the code passing beneath. */
.snippet .line::before {
  content: attr(data-n);
  position: sticky; left: 0; z-index: 1;
  display: inline-block; width: 2.4em; margin-right: 1.4em;
  padding-left: 16px; text-align: right;
  background: var(--ink); color: rgba(240, 234, 226, 0.26);
  user-select: none; -webkit-user-select: none;
}

.tok-comment { color: #8a8175; font-style: italic; }
.tok-string  { color: #c3d8a0; }
.tok-keyword { color: #e0a3c0; }
.tok-builtin { color: #9fc7de; }
.tok-number  { color: #e3b98c; }

.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--sidebar); padding: 12px 20px; border-radius: 99px;
  font-size: 13px; font-weight: 500; z-index: 60; animation: rise 0.18s ease-out;
  box-shadow: 0 6px 24px rgba(28, 26, 24, 0.18);
}

/* ── Google Drive style Share UI ────────────────────────────────────── */
.share-card {
  padding: 24px;
}
.share-header {
  margin-bottom: 18px;
}
.share-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 8px 6px 12px;
  box-shadow: 0 1px 3px rgba(28, 26, 24, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.share-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.share-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 200px;
}
.share-icon {
  color: var(--muted);
  flex-shrink: 0;
}
.share-input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 8px 0 !important;
  font-size: 14px;
  width: 100%;
}
.share-input:focus,
.share-input:focus-visible {
  outline: none !important;
}
.grant-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(28, 26, 24, 0.12);
  max-height: 260px;
  overflow-y: auto;
  z-index: 1000;
  padding: 6px 0;
}
.grant-autocomplete-dropdown.hidden {
  display: none !important;
}
.grant-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
}
.grant-autocomplete-item:hover,
.grant-autocomplete-item.active {
  background: var(--row-hover);
}
.grant-autocomplete-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
  background: var(--sidebar);
  color: var(--ink);
}
.grant-autocomplete-avatar.group {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}
.grant-autocomplete-avatar.user {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}
.grant-autocomplete-info {
  min-width: 0;
  flex: 1;
}
.grant-autocomplete-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.grant-autocomplete-id {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 2px;
}
.share-btn {
  padding: 8px 18px !important;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  flex-shrink: 0;
}
.share-details-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 2px;
}
.share-perms-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
}
.share-perm-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
}
.share-grant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}
.share-grant-row:last-child {
  border-bottom: none;
}
.share-principal {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.share-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  user-select: none;
}
.share-avatar.group {
  background: var(--sidebar-hover);
  color: var(--ink-soft);
  font-size: 16px;
}
.share-avatar.owner {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}
.share-role-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--row-hover);
  color: var(--ink-soft);
  border: 1px solid var(--border-light);
}
.share-role-badge.owner {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
  font-weight: 600;
}

@media (max-width: 720px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; gap: 20px; padding: 16px 20px; }
  .sidebar-foot { margin-top: 0; margin-left: auto; }
  .nav { flex-direction: row; }
  .screen { padding: 32px 20px 64px; }
}