/* HumanIA admin — layout only. Colours, type and buttons come from
   /styles.css; every value here is one of its existing tokens. Built for two
   people who are not database users: readable records, plain words, and at
   360px everything stacks. */

.adm { background: var(--paper); font-size: 16px; }
.adm-wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--pad-x); }
.adm [hidden] { display: none !important; }

/* ---- sign-in ---- */
.adm-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.adm-gate__box { width: min(100%, 440px); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.adm-gate .lockup__name { font-size: 34px; color: var(--ink); }
.adm-gate__title { font-size: clamp(1.4rem, 4vw, 1.8rem); letter-spacing: -.02em; color: var(--ink); }
.adm-gate__err { color: var(--accent); font-weight: 400; }

/* ---- top bar ---- */
.adm-top { background: var(--deep); color: var(--light); }
.adm-top__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 18px 12px; }
.adm-brand { align-items: baseline; gap: 12px; }
.adm-brand .lockup__name { font-size: 24px; color: var(--light); }
.adm-brand__tag { font-family: var(--display); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--light-56); }
.adm-top__who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: .88rem; color: var(--light-72); }
.adm-top .adm-link { color: var(--light-72); }
.adm-top .adm-link:hover { color: var(--light); }
.adm-top__email { color: var(--light-56); }
.adm-tabs { display: flex; gap: 4px; overflow-x: auto; }
.adm-tab {
  background: none; border: none; cursor: pointer; padding: 12px 14px 14px;
  font-family: var(--display); font-size: .95rem; color: var(--light-72);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.adm-tab:hover { color: var(--light); }
.adm-tab[aria-current="page"] { color: var(--light); border-bottom-color: var(--brand); }
.adm-tab:focus-visible, .adm-link:focus-visible, .adm-visitor:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.adm-link {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule);
}
.adm-link:hover { color: var(--ink); }

/* ---- page ---- */
.adm-main { padding-block: 28px 72px; }
.adm-error { margin-bottom: 18px; color: var(--accent); font-weight: 400; }
.adm-ok { color: var(--ink); font-weight: 400; }
.adm-empty { color: var(--ink-55); padding: 12px 0; }
.adm-note { font-size: .9rem; line-height: 1.55; color: var(--ink-55); margin-top: 10px; max-width: 72ch; }
.adm-dim { color: var(--ink-55); font-size: .9em; }
.adm code { font-size: .78rem; color: var(--ink-40); }

.adm-panel--after-note { margin-top: 18px; }
.adm-panel { background: var(--light); border-radius: 5px; box-shadow: inset 0 0 0 1px var(--rule-soft); padding: clamp(18px, 3vw, 28px); margin-bottom: 18px; }
.adm-h { font-size: clamp(1.25rem, 2.4vw, 1.5rem); letter-spacing: -.02em; color: var(--ink); margin-bottom: 14px; }
.adm-h3 { font-size: 1.05rem; color: var(--ink); margin: 6px 0 10px; }
.adm-h4 { font-family: var(--display); font-weight: 400; font-size: .95rem; color: var(--ink); margin: 16px 0 6px; }
.adm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 28px; }
.adm-two > .adm-panel { margin-bottom: 18px; }

.adm-controls { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 18px; }
.adm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.adm-field > span { font-family: var(--display); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); }
.adm-field input, .adm-field select, .adm-field textarea {
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--paper);
  border: none; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--rule); padding: 9px 11px; width: 100%;
}
.adm-field textarea { resize: vertical; line-height: 1.5; }
.adm-field input:focus-visible, .adm-field select:focus-visible, .adm-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- numbers ---- */
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.adm-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--paper); border-radius: 4px; }
.adm-stat__n { font-family: var(--display); font-weight: 300; font-size: 1.9rem; line-height: 1.1; color: var(--ink); }
.adm-stat__l { font-size: .88rem; line-height: 1.35; color: var(--ink-55); }

.adm-bars { list-style: none; margin: 0; padding: 0; }
.adm-bars li { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr 36px; gap: 12px; align-items: center; padding: 6px 0; font-size: .92rem; }
.adm-bars__n, .adm-funnel__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.adm-bar { display: block; height: 8px; border-radius: 4px; background: var(--rule-soft); overflow: hidden; }
.adm-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.adm-bar--big { height: 12px; border-radius: 6px; }

