/* Sibyla design tokens — extracted from the FDR interface prototype (Share 260827, discovery 07 §3),
   with the deliverable's proposed consolidations applied (two surface tints, one danger/success
   pair, 400/600/700/800 weights, 4-based spacing). Light theme only, as the prototype.
   Build 060200 @ 56126f8 (UI-0): typography re-based on the interface build's Branding sheet
   (body 14px / 1.42, page title 30, view title 22, section 16, table header 11 / rows 13, buttons
   13, metric label 11 / value 20; ordinary rows never bold) and the Form Standard components added
   at the end of this file. The values are asserted by tests/Sibyla.Tests.Browser/DesignTokenTests. */
:root {
  /* Brand */
  --sib-brand: #ec008c;
  --sib-brand-dark: #b9006d;
  --sib-brand-ink: #d4007e; /* the module word in «Sibyla Finance» (Share/Actual styles.css --sib-brand-ink) */
  --sib-brand-tint-bg: #fff6fb;
  --sib-accent: #fce7f3;
  --sib-brand-a10: rgba(236, 0, 140, .10);
  --sib-brand-a16: rgba(236, 0, 140, .16);
  --sib-brand-a22: rgba(236, 0, 140, .22);
  --sib-brand-a28: rgba(236, 0, 140, .28);
  --sib-brand-a52: rgba(236, 0, 140, .52);

  /* Ink / text (consolidated) */
  --sib-ink: #20242a;
  --sib-text-body: #33404d;
  --sib-text-label: #3c4652;
  --sib-muted: #65707d;
  --sib-muted-3: #9aa3ad;

  /* Surfaces & lines (consolidated) */
  --sib-surface: #ffffff;
  --sib-bg: #f6f7fb;
  --sib-surface-tint: #fbfcfe;
  --sib-surface-track: #f5f6f9;
  --sib-line: #e6e9ee;
  --sib-line-strong: #d8dee7;
  --sib-scrim: rgba(32, 36, 42, .32);
  --sib-pill-neutral-bg: rgba(17, 24, 39, .08);

  /* Status (consolidated pairs) */
  --sib-success: #087f5b;
  --sib-success-bg: #eefbf5;
  --sib-success-border: #cbe6da;
  --sib-warning: #b7791f;
  --sib-warning-bg: #fdf3e2;
  --sib-warning-border: #f0dcb6;
  --sib-danger: #b42318;
  --sib-danger-bg: #fff0ee;
  --sib-danger-border: #f3c9c5;
  --sib-danger-row-bg: #fff8f6;
  --sib-attention: #d99b26;
  --sib-attention-bg: #fff8e8;
  --sib-attention-text: #7a4e00;

  /* Typography */
  --sib-font-family: "Segoe UI", Roboto, Arial, sans-serif;
  --sib-fs-base: 14px; --sib-lh-base: 1.42; --sib-lh-tight: 1.2;
  --sib-fs-h1: 30px; --sib-fs-h2: 22px; --sib-fs-h3: 16px;
  --sib-fs-body: 14px; --sib-fs-td: 13px; --sib-fs-sm: 12px; --sib-fs-xs: 11px;
  /* Branding sheet scale (Build 060200) */
  --sib-fs-page-title: 30px; --sib-fs-view-title: 22px; --sib-fs-section-title: 16px;
  --sib-fs-subtitle: 13px; --sib-fs-label: 12px; --sib-fs-table-header: 11px; --sib-fs-table-row: 13px;
  --sib-fs-button: 13px; --sib-fs-metric-label: 11px; --sib-fs-metric-value: 20px; --sib-fs-pager: 13px;
  --sib-fw-regular: 400; --sib-fw-medium: 500; --sib-fw-semibold: 600; --sib-fw-bold: 700; --sib-fw-heavy: 800;

  /* Spacing (4-based) */
  --sib-sp-1: 4px; --sib-sp-2: 8px; --sib-sp-3: 12px; --sib-sp-4: 16px;
  --sib-sp-5: 20px; --sib-sp-6: 24px; --sib-sp-7: 32px;

  /* Radii */
  --sib-radius: 8px; --sib-radius-sm: 6px; --sib-radius-pill: 999px; --sib-radius-round: 50%;

  /* Shadows (ink base standardized) */
  --sib-shadow-ambient: 0 18px 50px rgba(32, 36, 42, .08);
  --sib-shadow-tooltip: 0 14px 28px rgba(32, 36, 42, .14);
  --sib-shadow-modal: 0 24px 60px rgba(32, 36, 42, .22);
  --sib-shadow-drawer: 18px 0 40px rgba(32, 36, 42, .16);

  /* Layout */
  /* Owner, 2026-10-07 ("maximize the screen use: /argus/pnl has space but the table scrolls sideways"): the content is fluid, as
     the Share's .app-content is — no 1180px cap — and a table may use the viewport's height instead of a fixed 620px. */
  --sib-container-max: none;
  --sib-topbar-h: 66px;
  --sib-sidenav-w: 224px;
  --sib-table-maxh: max(480px, calc(100vh - var(--sib-topbar-h) - 220px));
  --sib-control-h: 40px; --sib-control-h-sm: 36px; --sib-btn-h: 42px;

  /* Motion / z */
  --sib-transition-fast: 160ms ease; --sib-transition: 180ms ease;
  --sib-z-sticky-th: 1; --sib-z-topbar: 10; --sib-z-drawer: 20; --sib-z-modal: 40;
}

/* ---------- base ---------- */
html { font-family: var(--sib-font-family); font-size: var(--sib-fs-base); line-height: var(--sib-lh-base); }
body { margin: 0; background: var(--sib-bg); color: var(--sib-ink); }
h1 { font-size: var(--sib-fs-page-title); line-height: var(--sib-lh-tight); font-weight: var(--sib-fw-bold); margin: 0 0 var(--sib-sp-4); }
h2 { font-size: var(--sib-fs-view-title); line-height: var(--sib-lh-tight); font-weight: var(--sib-fw-bold); margin: var(--sib-sp-5) 0 var(--sib-sp-3); }
h3 { font-size: var(--sib-fs-section-title); font-weight: var(--sib-fw-bold); margin: var(--sib-sp-5) 0 var(--sib-sp-2); }
a { color: var(--sib-brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: var(--sib-muted); font-size: var(--sib-fs-sm); }

/* ---------- shell ---------- */
.sib-topbar {
  position: sticky; top: 0; z-index: var(--sib-z-topbar);
  min-height: var(--sib-topbar-h); background: var(--sib-surface);
  border-bottom: 1px solid var(--sib-line);
  display: flex; align-items: center; gap: var(--sib-sp-4);
  padding: 0 var(--sib-sp-5);
}
.sib-brandmark {
  width: 30px; height: 30px; border-radius: var(--sib-radius-round);
  background: var(--sib-brand); color: #fff; font-weight: var(--sib-fw-heavy);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--sib-fs-body);
  flex: none; overflow: hidden;
}
.sib-brandmark img { width: 21px; height: 21px; display: block; object-fit: contain; }
.sib-brandmark.off { background: var(--sib-muted-3); }
/* «Sibyla <strong>Finance</strong>»: Share/Actual .brand (500, ink) and .brand strong (500, brand ink). */
.sib-brandname { font-weight: 500; color: var(--sib-ink); white-space: nowrap; }
.sib-brandname strong { font-weight: 500; color: var(--sib-brand-ink); }
.sib-brandname.off strong { color: var(--sib-muted); }
.sib-topbar .sib-appname { font-size: 18px; }
.sib-topbar .sib-topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sib-sp-3); color: var(--sib-muted); font-size: var(--sib-fs-body); }

