/* newsletter-tables — layout only. Every colour, radius, shadow and font comes
   from the vendored Allium tokens in tokens/*.css. The page is light. The
   Theme control puts the design system's .dark class on the two exhibits only,
   so a partner can preview and download a dark table or chart. */

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-app-sans);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* ---------------------------------------------------------------- top bar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 32px;
  border-bottom: 1px solid var(--border-muted);
  background: var(--card);
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--foreground); }
.brand .sep { width: 1px; height: 16px; background: var(--border-muted); }
.wordmark { font-weight: 600; font-size: 14px; }

.topbar-meta { display: flex; align-items: center; gap: 12px; }
.freshness { font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.banner {
  padding: 8px 32px;
  border-bottom: 1px solid var(--border-muted);
  background: var(--warning);
  color: var(--warning-foreground);
  font-size: 13px;
}

/* ------------------------------------------------------------------- tabs */

.tabs {
  display: flex;
  gap: 4px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border-muted);
  background: var(--card);
  overflow-x: auto;
}

.tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  padding: 10px 12px;
  transition: all 120ms ease;
  white-space: nowrap;
}

.tab:hover { color: var(--foreground); }
.tab[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--step, var(--primary)); }
.tab:focus-visible { outline: 3px solid color-mix(in oklch, var(--primary) 30%, transparent); outline-offset: -3px; }

/* ------------------------------------------------------------------- main */

/* ------------------------------------------------------------------ intro */

.intro { padding: 40px 32px 8px; max-width: 1360px; }
.eyebrow { color: var(--primary-muted-foreground); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 8px; }
.intro h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 12px; max-width: 48ch; }
.lede { font-size: 16px; margin: 0 0 20px; max-width: 72ch; }

/* Each step carries one colour from the Allium palette (set inline as --step):
   Allium Pink (the brand primary) for picking a template, chart-1 purple for
   the controls, Allium Green for downloads. Green is the muted foreground shade
   so the white numeral keeps its contrast, and it matches the Download buttons.
   The same colour marks that step's zone further down the page. */
.steps { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; max-width: 780px; }
.step {
  align-items: center;
  background: color-mix(in srgb, var(--step) 9%, var(--card));
  border: 1px solid color-mix(in srgb, var(--step) 28%, var(--card));
  border-left: 3px solid var(--step);
  border-radius: var(--radius, 6px);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
  padding: 10px 12px;
}
.step-n {
  align-items: center;
  background: var(--step);
  border-radius: 100%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 24px;
  font-size: 12px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
}

/* --------------------------------------------------------------- workspace */

/* One column: the download bar, the table picker, the controls, the table
   exhibit, the chart exhibit with its own bar, then use and credit. */
.workspace { display: block; padding: 24px 32px 48px; max-width: 1360px; min-width: 0; }
.workspace .tabs { padding: 0; background: none; margin-bottom: 20px; }
.muted { color: var(--muted-foreground); }
.table-desc { margin: 0 0 16px; max-width: 95ch; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar .status { min-width: 0; }
/* Step 3: the download bar right above the table it exports. */
.actions { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border-muted); margin-bottom: 16px; }
.actions .zone-label { margin: 0; }
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.actions .status:empty { display: none; }
a.al-btn { text-decoration: none; }

