/* Admin-specific styles. Inherits design tokens from /assets/css/style.css. */

.admin {
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  font-family: var(--font-sans);
}

.admin-header {
  position: sticky;
  top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1.25rem;
  background: var(--bg-3, var(--bg-3));
  border-bottom: 1px solid var(--rule);
}
.admin-header__brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; letter-spacing: var(--tracking-snug, -0.01em);
}
.admin-header__brand .brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--accent, #3d5a4a); color: var(--accent-fg, #fff);
  border-radius: var(--radius-sm, 6px);
  font-size: .75rem; font-weight: 700;
}
.admin-header__tabs {
  display: flex; gap: .25rem; align-items: center; flex: 1;
  margin: 0 1.5rem;
}
.admin-header__tabs a {
  padding: .35rem .7rem; border-radius: var(--radius-sm, 6px);
  color: var(--fg-2); border: none;
  font-size: 0.875rem; font-weight: 500;
}
.admin-header__tabs a:hover { background: var(--bg-2); color: var(--fg); border: none; }
.admin-header__tabs a[aria-current="page"] {
  background: var(--bg-2); color: var(--fg);
}

.admin-shell__loading { color: var(--fg-2); padding: 2rem; }

@media (max-width: 720px) {
  .admin-header { flex-wrap: wrap; }
  .admin-header__tabs { order: 3; flex: 1 0 100%; margin: .5rem 0 0; }
}

.admin-header__right { display: flex; align-items: center; gap: .75rem; font-size: var(--fs-small); }
.admin-header__user { color: var(--fg-2); }
.admin-header__home { color: var(--fg-2); border: none; }
.admin-header__home:hover { color: var(--fg); border: none; }

.admin-main {
  padding: 1.5rem 1.25rem 4rem;
  max-width: 1280px; margin: 0 auto;
}
.admin-view { width: 100%; }

/* Login */
.admin-view--login {
  display: flex; justify-content: center; padding-top: 4rem;
}
.admin-login {
  max-width: 360px; width: 100%;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 2rem;
  background: var(--bg-3, var(--bg-3));
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.admin-login h1 { font-size: 1.5rem; margin: 0; }
.admin-login__hint { color: var(--fg-2); font-size: var(--fs-small); margin: -.5rem 0 0; }
.admin-login label { display: flex; flex-direction: column; gap: .35rem; font-size: var(--fs-small); color: var(--fg-2); }
.admin-login input,
.admin-newform input,
.admin-editor textarea {
  width: 100%; padding: .55rem .7rem;
  background: var(--bg-3, var(--bg-3));
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 6px);
  font: inherit;
}
.admin-login input:focus,
.admin-newform input:focus,
.admin-editor textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(61, 90, 74, .12));
}
.admin-login__error {
  color: var(--danger, #c53030); margin: 0; font-size: var(--fs-small);
  min-height: 1.2em;
}

/* Dashboard layout */
.admin-dashboard {
  display: grid;
  grid-template-columns: 220px minmax(280px, 360px) 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 960px) {
  .admin-dashboard { grid-template-columns: 1fr; }
}

.admin-sidebar {
  background: var(--bg-3, var(--bg-3));
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem;
  position: sticky; top: 80px;
}
.admin-sidebar h2 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-3, var(--fg-2)); margin: 0 0 .5rem;
}
.admin-sidebar ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .15rem; }
.admin-sidebar button {
  width: 100%; text-align: left; padding: .45rem .6rem;
  background: transparent; color: var(--fg);
  border: 1px solid transparent; border-radius: var(--radius-sm, 6px);
  font: inherit; cursor: pointer;
  font-size: .875rem;
}
.admin-sidebar button:hover { background: var(--bg-2); }
.admin-sidebar button[aria-current="true"] {
  background: var(--bg-2); color: var(--fg); font-weight: 500;
}
.admin-sidebar__new {
  width: 100%;
  padding: .5rem .75rem;
  background: var(--fg); color: var(--bg);
  border: 1px solid var(--fg);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer; font-weight: 500;
}
.admin-sidebar__new:hover { background: color-mix(in srgb, var(--fg) 88%, var(--accent)); }