.sib-shell { display: flex; min-height: calc(100vh - var(--sib-topbar-h)); }
.sib-sidenav {
  width: var(--sib-sidenav-w); flex: 0 0 auto;
  background: var(--sib-surface); border-right: 1px solid var(--sib-line);
  padding: var(--sib-sp-4) var(--sib-sp-2);
  position: sticky; top: calc(var(--sib-topbar-h) + 1px); align-self: flex-start;
  max-height: calc(100vh - var(--sib-topbar-h) - 1px); overflow-y: auto;
}
.sib-sidenav .sib-nav-group {
  font-size: var(--sib-fs-xs); font-weight: var(--sib-fw-heavy); text-transform: uppercase;
  color: var(--sib-muted); letter-spacing: .04em; margin: var(--sib-sp-4) var(--sib-sp-3) var(--sib-sp-1);
}
.sib-sidenav a {
  display: block; padding: 7px var(--sib-sp-3); border-radius: var(--sib-radius-sm);
  color: var(--sib-text-label); font-size: var(--sib-fs-body); border-left: 3px solid transparent;
}
.sib-sidenav a:hover { background: var(--sib-brand-tint-bg); text-decoration: none; }
.sib-sidenav a.active { background: var(--sib-brand-tint-bg); border-left-color: var(--sib-brand); color: var(--sib-brand-dark); font-weight: var(--sib-fw-semibold); }
.sib-sidenav .sib-nav-disabled { display: block; padding: 7px var(--sib-sp-3); color: var(--sib-muted-3); font-size: var(--sib-fs-body); }

/* TKT-134 S1: a profile's menu is one numbered list of steps (interface-v2.0: «Passo n de m · Seguinte»); a step
   without a page in this version is listed «sem fonte», greyed, and opens nothing. The step bar above the page
   repeats the position and offers the next step with a page. */
.sib-sidenav .sib-nav-steps { list-style: none; margin: var(--sib-sp-2) 0 0; padding: 0; counter-reset: sib-step; }
.sib-sidenav .sib-nav-steps > li { counter-increment: sib-step; }
.sib-sidenav .sib-nav-steps > li > a::before,
.sib-sidenav .sib-nav-steps > li > .sib-nav-disabled::before {
  content: counter(sib-step); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: var(--sib-sp-2);
  border-radius: 50%; border: 1px solid var(--sib-line); font-size: var(--sib-fs-xs); font-weight: var(--sib-fw-semibold); color: var(--sib-muted);
}
.sib-sidenav .sib-nav-steps > li > a.active::before { background: var(--sib-brand); border-color: var(--sib-brand); color: #fff; }
.sib-sidenav .sib-nav-steps > li > .sib-nav-disabled small { margin-left: var(--sib-sp-1); font-size: var(--sib-fs-xs); }
.sib-step-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sib-sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sib-sp-4); padding: var(--sib-sp-2) var(--sib-sp-3); border: 1px solid var(--sib-line);
  border-radius: var(--sib-radius-sm); background: var(--sib-surface); font-size: var(--sib-fs-body); color: var(--sib-muted);
}
.sib-step-bar strong { color: var(--sib-text-label); }

/* TKT-133 p1 / TKT-134 S2 (NT-062): the butcher's shop's two buttons, always in view above the page. */
.sib-talho-actions { display: flex; flex-wrap: wrap; gap: var(--sib-sp-2); margin: 0 0 var(--sib-sp-4); }
.sib-talho-actions .btn { flex: 1 1 200px; justify-content: center; }
/* TKT-132 p1 (tickets#12): the «Registar» card — the five buttons, then the «Caixa de compras» line, never folded. */
.sib-registar { margin: 0 0 var(--sib-sp-4); }
.sib-registar .sib-talho-actions { margin-bottom: var(--sib-sp-3); }
.sib-registar .sib-talho-actions .btn[disabled] { opacity: .6; cursor: not-allowed; }
.sib-registar .sib-registar-inbox { margin: 0; }

