/* admin.css -- Setup (#/setup) and Admin (#/admin). Owner: round 4 P1. Colors from tokens only.
   Layout: a step rail, the form (max 720 px) and the "What this changes" column at >= 1024 px;
   the rail becomes a horizontal list under 1024 px and everything stacks under 720 px. */

.page.adm-page { max-width: 1180px; }
.adm-head { align-items: flex-start; }
.adm-page .adm-head .meta a { margin-left: 4px; }

.adm-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 260px; gap: var(--s5); align-items: start; }
.adm-layout-admin { grid-template-columns: minmax(0, 1fr) 260px; margin-top: var(--s4); }
.adm-main { min-width: 0; max-width: 720px; }
.adm-steptitle { display: flex; align-items: baseline; gap: 10px; }
.adm-stepn { color: var(--text-placeholder); font-family: var(--font-mono); font-size: var(--fs-meta); }
.adm-lede { color: var(--text-secondary); margin: 6px 0 var(--s4); max-width: 62ch; }

/* ---- step rail ---- */
.adm-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: sticky; top: 0; }
.adm-railitem a {
  display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: var(--r-control);
  color: var(--text-secondary); text-decoration: none; font-size: var(--fs-meta);
}
.adm-railitem a:hover { background: var(--bg-hover); color: var(--text); }
.adm-railitem.is-current a { background: var(--bg-hover); color: var(--text); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.adm-railn { font-family: var(--font-mono); color: var(--text-placeholder); font-size: var(--fs-caption); }

/* ---- the "what this changes" column ---- */
.adm-aside { border-left: 1px solid var(--line-subtle); padding-left: var(--s3); display: grid; gap: 10px; align-content: start; }
.adm-aside .meta { max-width: 40ch; }

/* ---- form ---- */
.adm-group { padding: var(--s3) 0; border-bottom: 1px solid var(--line-subtle); }
.adm-group:last-of-type { border-bottom: 0; }
.adm-gtitle { display: block; margin-bottom: 10px; }
.adm-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px var(--s3); align-items: start; padding: 5px 0; }
.adm-lab { color: var(--text-secondary); font-size: var(--fs-meta); line-height: var(--lh-meta); padding-top: 7px; }
.adm-page input[type="checkbox"], .adm-page input[type="radio"] { accent-color: var(--accent); }
.adm-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.adm-ctl > .chip-illus { flex: 0 0 auto; }
.adm-hint { flex-basis: 100%; margin: 0; }
.adm-meta { margin: 10px 0 0; }
.adm-input { width: 100%; max-width: 320px; }
.adm-input-narrow { max-width: 92px; }
.adm-select { width: auto; max-width: 320px; padding-right: 6px; }
.adm-mock { white-space: nowrap; }
.adm-rowbtns { margin: 12px 0 0; }
.adm-cardhost:empty { display: none; }
.adm-cardhost { margin-top: var(--s3); }

/* ---- chips and accent swatches ---- */
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip { cursor: pointer; border: 0; }
.adm-chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.adm-chip[aria-pressed="false"] { background: transparent; color: var(--text-placeholder); box-shadow: inset 0 0 0 1px var(--line-subtle); }
.adm-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-swatch {
  display: inline-flex; align-items: center; gap: 6px; height: var(--control-h); padding: 0 10px;
  border: 1px solid var(--line-subtle); border-radius: var(--r-control); background: var(--bg-raised);
  color: var(--text); font-size: var(--fs-meta); cursor: pointer;
}
.adm-swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.adm-swatch-off { color: var(--text-placeholder); cursor: not-allowed; background: transparent; }
.adm-swatch-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); }
.adm-urg1 { background: var(--urgency-1); }
.adm-urg2 { background: var(--urgency-2); }
.adm-urg3 { background: var(--urgency-3); }
.adm-preview {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--s3);
  padding: 12px var(--s3); border: 1px solid var(--line-subtle); border-radius: var(--r-card); background: var(--bg-pane);
}
.adm-preview .section-label { margin-right: 4px; }
.adm-preview .btn-primary { height: 26px; padding: 0 10px; font-size: var(--fs-caption); pointer-events: none; }
.adm-preview-link { color: var(--accent-text); font-size: var(--fs-meta); }
.adm-preview-chip { background: var(--accent-soft); color: var(--accent-text); }

