/* ==========================================================================
   AlcateIA platform · base design system, served at <any host>/cdn/main.css
   Taken from the geth design system (cdn.geth.app/v1/main.css, the one the deals login uses)
   and made product-neutral: the action colour is --accent, and each product paints it with
   its own theme (system/modules theme.color) through /cdn/theme.js.
   tokens -> base -> components. Components take their colours from the tokens only, so the
   dark theme and the product's colour reach all of them.
   One family for words (Morris, 23/10/2026): titles, labels, prices, numbers and running text are --font-sans, and
   every control (button, input, select, textarea) inherits it. --font-mono is only for what is code: ids, keys,
   codes, JSON, logs (.mono, .pill-code, code).
   ========================================================================== */

/* ---- 1. TOKENS -------------------------------------------------------- */
:root {
  /* light theme */
  --bg:            #faf9f7;
  --surface:       #ffffff;
  --ink:           #16181d;   /* text */
  --ink-soft:      #33373e;   /* text a step below --ink: code on a .pill-code */
  --muted:         #5c6066;   /* supporting text */
  --faint:         #a9ada6;   /* metadata, placeholder */
  --hairline:      #e7e5e0;   /* the main 1px border */
  --hairline-soft: #efede8;   /* a divider inside a card */
  --border:        #d8d5cf;   /* the border of an input or a secondary button */
  --border-strong: #b9beb4;   /* a card's border under the pointer */
  --fill:          #f1efea;   /* a muted tag, the track of a bar */
  --accent:         var(--product, #1fa860);   /* data + action; a product paints --product */
  --accent-tint:    color-mix(in srgb, var(--accent) 15%, #ffffff);
  --accent-sel:     color-mix(in srgb, var(--accent) 22%, #ffffff);   /* ::selection */
  --alert:         #b3541e;   /* a rise, a warning, an error */
  --alert-tint:    #f7e8dd;
  --primary:       var(--ink);   /* the primary button; -hover under the pointer */
  --primary-hover: #2a2e36;

  /* type */
  --font-sans: "Geist", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* shape */
  --r-card: 12px;
  --r-frame: 14px;
  --r-btn: 9px;
  --r-input: 10px;
  --r-pill: 99px;
  --shadow-data: 0 24px 48px -32px rgba(22,24,29,.25);

  /* layout */
  --wrap: 1120px;
  --wrap-narrow: 1040px;
  --gutter: 24px;
}

/* dark theme: the SAME names, other values.
   Use: <body data-theme="dark"> (a dark panel) OR <section data-theme="dark"> for a dark block
   inside a light page (hero, .read, CTA). .read and .pill-code are dark in both themes: they
   wear these tokens on themselves. */
[data-theme="dark"], .read, .pill-code {
  --bg:            #101318;
  --surface:       #171b22;
  --ink:           #f2f3f5;
  --ink-soft:      #c8cdd4;
  --muted:         #9aa0a8;
  --faint:         #5c6470;
  --hairline:      #262b34;
  --hairline-soft: #262b34;
  --border:        #2e343e;
  --border-strong: #5c6470;
  --fill:          #1b2028;
  --accent:         var(--product-dark, var(--product, #3ddc84));
  --accent-tint:    color-mix(in srgb, var(--accent) 18%, #101318);
  --alert:         #e8a06a;
  --alert-tint:    #2a2019;
  --primary:       var(--accent);
  --primary-hover: color-mix(in srgb, var(--accent) 80%, #ffffff);
}

/* ---- 2. BASE --------------------------------------------------------- */
/* Self-hosted fonts (the brand manual asks for it): the .woff2 files live in /cdn/fonts/. */
@font-face { font-family:"Geist"; font-weight:400; font-display:swap; src:url("/cdn/fonts/Geist-Regular.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-weight:500; font-display:swap; src:url("/cdn/fonts/Geist-Medium.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-weight:600; font-display:swap; src:url("/cdn/fonts/Geist-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-weight:700; font-display:swap; src:url("/cdn/fonts/Geist-Bold.woff2") format("woff2"); }
@font-face { font-family:"Geist Mono"; font-weight:400; font-display:swap; src:url("/cdn/fonts/GeistMono-Regular.woff2") format("woff2"); }
@font-face { font-family:"Geist Mono"; font-weight:500; font-display:swap; src:url("/cdn/fonts/GeistMono-Medium.woff2") format("woff2"); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent-sel); }
/* the browser gives controls its own face; here they wear the page's */
button, input, select, textarea { font-family: inherit; }
input:focus { outline: none; border-color: var(--ink) !important; }
input::placeholder { color: var(--faint); }

/* the "live" pulse, in the product's colour (var() resolves on the element that pulses) */
@keyframes gpulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- 3. LAYOUT ------------------------------------------------------- */
.wrap        { max-width: var(--wrap);        margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section     { padding-top: 88px; padding-bottom: 88px; }
.section--sm { padding-top: 48px; padding-bottom: 48px; }
.section--lg { padding-top: 96px; padding-bottom: 96px; }
.hairline-b  { border-bottom: 1px solid var(--hairline); }
.hairline-t  { border-top: 1px solid var(--hairline); }
/* a line of chips, tags or buttons that wraps by itself */
.chips { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---- 4. TYPE --------------------------------------------------------- */
.h1 { margin:0; font-size: clamp(38px,5vw,56px); line-height:1.06; font-weight:650; letter-spacing:-.035em; text-wrap: pretty; }
.h2 { margin:0; font-size: clamp(28px,3.4vw,38px); font-weight:650; letter-spacing:-.03em; }
.h3 { margin:0; font-size:17px; font-weight:600; }
.lead    { font-size:17px; line-height:1.6; color: var(--muted); max-width:60ch; text-wrap: pretty; }
/* a highlighted or closing sentence: medium weight, not a title */
.quote   { margin:0; font-size: clamp(22px,3vw,32px); line-height:1.35; font-weight:500; letter-spacing:-.025em; text-wrap: pretty; }
.body    { font-size:14.5px; line-height:1.6; color: var(--muted); max-width:60ch; }
.label   { font-size:12px; font-weight:500; letter-spacing:.14em; color: var(--accent); text-transform: uppercase; }
/* the same label as .label, but neutral: a card's number, a column's title */
.eyebrow { font-size:11px; font-weight:500; letter-spacing:.14em; color: var(--faint); text-transform: uppercase; }
.mono    { font-family: var(--font-mono); }   /* code only: an id, a key, a code */
.tiny    { font-size: 11px; }   /* small print: the surface's name beside the logo, a badge */
.num, .price { font-variant-numeric: tabular-nums; }   /* digits that line up, in the page's face */
.muted   { color: var(--muted); }
.faint   { color: var(--faint); }
.pos     { color: var(--accent); }
.neg     { color: var(--alert); }
.logo    { font-size:21px; font-weight:650; letter-spacing:-.02em; color: var(--ink); }
.logo .dot { color: var(--accent); }

/* ---- 5. BUTTONS ------------------------------------------------------ */
.btn { display:inline-block; font-family:inherit; font-size:14.5px; font-weight:500;
  padding:12px 20px; border-radius: var(--r-btn); border:1px solid transparent; cursor:pointer; transition: background .15s, border-color .15s, transform .15s; }
.btn-primary   { background: var(--primary); color: var(--bg); }
.btn-primary:hover { background: var(--primary-hover); color: var(--bg); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-block { display:block; width:100%; text-align:center; }

/* ---- 6. CHIPS / TAGS / CODE PILL ------------------------------------- */
.chip { display:inline-block; font-size:11.5px; color: var(--muted);
  border:1px solid var(--hairline); padding:4px 10px; border-radius: var(--r-pill); }
.tag  { display:inline-block; font-size:11.5px; font-weight:500; padding:3px 9px; border-radius: var(--r-pill); }
.tag-green { color: var(--accent); background: var(--accent-tint); }
.tag-alert { color: var(--alert); background: var(--alert-tint); }
.tag-muted { color: var(--muted); background: var(--fill); }
.pill-code { font-family: var(--font-mono); font-size:12.5px; color: var(--ink-soft); background: var(--surface);
  border:1px solid var(--hairline); padding:8px 14px; border-radius:10px; display:inline-block; }
.pill-code .verb { color: var(--accent); }
.pill-code-block { display:block; word-break:break-all; padding:12px 14px; font-size:11.5px; }

/* ---- 7. CARD / DATA FRAME -------------------------------------------- */
.card { background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r-card); }
.card-pad { padding:24px; }
.card-pad-lg { padding: clamp(32px,5vw,56px); }
.card-hover { transition: border-color .15s, transform .15s; }
.card-hover:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.frame { background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r-frame);
  box-shadow: var(--shadow-data); overflow:hidden; }
.frame-flat { box-shadow:none; }

/* the frame's title bar: the state of a collection, a mock's address, the time of the data */
.frame-head { display:flex; align-items:center; gap:8px; padding:12px 18px;
  border-bottom:1px solid var(--hairline-soft); font-size:12px; color: var(--muted); }
.frame-head .end { margin-left:auto; color: var(--faint); }

/* a window mock (three dots) and a UI skeleton inside a figure */
.mock-dots { display:flex; gap:6px; }
.mock-dots i { display:block; width:8px; height:8px; border-radius:50%; background: var(--border); }
.sk { display:block; height:8px; background: var(--border); border-radius:4px; }
.sk-on { background: var(--accent); opacity:.85; }
.bars { display:flex; align-items:flex-end; gap:8px; }
.bars > i { display:block; flex:1; background: var(--border); border-radius:4px 4px 0 0; }
.bars > i.on { background: var(--accent); }

/* a reading footer inside a card or frame (a note, a caveat, the data's source) */
.note    { border-top:1px solid var(--hairline-soft); padding:20px 24px; font-size:15px; line-height:1.6; }
.note-sm { border-top:1px solid var(--hairline-soft); padding:14px 24px;
  font-size:11.5px; line-height:1.6; color: var(--faint); }

/* data lines inside a card or frame */
.data-row { display:flex; align-items:baseline; gap:10px; padding:13px 20px; border-bottom:1px solid var(--hairline-soft); }
.data-row:last-child { border-bottom:0; }
.data-row .k { font-size:13.5px; color: var(--muted); }
.data-row .v { margin-left:auto; font-size:13.5px; color: var(--ink); text-align:right; font-variant-numeric: tabular-nums; }

/* ---- 8. STAT (big number + label) ----------------------------------- */
.stat .n { font-size:26px; font-weight:600; letter-spacing:-.02em; font-variant-numeric: tabular-nums; }
.stat .l { font-size:13px; color: var(--muted); margin-top:6px; }
.stat-sm .n { font-size:19px; letter-spacing:-.01em; }
.stat-lg .n { font-size:34px; letter-spacing:-.025em; }
.stat-xl .n { font-size: clamp(38px,4.4vw,50px); letter-spacing:-.03em; }

/* a strip of stats split by 1px lines (the "gap" is the hairline itself) */
.stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:1px; background: var(--hairline-soft); }
.stat-grid > .stat { background: var(--surface); padding:28px 24px; }
.stat-grid--wide { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.stat-grid--wide > .stat { padding:36px 30px; }

/* ---- 9. BAR (progress / spread) ------------------------------------- */
.bar { height:6px; background: var(--fill); border-radius: var(--r-pill); overflow:hidden; }
.bar > i { display:block; height:100%; background: var(--ink); border-radius: var(--r-pill); }

/* ---- 10. "LIVE" SIGNAL ---------------------------------------------- */
.live-dot { width:8px; height:8px; border-radius:50%; background: var(--accent); animation: gpulse 2.2s infinite; display:inline-block; }

/* ---- 11. HIGHLIGHT BLOCKS (dark) ------------------------------------ */
/* .panel = a big dark block (hero, manifesto, CTA). It asks for data-theme="dark" on the
   element itself: background, ink and lines then come from the tokens, with no loose hex. */
.panel { background: var(--bg); border-radius: var(--r-frame); padding: clamp(36px,5vw,64px); }
/* .section-dark = a dark section from edge to edge (no corners). It also asks for data-theme="dark". */
.section-dark { background: var(--bg); color: var(--ink); }

/* .read = a dark reading block; it wears the dark tokens by itself (see the dark theme above) */
.read { background: var(--bg); border-radius: var(--r-frame); padding: clamp(28px,4vw,40px); }
.read h3 { color: var(--ink); font-size: clamp(22px,2.8vw,28px); font-weight:650; letter-spacing:-.02em; margin:12px 0; }
.read p  { color: var(--muted); font-size:14.5px; line-height:1.65; margin:0; }
.read .hi { color: var(--accent); }

/* ---- 12. GRID UTILITIES --------------------------------------------- */
.grid { display:grid; gap:16px; }
.grid-auto  { grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
.grid-cards { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
/* two columns that become one when narrow: text + a data figure (hero, a section with a mock) */
.grid-split { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap:56px; align-items:center; }

/* ---- 12b. NUMBERED STEPS -------------------------------------------- */
.steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:28px; }
.step  { border-top:2px solid var(--hairline); padding-top:18px; }
.step-on { border-top-color: var(--accent); }
.step .n { font-size:11.5px; font-weight:500; color: var(--faint); margin-bottom:10px; font-variant-numeric: tabular-nums; }
.step p  { margin:0; font-size:15px; line-height:1.6; color: var(--muted); }

/* ---- 13. NAV / FOOTER ----------------------------------------------- */
.nav { position:sticky; top:0; z-index:50; background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom:1px solid var(--hairline); }
.nav-row   { display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px; }
.nav-links { display:flex; gap:22px; flex-wrap:wrap; font-size:14px; }
.nav-links a { color: var(--muted); }
.nav-end   { margin-left:auto; display:flex; gap:10px; align-items:center; }
.foot { font-size:13px; color: var(--faint); }

/* ---- 14. THE BELL ---------------------------------------------------- */
/* toasts (shell.js toast()): every word on what happened, at the bottom of every page that loads the shell (the
   admin, the console, the logins, deals.): "ok", "error" for refusals and checks, and the connection's own, "lost"
   (staying while the platform does not answer, a dot that breathes) and "back", in the alert's and the accent's
   tints, readable in the dark theme too */
.toasts { position: fixed; z-index: 100; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; gap: 8px;
  width: min(440px, calc(100vw - 32px)); }
.toast { display: flex; gap: 10px; align-items: center; padding: 10px 10px 10px 14px; border-radius: var(--r-card);
  background: var(--ink); color: var(--bg); font-size: 14px; box-shadow: 0 12px 32px rgb(0 0 0 / .18);
  animation: toast-in .18s ease-out; }
.toast > span { flex: 1; line-height: 1.45; }
.toast.tone-error { background: var(--alert); color: var(--surface); }
.toast button { font: inherit; font-size: 13px; background: none; border: 0; color: inherit; cursor: pointer;
  padding: 4px; display: grid; place-items: center; }
.toast-action { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.toast.tone-lost, .toast.tone-back { background: var(--alert-tint); color: var(--ink); border: 1px solid var(--alert);
  padding-right: 14px; }
.toast.tone-back { background: var(--accent-tint); border-color: var(--accent); }
.toast.tone-lost::before, .toast.tone-back::before { content: ""; flex: none; width: 8px; height: 8px;
  border-radius: 50%; background: var(--alert); animation: connection-wait 1.2s ease-in-out infinite; }
.toast.tone-back::before { background: var(--accent); animation: none; }
@keyframes connection-wait { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast::before { animation: none; } }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
/* the person's notices in the header of the admin and the console (shell.js bell()). The hover
   rule keeps the shells' own button:hover, which loads later, off the bell's border. */
.bell { position: relative; }
.bell > button, .bell > button:hover { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface); color: var(--muted); cursor: pointer; }
.bell .count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--alert); color: var(--surface); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.bell .bell-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: 0 16px 40px rgb(0 0 0 / .12); }
.bell .top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--hairline-soft); }
.bell .top .all { border: 0; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; padding: 0; }
.bell .item { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--hairline-soft); color: var(--ink); text-decoration: none; font-size: 13.5px; }
.bell .item span { color: var(--muted); }
.bell .item small { color: var(--faint); font-size: 11.5px; }
.bell .item.unread { background: var(--accent-tint); }
.bell .empty { padding: 18px 14px; color: var(--muted); font-size: 13.5px; }
.bell .pref { display: flex; gap: 8px; align-items: center; padding: 10px 14px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--hairline-soft); }
/* At 960 px and less both shells fold their menus and the header wraps, so the bell can sit anywhere in it: the panel
   hangs from the header's right gutter instead (the header is sticky, so it holds the panel once the bell does not),
   and on a 360 px phone it starts 16 px in from the left edge instead of past it. */
@media (max-width: 960px) {
  .bell { position: static; }
  .bell .bell-panel { right: 16px; }
}

/* ---- 15. THE CONNECTION ----------------------------------------------- */
/* Losing the platform is a toast (section 14: tone-lost, then tone-back), said once for every page (shell.js
   connection). */

/* ---- 16. PEOPLE'S PHOTOS ---------------------------------------------- */
/* a person's photo (shell.js photo()), where the admin and the console list people and in the console's header */
.photo { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle;
  background: var(--fill); }
td .photo { margin-right: 8px; }

/* ---- the confirm step (shell.js confirmButton, kit.js confirmStep): the question in words where the button was,
   beside a button that does it and Cancelar; the admin's and the console's */
.confirm-step { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 8px;
  border-radius: var(--r-btn); background: var(--alert-tint); font-size: 13.5px; }
.confirm-step .confirm-yes { background: var(--alert); color: var(--surface); border-color: var(--alert); }

/* ---- 17. THE HISTÓRICO -------------------------------------------------- */
/* Every list of what happened, on the admin and the console alike (shell.js historyList, T-2235): the filters in one
   card over the list; each entry when · what · who did it · what it is about · its result, and its detail opening in
   place under it. A row of columns where the list is wide, a card where it is narrow: a phone, or a side pane (a
   container query, so the same pane reads the same on any screen). The four results wear the same colours on every
   page: feito the accent's, falhou the alert's, recusado the alert's outline, pulado the muted fill; what is still
   going, an outline in the border's colour. */
.history { container-type: inline-size; display: grid; gap: 12px; min-width: 0; }
.history-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); }
.history-filters label { display: grid; gap: 4px; flex: 1 1 150px; max-width: 240px; font-size: 12.5px; font-weight: 500;
  color: var(--muted); }
.history-filters :is(select, input) { width: 100%; min-height: 38px; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--r-input); background: var(--surface); color: var(--ink); }
.history-fold { display: none; }
.history-box { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; }
/* bare: inside a pane or a card that frames it, the filters a line over the list and neither in a frame of its own */
.history.bare { gap: 0; }
.history.bare .history-box { border: 0; border-radius: 0; background: none; }
.history.bare .history-filters { border: 0; border-bottom: 1px solid var(--hairline-soft); border-radius: 0;
  background: none; }
.history-head { display: none; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 13px 16px;
  grid-template-areas: "what result" "who who" "about about" "at more" "detail detail";
  border-bottom: 1px solid var(--hairline-soft); font-size: 14px; line-height: 1.45; }
.history-entry:last-child { border-bottom: 0; }
.history-entry.is-alert { box-shadow: inset 3px 0 0 var(--alert); }
.history-at { grid-area: at; min-width: 0; }
.history-what { grid-area: what; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.history-what > strong { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.history-note { flex-basis: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; white-space: pre-line; }
.history-entry.is-failed .history-note { color: var(--alert); }
.history-actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.history-who { grid-area: who; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; color: var(--ink); }
.history-about { grid-area: about; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; color: var(--ink); }
.history-about.is-none { display: none; }
/* a page's own column of where (tetô's Ambiente), under what it is about on a phone */
.history-where { grid-area: where; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; color: var(--ink); }
.history-where.is-none { display: none; }
.history.has-where .history-entry {
  grid-template-areas: "what result" "who who" "about about" "where where" "at more" "detail detail"; }
.history-who a, .history-about a, .history-where a { color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.history-who a:hover, .history-about a:hover, .history-where a:hover { color: var(--accent); }
.history-label { margin-right: 6px; font-size: 12px; color: var(--faint); }
.history-result { grid-area: result; justify-self: end; }
.history-more { grid-area: more; justify-self: end; }
.history-when { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.history-exact { color: var(--faint); }
.history .history-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0;
  background: none; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; }
.history .history-toggle::after { content: "▾"; font-size: 11px; transition: transform .15s; }
.history .history-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.history .history-toggle:hover { color: var(--ink); }
.history-detail { grid-area: detail; min-width: 0; display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-input);
  background: var(--bg); font-size: 13.5px; }
.history-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.history-facts { margin: 0; display: grid; gap: 4px; }
.history-facts > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 12px; }
.history-facts dt { color: var(--muted); }
.history-facts dd { margin: 0; overflow-wrap: anywhere; }
.history-code { margin: 0; max-height: 320px; overflow: auto; font-family: var(--font-mono); font-size: 12px;
  line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-soft); }
.history-empty { padding: 28px 16px; display: grid; gap: 8px; justify-items: center; text-align: center;
  color: var(--muted); font-size: 14px; }
.history-empty strong { color: var(--ink); font-size: 15px; font-weight: 500; }
.history-empty p { margin: 0; max-width: 46ch; line-height: 1.55; }
.history-foot { padding: 10px 16px 14px; border-top: 1px solid var(--hairline-soft); }
.history-foot:has(> [hidden]) { display: none; }
.result { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; white-space: nowrap; }
.result::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.result-done { color: var(--accent); background: var(--accent-tint); }
.result-failed { color: var(--alert); background: var(--alert-tint); }
.result-refused { color: var(--alert); background: transparent; box-shadow: inset 0 0 0 1px var(--alert); }
.result-skipped { color: var(--muted); background: var(--fill); }
.result-waiting { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
/* a narrow list: more than two filters fold under one button ("Filtros (2)"), the facts of a detail stack */
@container (max-width: 799px) {
  .history-filters.folds { padding: 10px 14px; }
  .history-filters.folds > label { display: none; }
  .history-filters.folds.open > label { display: grid; }
  .history .history-fold { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0;
    background: none; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; }
  .history .history-fold::after { content: "▾"; font-size: 11px; color: var(--muted); }
  .history .history-fold[aria-expanded="true"]::after { content: "▴"; }
  .history-filters.folds.open > .history-fold { flex-basis: 100%; }
}
@container (max-width: 520px) {
  .history-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@container (min-width: 800px) {
  /* the columns the list shows, set by shell.js (--history-columns, --history-areas): when, what, who did it, what it
     is about, the result, the detail's button; the detail under them across the row */
  .history-head, .history-entry { grid-template-columns: var(--history-columns); }
  .history-entry, .history.has-where .history-entry { grid-template-areas: var(--history-areas); gap: 6px 16px;
    align-items: start; }
  .history-head { display: grid; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--hairline-soft);
    font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
  .history-head[hidden] { display: none; }
  .history-label { display: none; }
  .history-about.is-none, .history-where.is-none { display: block; }
  .history-when { display: grid; gap: 2px; }
  .history-result { justify-self: start; }
  .history-result .result { white-space: normal; border-radius: 10px; }   /* "esperando aprovação" in two lines */
}

/* ---- 17b. A CODE ON ITS WAY --------------------------------------------- */
/* The steps of one change that waits for codes (shell.js codeSteps: Sua conta's e-mail), numbered: the one the person
   is on marked in the accent, those before it done. The line that says where the code went and until when
   (codeWords) is the page's own paragraph. No flex gap: Safari 12 (the tetô wall's iPad) has none. */
.code-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-gap: 6px; font-size: 13.5px;
  line-height: 1.45; color: var(--faint); }
.code-steps li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  border-radius: 50%; border: 1px solid var(--hairline); vertical-align: 1px; }
.code-steps li.current { color: var(--ink); font-weight: 600; }
.code-steps li.current::before { background: var(--accent); border-color: var(--accent); }
.code-steps li.done { color: var(--muted); }
.code-steps li.done::before { content: "\2713"; width: auto; height: auto; border: 0; border-radius: 0;
  color: var(--accent); font-weight: 700; vertical-align: 0; }

/* ---- 17c. A REQUIRED FIELD ---------------------------------------------- */
/* The "*" after the title of a required field, on every form of the admin, the console and the logins: shell.js puts
   an empty span.req-mark (aria-hidden) in the title of each control with `required`, and takes it away when the field
   stops being one; the "*" is drawn here, so it never joins the title's words (what a screen reader says, what the
   kit names in "Confira os campos destacados"). In the alert's colour, the one the field's error takes too. */
.req-mark::after { content: "*"; margin-left: .15em; color: var(--alert); font-weight: 600; }

/* ---- 18. OLDER BROWSERS ------------------------------------------------ */
/* What an older browser lacks, put back where it carries meaning: an iPad that stays on iOS 12 (Safari 12, the tetô
   wall's) has no color-mix() (Safari 16.2), no clamp() (13.1) and no flex gap or inset (14.1; inset is how a browser
   without flex gap is told apart). Grid gap, min(), max() and custom properties it has. */
@supports not (color: color-mix(in srgb, red, red)) {
  :root { --accent-tint: var(--fill); --accent-sel: var(--fill); }
  [data-theme="dark"], .read, .pill-code { --accent-tint: var(--fill); --primary-hover: var(--accent); }
}
@supports not (font-size: clamp(1px, 1px, 1px)) {
  .h1 { font-size: 48px; }
  .h2 { font-size: 34px; }
  .quote { font-size: 27px; }
  .stat-xl .n { font-size: 44px; }
  .read h3 { font-size: 25px; }
  .card-pad-lg { padding: 44px; }
  .panel { padding: 48px; }
  .read { padding: 34px; }
}
@supports not (inset: 0) {
  .frame-head > * + *, .data-row > * + *, .toast > * + *, .bell .pref > * + *,
  .result > * + * { margin-left: 8px; }
  .chips > *, .confirm-step > * { margin: 3px 8px 3px 0; }
  .history-when > *, .history-what > *, .history-actions > * { margin-right: 8px; }
  .toast.tone-lost::before, .toast.tone-back::before { margin-right: 10px; }
}