/* TKT-134 S1 point 3: the Empresário's Início (ArgusInicio) — at most three numbers, one sentence per block, the source behind «i». */
.sib-home { display: grid; gap: var(--sib-sp-4); max-width: 1060px; }
.sib-home-hello h1 { font-size: 26px; margin: 0 0 4px; }
.sib-home-hello p { margin: 0; color: var(--sib-muted); font-size: 16px; }
.sib-home-card { background: var(--sib-surface); border: 1px solid var(--sib-line); border-radius: var(--sib-radius); padding: var(--sib-sp-4); display: grid; gap: var(--sib-sp-3); align-content: start; min-width: 0; }
.sib-home-card > .btn { justify-self: start; min-height: 48px; font-size: 16px; }
.sib-home-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sib-sp-2); }
.sib-home-head h2 { margin: 0; font-size: 18px; }
.sib-home-sentence, .sib-home-none { margin: 0; font-size: 16px; }
.sib-home-none { color: var(--sib-muted); }
.sib-home-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sib-sp-3); }
.sib-home-three a { display: grid; gap: 4px; padding: var(--sib-sp-3); border: 1px solid var(--sib-line); border-radius: var(--sib-radius-sm); color: inherit; text-decoration: none; min-width: 0; }
.sib-home-three a:hover { border-color: var(--sib-brand); }
.sib-home-three span { color: var(--sib-muted); font-size: 15px; }
.sib-home-three strong { font-size: 32px; line-height: 1.1; overflow-wrap: anywhere; }
.sib-home-three strong.neg { color: var(--sib-danger); }
.sib-home-three strong.pos { color: var(--sib-success); }
.sib-home-grid { display: grid; gap: var(--sib-sp-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sib-home-drop { display: flex; justify-content: space-between; align-items: center; gap: var(--sib-sp-3); flex-wrap: wrap; padding: var(--sib-sp-4); border: 2px dashed var(--sib-line-strong); border-radius: var(--sib-radius); background: var(--sib-surface); }
.sib-home-drop strong { display: block; font-size: 18px; }
.sib-home-drop span { color: var(--sib-muted); font-size: 16px; }
.sib-home-drop .btn { min-height: 48px; font-size: 16px; }
/* The chat launcher (ai.css: fixed, 48 px, 22 px from the corner) sat on «Enviar» at 800 px and wider (26/10 production check). */
@media (min-width: 721px) { .sib-home-drop { padding-right: 84px; } }
.sib-src { position: relative; flex: none; }
.sib-src > summary { list-style: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--sib-line-strong); color: var(--sib-muted); font-size: 13px; font-weight: 700; font-style: italic; cursor: pointer; }
.sib-src > summary::-webkit-details-marker { display: none; }
.sib-src[open] > summary { background: var(--sib-brand); border-color: var(--sib-brand); color: #fff; }
.sib-src > span { position: absolute; right: 0; top: 30px; z-index: 5; width: min(280px, 80vw); padding: var(--sib-sp-2) var(--sib-sp-3); background: var(--sib-surface); border: 1px solid var(--sib-line); border-radius: var(--sib-radius-sm); box-shadow: var(--sib-shadow-tooltip); font-size: 14px; color: var(--sib-text-body); }
@media (max-width: 720px) {
  .sib-home-three { grid-template-columns: 1fr; }
  .sib-home-grid { grid-template-columns: 1fr; }
}

/* The nav collapses to a rail (owner, 2026-10-07; the Share's side-nav-toggle): the toggle sits top-right of the
   nav and turns round. The rail shows the toggle alone: the Share keeps every title's and link's first letter, which
   the owner found looked bad on 2026-10-08 (a column of loose letters), so the sections are hidden until expanded.
   Width animates with the shell. */
.sib-sidenav { transition: width var(--sib-transition); }
.sib-sidenav-toggle {
  width: 28px; height: 28px; display: grid; place-items: center; margin: 0 0 var(--sib-sp-3) auto; padding: 0;
  border: 1px solid var(--sib-line); border-radius: var(--sib-radius-sm); background: var(--sib-surface);
  color: var(--sib-muted); cursor: pointer; font-size: 19px; line-height: 1;
}
.sib-sidenav-toggle:hover { color: var(--sib-brand-dark); border-color: var(--sib-brand); background: var(--sib-brand-tint-bg); }
.sib-shell.nav-collapsed .sib-sidenav { width: 44px; min-height: calc(100vh - var(--sib-topbar-h) - 1px); padding: var(--sib-sp-4) 7px; overflow-x: hidden; }
.sib-shell.nav-collapsed .sib-sidenav-toggle { margin: 0; transform: rotate(180deg); }
.sib-shell.nav-collapsed .sib-sidenav > :not(.sib-sidenav-toggle) { display: none; }

.sib-content { flex: 1 1 auto; min-width: 0; padding: var(--sib-sp-6) var(--sib-sp-5); }
.sib-container { max-width: var(--sib-container-max); margin: 0 auto; }

/* Superseded by the responsive block at the end of this file: hiding the side nav below 820px
   left small screens with no navigation at all — not a narrower layout, an unusable one. It now
   reflows into a horizontal strip instead. Kept as a comment so the change is visible to anyone
   who remembers the old behaviour.
@media (max-width: 820px) {
  .sib-sidenav { display: none; }
} */

/* ---------- panels, tiles, chips ---------- */
.sib-panel {
  background: var(--sib-surface); border: 1px solid var(--sib-line);
  border-radius: var(--sib-radius); box-shadow: var(--sib-shadow-ambient);
  padding: var(--sib-sp-5); margin-bottom: var(--sib-sp-5);
}
/* Key indicators stay on one visual line and scroll before they wrap (Layout Standards R38). */
.sib-tiles { display: flex; gap: var(--sib-sp-3); flex-wrap: nowrap; overflow-x: auto; margin: var(--sib-sp-4) 0; }
.sib-tile {
  background: var(--sib-surface-tint); border: 1px solid var(--sib-line);
  border-radius: var(--sib-radius); padding: var(--sib-sp-3) var(--sib-sp-4); min-width: 6rem; flex: 1 1 0;
}
.sib-tile .sib-tile-value { font-size: var(--sib-fs-metric-value); line-height: var(--sib-lh-tight); font-weight: var(--sib-fw-bold); color: var(--sib-ink); }
.sib-tile .sib-tile-label { font-size: var(--sib-fs-metric-label); color: var(--sib-muted); text-transform: uppercase; font-weight: var(--sib-fw-semibold); letter-spacing: .03em; }
.sib-tile.danger .sib-tile-value { color: var(--sib-danger); }
.sib-tile.success .sib-tile-value { color: var(--sib-success); }

.sib-chip {
  display: inline-block; padding: 2px 10px; border-radius: var(--sib-radius-pill);
  font-size: var(--sib-fs-sm); font-weight: var(--sib-fw-semibold); border: 1px solid transparent;
  white-space: nowrap;
}
.sib-chip.neutral { background: var(--sib-pill-neutral-bg); color: var(--sib-text-body); }
.sib-chip.success { background: var(--sib-success-bg); color: var(--sib-success); border-color: var(--sib-success-border); }
.sib-chip.warning { background: var(--sib-warning-bg); color: var(--sib-warning); border-color: var(--sib-warning-border); }
.sib-chip.danger { background: var(--sib-danger-bg); color: var(--sib-danger); border-color: var(--sib-danger-border); }
.sib-chip.attention { background: var(--sib-attention-bg); color: var(--sib-attention-text); border-color: var(--sib-attention); }
.sib-chip.brand { background: var(--sib-brand-tint-bg); color: var(--sib-brand-dark); border-color: var(--sib-brand-a28); }

/* Inline checkbox labels inside table cells and forms (user access): regular weight, one row. */
.sib-inline-check { display: inline-flex; align-items: center; gap: var(--sib-sp-2); font-weight: 400; white-space: nowrap; }
.sib-inline-grants { display: flex; flex-wrap: wrap; gap: var(--sib-sp-2) var(--sib-sp-3); margin-top: var(--sib-sp-1); }
/* A status chip with its one row action beside it (user access): one line, compact control. */
.sib-row-status { display: inline-flex; align-items: center; gap: var(--sib-sp-2); white-space: nowrap; }
button.sib-row-action { height: 28px; padding: 0 var(--sib-sp-3); font-size: var(--sib-fs-sm); }

/* ---------- filter bar, forms, buttons ---------- */
.sib-filterbar {
  display: flex; gap: var(--sib-sp-4); flex-wrap: wrap; align-items: end;
  background: var(--sib-surface-tint); border: 1px solid var(--sib-line);
  border-radius: var(--sib-radius); padding: var(--sib-sp-3) var(--sib-sp-4); margin-bottom: var(--sib-sp-4);
}
.sib-filterbar label, .sib-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--sib-fs-label); font-weight: var(--sib-fw-semibold); color: var(--sib-text-label); }
.sib-form label.sib-inline-check { flex-direction: row; align-items: center; gap: var(--sib-sp-2); font-size: var(--sib-fs-body); font-weight: 400; color: var(--sib-text-body); }
.sib-filterbar .sib-filter-meta { margin-left: auto; color: var(--sib-muted); font-size: var(--sib-fs-body); align-self: center; }

