/*
 * The admin UI's stylesheet.
 *
 * Served from `/static/admin.css`, which is the only thing the CSP allows:
 * `default-src 'none'; style-src 'self'`. So there is no client JavaScript,
 * no inline `style=`, no web font and no image file anywhere in this UI —
 * icons are inline `<svg>` in the document, which is not a fetch.
 *
 * Two mechanisms here do work that a script would usually do, and both are
 * load-bearing rather than clever:
 *
 *   - **Tabs** are `:target` plus `:has()`. A tab link is a fragment link, so
 *     switching tabs does not reload and an in-progress form keeps its edits.
 *   - **Info popovers** are `<details>`. They open on click and on Enter, and
 *     they are reachable by keyboard and by touch, which a `:hover` tooltip
 *     is not.
 *
 * `light-dark()` carries the two themes, so a colour is declared once. The
 * `color-scheme` declaration on `:root` is what makes it resolve.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  --fg:        light-dark(#16181d, #e8eaee);
  --dim:       light-dark(#5c6370, #9aa1ad);
  --faint:     light-dark(#7c8290, #767d89);
  --line:      light-dark(#e2e5ea, #2a2e36);
  --line-firm: light-dark(#cdd2da, #363b45);
  --bg:        light-dark(#f6f7f9, #121418);
  --card:      light-dark(#ffffff, #1a1d22);
  --sunk:      light-dark(#f2f4f7, #16181d);
  --accent:    light-dark(#2f5fd0, #7ea6ff);
  --accent-bg: light-dark(#eaf0fd, #1b2436);
  --ok:        light-dark(#1f7a4d, #54c08a);
  --ok-bg:     light-dark(#e8f5ee, #14251d);
  --warn:      light-dark(#8a5a00, #e0ad4a);
  --warn-bg:   light-dark(#fdf3e0, #2a2113);
  --bad:       light-dark(#a3282c, #e5787c);
  --bad-bg:    light-dark(#fdecec, #2b1719);

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px light-dark(rgb(16 24 40 / .05), rgb(0 0 0 / .35));
  --shadow-pop: 0 8px 28px light-dark(rgb(16 24 40 / .16), rgb(0 0 0 / .55));
  --sans: ui-sans-serif, -apple-system, system-ui, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sidebar: 15.5rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── The shell ──────────────────────────────────────────────────────────── */

.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100dvh; }

/* A page with no sidebar must not reserve a column for one (M23 part 2).
   `.skip` is absolutely positioned and so is not a grid item, which means the
   content column was the *only* one — it landed in the 15.5rem track, cards
   shrank to that width and the feed table overflowed it. Seen on the session
   record page, which is the first screen ever rendered without a nav. */
.shell.bare { grid-template-columns: minmax(0, 1fr); }

.skip {
  position: absolute; left: -9999px; top: var(--s2);
  background: var(--card); color: var(--fg); padding: var(--s2) var(--s4);
  border: 1px solid var(--line-firm); border-radius: var(--radius-sm); z-index: 20;
}
.skip:focus { left: var(--s2); }

.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s5);
  padding: var(--s5) var(--s3) var(--s4);
  background: light-dark(#fbfbfd, #15171b);
  border-right: 1px solid var(--line);
}

.brand {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s2); margin: 0;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em;
}
.brand .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