/* "Copy as" is one segmented control, so four formats read as one choice. */
.copy-as { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius, 6px); overflow: hidden; height: 32px; }
.copy-as-label { align-items: center; background: var(--muted); color: var(--muted-foreground); display: inline-flex; font-size: 12px; font-weight: 600; padding: 0 10px; }
.copy-as button {
  appearance: none; background: var(--card); border: 0; border-left: 1px solid var(--border);
  color: var(--foreground); cursor: pointer; font: inherit; font-size: 13px; padding: 0 12px; white-space: nowrap;
}
.copy-as button:hover { background: var(--primary-subtle); color: var(--primary-subtle-foreground); }
.copy-as button:focus-visible { outline: 3px solid color-mix(in oklch, var(--primary) 30%, transparent); outline-offset: -3px; }
/* Download buttons take step 3's green at the shade that keeps white text legible. */
.al-btn.dl { background: var(--secondary-muted-foreground); color: #fff; }
.al-btn.dl:hover { background: color-mix(in oklch, var(--secondary-muted-foreground) 88%, black); }

/* --------------------------------------------------------------- controls */

/* Steps 1 and 2 on the page carry their intro colour: the label text, and
   the picker's selected tab or the controls card's left rule in that colour. */
.zone-label { align-items: center; color: var(--step); display: flex; font-size: 13px; font-weight: 700; gap: 8px; margin: 0 0 8px; }
.zone-n {
  align-items: center; background: var(--step); border-radius: 100%; color: #fff; display: inline-flex;
  flex: 0 0 20px; font-size: 11px; font-weight: 700; height: 20px; justify-content: center;
}

/* Step 1 is the page's one Allium Pink moment: a tinted panel, and the
   templates as pill buttons with the chosen one filled in the brand primary. */
.pick {
  background: var(--primary-subtle);
  border: 1px solid var(--primary-muted);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-card, 10px);
  margin: 8px 0 20px;
  padding: 16px 20px 14px;
}
.pick .zone-label { color: var(--primary-subtle-foreground); font-size: 14px; margin-bottom: 12px; }
.workspace .pick .tabs { border: 0; display: grid; gap: 10px; margin: 0 0 14px; overflow: visible; }
.tab-group { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.tab-group-label {
  color: var(--primary-subtle-foreground);
  flex: 0 0 136px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pick .tab {
  background: var(--card);
  border: 1px solid var(--primary-muted);
  border-radius: 999px;
  color: var(--primary-subtle-foreground);
  font-weight: 600;
  padding: 7px 16px;
}
.pick .tab:hover:not(:disabled) { background: var(--primary-muted); color: var(--primary-muted-foreground); }
.pick .tab[aria-selected="true"] {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--primary) 40%, transparent);
  color: var(--primary-foreground);
}
.pick .tab:focus-visible { outline-offset: 2px; }
.pick .table-desc { color: var(--foreground); margin: 0; }

.controls.zone { background: color-mix(in srgb, var(--step) 5%, var(--card)); border-left: 3px solid var(--step); }
.controls.zone .zone-label { margin: 0; }

.controls { padding: 16px; margin-bottom: 16px; display: grid; gap: 14px; }
.ctl-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.ctl-group legend { font-size: 12px; font-weight: 600; color: var(--muted-foreground); margin-bottom: 8px; padding: 0; }
.ctl-legend-hint { font-weight: 400; margin-left: 6px; }
.col-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.col-check { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

/* Column chips. A shown column is solid and movable; a hidden one is dashed. */
.col-chip {
  align-items: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius, 6px);
  color: var(--muted-foreground);
  display: inline-flex;
  gap: 2px;
  padding: 4px 6px 4px 8px;
}
.col-chip.on { border-style: solid; color: var(--foreground); background: var(--card); }
.col-chip[draggable="true"] { cursor: grab; }
.col-chip.dragging { opacity: 0.4; }
.col-chip.drop { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.col-chip .col-check { margin-right: 4px; }
.col-move {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--muted-foreground);
  cursor: pointer;
  font: 600 15px/1 var(--font-app-sans);
  height: 22px;
  padding: 0;
  width: 18px;
}
.col-move:hover:not(:disabled) { background: var(--muted); color: var(--foreground); }
.col-move:disabled { opacity: 0.25; cursor: default; }
.col-move:focus-visible { outline: 3px solid color-mix(in oklch, var(--primary) 30%, transparent); }
.col-check input, .row-ctl input { accent-color: var(--primary); width: 15px; height: 15px; margin: 0; }
.ctl-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ctl-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.ctl-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
.ctl-select {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  height: 32px;
  padding: 0 8px;
}
.ctl-hint { margin: 0; }
.linkish { appearance: none; background: none; border: 0; color: var(--primary-muted-foreground); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

.toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.al-btn[aria-pressed="true"] { background: var(--primary-muted); color: var(--primary-muted-foreground); border-color: var(--primary-muted); }

.rows-label { color: var(--muted-foreground); display: flex; align-items: center; gap: 8px; }

.rows-select {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  color: var(--foreground);
  font: inherit;
  font-size: 12px;
  height: 28px;
  padding: 0 6px;
}

/* ------------------------------------------------------------------ table */

/* The exhibit on screen is the PNG at 1x: the same width, 28px padding, type
   sizes, row heights and rules as png.js's L geometry, so the builder shows
   what downloads. The card takes its content's width rather than the page's;
   a wide one scrolls sideways inside .exhibit-scroll. The row checkbox and
   star sit in a gutter to the card's left, outside the image. */
.exhibit-scroll { overflow-x: auto; padding: 2px 2px 8px 56px; margin-left: -32px; }
.exhibit { margin: 0; padding: 28px; width: max-content; overflow: visible; border-radius: var(--radius-card); }
.exhibit-head { padding: 0; margin-bottom: 8px; }
.exhibit-head h2 { font-size: 22px; font-weight: 700; line-height: 22px; letter-spacing: 0; margin: 0 0 10px; white-space: nowrap; }
/* The subtitle wraps to the width the table, title and credit set, as it does
   in the PNG, instead of widening the card. */
.exhibit-head p { contain: inline-size; font-size: 13px; line-height: 17px; margin: 0; }
.exhibit-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0 0; }
.exhibit-foot .body-xs { font-size: 11px; line-height: 16px; white-space: nowrap; }
/* The PNG's footnote block: 14px under the table, 16px lines, 6px to the credit. */
.exhibit-note { contain: inline-size; font-size: 11px; line-height: 16px; margin: 0 0 -8px; padding-top: 14px; }
.exhibit-logo { height: 16px; width: auto; flex: 0 0 auto; color: var(--foreground); }