input, select, textarea {
  font: inherit; color: var(--sib-ink);
  height: var(--sib-control-h); box-sizing: border-box;
  padding: 0 var(--sib-sp-3); background: var(--sib-surface);
  border: 1px solid var(--sib-line-strong); border-radius: var(--sib-radius-sm);
}
textarea { height: auto; padding: var(--sib-sp-2) var(--sib-sp-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sib-brand-a52); box-shadow: 0 0 0 3px var(--sib-brand-a16); }
input[type="checkbox"] { height: auto; accent-color: var(--sib-brand); }

/* box-sizing: a <button> is border-box by the browser's own sheet, an <a class="btn"> is not — so a link styled as a button
   with width: 100% (the ⋯ pop-up's «Documento», a drawer's links) came out wider than its menu by its padding and border. */
button, .btn {
  font: inherit; font-size: var(--sib-fs-button); font-weight: var(--sib-fw-medium); line-height: var(--sib-lh-tight);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box;
  height: var(--sib-control-h-sm); padding: 0 var(--sib-sp-4);
  border-radius: var(--sib-radius-sm); border: 1px solid var(--sib-line-strong);
  background: var(--sib-surface); color: var(--sib-text-body); cursor: pointer;
}
button:hover, .btn:hover { border-color: var(--sib-brand-a28); background: var(--sib-brand-tint-bg); }
button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
button.primary { background: var(--sib-brand); border-color: var(--sib-brand); color: #fff; }
button.primary:hover { background: var(--sib-brand-dark); }

.sib-form { display: grid; gap: var(--sib-sp-3); max-width: 32rem; }
.sib-error { color: var(--sib-danger); font-size: var(--sib-fs-body); }

/* ---------- tables ---------- */
.sib-table-wrap { overflow: auto; max-height: var(--sib-table-maxh); border: 1px solid var(--sib-line); border-radius: var(--sib-radius); background: var(--sib-surface); }
table { border-collapse: collapse; width: 100%; background: var(--sib-surface); }
thead th {
  position: sticky; top: 0; z-index: var(--sib-z-sticky-th);
  background: var(--sib-surface-track); color: var(--sib-text-label);
  font-size: var(--sib-fs-table-header); text-transform: uppercase; letter-spacing: .02em;
  text-align: left; padding: 10px var(--sib-sp-3); border-bottom: 1px solid var(--sib-line);
  font-weight: var(--sib-fw-semibold); line-height: var(--sib-lh-tight);
}
tbody td { padding: 8px var(--sib-sp-3); border-bottom: 1px solid var(--sib-line); font-size: var(--sib-fs-table-row); font-weight: var(--sib-fw-regular); color: var(--sib-text-body); vertical-align: middle; }
tbody tr:hover { background: var(--sib-brand-tint-bg); }
.sib-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Processing evidence (P2-15), inside the wide modal panel: one attempt per row, its hashes and
   paths on a second, quieter line so eight values do not fight for one line's width. */
.sib-evidence { table-layout: auto; min-width: 44rem; }
.sib-evidence thead th { white-space: nowrap; }
.sib-evidence tbody td { vertical-align: top; }
.sib-evidence tbody tr:not(.sib-evidence-detail) td { border-bottom: 0; }
.sib-evidence td code { font-family: Consolas, "Cascadia Mono", "Courier New", monospace; font-size: var(--sib-fs-xs); word-break: break-all; }
.sib-evidence tr.sib-evidence-detail td { padding-top: 0; color: var(--sib-muted); font-size: var(--sib-fs-sm); line-height: var(--sib-lh-tight); }
.sib-evidence tr.sib-evidence-detail:hover { background: transparent; }
.sib-evidence tr.sib-evidence-detail span { display: inline-block; margin-right: var(--sib-sp-4); overflow-wrap: anywhere; }
.sib-evidence tr.sib-evidence-detail small { overflow-wrap: anywhere; }

/* ---------- Share-parity patterns ---------- */
.sib-eyebrow {
  color: var(--sib-brand); font-size: var(--sib-fs-sm); font-weight: var(--sib-fw-heavy);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px;
}
.sib-page-head { margin-bottom: var(--sib-sp-5); }
.sib-page-head h1 { margin-bottom: var(--sib-sp-2); }
.sib-page-head .sib-lead { color: var(--sib-muted); max-width: 46rem; margin: 0; }

.sib-panel .sib-eyebrow { margin-top: 0; }
.sib-panel h2 { margin-top: 0; }

.sib-flow-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sib-sp-4); }
.sib-flow-card {
  background: var(--sib-surface-tint); border: 1px solid var(--sib-line);
  border-radius: var(--sib-radius); padding: var(--sib-sp-4);
  color: inherit; display: block; position: relative;
}
/* Share flow-card hover list: one example per line, under the card; the last card opens leftwards. */
.sib-flow-card[data-tooltip]:hover::after, .sib-flow-card[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip); position: absolute; left: var(--sib-sp-3); top: calc(100% + 8px); z-index: var(--sib-z-drawer);
  width: min(360px, 70vw); padding: 10px 12px;
  background: var(--sib-surface-track); border: 1px solid var(--sib-line-strong); border-radius: var(--sib-radius);
  box-shadow: var(--sib-shadow-tooltip); color: var(--sib-ink);
  font-size: var(--sib-fs-sm); font-weight: var(--sib-fw-semibold); line-height: 1.45; white-space: pre-line;
}
.sib-flow-card[data-tooltip]:last-child:hover::after, .sib-flow-card[data-tooltip]:last-child:focus-visible::after { left: auto; right: var(--sib-sp-3); }
.sib-flow-card:hover { border-color: var(--sib-brand-a28); background: var(--sib-brand-tint-bg); text-decoration: none; }
.sib-flow-card .sib-flow-no { color: var(--sib-brand-dark); font-size: var(--sib-fs-sm); font-weight: var(--sib-fw-heavy); }
.sib-flow-card .sib-flow-title { font-weight: var(--sib-fw-bold); font-size: 16px; margin: 2px 0 4px; color: var(--sib-ink); }
.sib-flow-card .sib-flow-desc { color: var(--sib-muted); font-size: var(--sib-fs-td); }

/* topbar controls (Share: COMPANY select, buttons) */
.sib-topbar-group { display: flex; align-items: center; gap: var(--sib-sp-2); }
.sib-topbar-group .sib-topbar-label {
  font-size: var(--sib-fs-xs); font-weight: var(--sib-fw-heavy); text-transform: uppercase;
  color: var(--sib-muted); letter-spacing: .05em;
}
.sib-topbar select { height: var(--sib-control-h-sm); }

