/* css/views/environment.css
   Environment section of the account panel (src/account/environment.js):
   the team's storage, its files and its API keys. Everything is drawn from
   tokens.css so both themes hold; the meter is the Billing card's .use-*
   recipe, the tables are the panel's .adm-table. */

.ev-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.ev-id { min-width: 0; flex: 1 1 320px; }
.ev-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.ev-name { margin: 0; }
.ev-owner { margin-top: 4px; }
.ev-actions { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ev-meter { margin-top: 14px; }
.ev-note { margin: 10px 0 0; }

/* files */
.ev-upload-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.ev-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.ev-status { color: var(--muted); font-size: .86rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ev-table td { vertical-align: middle; }
.ev-name-cell { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; }
.ev-actions-cell { white-space: nowrap; }
.ev-actions-cell .btn + .btn { margin-left: 6px; }
.ev-muted-row td { color: var(--muted); }

/* keys */
.ev-key-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ev-key-row .acct-input { flex: 1 1 260px; min-width: 0; }
.ev-scopes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* THE BRAND-TINTED NOTE BOX (2026-10-05): one tint for a result, a status line, a flash and the test-lane banner, here, in
   team.css and in admin.css; each keeps its own margin, padding and type. */
.ev-key-result, .ev-conn-result, .tm-invite-result, .tm-status, .tm-scopes-yours, .na-flash, .lic-banner.is-test {
  border-radius: var(--radius-ctl);
  border: 1px solid color-mix(in srgb, var(--brand-600) 32%, transparent);
  background: color-mix(in srgb, var(--brand-600) 8%, transparent);
}
.ev-key-result { margin-top: 12px; padding: 12px 14px; }
.ev-key-result p { margin: 0 0 8px; font-size: .88rem; line-height: 1.5; }
.ev-key-result p b { color: var(--card-title); }
.ev-key-result code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; }
.ev-key, .ev-prefix { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .8rem; }
.ev-count { margin: 12px 0 6px; }

/* lanes: Live | Sandbox, a pill switch on the summary card */
.ev-lanes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0 4px; }
.ev-lane { padding: 6px 14px; border-radius: var(--radius-btn-sm); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: transparent; color: var(--muted); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
.ev-lane:hover { border-color: color-mix(in srgb, var(--brand-600) 60%, transparent); color: var(--card-title); }
/* .ev-lane.is-on: the one chosen tint, with the tabs, below the Domains tabs (2026-10-05) */
.ev-lane:disabled { cursor: default; opacity: 1; }
.ev-lane { min-height: var(--ctl-h, 36px); }
.acct-grid-tail { margin-top: 14px; }
.ev-lane:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.ev-lane .acct-tag { margin-left: 6px; font-size: .68rem; vertical-align: middle; }
.ev-lane-hint { font-size: .84rem; color: var(--muted); margin-left: 4px; }
@media (max-width: 640px) { .ev-lane-hint { flex-basis: 100%; margin-left: 0; } }

/* the destructive and armed buttons live in css/components/buttons.css (panel actions), drawn from the theme's tokens */

/* connected accounts: a provider picker, then that provider's own fields */
.ev-conn-add { margin-top: 4px; }
.ev-conn-add .ev-key-row .acct-select { flex: 1 1 260px; }
.ev-conn-fields { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 12px; }
.ev-conn-field { display: grid; gap: 5px; min-width: 0; }
.ev-conn-field-label { font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.ev-conn-field .acct-input { width: 100%; min-width: 0; }
.ev-conn-result {
  margin-top: 12px; padding: 10px 14px;
  color: var(--card-title);
}

@media (max-width: 640px) {
  .ev-key-row .acct-input { flex-basis: 100%; }
  .ev-actions-cell .btn + .btn { margin-left: 0; margin-top: 4px; }
  .ev-conn-fields { grid-template-columns: 1fr; }
}

/* domains */
.ev-domains { display: grid; gap: 10px; margin-top: 12px; }
.ev-dom { border: 1px solid var(--border); border-radius: var(--radius-ctl); padding: 10px 12px; background: var(--surface-3); }
.ev-dom-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ev-dom-host { font-weight: 700; color: var(--card-title); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere; }
.ev-dom-when { color: var(--muted); font-size: .84rem; }
.ev-dom-note { margin: 8px 0 0; font-size: .86rem; }
.ev-record { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; margin-top: 8px; font-size: .86rem; }
.ev-record dt { margin: 0; color: var(--muted); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.ev-record dd { margin: 0; min-width: 0; }
.ev-record code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; overflow-wrap: anywhere; color: var(--card-title); }
.ev-dom-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ev-dom-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ev-dom-row .acct-input { flex: 1 1 260px; min-width: 0; }
.ev-dom-link .acct-select { flex: 0 1 240px; min-width: 0; }
.ev-dom-door { margin-top: 6px; }
.ev-dom-dns { color: var(--muted); }
.ev-dom-ns { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ev-dom-ns li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ev-dom-ns code { font-size: .95rem; }
.ev-dom-recs { margin-top: 10px; }
.ev-dom-recs code { font-size: .8rem; word-break: break-all; }
.ev-dom-more { margin-top: 10px; }
.ev-dom-more summary { cursor: pointer; font-size: .9rem; color: var(--muted); }
.ev-dom-zonefile, .ev-dom-names { width: 100%; margin-top: 8px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; }
.ev-registrant { margin-top: 10px; }
/* A taken name's alternatives: one button per name, the price beside it. */
.ev-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.ev-suggest-btn { display: inline-flex; align-items: baseline; gap: 8px; }
.ev-suggest-name { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.ev-suggest-price { color: var(--muted); font-size: .82rem; font-weight: 500; }
@media (max-width: 640px) {
  .ev-record { grid-template-columns: 1fr; gap: 2px; }
  .ev-record dt { margin-top: 6px; }
  .ev-dom-row .acct-input { flex-basis: 100%; }
}

/* registration through PragOptics */
.ev-reg-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 10px; }
.ev-reg-form .acct-label { margin: 8px 0 2px; font-size: .78rem; color: var(--muted); }
.ev-reg-form .acct-input { width: 100%; box-sizing: border-box; }
.ev-agree { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: .86rem; color: var(--muted); cursor: pointer; }
.ev-agree input { accent-color: var(--brand-600); width: 15px; height: 15px; margin: 3px 0 0; flex: none; }
.ev-pay { margin: 12px 0; }
@media (max-width: 640px) { .ev-reg-form { grid-template-columns: 1fr; } }
.ev-renew { margin-top: 8px; }
/* The second door on the Connected accounts card: a Stripe account the platform opens for the customer. */
.ev-conn-managed { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ev-conn-needs { margin-top: 4px; font-size: .86em; white-space: normal; color: inherit; max-width: 44ch; }
.ev-conn-managed .ev-key-row { margin-top: 6px; }

/* ---- 2026-09-17: one line per card until opened, icon buttons, tabs ---- */
.ev-cards { display: grid; gap: 10px; margin-top: 12px; }
.ev-card { padding: 0; overflow: hidden; }
.ev-card-head { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 0; }
.ev-card-toggle { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ev-card-toggle:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ev-card-toggle:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
.ev-card-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--brand-600); background: color-mix(in srgb, var(--brand-600) 12%, transparent); flex: none; }
.ev-card-ico .ev-ico { width: 16px; height: 16px; }
.ev-card-title { font-weight: 700; flex: none; }
.ev-card-sum { color: var(--muted); font-size: .86rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.ev-card-chev { color: var(--muted); flex: none; transition: transform 160ms ease; }
.ev-card.is-open .ev-card-chev { transform: rotate(180deg); }
.ev-card-explain { flex: none; }
.ev-card-explain .explain-link { font-size: .82rem; }
.ev-card-body { padding: 4px 16px 16px; border-top: 1px solid var(--border); }
.ev-card-body[hidden] { display: none; }
.ev-card-body > .ev-key-row:first-child, .ev-card-body > .ev-dom-row:first-child, .ev-card-body > .ev-conn-add:first-child { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .ev-card-chev { transition: none; } }

/* icon buttons: css/components/buttons.css (panel actions) */
.btn.ev-btn-ico { display: inline-flex; align-items: center; gap: 6px; }
.btn.ev-btn-ico .ev-ico { width: 15px; height: 15px; }
.btn.is-spinning .ev-ico { animation: evSpin 900ms linear infinite; }
@keyframes evSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-spinning .ev-ico { animation: none; } }
/* the panel's one busy helper (src/account/cards.js busy()): a picker or a field whose request is out gets a turning
   word beside it, the way a button turns its own icon */
.busy-note { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--muted); font-size: .8rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.busy-note .ev-ico { flex: none; width: 14px; height: 14px; color: var(--brand-600); animation: evSpin 900ms linear infinite; }
@media (prefers-reduced-motion: reduce) { .busy-note .ev-ico { animation: none; } }
.ev-actions-cell .btn + .btn { margin-left: 4px; }
.ev-owner { margin: 2px 0 0; font-size: .84rem; }
.ev-more { border: 0; background: transparent; color: var(--brand-600); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; padding: 0 0 0 6px; }
.ev-more:hover { text-decoration: underline; }
.use-name .acct-tag { margin-left: 8px; vertical-align: middle; }
.ev-summary .ev-status:empty { display: none; }

/* tabs on the Domains card */
.ev-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ev-tab { padding: 6px 12px; border-radius: var(--radius-btn-sm); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: transparent; color: var(--muted); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
.ev-tab:hover { border-color: color-mix(in srgb, var(--brand-600) 60%, transparent); color: var(--card-title); }
.ev-tab:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.ev-tabs + .ev-dom-row { margin-top: 10px; }
/* the guided domain wizard (2026-10-09): two spelled-out choices, then a walk for each */
.ev-dom-lead { margin-top: 12px; }
.ev-dom-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ev-dom-pick { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico t" "ico d"; gap: 2px 10px; text-align: left; padding: 14px; border-radius: var(--radius-ctl); border: 1px solid var(--border); background: var(--surface-3); color: var(--card-title); font: inherit; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; }
.ev-dom-pick:hover { border-color: color-mix(in srgb, var(--brand-600) 60%, transparent); }
.ev-dom-pick:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.ev-dom-pick.is-on { border-color: var(--brand-600); background: color-mix(in srgb, var(--brand-600) 10%, var(--surface-3)); box-shadow: inset 0 0 0 1px var(--brand-600); }
.ev-dom-pick-ico { grid-area: ico; color: var(--brand-600); align-self: start; display: inline-flex; }
.ev-dom-pick-t { grid-area: t; font-weight: 700; }
.ev-dom-pick-d { grid-area: d; color: var(--muted); font-size: .86rem; font-weight: 400; }
.ev-dom-ways { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.ev-dom-way { padding: 5px 10px; border-radius: var(--radius-btn-sm); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
.ev-dom-way:hover { color: var(--card-title); border-color: color-mix(in srgb, var(--brand-600) 60%, transparent); }
.ev-dom-way:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.ev-dom-way.is-on { background: color-mix(in srgb, var(--brand-600) 14%, transparent); color: var(--card-title); border-color: var(--brand-600); }
@media (max-width: 640px) { .ev-dom-choose { grid-template-columns: 1fr; } }
/* THE CHOSEN TAB OR SEGMENT (2026-10-05): the tint buttons.css gives .btn[aria-selected="true"], on every tab and segment of
   the panel and the pages (the desks' .adm-tab, the lanes and the Domains tabs, the Warranty page's Register and Transfer,
   the plan selector's cadence). Each keeps its own size and shape. This file loads last of the views, so it holds on hover. */
.adm-tab.is-active, .ev-tab.is-on, .ev-lane.is-on, .wr-tab.is-active, .pc-toggle-btn.is-active {
  color: var(--brand-600);
  border-color: color-mix(in srgb, var(--brand-600) 55%, transparent);
  background: color-mix(in srgb, var(--brand-600) 12%, transparent);
}

/* the connections table: the name on one line, provider and kind under it */
.ev-conn-name { display: block; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.ev-conn-kind { display: block; font-size: .78rem; }
.ev-link-box { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-ctl); border: 1px solid var(--border); background: var(--surface-3); }
.ev-link-box .ev-code { flex: 1 1 auto; font-size: .8rem; }
/* A card never grows past its column: the tables inside scroll, the card does not. */
.ev-cards > * { min-width: 0; }
.ev-card, .ev-card-body { min-width: 0; max-width: 100%; }
.ev-card-body .adm-table-scroll { max-width: 100%; }

/* The account main column is a size container (admin.css .adm-main): the rules below read ITS width, so a tablet with the sidebar beside it stacks like a phone. */
/* ---- 2026-09-17, second pass: the head line holds together at every width; tables stack on a phone; nothing touches ---- */
.ev-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; flex-wrap: wrap; cursor: default; }
.ev-card-head:hover { background: transparent; }
.ev-card-title { margin: 0; font-weight: 700; color: var(--ink); flex: none; }
.ev-card-sum { flex: 1 1 12rem; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; }
.ev-card-toggle { flex: none; width: 30px; height: 30px; margin-left: auto; padding: 0; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.ev-card-toggle:hover { border-color: var(--border); color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ev-card-toggle .ev-ico { transition: transform 160ms ease; }
.ev-card.is-open .ev-card-toggle .ev-ico { transform: rotate(180deg); }
.ev-card-chev { display: none; }
.ev-card-explain { flex: none; display: inline-flex; }
.ev-card-body { padding: 2px 16px 16px; }
.ev-card-body > :first-child { margin-top: 10px; }
.ev-summary .ev-head { gap: 16px; }
.ev-summary .ev-actions { align-items: center; }
.ev-tags { gap: 8px; }
.ev-lanes { margin: 16px 0 8px; }
.use-head { flex-wrap: wrap; gap: 6px 12px; }
.use-name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.use-name .acct-tag { margin-left: 0; }
.ev-more { margin-left: auto; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-btn-sm); font-size: .78rem; font-weight: 600; color: var(--brand-600); background: transparent; }
.ev-more:hover { text-decoration: none; border-color: var(--brand-600); }
a.ev-more { text-decoration: none; white-space: nowrap; }
.ev-summary .ev-meter { margin-top: 12px; }
@container (max-width: 640px) {
  .ev-card-head { padding: 12px 10px 12px 14px; }
  .ev-card-sum { flex-basis: 100%; order: 5; padding-left: 40px; margin-top: -4px; }
  .ev-card-toggle { margin-left: auto; }
  .ev-summary .ev-actions { width: 100%; }
  /* tables become stacked rows: each cell labeled by its column */
  .account .adm-table--wrap thead { display: none; }
  .account .adm-table--wrap, .account .adm-table--wrap tbody, .account .adm-table--wrap tr, .account .adm-table--wrap td { display: block; width: 100%; box-sizing: border-box; }
  .account .adm-table--wrap tr { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 8px 0; background: var(--surface-3); }
  .account .adm-table--wrap td { border: 0; padding: 4px 0; white-space: normal; overflow: visible; text-overflow: clip; text-align: left; }
  .account .adm-table--wrap td[data-th]::before { content: attr(data-th); display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
  .account .adm-table--wrap td:empty { display: none; }
  /* only a table whose rows stack gives up its scroll; every other wide table keeps scrolling inside its own frame */
  .account .adm-table-scroll:has(> .adm-table--wrap) { overflow: visible; border: 0; }
  /* the action cell as a row of buttons with room between them: the selector carries td so it outranks the block rule above
     (2026-09-29: on the Tenants desk the three icons touched, because that rule won and the buttons ran together inline) */
  .account .ev-actions-cell, .account .adm-table--wrap td.tm-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 8px; }
  .account .ev-actions-cell .btn + .btn, .account .adm-table--wrap td.tm-actions .btn + .btn { margin: 0; }
  .ev-conn-name, .ev-conn-kind { white-space: normal; }
}
@container (max-width: 640px) {
  .account .adm-table--wrap td.cell-ellip, .account .adm-table--wrap td.cell-tight { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
@container (max-width: 640px) {
  /* the table itself must not keep its desktop minimum once its rows stack */
  .account .adm-table--wrap, .account .adm-table--wrap tr, .account .adm-table--wrap td { min-width: 0; max-width: 100%; }
}

/* Licensing (2026-09-18): the account's facts, the price on a catalog row. */
.lic-facts { display: grid; gap: 8px 16px; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; }
.lic-fact { display: contents; }
.lic-k { color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.lic-v { min-width: 0; font-size: .9rem; }
.lic-name { font-weight: 600; }
.lic-desc { font-size: .8rem; }
.lic-price { white-space: nowrap; }
.lic-table td { vertical-align: top; }
/* the add box under the catalog, the seat controls on a row, past licenses folded away (2026-09-22) */
.lic-add { margin: 14px 0 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--brand-600) 5%, transparent); }
.lic-add .acct-card-h { margin: 0; }
.lic-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lic-qty { width: 72px; flex: none; padding: 6px 8px; }
.lic-past { margin-top: 12px; }
.lic-past summary { cursor: pointer; font-size: .84rem; color: var(--muted); }
.lic-suffix { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-ctl); background: var(--grad); overflow: hidden; }
.lic-suffix:focus-within { border-color: color-mix(in srgb, var(--brand-600) 45%, transparent); }
.lic-suffix .acct-input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.lic-suffix span { flex: none; display: flex; align-items: center; padding: 0 12px; font-size: .84rem; color: var(--muted); white-space: nowrap; border-left: 1px solid var(--border); }
.ev-agree + .acct-actions-row { margin-top: 16px; }
.lic-ms-tabs { margin: 0 0 4px; }
.lic-span { grid-column: 1 / -1; }
.lic-hint { margin: 6px 0 0; font-size: .8rem; color: var(--muted); }

/* the catalog (2026-09-22): search, kinds, filters, a compact list whose rows open into cards */
.lic-cat-tools { display: grid; gap: 10px; margin-bottom: 6px; }
.lic-cat-q { width: 100%; box-sizing: border-box; }
.lic-cat-kinds { margin-top: 0; }
@media (max-width: 640px) {
  /* on a phone the kinds are one swipeable row; the cut-off chip says there is more */
  .lic-cat-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-right: -14px; padding-right: 14px; }
  .lic-cat-kinds::-webkit-scrollbar { display: none; }
}
.lic-cat-kinds .ev-tab { flex: none; }
.lic-cat-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lic-cat-selects label { display: grid; gap: 4px; min-width: 0; }
.lic-cat-selects .acct-input { width: 100%; box-sizing: border-box; }
.lic-cat-count { margin: 4px 0 8px; }
.lic-list { display: grid; gap: 8px; }
.lic-item { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.lic-item.is-open { border-color: color-mix(in srgb, var(--brand-600) 45%, var(--border)); }
.lic-item-head { display: grid; gap: 6px; width: 100%; padding: 12px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lic-item-head:hover { background: color-mix(in srgb, var(--brand-600) 5%, transparent); }
.lic-item-head:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
.lic-item-name { font-weight: 600; font-size: .92rem; line-height: 1.35; overflow-wrap: anywhere; }
.lic-item-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* .lic-tag: the one tag, .acct-tag in account.css (2026-10-05) */
.lic-from { font-size: .8rem; font-weight: 600; color: var(--card-title, var(--ink)); }
.lic-item-body { padding: 0 14px 14px; display: grid; gap: 12px; }
.lic-item-desc { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--muted); }
.lic-item-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.lic-item-facts .lic-k { display: block; margin-bottom: 4px; }
.lic-item-prices { display: grid; gap: 8px; }
.lic-offer { display: grid; gap: 2px; }
.lic-offer.is-off { opacity: .55; }
.lic-offer-terms { font-size: .8rem; color: var(--muted); }
.lic-item-body .lic-add { margin: 0; }
.lic-item-body .acct-actions-row { margin: 0; }
.lic-more { margin-top: 10px; justify-content: center; }
.lic-enroll { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--brand-600) 35%, var(--border)); border-radius: 12px; }
.lic-enroll .acct-card-note, .lic-enroll .acct-actions-row { margin: 0; }
.lic-seat-mail { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* the operator's licensing charges: each subscription, its items, a charge with no license in red */
.lic-bill { display: grid; gap: 10px; margin: 10px 0; }
.lic-bill-sub { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.lic-bill-sub.is-canceled { opacity: .6; }
.lic-bill-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .82rem; }
.lic-bill-head .ev-code { overflow-wrap: anywhere; }
.lic-bill-item { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.lic-bill-item .lic-name { overflow-wrap: anywhere; }
@container (min-width: 560px) {
  .lic-bill-item { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px; }
}
.lic-bill-item.is-orphan { background: color-mix(in srgb, #d0342c 8%, transparent); }

/* the licenses held, wide: each column keeps room for its words (a state is a sentence), nothing forced to one line */
@container (min-width: 641px) {
  .lic-table td[data-th="License"] { min-width: 7.5rem; }
  .lic-table td.lic-seats-cell { min-width: 5.5rem; max-width: 11rem; }
  .lic-table td[data-th="Status"] { min-width: 8.5rem; }
  .lic-table td[data-th="Given to"] { min-width: 8.5rem; }
}
/* the licenses held, on a phone: the license-seat box and its buttons on one line, an armed question wrapping under */
@container (max-width: 640px) {
  .lic-acts { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .lic-acts .lic-qty { width: 88px; }
}
@media (max-width: 640px) {
  .lic-cat-selects { grid-template-columns: 1fr 1fr; }
  .lic-add .ev-reg-form { grid-template-columns: 1fr 1fr; }
}
@container (max-width: 640px) {
  .lic-facts { grid-template-columns: 1fr; gap: 4px; }
  .lic-fact { display: block; }
  .lic-k { display: block; }
}

/* A row's own result or link sits directly under that row (2026-09-19), never at the top of the card. */
.ev-note-row td, .ev-link-row td { padding-top: 0; background: color-mix(in srgb, var(--brand-600) 4%, transparent); }
.ev-row-note { margin: 0; padding: 8px 0 10px; max-width: none; }
.ev-note-row td .acct-error { margin: 6px 0 8px; }
.ev-link-row .ev-link-box { margin-top: 0; }
.ev-link-row .ev-note { margin: 8px 0 4px; }

/* Data card (2026-09-19): a table's rows, a row's value. */
.ev-data-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ev-data-head .ev-btn-ico svg { transform: rotate(90deg); }
.ev-value { margin: 8px 0 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-3); font: .78rem/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; color: var(--ink); }

/* AI card (2026-09-19). */
.ev-ai-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* The AI switch (2026-09-19): one slider, the state in words beside it. */
.ev-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.ev-switch.is-locked { cursor: default; }
.ev-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ev-switch-track { position: relative; width: 44px; height: 24px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background 160ms ease; flex: 0 0 auto; }
.ev-switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--card-title); box-shadow: 0 1px 3px color-mix(in srgb, var(--shade) 25%, transparent); transition: transform 160ms ease; }
.ev-switch input:checked + .ev-switch-track { background: var(--brand-600); }
.ev-switch input:checked + .ev-switch-track .ev-switch-thumb { transform: translateX(20px); }
.ev-switch input:disabled + .ev-switch-track { opacity: .55; }
.ev-switch input:focus-visible + .ev-switch-track { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.ev-switch-text { font-weight: 600; font-size: .9rem; }
/* The same switch drawn as a button (Billing's pay as you go, 2026-09-29): a button, so the panel's two-press confirm
   (cards.js armed()) can open it into its question when turning it on could charge money. aria-checked carries the state
   the checkbox carries above; armed, it takes the shared red .btn.is-armed look. */
.btn.ev-switch:not(.is-armed) {
  gap: 10px; min-height: var(--ctl-h); padding: 4px 10px 4px 2px; border: 1px solid transparent; border-radius: var(--radius-btn-sm);
  background: transparent; color: var(--ink); font: inherit; box-shadow: none; transform: none; white-space: normal; text-align: left;
}
.btn.ev-switch:not(.is-armed):hover { background: color-mix(in srgb, var(--brand-600) 9%, transparent); border-color: transparent; color: var(--ink); transform: none; }
.btn.ev-switch:not(.is-armed):disabled:hover { background: transparent; }
.btn.ev-switch[aria-checked="true"] .ev-switch-track { background: var(--brand-600); }
.btn.ev-switch[aria-checked="true"] .ev-switch-thumb { transform: translateX(20px); }
.btn.ev-switch:disabled { opacity: 1; }
.btn.ev-switch:disabled .ev-switch-track { opacity: .55; }
.btn.ev-switch[aria-busy="true"] { cursor: progress; }
.btn.ev-switch[aria-busy="true"] .ev-switch-track { animation: tmSwSaving 900ms ease-in-out infinite alternate; }
.btn.ev-switch:focus-visible { outline: none; }
.btn.ev-switch:focus-visible .ev-switch-track { outline: 2px solid var(--brand-600); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .btn.ev-switch[aria-busy="true"] .ev-switch-track { animation: none; } }

/* A stored value as a card (2026-09-19). */
.ev-value-card { padding: 8px 0 10px; }
.ev-kv { display: flex; gap: 14px; align-items: flex-start; }
.ev-kv.is-nested { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ev-kv-list { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; min-width: 0; flex: 1 1 auto; }
.ev-kv-row { display: contents; }
.ev-kv-k { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.ev-kv-v { margin: 0; min-width: 0; font-size: .9rem; overflow-wrap: anywhere; }
.ev-val-text { white-space: pre-wrap; }
.ev-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-3); vertical-align: middle; }
.ev-thumb.is-lead { width: 120px; height: 120px; }
.ev-kv-img { flex: 0 0 auto; }
.ev-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ev-sub-table { margin: 4px 0; }
.ev-link { overflow-wrap: anywhere; }
@container (max-width: 640px) {
  .ev-kv { flex-direction: column; }
  .ev-kv-list { grid-template-columns: 1fr; gap: 2px; }
  .ev-kv-k { padding-top: 6px; }
}
/* the environment's rows of actions hold their icons on one line (2026-09-23 polish) */
.ev-actions-cell .act-row { flex-wrap: nowrap; justify-content: flex-end; }
.ev-dom-actions.act-row { display: flex; }
/* on a phone a row with two worded doors (a Microsoft 365 row waiting on an approval) wraps them instead of running off the card */
@container (max-width: 640px) {
  .account .ev-actions-cell .act-row { flex-wrap: wrap; justify-content: flex-start; max-width: 100%; }
}
/* the AI budget's row controls: the panel's fields, compact (they had no style and showed as the browser's own) */
.ev-budget-in { min-width: 0; width: 100%; font-size: .84rem; }
.ev-budget-num { max-width: 7rem; }
/* the operator's Pax8 card (2026-09-23) */
.p8-report { margin-top: 12px; }
.p8-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.p8-list li { padding: 8px 10px; border-radius: var(--radius-ctl); border: 1px solid var(--border); font-size: .86rem; line-height: 1.45; }
.p8-list li.is-warn { border-color: color-mix(in srgb, var(--gold-soft) 45%, transparent); background: color-mix(in srgb, var(--gold-soft) 8%, transparent); }
.p8-list li.is-bad { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.p8-ok { color: var(--brand-600); font-weight: 700; margin: 8px 0 0; }
.p8-hook { margin: 12px 0 8px; }
.p8-test { max-width: 26rem; }
.p8-events-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.p8-events { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.p8-events li { border: 1px solid var(--border); border-radius: var(--radius-ctl); padding: 6px 10px; font-size: .84rem; }
.p8-events summary { cursor: pointer; }
.p8-body { max-height: 18rem; overflow: auto; margin: 8px 0 2px; font-size: .74rem; }

/* ---- Licensing, Part 1 (2026-09-23): the words a state is in, the tab's notes, the tenant's name box, the owner's
   requests, who holds a bought license. Tokens only, so both themes hold; phone width first. ---- */

/* a Licensing card's title gives way on a phone, so its (i) and its fold stay on the title's line */
[data-card^="licensing:"] > .ev-card-head .ev-card-title { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 120px); }
/* a form's button row stands clear of the hint above it */
[data-card^="licensing:"] .ev-reg-form + .acct-actions-row, [data-card^="licensing:"] .lic-tn-form + .acct-actions-row { margin-top: 14px; }
[data-card^="licensing:"] .lic-hint + .acct-actions-row, [data-card^="licensing:"] .lic-facts + .acct-actions-row { margin-top: 10px; }
[data-card^="licensing:"] .ev-note + .lic-facts, [data-card^="licensing:"] .acct-error + .lic-facts { margin-top: 12px; }

/* a state in words: the one tag (account.css .acct-tag, with its is-verified, is-pending, is-bad and is-quiet, 2026-10-05),
   laid out as a flex row so its icon sits on the line and a sentence wraps inside it */
.lic-state { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; line-height: 1.4; overflow-wrap: anywhere; font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 3px 9px; }
.lic-state .ev-ico { width: 12px; height: 12px; flex: none; }
/* the product-name tag keeps its sentence face too (a license name is a proper noun, not a state) */
.lic-tag { font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: none; padding: 2px 8px; }
.lic-state .ev-code { color: inherit; }
.lic-table .lic-state { display: flex; width: fit-content; }
.lic-table .lic-state + .lic-state, .lic-count + .lic-state { margin-top: 6px; }
.lic-hint-inline { display: block; margin-top: 4px; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.lic-count { display: block; font-weight: 700; font-size: 1rem; color: var(--card-title, var(--ink)); }
.lic-sku { font-size: .74rem; color: var(--muted); overflow-wrap: anywhere; }
.lic-links { display: block; font-size: .84rem; }
.lic-mail-on { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }

/* the tab's notes under the head: the test lane, and read only while paused or after the plan ended */
.lic-banner { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); color: var(--ink); font-size: .88rem; line-height: 1.45; }
.lic-banner .ev-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }
/* .lic-banner.is-test: the brand-tinted note box (the .ev-key-result list above), on the banner's own corners */
.lic-banner.is-test { border-radius: 12px; }
.lic-banner.is-test .ev-ico { color: var(--brand-600); }
.lic-banner.is-paused { border-color: color-mix(in srgb, var(--gold-soft) 45%, transparent); background: color-mix(in srgb, var(--gold-soft) 10%, transparent); }
.lic-banner.is-paused .ev-ico { color: var(--gold-soft); }
.lic-role { margin-top: 6px; }

/* the licensing account: the business name changed in place, and the name confirmed before the account is made */
.lic-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lic-inline-form .acct-input { flex: 1 1 14rem; min-width: 0; }
.lic-v .btn-ico { vertical-align: middle; margin-left: 6px; }
.lic-confirm { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--brand-600) 35%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--brand-600) 5%, transparent); }
.lic-confirm .acct-card-note, .lic-confirm .acct-actions-row, .lic-confirm .lic-hint { margin: 0; }
.lic-confirm strong { color: var(--card-title, var(--ink)); overflow-wrap: anywhere; }

/* the tenant's name box: the rule under it, a refusal under it in red (decision 2) */
.lic-tn-form { display: grid; gap: 4px; margin: 10px 0 12px; }
.lic-tn-form > * { min-width: 0; }
.lic-tn-form .acct-label { margin: 0 0 4px; }
.lic-suffix.is-bad { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
/* .lic-field-err: the one red error line, .acct-error in account.css (2026-10-05) */

/* who holds a bought license (MINE M10) */
.lic-holders { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; min-width: 0; }
.lic-holder { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.lic-holder .ev-code { font-size: .8rem; overflow-wrap: anywhere; }
.lic-give { display: flex; gap: 6px; align-items: center; width: 100%; max-width: 22rem; }
.lic-give .acct-input { flex: 1 1 0; width: auto; min-width: 0; }

/* the owner's requests and each person's own (decision 4) */
.lic-reqs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.lic-req { display: grid; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.lic-req.is-open { border-color: color-mix(in srgb, var(--gold-soft) 40%, var(--border)); }
.lic-req-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; }
.lic-req-kind { font-weight: 700; font-size: .9rem; color: var(--card-title, var(--ink)); }
.lic-req-who { font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.lic-req-when { font-size: .8rem; margin-left: auto; }
.lic-req-sum { margin: 0; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.lic-req-price { display: block; font-size: .84rem; line-height: 1.45; color: var(--muted); }
.lic-req-price strong { color: var(--card-title, var(--ink)); }
.lic-req-why { margin: 0; font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; }
.lic-req-decline { display: grid; gap: 6px; }
.lic-req-decline .acct-label { margin: 0; font-size: .8rem; color: var(--muted); }
.lic-req .acct-actions-row, .lic-req .lic-hint { margin: 0; }
.lic-past .lic-reqs { margin-top: 10px; }
@container (max-width: 640px) {
  .lic-req-when { margin-left: 0; flex-basis: 100%; }
  .lic-req .acct-actions-row .btn-lead { flex: 1 1 auto; justify-content: center; }
}

.ev-note.is-bad { color: var(--danger-text, var(--danger)); }

/* Your administrator account (2026-09-24, decision 29, src/account/licensingTenant.js): under the tenant's facts. On a
   phone the tenant's long suffix sits under the box rather than squeezing it. */
.lic-admin { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); min-width: 0; }
.lic-admin .lic-sub { margin: 0 0 6px; font-size: .92rem; color: var(--card-title, var(--ink)); }
@media (max-width: 560px) {
  .lic-suffix { flex-wrap: wrap; }
  .lic-suffix .acct-input { flex: 1 1 100%; }
  .lic-suffix span { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--border); padding: 6px 12px; white-space: normal; overflow-wrap: anywhere; }
}
/* the first password, shown once (decision 37(3)): the read-only box and its Copy button on one line, the box taking
   the room; it never overflows a phone */
.lic-pw { margin-top: 10px; min-width: 0; }
.lic-pw-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lic-pw-row .acct-input { flex: 1 1 auto; min-width: 0; font-size: .95rem; letter-spacing: .02em; }
/* Pax8 Part 2 (2026-09-27, licensingTenant.js): the connection under the tenant's facts, its licenses in use, and each
   verified domain as a row (host, state, one action), with Microsoft's TXT and the mail plan folding out under the row.
   On a phone the row wraps and the action drops under the host. */
.lic-sub--gap { margin-top: 14px; }
.lic-facts--tight { margin-top: 8px; }
.lic-dom-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.lic-dom { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.lic-dom-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.lic-dom-host { overflow-wrap: anywhere; }
.lic-dom-act { margin-left: auto; display: inline-flex; gap: 6px; }
.lic-txt { margin-top: 8px; min-width: 0; }
.lic-plan { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); min-width: 0; }
.lic-plan-list { margin: 4px 0 8px; padding-left: 18px; display: grid; gap: 4px; }
.lic-plan-list li { overflow-wrap: anywhere; }
.lic-plan-list .lic-hint { margin: 2px 0 0; }
@media (max-width: 560px) {
  .lic-dom-act { margin-left: 0; flex: 1 1 100%; }
}