/* --profit and --loss alias the status tokens on :root, so they resolve to the
   light values there. A dark exhibit declares them again to pick up .dark. */
.exhibit.dark { --profit: var(--success); --loss: var(--destructive); }

/* Editable title and subtitle: a dashed outline on hover says "click me". */
.exhibit-head [contenteditable] { border-radius: 4px; cursor: text; outline: 1px dashed transparent; outline-offset: 3px; }
.exhibit-head [contenteditable]:hover { outline-color: var(--border); }
.exhibit-head [contenteditable]:focus { outline: 2px solid var(--primary); }

/* Title and subtitle fields above each exhibit. */
.text-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 16px; max-width: 1016px; }
.text-fields .ctl-label { flex: 1 1 240px; }
.text-fields .ctl-label.grow { flex: 2 1 360px; }
.ctl-input {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  box-sizing: border-box;
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  height: 32px;
  padding: 0 8px;
  width: 100%;
}
.ctl-input:focus-visible { outline: 3px solid color-mix(in oklch, var(--primary) 30%, transparent); }

/* Rows: type any count, or tap a common one. */
.rows-ctl { display: flex; align-items: center; gap: 6px; }
.ctl-num { width: 64px; font-variant-numeric: tabular-nums; }
.quick { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius, 6px); overflow: hidden; }
.quick button {
  appearance: none; background: var(--card); border: 0; border-left: 1px solid var(--border);
  color: var(--foreground); cursor: pointer; font: inherit; font-size: 13px; font-weight: 400;
  height: 30px; min-width: 34px; padding: 0 8px;
}
.quick button:first-child { border-left: 0; }
.quick button:hover:not(:disabled) { background: var(--muted); }
.quick button[aria-pressed="true"] { background: var(--secondary); color: var(--secondary-foreground); font-weight: 600; }
.quick button:disabled { color: var(--muted-foreground); opacity: 0.4; cursor: default; }
.quick button:focus-visible { outline: 3px solid color-mix(in oklch, var(--primary) 30%, transparent); outline-offset: -3px; }

.nt-table {
  border-collapse: collapse;
  font-size: 14px;
}

.nt-table th,
.nt-table td {
  border-bottom: 1px solid var(--muted);
  padding: 0 14px;
  text-align: right;
  white-space: nowrap;
}
.nt-table th { height: 34px; border-bottom-color: var(--border-muted); }
.nt-table td { height: 38px; }
.nt-table tr > :nth-child(2) { padding-left: 0; }
.nt-table tr > :last-child { padding-right: 0; }
.nt-table tbody tr:last-child td { border-bottom-color: var(--border-muted); }