/* apps switcher (topbar ⊞) — CSS-only details popover */
.sib-apps { position: relative; }
.sib-apps summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: var(--sib-control-h-sm); height: var(--sib-control-h-sm);
  border: 1px solid var(--sib-line-strong); border-radius: var(--sib-radius-sm);
  font-size: 17px; color: var(--sib-text-label); background: var(--sib-surface);
}
.sib-apps summary::-webkit-details-marker { display: none; }
.sib-apps[open] summary, .sib-apps summary:hover { background: var(--sib-brand-tint-bg); border-color: var(--sib-brand-a28); }
.sib-apps .sib-apps-panel {
  position: absolute; top: calc(var(--sib-control-h-sm) + 8px); left: 0; z-index: var(--sib-z-modal);
  min-width: 20rem; max-width: calc(100vw - 32px); background: var(--sib-surface); border: 1px solid var(--sib-line);
  border-radius: var(--sib-radius); box-shadow: var(--sib-shadow-modal); padding: var(--sib-sp-2);
}
.sib-apps .sib-apps-panel a {
  display: flex; gap: var(--sib-sp-3); align-items: center; padding: var(--sib-sp-2) var(--sib-sp-3);
  border-radius: var(--sib-radius-sm); color: var(--sib-ink);
}
.sib-apps .sib-apps-panel a:hover { background: var(--sib-brand-tint-bg); text-decoration: none; }
.sib-apps .sib-app-desc { color: var(--sib-muted); font-size: var(--sib-fs-sm); }
.sib-apps .sib-app-release { display: block; margin-top: var(--sib-sp-2); padding: var(--sib-sp-2) var(--sib-sp-3) 0; border-top: 1px solid var(--sib-line); color: var(--sib-muted); font-size: var(--sib-fs-xs); }

/* licence usage bar */
.sib-usage { background: var(--sib-surface-track); border-radius: var(--sib-radius-pill); height: 10px; overflow: hidden; max-width: 22rem; }
.sib-usage > div { height: 100%; background: var(--sib-brand); border-radius: var(--sib-radius-pill); }

/* ---------- pager ---------- */
.sib-pager { display: flex; align-items: center; gap: var(--sib-sp-3); margin: var(--sib-sp-3) 0; color: var(--sib-muted); font-size: var(--sib-fs-pager); flex-wrap: wrap; }
.sib-pager .sib-pager-total { margin-left: auto; }

/* Share 260827 tab-controls (.tab-controls / .*-mode-button) and P&L rows */
.sib-tabs { display: inline-flex; gap: 4px; background: var(--sib-surface-tint); border: 1px solid var(--sib-line); border-radius: var(--sib-radius-pill); padding: 3px; margin: 0 0 var(--sib-sp-4); flex-wrap: wrap; }
.sib-tabs button { border: 1px solid transparent; background: transparent; border-radius: var(--sib-radius-pill); height: 30px; padding: 0 var(--sib-sp-4); color: var(--sib-muted); }
.sib-tabs button.active { background: var(--sib-surface); color: var(--sib-brand); border-color: var(--sib-brand-a28); box-shadow: var(--sib-shadow-ambient); }
.sib-tabs button span { margin-left: 6px; font-size: var(--sib-fs-sm); color: var(--sib-muted); }
.sib-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sib-sp-4); flex-wrap: wrap; margin-bottom: var(--sib-sp-4); }
.sib-heading-row h1 { margin: 0; }
.sib-table-title { display: flex; justify-content: space-between; align-items: center; gap: var(--sib-sp-4); margin: var(--sib-sp-2) 0; }
.sib-table-title h3 { margin: 0; }
.sib-table-title p { margin: 0; color: var(--sib-muted); font-size: var(--sib-fs-sm); }
tr.sib-error-row td { background: color-mix(in srgb, var(--sib-danger) 8%, transparent); }
/* Calculated rows keep their tint, not a bold weight: the build's typography rule is that ordinary
   line content is never bold, and the prototype dropped .calculated-row from 800 to 400 with it. */
tr.sib-calc-row td { font-weight: var(--sib-fw-regular); background: var(--sib-brand-tint-bg); border-top: 1px solid var(--sib-line-strong); }
tr.sib-group-row td { font-weight: var(--sib-fw-semibold); }
tr.sib-detail-row td:nth-child(2) { padding-left: 2rem; color: var(--sib-muted); }
.sib-pnl-toggle { height: auto; padding: 0 6px; border: none; background: transparent; font-weight: inherit; color: inherit; }
.sib-check-action { display: flex; align-items: center; gap: var(--sib-sp-2); }
.sib-detail-card { background: var(--sib-surface-tint); border: 1px solid var(--sib-line); border-radius: var(--sib-radius); padding: var(--sib-sp-3) var(--sib-sp-4); margin: var(--sib-sp-2) 0; }
.sib-detail-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--sib-sp-4); margin: 0; font-size: var(--sib-fs-sm); }
.sib-detail-card dt { color: var(--sib-muted); font-weight: var(--sib-fw-semibold); }
.sib-detail-card dd { margin: 0; }

/* ---------- collapsible nav sections (Interface spec, Behaviour Standards) ---------- */
/* <details> carries the open/closed state itself, so the nav collapses with no JavaScript and
   still works in a plain server render. The script in app.js only remembers the choice. */
.sib-sidenav .sib-nav-section > summary.sib-nav-group {
  display: flex; align-items: center; gap: var(--sib-sp-2);
  cursor: pointer; list-style: none; user-select: none;
  border-radius: var(--sib-radius-sm); padding: var(--sib-sp-1) var(--sib-sp-3);
  margin: var(--sib-sp-4) 0 var(--sib-sp-1);
}
.sib-sidenav .sib-nav-section > summary::-webkit-details-marker { display: none; }
.sib-sidenav .sib-nav-section > summary.sib-nav-group:hover { background: var(--sib-surface-track); }
.sib-sidenav .sib-nav-section > summary.sib-nav-group:focus-visible {
  outline: 2px solid var(--sib-brand); outline-offset: 1px;
}
/* The caret is drawn here rather than relying on the default marker, which differs per browser. */
.sib-sidenav .sib-nav-section > summary.sib-nav-group::before {
  content: ""; width: 0; height: 0; flex: 0 0 auto;
  border-left: 4px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--sib-transition-fast);
}
.sib-sidenav .sib-nav-section[open] > summary.sib-nav-group::before { transform: rotate(90deg); }

/* ---------- responsive ---------- */
/* Below the tablet breakpoint the side nav stops being a column and becomes a horizontal strip
   above the content: the screens are wide tables, and a fixed 224px rail leaves them unusable.
   A drawer with a hamburger is the spec's eventual answer; this is the honest interim that stops
   the layout breaking, and it needs no JavaScript. */
/* Owner, 2026-10-10: the drawer with a burger. Below 1024px the side nav is an off-canvas drawer opened by the
   topbar's burger (.sib-burger, nav-sections.js toggles .nav-open on the shell), and the header's selectors
   (licence, company, profile, language) move into it: the layout renders them twice, .sib-sidenav-settings is
   the copy shown here and the topbar copy is hidden. The account avatar stays in the bar. The desktop rail
   collapse is ignored at this width (the script does not apply it). */
