@font-face {
  font-family: 'Graphik';
  src: url("/fonts/Graphik-Regular-Web.woff2") format('woff2'),
  url("/fonts/Graphik-Regular-Web.woff") format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Graphik';
  src: url("/fonts/Graphik-Medium-Web.woff2") format('woff2'),
  url("/fonts/Graphik-Medium-Web.woff") format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Graphik';
  src: url("/fonts/Graphik-Semibold-Web.woff2") format('woff2'),
  url("/fonts/Graphik-Semibold-Web.woff") format('woff');
  font-weight: 600;
  font-style: normal;
}

:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #8a8a8e;
  --soft: #6b6b6b;
  --line: #e6e6e8;
  --hover: #f3f3f5;
  --accent: #0a6cff;
  --accent-soft: #4390ff;  /* the same blue, lightened like --danger-soft, for outlines on black */
  --menu: #1c1c1e;
  --menu-text: #f5f5f7;
  --danger: #e5243b;       /* matched to --accent in strength, white text passes contrast */
  --danger-soft: #ff5c6c;  /* the same red, lightened for text on the dark menus */
  --font: 'Graphik', -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }

button { font: inherit; color: inherit; padding: 0; }


/* ───────── Sign-in ─────────
   Shared by the client landing page and the admin sign-in. */

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 120px 16px;
  text-align: center;
}
.auth-inner { width: 100%; max-width: 400px; }
.auth h1 { margin: 0 0 12px; font-size: 24px; font-weight: 500; line-height: 28px; }
.auth p { margin: 0 auto 32px; max-width: 340px; color: var(--soft); line-height: 24px; }
.auth form { display: grid; gap: 12px; }
.auth input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  text-align: center;
}
.auth input::placeholder { color: var(--muted); }
.auth input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.auth button {
  height: 48px;
  padding: 0 16px;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.auth button:disabled { opacity: 0.5; cursor: default; }
.auth button.quiet {
  height: auto;
  margin-top: 16px;
  padding: 8px 0;
  color: var(--soft);
  background: transparent;
  font-weight: 400;
}
@media (hover: hover) { .auth button.quiet:hover { color: var(--text); } }
.auth-links { display: flex; justify-content: center; gap: 24px; margin-top: 16px; }
.auth-links button.quiet { margin-top: 0; }
.auth .qr {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 8px;
}
.auth code, .auth pre { font: 13px/1.5 var(--mono); word-break: break-all; }
.auth pre {
  white-space: pre-wrap;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0 0 16px;
  text-align: left;
}
#message { color: var(--danger); min-height: 1.5em; margin: 16px 0 0; }
.auth-message#message { color: var(--muted); }
#message.is-note { color: var(--muted); }


/* ───────── Header ───────── */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 40px;
  z-index: 10;
}
.logo {
  display: block;
  color: var(--text);
  line-height: 0;
}
.logo svg {
  height: 20px;
  width: auto;
  fill: currentColor;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-plain {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.icon-plain[aria-expanded="true"] { background: var(--hover); }
@media (hover: hover) { .icon-plain:hover { background: var(--hover); } }
.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.avatar[aria-expanded="true"] { background: var(--line); }
@media (hover: hover) { .avatar:hover { background: var(--line); } }
/* The photo, or initials when there isn't one, as a 24px circle inside the button */
.avatar img,
.avatar .initials {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.avatar .initials {
  background: var(--text);
  color: var(--bg);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}


/* ───────── Grid ─────────
   16 columns of 80px across 1280px. Each tile spans 3 columns,
   with a quarter column (20px) between tiles and inside them:
   5 × 240 + 4 × 20 = 1280. The preview is 2.5 columns (200px).
   Below 1360px the grid keeps 40px side margins, matching the topbar. */

.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px 20px;
  width: min(1280px, 100% - 80px);
  margin: 0 auto;
  padding: 160px 0 80px;
}
/* The item count sits 80px under the grid, with 160px below it */
.grid-count {
  margin: 0;
  padding: 0 16px 160px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}
@media (max-width: 1080px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; width: auto; padding: 100px 16px 24px; }
  .grid-count { padding-bottom: 140px; }
  .topbar { padding: 0 16px; }
}

.tile {
  position: relative;
  padding: 20px;
  border-radius: 16px;
  text-align: center;
}
.tile:focus-within, .tile.menu-open { background: var(--hover); }
@media (hover: hover) { .tile:hover { background: var(--hover); } }
.tile { user-select: none; -webkit-user-select: none; }
/* Selected: the hover state, outlined in blue */
.tile.is-selected { background: var(--hover); box-shadow: inset 0 0 0 2px var(--accent); }

.tile .preview {
  /* Always square, so portrait and landscape previews shrink together as the
     grid narrows. At full width it's 200px, 2.5 grid columns. */
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: 24px;
}
/* Whatever sits in the square is centered in it and never larger than it.
   Positioning it this way gives every browser a fixed box to measure against,
   so tall images can't stretch the square. */
.tile .preview > * {
  position: absolute;
  inset: 0;
  margin: auto;
}
.tile .preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.type-tile {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
}
.type-tile img.type-icon {
  width: 33%;
  height: 33%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
}
.modal-preview .type-tile img.type-icon { width: 52px; height: 52px; }
/* Anything that previews as a square (square images, type tiles and folders)
   shows at 60% of the preview area, 120px at full size, so it sits optically
   level with portrait and landscape previews. */
.tile .preview .is-square { width: 60%; height: 60%; }
/* Font specimen cards: 60% tall, matching the squares, with the width following
   the letters. In the info modal they're half its height (80px). */
.tile .preview img.specimen-card { width: auto; height: 60%; max-width: 100%; }
.modal-preview img.specimen-card { width: auto; height: 50%; max-width: 100%; }
/* Every file's preview gets the same faint outline. Folders don't. */
.tile .preview > img,
.modal-preview > img,
.type-tile:not(.folder-tile) {
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.type-tile .folder-glyph { width: 40%; height: 40%; color: #fff; }
.modal-preview .type-tile .folder-glyph { width: 64px; height: 64px; }
.tile.is-folder { cursor: default; user-select: none; }


.tile .title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.tile .type, .tile .size { margin: 0; font-size: 13px; }
.tile .size { color: var(--muted); }

.more {
  /* A 32px button around the 20px circle, 14px from the tile's corner */
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  /* The preview is positioned too, so without this a full-width preview covers the button */
  z-index: 1;
}
.more-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c7c7cc;
  color: #fff;
}
.tile:focus-within .more, .tile.menu-open .more { opacity: 1; }
@media (hover: hover) { .tile:hover .more { opacity: 1; } }
@media (hover: hover) { .more:hover { background: rgba(0, 0, 0, 0.06); } }
.tile.menu-open .more { background: rgba(0, 0, 0, 0.06); }
/* Touchscreens can't hover, so the more button appears once a tile is selected.
   Until then it can't be tapped either, so a tap anywhere on the tile selects it. */
@media (hover: none) {
  .more { pointer-events: none; }
  .tile.is-selected .more, .tile.menu-open .more { opacity: 1; pointer-events: auto; }
}

.empty {
  margin: 0;
  padding: 0 16px;
  position: fixed;
  inset: 50% 0 auto 0;
  text-align: center;
  color: var(--muted);
}


/* ───────── Toolbar ───────── */

.toolbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(480px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 0 20px;
  background: #000;
  color: #fff;
  border-radius: 20px;
  z-index: 20;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Controls fade in when the toolbar switches between browsing and selection.
   The animation replays whenever a control goes from hidden to shown. */
.toolbar > * { animation: toolbar-in 0.25s ease 0.05s backwards; }
@keyframes toolbar-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toolbar { transition: none; }
  .toolbar > * { animation: none; }
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 1.0);
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
@media (hover: hover) { .filter-btn:hover { border-color: #fff; } }
/* The chevron points up while the filter menu is closed and turns down while it's open */
.filter-btn .chevron { transition: transform 0.2s ease; }
.filter-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .filter-btn .chevron { transition: none; } }

.text-btn {
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: #8e8e93;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
@media (hover: hover) { .text-btn:hover { color: #fff; } }
#select-count { flex: none; white-space: nowrap; color: #fff; }
.count { flex: 1; color: #8e8e93; font-size: 14px; line-height: 20px; }
.tool-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.tool-btn.add { background: var(--accent); }
#add-btn { margin-left: auto; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.icon-btn[aria-expanded="true"] { background: var(--accent); }
@media (hover: hover) { .icon-btn:hover:not(:disabled) { background: var(--accent); } }
@media (hover: hover) { #trash-btn:hover { background: var(--danger); } }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
/* The selection actions sit together on the right */
#open-btn { margin-left: auto; }
/* With a selection, the toolbar grows from 6 grid columns (480px) to 8 (640px) */
.toolbar:has(#open-btn:not([hidden])) { width: min(640px, calc(100% - 32px)); }
@media (max-width: 720px) {
  .toolbar { padding: 0 12px; }
  /* With a selection, only the action buttons show, spread evenly across the bar.
   Tapping empty space clears the selection. */
  .toolbar:has(#open-btn:not([hidden])) { column-gap: 12px; row-gap: 24px; justify-content: space-between; }
  /* Seven or more actions get crowded in one row, so they stack five to a row instead.
   The chain matches when at least seven buttons are showing. */
  .toolbar:has(.icon-btn:not([hidden]) ~ .icon-btn:not([hidden]) ~ .icon-btn:not([hidden]) ~ .icon-btn:not([hidden]) ~ .icon-btn:not([hidden]) ~ .icon-btn:not([hidden]) ~ .icon-btn:not([hidden])) {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  align-content: center;
  height: auto;
  min-height: 72px;
  padding: 16px 12px;
  }
  #select-count, #select-clear { display: none !important; }
  #open-btn { margin-left: 0; }
  /* Keep messages 20px above a two-row toolbar (120px tall, so its top is at 144px) */
  body:has(.toolbar .icon-btn:not([hidden]) ~ .icon-btn:not([hidden]) ~ .icon-btn:not([hidden]) ~ .icon-btn:not([hidden]) ~ .icon-btn:not([hidden]) ~ .icon-btn:not([hidden]) ~ .icon-btn:not([hidden])) .toast { bottom: 164px; }
}

.toast {
  /* 20px above the toolbar, whose top sits at 96px (24px from the bottom, 72px tall).
     40px tall on one line; a long message wraps and grows instead of overflowing. */
  position: fixed;
  left: 50%;
  bottom: 116px;
  transform: translateX(-50%);
  margin: 0;
  min-height: 40px;
  padding: 10px 20px;
  border-radius: 20px;
  background: var(--menu);
  color: var(--menu-text);
  font-size: 14px;
  line-height: 20px;
  z-index: 50;
  max-width: calc(100% - 32px);
}
.toast.error { background: var(--danger); color: #fff; }


/* ───────── Menus ───────── */

.menu {
  position: fixed;
  min-width: 180px;
  padding: 6px;
  border-radius: 12px;
  background: var(--menu);
  color: var(--menu-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 60;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}
.menu button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px 6px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.menu button:focus-visible { background: var(--accent); color: #fff; outline: none; }
@media (hover: hover) { .menu button:hover { background: var(--accent); color: #fff; outline: none; } }
.menu button.danger { color: var(--danger-soft); }
.menu button.danger:focus-visible { background: var(--danger); color: #fff; }
@media (hover: hover) { .menu button.danger:hover { background: var(--danger); color: #fff; } }
.menu button.is-disabled { opacity: 0.4; cursor: default; }
.menu button.is-disabled:focus-visible { background: transparent; color: inherit; }
@media (hover: hover) { .menu button.is-disabled:hover { background: transparent; color: inherit; } }
.menu button.is-label { opacity: 0.6; cursor: default; }
@media (hover: hover) { .menu button.is-label:hover { background: transparent; } }
.menu .check { display: grid; place-items: center; width: 16px; text-align: center; flex: none; }
.menu .check svg { width: 16px; height: 16px; fill: currentColor; }
.menu-header { padding: 4px 10px 12px 6px; }
.menu-header p { margin: 0; white-space: nowrap; }
.menu-title { font-size: 15px; font-weight: 500; line-height: 20px; }
.menu-subtitle { color: #8e8e93; font-size: 14px; line-height: 20px; }
.menu hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 4px 2px; }


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

.backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.35);
  z-index: 40;
}
.modal {
  position: relative;
  width: min(640px, 100%);
  max-height: min(800px, calc(100vh - 32px));
  overflow: auto;
  padding: 80px;
  border-radius: 20px;
  background: var(--bg);
  text-align: center;
}
@media (max-width: 720px) { .modal { padding: 40px; } }

.close {
  position: absolute;
  top: 24px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f0f0f2;
  color: var(--soft);
  cursor: pointer;
}
@media (hover: hover) { .close:hover { background: #e5e5ea; } }

.modal-preview {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.modal-preview img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.modal-preview .type-tile { width: 160px; height: 160px; font-size: 26px; }

.title-input {
  display: block;
  width: 100%;
  margin: 0 0 4px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: 'Graphik';
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  text-align: center;
}
.info-type { margin: 0 0 20px; font-size: 18px; }
.note-input {
  display: block;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--soft);
  font: 16px/1.6 var(--font);
  text-align: center;
  resize: none;
  overflow: hidden;
}
@media (hover: hover) { .title-input:hover, .note-input:hover { background: var(--hover); } }
.title-input:focus, .note-input:focus { outline: 2px solid var(--accent); background: var(--bg); }
.note-input::placeholder { color: var(--muted); }

.details-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 48px auto 8px;
  max-width: 660px;
  text-align: left;
}
.details-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.save-state { font-size: 13px; color: var(--muted); }
.save-state.error { color: var(--danger); }

.details { max-width: 660px; margin: 0 auto; text-align: left; }
.details .row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 0;
}
.details dt { margin: 0; }
.details dd { margin: 0; color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.tag {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
@media (hover: hover) { .tag:hover { border-color: var(--muted); color: var(--text); } }
.tag[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--bg); }
.tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ───────── Dialogs ───────── */

.dialog {
  width: min(360px, 100%);
  padding: 28px 24px 20px;
  border-radius: 20px;
  background: var(--bg);
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.dialog h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.dialog p { margin: 0 0 20px; color: var(--soft); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.dialog-actions { display: flex; gap: 8px; }
.dialog-actions button { flex: 1; }
.button-primary,
.button-secondary {
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.button-primary { background: var(--accent); color: #fff; }
.button-danger {
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.button-danger:disabled { opacity: 0.4; cursor: default; }
.button-danger:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.button-secondary { background: #f0f0f2; color: var(--text); }
@media (hover: hover) { .button-secondary:hover { background: #e5e5ea; } }
.button-primary:focus-visible,
.button-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#cant-open { z-index: 45; }
.dialog:focus, .modal:focus { outline: none; }


/* ───────── Manage Clients ─────────
   10 grid columns (800px) wide, centered like the file grid. */

.page {
  width: min(800px, 100% - 80px);
  margin: 0 auto;
  padding: 160px 0 200px;
}
@media (max-width: 720px) { .page { width: auto; padding: 100px 16px 160px; } }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.page-title { margin: 0; font-size: 24px; font-weight: 500; line-height: 28px; }
.page-empty { color: var(--muted); }

/* Settings */
.settings-title { margin: 0 0 40px; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}
.section-head h2 { margin: 0; font-size: 18px; font-weight: 500; line-height: 24px; }
#archived-section { margin-top: 64px; }
.client-row.is-archived { color: var(--muted); }
.archived-note {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--hover);
  color: var(--soft);
  font-size: 14px;
}
.archive-actions { display: flex; gap: 8px; }

.client-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 72px 150px 180px;
  gap: 16px;
  align-items: center;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.client-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.client-row:focus-visible { background: var(--hover); outline: none; }
@media (hover: hover) { a.client-row:hover { background: var(--hover); outline: none; } }
.client-head { min-height: 32px; color: var(--muted); font-size: 13px; }
.client-row .is-muted { color: var(--muted); }
@media (max-width: 720px) {
  .client-row { grid-template-columns: minmax(0, 1fr) 140px; padding: 0 8px; }
  .client-row > :nth-child(2), .client-row > :nth-child(3), .client-row > :nth-child(4) { display: none; }
}

/* One client */
.page-name { text-align: left; margin-left: -8px; width: calc(100% + 16px); }
.page-sub { margin: 0; color: var(--muted); font-size: 14px; }
.client-sub { display: flex; align-items: baseline; gap: 16px; }
a.link-btn { text-decoration: none; }
#detail-view .details-head { max-width: none; }
#detail-view .details { max-width: none; }
.section-note { margin: 0 0 12px; color: var(--muted); font-size: 14px; }

.field {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 var(--font);
}
.field::placeholder { color: var(--muted); }
.field:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

.contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 32px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
/* Saved contacts read as text until you hover or click into them */
.contact-list .field { border-color: transparent; }
@media (hover: hover) { .contact-list .field:hover { background: var(--hover); } }
.contact-list .field:focus { background: var(--bg); }
.contact-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; margin-top: 4px; }

.row-remove {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
}
.row-remove:focus-visible { opacity: 1; }
@media (hover: hover) { .contact-row:hover .row-remove { opacity: 1; } }
@media (hover: hover) { .row-remove:hover { background: var(--danger); color: #fff; } }
@media (hover: none) { .row-remove { opacity: 1; } }

.button-primary.small,
.button-secondary.small,
.button-danger.small { padding: 8px 16px; border-radius: 10px; font-size: 15px; }
.button-primary:disabled { opacity: 0.5; cursor: default; }

.link-btn {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  cursor: pointer;
}
@media (hover: hover) { .link-btn:hover { text-decoration: underline; } }
.link-btn.danger { color: var(--danger); }
.engagement-delete { display: block; margin: 8px 0 8px auto; padding: 0; }

.engagement {
  margin-bottom: 16px;
  padding: 16px 24px 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.engagement-title {
  margin: 0 0 4px -8px;
  width: calc(100% + 16px);
  font-size: 18px;
  line-height: 24px;
  text-align: left;
}
.engagement-title::placeholder { color: var(--muted); }
.engagement .row { align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.engagement .row:first-child { border-top: 0; }
.details dd.controls { display: flex; gap: 8px; justify-content: flex-end; }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 30px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a8e' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--text);
  font: 15px/1.4 var(--font);
  cursor: pointer;
}
@media (hover: hover) { .select:hover { border-color: var(--muted); } }
.select:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.select:disabled { color: var(--muted); cursor: default; }
@media (hover: hover) { .select:disabled:hover { border-color: var(--line); } }

.dialog-field { margin: 0 0 20px; }

/* ───────── Account ───────── */

.account-photo-actions { display: flex; align-items: center; gap: 16px; }
.account-details .row { align-items: center; border-top: 1px solid var(--line); }
.account-details .row:first-child { border-top: 0; }
.account-details dd { flex: 0 1 360px; color: var(--muted); }
.account-details dd .field { text-align: left; }
.account-page .details-head, .account-page .details { max-width: none; }


/* ───────── Client view ───────── */

/* Three actions fit in the standard 6-column toolbar, so it doesn't grow */
.client-view .toolbar:has(#open-btn:not([hidden])) { width: min(480px, calc(100% - 32px)); }

/* Get Info is read-only for clients */
.info-title { margin: 0 0 4px; font-size: 24px; font-weight: 500; line-height: 28px; overflow-wrap: anywhere; }
.info-note {
  max-width: 560px;
  margin: 0 auto;
  color: var(--soft);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* View as Client: a bar across the top while the admin is previewing */
.preview-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 40px;
  padding: 0 16px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
}
.preview-bar a { color: #fff; font-weight: 500; text-decoration: underline; }
.is-previewing .topbar { top: 40px; }
.is-previewing .grid { padding-top: 200px; }
@media (max-width: 720px) { .is-previewing .grid { padding-top: 140px; } }


/* ───────── Sidebar pages (Settings, Account) ─────────
   On the same 16-column grid as the files view, the page fills the middle 12
   columns (two empty on each side): the sidebar takes 3, then a 1-column gap,
   then 8 for the content. */

.page.with-sidebar {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  align-items: start;
  width: min(1280px, 100% - 80px);
}
.page-sidebar { grid-column: 3 / 6; position: sticky; top: 160px; }
.page-content { grid-column: 7 / 15; min-width: 0; }
@media (max-width: 1080px) {
  .page-sidebar { grid-column: 1 / 5; }
  .page-content { grid-column: 6 / 17; }
}
@media (max-width: 720px) {
  .page.with-sidebar { display: block; width: auto; }
  .page-sidebar { position: static; margin-bottom: 48px; }
}

.sidebar-avatar {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 28px;
  font-weight: 500;
  line-height: 32px;
}
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-title,
.sidebar-name-text { margin: 0; font-size: 20px; font-weight: 500; line-height: 28px; overflow-wrap: anywhere; }
.sidebar-name {
  margin: 0 0 0 -8px;
  width: calc(100% + 16px);
  font-size: 20px;
  line-height: 28px;
  text-align: left;
}
.sidebar-link { display: inline-block; margin-top: 8px; padding: 0; font-size: 14px; }
.sidebar-nav { display: flex; flex-direction: column; align-items: flex-start; margin-top: 40px; }
.sidebar-nav a { color: var(--text); text-decoration: none; line-height: 32px; }
@media (hover: hover) { .sidebar-nav a:hover { color: var(--accent); } }

.page-content .details-head { max-width: none; scroll-margin-top: 160px; }
.page-content .details-head.is-first { margin-top: 0; }
.page-content .details { max-width: none; }
.page-content .section-head { scroll-margin-top: 160px; }

/* The client list in the narrower content column */
.page.with-sidebar .client-row { grid-template-columns: minmax(0, 1fr) 64px 48px 112px 168px; gap: 12px; padding: 0 12px; }
@media (max-width: 720px) {
  .page.with-sidebar .client-row { grid-template-columns: minmax(0, 1fr) 140px; }
}

/* ───────── Breadcrumb ─────────
   A pill in the center of the header showing the whole path to where you are.
   Very long paths fold their middle into "…", which opens on hover or tap. */

.breadcrumb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  max-width: calc(100% - 240px);
  height: 32px;
  padding: 0 16px;
  border-radius: 16px;
  background: #f7f7f9;
  color: #666;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
.crumb {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  border: 0;
  background: none;
  color: #666;
  font: inherit;
}
button.crumb { cursor: pointer; }
@media (hover: hover) { button.crumb:hover { text-decoration: underline; } }
button.crumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.crumb-sep { flex: none; margin: 0 8px 0 9px; }
.crumb-fold { display: inline-flex; align-items: center; }
.crumb-trail {
  display: inline-flex;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
.crumb-trail-inner { display: inline-flex; align-items: center; }
.breadcrumb.is-expanded .crumb-trail,
.breadcrumb:focus-within .crumb-trail { max-width: var(--trail-width, 600px); opacity: 1; }
.breadcrumb.is-expanded .crumb-fold,
.breadcrumb:focus-within .crumb-fold { display: none; }
@media (hover: hover) {
  .breadcrumb:hover .crumb-trail { max-width: var(--trail-width, 600px); opacity: 1; }
  .breadcrumb:hover .crumb-fold { display: none; }
}
@media (prefers-reduced-motion: reduce) { .crumb-trail { transition: none; } }
@media (max-width: 720px) { .breadcrumb { max-width: calc(100% - 120px); } }


/* ───────── Pinned ─────────
   A black band above the grid, as wide as the grid, holding just the previews.
   Tiles work like the grid's tiles (same padding, radius, columns and gaps),
   with dark colors and no copy. The preview area is square, like the grid's. */

.pinned {
  width: min(1280px, 100% - 80px);
  margin: 160px auto 0;
  padding: 20px;
  border-radius: 20px;
  background: #000;
}
.pinned-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px 20px;
}
.pinned-grid .tile:focus-within,
.pinned-grid .tile.menu-open,
.pinned-grid .tile.is-selected { background: #191919; }
@media (hover: hover) { .pinned-grid .tile:hover { background: #191919; } }
.pinned-grid .preview { margin: 0; }
.pinned-grid .tile.is-selected { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.pinned-grid .more-icon { background: #444; color: #000; }
@media (hover: hover) { .pinned-grid .more:hover { background: #333; } }
.pinned-grid .tile.menu-open .more { background: #333; }
.pinned-grid .title,
.pinned-grid .type,
.pinned-grid .size { display: none; }
/* Type and folder tiles are a shade lighter so they show on black */
.pinned-grid .type-tile { background: #2c2c2e; }
.pinned:not([hidden]) + .grid { padding-top: 80px; }
.is-previewing .pinned { margin-top: 200px; }
@media (max-width: 1080px) { .pinned-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .pinned { width: auto; margin: 100px 16px 0; padding: 12px; border-radius: 16px; }
  .pinned-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .pinned:not([hidden]) + .grid { padding-top: 40px; }
  .is-previewing .pinned { margin-top: 140px; }
}


/* ───────── Share page ─────────
   What a recipient sees at /s/{token}. The note sits where the grid's top
   padding would start, and the toolbar only appears while selecting. */

.share-note {
  width: min(1280px, 100% - 80px);
  margin: 0 auto;
  padding-top: 160px;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}
.share-note:not([hidden]) + .grid { padding-top: 40px; }
.share-view .toolbar { width: min(320px, calc(100% - 32px)); }
.share-view .toolbar #select-clear { margin-right: auto; }

@media (max-width: 720px) {
  .share-note { width: auto; padding: 100px 16px 0; }
  .share-note:not([hidden]) + .grid { padding-top: 32px; }
}


/* ───────── Settings: shared links ───────── */

.share-settings { margin-bottom: 16px; }
.share-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 20px;
}
.share-main { display: grid; min-width: 0; }
.share-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-meta { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-status { color: var(--muted); white-space: nowrap; }
.share-actions { display: flex; gap: 12px; }
.share-row.is-ended .share-title { color: var(--muted); font-weight: 400; }
.share-row.is-ended .share-status { grid-column: 2 / -1; text-align: right; }
.share-row.is-ended .share-actions { display: none; }
#share-more { margin-top: 8px; }
@media (max-width: 720px) {
  .share-row { grid-template-columns: minmax(0, 1fr) auto; }
  .share-actions { grid-column: 1 / -1; }
}