.adm-funnel { list-style: none; margin: 0; padding: 0; }
.adm-funnel li { display: grid; grid-template-columns: minmax(170px, 1.2fr) 2fr 44px minmax(90px, .6fr); gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.adm-funnel li:last-child { border-bottom: none; }
.adm-funnel__l { font-size: .95rem; color: var(--ink); }
.adm-funnel__lost { font-size: .85rem; color: var(--accent); }

/* ---- waitlist: summary line and one row of controls ---- */
.adm-btn { padding: 11px 20px; font-size: .84rem; }
.adm-btn:disabled { opacity: .6; cursor: progress; }
.adm-field--wide { grid-column: 1 / -1; }
.adm-line { font-size: 1rem; color: var(--ink-70); margin-bottom: 16px; }
.adm-line strong { font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--ink); }
.adm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.adm-search { flex: 1 1 260px; min-width: 0; }
.adm-search input {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink); background: var(--light);
  border: none; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); padding: 10px 16px;
}
.adm-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.adm-tbtn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer;
  font-family: var(--display); font-size: .86rem; color: var(--ink);
  background: var(--light); border: none; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); padding: 10px 16px;
}
.adm-tbtn:hover { box-shadow: inset 0 0 0 1px var(--ink-55); }
.adm-tbtn:focus-visible, .adm-tag:focus-visible, .adm-sort:focus-visible, .adm-rowbtn:focus-visible, .adm-drawer__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.adm-tbtn:disabled { opacity: .4; cursor: default; }
.adm-tbtn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ink); }
.adm-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--light); font-size: .74rem; line-height: 20px; text-align: center; }
.adm-filterwrap { position: relative; flex: none; }
.adm-filterpanel {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(560px, 90vw);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; padding: 18px;
  background: var(--light); border-radius: 5px; box-shadow: inset 0 0 0 1px var(--rule-soft), 0 30px 80px rgba(0, 0, 0, .18);
}
.adm-filterpanel__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 4px; }
.adm-tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 1 auto; min-width: 0; }
.adm-tag {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: .8rem; color: var(--ink); background: var(--card); border: none; border-radius: 999px; padding: 4px 10px;
}
.adm-tag span { color: var(--ink-55); font-size: 1rem; line-height: 1; }
.adm-tag:hover span { color: var(--accent); }
.adm-toolbar__end { display: flex; gap: 8px; margin-left: auto; flex: none; }
.adm-count { margin: 12px 0 0; font-size: .9rem; color: var(--ink-55); }
.adm-count:empty { display: none; }

/* ---- waitlist: one line per person ---- */
.adm-table { width: 100%; border-collapse: collapse; margin-top: 16px; background: var(--light); border-radius: 5px; box-shadow: inset 0 0 0 1px var(--rule-soft); font-size: .93rem; }
.adm-table th { text-align: left; padding: 0; border-bottom: 1px solid var(--rule); }
.adm-sort {
  display: inline-flex; align-items: center; gap: 4px; width: 100%; padding: 12px 14px; cursor: pointer; background: none; border: none;
  font-family: var(--display); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); text-align: left;
}
.adm-sort:hover, th[aria-sort] .adm-sort { color: var(--ink); }
.adm-sort__arrow { letter-spacing: 0; }
.adm-table td { padding: 11px 14px; border-top: 1px solid var(--rule-soft); color: var(--ink-70); vertical-align: middle; }
.adm-table tbody tr { cursor: pointer; }
.adm-table tbody tr:hover td { background: var(--paper); }
.adm-table__empty td { cursor: default; color: var(--ink-55); }
.adm-col-founding_number { width: 64px; font-variant-numeric: tabular-nums; color: var(--accent) !important; }
.adm-col-status { white-space: nowrap; }
.adm-col-created_at { white-space: nowrap; }
.adm-col-meta { display: none; }
.adm-rowbtn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-weight: 400; color: var(--ink); text-align: left; }
.adm-rowbtn:hover { color: var(--accent); }

/* ---- the record panel, from the right ---- */
.adm-drawer { position: fixed; inset: 0; z-index: 100; }
.adm-drawer__scrim { position: absolute; inset: 0; background: rgba(20, 16, 13, .82); opacity: .5; }
.adm-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(720px, 92vw);
  display: flex; flex-direction: column; background: var(--light);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); outline: none;
  animation: adm-slide .25s var(--ease);
}
@keyframes adm-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .adm-drawer__panel { animation: none; } }
.adm-drawer__bar { display: flex; align-items: center; gap: 8px; padding: 12px clamp(16px, 3vw, 28px); border-bottom: 1px solid var(--rule-soft); }
.adm-drawer__nav { padding: 8px 14px; }
.adm-drawer__pos { font-size: .88rem; color: var(--ink-55); min-width: 70px; text-align: center; }
.adm-drawer__close { margin-left: auto; width: 40px; height: 40px; border: none; border-radius: 50%; background: none; cursor: pointer; font-size: 1.7rem; line-height: 1; color: var(--ink-55); }
.adm-drawer__close:hover { color: var(--ink); background: var(--paper); }
.adm-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 clamp(16px, 3vw, 28px) 32px; }
body.adm-drawer-open { overflow: hidden; }

