/* =========================================================
   The combined subhire editor
   css/system/components/subhire-editor.css

   Authority: docs/design-authorities/snag-arcs/
              combined-subhire-editor-authority.html (b2)

   THE ONE BREAKPOINT. Two panes above 900px, one column below, and the
   legs stay open in both. That is a breakpoint, not a second design —
   there is one DOM and the grid changes shape around it.

   Everything here sits INSIDE .ws (the shared write surface), which owns
   the posture, the scroll and the dismiss. This file styles the body
   only, and adds no second popup system.
   ========================================================= */

.sbe-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  align-items: start;
}

/* ── THE MOVEMENT MODAL'S OWN PROPORTION (v2, round 7) ────
   The subhire editor's spine is a fixed 380px because it holds short
   fields beside two big leg cards. The movement modal's spine holds the
   route — two comboboxes whose whole value is a long searchable label,
   and two addresses — against ONE card, so it earns closer to half.
   Same grid, same width family, different share. */
.sbe-grid--movement { grid-template-columns: 45% 1fr; }
@media (max-width: 900px) {
  .sbe-grid--movement { grid-template-columns: 1fr; }
}

/* ── LOCKED, NOT DISABLED-LOOKING (round 7) ───────────────
   A movement opened from a project belongs to it. The field is beige
   and inert — the same treatment the subhire editor gives a fixed
   project — so "this is settled" reads identically on both, rather
   than looking like a control that failed to load. */
