/* The workspace shell (app.html): the top bar, the sidebar (workspace-nav.js), the breadcrumb,
   the page head, the cards' shared edges, the status bar, and the phone bottom bar and sheet.
   Loaded after the workspace's other sheets (only select.css, the pickers, comes later), so it
   settles the edges every view lines up on: one control
   height (--control), one card content inset (--inset) and one spacing scale (--space-*), all
   declared in next.css. Colour comes only from tokens, so the theme toggle repaints all of it. */
html:has(body.workbench) {
  --status-lift: 0px;   /* the status bar is a band at the foot, not a floating pill */
  --bar-h: 40px;        /* the sidebar's header and the breadcrumb row share one height */
  --rail-pad: 8px;      /* the sidebar's padding; a row adds --space-2, so its icon starts 16px in */
  --rail-icons: 56px;   /* the folded sidebar: --rail-pad, a 40px icon button, --rail-pad */
}
html:not([data-signed-in]) .signed-in-only { display: none !important; }

/* ── Top bar: identity, search and the global controls, in two treatments (icon buttons and
   text buttons, one height) with one primary action ── */
.workbench .site-nav { gap: var(--space-4); padding: 0 var(--space-5) 0 var(--space-4); }
.workbench .site-nav .search input { height: var(--control); }
.workbench .site-nav .top-actions { display: flex; align-items: center; gap: var(--space-1); height: auto; margin-left: auto; }
.workbench .site-nav .top-actions :is(.top-text, .ask-launch, .account-button) {
  display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; height: var(--control); margin: 0; padding: 0 var(--space-3);
  color: var(--ink-2); background: transparent; border: 0; border-radius: var(--pill); font: 500 13px/1 var(--sans); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer;
}
.workbench .site-nav .top-actions :is(.top-text, .ask-launch, .account-button):hover { color: var(--ink); background: var(--surface-hover); }
.workbench .site-nav .top-actions .ask-launch[hidden] { display: none; }
.workbench .site-nav .top-actions .ask-launch[aria-expanded="true"] { color: var(--ink); background: var(--brand-wash); }
.workbench .site-nav .top-actions .icon-btn { width: var(--control); height: var(--control); margin: 0; color: var(--ink-2); background: transparent; border: 0; border-radius: var(--pill); }
.workbench .site-nav .top-actions .icon-btn:hover { color: var(--ink); background: var(--surface-hover); }
.workbench .site-nav .top-actions .top-signin { height: var(--control); margin-left: var(--space-1); padding: 0 var(--space-4); color: var(--brand-ink); border: 0; font: 600 13px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.workbench .site-nav .top-actions .top-signin:hover { background: var(--accent); filter: brightness(1.08); }
.workbench .site-nav .top-actions :is(a, button):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.workbench .site-nav .top-actions .account-button { padding-left: var(--space-1); }
.workbench .account-button .account-mark { width: 24px; height: 24px; font-size: 11px; }
.account { position: relative; display: flex; }
.account-menu { position: absolute; z-index: 30; top: calc(100% + var(--space-2)); right: 0; display: grid; gap: 2px; min-width: 240px; padding: var(--space-2); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.account-menu[hidden] { display: none; }
.account-who { display: grid; gap: 2px; margin: 0 0 var(--space-1); padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--rule-soft); }
.account-who strong { font-size: 13px; }
.account-who small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.account-menu .account-meta { margin: 0 0 var(--space-1); padding: 0 var(--space-3) var(--space-2); }
.account-item { display: flex; align-items: center; box-sizing: border-box; width: 100%; height: var(--control); padding: 0 var(--space-3); color: var(--ink); background: transparent; border: 0; border-radius: var(--r); font: 500 13px/1 var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.account-item:hover { background: var(--surface-hover); }
.account-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* The theme switch: an icon in the top bar; on phones a line of the account menu, or of the
   navigation sheet's head while signed out. Each names the theme it switches to. */
.account-theme { display: none; }
.sheet-actions { display: flex; align-items: center; gap: var(--space-2); }
[data-theme="dark"] .theme-to-dark, :root:not([data-theme="dark"]) .theme-to-paper { display: none; }

/* ── Sidebar: the declared groups, one row height, one icon size, one inset ── */
.workbench .rail { padding: 0 var(--rail-pad) var(--space-3); }
.rail-head { position: sticky; top: 0; z-index: 2; display: flex; flex: none; align-items: center; justify-content: flex-end; height: var(--bar-h); margin: 0 calc(-1 * var(--rail-pad)); padding: 0 var(--rail-pad); background: var(--ground); }
.rail-fold { display: grid; place-items: center; width: var(--control-sm); height: var(--control-sm); padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: var(--pill); cursor: pointer; }
.rail-fold:hover { color: var(--ink); background: var(--surface-hover); }
.rail-fold:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rail-fold svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:root[data-rail-collapsed] .rail-fold svg { transform: scaleX(-1); }
.side-nav { display: grid; gap: var(--space-3); }
.nav-group { min-width: 0; }
.nav-group-head { margin: 0 0 2px; font: inherit; }
.nav-group-head button { display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; width: 100%; height: var(--control-sm); padding: 0 var(--space-2); color: var(--muted); background: transparent; border: 0; border-radius: var(--r); font: 600 12px/1 var(--sans); letter-spacing: 0; text-align: left; cursor: pointer; }
.nav-group-head button::after { content: ""; flex: none; width: 5px; height: 5px; margin: 0 6px 3px auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
.nav-group-head button[aria-expanded="false"]::after { margin-bottom: 0; transform: rotate(-45deg); }
.nav-group-head button:hover { color: var(--ink); }
.nav-group[data-closed] > .nav-items { display: none; }
.nav-items { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-item { display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; width: 100%; min-height: var(--control); padding: 0 var(--space-2); color: var(--ink-2); background: transparent; border: 0; border-radius: var(--r); font: 500 13px/1.2 var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.nav-item:hover { color: var(--ink); background: var(--surface-hover); }
.nav-item[aria-current="page"] { color: var(--ink); background: var(--brand-wash); font-weight: 600; }
.nav-item[aria-current="page"] .nav-ico { color: var(--brand); }
:is(.nav-item, .nav-group-head button, .rail-add, .viewed-link, .watch-item .row):focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.nav-ico { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; color: var(--muted); }
.nav-ico svg { display: block; width: 16px; height: 16px; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-hint, .nav-peek { display: none; }
.nav-list { display: grid; min-width: 0; }
.nav-list-head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control); padding: 0 var(--space-2); color: var(--ink-2); font: 500 13px/1.2 var(--sans); }
.nav-list-tools { display: flex; flex: none; align-items: center; gap: var(--space-1); }
.workbench .rail-add { display: grid; place-items: center; width: 24px; height: 24px; color: var(--muted); background: transparent; border: 0; border-radius: var(--pill); font: 400 16px/1 var(--sans); }
.workbench .rail-add:hover { color: var(--ink); background: var(--surface-hover); }
.nav-list-body ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.workbench .nav-list-body .watch-item { border: 0; border-radius: var(--r); }
.workbench .nav-list-body .watch-item .row { padding: 6px var(--space-1) 6px var(--space-2); border-radius: var(--r); }
.workbench .nav-list-body .watch-item:hover { background: var(--surface-hover); }
.workbench .nav-list-body .watch-item .row:hover, .workbench .nav-list-body .watch-item .row[aria-current="true"] { background: transparent; box-shadow: none; }
.workbench .nav-list-body .watch-item:has(.row[aria-current="true"]) { background: var(--brand-wash); }
.workbench .nav-list-body .viewed-link { gap: var(--space-2); padding: 6px var(--space-2); border-radius: var(--r); font-size: 12.5px; }
.workbench .nav-list-body .viewed-link:hover { background: var(--surface-hover); text-decoration: none; }
.workbench .nav-list-body .rail-note { margin: 0; padding: 2px var(--space-2) var(--space-2) calc(var(--space-2) * 2 + 20px); font-size: 12px; line-height: 1.5; }
.nav-signin { margin: auto 0 0; padding: var(--space-3) var(--space-2) 0; color: var(--muted); border-top: 1px solid var(--rule-soft); font-size: 12px; line-height: 1.5; }
.nav-signin a { color: var(--brand); font-weight: 600; }
.nav-signin[hidden] { display: none; }
.side-nav[aria-busy="true"] { min-height: 12rem; }

/* Folded, the sidebar is a strip of the same icons; a tip names each one (workspace-nav.js). */
@media (width > 900px) {
  :root[data-rail-collapsed] .workbench .app { grid-template-columns: var(--rail-icons) minmax(0, 1fr); }
  :root[data-rail-collapsed] .rail-head { justify-content: center; }
  :root[data-rail-collapsed] :is(.nav-group-head, .nav-label, .nav-list-head, .nav-list-body, .nav-signin) { display: none; }
  :root[data-rail-collapsed] .nav-group + .nav-group { padding-top: var(--space-2); border-top: 1px solid var(--rule-soft); }
  :root[data-rail-collapsed] .nav-group[data-closed] > .nav-items { display: grid; }
  :root[data-rail-collapsed] .nav-item { justify-content: center; min-height: var(--control-lg); padding: 0; }
  :root[data-rail-collapsed] .nav-peek { display: flex; }
}
.nav-tip { position: fixed; z-index: 60; display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px var(--space-2); max-width: 260px; padding: 6px 10px; color: var(--surface); background: var(--ink); border-radius: var(--r); box-shadow: var(--shadow); font: 600 12px/1.35 var(--sans); transform: translateY(-50%); pointer-events: none; }
.nav-tip[hidden] { display: none; }
.nav-tip kbd { justify-self: end; padding: 0 4px; border: 1px solid color-mix(in srgb, var(--surface) 45%, transparent); border-radius: 4px; font: 500 11px var(--mono); }
.nav-tip span { grid-column: 1 / -1; font-weight: 400; color: color-mix(in srgb, var(--surface) 78%, var(--ink)); }

/* ── Breadcrumb: one row, level with the sidebar's header ── */
.workbench .stage { padding: 0 var(--space-5) var(--space-6) var(--space-3); }
.workbench .workspace-bar { display: flex; align-items: center; min-height: var(--bar-h); margin: 0 0 var(--space-2); padding: 0; background: transparent; border: 0; }
.workspace-path ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; color: var(--muted); font: 500 12.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.workspace-path li { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.workspace-path li + li::before { content: "/"; color: var(--rule-strong); }
.workspace-path a { color: var(--muted); text-decoration: none; }
.workspace-path a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.workspace-path a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.workspace-path [aria-current] { color: var(--ink); font-weight: 600; }
/* The breadcrumb names the directory a company page came from, so the page's own back link goes. */
.workbench #viewEquities .eq-back { display: none; }

/* ── Page head: the title on the left, its actions at the content's right edge, centred on it ── */
.workbench .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.workbench .page-head .series-actions { justify-content: flex-end; align-items: center; gap: var(--space-2); margin: 0; }
.workbench .page-actions > .small:empty { display: none; }
.workbench #viewEquities .eq-hero { align-items: center; padding: var(--space-5) var(--inset); }
.workbench #viewEquities .eq-actions { justify-content: center; }
/* Stacked on phones, a page head starts on the content's left edge (its title above its actions). */
@media (max-width: 600px) {
  .workbench #viewEquities :is(.eq-heading, .eq-hero) { align-items: flex-start; }
  /* A card's header keeps its marker and title on one line and wraps its note below, on the inset. */
  .workbench .eq-section-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); }
  .workbench .eq-section-head h2 { margin: 0; }
  .workbench .eq-section-head > :last-child:not(h2) { flex-basis: 100%; margin-left: 0; }
}

/* ── Tabs: one box for every tab, the selected one filled; text on the cards' content edge ── */
.workbench .eq-tabs { gap: var(--space-1); padding: var(--space-2) 0; }
.workbench .eq-tabs :is(a, button) { display: inline-flex; align-items: center; box-sizing: border-box; height: var(--control); margin: 0; padding: 0 var(--inset); color: var(--muted); background: transparent; border: 0; border-radius: var(--pill); box-shadow: none; font: 500 13px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.workbench .eq-tabs :is(a, button):hover { color: var(--ink); background: var(--surface-hover); transform: none; }
.workbench .eq-tabs :is(a, button)[aria-selected="true"] { color: var(--ink); background: var(--brand-wash); box-shadow: none; font-weight: 600; }
.workbench .eq-tabs :is(a, button):focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ── Cards: header, text, charts, legends, figures, tables and notes share one content inset ── */
.workbench .block > h2, .workbench .block > summary, .workbench .series-details > .disclosure > summary, .workbench .series-reading > h2, .workbench .eq-block > h2, .workbench .eq-section-head { padding: var(--space-3) var(--inset); }
.workbench .block > :is(p, dl, .prose, #comparisonBlock, #modelsBlock) { margin: var(--space-3) var(--inset); }
.workbench .eq-block > :is(p, .eq-prose, .btn, details, .eq-statement-links, .eq-toolbar, .eq-chart-tools) { margin-inline: var(--inset); }
.workbench .eq-block > :is(.chart-note, .chart-hint) { margin: 0 var(--inset); }
.workbench .eq-section-head span { font: 500 12px/1.3 var(--sans); color: var(--muted); }
.workbench .eq-section-head span strong { font: 600 12px/1.3 var(--sans); color: var(--ink); }
.workbench .eq-fact { padding: var(--space-3) var(--inset); }
.workbench .headline-values > div { padding: var(--space-4) var(--inset); }
.workbench .panel-head { padding: var(--space-3) var(--inset); }
.workbench .chart-hint { padding: var(--space-2) var(--inset) 10px; }
.workbench :is(.block, .eq-block, .market-sheet, .eq-table-wrap) table :is(th, td):first-child { padding-left: var(--inset); }
.workbench :is(.block, .eq-block, .market-sheet, .eq-table-wrap) table :is(th, td):last-child { padding-right: var(--inset); }
/* The views with panes of their own keep the same inset: the track record's figures and
   blocks, the notes panes, and the compare bar, which starts on the content edge. */
#viewTrackRecord .block > :is(.tr-figure, .tr-method, .tr-tools, .catalog-status, .tr-more, .tr-sub) { margin-inline: var(--inset); }
#viewTrackRecord .ev-grid > .ev-tile { padding-inline: var(--inset); }
.workbench .tw-pane :is(.tw-pane-head, .tw-tools, .tw-new, .tw-pick, .tw-row, .tw-foot, .tw-pad, .tw-form, .tw-empty) { padding-inline: var(--inset); }
.workbench .tw-pane .tw-card { margin-inline: var(--inset); }
/* The list pane opens on its search row (the page title names it), spaced like a card head. */
.workbench #twList > .tw-tools:first-child { padding-block: var(--space-3); }
.workbench .compare-bar .chips:empty { display: none; }
.workbench .eq-block > .val-explain { margin: var(--space-3) var(--inset) 0; font-size: 13px; }
.workbench .eq-block > .val-explain + .val-explain { margin-top: var(--space-1); }
.workbench .eq-block > .val-bar { width: calc(100% - 2 * var(--inset)); margin: var(--space-5) var(--inset) var(--space-2); }
.workbench .eq-block > .val-legend { margin: 0 var(--inset) var(--space-3); font-size: 12px; }
.workbench .eq-block > .eq-caption { margin-block: var(--space-2); }
.workbench .eq-block > .eq-caption + .eq-caption, .workbench .eq-block > .eq-caption + p { margin-top: 0; }
.workbench .val-disclaimer { margin: var(--space-4) 0 0; padding: var(--space-3) var(--inset) 0; }
/* Checks: the label and the text of every note on one grid, divided by hairlines. */
.workbench .val-flags { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--space-3); margin: 0; padding: var(--space-1) 0; }
.workbench .val-flag { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding: var(--space-2) var(--inset); color: var(--ink-2); background: transparent; border: 0; font-size: 13px; line-height: 1.55; }
.workbench .val-flag + .val-flag { border-top: 1px solid var(--rule-soft); }
.workbench .val-flag strong { margin: 0; color: var(--muted); font: 600 12px/1.55 var(--sans); }
.workbench .val-flag.val-warning strong { color: var(--brand); }
.workbench .val-flag.val-severe strong { color: var(--neg); }

/* ── Status bar: a band at the foot; its keys start on the sidebar's icon edge and its note
   ends on the content's right edge ── */
body.workbench { padding-bottom: var(--status-bar); }
.workbench .term-status { inset: auto 0 0; gap: var(--space-4); padding: 0 var(--space-5) 0 calc(var(--rail-pad) + var(--space-2)); color: var(--muted); background: var(--ground); border: 0; border-top: 1px solid var(--rule-soft); border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; font: 500 12px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.term-help { display: inline-flex; align-items: center; gap: 6px; padding: 0; color: inherit; background: transparent; border: 0; font: inherit; cursor: pointer; }
.term-help:hover { color: var(--ink); }
.term-help:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.term-status [hidden] { display: none; }

/* ── Shortcut list: in the navigation's groups ── */
.workbench #shortcutsTitle { font: 600 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.shortcut-groups h3 { margin: 0; padding: var(--space-3) var(--space-3) var(--space-1); color: var(--muted); font: 600 12px/1.3 var(--sans); }
.shortcut-groups [hidden] { display: none; }

/* ── Phones: a bottom bar of the same groups; each opens a sheet with that group's items ── */
.mobile-nav { display: none; }
#navSheet .rail-head, #navSheet .nav-group-head, #navSheet .nav-signin, #navSheet .nav-peek { display: none; }
#navSheet .nav-group[data-off] { display: none; }
#navSheet .nav-group[data-closed] > .nav-items { display: grid; }
@media (max-width: 900px) {
  .workbench .site-nav { gap: var(--space-2); padding: 0 var(--space-2) 0 var(--space-3); }
  .workbench .site-nav .search input { height: var(--control-lg); }
  .workbench .site-nav .top-actions { gap: 0; }
  .workbench .site-nav .top-actions :is(.icon-btn, .ask-launch, .account-button) { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .workbench .site-nav .top-actions .ask-launch span, .workbench .account-name { display: none; }
  .workbench .site-nav .top-actions .top-signin { height: 40px; }
  .workbench .site-nav .top-actions .top-theme { display: none; }
  .workbench .account-menu .account-theme { display: flex; }
  .workbench .stage { padding: 0 var(--space-3) calc(72px + env(safe-area-inset-bottom)); }
  .workbench .workspace-bar { min-height: 36px; margin-bottom: var(--space-1); }
  .workbench .mobile-nav { position: fixed; inset: auto 0 0; z-index: 15; display: flex; padding: 0 var(--space-1) env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--rule); }
  .mobile-groups { display: contents; }
  .workbench .mobile-nav button { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px; padding: 6px 2px; color: var(--muted); background: transparent; border: 0; font: 600 11px/1.2 var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; }
  .workbench .mobile-nav button span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workbench .mobile-nav button[aria-current="true"] { color: var(--brand); }
  .workbench .mobile-nav button:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }
  .workbench .mobile-nav .nav-ico { color: inherit; }
  .workbench #navSheet[open] { position: fixed; inset: auto 0 0; display: block; box-sizing: border-box; width: 100%; max-width: none; max-height: 82dvh; margin: 0; padding: 0 0 env(safe-area-inset-bottom); overflow: auto; color: var(--ink); background: var(--surface); border: 0; border-top: 1px solid var(--rule); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .workbench #navSheet .drawer-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--space-2) 0 var(--space-4); background: var(--surface); border-bottom: 1px solid var(--rule-soft); }
  .workbench #navSheet .drawer-head .btn { min-height: 44px; padding: 0 var(--space-4); }
  .workbench #navSheet #navSheetTitle { font: 600 15px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
  .workbench #navSheet .rail { position: static; display: block; height: auto; max-height: none; padding: var(--space-2) var(--space-2) var(--space-4); overflow: visible; background: transparent; border: 0; }
  .workbench #navSheet .nav-item:not(.nav-peek) { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-content: center; column-gap: var(--space-3); row-gap: 2px; min-height: 52px; padding: var(--space-2) var(--space-3); }
  .workbench #navSheet .nav-item .nav-ico { grid-row: 1 / span 2; }
  .workbench #navSheet .nav-hint { display: block; grid-column: 2; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.35; }
  .workbench #navSheet .nav-list-head { min-height: 44px; padding: 0 var(--space-3); }
  .workbench #navSheet .nav-list-body .watch-item .row, .workbench #navSheet .nav-list-body .viewed-link { min-height: 44px; padding-inline: var(--space-3); }
  .workbench #navSheet .rail-add { width: 44px; height: 44px; }
  .workbench #navSheet .unpin { flex-basis: 44px; height: 44px; opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.nav-item, .nav-group-head button, .rail-fold, .rail-add, .top-actions a, .top-actions button) { transition: background .14s ease, color .14s ease; }
  .rail-fold svg { transition: transform .18s ease; }
}