/* The admin console (src/admin/console.ts; approved prototype riti.page/jagadeeswar/admin-prototype v11).
   One hue per area, set by .ax-c-<area> as --c; everything else from tokens.css. No inline styles (APP CSP). */
.ax-c-overview { --c: var(--ink); } .ax-c-money { --c: #0b7a4b; } .ax-c-accounts { --c: #2a56ff; } .ax-c-safety { --c: #c2410c; }
.ax-c-usage { --c: #6d3fd6; } .ax-c-system { --c: #475569; } .ax-c-log { --c: #6b7280; } .ax-c-passkeys { --c: #a16207; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ax-c-money { --c: #3ecf8e; } :root:not([data-theme='light']) .ax-c-accounts { --c: #8dafff; }
  :root:not([data-theme='light']) .ax-c-safety { --c: #ff8a5c; } :root:not([data-theme='light']) .ax-c-usage { --c: #b69cff; }
  :root:not([data-theme='light']) .ax-c-system { --c: #a9b6c8; } :root:not([data-theme='light']) .ax-c-log { --c: #a3a3ad; }
  :root:not([data-theme='light']) .ax-c-passkeys { --c: #e0b45a; }
}
.ax { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 48px; padding: 32px 0 80px; }
.ax-main { min-width: 0; }
/* side nav */
.ax-nav { position: sticky; top: 88px; align-self: start; display: grid; gap: 2px; }
.ax-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font: 520 14.5px var(--sans); }
.ax-nav a i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ax-nav a .n { margin-left: auto; font: 600 12px var(--mono); color: var(--ink-3); }
.ax-nav a .n.hot { color: #fff; background: #c2410c; border-radius: 999px; padding: 1px 7px; }
.ax-nav a:hover { background: var(--bg-2); color: var(--ink); }
.ax-nav a[aria-current='page'] { background: var(--bg-2); color: var(--ink); font-weight: 620; }
/* an area's head */
.ax-k { font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.ax-h1 { margin: 6px 0 4px; font: 760 clamp(30px, 4vw, 40px)/1.05 var(--sans); letter-spacing: -.035em; }
.ax-lead { margin: 0; color: var(--ink-2); font-size: 16px; }
.ax-done { margin: 0 0 20px; padding: 10px 14px; border-radius: 10px; background: var(--bg-2); font-size: 14px; }
.ax-sec { margin-top: 44px; }
.ax-sec > h2 { margin: 0 0 12px; font: 680 17px var(--sans); letter-spacing: -.01em; display: flex; align-items: baseline; gap: 10px; }
.ax-sec > h2 small { font: 500 13px var(--sans); color: var(--ink-3); letter-spacing: 0; }
.ax-sec > h2 a { margin-left: auto; font: 560 13.5px var(--sans); color: var(--ink-2); text-decoration: none; }
.ax-sec > h2 a:hover { color: var(--ink); }
.ax-note { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; }
.ax-empty { margin: 0; padding: 22px 0; color: var(--ink-2); border-top: 2px solid var(--line); }
.ax-est { display: inline-flex; gap: 6px; margin: 14px 0 0; font-size: 13px; color: var(--ink-2); background: var(--bg-2); padding: 6px 12px; border-radius: 999px; }
.ax-est b { color: var(--ink); }
/* big numbers */
.ax-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--c); }
.ax-nums.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ax-nums.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ax-nums.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ax-num { padding: 16px 20px 16px 0; min-width: 0; }
.ax-num + .ax-num { padding-left: 20px; border-left: 1px solid var(--line); }
.ax-num b { display: block; font: 740 30px/1.05 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ax-num span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.ax-num em { display: block; margin-top: 2px; font: normal 500 12px var(--mono); color: var(--ink-3); }
.ax-num em.up { color: #0b7a4b; } .ax-num em.down { color: #c2410c; }
/* needs you */
.ax-todo { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ax-todo li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.ax-todo b.n { font: 740 22px/1 var(--sans); color: var(--c); font-variant-numeric: tabular-nums; }
.ax-todo li.zero, .ax-todo li.zero b.n { color: var(--ink-3); }
.ax-todo small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.ax-todo a { font: 560 13.5px var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.ax-todo a:hover { text-decoration: underline; }
/* meters (SVG) */
.ax-bar { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
.ax-bar .bg { fill: var(--bg-2); } .ax-bar .fg { fill: var(--c, var(--ink)); } .ax-bar .fg.over { fill: #c2410c; }
/* tables */
.ax-scroll { overflow-x: auto; }
.ax-t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ax-t th { text-align: left; font: 600 12px var(--sans); color: var(--ink-3); padding: 0 16px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ax-t td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ax-t .r { text-align: right; } .ax-t .ax-nw { white-space: nowrap; }
.ax-t tbody tr.go { cursor: pointer; } .ax-t tbody tr.go:hover td { background: var(--bg-2); }
.ax-t td small { display: block; color: var(--ink-3); font-size: 12.5px; }
.ax-t tfoot td { font-weight: 680; border-bottom: 0; border-top: 2px solid var(--ink); }
.ax-who { display: block; color: inherit; text-decoration: none; min-width: 200px; }
.ax-who b { font-weight: 580; display: block; } .ax-who small { display: block; font-size: 12.5px; color: var(--ink-3); }
.ax-who:hover b { text-decoration: underline; }
.ax-meter { display: grid; grid-template-columns: 90px auto; gap: 10px; align-items: center; --c: #2a56ff; }
.ax-meter span { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.ax-plan { font: 620 11.5px var(--sans); padding: 2px 8px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.ax-plan.free { background: var(--bg-2); color: var(--ink-2); }
.ax-plan.pro { background: color-mix(in srgb, #0b7a4b 14%, var(--bg)); color: #0b7a4b; }
.ax-plan.admin { background: var(--bg-2); color: var(--ink-3); }
.ax-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.ax-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #0b7a4b; }
.ax-st.bad::before { background: #c2410c; } .ax-st.idle::before { background: var(--line-2); }
/* accounts tools */
.ax-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 28px 0 14px; }
.ax-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg-2); }
.ax-seg a { padding: 7px 13px; border-radius: 9px; font: 540 13.5px var(--sans); color: var(--ink-2); text-decoration: none; }
.ax-seg a .n { font: 600 11.5px var(--mono); color: var(--ink-3); margin-left: 5px; }
.ax-seg a[aria-current='page'] { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-1); }
.ax-find { margin-left: auto; min-width: 260px; }
.ax-find input { width: 100%; height: 40px; border: 0; border-radius: 12px; background: var(--bg-2); padding: 0 14px; font: 450 14px var(--sans); color: var(--ink); }
.ax-pager { display: flex; gap: 12px; align-items: center; margin: 16px 0 0; font-size: 13px; color: var(--ink-3); }
/* charts */
.ax-chart { width: 100%; height: auto; display: block; }
.ax-chart text { font: 500 10px var(--mono); fill: var(--ink-3); }
.ax-chart rect { fill: var(--c); }
.ax-stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: 6px 0 10px; background: var(--bg-2); }
.ax-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); }
.ax-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.ax-funnel { display: grid; gap: 9px; --c: #6d3fd6; }
.ax-funnel div { display: grid; grid-template-columns: 170px minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 14px; }
.ax-funnel span:last-child { text-align: right; font: 600 13px var(--mono); }
/* safety */
.ax-cases { border-top: 2px solid var(--c); }
.ax-case { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.ax-case b { font-weight: 620; }
.ax-case p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-2); }
.ax-case small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.ax-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
/* an account */
.ax-back { display: inline-flex; gap: 6px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.ax-ah { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-top: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.ax-ah .ax-h1 { margin: 0; }
.ax-ah p { margin: 4px 0 0; color: var(--ink-2); }
.ax-ah .ax-acts { margin-left: auto; }
.ax-kv { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c, var(--ink)); }
.ax-kv li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ax-kv li > span:first-child { color: var(--ink-2); }
.ax-kv li small { display: block; color: var(--ink-3); font-size: 12.5px; }
.ax-kv li b { font-weight: 560; text-align: right; }
.ax-lims { display: grid; gap: 14px; border-top: 2px solid #2a56ff; padding-top: 14px; --c: #2a56ff; }
.ax-lims div { display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px; gap: 12px; align-items: center; font-size: 14px; }
.ax-lims div span:last-child { text-align: right; color: var(--ink-2); font-size: 13px; }
.ax-more { position: relative; }
.ax-more > summary { list-style: none; cursor: pointer; }
.ax-more > summary::-webkit-details-marker { display: none; }
.ax-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--bg); border-radius: 12px; box-shadow: var(--shadow-3); padding: 6px; min-width: 220px; z-index: 20; display: grid; }
.ax-menu .btn { justify-content: flex-start; width: 100%; }
/* the confirm dialog (.dlg from components.css) */
.ax-dlg label { display: grid; gap: 6px; font: 560 13px var(--sans); margin-top: 12px; }
.ax-dlg label[hidden], .ax-dlg [hidden] { display: none; }
.ax-dlg input, .ax-dlg textarea { font: 450 14px var(--sans); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); }
.ax-limits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ax-err { color: #c2410c; font-size: 13.5px; margin: 10px 0 0; }
@media (max-width: 960px) {
  .ax { grid-template-columns: 1fr; gap: 20px; padding-top: 16px; }
  .ax-nav { position: static; display: flex; overflow-x: auto; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .ax-nav a { flex: none; }
  .ax-two { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 700px) {
  .ax-nums, .ax-nums.n3, .ax-nums.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-num:nth-child(odd) { padding-left: 0; border-left: 0; } .ax-num { border-bottom: 1px solid var(--line); }
  .ax-find { min-width: 0; width: 100%; margin-left: 0; }
  .ax-case { grid-template-columns: 1fr; } .ax-acts { justify-content: flex-start; }
  .ax-funnel div { grid-template-columns: 120px minmax(0, 1fr) 48px; }
  .ax-lims div { grid-template-columns: 90px minmax(0, 1fr); } .ax-lims div span:last-child { grid-column: 2; text-align: left; }
  .ax-ah .ax-acts { margin-left: 0; justify-content: flex-start; }
  .ax-menu { left: 0; right: auto; }
  .ax-t.cards thead { display: none; } .ax-t.cards, .ax-t.cards tbody, .ax-t.cards tr, .ax-t.cards td { display: block; }
  .ax-t.cards tr { padding: 12px 0; border-bottom: 1px solid var(--line); } .ax-t.cards td { border: 0; padding: 3px 0; }
  .ax-t.cards td[data-l]::before { content: attr(data-l); display: inline-block; min-width: 92px; font-size: 12.5px; color: var(--ink-3); }
  .ax-t.cards .r { text-align: left; }
}
/* money (src/admin/money.ts): the payments-off note, the goal meter, the bill's stacked bar and key, the services table */
.ax-payoff { margin: 20px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--bg-2); border-left: 3px solid #0b7a4b; font-size: 14px; color: var(--ink-2); }
.ax-payoff b { color: var(--ink); }
.ax-goal { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.ax-goal b { font-variant-numeric: tabular-nums; color: var(--ink); }
.ax-goal .ax-bar { grid-column: 1 / -1; width: 100%; height: 10px; }
.ax-mstack { display: block; width: 100%; height: 14px; border-radius: 999px; overflow: hidden; margin: 6px 0 10px; background: var(--bg-2); }
.ax-mkey { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); }
.ax-mkey span { display: inline-flex; align-items: center; gap: 6px; }
.ax-mkey i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ax-mstack .s-workers { fill: #2a56ff; } .ax-mkey .s-workers { background: #2a56ff; }
.ax-mstack .s-d1 { fill: #0b7a4b; } .ax-mkey .s-d1 { background: #0b7a4b; }
.ax-mstack .s-r2 { fill: #b7791f; } .ax-mkey .s-r2 { background: #b7791f; }
.ax-mstack .s-kv { fill: #475569; } .ax-mkey .s-kv { background: #475569; }
.ax-mstack .s-browser { fill: #c2410c; } .ax-mkey .s-browser { background: #c2410c; }
.ax-mstack .s-email { fill: #6d3fd6; } .ax-mkey .s-email { background: #6d3fd6; }
.ax-mbig { margin: 0; font: 680 22px/1.3 var(--sans); letter-spacing: -.02em; border-top: 2px solid var(--c, #0b7a4b); padding-top: 14px; }
.ax-mh3 { margin: 28px 0 8px; font: 680 15px var(--sans); }
.ax-mh3 small { font: 500 13px var(--sans); color: var(--ink-3); }
.ax-msvc .ax-mmeter { min-width: 140px; }
.ax-msvc tfoot td { font-weight: 620; }
.ax-mtag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font: 560 11px var(--mono); }
.ax-mest { display: block; border-radius: 12px; }
.ax-mrefund { margin-top: 14px; }
.ax-malert { color: #c2410c; }
.ax-msvc .ax-mof { display: none; }
@media (max-width: 700px) {
  .ax-t.cards.ax-msvc tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
  .ax-msvc tbody td[data-l='Included'], .ax-msvc tbody td[data-l='So far'] { display: none; }
  .ax-msvc tbody td[data-l='Used'] { text-align: right; }
  .ax-t.cards.ax-msvc td[data-l='Used']::before, .ax-t.cards.ax-msvc td[data-l='Service']::before { content: none; display: none; }
  .ax-msvc .ax-mof { display: inline; color: var(--ink-3); }
  .ax-t.cards.ax-msvc tbody td.ax-mmeter, .ax-t.cards.ax-msvc tbody td[data-l='Expected'] { grid-column: 1 / -1; }
  .ax-msvc tbody td.ax-mmeter .ax-bar { width: 100%; }
  .ax-msvc tfoot tr { display: flex; justify-content: space-between; } .ax-msvc tfoot td:empty, .ax-msvc tfoot td:nth-child(5) { display: none; }
}

/* usage and system */
.ax-chart .base { stroke: var(--line); stroke-width: 1; }
.ax-share { display: block; width: 100%; height: 14px; border-radius: 999px; overflow: hidden; margin: 6px 0 10px; background: var(--bg-2); }
.ax-share .k1, .ax-key .k1::before { fill: #9aa0aa; background: #9aa0aa; } .ax-share .k2, .ax-key .k2::before { fill: #2a56ff; background: #2a56ff; }
.ax-share .k3, .ax-key .k3::before { fill: #b7791f; background: #b7791f; } .ax-share .k4, .ax-key .k4::before { fill: #0b7a4b; background: #0b7a4b; }
.ax-share .k5, .ax-key .k5::before { fill: #c2410c; background: #c2410c; }
.ax-key span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.ax-key small { color: var(--ink-3); }
.ax-t td.hot { color: #c2410c; font-weight: 620; }
.ax-kv li small.ax-err-line { color: #c2410c; overflow-wrap: anywhere; }
.ax-unk { color: var(--ink-3); font-weight: 450; }
.ax-c-system > .ax-lims { --c: inherit; border-top-color: var(--c); }
@media (min-width: 701px) { .ax-c-system > .ax-lims div { grid-template-columns: 110px minmax(0, 1fr) 210px; } }
/* step-up: the "confirm it's you" state in the nav and in the action dialog */
.ax-sudo { margin: 14px 12px 0; font-size: 12.5px; color: var(--ink-3); }
.ax-stepup { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); font-size: 14px; color: var(--ink-2); }
.ax-stepup p { margin: 0 0 8px; }
.ax-sudo-h { font-weight: 640; color: var(--ink); }
.ax-stepup .ax-acts { justify-content: flex-start; }
@media (max-width: 960px) { .ax-sudo { display: none; } }

/* the admin app's own chrome (admin.riti.page): top bar, sign-in, Passkeys */
.ax-top .right { gap: 10px; }
.ax-me { font: 500 13px var(--sans); color: var(--ink-3); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .ax-me { display: none; } }
.ax-pk-add { margin-top: 14px; }
.ax-signin .eyebrow { color: var(--ink-3); }
.ax-signin .thr-sub + .js-only, .ax-signin .thr-sub + .msg { margin-top: 24px; }
.ax-signin .ts { margin: 0 0 12px; min-height: 0; }
.ax-signin .ts:empty { display: none; }
.ax-signin .msg:empty { display: none; }
.ax-signin .msg { margin: 10px 0 0; }