/* ---- word lists (phases, statuses) ---- */
.adm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.adm-litem { display: flex; align-items: center; gap: 8px; }
.adm-lnum { width: 18px; color: var(--text-placeholder); font-family: var(--font-mono); font-size: var(--fs-caption); text-align: right; }
.adm-litem .adm-input { max-width: 240px; }
.adm-lbtns { display: flex; gap: 2px; }
.adm-x { height: 26px; font-size: var(--fs-caption); color: var(--text-secondary); }
.adm-x:disabled { opacity: 0.4; }
.adm-add { margin-top: 10px; }

/* ---- clocks ---- */
.adm-clocks { margin-top: var(--s3); }
.adm-clocklist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.adm-clock { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-clock .adm-input { max-width: 190px; }
.adm-clock .adm-input-narrow { max-width: 74px; }

/* ---- workspaces, integrations, people ---- */
.adm-wslist, .adm-intlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.adm-ws, .adm-int { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-toggle { display: inline-flex; align-items: center; gap: 6px; width: 104px; color: var(--text-secondary); font-size: var(--fs-meta); }
.adm-wsid { color: var(--text-placeholder); font-size: var(--fs-caption); }
.adm-intlab { width: 120px; color: var(--text-secondary); font-size: var(--fs-meta); }
.adm-intstate { flex: 1 1 auto; min-width: 140px; }
.adm-people td { vertical-align: middle; }
.adm-people .adm-select { max-width: 200px; }

/* ---- autonomy table ---- */
.adm-aut { margin-top: 4px; }
.adm-aut th.adm-lvl, .adm-aut td.adm-lvl { text-align: center; width: 104px; }
.adm-aut .adm-actlab { font-weight: 400; text-align: left; padding: 6px 10px; white-space: normal; }
.adm-aut .adm-actnote { max-width: 220px; white-space: normal; line-height: var(--lh-caption); font-size: var(--fs-caption); }
.adm-radio { display: inline-flex; align-items: center; justify-content: center; padding: 4px; cursor: pointer; }
.adm-radio input:disabled { cursor: not-allowed; }
.adm-locked { color: var(--text-placeholder); font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- nav, banner, changes ---- */
.adm-nav { display: flex; justify-content: space-between; gap: var(--s2); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line-subtle); }
.adm-banner {
  margin: var(--s2) 0 0; padding: 8px var(--s3); border: 0; border-radius: var(--r-control);
  background: var(--bg-pane); color: var(--text-secondary); font-size: var(--fs-meta);
}
.adm-receipts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.adm-receipt { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line-subtle); }
.adm-receipt.is-undone .adm-rtext { color: var(--text-placeholder); text-decoration: line-through; }
.adm-rglyph { color: var(--text-secondary); position: relative; top: 2px; }
.adm-rtext { flex: 1 1 auto; min-width: 0; }
.adm-ract { display: flex; gap: 12px; flex: 0 0 auto; }
.adm-empty { padding: var(--s3) 0; }

@media (max-width: 1100px) {
  .adm-layout { grid-template-columns: 180px minmax(0, 1fr); }
  .adm-layout-admin { grid-template-columns: minmax(0, 1fr); }
  .adm-aside { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-subtle); padding: var(--s2) 0 0; }
  .adm-layout .adm-aside .meta { max-width: 64ch; }
}
@media (max-width: 1023px) {
  .adm-layout { grid-template-columns: minmax(0, 1fr); }
  .adm-rail { position: static; grid-auto-flow: column; grid-auto-columns: max-content; gap: 2px; overflow-x: auto; padding-bottom: 4px; }
  .adm-railitem.is-current a { box-shadow: inset 0 -2px 0 var(--accent); }
}
@media (max-width: 719px) {
  .adm-rail { display: flex; flex-wrap: wrap; overflow: visible; }
  .adm-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .adm-lab { line-height: var(--lh-meta); }
  .adm-input, .adm-select { max-width: none; }
  .adm-litem .adm-input, .adm-clock .adm-input { max-width: none; flex: 1 1 140px; }
  .adm-clock .adm-input-narrow { flex: 0 0 74px; }
  .adm-intlab, .adm-toggle { width: auto; }
  .adm-int, .adm-ws { gap: 8px; }
  .adm-preview { gap: 8px; }
  /* the autonomy table becomes one block per action type */
  .adm-aut, .adm-aut thead, .adm-aut tbody, .adm-aut tr, .adm-aut th, .adm-aut td { display: block; }
  .adm-aut thead { display: none; }
  .adm-aut tr { padding: 8px 0; border-bottom: 1px solid var(--line-subtle); }
  .adm-aut .adm-actlab { padding: 0 0 4px; font-weight: 500; }
  .adm-aut td { height: auto; padding: 2px 0; border: 0; }
  .adm-aut td.adm-lvl { display: inline-flex; align-items: center; gap: 4px; width: auto; margin-right: 14px; text-align: left; }
  .adm-aut td.adm-lvl::before { content: attr(data-label); color: var(--text-secondary); font-size: var(--fs-caption); }
  .adm-aut .adm-actnote { max-width: none; padding-top: 4px; }
  .adm-nav { margin-top: var(--s4); }
}