.navgroup { display: flex; flex-direction: column; gap: 1px; }
.navgroup h2 {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 600; margin: 0 0 var(--s2); padding: 0 var(--s2);
}
.navgroup a {
  display: flex; align-items: center; gap: var(--s2);
  padding: .4rem var(--s2); border-radius: var(--radius-sm);
  color: var(--fg); text-decoration: none; font-size: .875rem;
}
.navgroup a:hover { background: light-dark(#eef0f4, #1d2027); }
.navgroup a[aria-current="page"] { background: var(--accent-bg); color: var(--accent); font-weight: 500; }
.navgroup a .grow { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navgroup .icon { flex: 0 0 auto; color: var(--faint); }
.navgroup a[aria-current="page"] .icon { color: var(--accent); }
.navgroup .new { color: var(--dim); }

.icon { width: 1rem; height: 1rem; display: inline-block; vertical-align: -.18em; }

/*
 * The icon sprite. It carries `hidden` too, but this rule is the one that
 * works: an `<svg>` with no dimensions is a replaced element 300×150 by
 * default, and a browser does not reliably apply the UA stylesheet's
 * `[hidden]` to an SVG root — which laid out 150px of nothing above the whole
 * interface until somebody looked at it in a window.
 */
.sprite { display: none; }

/* A running agent, a paused one. Not colour alone — the shapes differ. */
.state { width: .5rem; height: .5rem; border-radius: 50%; flex: 0 0 auto; background: var(--ok); }
.state.off { background: none; border: 1.5px solid var(--faint); }

.count {
  font-size: .6875rem; font-variant-numeric: tabular-nums;
  background: var(--bad); color: #fff; border-radius: 99px; padding: .05rem .4rem; flex: 0 0 auto;
}
.tick { color: var(--ok); flex: 0 0 auto; font-size: .8125rem; }
.tick.none { color: var(--faint); }
.tick.warn { color: var(--warn); }

.whoami { margin-top: auto; padding: var(--s3) var(--s2) 0; border-top: 1px solid var(--line); }
.whoami .who { display: block; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; }
.whoami .role { font-size: .6875rem; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.whoami form { display: block; margin-top: var(--s2); }
.whoami button { border: 0; padding: 0; color: var(--dim); font-size: .8125rem; }
.whoami button:hover { color: var(--fg); text-decoration: underline; }

/* ── The content column ─────────────────────────────────────────────────── */

.content { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s6);
  background: light-dark(rgb(246 247 249 / .88), rgb(18 20 24 / .88));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 1.125rem; font-weight: 600; margin: 0; letter-spacing: -.015em; }
.topbar .crumb { color: var(--faint); font-weight: 400; }
.topbar .crumb a { color: var(--faint); text-decoration: none; }
.topbar .crumb a:hover { color: var(--fg); }

main { padding: var(--s5) var(--s6) 5rem; max-width: 58rem; width: 100%; }
main.narrow { max-width: 44rem; }

h2 { font-size: .9375rem; font-weight: 600; margin: var(--s6) 0 var(--s3); letter-spacing: -.005em; }
h2:first-child { margin-top: 0; }
h3 { font-size: .875rem; font-weight: 600; margin: var(--s5) 0 var(--s2); }
p { margin: var(--s2) 0; }
a { color: var(--accent); }

.dim { color: var(--dim); font-size: .8125rem; }
.bad { color: var(--bad); }
.mt { margin-top: var(--s5); }
.center { text-align: center; padding-top: 15vh; max-width: 26rem; margin: 0 auto; }
.center h1 { font-size: 1.5rem; letter-spacing: -.02em; }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s4) var(--s5); margin: var(--s3) 0; box-shadow: var(--shadow);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card > strong { display: block; margin-bottom: var(--s1); }

.clear   { border-color: light-dark(#bfe3ce, #2c4a3a); background: var(--ok-bg); }
.clear strong { color: var(--ok); }
.notice  { border-color: light-dark(#bfe3ce, #2c4a3a); background: var(--ok-bg); }
.problem { border-color: light-dark(#f0c3c3, #543034); background: var(--bad-bg); }
.problem strong { color: var(--bad); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s3); margin: var(--s3) 0; }
.grid .card { margin: 0; }

.agent { display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; }
.agent strong a { color: inherit; text-decoration: none; }
.agent strong a:hover { color: var(--accent); }

.badge {
  font-size: .6875rem; border: 1px solid var(--line-firm); border-radius: 99px;
  padding: .1rem .5rem; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.paused { border-color: var(--bad); color: var(--bad); }

/* A row of "what is set up", denser than a card each. */
.rows { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.rows .row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.rows .row:first-child { border-top: 0; }
.rows a.row:hover { background: var(--sunk); }
.rows .row .grow { flex: 1 1 auto; min-width: 0; }
.rows .row .grow strong { font-weight: 500; font-size: .9375rem; }
.rows .row .grow .dim { display: block; }
.rows .row .chev { color: var(--faint); }

/* The activity feed (M7). One table, two surfaces — the agent's own history
   and the harness's — so the shape is declared once here too. */
/* `separate` rather than `collapse`, so the rounded corners actually clip:
   a collapsed table's border-radius is ignored by most browsers. The row
   rules are drawn by the cells' own `border-top` either way. */
.feed {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--s3) 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); font-size: .875rem;
}
.feed th, .feed td { text-align: left; padding: var(--s2) var(--s4); border-top: 1px solid var(--line); vertical-align: top; }
.feed thead th { border-top: 0; color: var(--dim); font-size: .75rem; font-weight: 500; }
.feed tbody tr:hover { background: var(--sunk); }
.feed td.nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* An action this build has no sentence for. Visibly a gap rather than a row
   that quietly says less than the others — see src/audit/describe.js. */
.feed tr.unworded td { color: var(--dim); font-style: italic; }
/* The row you are looking at, in a list that is also the navigation for the
   table below it (the month list on Costs). */
.feed tr.selected td { background: var(--accent-bg); }

/* ── A proportion bar (M19) ───────────────────────────────────────────────
 * A width cannot be an inline style here: the CSP is `default-src 'none';
 * style-src 'self'`, so `style="width:…"` is a blocked attribute rather than
 * a rendering choice — and a script to set it is blocked twice over. So a
 * proportion is one of twenty-one buckets, five per cent apart, chosen in the
 * renderer.
 *
 * The rounding costs a reader nothing, because a bar is never the only
 * carrier of a number: M18's accessibility contract says status may not rest
 * on colour or shape alone, and the figure sits in the same cell. That is
 * also why the bar itself is `aria-hidden` — it would otherwise be an empty
 * element announced beside the number it duplicates.
 */
.bar {
  display: inline-block; width: 4.5rem; height: .45rem; margin-right: var(--s2);
  background: var(--sunk); border: 1px solid var(--line); border-radius: 99px;
  overflow: hidden; vertical-align: middle;
}
.bar span { display: block; height: 100%; background: var(--accent); }
.bar span.w0  { width: 0; }
.bar span.w1  { width: 5%; }
.bar span.w2  { width: 10%; }
.bar span.w3  { width: 15%; }
.bar span.w4  { width: 20%; }
.bar span.w5  { width: 25%; }
.bar span.w6  { width: 30%; }
.bar span.w7  { width: 35%; }
.bar span.w8  { width: 40%; }
.bar span.w9  { width: 45%; }
.bar span.w10 { width: 50%; }
.bar span.w11 { width: 55%; }
.bar span.w12 { width: 60%; }
.bar span.w13 { width: 65%; }
.bar span.w14 { width: 70%; }
.bar span.w15 { width: 75%; }
.bar span.w16 { width: 80%; }
.bar span.w17 { width: 85%; }
.bar span.w18 { width: 90%; }
.bar span.w19 { width: 95%; }
.bar span.w20 { width: 100%; }

dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s5); margin: 0; }
dt { color: var(--dim); font-size: .8125rem; }
dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

button {
  font: inherit; font-size: .875rem; color: var(--fg); background: var(--card);
  border: 1px solid var(--line-firm); border-radius: var(--radius-sm);
  padding: .35rem .75rem; cursor: pointer;
}
button:hover { background: var(--sunk); }
button.primary { color: light-dark(#fff, #0f1115); background: var(--fg); border-color: var(--fg); padding: .45rem 1rem; font-weight: 500; }
button.primary:hover { opacity: .88; }
button[disabled] { opacity: .5; cursor: not-allowed; }

a.button {
  display: inline-block; text-decoration: none; font-size: .875rem; font-weight: 500;
  background: var(--fg); color: light-dark(#fff, #0f1115);
  border-radius: var(--radius-sm); padding: .5rem 1.1rem;
}

form { display: inline; }
form.block { display: block; }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s3); }
.actions form { display: inline-flex; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

label { display: block; margin: var(--s4) 0 var(--s1); font-weight: 500; font-size: .875rem; }
label .dim { font-weight: 400; }

input[type=password], input[type=search], input[type=text], select, textarea {
  width: 100%; font: inherit; font-size: .9375rem; color: var(--fg);
  background: var(--card); border: 1px solid var(--line-firm);
  border-radius: var(--radius-sm); padding: .5rem .65rem;
}
textarea { min-height: 11rem; resize: vertical; line-height: 1.5; font-size: .875rem; }
input::placeholder { color: var(--faint); }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s4) var(--s4); margin: var(--s5) 0; background: var(--card); }
legend { font-weight: 600; font-size: .875rem; padding: 0 var(--s1); }
fieldset label { display: flex; gap: var(--s2); align-items: baseline; font-weight: 400; margin: var(--s3) 0 0; }
fieldset label span.dim { display: block; }
input[type=radio], input[type=checkbox] { margin: 0; flex: 0 0 auto; accent-color: var(--accent); transform: translateY(.15rem); }

.row2 { display: flex; gap: var(--s4); }
.row2 > * { flex: 1; min-width: 0; }

/* The sticky save bar at the foot of a form that is longer than a screen. */
.formbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s5) calc(var(--s6) * -1) 0; padding: var(--s3) var(--s6);
  background: light-dark(rgb(246 247 249 / .92), rgb(18 20 24 / .92));
  backdrop-filter: blur(8px); border-top: 1px solid var(--line);
}

/* ── The three-way tool control, as one segmented thing ─────────────────── */

.segmented { display: flex; gap: 0; margin-top: var(--s3); flex-wrap: wrap; }
.segmented label {
  flex: 1 1 10rem; margin: 0; display: block; cursor: pointer;
  border: 1px solid var(--line-firm); padding: .45rem .7rem;
  font-size: .8125rem; font-weight: 500;
}
.segmented label:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.segmented label:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.segmented label + label { border-left: 0; }
.segmented label span.dim { display: block; font-weight: 400; margin-top: .1rem; }
.segmented label:hover:not(:has(:disabled)) { background: var(--sunk); }
.segmented label:has(:checked) { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.segmented label:has(:checked) + label { border-left: 0; }
.segmented label:has(:disabled) { opacity: .45; cursor: not-allowed; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.tool { border-top: 1px solid var(--line); padding: var(--s4) 0 var(--s2); }
.tool:first-of-type { border-top: 0; }
.tool > strong { margin-right: var(--s2); }

/* A builtin tool's three axes, answered by the code (see `codeOwnedTags`). The
   same words and the same order as the checkboxes a connector's tool gets, laid
   out on one line so ten builtins can be compared by scanning down. Unticked is
   faded rather than hidden: which axes a tool does *not* claim is half of what
   this is here to say. */
.codetags { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s2) 0 0; }
.codetags label { margin: 0; font-size: .8125rem; cursor: default; }
.codetags label:not(:has(:checked)) { opacity: .55; }

/* What an argument is, where the connector did not say (§7.1). Curation, so
   it sits quieter than the disposition it is read beside. */
.shapes { margin: var(--s3) 0; padding-left: var(--s3); border-left: 2px solid var(--line); }
.shapes > p { margin-top: 0; }
.shapes label { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1); }
.shapes label > span { min-width: 8rem; font-family: var(--mono); font-size: .8125rem; }

/* ── Tabs: `:target` + `:has()`, so a switch keeps unsaved edits ────────── */

.tablist {
  display: flex; gap: var(--s1); flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: var(--s5);
}
.tablist a {
  padding: .45rem var(--s3); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--dim); text-decoration: none; font-size: .875rem; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tablist a:hover { color: var(--fg); }
.tablist .num { font-size: .6875rem; color: var(--faint); font-variant-numeric: tabular-nums; }

.tabpanel { display: none; scroll-margin-top: 5rem; }
.tabpanel:target { display: block; }
/*
 * Nothing targeted yet: the panel marked `first` is the one you land on. A
 * class rather than `:first-of-type`, because the panels do not share a
 * parent — three of them are inside the agent form and three are outside it,
 * since those hold forms of their own — and `:first-of-type` would show one
 * from each side at once.
 */
.tabs:not(:has(.tabpanel:target)) .tabpanel.first { display: block; }

.tabs:has(#tab-overview:target)     .tablist [href="#tab-overview"],
.tabs:has(#tab-instructions:target) .tablist [href="#tab-instructions"],
.tabs:has(#tab-tools:target)        .tablist [href="#tab-tools"],
.tabs:has(#tab-triggers:target)     .tablist [href="#tab-triggers"],
.tabs:has(#tab-access:target)       .tablist [href="#tab-access"],
.tabs:has(#tab-permissions:target)  .tablist [href="#tab-permissions"],
.tabs:not(:has(.tabpanel:target))   .tablist a:first-child {
  color: var(--fg); border-bottom-color: var(--accent);
}
.tablist a.flagged { color: var(--bad); }

/* ── Info popovers: declarative, so keyboard, touch and Escape all work ─── */

.helpchip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-firm); background: none; color: var(--faint);
  font: 600 .6875rem/1 var(--sans); cursor: help; vertical-align: baseline;
}
.helpchip:hover { color: var(--fg); border-color: var(--fg); }

/*
 * `[popover]` puts the panel in the top layer, so it is never clipped by a
 * scrolling panel or a sticky bar — which is what a tooltip positioned next
 * to its chip would be, half the time, in a sidebar layout.
 */
.help-body[popover] {
  width: min(34rem, 90vw); max-height: 70vh; overflow-y: auto;
  margin: auto; padding: var(--s5);
  background: var(--card); color: var(--dim);
  border: 1px solid var(--line-firm); border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  font: .875rem/1.6 var(--sans);
}
.help-body[popover]::backdrop { background: light-dark(rgb(16 24 40 / .28), rgb(0 0 0 / .55)); }
.help-body .hp { display: block; margin: var(--s3) 0; }
.help-body .hp:first-child { margin-top: 0; }
.help-body .hp:last-child { margin-bottom: 0; }

/* ── Checks: both halves of what they prove, always visible ─────────────── */

.check { margin: var(--s2) 0; }
.check p { margin: var(--s1) 0 0; }
.check.pass { border-color: light-dark(#bfe3ce, #2c4a3a); }
.check.pass strong { color: var(--ok); }
.check.fail { border-color: light-dark(#f0c3c3, #543034); }
.check.fail strong { color: var(--bad); }
.check.waiting strong, .check.unknown strong, .check.skipped strong { color: var(--dim); }

/* ── Code, quotes, misc ─────────────────────────────────────────────────── */

code {
  font: .85em var(--mono); background: var(--sunk);
  border: 1px solid var(--line); border-radius: 4px; padding: .1em .35em;
}
code.url { display: block; padding: .55rem .7rem; margin: var(--s2) 0; word-break: break-all; }
pre {
  font: .8125rem/1.55 var(--mono); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s4) var(--s5); margin: var(--s3) 0;
  white-space: pre-wrap; word-wrap: break-word; overflow-x: auto;
}

details:not(.help) > summary { cursor: pointer; font-size: .875rem; color: var(--dim); padding: var(--s2) 0; }
details:not(.help) > summary:hover { color: var(--fg); }

ul { margin: var(--s2) 0; padding-left: 1.2rem; }
li { margin: .15rem 0; }

nav.crumbs { margin: 0 0 var(--s4); }
nav.crumbs a { color: var(--dim); font-size: .8125rem; }

/* ── Narrow: the sidebar becomes a strip above the content ──────────────── */

@media (max-width: 60rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: var(--s4); overflow-x: auto; padding: var(--s2) var(--s3);
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .navgroup { flex-direction: row; align-items: center; gap: var(--s1); }
  .navgroup h2 { display: none; }
  .navgroup a { white-space: nowrap; }
  .whoami { margin: 0 0 0 auto; padding: 0 0 0 var(--s3); border-top: 0; border-left: 1px solid var(--line); }
  .whoami .role { display: none; }
  .topbar, main, .formbar { padding-left: var(--s4); padding-right: var(--s4); }
  .formbar { margin-left: calc(var(--s4) * -1); margin-right: calc(var(--s4) * -1); }
}