/* File list */
.admin-list {
  background: var(--bg-3, var(--bg-3));
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem;
  min-height: 200px;
}
.admin-list__header h2 { font-size: 1rem; margin: 0; letter-spacing: var(--tracking-snug, -0.01em); }
.admin-list__meta { color: var(--fg-2); font-size: var(--fs-small); margin: .25rem 0 1rem; }
.admin-list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.admin-list li > .admin-file-row__btn,
.admin-list li > button:not(.admin-file-row__publish):not(.admin-file-row__badge) {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: .55rem .75rem;
  background: transparent; color: var(--fg);
  border: 1px solid transparent; border-radius: var(--radius-sm, 6px);
  font: inherit; font-size: .875rem; cursor: pointer; text-align: left;
}
.admin-list li > .admin-file-row__btn:hover,
.admin-list li > button:not(.admin-file-row__publish):hover { background: var(--bg-2); }
.admin-list li > .admin-file-row__btn[aria-current="true"],
.admin-list li > button[aria-current="true"] { background: var(--bg-2); border-color: var(--rule-strong, var(--rule)); }
.admin-list .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-list .file-size { color: var(--fg-3, var(--fg-2)); font-size: 0.7rem; }

/* Group headers + draft rows in the file list. */
.admin-file-group {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3, var(--fg-2));
  padding: .75rem .25rem .25rem;
  margin-top: .35rem;
  border-top: 1px solid var(--rule);
}
.admin-file-group:first-child { margin-top: 0; border-top: none; padding-top: .25rem; }
.admin-file-row { position: relative; }
.admin-file-row.is-draft .admin-file-row__btn { padding-left: 2.4rem; padding-right: 4.5rem; }
.admin-file-row__badge {
  position: absolute;
  left: .5rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warning, #d8923a);
  border: 1px solid color-mix(in srgb, var(--warning, #d8923a) 45%, transparent);
  background: color-mix(in srgb, var(--warning, #d8923a) 10%, transparent);
  padding: 1px 5px;
  border-radius: var(--radius-sm, 4px);
  pointer-events: none;
  z-index: 1;
}
.admin-file-row__publish {
  position: absolute;
  right: .35rem; top: 50%; transform: translateY(-50%);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  padding: .2rem .55rem;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background var(--dur-quick, 150ms) ease, color var(--dur-quick, 150ms) ease;
  z-index: 1;
}
.admin-file-row__publish:hover:not(:disabled) { background: var(--accent); color: var(--accent-fg, var(--bg)); }
.admin-file-row__publish:disabled { opacity: .6; cursor: progress; }

/* Editor */
.admin-editor {
  background: var(--bg-3, var(--bg-3));
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.25rem 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 320px;
}
.admin-editor__header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
}
.admin-editor__header h2 { margin: 0; font-size: 1.1rem; letter-spacing: var(--tracking-snug, -0.01em); }
.admin-editor__path { color: var(--fg-2); font-size: var(--fs-small); margin: .15rem 0 0; font-family: var(--font-mono); }
.admin-editor__actions { display: flex; gap: .5rem; }
.admin-editor__body { display: flex; flex-direction: column; gap: .75rem; }
.admin-editor__fm summary {
  cursor: pointer; color: var(--fg-2); font-size: var(--fs-small);
  padding: .25rem 0; user-select: none;
}
.admin-editor__fm[open] summary { margin-bottom: .5rem; }
.admin-editor textarea {
  font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.55;
  resize: vertical; min-height: 120px;
}
.admin-editor textarea[data-content] { min-height: 420px; }

/* Status badge in editor header (Draft / Published) */
.admin-status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 0.7rem;
  padding: .15rem .5rem .15rem .4rem;
  border-radius: 999px;
  font-weight: 500;
  margin-right: .5rem;
  border: 1px solid var(--rule);
  background: var(--bg-2);
}
.admin-status::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.admin-status[data-kind="draft"] { color: var(--warning, #b25c00); }
.admin-status[data-kind="live"]  { color: var(--success, #1a7f4e); }

/* Subtle button variant — used for Unpublish (less weight than Publish) */
.btn--subtle {
  background: transparent; color: var(--fg-2);
  border-color: var(--rule);
}
.btn--subtle:hover { color: var(--fg); }

/* Toolbar above the editor body */
.admin-editor__toolbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: .25rem;
}
.admin-editor__toolbar-spacer { flex: 1 1 auto; }
.admin-editor__toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-small); color: var(--fg-2);
  cursor: pointer; user-select: none;
}
.admin-editor__toggle input { accent-color: var(--accent); }
.admin-editor__btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .65rem;
  background: transparent; color: var(--fg-2);
  border: 1px solid var(--rule); border-radius: var(--radius-sm, 6px);
  font: inherit; font-size: 0.8125rem; cursor: pointer;
}
.admin-editor__btn:hover { color: var(--fg); border-color: var(--rule-strong, var(--rule)); }

.admin-editor__preview-toggle {
  display: inline-flex; gap: 1px;
  border: 1px solid var(--rule); border-radius: var(--radius-sm, 6px);
  overflow: hidden;
}
.admin-editor__preview-toggle button {
  padding: .35rem .7rem;
  background: transparent; color: var(--fg-2);
  border: none; border-right: 1px solid var(--rule);
  font: inherit; font-size: 0.8125rem; cursor: pointer;
}
.admin-editor__preview-toggle button:last-child { border-right: none; }
.admin-editor__preview-toggle button:hover { color: var(--fg); background: var(--bg-2); }
.admin-editor__preview-toggle button[aria-current="true"] {
  background: var(--bg-2); color: var(--fg);
}

/* Split panes: textarea | preview */
.admin-editor__panes {
  display: grid; gap: .75rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
.admin-editor__panes[data-view="split"] { grid-template-columns: 1fr 1fr; }
.admin-editor__panes[data-view="preview"] > textarea { display: none; }
.admin-editor__panes[data-view="edit"]    > [data-preview] { display: none; }

.admin-editor__preview {
  min-height: 420px; padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-3, var(--bg-3));
  overflow-y: auto;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.admin-editor__preview h1, .admin-editor__preview h2, .admin-editor__preview h3 {
  font-family: var(--font-serif); letter-spacing: var(--tracking-snug, -0.01em);
}
.admin-editor__preview h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
.admin-editor__preview h2 { font-size: 1.25rem; margin: 1.25rem 0 .5rem; }
.admin-editor__preview h3 { font-size: 1.05rem; margin: 1rem 0 .35rem; }
.admin-editor__preview p { margin: 0 0 .75rem; }
.admin-editor__preview pre {
  background: var(--bg-2); padding: .75rem 1rem;
  border-radius: var(--radius-sm, 6px); border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 0.85em; overflow-x: auto;
}
.admin-editor__preview code {
  background: var(--bg-2); padding: 0.1em 0.35em;
  border-radius: var(--radius-sm, 0); border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 0.85em;
}
.admin-editor__preview pre code { background: none; padding: 0; border: none; }
.admin-editor__preview blockquote {
  margin: 1rem 0; padding: .25rem 1rem;
  border-left: 2px solid var(--accent); color: var(--fg-2);
}
.admin-editor__preview img { max-width: 100%; border-radius: var(--radius-sm, 6px); }
.admin-editor__preview a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }

.admin-editor__drop {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}

@media (max-width: 720px) {
  .admin-editor__panes[data-view="split"] { grid-template-columns: 1fr; }
}
.admin-editor__hint { color: var(--fg-3, var(--fg-2)); font-size: 0.75rem; margin: 0; }
.admin-editor__status { color: var(--fg-2); font-size: var(--fs-small); margin: 0; min-height: 1.2em; }
.admin-editor__status[data-tone="ok"]    { color: var(--success, #1a7f4e); }
.admin-editor__status[data-tone="error"] { color: var(--danger,  #c53030); }

/* Modal mode — when the public-site Inspector drawer embeds us with
   ?modal=1, hide the chrome that would clash with the drawer's own
   header. The sidebar collapses too; the editor takes the full width. */
html.admin-modal .admin-header,
html.admin-modal .admin-sidebar,
html.admin-modal [data-site-preview],
html.admin-modal .admin-editor__sitepreview {
  display: none !important;
}
html.admin-modal .admin-main { padding: 0 !important; }
html.admin-modal .admin-dashboard {
  display: block !important;
  grid-template-columns: 1fr !important;
}
html.admin-modal .admin-editor {
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  min-height: 100vh;
}

/* Site preview panel (iframe of the live URL) */
.admin-editor__sitepreview {
  margin-top: 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-2);
  display: flex; flex-direction: column;
  min-height: 480px;
  overflow: hidden;
}
.admin-editor__sitepreview-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  background: var(--bg-3);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}
.admin-editor__sitepreview-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .15rem;
}
.admin-editor__sitepreview-url { color: var(--fg); }
.admin-editor__sitepreview-note { color: var(--fg-3); font-size: 0.7rem; }
.admin-editor__sitepreview-widths {
  display: inline-flex; gap: 1px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
}
.admin-editor__sitepreview-widths button {
  background: transparent;
  border: 0;
  padding: .25rem .55rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  cursor: pointer;
  text-transform: lowercase;
}
.admin-editor__sitepreview-widths button[aria-current="true"] {
  background: var(--fg); color: var(--bg);
}
.admin-editor__sitepreview-frame {
  flex: 1; min-height: 480px;
  display: flex; justify-content: center; align-items: stretch;
  background: var(--bg);
  overflow: auto;
}

/* New dialog */
.admin-dialog {
  border: 1px solid var(--rule); border-radius: var(--radius-lg, 12px);
  background: var(--bg-3, var(--bg-3)); color: var(--fg);
  padding: 1.5rem; max-width: 420px; width: calc(100% - 2rem);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, .15));
}
.admin-dialog::backdrop { background: rgba(8, 9, 10, .5); backdrop-filter: blur(4px); }
.admin-newform { display: flex; flex-direction: column; gap: .85rem; }
.admin-newform h2 { margin: 0; font-size: 1.1rem; letter-spacing: var(--tracking-snug, -0.01em); }
.admin-newform label { display: flex; flex-direction: column; gap: .25rem; font-size: var(--fs-small); color: var(--fg-2); }
.admin-newform small { color: var(--fg-3, var(--fg-2)); font-size: 0.75rem; }
.admin-newform__actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }

/* ============================================================
   FORM, SWITCH, CHIP COMPONENTS (B1)
   ============================================================ */

.admin-editor__form {
  display: flex; flex-direction: column; gap: .65rem;
  border-bottom: 1px solid var(--rule, var(--rule));
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
}
.admin-editor__form-title {
  margin: 0 0 .25rem;
  font-family: var(--font-mono, var(--font-sans));
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3, var(--fg-3));
  font-weight: 500;
}
.admin-editor__body-section { display: flex; flex-direction: column; gap: .5rem; }
.admin-editor__body-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.admin-editor__toolbar-actions { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.admin-editor__raw {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--rule, var(--rule));
}
.admin-editor__raw summary {
  cursor: pointer; user-select: none;
  font-family: var(--font-mono); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-3, var(--fg-3));
  padding: .35rem 0;
}
.admin-editor__raw[open] summary { margin-bottom: .5rem; }
.admin-editor__raw textarea {
  width: 100%;
  min-height: 140px;
}

/* Form rows */
.admin-form { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1.25rem; }
.admin-form__row { display: flex; flex-direction: column; gap: .25rem; }
.admin-form__row:has(textarea),
.admin-form__row:has(.admin-chips),
.admin-form__row:has(.admin-switch) {
  grid-column: span 2;
}
.admin-form__label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: var(--fs-small);
}
.admin-form__label-text {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3, var(--fg-3));
}
.admin-form__label input,
.admin-form__label textarea,
.admin-form__label select {
  width: 100%;
  padding: .5rem .65rem;
  background: var(--bg-3, var(--bg-3));
  color: var(--fg);
  border: 1px solid var(--rule, var(--rule));
  border-radius: 0;
  font: inherit;
  font-size: 0.9375rem;
}
.admin-form__label input[type="date"],
.admin-form__label input[type="month"] { font-family: var(--font-mono); }
.admin-form__label input:focus,
.admin-form__label textarea:focus,
.admin-form__label select:focus {
  outline: none;
  border-color: var(--accent, var(--accent));
  box-shadow: 0 0 0 2px var(--accent-soft, var(--accent-soft));
}
.admin-form__hint {
  margin: 0; font-size: 0.75rem; color: var(--fg-3, var(--fg-3));
  line-height: 1.4;
}