.nt-table th {
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Zero-width first column: its controls hang in the gutter left of the card. */
.nt-table .row-ctl { width: 0; padding: 0; border: 0; position: relative; }
.row-ctl-inner { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; white-space: nowrap; }
.row-ctl input { vertical-align: middle; cursor: pointer; }
.star {
  appearance: none;
  background: none;
  border: 0;
  color: var(--border);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  margin-left: 6px;
  padding: 2px;
  vertical-align: middle;
}
.star[aria-pressed="true"] { color: var(--primary); }
.star:focus-visible, .linkish:focus-visible { outline: 3px solid color-mix(in oklch, var(--primary) 30%, transparent); border-radius: 4px; }
.nt-table tbody tr.hl { background: var(--primary-muted); }
.nt-table tbody tr.hl:hover { background: var(--primary-muted); }
.nt-table tbody tr.out td:not(.row-ctl) { opacity: 0.38; }
.nt-table tbody tr:not(.hl):hover td:not(.row-ctl) { background: var(--muted); }
.nt-table th.left, .nt-table td.left { text-align: left; }
.nt-table td.num { font-family: var(--font-app-mono); font-variant-numeric: tabular-nums; }
.nt-table td.rank { color: var(--muted-foreground); width: 1%; }
.nt-table td.mono, .nt-table td.address { font-family: var(--font-app-mono); }
/* Long names are clipped in app.js (clipName), at the same count as the PNG. */

/* --profit / --loss are the PASTEL FILLS of the status pair. Text takes the
   saturated foreground half, per the design system's "never use the foreground
   value as a fill" rule read the other way round. */
.profit { color: var(--success-foreground); }
.loss { color: var(--destructive-foreground); }

.coin { display: flex; align-items: center; gap: 8px; }
.coin img { width: 22px; height: 22px; border-radius: 100%; }
/* Dark glyphs (Aptos, Plasma) vanish on the dark card, so logos sit on a white
   disc there, as in the dark PNG. */
.exhibit.dark .coin img { background: #fff; }

.coin .initials {
  align-items: center;
  border-radius: 100%;
  color: #fff;
  display: flex;
  font-size: 9px;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.coin .sym { font-weight: 600; }
.coin .sym.secondary { font-weight: 400; }

/* The PNG prints asset class as plain text, so the exhibit does too. */
.exhibit .al-badge.class { background: none; border: 0; color: inherit; font: inherit; padding: 0; }

.note { margin: 12px 0 0; max-width: 95ch; }
.chart-section { margin-top: 32px; }

/* ------------------------------------------------------------------ guide */

.guide { margin-top: 40px; padding: 24px; }
.guide-intro p { max-width: 80ch; }
.guide-grid { display: grid; gap: 8px 32px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guide h2 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.guide h3 { font-size: 13px; font-weight: 700; margin: 18px 0 6px; }
.guide p { margin: 0 0 8px; }
.rules { margin: 0; padding-left: 18px; font-size: 12px; display: grid; gap: 4px; }
.credit-box {
  background: var(--muted);
  border-radius: var(--radius, 6px);
  font-family: var(--font-app-mono);
  font-size: 11.5px;
  margin: 0 0 8px;
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.guide .al-btn[data-variant="primary"] { margin-top: 4px; }
.disclaimer { border-top: 1px solid var(--border-muted); margin-top: 18px !important; padding-top: 12px; }

/* .al-btn and .al-card set display, which would otherwise beat [hidden]. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tab:disabled { opacity: 0.4; cursor: default; }

/* ------------------------------------------------------------------ chart */

.chart-plot { padding: 0; border-bottom: 1px solid var(--border-muted); }
/* The plot is drawn at the PNG's width (charts.js CHART_W), never scaled, so labels and bars sit
   where they will in the download. A narrow screen scrolls sideways. */
.chart-plot svg { display: block; height: auto; }

.c-label { fill: var(--foreground); font: 500 12px var(--font-app-sans); }
.c-value { fill: var(--muted-foreground); font: 400 12px var(--font-app-mono); font-variant-numeric: tabular-nums; }
.c-value.profit { fill: var(--success-foreground); }
.c-value.loss { fill: var(--destructive-foreground); }
.c-axis { stroke: var(--border); stroke-width: 1; }
.c-divider { stroke: var(--border-muted); stroke-width: 1; }
.c-descriptor { fill: var(--muted-foreground); font: 400 11px var(--font-app-sans); }
.c-empty { fill: var(--muted-foreground); font: 400 13px var(--font-app-sans); }

.contact { margin-top: 16px; padding: 20px 24px; }
.contact h2 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.contact p { margin: 0; }
.contact a { color: var(--primary-muted-foreground); font-weight: 600; }

.foot { margin-top: 32px; }
.foot p { margin: 0 0 4px; }
.foot a { color: var(--primary-muted-foreground); }

/* ------------------------------------------------------------------- gate */

.gate { border: 1px solid var(--border-muted); box-shadow: 0 24px 64px rgb(0 0 0 / 0.18); max-height: calc(100dvh - 32px); max-width: min(480px, calc(100vw - 32px)); overflow: auto; padding: 24px; width: 100%; }
.gate-fields { display: grid; gap: 14px; }
.gate-block { border-top: 1px solid var(--border-muted); display: grid; gap: 6px; justify-items: start; padding-top: 12px; }
.gate-block-label { font-size: 13px; font-weight: 700; }
.gate-block .credit-box { margin: 0; width: 100%; }
.gate-link { color: var(--primary-muted-foreground); display: block; }
.gate-line { font-family: var(--font-app-sans); font-size: 13px; }
.gate-line a { color: var(--primary-muted-foreground); }
.link-btn { background: none; border: 0; color: var(--primary-muted-foreground); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
/* .al-card sets display, which would otherwise show the dialog while closed. */
.gate:not([open]) { display: none; }
.gate::backdrop { background: rgb(10 10 10 / 0.45); }
.gate form { display: grid; gap: 14px; }
.gate h2 { font-size: 20px; font-weight: 700; margin: 0; }
.gate p { margin: 0; }
.gate .ctl-input { height: 38px; font-size: 14px; }
.gate .opt { font-weight: 400; }
.gate-check { align-items: flex-start; display: flex; font-size: 13px; gap: 8px; }
.gate-check input { accent-color: var(--primary); margin-top: 3px; }
.gate-fine a { color: var(--primary-muted-foreground); }
.gate-error { color: var(--destructive-foreground); min-height: 0; }
.gate-error:empty { display: none; }
.gate-actions { display: flex; gap: 8px; justify-content: flex-end; }
.hp { height: 1px; left: -9999px; opacity: 0; position: absolute; width: 1px; }

/* ---------------------------------------------------------------- builder */

/* On a wide screen the controls sit in a sticky column beside the exhibits,
   so a change and its result are on screen together. The breakpoint leaves
   the output column room for the widest preset (RWA Aggregates, 878px). */
@media (min-width: 1340px) {
  .workspace, .intro { max-width: 1440px; }
  .builder { align-items: start; display: grid; gap: 32px; grid-template-columns: 320px minmax(0, 1fr); }
  .builder > .controls { margin: 0; max-height: calc(100vh - 32px); overflow: auto; position: sticky; top: 16px; }
  .builder > .output { min-width: 0; }
}

@media (max-width: 1100px) {
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .topbar, .banner, .intro, .workspace { padding-left: 16px; padding-right: 16px; }
  .exhibit-scroll { margin-left: -16px; margin-right: -16px; }
  .intro { padding-top: 24px; }
  .intro h1 { font-size: 26px; }
  .steps, .guide-grid { grid-template-columns: minmax(0, 1fr); }
  .toolbar-right { margin-left: 0; }
  .pick { padding: 14px 14px 12px; }
  .tab-group-label { flex-basis: 100%; }
  .copy-as { flex-wrap: wrap; height: auto; }
  .copy-as button { height: 32px; }
  /* The freshness stamp is too long to sit beside the brand at 390px; it takes
     its own row rather than pushing the source link off-screen. */
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar-meta { width: 100%; justify-content: space-between; }
  .workspace { padding-top: 16px; }
}