.sib-burger, .sib-drawer-head, .sib-sidenav-settings { display: none; }
.sib-topbar-scope { display: contents; }
@media (max-width: 1024px) {
  .sib-shell { flex-direction: column; }
  /* One line, whatever the phone: the bar holds the apps switcher, the brand, the avatar and the burger. */
  .sib-topbar { flex-wrap: nowrap; height: auto; padding: 0 var(--sib-sp-3); gap: var(--sib-sp-3); }
  .sib-topbar .sib-appname { white-space: nowrap; }
  .sib-topbar .sib-topbar-right { flex: 0 0 auto; width: auto; flex-wrap: nowrap; gap: var(--sib-sp-2); overflow: visible; padding-bottom: 0; }
  .sib-burger {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    width: var(--sib-control-h-sm); height: var(--sib-control-h-sm); padding: 0;
    border: 1px solid var(--sib-line-strong); border-radius: var(--sib-radius-sm);
    font-size: 19px; line-height: 1; color: var(--sib-text-label); background: var(--sib-surface);
  }
  .sib-burger:hover, .sib-burger[aria-expanded="true"] { background: var(--sib-brand-tint-bg); border-color: var(--sib-brand-a28); }
  .sib-topbar-scope { display: none; }
  .sib-sidenav {
    box-sizing: border-box; min-width: 0;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--sib-z-modal);
    width: min(320px, 88vw); max-height: none; overflow-y: auto; overscroll-behavior: contain;
    border-right: 1px solid var(--sib-line); box-shadow: var(--sib-shadow-modal);
    padding: 0 var(--sib-sp-3) calc(var(--sib-sp-4) + env(safe-area-inset-bottom));
    transform: translateX(-105%); transition: transform var(--sib-transition);
  }
  .sib-shell.nav-open .sib-sidenav { transform: none; }
  .sib-shell.nav-open::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--sib-z-modal) - 1); background: var(--sib-scrim); }
  .sib-drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sib-sp-3);
    position: sticky; top: 0; z-index: 1; margin: 0 calc(-1 * var(--sib-sp-3)) var(--sib-sp-2);
    padding: calc(var(--sib-sp-3) + env(safe-area-inset-top)) var(--sib-sp-4) var(--sib-sp-3);
    background: var(--sib-surface); border-bottom: 1px solid var(--sib-line); color: var(--sib-ink);
  }
  .sib-drawer-close {
    width: 28px; height: 28px; display: grid; place-items: center; padding: 0; cursor: pointer;
    border: 1px solid var(--sib-line); border-radius: var(--sib-radius-sm); background: var(--sib-surface);
    color: var(--sib-muted); font-size: 20px; line-height: 1;
  }
  .sib-drawer-close:hover { color: var(--sib-brand-dark); border-color: var(--sib-brand); background: var(--sib-brand-tint-bg); }
  .sib-sidenav-settings { display: grid; gap: var(--sib-sp-3); padding: var(--sib-sp-2) var(--sib-sp-3) var(--sib-sp-3); border-bottom: 1px solid var(--sib-line); }
  .sib-sidenav-settings .sib-topbar-group { display: grid; gap: 4px; }
  .sib-sidenav-settings .sib-topbar-group select { width: 100%; height: var(--sib-control-h); }
  /* The rail is a desktop affordance; the drawer ignores the stored collapse. */
  .sib-sidenav-toggle { display: none; }
}
@media (max-width: 720px) {
  .sib-container { padding: var(--sib-sp-3); }
  /* Wide tables scroll inside their own wrapper instead of pushing the page sideways. */
  .sib-table-wrap { max-width: 100vw; }
  .sib-tiles { flex-wrap: wrap; }
  .sib-tile { flex: 1 1 40%; }
}

/* =====================================================================================
   Build 060200 @ 56126f8 — UI-0: the Form Standard component layer
   (src/Sibyla.Web/Components/Shared). Class names mirror the prototype's roles:
   .modal-overlay/.modal-panel → .sib-modal-*, .detail-header → .sib-form-header,
   summaryCards → .sib-cards, reviewDecisionPanel → .sib-review-*, .review-detail-drawer →
   .sib-drawer, .type-toggle-* → .sib-tag-*, .bundle-view-select → .sib-view-select.
   ===================================================================================== */

/* ---------- modal form ---------- */
.sib-modal-overlay {
  position: fixed; inset: 0; z-index: var(--sib-z-modal);
  display: grid; place-items: center; padding: var(--sib-sp-6);
  background: var(--sib-scrim);
}
.sib-modal-panel {
  width: min(1120px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto;
  padding: 22px; background: var(--sib-surface); border: 1px solid var(--sib-line);
  border-radius: var(--sib-radius); box-shadow: var(--sib-shadow-modal);
  display: flex; flex-direction: column; gap: var(--sib-sp-4);
}
.sib-modal-panel.sib-modal-wide { width: min(1320px, 100%); }
.sib-form-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sib-sp-4); }
.sib-form-header h2 { margin: 0; font-size: var(--sib-fs-view-title); line-height: var(--sib-lh-tight); }
.sib-form-header .sib-eyebrow { margin-bottom: 2px; }
.sib-form-subtitle { margin: 4px 0 0; color: var(--sib-muted); font-size: var(--sib-fs-subtitle); line-height: var(--sib-lh-tight); }
.sib-form-header-right { display: flex; align-items: center; gap: var(--sib-sp-3); flex: 0 0 auto; }
.sib-form-essentials, .sib-form-task { display: grid; gap: var(--sib-sp-3); }
.sib-form-task .sib-form-section-title { margin: 0; font-size: var(--sib-fs-section-title); font-weight: var(--sib-fw-bold); line-height: var(--sib-lh-tight); }
.sib-form-task label { display: flex; flex-direction: column; gap: 4px; font-size: var(--sib-fs-label); font-weight: var(--sib-fw-semibold); color: var(--sib-text-label); }
.sib-form-task textarea { min-height: 4.5rem; resize: vertical; }
.sib-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sib-sp-3); }
/* A form grid outside a form (the ERP panels: Create in ERP, Abrir conta no ERP, link by reference) keeps the same stacked label and a reason box one can write in (owner, 2026-10-11). */
.sib-form-grid label:not(.sib-inline-check) { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--sib-fs-label); font-weight: var(--sib-fw-semibold); color: var(--sib-text-label); }
.sib-form-grid textarea { min-height: 4.5rem; resize: vertical; }
fieldset.sib-form-grid { border: 0; margin: 0; padding: 0; min-width: 0; }
.sib-form-related { display: flex; flex-wrap: wrap; gap: var(--sib-sp-2); }
.sib-related-link[aria-disabled="true"] { color: var(--sib-muted-3); background: var(--sib-surface-track); border-color: var(--sib-line); cursor: not-allowed; pointer-events: auto; opacity: 1; }
.sib-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.sib-form-actions .primary { order: 99; }
.sib-form-submit { display: flex; align-items: center; justify-content: flex-end; gap: var(--sib-sp-3); }
.sib-form-submit .sib-form-submit-status { color: var(--sib-muted); font-size: var(--sib-fs-subtitle); margin-right: auto; }

