/* /admin additions on top of the Astin system (astin.css). Shell layout, phone
   tab bar, and the few panel-only pieces; colours, type and radii are Astin tokens. */

html, body { background: var(--bg); color: var(--fg); }
body { margin: 0; font-family: var(--font-sans); }
a { color: inherit; }

/* shell */
.ad-shell { min-height: 100vh; display: flex; flex-direction: column; }
.ad-shell > .header { height: var(--header-h); flex: none; border-block-end: 1px solid var(--line); }
.ad-shell .brand { text-decoration: none; min-height: var(--control-md); }
.ad-shell .brand svg { width: 26px; height: 26px; }
.ad-shell > .shell-body { flex-grow: 1; align-items: start; }
.ad-shell .main { min-width: 0; }
.ad-shell > .shell-body { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.ad-shell .sidebar { position: sticky; top: var(--header-h); min-height: calc(100vh - var(--header-h)); border-inline-end: 1px solid var(--line); }
.ad-shell .nav-item svg { width: var(--icon-md); height: var(--icon-md); flex: none; }
.ad-shell .nav-item .badge { margin-inline-start: auto; }
.ad-shell .main { max-width: 1160px; display: flex; flex-direction: column; gap: var(--space-6); }
.ad-shell .main.is-narrow { max-width: 1040px; }
.ad-user { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); }
.ad-shell .tabbar { display: none; }

@media (max-width: 760px) {
  .ad-shell > .shell-body { grid-template-columns: minmax(0, 1fr); }
  .ad-two > .ad-main-col, .ad-two > .ad-side-col { flex-basis: 100%; }
  .ad-block { padding: var(--space-3); gap: var(--space-2); }
  .ad-block .grid-2 { grid-template-columns: 1fr; }
  .ad-shell .sidebar { display: none; }
  .ad-shell .main { padding: var(--space-5) var(--space-4) calc(var(--tabbar-h) + var(--space-8)); gap: var(--space-5); }
  .ad-shell .tabbar { display: grid; }
  .ad-hide-sm { display: none !important; }
  .ad-shell .header { padding-inline: var(--space-4); }
}

/* icons drawn inline in buttons and inputs */
.btn svg, .icon-button svg, .menu-item svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.icon-button:not(.is-sm) svg { width: var(--icon-md); height: var(--icon-md); }

/* page bits */
.ad-sub { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); }
.ad-two { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.ad-two > .ad-main-col { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ad-two > .ad-side-col { flex: 1 1 300px; display: flex; flex-direction: column; gap: var(--space-4); }
.ad-pages-wrap { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.ad-pages { flex: 1 1 200px; padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.ad-pages .nav-item { background: none; border: 0; font: inherit; cursor: pointer; text-align: start; width: 100%; }
.ad-pages .nav-item .badge { margin-inline-start: auto; }
.ad-pages .nav-item.is-active { background: var(--surface-2); }
@media (max-width: 760px) {
  .ad-pages { position: static; flex-direction: row; overflow-x: auto; flex-basis: 100%; }
  .ad-pages > .stack { flex-direction: row !important; }
  .ad-pages .section-label { display: none; }
  .ad-pages .nav-item { width: auto; white-space: nowrap; }
}
.check:has(br) { align-items: flex-start; }
.ad-h2 { margin: 0; font-size: var(--text-h3); font-weight: 700; }
.ad-meta { font-size: var(--text-caption); color: var(--subtle); }
.ad-title-link { font-weight: 700; text-decoration: none; }
.ad-title-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* the post body editor: one nested card per block */
.ad-block { padding: var(--space-3) var(--space-4); display: flex; gap: var(--space-3); align-items: flex-start; }
.ad-block:focus-within { box-shadow: 0 0 0 2px var(--fg); }
.ad-block > .ad-block-body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ad-block-tools { display: flex; flex-direction: column; gap: 2px; }
.ad-block .badge { align-self: flex-start; }
.ad-list-row { display: flex; align-items: center; gap: var(--space-2); }
.ad-list-row > .mono { width: 18px; color: var(--subtle); font-size: var(--text-sm); }

/* a changed field in the texts editor */
.is-dirty { box-shadow: 0 0 0 1px var(--accent) !important; }

/* things that float */
.ad-floating { position: fixed; inset-inline: 0; inset-block-end: var(--space-6); margin-inline: auto; width: fit-content; max-width: calc(100% - 32px); z-index: var(--z-toast); }
@media (max-width: 760px) { .ad-floating { inset-block-end: calc(var(--tabbar-h) + var(--space-4)); } }
.ad-overlay { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(2px); z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.ad-overlay .modal { position: static; max-height: 90vh; overflow-y: auto; }
.ad-menu-wrap { position: relative; }
.ad-menu-wrap > .menu { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: var(--z-popover); min-width: 210px; }

/* Google preview */
.ad-serp-title { color: var(--info-fg); font-weight: 700; }

/* sign-in */
.ad-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); box-sizing: border-box; }
.ad-login > .card { width: 400px; max-width: 100%; padding: var(--space-8); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--space-5); }
.ad-login .brand-ring, .ad-login svg { width: 26px; height: 26px; }
@media (max-width: 480px) { .ad-login > .card { padding: var(--space-6) var(--space-5); } }

/* An LTR input in an RTL group: the aside sits on the left, so the room goes on the left. */
.input-group .input.ltr.has-aside { padding-right: 0.95rem; padding-left: 3.6rem; }