/* ── Team console ───────────────────────────────────────────────────────
   Built from the administration kit (bar, sidebar, panels, tables, pills)
   and read by a customer: the pool's minutes lead, the chart shows how fast
   they go, and credits wait behind every figure for whoever needs them. The
   one mark of colour is the signal, kept for today and the forecast. */
:root {
  --team-area: #171a190d;
  --team-held: #c98200;
  --team-plan: #959b97;
  --team-pop: #171a19; --team-pop-ink: #fafbf8;
}
html[data-theme="dark"] {
  --team-area: #fafbf812;
  --team-held: #f0b45a;
  --team-plan: #828f86;
  --team-pop: #fafbf8; --team-pop-ink: #171a19;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --team-area: #fafbf812;
    --team-held: #f0b45a;
    --team-plan: #828f86;
    --team-pop: #fafbf8; --team-pop-ink: #171a19;
  }
}

/* ── Shell ── */
.team-gate-wrap { padding: 72px 20px; }
.team-gate-wrap[hidden] { display: none; }
.team-side-head { padding: 2px 10px 14px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.team-side-name { margin: 0; font: 600 15px/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.team-side-role { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.team-side-role:empty, .team-side-name:empty { display: none; }
.admin-side-foot a.account-link { justify-self: start; font-size: 12.5px; color: var(--ink-3); }

/* A figure's credits, in the data face, on hover or focus of the figure. */
.team-fig { position: relative; white-space: nowrap; font-variant-numeric: tabular-nums; }
.team-fig[data-credits]:is(:hover, :focus-visible)::after {
  content: attr(data-credits); position: absolute; z-index: 3; bottom: calc(100% + 6px); right: 0;
  padding: 4px 8px; border-radius: 6px; background: var(--team-pop); color: var(--team-pop-ink);
  font: 400 11.5px/1.4 var(--data); letter-spacing: 0; white-space: nowrap; pointer-events: none;
}
.team-hero .team-fig[data-credits]:is(:hover, :focus-visible)::after { right: auto; left: 0; }
.team-fig:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 3px; }
.team-mono { font: 400 12.5px/1.4 var(--data); color: var(--ink-2); }
.team-plus { color: var(--admin-ok); }

/* ── Overview ── */
.team-hero { padding: 26px 28px 22px; margin-bottom: 16px; }
.team-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 32px; }
.team-hero-figure { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.team-hero-figure > .team-fig { font: 600 clamp(44px, 6vw, 64px)/1 var(--sans); letter-spacing: -.035em; color: var(--ink); }
.team-hero-unit { font: 500 18px/1 var(--sans); color: var(--ink-2); letter-spacing: -.01em; }
.team-hero-of { margin: 0 0 4px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); text-align: right; }
.team-hero-of span { color: var(--ink-3); }
.team-meter { display: block; width: 100%; height: 6px; margin: 22px 0 12px; border-radius: 3px; overflow: hidden; }
.team-meter-track { fill: var(--line); }
.team-meter-used { fill: var(--ink); }
.team-meter-held { fill: var(--team-held); }
.team-meter-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-3); }
.team-meter-key li { display: inline-flex; align-items: center; gap: 7px; }
.team-meter-key li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--line); }
.team-meter-key [data-key="used"]::before { background: var(--ink); }
.team-meter-key [data-key="held"]::before { background: var(--team-held); }
.team-meter-key [data-key="deficit"]::before { background: var(--admin-bad); }
.team-meter-key .team-fig { color: var(--ink); font-weight: 500; }

.team-tiles { margin-bottom: 16px; }
.team-tiles dd.team-tile-note { margin: 4px 0 0; font: 400 12.5px/1.4 var(--sans); letter-spacing: 0; color: var(--ink-3); }
.team-tiles [data-tone="warn"] dd:not(.team-tile-note) { color: var(--admin-warn); }