.adm-rec { padding: 22px 0 24px; }
.adm-rec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.adm-rec__name { font-size: clamp(1.2rem, 2.4vw, 1.4rem); letter-spacing: -.02em; color: var(--ink); }
.adm-rec__num { color: var(--accent); font-weight: 400; }
.adm-rec__meta { font-size: .92rem; color: var(--ink-55); }
.adm-rec__answer { margin: 14px 0 0; padding: 14px 18px; background: var(--paper); border-left: 3px solid var(--glow); border-radius: 0 4px 4px 0; }
.adm-rec__text { white-space: pre-wrap; font-size: 1.04rem; line-height: 1.65; color: var(--ink); max-width: 75ch; }
.adm-rec__none { margin-top: 12px; font-size: .92rem; color: var(--ink-55); font-style: italic; }
.adm-voice { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: .8rem; color: var(--ink-55); }
.adm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 22px; margin: 16px 0 0; }
.adm-facts dt { font-family: var(--display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); }
.adm-facts dd { margin: 2px 0 0; font-size: .92rem; color: var(--ink-70); overflow-wrap: anywhere; }
.adm-read { margin-top: 14px; font-size: .9rem; color: var(--ink-70); }
.adm-read > span:first-child { color: var(--ink-55); }
.adm-rec__work { display: grid; grid-template-columns: 180px 1fr; gap: 12px 16px; align-items: start; margin-top: 18px; }
.adm-rec__work .adm-field--wide { grid-column: auto; }
.adm-saved { grid-column: 1 / -1; min-height: 1.2em; font-size: .85rem; color: var(--ink-55); }

.adm-import { margin: 16px 0; padding: 18px; background: var(--paper); border-radius: 4px; }
.adm-import .adm-field { max-width: 420px; margin: 12px 0; }
.adm-plan { margin: 0 0 8px; padding-left: 1.3em; font-size: .92rem; color: var(--ink-70); }
.adm-plan li { padding: 2px 0; }
.adm-import .btn { margin: 10px 0 14px; }

/* ---- content ---- */
.adm-sections { list-style: none; margin: 18px 0 0; padding: 0; }
.adm-sections li { display: grid; grid-template-columns: minmax(200px, 1.1fr) 1.3fr 2fr; gap: 10px 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule-soft); }
.adm-sections__name { color: var(--ink); }
.adm-sections__name code { display: block; margin-top: 2px; }
.adm-sections__reach { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: .9rem; color: var(--ink-70); }
.adm-sections__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.adm-sections__facts dt { font-size: .76rem; color: var(--ink-55); }
.adm-sections__facts dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---- visitors ---- */
.adm-rows, .adm-visitors { list-style: none; margin: 0; padding: 0; }
.adm-rows li { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: .93rem; }
.adm-rows__main { color: var(--ink); }
.adm-visitors li { border-top: 1px solid var(--rule-soft); }
.adm-visitor { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 12px 4px; font: inherit; color: inherit; }
.adm-visitor:hover { background: var(--paper); }
.adm-visitor__name { color: var(--ink); font-weight: 400; }
.adm-pill { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: .76rem; font-weight: 400; background: var(--card); color: var(--ink); }
.adm-pill--dim { background: var(--rule-soft); color: var(--ink-55); }
.adm-visit__page { padding: 10px 0; border-top: 1px solid var(--rule-soft); }
.adm-visit__title { color: var(--ink); }
.adm-visit__secs { list-style: none; margin: 8px 0 0; padding: 0; font-size: .9rem; }
.adm-visit__secs li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0 3px 12px; border-left: 2px solid var(--rule); color: var(--ink-55); }
.adm-visit__secs li.is-read { border-left-color: var(--accent); color: var(--ink); }
.adm-visit__events { margin-top: 8px; font-size: .85rem; color: var(--accent); }

@media (max-width: 720px) {
  /* controls may wrap on a phone; the list becomes two lines per person */
  .adm-toolbar { flex-wrap: wrap; }
  .adm-search { flex-basis: 100%; }
  .adm-toolbar__end { margin-left: 0; }
  .adm-filterpanel { grid-template-columns: 1fr; width: calc(100vw - 2 * var(--pad-x)); }
  .adm-table, .adm-table thead, .adm-table tbody { display: block; }
  .adm-table thead tr { display: flex; flex-wrap: wrap; gap: 0 4px; padding: 4px 6px; border-bottom: 1px solid var(--rule); }
  .adm-table th { border: none; }
  .adm-sort { padding: 8px; }
  .adm-table tbody tr { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; padding: 10px 14px; border-top: 1px solid var(--rule-soft); }
  .adm-table td { padding: 0; border: none; }
  /* Only the row cells fold into line two; the column headings stay, so every column can still be sorted. */
  .adm-table td.adm-col-created_at, .adm-table td.adm-col-course, .adm-table td.adm-col-progress { display: none; }
  .adm-table td.adm-col-meta { display: block; grid-column: 2 / -1; min-width: 0; font-size: .84rem; color: var(--ink-55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .adm-table__empty { display: block !important; }
  .adm-drawer__panel { width: 100vw; }
  .adm-bars li { grid-template-columns: 1fr 70px 30px; }
  .adm-funnel li { grid-template-columns: 1fr 44px; }
  .adm-funnel li .adm-bar { grid-column: 1 / -1; grid-row: 2; }
  .adm-funnel__lost { grid-column: 1 / -1; }
  .adm-rec__work { grid-template-columns: 1fr; }
  .adm-sections li { grid-template-columns: 1fr; }
  .adm-sections__facts { grid-template-columns: repeat(2, 1fr); }
  .adm-rows li { grid-template-columns: 1fr 1fr; }
  .adm-rows__main { grid-column: 1 / -1; }
  .adm-stat__n { font-size: 1.6rem; }
}