/* ---------- details drawer (after the actions, hidden until toggled) ---------- */
.sib-drawer { border-top: 1px solid var(--sib-line); padding-top: var(--sib-sp-3); display: grid; gap: var(--sib-sp-3); }
.sib-drawer h3 { margin: 0; font-size: 15px; }
.sib-drawer[hidden] { display: none; }
.sib-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0; }
.sib-detail-field { min-width: 0; padding: 8px 10px; border: 1px solid var(--sib-line); border-radius: var(--sib-radius-sm); background: var(--sib-surface); }
.sib-detail-field.sib-detail-wide { grid-column: 1 / -1; }
.sib-detail-field dt { color: var(--sib-muted); font-size: var(--sib-fs-metric-label); font-weight: var(--sib-fw-semibold); line-height: var(--sib-lh-tight); margin-bottom: 4px; }
.sib-detail-field dd { margin: 0; font-size: var(--sib-fs-table-row); color: var(--sib-ink); overflow-wrap: anywhere; }
.sib-detail-empty { margin: 0; color: var(--sib-muted); font-size: var(--sib-fs-subtitle); }

/* ---------- context cards (essentials) ---------- */
.sib-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sib-card { min-height: 52px; padding: 8px 10px; border: 1px solid var(--sib-line); border-radius: var(--sib-radius-sm); background: var(--sib-surface-tint); min-width: 0; }
.sib-card span { display: block; color: var(--sib-muted); font-size: var(--sib-fs-metric-label); line-height: var(--sib-lh-tight); margin-bottom: 4px; }
.sib-card strong { display: block; font-size: var(--sib-fs-table-row); font-weight: var(--sib-fw-semibold); line-height: 1.25; overflow-wrap: anywhere; }
.sib-cards-compact .sib-card { min-height: 0; padding: 6px 8px; }

/* ---------- review panel ---------- */
.sib-review-panel { display: grid; gap: var(--sib-sp-3); }
.sib-review-field { display: grid; gap: 6px; padding: var(--sib-sp-3); border: 1px solid var(--sib-line); border-radius: var(--sib-radius-sm); background: var(--sib-surface); }
.sib-review-field span { color: var(--sib-muted); font-size: var(--sib-fs-label); font-weight: var(--sib-fw-heavy); }
.sib-review-field p { margin: 0; color: var(--sib-ink); font-size: var(--sib-fs-body); line-height: 1.45; }

/* ---------- tag toggles with counters ---------- */
.sib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sib-sp-4); }
.sib-tag {
  height: 32px; padding: 0 10px 0 12px; border-radius: var(--sib-radius-pill);
  display: inline-flex; align-items: center; gap: 8px; font-weight: var(--sib-fw-medium);
}
.sib-tag.active { background: var(--sib-brand-tint-bg); border-color: var(--sib-brand-a52); color: var(--sib-brand-dark); font-weight: 650; }
.sib-tag-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--sib-radius-pill); background: var(--sib-pill-neutral-bg); color: var(--sib-text-body);
  font-size: var(--sib-fs-xs); font-weight: var(--sib-fw-semibold); line-height: 1;
}
.sib-tag.active .sib-tag-count { background: var(--sib-brand); color: #fff; }

/* ---------- filter bar rules ---------- */
.sib-filterbar { flex-wrap: nowrap; overflow-x: auto; }
.sib-filterbar label { flex: 0 0 auto; }
.sib-filter-search input { width: 280px; max-width: 100%; }
.sib-filter-more { display: none; align-self: end; height: var(--sib-control-h); }
@media (max-width: 1380px) {
  .sib-filterbar { flex-wrap: wrap; overflow: visible; }
  .sib-filterbar .sib-filter-secondary { display: none; }
  .sib-filterbar.sib-filterbar-expanded .sib-filter-secondary { display: flex; }
  .sib-filter-more { display: inline-flex; }
}

/* ---------- view dropdown in the page heading ---------- */
.sib-heading-actions { display: flex; align-items: flex-end; gap: var(--sib-sp-3); flex-wrap: wrap; }
.sib-view-select { display: grid; gap: 4px; min-width: 220px; color: var(--sib-text-label); font-size: var(--sib-fs-label); font-weight: var(--sib-fw-medium); }
.sib-view-select select { min-width: 220px; max-width: 320px; height: var(--sib-control-h-sm); }

/* ---------- notice ---------- */
.sib-notice {
  display: flex; align-items: center; gap: var(--sib-sp-3); padding: 10px var(--sib-sp-4); margin: 0 0 var(--sib-sp-4);
  border: 1px solid var(--sib-line); border-radius: var(--sib-radius-sm); background: var(--sib-surface-tint); font-size: var(--sib-fs-body);
}
.sib-notice.success { background: var(--sib-success-bg); border-color: var(--sib-success-border); color: var(--sib-success); }
.sib-notice.warning { background: var(--sib-warning-bg); border-color: var(--sib-warning-border); color: var(--sib-warning); }
.sib-notice.danger { background: var(--sib-danger-bg); border-color: var(--sib-danger-border); color: var(--sib-danger); }
.sib-notice-dismiss { margin-left: auto; height: 26px; padding: 0 8px; }

/* ---------- mobile: modal forms become full-screen task panels ---------- */
@media (max-width: 720px), (max-height: 640px) {
  .sib-modal-overlay { place-items: stretch; padding: 0; background: rgba(32, 36, 42, .38); }
  .sib-modal-panel {
    width: 100vw; max-width: none; height: 100dvh; max-height: none;
    padding: var(--sib-sp-4); border: 0; border-radius: 0; box-shadow: none; overscroll-behavior: contain;
  }
  .sib-modal-panel .sib-form-header {
    position: sticky; top: calc(-1 * var(--sib-sp-4)); z-index: 3;
    margin: calc(-1 * var(--sib-sp-4)) calc(-1 * var(--sib-sp-4)) 0; padding: 14px var(--sib-sp-4);
    border-bottom: 1px solid var(--sib-line); background: var(--sib-surface);
  }
  .sib-modal-panel .sib-form-header h2 { font-size: 19px; line-height: 1.25; }
  .sib-modal-panel .sib-cards, .sib-modal-panel .sib-form-grid, .sib-modal-panel .sib-detail-grid { grid-template-columns: 1fr; }
  .sib-modal-panel .sib-card, .sib-modal-panel .sib-review-field { padding: 9px 10px; }
  .sib-modal-panel .sib-form-actions {
    position: sticky; bottom: calc(-1 * var(--sib-sp-4)); z-index: 3;
    margin: var(--sib-sp-3) calc(-1 * var(--sib-sp-4)) calc(-1 * var(--sib-sp-4)); padding: 12px var(--sib-sp-4) calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--sib-line); background: var(--sib-surface);
  }
  .sib-modal-panel .sib-drawer { margin-top: var(--sib-sp-3); padding-bottom: 72px; }
  .sib-modal-panel .sib-table-wrap { max-width: 100%; overflow-x: auto; }
  .sib-modal-panel table { min-width: 680px; }
}

