@azure-id/orc 0.55.0

package/bin/webui/css/panels/extra.css

@@ -0,0 +1,536 @@
+/* panels/extra.css — the Extra panel (v0.50.0), "Integrate with other AI model".
+
+   Loaded by app.html in the order its <link> sits in that manifest, and for CSS
+   the load order IS the cascade order — which is why 06-responsive and 04-motion
+   come after every panel sheet.
+
+   NO COLOUR TOKEN IS DEFINED HERE. Every one of them is declared once, on bare
+   :root, in 00-tokens.css.
+
+   The connect animation (v0.50.0) lives here as a keyframe; the reduced-motion
+   rule that REMOVES it lives in 04-motion.css with every other one, because
+   there is exactly ONE such media block in this codebase and a test asserts that
+   the literal appears in no panel sheet — including in a comment like this one,
+   which is why this paragraph does not spell it out. */
+
+/* --- the boundary card ---------------------------------------------------- */
+/* It renders ALWAYS and never behind a hover or a fold: somebody about to send
+   their source code to a third party should not have to go looking for the
+   paragraph that says so. The accent edge is what stops it reading as chrome. */
+.ex-boundary { border-left: 3px solid var(--accent); }
+.ex-boundary-line { margin: 0 0 var(--sp-2); color: var(--text-dim); font-size: 13px; line-height: 1.55; }
+.ex-boundary-line:first-of-type { color: var(--text); }
+
+/* --- the header strip ----------------------------------------------------- */
+/* Same shape as Knowledge's, and for the same reason: the numbers that answer
+   "what is set up here?" belong on one line above everything else. A `—` means
+   the CLI could not compute it, and that is an ANSWER. */
+.ex-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-4);
+  padding: var(--sp-3);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+}
+.ex-strip-item { display: grid; gap: 2px; }
+.ex-strip-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.ex-strip-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
+
+/* --- one connection ------------------------------------------------------- */
+.ex-profile {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  margin-top: var(--sp-2);
+  display: grid;
+  gap: var(--sp-2);
+}
+.ex-name { font-weight: 600; }
+.ex-finding { display: block; }
+
+/* The model names a real connection test read back. They are ids, so they are
+   monospace, and the row scrolls inside itself rather than widening the page. */
+.ex-models {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-1);
+  max-height: 92px;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.ex-models::-webkit-scrollbar { width: 8px; height: 8px; }
+.ex-models::-webkit-scrollbar-track { background: transparent; }
+.ex-models::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
+.ex-model {
+  font-size: 11px;
+  color: var(--text-dim);
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+  padding: 1px var(--sp-2);
+}
+
+/* --- the provider catalog ------------------------------------------------- */
+/* A fixed-width tile grid, so the catalog is the same picture whatever is in it
+   — the VAULT lesson: a box sized by its longest label cannot be laid out by
+   arithmetic. It wraps; it never squeezes. */
+.ex-provider-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  gap: var(--sp-2);
+  margin: var(--sp-2) 0;
+}
+.ex-provider {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  display: grid;
+  gap: var(--sp-2);
+  align-content: start;
+}
+.ex-provider-id { font-weight: 600; font-size: 13px; }
+.ex-provider-label { color: var(--text-dim); font-size: 12px; }
+.ex-link { color: var(--accent); font-size: 12px; text-decoration: none; }
+.ex-link:hover { text-decoration: underline; }
+
+/* --- the connect modal: the probe note, the wire, the result -------------- */
+/* R11's first animation. The pulse travels from this machine to the provider
+   and lands green or red — the feedback that makes an invisible network call
+   feel like an event, in the one place where a user has no other way to tell
+   whether anything happened. */
+
+.ex-probe {
+  border-left: 3px solid var(--line);
+  padding-left: var(--sp-3);
+  display: grid;
+  gap: 2px;
+}
+.ex-probe-head { font-weight: 600; font-size: 13px; }
+
+.ex-wire {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: var(--sp-3) 0;
+}
+.ex-wire-end {
+  font-size: 11px;
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  white-space: nowrap;
+}
+/* The line is the only thing that changes colour, so the whole state of the
+   probe reads at a glance without a single word moving. */
+.ex-wire-line {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 40px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--line);
+  transition: background var(--dur) var(--ease);
+}
+.ex-wire-dot {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  margin-top: -4px;
+  border-radius: 50%;
+  background: var(--accent);
+  opacity: 0;
+}
+/* INFINITE while the probe is in flight, because a probe has no known duration
+   — which is exactly why 04-motion.css removes this outright rather than
+   capping it: a capped infinite animation freezes mid-travel, and a dot stopped
+   half way across reads as a request that hung. */
+.ex-wire-live .ex-wire-dot { animation: ex-travel 1100ms var(--ease) infinite; }
+.ex-wire-live .ex-wire-line { background: var(--accent-dim); }
+.ex-wire-ok .ex-wire-line { background: var(--ok); }
+.ex-wire-bad .ex-wire-line { background: var(--bad); }
+@keyframes ex-travel {
+  0%   { left: 0;    opacity: 0; }
+  15%  { opacity: 1; }
+  85%  { opacity: 1; }
+  100% { left: 100%; opacity: 0; }
+}
+
+.ex-result { display: grid; gap: var(--sp-2); }
+.ex-result-ok,
+.ex-result-bad {
+  display: grid;
+  gap: var(--sp-2);
+  padding: var(--sp-3);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line-soft);
+}
+.ex-result-ok { border-left: 3px solid var(--ok); }
+.ex-result-bad { border-left: 3px solid var(--bad); }
+/* v0.53.0 — the verdict LANDS rather than appears. A probe has no known
+   duration, so the dot loops while it runs (`.ex-wire-dot`, removed outright
+   under reduced motion) and this is the punctuation at the end of it. ONE SHOT,
+   finishing at its resting state, so 04-motion.css can cap it without freezing
+   anything half way — and the border colour still carries the whole result with
+   motion off. */
+.ex-result-ok,
+.ex-result-bad { animation: ex-land var(--dur) var(--ease); }
+@keyframes ex-land {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* `hidden` LOSES to an author `display`, which is how a form ends up showing the
+   fields it just hid: `.field` is a flex box and `.banner` is a flex box, and an
+   author rule beats the UA stylesheet's `[hidden] { display: none }` whatever
+   its specificity. Every box this form hides is named here.
+
+   The engine `cli` fields, the region picker on a provider with one region and
+   the paste-a-key warning all shipped VISIBLE in the first draft because of
+   exactly this. */
+.ex-form-hide[hidden] { display: none; }
+
+/* The credential choice. The recommended option is first and selected, and the
+   other one is offered with its cost printed beside it rather than hidden. */
+.ex-cred-choice { display: grid; gap: var(--sp-2); }
+.ex-cred-opt { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; }
+
+.ex-save { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
+
+/* --- the band ladder (v0.53.0) ------------------------------------------- */
+/* ONE VERTICAL LADDER, and the row you read is the row you edit.
+   It replaces a horizontal 0→100 rail plus a separate list of editable rows —
+   the same data twice, with only the second copy interactive.
+
+   The proportional bar is a width INSIDE the row rather than the row's own
+   width. That is the whole geometric fix: the old rail gave each segment
+   `flex: 0 0 var(--w)` with `min-width: 128px`, so the floor fought the
+   percentage and a 10-point band came out nearly as wide as a 30-point one
+   while the axis underneath promised they were to scale. A full-width track
+   holding a `var(--w)` bar is honest at every viewport, needs no floor, needs
+   no horizontal scroll, and can never clip a target name. */
+
+.ex-ladder { display: grid; gap: var(--sp-1); margin: var(--sp-3) 0 var(--sp-2); }
+.ex-band {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.ex-band.open { border-color: var(--accent); }
+/* A GRID, and it DECLARES ITS COLUMNS — the .run-card lesson. Five children,
+   five columns, every one of them fixed except the two that hold text. */
+.ex-band-head {
+  display: grid;
+  grid-template-columns: minmax(0, 22%) minmax(0, auto) minmax(0, 1fr) auto 16px;
+  align-items: center;
+  gap: var(--sp-2);
+  width: 100%;
+  padding: var(--sp-2) var(--sp-3);
+  background: none;
+  border: 0;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.ex-band-head:hover { background: var(--surface-2); }
+.ex-band.open > .ex-band-head { background: var(--surface-2); }
+.ex-band-track {
+  display: block;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--line-soft);
+  overflow: hidden;
+}
+/* The one-shot entrance: the bar grows to its width on first paint and FINISHES
+   at its resting state, so 04-motion.css can cap it without freezing anything
+   mid-way — the one-shot rule the staged-segment grow already followed. */
+.ex-band-bar {
+  display: block;
+  width: var(--w);
+  height: 100%;
+  border-radius: 999px;
+  animation: ex-grow var(--dur-slow) var(--ease);
+}
+.ex-band-claude { background: var(--accent-dim); }
+.ex-band-extra { background: var(--ok); }
+/* A staged bar is dashed as well as animated: the dashed edge is what carries
+   the meaning when motion is off. */
+.ex-band-staged { outline: 1px dashed var(--text-faint); outline-offset: 1px; }
+@keyframes ex-grow {
+  from { transform: scaleX(.15); transform-origin: left center; opacity: .35; }
+  to   { transform: none; opacity: 1; }
+}
+.ex-band-mid { display: grid; gap: 1px; min-width: 0; }
+.ex-band-label { font-size: 12px; font-weight: 600; white-space: nowrap; }
+.ex-band-range { font-size: 11px; white-space: nowrap; }
+/* NEVER TRUNCATED. The target is the most important fact in the row, and it was
+   the one thing the old rail clipped. It wraps instead. */
+.ex-band-target { font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
+.ex-band-chips { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: flex-end; }
+.ex-band-caret { color: var(--text-faint); transition: transform var(--dur-fast) var(--ease); justify-self: end; }
+.ex-band.open .ex-band-caret { transform: rotate(90deg); }
+.ex-band-pane:not(:empty) {
+  padding: var(--sp-3);
+  border-top: 1px solid var(--line-soft);
+}
+
+/* THE POSITIONS (v0.55.0) — the same row, minus the bar.
+
+   A band has a width because it covers a range of scores. A POSITION covers
+   nothing: it is a point. So this row reuses `.ex-band` wholesale and simply
+   DECLARES ONE FEWER COLUMN, rather than drawing a bar at some invented width
+   the CLI never computed. The `.run-card` lesson stated once more: a row whose
+   child count differs from another's must declare its own columns, never
+   inherit a template built for a different number of children. */
+.ex-slot-head { grid-template-columns: minmax(0, 22%) minmax(0, auto) minmax(0, 1fr) auto 16px; }
+.ex-slot-when { font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
+/* The six `extra_roles` values nothing resolves. Reported, never fixed, and
+   visually quiet: a permanent honest gap is not a caution. */
+.ex-unreachable {
+  margin-top: var(--sp-3);
+  padding-top: var(--sp-2);
+  border-top: 1px solid var(--line-soft);
+}
+.ex-unreachable-list { display: grid; gap: 2px; margin-top: var(--sp-1); }
+.ex-lane-slot { display: flex; flex-wrap: wrap; gap: 4px; padding-left: var(--sp-2); }
+
+/* THE LEGEND. Two colours were carrying the whole meaning of the picture and
+   neither was ever named anywhere on the page. */
+.ex-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
+.ex-legend-item { display: inline-flex; align-items: center; gap: var(--sp-2); }
+.ex-legend-swatch { width: 18px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
+
+.ex-route-controls { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
+.ex-route-controls .text-input { flex: 1 1 160px; min-width: 0; }
+.ex-route-staged { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+
+/* --- what it ran, and what it cost (W12) ---------------------------------- */
+/* Every routed band keeps its slot, including one nothing has run through — a
+   row that reads `—` everywhere is an ANSWER, and dropping it would make "this
+   band cost nothing" and "nothing has run here yet" identical. */
+.ex-cost-row {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  margin-top: var(--sp-2);
+  display: grid;
+  gap: var(--sp-2);
+}
+.ex-cost-list {
+  border-left: 3px solid var(--warn);
+  padding-left: var(--sp-3);
+  margin-top: var(--sp-3);
+  display: grid;
+  gap: 2px;
+}
+.ex-rates { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); justify-items: start; }
+.ex-rates pre { max-height: 240px; overflow: auto; width: 100%; }
+
+/* --- the local tools, the gate and the live result (v0.51.0) -------------- */
+/* A tool box is a GRID and it DECLARES its shape per state, because the four
+   states carry different numbers of children — the `.run-card` lesson: a grid
+   that does not declare its columns prints one child on top of another. Every
+   state gets its own border colour so the card that needs an action is the one
+   your eye lands on. */
+.ex-tool-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--sp-3);
+  margin-top: var(--sp-3);
+}
+/* v0.53.0 — A TOOL CARD IS CHILD-COUNT AGNOSTIC, AND THAT IS NOT A PREFERENCE.
+   v0.52.0 declared `grid-template-rows: auto auto auto 1fr auto` here to absorb
+   the height difference between two tools in ONE place, and the diagnosis was
+   right. The remedy was not: FOUR STATES CARRY FOUR DIFFERENT NUMBERS OF
+   CHILDREN, so a POSITIONAL row template cannot describe this card. A
+   ready-and-verified card has exactly five children — head, kv, path, the
+   "connected as" chip, actions — so the chip landed in the `1fr` slack row, a
+   grid item defaults to `align-self: stretch`, and `border-radius: 999px` on a
+   tall full-width box drew a ~250px green ELLIPSE. It hit whichever card had the
+   shortest content in its row, so it was never about one tool.
+
+   So: no row template at all. The footer is pushed down by the FREE SPACE, and
+   nothing can be stretched by a slot it was never meant to occupy. This cannot
+   break when a fifth state joins. */
+.ex-tool {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+}
+.ex-tool > .row-actions:last-child { margin-top: auto; }
+/* v0.53.0 — and when the state's diagnostics disclosure is the last child, IT
+   absorbs the slack instead. Same rule, one child further down: whatever is at
+   the bottom of the card lines up across the row. */
+.ex-tool > .ex-more:last-child { margin-top: auto; }
+/* A CHIP STATES A FACT. It is never a layout element and it never stretches —
+   in either axis. */
+.ex-tool > .chip { align-self: flex-start; flex: 0 0 auto; }
+.ex-tool .kv { align-content: start; }
+/* The one genuinely unbounded field. `auth_detail` is DIAGNOSTIC, not prose, so
+   it is clamped rather than allowed to make one card taller than its neighbour
+   on its own. */
+.ex-tool .kv dd.ex-auth-detail {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+/* The disclosure a tool card's diagnostics live behind. A native <details>, so
+   the marker is the browser's — only the summary needs to read like the rest of
+   the panel. */
+.ex-more { margin-top: var(--sp-1); }
+.ex-more > summary {
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-dim);
+  list-style: revert;
+}
+.ex-more > summary:hover { color: var(--text); }
+.ex-more[open] > summary { margin-bottom: var(--sp-2); }
+.ex-more > *:not(summary) { margin-top: var(--sp-2); }
+/* The "why" disclosure sits under a card's instruction line, so it is indented
+   to read as a footnote to it rather than as another instruction. */
+.ex-why { margin-top: calc(var(--sp-1) * -1); }
+.ex-why > summary { font-size: 11px; }
+
+.ex-tool-absent { border-color: var(--bad); }
+.ex-tool-outdated,
+.ex-tool-unauthenticated { border-color: var(--warn); }
+.ex-tool-ready { border-color: var(--ok); }
+.ex-tool-name { font-weight: 600; }
+.ex-tool-path { word-break: break-all; }
+
+/* PREVIEW THEN APPLY: the exact command sits ABOVE the button that runs it, and
+   it is selectable so the paste-it-yourself path is always open. */
+.ex-install,
+.ex-keyhelp { display: grid; gap: var(--sp-2); justify-items: start; }
+.ex-install .action-cmd,
+.ex-keyhelp .action-cmd { width: 100%; user-select: text; }
+
+/* WHICH LANE A BAND GOVERNS (v0.52.0). One row per lane, and every row keeps
+   its slot whatever its verdict — filtering out the lanes that never route
+   would make "this lane cannot go foreign" and "I have not configured it yet"
+   look identical. The OFF-phase-keeps-its-slot rule, one panel over. */
+.ex-lanes { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
+.ex-lane {
+  display: grid;
+  gap: 4px;
+  padding: var(--sp-2) var(--sp-3);
+  border-left: 2px solid var(--line-soft);
+}
+.ex-lane-name { font-weight: 600; }
+
+/* THE GATE. It is a banner rather than a card because it is not a thing you
+   configure — it is the reason the things below it are missing. */
+.ex-gate { display: grid; gap: var(--sp-2); }
+.ex-gate-head { font-weight: 600; }
+
+/* The model control. A dropdown and a text box occupy the same slot, so the row
+   does not change width when the CLI answers `list` instead of `free-text`. */
+/* `flex` belongs to the ROUTING ROW, which lays these out horizontally. Left on
+   the base class it also applied inside the test modal's `.field` — a COLUMN
+   flex container — where `flex-grow: 1` stretched the control to fill the form
+   and left a hand's width of dead space under the picker. */
+.ex-modelbox { display: grid; gap: 4px; min-width: 0; }
+.ex-route-controls .ex-modelbox { flex: 1 1 220px; }
+.ex-modelbox > .text-input { width: 100%; }
+
+/* THE LIVE RESULT. The reply is a third party's text: it scrolls inside its own
+   box and never widens the modal. */
+.ex-live {
+  border-top: 1px solid var(--line-soft);
+  margin-top: var(--sp-3);
+  padding-top: var(--sp-3);
+  display: grid;
+  gap: var(--sp-2);
+}
+.ex-live-reply { max-height: 200px; overflow: auto; }
+
+/* A tool box carries SENTENCES, not paths, so it opts out of the global
+   `word-break: break-all` that a base URL needs — that rule broke ordinary
+   words mid-syllable in the one card written to be read rather than scanned.
+   The binary PATH keeps the break, because a path has no word boundaries. */
+.ex-tool .kv dd { word-break: normal; overflow-wrap: anywhere; }
+.ex-tool-path { word-break: break-all; }
+
+/* A <select> inside a grid stretches to the row, which made the model picker a
+   120px-tall box with one line in it. It sizes itself. */
+.ex-modelbox > select.text-input { align-self: start; height: auto; }
+
+/* The live result is PROSE beside numbers — the honest "this tool does not say
+   which model answered" sentence lives in a `kv` value, and the global
+   `word-break: break-all` was hyphenating it mid-word. Same reasoning as
+   `.ex-tool`: a path breaks anywhere, a sentence breaks on spaces. */
+.ex-live .kv dd { word-break: normal; overflow-wrap: anywhere; }
+
+/* ── RECOVERY (v0.54.0) ──────────────────────────────────────────────────────
+   One row per journal directory, EXPANDED IN PLACE — the Runs-row rule: there
+   is no detail box below the list.
+
+   A ROW IS A FLEX COLUMN, NOT A DECLARED GRID. Five states carry five different
+   numbers of children (an orphan has no outcome chip, a single attempt has no
+   attempt chip, engine `cli` has no per-turn note), and `.ex-tool`'s 250px
+   ellipse is what a declared row template does to a card whose child count
+   changes with its state. A chip states a FACT — it is never a layout element. */
+.ex-rec-list { display: flex; flex-direction: column; gap: var(--sp-2); }
+.ex-rec-row {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r-md);
+  background: var(--surface-1);
+  overflow: hidden;
+}
+.ex-rec-head {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  width: 100%;
+  padding: var(--sp-2) var(--sp-3);
+  background: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.ex-rec-head:hover { background: var(--surface-2); }
+.ex-rec-row.open > .ex-rec-head { background: var(--surface-2); }
+.ex-rec-task { font-weight: 600; flex: 0 0 auto; }
+/* The identity may be long and must not push the caret off the row. */
+.ex-rec-who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ex-rec-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); flex: 0 0 auto; }
+.ex-rec-caret { color: var(--text-faint); transition: transform var(--dur-fast) var(--ease); flex: 0 0 auto; }
+.ex-rec-row.open .ex-rec-caret { transform: rotate(90deg); }
+.ex-rec-pane:not(:empty) { padding: var(--sp-3); border-top: 1px solid var(--line-soft); }
+
+.ex-rec-attr,
+.ex-rec-files,
+.ex-rec-acc,
+.ex-rec-floor {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r-sm);
+  padding: var(--sp-2) var(--sp-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-1);
+}
+/* A RECOVERED VECTOR IS A FLOOR and is drawn distinctly, so it can never be
+   mistaken for a measured total. */
+.ex-rec-floor { border-color: var(--warn-line, var(--line)); }
+.ex-rec-file { gap: var(--sp-2); }
+.ex-rec-file .mono { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
+
+.ex-rel { display: flex; flex-direction: column; gap: var(--sp-2); }
+.ex-rel-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-1);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r-sm);
+  padding: var(--sp-2) var(--sp-3);
+}