.sbe-input--locked {
  background: var(--warm, #F2EDE2);
  color: var(--ink-2, rgba(0, 0, 0, 0.72));
  border-color: var(--rule, rgba(0, 0, 0, 0.1));
}
.sbe-spine {
  padding: var(--s-4, 16px) var(--s-5, 20px) var(--s-5, 20px) 0;
  border-right: 1px solid var(--rule-structural, rgba(0, 0, 0, 0.14));
  min-width: 0;
}
.sbe-legs {
  padding: var(--s-4, 16px) 0 var(--s-5, 20px) var(--s-5, 20px);
  min-width: 0;
}
@media (max-width: 900px) {
  .sbe-grid { grid-template-columns: 1fr; }
  .sbe-spine {
    border-right: 0;
    border-bottom: 1px solid var(--rule-structural, rgba(0, 0, 0, 0.14));
    padding: 0 0 var(--s-4, 16px);
  }
  .sbe-legs { padding: var(--s-4, 16px) 0 0; }
}
.sbe-solo { min-width: 0; }

/* ── fields ─────────────────────────────────────────────── */
.sbe-field { display: block; margin-bottom: var(--s-3, 12px); min-width: 0; }
.sbe-field__label {
  display: block;
  font-family: var(--font-cd, "aktiv-grotesk-condensed", sans-serif);
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-bottom: 5px;
}
.sbe-field__hint {
  text-transform: none; letter-spacing: 0;
  font-family: var(--font-body, sans-serif);
  color: var(--ink-4, rgba(0, 0, 0, 0.38));
}
.sbe-input {
  width: 100%; font-family: var(--font-body, sans-serif); font-size: 14px;
  color: var(--ink, #000); background: var(--paper, #fff);
  padding: 9px 11px;
  border: 1px solid var(--rule-2, rgba(0, 0, 0, 0.22));
  border-radius: var(--r-1, 4px);
}
.sbe-input--area { min-height: 54px; resize: vertical; }
.sbe-input:focus-visible {
  outline: 2px solid var(--zeal-orange, #FF5800); outline-offset: -1px;
}
.sbe-input:disabled { background: var(--warm, #F2EDE2); color: var(--ink-2, rgba(0,0,0,.72)); }

.sbe-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3, 12px); }
.sbe-row3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-3, 12px); }
@media (max-width: 640px) {
  .sbe-row2, .sbe-row3 { grid-template-columns: 1fr; }
}

.sbe-derived {
  font-size: 13px; color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin: 0 0 var(--s-3, 12px);
}
.sbe-derived__mark { display: block; color: var(--accent-green, #1F7A4A); }

/* ── a leg that rides a run states what it belongs to ─────────
   (Aug 2026) The vehicle and driver controls are ABSENT here, not
   disabled — the run holds the resource, and a vehicle assigned on the
   leg would be a claim the run knows nothing about that uncombining
   would then overwrite with an empty stash.

   Styled as a quiet statement rather than a warning: nothing is wrong,
   this is simply where the fact lives. */
.sbe-runlock {
  border-left: 2px solid var(--rule-2, rgba(0, 0, 0, .14));
  padding-left: var(--s-3, 12px);
}
.sbe-runlock__lead {
  margin: 0 0 4px;
  font-family: var(--font-cd); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
}
.sbe-runlock .sbe-derived:last-child { margin-bottom: 0; }

/* ── THE DATE MODEL'S THREE ADDITIONS (9 Aug 2026) ─────────
   Possession, journey, envelope. All three are DERIVED or SECONDARY
   facts sitting beside a primary control, so all three read quieter
   than the field above them — the hire's dates stay the loud thing on
   the card, which is what the model says they are. */

/* the physical window: when the kit is actually on our dock, as against
   the "on hire" line directly above it, which is what we are paying for.
   Shown only when the two differ (snag arc, Aug 2026). */
.sbe-derived__env {
  display: block; margin-top: 3px;
  color: var(--ink-4, rgba(0, 0, 0, 0.42));
}
/* and WHY it differs, named rather than left to arithmetic: an early
   delivery or a late return is a normal, legal state and the reader
   should not have to compare four dates to see which one this is. */
.sbe-derived__flag {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-family: var(--font-cd);
  text-transform: lowercase; letter-spacing: 0.04em;
}
/* the two states the containment rule REFUSES on write. Rows predating the
   trigger still hold them, so they are named in the error colour rather
   than sitting quietly beside the two legal ones. */
.sbe-derived__flag.is-wrong { color: var(--accent-red, #E24B4A); }

/* the dock time, a sub-field of the leg's time rather than a peer of
   it — indented under the row it qualifies so "one question per leg"
   still reads true at a glance */
.sbe-subfield {
  margin-top: var(--s-2, 8px); padding-left: var(--s-3, 12px);
  border-left: 2px solid var(--rule-2, rgba(0, 0, 0, 0.09));
}

/* the journey. Mirrored is a sentence, not a control: the dates above
   already said it, and a disabled date input would invite the question
   "why can't I?" that the affordance underneath has already answered. */
.sbe-journey { margin-top: var(--s-3, 12px); }

/* ── the leg date and its link to the hire (Aug 2026) ─────────
   The date sits beside its own opt-out rather than above or below it,
   because they are one decision: which day, and whether that day is the
   hire's. A linked input is disabled but PRESENT — hiding it would mean
   the card stops saying when the van comes, which is the one thing the
   warehouse reads off it. */
.sbe-legdate { display: flex; align-items: center; gap: var(--s-3, 12px); }
.sbe-legdate .sbe-input { flex: 1; min-width: 0; }
.sbe-legdate .sbe-input:disabled { opacity: .6; cursor: default; }
.sbe-legdate__opt {
  display: inline-flex; align-items: center; gap: 5px;
  flex: none; cursor: pointer;
  font-family: var(--font-cd); font-size: 11px; letter-spacing: .05em;
  color: var(--ink-3);
}
.sbe-legdate__opt input { cursor: pointer; }
.sbe-journey.is-override {
  padding: var(--s-3, 12px); border-radius: var(--r-soft, 6px);
  background: var(--warm, rgba(0, 0, 0, 0.025));
}
.sbe-journey .sbe-derived { margin-bottom: 4px; }

/* ── the segmented control ──────────────────────────────── */
.sbe-seg {
  display: inline-flex;
  border: 1px solid var(--rule-2, rgba(0, 0, 0, 0.22));
  border-radius: var(--r-1, 4px); overflow: hidden;
}
.sbe-seg__btn {
  font-family: var(--font-body, sans-serif); font-size: 13px;
  padding: 8px 13px; border: 0; cursor: pointer;
  background: var(--paper, #fff); color: var(--ink-2, rgba(0, 0, 0, 0.72));
  border-right: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
}
.sbe-seg__btn:last-child { border-right: 0; }
.sbe-seg__btn.is-on { background: var(--ink, #000); color: var(--paper, #fff); font-weight: 500; }
.sbe-seg__btn:disabled { opacity: 0.45; cursor: default; }
.sbe-seg__btn:focus-visible { outline: 2px solid var(--zeal-orange, #FF5800); outline-offset: -2px; }

/* ── THE CARD SIZES ITSELF (round 7.1) ────────────────────
   The card is shared: it sits in the subhire editor's wide legs pane
   AND in the movement modal's narrower right pane. A media query would
   ask the WINDOW how much room the card has, which is the wrong
   question — the window is the same size in both cases and the card is
   not. So the card is a container and its rows ask IT.

   THE THRESHOLD IS MEASURED, NOT GUESSED — and the first guess was wrong
   by 237px, which is why it was measured. Rendering both real modal
   shells (.ws--wide 760px and .ws--xwide 1160px, each with its own
   .sbe-grid share) puts the card at 357px in the movement modal and
   687px in the subhire editor. 640px sits clear of both, so neither
   surface is near the edge of the rule.

   What 357px at two columns actually did: each track came out 164.8px,
   and a picker showing a vehicle's full label wants 195px — so it
   overflowed its own track into the neighbouring column, and the driver's
   ✓ landed exactly on the card's right edge. That is the report. Stacked,
   the same picker gets 254px and the ✓ sits 14px inside. The subhire
   editor is untouched at 335px columns either way.

   One rule, two surfaces, and neither had to be special-cased.

   DO NOT "TIDY" THIS INTO `contain: layout` OR ADD `contain: paint`.
   `container-type` alone does not establish a stacking context, so the
   typeahead's dropdown (.plx-ts__list, z-index 120) still escapes the
   card and paints over the leg card below it — checked with two stacked
   cards, the lower one forced to z-index 1, dropdown still on top.
   Adding `contain: layout` flips exactly that check to COVERED: the
   dropdown gets trapped in the card and the return leg swallows it.
   The containment `container-type` needs is already implied; spelling
   it out is what breaks it. */
.sbe-leg { container-type: inline-size; container-name: sbe-card; }

@container sbe-card (max-width: 640px) {
  /* vehicle + driver, and the standalone date + time pair */
  .sbe-leg__body .sbe-row2 { grid-template-columns: 1fr; }
}
/* no container-query support: stack always. Cramped-but-whole beats
   side-by-side-and-clipped, and this is the branch that runs on
   anything old enough not to know what a container is. */
@supports not (container-type: inline-size) {
  .sbe-leg__body .sbe-row2 { grid-template-columns: 1fr; }
}

/* ── the leg card ───────────────────────────────────────── */
.sbe-leg {
  border: 1px solid var(--rule-structural, rgba(0, 0, 0, 0.14));
  border-radius: var(--r-soft, 6px);
  margin-bottom: var(--s-3, 12px);
  background: var(--paper, #fff);
}
.sbe-leg.is-focused {
  /* b1: a subhire-owned movement opens the editor scrolled to that leg
     with a BRIEF highlight — enough to say "this one", not a permanent
     selected state the next person has to dismiss. */
  box-shadow: 0 0 0 2px var(--zeal-orange, #FF5800);
  animation: sbe-flash 1.6s ease-out 1 forwards;
}
@keyframes sbe-flash {
  0%, 55% { box-shadow: 0 0 0 2px var(--zeal-orange, #FF5800); }
  100%    { box-shadow: 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .sbe-leg.is-focused { animation: none; }
}
/* ── THE RIGHT PANE READS AT THE SPINE'S SCALE (2026-08-08) ──
   The two panes were designed apart and it showed: the spine's register
   is a 12px condensed label over a 14px input, and the leg cards came in
   a size up — a 34px glyph tile, a 17px glyph, a 14px extended title and
   12/14 padding. Side by side across one hairline, the right pane read
   like a different, louder document, and the eye went to the legs when
   the spine is the thing that owns the hire.

   Nothing structural moved. What changed is TYPE SIZE AND RHYTHM: the
   head steps down to sit level with a spine field, the glyph tile stops
   being the largest object in the dialog, and the head's padding lines
   up with the field rhythm (12px) rather than running its own 14px.
   Colour, geometry, radii and behaviour are untouched. */
.sbe-leg__head {
  display: flex; align-items: center; gap: var(--s-2, 8px);
  padding: 9px 12px;
}
.sbe-leg__glyph {
  font-family: var(--font-ex, "aktiv-grotesk-extended", sans-serif);
  font-weight: 900; font-size: 13px;
  width: 26px; height: 26px; flex: 0 0 26px;
  display: grid; place-items: center;
  border-radius: var(--r-1, 4px); background: var(--warm, #F2EDE2);
}
/* direction colour lives on the glyph only. The wall spends green/orange
   on direction across a whole screen; here it is one small anchor, and
   the rest of the card stays neutral so attention has somewhere to go. */
.sbe-leg--in  .sbe-leg__glyph { color: var(--accent-green, #1F7A4A); }
.sbe-leg--out .sbe-leg__glyph { color: var(--zeal-orange-digital, #DC3C00); }
/* level with .sbe-field__label: same 12px, same uppercase, same tracking.
   It keeps EXTENDED and 700 where the field label is condensed and 500,
   which is the whole difference between "this is a section" and "this is
   a field" — said in weight and family rather than in size. */
.sbe-leg__title {
  font-family: var(--font-ex, "aktiv-grotesk-extended", sans-serif);
  font-weight: 700; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sbe-leg__summary { flex: 1; font-size: 12.5px; color: var(--ink-2, rgba(0, 0, 0, 0.72)); }
.sbe-leg__body {
  padding: 2px 12px 13px;
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
}
.sbe-pane { margin-top: var(--s-2, 8px); }

/* ── THE SLOT: control, then its p/✓ pair ─────────────────
   `auto` on the second column keeps the seg at its intrinsic width. The
   FIRST column needs `minmax(0, 1fr)` and `min-width: 0` on the child,
   because a bare `1fr` floors at min-content: a Typeahead showing a
   vehicle's full label would not shrink below 195px, so in a narrow card
   it overflowed its own track and sat over its neighbour. `overflow:
   hidden` on .plx-ts__value is not enough on its own — the floor is the
   track's, not the label's, so it has to be lifted here.

   This pairs with the container query above and does not replace it:
   this stops a long label bursting its column, that gives the column
   enough room to be worth having. */
.sbe-slot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px; align-items: center;
}
.sbe-slot > :first-child { min-width: 0; }
.sbe-slot .sbe-seg { flex: none; }

/* ── the address block ──────────────────────────────────── */
.sbe-addr { position: relative; margin-top: var(--s-3, 12px); }
.sbe-copy {
  position: absolute; right: 5px; top: 26px;
  font-family: var(--font-body, sans-serif); font-size: 12px;
  padding: 4px 9px; cursor: pointer;
  background: var(--paper, #fff); color: var(--ink-2, rgba(0, 0, 0, 0.72));
  border: 1px solid var(--rule-2, rgba(0, 0, 0, 0.22));
  border-radius: var(--r-1, 4px);
}
.sbe-copy:hover { color: var(--ink, #000); }
/* the same control where there is no textarea to sit on top of: the
   route override toggles, which are inline acts in the flow rather
   than an affordance pinned to a field's corner */
.sbe-copy--inline {
  position: static; margin-top: 6px; display: inline-block;
}

/* ── movement-only: the head the subhire context derives ── */
.sbe-mvhead {
  padding-bottom: var(--s-3, 12px);
  margin-bottom: var(--s-3, 12px);
  border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
}

/* ── the run chip: a door, never an editor ──────────────── */
.sbe-runchip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-3, 12px);
  font-family: var(--font-body, sans-serif); font-size: 12.5px;
  padding: 5px 11px; cursor: pointer;
  background: none; color: var(--ink-2, rgba(0, 0, 0, 0.72));
  border: 1px dashed var(--rule-2, rgba(0, 0, 0, 0.22));
  border-radius: 999px;
}
.sbe-runchip:disabled { cursor: default; opacity: 0.7; }

/* ── the leg note, on demand ────────────────────────────── */
.sbe-legnote { margin-top: var(--s-3, 12px); }
.sbe-legnote > summary {
  font-size: 12.5px; color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer; user-select: none;
}
.sbe-legnote > textarea { margin-top: 7px; }

/* ── marks, read-only, always ───────────────────────────── */
.sbe-marks {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin-top: var(--s-3, 12px); padding: 7px 10px;
  background: var(--surface, #FAFAF8);
  border: 1px dashed var(--rule-structural, rgba(0, 0, 0, 0.14));
  border-radius: var(--r-1, 4px);
  font-size: 12.5px; color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.sbe-marks__k {
  font-family: var(--font-cd, "aktiv-grotesk-condensed", sans-serif);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.sbe-marks__m.is-set { color: var(--accent-green, #1F7A4A); font-weight: 600; }
.sbe-marks__note { flex-basis: 100%; color: var(--ink-4, rgba(0, 0, 0, 0.38)); }

/* ── THE ACTIONABLE MARK (round 6) ────────────────────────
   Standalone movements only. It sits on its own line under the
   timestamps rather than inline with them, because the timestamps are a
   RECORD and the button is an ACT — putting them on one line makes the
   button read as a fourth timestamp.

   The canonical .mark is a gloved-hand target at 158px min-width, which
   is right on a wall and wrong in a modal; the size is overridden here
   and nothing else is. */
.sbe-marks__act { flex-basis: 100%; margin-top: var(--s-2, 8px); }
.sbe-marks__act .mark {
  min-width: 0; font-size: 12px; padding: 7px 14px;
}

/* ── chips ──────────────────────────────────────────────── */
.sbe-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap;
}
.sbe-chip--ok    { background: var(--green-soft, #E8F3EC); color: var(--accent-green, #1F7A4A); }
.sbe-chip--warn  { background: var(--amber-soft, #FBF1DC); color: var(--amber, #A66F0F); }
.sbe-chip--quiet { background: var(--warm, #F2EDE2); color: var(--ink-3, rgba(0, 0, 0, 0.55)); }

/* ── the spine's foot ───────────────────────────────────── */
.sbe-spine__foot {
  display: flex; align-items: center; gap: var(--s-3, 12px);
  margin-top: var(--s-4, 16px);
}
/* inert by design (b11): the affordance is the roadmap promise, and it
   does nothing until the PO phase. `cursor: not-allowed` and the muted
   dashed border say so before the tooltip has to. */
.sbe-po {
  font-size: 12px; padding: 5px 11px; cursor: not-allowed;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  border: 1px dashed var(--rule-2, rgba(0, 0, 0, 0.22));
  border-radius: var(--r-1, 4px);
}
.sbe-paperwork { font-size: 13px; color: var(--link, #DC3C00); }
/* the MISSING state (round 5). A project with no folder link is a
   different fact from a subhire with no project, and both used to
   render as nothing at all — so "there is no paperwork" and "nobody has
   linked the folder yet" were indistinguishable. Muted and unclickable,
   because it is information rather than an action: the folder is set on
   the project page, not here. */
.sbe-paperwork--missing {
  color: var(--ink-4, rgba(0, 0, 0, 0.42));
  cursor: default; font-style: italic;
}

/* ── the keep-or-remove ask ─────────────────────────────────
   A second layer above the write surface, deliberately: this question
   has a consequence the user must read, and the authority is explicit
   that NOTHING ABOUT THE LINK CHANGES WITHOUT ASKING. It is not a
   dismissable scrim — there is no click-outside — because an accidental
   dismissal here would leave the mode switched with no disposition. */
.sbe-ask {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink, #000) 45%, transparent);
  padding: var(--s-4, 16px);
}
.sbe-ask__box {
  width: 460px; max-width: 100%;
  background: var(--paper, #fff);
  border: 1px solid var(--ink, #000);
  border-radius: var(--r-soft, 6px);
  padding: var(--s-5, 20px);
  box-shadow: var(--shadow-3, 0 14px 40px rgba(0, 0, 0, 0.2));
}
.sbe-ask__box h3 {
  font-family: var(--font-ex, "aktiv-grotesk-extended", sans-serif);
  font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
  margin: 0 0 var(--s-2, 8px); text-transform: lowercase;
}
.sbe-ask__box p {
  margin: 0 0 var(--s-3, 12px); font-size: 14px;
  color: var(--ink-2, rgba(0, 0, 0, 0.72));
}
.sbe-ask__warn { color: var(--red-status, #C62828); font-weight: 500; }
.sbe-ask__actions {
  display: flex; justify-content: flex-end; gap: var(--s-2, 8px);
  flex-wrap: wrap;
}

/* ── THE RESTRUCTURED CARD (9 Aug 2026 evening) ────────────
   Dates left for the spine; what remains is the transport event. */

/* the times row. Two on an incoming card (collection at the supplier,
   arrival at our dock), one on an outgoing card — so it is a flow
   rather than a fixed grid, and a single field does not sit in half a
   row looking like something is missing. */
.sbe-times {
  display: flex; flex-wrap: wrap; gap: var(--s-3, 12px);
  margin-top: var(--s-3, 12px);
}
.sbe-times > .sbe-field { flex: 1 1 150px; min-width: 0; }

/* the two address verbs, side by side. "copy from X" fills the field;
   "copy address" puts the value on the clipboard. */
.sbe-addr__acts {
  display: flex; flex-wrap: wrap; gap: var(--s-2, 8px);
  margin-top: var(--s-2, 8px);
}
/* ACTIONS, not state. Deliberately NOT .sbe-chip — that is the status
   pill (tinted ground, no border), and a button wearing it would read
   as something the leg IS rather than something you can do to it. */
.sbe-addrbtn {
  appearance: none; cursor: pointer;
  font-family: var(--font-cd, inherit); font-size: 12px;
  letter-spacing: 0.03em; padding: 4px 10px;
  border: 1px solid var(--rule-2, rgba(0, 0, 0, 0.12));
  border-radius: var(--r-soft, 6px);
  background: var(--paper, #fff); color: var(--ink-2, rgba(0, 0, 0, 0.7));
}
.sbe-addrbtn:hover { border-color: var(--ink-3, rgba(0, 0, 0, 0.5)); color: var(--ink, #000); }
.sbe-addrbtn--clip { border-style: dashed; }

/* ── ALIGNMENT PASS (v2, round 7) ─────────────────────────
   One field per line means the labels form a column, so they have to
   share a baseline rhythm — inputs, textareas and the Typeahead's own
   button were each setting their own height and the labels drifted
   against each other down the spine. */
.sbe-mvhead .sbe-field { margin-bottom: var(--s-4, 16px); }
.sbe-mvhead .sbe-field__label { min-height: 15px; }
.sbe-mvhead .sbe-input,
.sbe-mvhead .plx-ts__display { min-height: 38px; box-sizing: border-box; }
.sbe-mvhead .sbe-input--area { min-height: 54px; }
/* the address block sits UNDER the end it describes, indented, so the
   pair reads as one question with a follow-up rather than two peers */
.sbe-mvhead .sbe-addr {
  margin: calc(var(--s-3, 12px) * -1) 0 var(--s-4, 16px) var(--s-3, 12px);
  padding-left: var(--s-3, 12px);
  border-left: 2px solid var(--rule-2, rgba(0, 0, 0, 0.09));
}
.sbe-mvhead .sbe-addr .sbe-field { margin-bottom: var(--s-2, 8px); }