/* ==================================================================== Operations lane (round 7)
   Two blocks that are not Admin's but have nowhere else to live: the Activity drawer's own styles are in
   css/home.css (Ask's file this wave) and the drawer's markup is js/activity.js (this lane's). Rather than
   edit another lane's stylesheet, the additions sit here, in a file this lane owns; every stylesheet is
   loaded on every route, so the effect is the same. Final should move this next to the other .act- rules. */

/* the filter row: one small button at rest, the controls only once it is asked for (S21.6) */
.act-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.act-fbtn { display: inline-flex; align-items: center; gap: 5px; }
.act-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.act-fsel { width: auto; flex: 1 1 116px; min-width: 96px; height: 28px; padding: 0 6px; font-size: var(--fs-meta); }
.act-fdate { width: auto; flex: 0 1 130px; height: 28px; padding: 0 6px; font-size: var(--fs-meta); }
.act-flab { color: var(--text-secondary); font-size: var(--fs-caption); }
.act-fcount { margin-bottom: 6px; color: var(--text-secondary); }

/* the second line of a log row: what changed, when it happened against when it was entered, the source */
.act-main .act-delta,
.act-main .act-when,
.act-main .act-src,
.act-main .act-rev,
.act-main .act-undone { display: block; margin-top: 2px; }
.act-delta s { color: var(--text-secondary); }
.act-delta .ico { vertical-align: -2px; margin: 0 2px; color: var(--text-secondary); }
.act-affects { margin-top: 4px; color: var(--text-secondary); }
.act-affects a { color: var(--accent-text); }
.act-row.is-reversed .act-open { color: var(--text-secondary); }
.act-row.is-target { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-control); }
.act-sys { color: var(--text-secondary); }

/* a failed run's recovery controls, inside the run detail a reader opened */
.run-extra { margin-top: 4px; }
.act-retry { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.act-syncdone { margin-top: 6px; }
.act-fresh { margin-bottom: 12px; }
.act-reason { margin-bottom: 12px; color: var(--text-secondary); }

/* the mapping-drift warning inside Money's post preview (S22.4) -- the same shape as a freshness line */
.ops-drift { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.ops-drift .ico { align-self: center; color: var(--urgency-2); flex: none; }

/* the destination-mapping table on Admin > Integrations (S22.4) */
.adm-map { margin-top: 12px; }
.adm-map .mono { font-size: var(--fs-meta); }
.adm-mapwarn { color: var(--text); }
.adm-mapwarn .ico { vertical-align: -2px; margin-right: 4px; color: var(--urgency-2); }
.act-fdates { display: inline-flex; align-items: center; gap: 4px; }
.adm-maph { margin-top: var(--region-gap); }
.adm-map > .meta { margin-top: 4px; }
.adm-mapwarn { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.adm-mapwarn .ico { align-self: center; flex: none; color: var(--urgency-2); vertical-align: baseline; margin-right: 0; }