.team-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.admin-main .team-panel-head h2 { margin: 0; font: 600 15px/1.3 var(--sans); }
.team-burn-panel { padding: 20px 22px 16px; margin-bottom: 16px; }
.team-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-3); }
.team-legend li { display: inline-flex; align-items: center; gap: 7px; }
.team-legend li::before { content: ""; width: 16px; height: 0; border-top: 2px solid var(--ink); }
.team-legend [data-key="plan"]::before { border-top: 1px dashed var(--team-plan); }
.team-legend [data-key="forecast"]::before { border-top: 2px dotted var(--signal); }
.team-burn { margin: 0; }
.team-chart-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.team-yaxis { display: flex; flex-direction: column; justify-content: space-between; padding: 0 0 2px; font-size: 11.5px; line-height: 1; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.team-plot { position: relative; }
.team-chart { display: block; width: 100%; height: 220px; overflow: visible; }
.team-grid line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.team-area { fill: var(--team-area); }
.team-actual { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.team-plan { fill: none; stroke: var(--team-plan); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.team-forecast { fill: none; stroke: var(--signal); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.team-today { stroke: var(--signal); stroke-width: 1; vector-effect: non-scaling-stroke; }
.team-today-label { position: absolute; top: -2px; transform: translate(-50%, -100%); padding: 0 6px; font: 500 11.5px/1.4 var(--sans); color: var(--signal-text); background: var(--paper); white-space: nowrap; }
.team-xaxis { display: flex; justify-content: space-between; margin: 8px 0 0; padding-left: 40px; font-size: 11.5px; color: var(--ink-3); }

.team-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.team-split > .admin-panel + .admin-panel { margin-top: 0; }
.team-alerts, .team-top { padding: 20px 22px; }
.team-alerts ul, .team-top ol { margin: 0; padding: 0; list-style: none; }
.team-alerts li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.team-alerts li:first-child { border-top: 0; padding-top: 0; }
.team-alerts .admin-dot { transform: translateY(-1px); }
.team-alerts li[data-level="info"] .admin-dot { background: var(--ink-4); box-shadow: 0 0 0 3px var(--line); }
.team-quiet { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.admin-main .team-topup { margin-top: 16px; }
.team-topup-asked { margin: 14px 0 0; }
.team-plan { margin: 12px 2px 0; }
.team-keys-note { margin: 0 2px 14px; max-width: 72ch; }
.admin-table small code, .team-dialog code { font: 12px/1.5 var(--data); color: inherit; overflow-wrap: anywhere; }
.team-dialog .account-key-scopes { margin-top: 12px; }
.team-topup-quiet { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.team-top li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, 120px) 88px; align-items: center; gap: 14px; min-height: 36px; border-top: 1px solid var(--line); font-size: 13.5px; }
.team-top li:first-child { border-top: 0; }
.team-top-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .team-top li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding-block: 8px; }
  .team-top-email { grid-column: 1 / -1; }
}
.team-top b { font-weight: 500; text-align: right; }
.team-top .admin-meter, .team-row-meter { margin: 0; height: 4px; }
.team-top .admin-meter rect + rect { fill: var(--ink-3); }

/* ── Members ── */
.team-members-head h2 small { display: block; margin-top: 2px; font: 400 13px/1.4 var(--sans); color: var(--ink-3); }
.admin-main .team-members-head .admin-detail-actions { margin: 0; }
.team-copy-status { margin: -4px 0 12px !important; }
.team-copy-status:empty { display: none; }
.team-copy-status.is-open { white-space: pre-wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); color: var(--ink); user-select: all; }
.team-cap-cell { display: inline-grid; justify-items: end; gap: 4px; min-width: 110px; }
.team-cap-cell .team-row-meter { width: 100%; }
.admin-table .team-cap-cell small { margin: 0; }
.admin-table button.team-row-menu { display: grid; place-items: center; width: 32px; min-height: 32px; padding: 0; border-color: transparent; background: none; color: var(--ink-3); }
.admin-table button.team-row-menu:hover, .admin-table button.team-row-menu[aria-expanded="true"] { border-color: var(--line-2); color: var(--ink); }
.team-row-menu svg { width: 16px; height: 16px; fill: currentColor; }
.team-menu {
  position: fixed; inset: auto; margin: 0; width: 220px; padding: 6px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink);
  box-shadow: 0 12px 32px rgb(23 26 25 / .14), 0 1px 2px rgb(23 26 25 / .06);
}
.team-menu:popover-open { display: grid; gap: 1px; }
html[data-theme="dark"] .team-menu { box-shadow: 0 12px 32px rgb(0 0 0 / .5); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .team-menu { box-shadow: 0 12px 32px rgb(0 0 0 / .5); } }
.team-menu button { display: block; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: inherit; font: 500 13.5px/1.2 var(--sans); text-align: left; cursor: pointer; }
.team-menu button:hover:not(:disabled), .team-menu button:focus-visible { background: var(--paper-2); outline: none; }
.team-menu button:disabled { color: var(--ink-3); cursor: default; }
.team-menu button.admin-danger { margin-top: 4px; }

/* ── Dialogs ── */
.team-dialog textarea { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 4px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); color: var(--ink); font: 400 14px/1.5 var(--sans); resize: vertical; }
.team-dialog textarea:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px var(--selection); }
.team-dialog .account-note { margin: 0 0 16px; }
.team-dialog .account-note.is-wrong { color: var(--admin-bad); }
.team-dialog .account-primary.is-danger { background: var(--admin-bad); border-color: var(--admin-bad); }
.team-add-result { margin: 0 0 10px; font-size: 16px; }
.team-add-result b { font-weight: 600; }
.team-add-reasons { margin: 0; padding: 0 0 0 18px; font-size: 13.5px; color: var(--ink-2); }

