/* The admin portal. It is set like the rest of the site: paper, hairlines, the display face
   for names and figures, ink used for state. No panels, no cards. */
.admin { min-height: 100dvh; }
.admin-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 18px var(--pad) 16px; border-bottom: 3px solid var(--rose); }
.admin-bar p { margin: 0; }
.admin-mark a { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.7px; text-decoration: none; }
.admin-mark span { margin-left: 12px; font-size: 15px; color: var(--muted); }
.admin-who { display: flex; gap: 22px; font-size: 15px; color: var(--muted); white-space: nowrap; }
.admin-shell { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding: 0 var(--pad) 12vh; max-width: 92rem; margin: 0 auto; }
.admin-nav { position: sticky; top: 0; align-self: start; padding-top: clamp(28px, 5vh, 56px); }
.admin-nav a { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: -.012em; color: var(--muted); text-decoration: none; transition: color .25s var(--ease), padding .35s var(--ease); }
.admin-nav a:hover { color: var(--ink); }
.admin-nav a[aria-current="page"] { padding-left: 16px; color: var(--ink); background: radial-gradient(circle at 4px 50%, var(--rose) 4px, transparent 4.5px); }
.admin-nav small { font-family: inherit; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--coral); }
.admin-main { min-width: 0; padding-top: clamp(28px, 5vh, 56px); outline: 0; }
.admin-main > h1 { font-size: clamp(40px, 5vw, 72px); font-weight: 600; letter-spacing: -.035em; line-height: .95; }
.admin-main > .lede { max-width: 46ch; margin: 14px 0 0; font-size: 18px; color: var(--muted); }
.admin-main h2 { margin-top: 46px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: 22px; }
.admin-main h2 + p.note { margin-top: 10px; font-size: 15px; color: var(--muted); }
.gate-note { max-width: 40ch; margin-top: 16px; font-size: 18px; }

/* figures set large in a ruled row */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin: 30px 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.figs div { padding: 14px 16px 16px 0; }
.figs div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.figs dt { font-size: 14px; color: var(--muted); }
.figs dd { margin: 8px 0 0; font-family: var(--display); font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.figs dd small { display: block; margin-top: 8px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.figs .bad dd { color: var(--danger); }

/* charts: one line and its ground, nothing else */
.chart { margin-top: 22px; }
.chart svg { display: block; width: 100%; height: 120px; overflow: visible; }
.chart figcaption { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); }
.chart figcaption strong { font-weight: 600; color: var(--ink); }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 8px clamp(24px, 3vw, 44px); }

/* lists and tables */
.table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 16px; }
.table th { padding: 0 12px 9px 0; border-bottom: 1px solid var(--ink); text-align: left; font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td:first-child { overflow-wrap: anywhere; }
.table td:not(:first-child):not(:last-child) { white-space: nowrap; }
.table tr.pick { cursor: pointer; }
.table tr.pick:hover td { background: var(--surface); }
.table tr[aria-selected="true"] td { background: var(--surface); }
.table small { display: block; font-size: 13px; color: var(--muted); }
.mark { display: inline-block; font-size: 13px; white-space: nowrap; }
.mark::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--teal); }
.mark.warn::before { background: var(--amber); } .mark.bad::before { background: var(--danger); } .mark.quiet::before { background: var(--line); }
.sev { letter-spacing: 3px; color: var(--danger); }
.empty { margin-top: 18px; color: var(--muted); }
.more-row { margin-top: 18px; }

/* a bar to search and filter with */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 26px; }
.tools input:not([type]) { flex: 1 1 16rem; min-width: 0; }
.tools .choice-row { flex: none; }

/* two columns: the list, and the one that is open */
.split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.split > .detail { position: sticky; top: 16px; padding-left: clamp(20px, 2.4vw, 36px); border-left: 1px solid var(--line); }
.detail h2:first-child { margin-top: 26px; }
.detail .name { margin-top: 26px; font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.facts-list { margin: 14px 0 0; font-size: 15px; }
.facts-list div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.facts-list dt { color: var(--muted); }
.facts-list dd { margin: 0; overflow-wrap: anywhere; }
.detail .actions { margin-top: 18px; }
.detail h3 { margin-top: 30px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 17px; }
.said-list { margin: 12px 0 0; padding: 0; list-style: none; }
.said-list li { padding: 10px 14px; margin-top: 8px; background: var(--surface); border-radius: 14px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.said-list li b { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.said-list li.theirs { border-left: 3px solid var(--violet); border-radius: 0 14px 14px 0; }
.warned { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--danger); border-left-width: 4px; font-size: 15px; }
.reply-box textarea { width: 100%; margin-top: 14px; }

/* funnel bars and the retention grid */
.bars { margin: 16px 0 0; }
.bars div { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 6.5rem; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.bars i { display: block; height: 10px; background: var(--violet); border-radius: 0 5px 5px 0; min-width: 2px; }
.bars span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.grid-table td.cell { text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }

/* the assistant */
.console { max-width: 46rem; }
.console .thread { margin-top: 22px; }
.console .help-bar { margin-top: 22px; }
.proposal { margin: 10px 0 0; padding: 14px 16px; border: 1px solid var(--ink); border-left: 4px solid var(--amber); font-size: 15px; }
.proposal p { margin: 0 0 12px; }

/* administrators */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 6px 18px; margin-top: 10px; }
.perm-grid label { display: flex; gap: 9px; align-items: baseline; font-size: 15px; font-weight: 400; margin: 0; }
#ask-fields label { display: block; margin: 14px 0 8px; font-size: 15px; font-weight: 600; }
#ask-fields input:not([type]), #ask-fields textarea { width: 100%; }
#ask form { display: block; }

.admin-toast { position: fixed; z-index: 60; left: 50%; bottom: 26px; transform: translateX(-50%); margin: 0; padding: 12px 20px; background: var(--ink); color: var(--page); border-radius: 999px; font-size: 15px; animation: line-in .3s var(--ease) both; }

@media (max-width: 900px) {
  .admin-bar { flex-wrap: wrap; gap: 6px 20px; }
  .admin-who { gap: 16px; font-size: 14px; }
  .admin-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .admin-nav { position: static; display: flex; gap: 22px; overflow-x: auto; padding-top: 14px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .admin-nav a { flex: none; border-bottom: 0; gap: 8px; }
  .admin-nav a[aria-current="page"] { padding-left: 14px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > .detail { position: static; padding-left: 0; border-left: 0; border-top: 1px solid var(--ink); }
  .table th:nth-child(n + 4), .table td:nth-child(n + 4) { display: none; }
}