/* ==========================================================================
   My Vault — the visitor's own page
   Loads after style.css and only adds what the library does not already have.
   Cards, toolbar, chips and sections are the library's, deliberately: this is
   the same shelf seen from the other side, not a second design.
   ========================================================================== */

.vault-head {
  padding-block: clamp(38px, 6vw, 68px) clamp(6px, 1.5vw, 14px);
}
.vault-head h1 {
  font-family: "Bricolage Grotesque", Archivo, system-ui, sans-serif;
  font-size: clamp(38px, 6.4vw, 68px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}
.vault-summary {
  margin-top: 14px;
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: 16.5px;
}
.vault-summary strong { color: var(--ink); font-weight: 640; }
.vault-note { color: var(--ink-3); }

/* --- Empty state --------------------------------------------------------
   The first thing most people will ever see here, so it teaches the gesture
   instead of apologising. The demo card is a still of the real card. */
.vault-empty { padding-block: clamp(20px, 2.6vw, 32px) clamp(30px, 4vw, 56px); }

/* The page opens with a heading and a one-line summary, so the first section
   under it does not also need the full between-sections gap. Stacked, the two
   left ~120px of dead space directly under the count. */
#vaultBody > .section:first-child { padding-top: clamp(22px, 3vw, 40px); }
.vault-empty + #data,
#vaultBody + #data { padding-top: clamp(34px, 4.5vw, 64px); }

.vault-empty-card {
  max-width: 560px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--glass-a), var(--glass-b));
  box-shadow: var(--lift-glass);
}
.vault-empty-card h2 {
  font-size: clamp(23px, 2.8vw, 30px);
  font-weight: 620;
  letter-spacing: -0.028em;
}
.vault-empty-card > p {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}
.vault-empty-card .btn { margin-top: 22px; }

.vault-empty-demo { margin-top: 24px; }
.vault-demo-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--lift-1);
}
.vault-demo-logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 9px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}
.vault-demo-text { display: grid; gap: 1px; min-width: 0; }
.vault-demo-text strong { font-size: 14.5px; font-weight: 600; }
.vault-demo-text span { color: var(--ink-3); font-size: 12.5px; }
.vault-demo-fav {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.vault-demo-fav .icon { width: 16px; height: 16px; fill: currentColor; }

/* A single authored moment on this page: the heart the copy points at
   beats twice, once, on arrival. Nothing else animates. */
@media (prefers-reduced-motion: no-preference) {
  .vault-demo-fav { animation: vault-beat 1600ms var(--ease) 600ms 2; }
}
@keyframes vault-beat {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.13); }
  36% { transform: scale(1); }
}

/* --- Search field inside the toolbar ------------------------------------ */
.vault-field-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 320px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.vault-field-search .icon { width: 16px; height: 16px; color: var(--ink-3); }
.vault-field-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 14px/1 Archivo, system-ui, sans-serif;
}
.vault-field-search input::placeholder { color: var(--ink-3); }
.vault-field-search input:focus { outline: none; }
.vault-field-search input::-webkit-search-cancel-button { display: none; }
.vault-field-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* --- Recently viewed ---------------------------------------------------
   A row, not a grid. These are weaker signals than a save and should not
   take the same visual weight as the shelf above them. */
.recent-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.recent-item:hover { border-color: var(--line-strong); background: var(--surface-sunk); }
.recent-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  color: var(--ink);
  text-decoration: none;
}
.recent-link .logo { flex: none; }
.recent-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 560;
}
.recent-save {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.recent-save .icon { width: 16px; height: 16px; }
.recent-save:hover {
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.recent-save:hover .icon { fill: currentColor; }

/* --- Saved searches ----------------------------------------------------- */
.saved-searches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.saved-search {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--fast) var(--ease);
}
.saved-search:hover { border-color: var(--accent); }
.saved-search-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 6px 9px 15px;
  color: var(--ink);
  text-decoration: none;
}
.saved-search-label { font-size: 13.5px; font-weight: 600; }
.saved-search-filters { color: var(--ink-3); font-size: 12px; }
.saved-search-remove {
  display: grid;
  place-items: center;
  width: 32px;
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.saved-search-remove .icon { width: 13px; height: 13px; }
.saved-search-remove:hover { background: var(--surface-sunk); color: var(--ink); }

/* --- Your data ---------------------------------------------------------- */
.data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.data-status {
  margin-top: 14px;
  min-height: 1.4em;
  color: var(--ink-2);
  font-size: 14px;
}

/* Destructive, and it says so. Text weight rather than a red fill, because
   a solid red button next to two neutral ones reads as the primary action. */
.btn-danger {
  --btn-ink: #b3261e;
  --btn-line: var(--line-strong);
}
:root[data-theme="dark"] .btn-danger { --btn-ink: #ff8a80; }
.btn-danger:hover {
  --btn-bg: #fdeceb;
  --btn-line: #e6a19c;
}
:root[data-theme="dark"] .btn-danger:hover {
  --btn-bg: #3a1c1a;
  --btn-line: #6b3230;
}

#confirmDialog { max-width: 460px; }
#confirmDialog .modal-body { padding: 26px 28px 24px; }
#confirmDialog h2 { font-size: 21px; font-weight: 620; letter-spacing: -0.02em; }
#confirmDialog .modal-desc { margin-top: 10px; font-size: 14.5px; line-height: 1.6; }
#confirmDialog .modal-actions { margin-top: 22px; display: flex; gap: 10px; }

@media (max-width: 620px) {
  .vault-field-search { max-width: none; }
  .data-actions .btn { flex: 1 1 100%; }
  #confirmDialog .modal-actions { flex-direction: column; }
}