/* Audit grouped preview (AUDIT_GROUP_PREVIEW): a few lines of the finding, never the whole text */
.sib-audit-preview { max-width: 28rem; font-size: var(--sib-fs-table-row); color: var(--sib-text-body); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }

/* ---------- UI-3: ID column as action trigger (trial, Integration only) + optional form section ---------- */
.sib-id-action { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 10px; font-weight: var(--sib-fw-regular); font-size: var(--sib-fs-table-row); }
.sib-id-action-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: var(--sib-radius-pill); background: var(--sib-pill-neutral-bg); color: var(--sib-text-body); font-size: var(--sib-fs-xs); line-height: 1; }
.sib-id-action:hover .sib-id-action-chip, .sib-id-action[aria-expanded="true"] .sib-id-action-chip { background: var(--sib-brand); color: #fff; }
.sib-id-action-scrim { position: fixed; inset: 0; z-index: calc(var(--sib-z-modal) - 1); background: transparent; }
.sib-id-action-popup {
  position: fixed; z-index: var(--sib-z-modal); min-width: 12rem; display: grid; gap: 4px; padding: var(--sib-sp-2);
  background: var(--sib-surface); border: 1px solid var(--sib-line); border-radius: var(--sib-radius); box-shadow: var(--sib-shadow-tooltip);
  transform: translate(8px, 8px);
}
.sib-id-action-popup button, .sib-id-action-popup .btn { justify-content: flex-start; width: 100%; }
.sib-id-action-popup .sib-menu-group { padding: var(--sib-sp-2) var(--sib-sp-2) 0; font-size: var(--sib-fs-xs); font-weight: var(--sib-fw-semibold); color: var(--sib-text-label); text-transform: uppercase; letter-spacing: .04em; }

/* Integration › Overview (owner, 2026-10-13): five stage cards on one line with thin dividers, a green bar on a grey track per stage;
   the company table repeats the bar beside its done/applicable ratio. */
.sib-ov-kpis { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--sib-surface-track); border: 1px solid var(--sib-line); border-radius: var(--sib-radius); margin: var(--sib-sp-4) 0; }
.sib-ov-kpi { padding: var(--sib-sp-4) var(--sib-sp-5); border-left: 1px solid var(--sib-line); min-width: 0; }
.sib-ov-kpi:first-child { border-left: 0; }
.sib-ov-kpi-value { font-size: 28px; line-height: var(--sib-lh-tight); font-weight: var(--sib-fw-bold); color: var(--sib-ink); }
.sib-ov-kpi-stage { font-size: var(--sib-fs-body); font-weight: var(--sib-fw-semibold); color: var(--sib-text-label); margin-top: 2px; }
.sib-ov-kpi-sub { font-size: var(--sib-fs-sm); color: var(--sib-muted); margin: 2px 0 var(--sib-sp-3); }
.sib-bar { height: 6px; background: var(--sib-line); border-radius: 3px; overflow: hidden; }
.sib-bar > span { display: block; height: 100%; background: var(--sib-success); border-radius: 3px; }
.sib-ov-cell { display: flex; align-items: center; gap: var(--sib-sp-2); min-width: 7rem; }
.sib-ov-cell .sib-bar { flex: 1 1 auto; }
.sib-ov-ratio { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sib-text-body); }
button.sib-ov-company { background: none; border: 0; padding: 0; height: auto; font-size: var(--sib-fs-table-row); font-weight: var(--sib-fw-medium); color: var(--sib-ink); text-decoration: underline dotted var(--sib-line-strong); text-underline-offset: 3px; }
button.sib-ov-company:hover { color: var(--sib-brand-dark); background: none; }
/* Share Actual gap 25/10, N-24: «Como se calcula» over the stage cards — a text disclosure, the rules below it when open. */
.sib-how { margin: var(--sib-sp-3) 0 0; }
.sib-how > summary { display: inline-flex; cursor: pointer; font-size: var(--sib-fs-sm); font-weight: var(--sib-fw-semibold); color: var(--sib-text-label); text-decoration: underline dotted var(--sib-line-strong); text-underline-offset: 3px; }
.sib-how-body { margin-top: var(--sib-sp-2); padding: var(--sib-sp-3) var(--sib-sp-4); background: var(--sib-surface); border: 1px solid var(--sib-line); border-radius: var(--sib-radius-sm); font-size: var(--sib-fs-sm); color: var(--sib-text-body); }
.sib-how-body p { margin: 0 0 var(--sib-sp-2); }
.sib-how-body ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--sib-sp-1); }
/* N-30: the stock-profile status line of Inventory and Stocks. */
.sib-stock-profile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sib-sp-1) var(--sib-sp-3); margin: 0 0 var(--sib-sp-3); font-size: var(--sib-fs-sm); color: var(--sib-text-body); }
.sib-stock-profile > span { color: var(--sib-muted); }
.sib-filterbar label.sib-inline-check { flex-direction: row; align-items: center; gap: var(--sib-sp-2); height: var(--sib-control-h); font-weight: var(--sib-fw-regular); color: var(--sib-text-body); }
@media (max-width: 900px) {
  .sib-ov-kpis { grid-template-columns: repeat(2, 1fr); }
  .sib-ov-kpi { border-left: 0; border-top: 1px solid var(--sib-line); }
  .sib-ov-kpi:nth-child(-n+2) { border-top: 0; }
  .sib-ov-kpi:nth-child(2n) { border-left: 1px solid var(--sib-line); }
}
.sib-form-optional { border: 1px solid var(--sib-line); border-radius: var(--sib-radius-sm); padding: var(--sib-sp-2) var(--sib-sp-3); }
.sib-form-optional summary { cursor: pointer; font-size: var(--sib-fs-label); font-weight: var(--sib-fw-semibold); color: var(--sib-text-label); }
.sib-form-optional[open] summary { margin-bottom: var(--sib-sp-3); }
/* «Detalhes técnicos (administrador)» (Simple mode plan §4.6): superuser only, collapsed, discreet. */
.sib-technical-details { border: 1px dashed var(--sib-line-strong); border-radius: var(--sib-radius-sm); padding: var(--sib-sp-2) var(--sib-sp-3); min-width: 0; }
.sib-technical-details > summary { cursor: pointer; color: var(--sib-muted); font-size: var(--sib-fs-label); font-weight: var(--sib-fw-semibold); }
.sib-technical-details[open] > summary { margin-bottom: var(--sib-sp-2); }
.sib-technical-details-body { display: grid; gap: var(--sib-sp-2); min-width: 0; overflow-wrap: anywhere; }
.sib-technical-details-body pre { max-width: 100%; overflow-x: auto; }
.sib-technical-details-link-only { border: 0; padding: 0; margin: var(--sib-sp-3) 0 0; }
.sib-technical-details-link { color: var(--sib-muted); font-size: var(--sib-fs-label); }