/* A segmented choice: radios drawn as one strip, the chosen one raised. */
.team-segment { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); }
.team-segment legend { float: left; margin: 0 10px 0 6px; padding: 0; font: 500 12.5px/30px var(--sans); color: var(--ink-2); }
.team-segment label { position: relative; display: inline-flex; margin: 0; }
.team-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.team-segment span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 7px; font: 500 13px/1 var(--sans); color: var(--ink-2); cursor: pointer; transition: background .12s, color .12s; }
.team-segment span:hover { color: var(--ink); }
.team-segment input:checked + span { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--admin-raise); }
.team-segment input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 1px; }
.team-dialog .team-segment { margin: 0 0 16px; }

/* ── Usage, Activity, Statements ── */
.team-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
.team-custom { display: inline-flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.team-custom[hidden] { display: none; }
.team-custom label { display: grid; gap: 4px; font: 500 12px/1.2 var(--sans); color: var(--ink-3); }
.admin-main a.team-csv { margin-left: auto; text-decoration: none; }
.admin-table tfoot td { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 0; font-weight: 500; }
.admin-table tfoot td:first-child { border-bottom-left-radius: calc(var(--admin-radius) - 1px); }
.admin-table tfoot td:last-child { border-bottom-right-radius: calc(var(--admin-radius) - 1px); }

.team-statement-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
.team-statement-bar label { font: 500 13px/1 var(--sans); color: var(--ink-2); }
.team-bar-gap { flex: 1; }
.admin-main .team-statement-bar a.team-csv { margin-left: 0; }
.team-statement { padding: 28px 32px 24px; }
.team-statement-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--ink); }
.admin-main .team-statement-head h2 { margin: 0 0 10px; font: 500 13px/1.4 var(--sans); color: var(--ink-2); }
.team-statement-org { margin: 0; font: 600 26px/1.2 var(--sans); letter-spacing: -.02em; }
.team-statement-head .account-note { margin: 4px 0 0; }
.team-statement-head dl { display: grid; gap: 6px; margin: 0; font-size: 13px; }
.team-statement-head dl div { display: flex; gap: 12px; justify-content: space-between; }
.team-statement-head dt { color: var(--ink-3); }
.team-statement-head dd { margin: 0; text-align: right; font-weight: 500; }
.team-statement-lines { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 14px; }
.team-statement-lines th, .team-statement-lines td { padding: 11px 0 11px 16px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.team-statement-lines th:first-child { padding-left: 0; }
.team-statement-lines thead th { padding-top: 6px; font: 500 12px/1.4 var(--sans); color: var(--ink-3); }
.team-statement-lines .admin-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.team-statement-lines tbody th small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.team-statement-lines .is-balance th, .team-statement-lines .is-balance td { font-weight: 600; }
.team-statement-lines .is-closing th, .team-statement-lines .is-closing td { border-top: 1px solid var(--ink); border-bottom: 0; }
.admin-main .team-statement h3 { margin: 0 0 12px; font: 600 14px/1.4 var(--sans); }
.team-statement .admin-table-wrap { box-shadow: none; }
.team-statement > .account-note { margin-top: 12px; }

@media (max-width: 900px) {
  .team-split { grid-template-columns: minmax(0, 1fr); }
  .team-side-head { display: none; }
}
@media (max-width: 640px) {
  .team-hero { padding: 20px 18px 18px; }
  .team-hero-of { text-align: left; }
  .team-burn-panel, .team-alerts, .team-top { padding: 16px; }
  .team-chart { height: 180px; }
  .team-statement { padding: 20px 16px; }
  .team-statement-head dl div { justify-content: flex-start; }
  .admin-main a.team-csv { margin-left: 0; }
  .team-members-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .team-segment span { transition: none; }
}

/* A statement prints as the page itself: no bar, no sidebar, no controls. */
@media print {
  html, html[data-theme="dark"], html:not([data-theme]) {
    --paper: #fff; --paper-2: #f7f7f4; --ink: #171a19; --ink-2: #4f5351; --ink-3: #6e726f; --line: #e5e7e3; --line-2: #d1d5cf;
  }
  .admin-bar, .admin-side, .team-statement-bar, .admin-page-head, .toast, #team-error, #logout-error { display: none !important; }
  .admin-workspace { display: block; background: none; min-height: 0; }
  .admin-page { padding: 0; }
  .team-statement { border: 0; box-shadow: none; padding: 0; }
  .team-statement .admin-table-wrap { border: 0; overflow: visible; }
  .team-statement .admin-table { min-width: 0 !important; }
  .team-fig[data-credits]:is(:hover, :focus-visible)::after { content: none; }
}