/* The Admin button in the account chip shares the header pill style in vault/index.html. */

/* Admin page (admin.js). Uses the Aurora tokens from aurora.css, with
   fallbacks so it still reads if that sheet changes. */
.adm {
  --adm-ink: var(--ink, #1d1d1f);
  --adm-soft: var(--ink-soft, #55555c);
  --adm-faint: var(--ink-faint, #86868b);
  --adm-surface: var(--surface, #fff);
  --adm-surface-2: var(--surface-2, #f4f4f7);
  --adm-border: var(--border, #e8e8ed);
  --adm-accent: var(--accent-2, #3b5bdb);
  --adm-accent-soft: oklch(94% .03 262);
  --adm-bar: oklch(60% .13 262);
  font-family: Manrope, system-ui, sans-serif;
  color: var(--adm-ink);
}
.adm h2 { font: 700 22px/1.2 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.01em; }
.adm h3 { font: 700 15px/1.3 'Space Grotesk', system-ui, sans-serif; display: inline-flex; align-items: center; gap: 8px; }
.adm h3 span, .adm-chip span { font: 600 12px Manrope, system-ui, sans-serif; color: var(--adm-faint); }
.adm-head p, .adm-help { color: var(--adm-soft); font-size: 13px; margin-top: 2px; }
.adm-help { margin: 6px 0 0; }
.adm-muted { color: var(--adm-faint); font-size: 12px; }
.adm small { display: block; color: var(--adm-faint); font-size: 12px; font-weight: 500; }

.adm-tabs { display: flex; gap: 4px; margin: 16px 0; padding: 4px; background: var(--adm-surface-2); border-radius: 12px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tab { appearance: none; border: 0; background: transparent; color: var(--adm-soft); font: 600 13px Manrope, system-ui, sans-serif; padding: 8px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.adm-tab[aria-selected="true"] { background: var(--adm-surface); color: var(--adm-ink); box-shadow: 0 1px 3px oklch(30% .02 275 / .12); }
.adm-badge { min-width: 18px; padding: 1px 6px; border-radius: 9px; background: var(--adm-accent); color: #fff; font-size: 11px; text-align: center; }

.adm-card, .adm-section, .adm-tile { background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: 14px; }
.adm-card { padding: 14px 16px; }
.adm-section { padding: 16px; margin-top: 14px; }
.adm-note { background: oklch(97% .04 85); border: 1px solid oklch(85% .08 85); border-radius: 12px; padding: 12px 14px; font-size: 13px; margin-bottom: 14px; }
.adm-empty { color: var(--adm-soft); padding: 24px; text-align: center; border: 1px dashed var(--adm-border); border-radius: 14px; }

.adm-btn { appearance: none; border: 1px solid var(--adm-border); background: var(--adm-surface); color: var(--adm-ink); border-radius: 9px; padding: 7px 12px; font: 600 13px Manrope, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.adm-btn:hover { border-color: var(--adm-faint); }
.adm-btn:disabled { opacity: .55; cursor: default; }
.adm-btn-primary { background: var(--adm-accent); border-color: var(--adm-accent); color: #fff; }
.adm-btn-quiet { color: var(--adm-soft); }
.adm button:focus-visible, .adm input:focus-visible, .adm select:focus-visible, .adm textarea:focus-visible, .adm-bar:focus-visible { outline: 2px solid var(--adm-accent); outline-offset: 2px; }
.adm input, .adm select, .adm textarea { font: 500 13px Manrope, system-ui, sans-serif; color: var(--adm-ink); background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: 9px; padding: 7px 10px; }
.adm-status-line { font-size: 12px; color: var(--adm-soft); }

/* Feedback */
.adm-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip { appearance: none; border: 1px solid var(--adm-border); background: var(--adm-surface); color: var(--adm-soft); border-radius: 999px; padding: 5px 11px; font: 600 12.5px Manrope, system-ui, sans-serif; cursor: pointer; }
.adm-chip[aria-pressed="true"] { background: var(--adm-accent-soft); border-color: var(--adm-accent); color: var(--adm-ink); }
.adm-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--adm-soft); }
.adm-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.adm-feedback-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.adm-feedback-top time { margin-left: auto; color: var(--adm-faint); font-size: 12px; }
.adm-who span { color: var(--adm-faint); }
.adm-kind { text-transform: capitalize; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--adm-surface-2); color: var(--adm-soft); }
.adm-kind-bug { background: oklch(95% .03 25); color: oklch(45% .12 25); }
.adm-kind-idea { background: oklch(95% .03 262); color: oklch(42% .12 262); }
.adm-message { white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0 12px; font-size: 14px; line-height: 1.55; }
.adm-triage { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.adm-triage label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--adm-soft); }
.adm-note-field { flex: 1 1 260px; }
.adm-note-field textarea { width: 100%; resize: vertical; min-height: 38px; }
.adm-feedback > small { margin-top: 8px; }

/* Access */
.adm-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.adm-grid-2 > .adm-section { margin-top: 14px; }
.adm-form label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.adm-field-row { display: flex; gap: 8px; }
.adm-field-row input { flex: 1; min-width: 0; }
.adm-request { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--adm-border); font-size: 13px; }
.adm-request:first-child { border-top: 0; }
.adm-request > div:first-child { flex: 1 1 200px; }
.adm-request .adm-status-line { flex-basis: 100%; }
.adm-row-actions { display: flex; gap: 6px; }
.adm-scroll { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table-wrap { max-width: 100%; overflow-x: auto; }
.adm-table-wrap small { overflow-wrap: anywhere; }
.adm-acquisition-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
.adm-acquisition-form label, .adm-filters label { display: grid; gap: 4px; font-size: 12px; }
.adm-acquisition-form [hidden] { display: none; }
.adm-acquisition-form button { align-self: end; }
.adm-table th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--adm-faint); text-transform: uppercase; letter-spacing: .03em; padding: 6px 8px; border-bottom: 1px solid var(--adm-border); white-space: nowrap; }
.adm-table td { padding: 10px 8px; border-bottom: 1px solid var(--adm-border); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table .adm-num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-drawer { padding: 12px 14px; margin-top: 12px; background: var(--adm-surface-2); border-radius: 12px; }
.adm-drawer[hidden] { display: none; }
.adm-connected { color: var(--adm-soft); font-size: 12.5px; }

/* People */
.adm-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.adm-toolbar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.adm-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.adm-section-head .adm-row-actions { flex-wrap: wrap; }
.adm-people td { font-size: 13px; }
.adm-people th { vertical-align: bottom; }
.adm-sort { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.adm-sort:hover { color: var(--adm-ink); }
.adm-people th[aria-sort] .adm-sort { color: var(--adm-accent); }
.adm-people th[aria-sort] .adm-sort::after { content: " ↓"; }
.adm-people .adm-person-cell { min-width: 210px; }
.adm-people td[data-label="Last seen"] { white-space: nowrap; }
.adm-actions-cell { text-align: right; }
.adm-actions-cell .adm-row-actions { justify-content: flex-end; }
.adm-actions-cell .adm-status-line { display: block; }
.adm-empty-row { color: var(--adm-soft); text-align: center; padding: 24px 8px; }
a.adm-btn { display: inline-block; text-decoration: none; }

/* One person: name button in the table, then a side panel */
.adm-person-name { appearance: none; border: 0; background: none; padding: 0; font: 700 14px Manrope, system-ui, sans-serif; color: var(--adm-ink); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.adm-person-name:hover { color: var(--adm-accent); text-decoration: underline; }
.adm-panel-backdrop { position: fixed; inset: 0; z-index: 300; background: oklch(20% .02 275 / .35); display: flex; justify-content: flex-end; }
.adm-panel { width: min(560px, 100%); height: 100%; overflow-y: auto; background: var(--adm-surface); box-shadow: -8px 0 30px oklch(20% .02 275 / .2); padding: 20px; box-sizing: border-box; }
.adm-panel header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.adm-panel h3 { font-size: 18px; }
.adm-panel h4 { font: 700 14px/1.3 'Space Grotesk', system-ui, sans-serif; margin: 0; }
.adm-panel-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.adm-panel-stats div { background: var(--adm-surface-2); border-radius: 10px; padding: 8px 10px; }
.adm-panel-stats span { display: block; font-size: 11.5px; color: var(--adm-soft); font-weight: 600; }
.adm-panel-stats strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.adm-panel-activity { margin-top: 16px; border-top: 1px solid var(--adm-border); padding-top: 14px; }
.adm-panel-activity .adm-section-head { margin-bottom: 4px; }
.adm-act-day { margin: 16px 0 6px !important; font-size: 12px !important; color: var(--adm-faint); text-transform: uppercase; letter-spacing: .03em; }
.adm-act, .adm-log { list-style: none; margin: 0; padding: 0; }
.adm-act li { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--adm-border); font-size: 13px; }
.adm-act time { color: var(--adm-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.adm-act small { display: inline; }
.adm-act-card a { color: var(--adm-accent); }
.adm-log li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--adm-border); font-size: 13px; }
.adm-log li:first-child { border-top: 0; }
.adm-log time { color: var(--adm-faint); font-size: 12px; white-space: nowrap; }
@media (max-width: 560px) {
  .adm-panel { padding: 16px; }
  .adm-panel-stats { grid-template-columns: repeat(2, 1fr); }
  .adm-act li { grid-template-columns: 52px 1fr; }
  .adm-act li .adm-pill { grid-column: 2; justify-self: start; }
}

/* Overview */
.adm-todo-section { margin-top: 0; margin-bottom: 14px; }
.adm-todo { gap: 0; }
.adm-person { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.adm-person strong { font-size: 14px; }
.adm-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--adm-accent-soft); color: var(--adm-accent); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.adm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.adm-pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--adm-surface-2); color: var(--adm-soft); white-space: nowrap; }
.adm-pill-active { background: oklch(95% .04 150); color: oklch(40% .1 150); }
.adm-pill-requested { background: oklch(95% .05 85); color: oklch(42% .1 70); }
.adm-pill-removed { color: var(--adm-faint); }
.adm-pill-admin { background: var(--adm-accent-soft); color: var(--adm-accent); }
.adm .vh-delete-confirm { margin-top: 6px; }

/* Builders */
.adm-filters .adm-help { margin: 0; flex: 1 1 260px; }
.adm-help a, .adm-who a { color: var(--adm-accent); }
.adm-who a { font-weight: 500; overflow-wrap: anywhere; }
.adm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.adm-pill-interest { background: var(--adm-accent-soft); color: var(--adm-accent); }
.adm-builder .adm-message { margin-bottom: 8px; }

/* Usage */
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.adm-tile { padding: 14px 16px; }
.adm-tile-label { font-size: 12.5px; color: var(--adm-soft); font-weight: 600; }
.adm-tile-value { font: 600 28px/1.2 Manrope, system-ui, sans-serif; margin-top: 4px; }
.adm-tile-note { font-size: 12px; color: var(--adm-faint); margin-top: 2px; }
.adm-chart { position: relative; display: flex; gap: 8px; height: 140px; margin-top: 14px; }
.adm-chart-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--adm-faint); text-align: right; min-width: 16px; }
.adm-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--adm-border); }
.adm-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.adm-bar span { display: block; width: 100%; max-width: 24px; min-height: 0; background: var(--adm-bar); border-radius: 4px 4px 0 0; }
.adm-bar:hover span, .adm-bar:focus span { background: var(--adm-accent); }
.adm-chart-x { display: flex; justify-content: space-between; margin-left: 24px; font-size: 11px; color: var(--adm-faint); margin-top: 4px; }
.adm-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); background: var(--adm-ink); color: var(--adm-surface); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; }
.adm-table-view { margin-top: 10px; font-size: 13px; }
.adm-table-view summary { cursor: pointer; color: var(--adm-soft); }