/* Switch (Published / Draft) */
.admin-switch {
  display: inline-flex; align-items: center; gap: .65rem;
  cursor: pointer; user-select: none;
  width: max-content;
}
.admin-switch input { position: absolute; opacity: 0; pointer-events: none; }
.admin-switch__track {
  position: relative;
  width: 38px; height: 22px;
  border-radius: 999px;
  background: var(--rule-strong, var(--rule));
  transition: background var(--dur-quick, 150ms) var(--ease);
  flex-shrink: 0;
}
.admin-switch__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  transition: transform var(--dur-quick, 150ms) var(--ease);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.admin-switch[data-on="true"] .admin-switch__track { background: var(--accent, var(--accent)); }
.admin-switch[data-on="true"] .admin-switch__thumb { transform: translateX(16px); }
.admin-switch__label {
  font-family: var(--font-mono); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-2, var(--fg-2));
}
.admin-switch[data-on="true"] .admin-switch__label { color: var(--accent, var(--accent)); }

/* Chips (tags / stack inputs) */
.admin-chips {
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding: .4rem .5rem;
  background: var(--bg-3, var(--bg-3));
  border: 1px solid var(--rule, var(--rule));
  min-height: 38px;
}
.admin-chips__list { display: contents; }
.admin-chips__chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .5rem;
  background: var(--bg-2, var(--bg-2));
  border: 1px solid var(--rule, var(--rule));
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--fg, var(--fg));
}
.admin-chips__rm {
  background: transparent; border: none; padding: 0;
  font: inherit; color: var(--fg-3, var(--fg-3));
  cursor: pointer; line-height: 1;
  font-size: 1.1em;
}
.admin-chips__rm:hover { color: var(--danger); }
.admin-chips__input {
  flex: 1; min-width: 7rem;
  background: transparent; border: none; outline: none; padding: .15rem .25rem;
  font: inherit; font-size: 0.875rem;
}