/* Phones: each person becomes a small card, each cell labelled. */
@media (max-width: 720px) {
  .adm-people, .adm-people tbody, .adm-people tr, .adm-people td { display: block; }
  .adm-people thead { display: none; }
  .adm-people tr { padding: 12px 0; border-bottom: 1px solid var(--adm-border); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .adm-people tr:last-child { border-bottom: 0; }
  .adm-people td, .adm-people td.adm-num { padding: 0; border: 0; text-align: left; }
  .adm-people td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--adm-faint); text-transform: uppercase; letter-spacing: .03em; }
  .adm-people .adm-person-cell, .adm-people .adm-actions-cell, .adm-people .adm-connected, .adm-people .adm-empty-row { grid-column: 1 / -1; }
  .adm-actions-cell .adm-row-actions { justify-content: flex-start; }
  .adm-actions-cell:has(.adm-row-actions:empty) { display: none; }
  .adm-toolbar select { flex: 1 1 140px; }
}
@media (max-width: 560px) {
  .adm-tabs { width: 100%; }
  .adm-tab { flex: 1; justify-content: center; padding: 8px 10px; }
  .adm-tile-value { font-size: 24px; }
  .adm-feedback-top time { margin-left: 0; }
}
/* Five tabs on the narrowest phones. */
@media (max-width: 420px) {
  .adm-tab { padding: 8px 5px; gap: 4px; font-size: 12.5px; }
}