/* Markdown toolbar */
.admin-editor__md-toolbar {
  display: flex; flex-wrap: wrap; gap: 1px;
  border: 1px solid var(--rule, var(--rule));
  margin-bottom: .35rem;
  background: var(--rule, var(--rule));
}
.admin-md-btn {
  padding: .35rem .65rem;
  background: var(--bg-3, var(--bg-3));
  color: var(--fg-2, var(--fg-2));
  border: none;
  font: inherit; font-size: 0.8125rem; font-weight: 500;
  cursor: pointer;
  min-width: 2.2rem;
}
.admin-md-btn:hover {
  background: var(--bg-2, var(--bg-2));
  color: var(--fg, var(--fg));
}

@media (max-width: 720px) {
  .admin-form { grid-template-columns: 1fr; }
  .admin-form__row:has(textarea),
  .admin-form__row:has(.admin-chips),
  .admin-form__row:has(.admin-switch) {
    grid-column: span 1;
  }
}

/* ============================================================
   SORTABLE — drag-reorder visuals (B3)
   ============================================================ */

.admin-sortable__row {
  position: relative;
}
.admin-sortable__handle {
  cursor: grab;
}
.admin-sortable__handle:focus-visible {
  outline: 2px solid var(--accent, var(--accent));
  outline-offset: 2px;
}
.admin-sortable__row.admin-sortable__dragging {
  cursor: grabbing;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  background: var(--bg-3, var(--bg-3));
}
.admin-sortable__placeholder {
  background: var(--accent-soft, var(--accent-soft));
  border: 1px dashed var(--accent, var(--accent));
  list-style: none;
  margin: 0;
}

/* Reorder banner — appears above the file list when projects are
   pending a save. */
.admin-reorder-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .65rem .85rem;
  margin-bottom: .5rem;
  background: var(--accent-soft, var(--accent-soft));
  border: 1px solid var(--accent, var(--accent));
  font-size: var(--fs-small);
  color: var(--fg, var(--fg));
}
.admin-reorder-banner__actions { display: inline-flex; gap: .5rem; }

/* ============================================================
   DATA-FILE CARDS (B3a)
   ============================================================ */

.admin-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  gap: .75rem;
}
.admin-card {
  border: 1px solid var(--rule, var(--rule));
  background: var(--bg-3, var(--bg-3));
  display: flex; flex-direction: column;
}
.admin-card__header {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--rule, var(--rule));
  background: var(--bg-2, var(--bg-2));
}
.admin-card__handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--fg-3, var(--fg-3));
  font-size: 0.875rem;
  cursor: grab;
  user-select: none;
}
.admin-card__handle:hover { color: var(--fg, var(--fg)); }
.admin-card__handle:focus-visible {
  outline: 2px solid var(--accent, var(--accent));
  outline-offset: 2px;
}
.admin-card__title {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--fg, var(--fg));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-card__rm {
  background: transparent;
  border: 1px solid var(--rule, var(--rule));
  color: var(--fg-3, var(--fg-3));
  padding: .2rem .6rem;
  font: inherit; font-size: 0.75rem;
  cursor: pointer;
}
.admin-card__rm:hover {
  color: var(--danger);
  border-color: var(--danger);
}
.admin-card__body {
  padding: .85rem 1rem;
}
.admin-cards__add {
  display: block;
  width: 100%;
  margin-top: .5rem;
  padding: .55rem .75rem;
  background: transparent;
  color: var(--fg-2, var(--fg-2));
  border: 1px dashed var(--rule, var(--rule));
  font: inherit; font-size: 0.875rem;
  cursor: pointer;
}
.admin-cards__add:hover {
  color: var(--fg, var(--fg));
  border-color: var(--accent, var(--accent));
  background: var(--accent-soft, var(--accent-soft));
}