/* seed:managed sha256:{{SEED_SHA}} */
/* GENERATED by scripts/design/build_design.py from
   reference/design/tokens.yaml in the Cinova workspace.
   Do not edit. Change the canon and rebuild, or the surfaces drift
   apart again, which is the whole reason this file is generated. */

/* THE APPLE COMPONENT VOCABULARY. Source for the `components` target.

   Every screen component Cinova ships, and the one place any of them is
   defined. build_design.py emits this into the seed as apple-components.css,
   so the gallery and every shipped build read the same stylesheet and cannot
   disagree about what a card is.

   NOT ONE COLOUR AND NOT ONE DURATION IS WRITTEN HERE. Every one resolves
   through a variable that came out of the canon, and build_design.py fails on
   any literal. Geometry is different: a switch is 51 by 31 because that is the
   size of the control, and the canon has no opinion about it.

   Tracking is deliberately absent too. It is attached to every font-size at
   build time by apply_curve_css, because letter-spacing in em resolves against
   the element that DECLARES it, so writing it by hand is how it stops being
   right.                                                                     */

/* ─── CONTROLS ───────────────────────────────────────────────────────────── */

.btn {
  font: inherit; letter-spacing: -0.0180em; font-size: 15px; font-weight: 400; line-height: 1.286;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--ink);
}
.btn-filled { background: var(--feature); color: var(--feature-on); }
.btn-tinted { background: var(--canvas-raised); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-plain  { padding-inline: 4px; }
.btn-lg { letter-spacing: -0.0220em; font-size: 17px; padding: 12px 22px; }
.btn-block { width: 100%; padding: 13px 20px; letter-spacing: -0.0220em; font-size: 17px; }
.btn:disabled { opacity: 0.38; cursor: default; }

.field { width: 100%; max-width: 380px; display: grid; gap: 7px; }
.field label { letter-spacing: -0.0130em; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.input {
  font: inherit;
  /* 16px floor. Below it iOS Safari zooms the page on focus and stays zoomed. */
  letter-spacing: -0.0200em; font-size: 16px;
  width: 100%; padding: 11px 13px;
  color: var(--ink); background: var(--canvas-raised);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  outline: none;
}
.input::placeholder { color: var(--ink-dim); }
.input:focus-visible { border-color: var(--ink-muted); box-shadow: 0 0 0 3.5px var(--line); }

.switch {
  width: 51px; height: 31px; border-radius: 999px; position: relative;
  background: var(--canvas-raised); border: 1px solid var(--line-strong);
  cursor: pointer; touch-action: none; flex: none;
}
.switch[data-on="true"] { background: var(--feature); border-color: var(--feature); }
.switch .thumb {
  position: absolute; top: 2px; left: 2px; width: 25px; height: 25px;
  border-radius: 999px; background: var(--feature);
  box-shadow: var(--elevation-raised);
  will-change: transform;
}
.switch[data-on="true"] .thumb { background: var(--feature-on); }

.segmented {
  display: inline-flex; position: relative; padding: 2px;
  background: var(--canvas-raised); border: 1px solid var(--line);
  border-radius: var(--radius-md); touch-action: none; user-select: none;
}
.segmented .indicator {
  position: absolute; top: 2px; bottom: 2px; left: 2px;
  border-radius: calc(var(--radius-md) - 2px);
  background: var(--canvas-sunk); border: 1px solid var(--line-strong);
  will-change: transform, width; z-index: 0;
}
.segmented button {
  position: relative; z-index: 1; font: inherit; letter-spacing: -0.0160em; font-size: 14px; background: transparent; border: 0;
  color: var(--ink-muted); cursor: pointer; padding: 6px 16px;
}
.segmented button[aria-selected="true"] { color: var(--ink); font-weight: 500; }

.slider { width: 100%; max-width: 320px; height: 28px; position: relative; touch-action: none; cursor: pointer; }
.slider .track { position: absolute; top: 12px; left: 0; right: 0; height: 4px; border-radius: 999px; background: var(--canvas-raised); }
.slider .fill  { position: absolute; top: 12px; left: 0; height: 4px; border-radius: 999px; background: var(--feature); }
.slider .knob  { position: absolute; top: 1px; left: 0; width: 26px; height: 26px; margin-left: -13px; border-radius: 999px; background: var(--feature); box-shadow: var(--elevation-raised); will-change: transform; }

.check { display: inline-flex; align-items: center; gap: 10px; letter-spacing: -0.0180em; font-size: 15px; cursor: pointer; }
.check .box {
  width: 22px; height: 22px; border-radius: var(--radius-xs);
  border: 1px solid var(--line-strong); background: var(--canvas-raised);
  display: grid; place-items: center; flex: none;
}
.check .box.round { border-radius: 999px; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check input:checked + .box { background: var(--feature); border-color: var(--feature); }
.check .box svg { opacity: 0; width: 13px; height: 13px; }
.check input:checked + .box svg { opacity: 1; }
.check .box svg path { stroke: var(--feature-on); }

/* POSITION IS A MODIFIER, not part of the bar. A chrome bar sits inside a
   scrolling box in the gallery and at the top of a scrolling document in a
   real app, and those need `absolute` and `sticky` respectively. Baking one
   in is what forces a build to hand write the other, which is how a second
   version of this component starts. */
.chrome {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  height: var(--chrome-h-header);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  background: var(--material-chrome-bg);
  backdrop-filter: blur(var(--material-chrome-blur)) saturate(var(--material-sat));
  -webkit-backdrop-filter: blur(var(--material-chrome-blur)) saturate(var(--material-sat));
  border: 0;
}
.chrome .title { letter-spacing: -0.0220em; font-size: 17px; font-weight: 600; }
.chrome .large-title {
  position: absolute; left: 18px; top: 100%; margin-top: 14px;
  font-family: var(--font-display);
  letter-spacing: 0.0040em; font-size: 32px; font-weight: 600;
  transform-origin: left center; will-change: transform, opacity;
}
/* §12. A scroll edge effect, not a hard divider. A 1px border draws a line
   whether or not anything is behind it; this only appears once something is. */
.chrome::after {
  content: ""; position: absolute; inset-inline: 0; top: 100%;
  height: var(--chrome-edge-fade); pointer-events: none;
  background: linear-gradient(to bottom, var(--material-chrome-bg), transparent);
  opacity: 0;
  transition: opacity calc(var(--dur-menu) * var(--motion-scale)) var(--ease-out);
}
.chrome[data-scrolled="true"]::after { opacity: 1; }

/* For a page that scrolls the window rather than an inner box. */
.chrome-sticky { position: sticky; z-index: 40; }

.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: calc(var(--chrome-h-tabbar) + var(--sab));
  padding-bottom: var(--sab);
  display: grid; grid-auto-flow: column; align-items: center;
  background: var(--material-chrome-bg);
  backdrop-filter: blur(var(--material-chrome-blur)) saturate(var(--material-sat));
  -webkit-backdrop-filter: blur(var(--material-chrome-blur)) saturate(var(--material-sat));
  border-top: 1px solid var(--material-chrome-edge);
}
.tabbar a {
  display: grid; justify-items: center; gap: 3px; text-decoration: none;
  color: var(--ink-muted); letter-spacing: -0.0100em; font-size: 10px;
  padding: 6px 0; min-height: 44px;
}
.tabbar a[aria-current="page"] { color: var(--ink); }

/* cross-device rule 11. A fixed bar centres to the phone column and does not
   span the window, or the app reads as a stretched desktop the moment the
   window is wider than a phone. */
.tabbar-fixed {
  position: fixed; z-index: 40;
  left: 50%; right: auto; transform: translateX(-50%);
  width: 100%; max-width: var(--frame-w);
}
.tabbar svg { width: 22px; height: 22px; }

/* ─── SURFACES ───────────────────────────────────────────────────────────── */

.menu {
  position: absolute; z-index: 40; min-width: 210px; padding: 6px;
  background: var(--material-menu-bg);
  backdrop-filter: blur(var(--material-menu-blur)) saturate(var(--material-sat));
  -webkit-backdrop-filter: blur(var(--material-menu-blur)) saturate(var(--material-sat));
  border-top: 1px solid var(--material-menu-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-menu);
  /* §7. It grows from the control that opened it, never from its own centre. */
  transform-origin: var(--anchor-x, 50%) var(--anchor-y, 0%);
  will-change: transform, opacity;
}
.menu[hidden] { display: none; }
.menu button {
  display: flex; width: 100%; align-items: center; gap: 10px;
  font: inherit; letter-spacing: -0.0160em; font-size: 14px;
  color: var(--ink); background: transparent; border: 0; cursor: pointer;
  padding: 8px 10px; border-radius: calc(var(--radius-lg) - 6px);
  text-align: left;
}
.menu button:hover { background: var(--line); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 8px; }

.scrim {
  position: absolute; inset: 0; z-index: 30;
  background: var(--material-scrim-bg);
  will-change: opacity;
}
.scrim[hidden] { display: none; }

.dialog {
  position: absolute; z-index: 40; left: 50%; top: 50%;
  width: min(360px, calc(100% - 40px));
  padding: 22px;
  background: var(--material-menu-bg);
  backdrop-filter: blur(var(--material-menu-blur)) saturate(var(--material-sat));
  -webkit-backdrop-filter: blur(var(--material-menu-blur)) saturate(var(--material-sat));
  border-top: 1px solid var(--material-menu-edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-modal);
  will-change: transform, opacity;
}
.dialog[hidden] { display: none; }
.dialog h4 { letter-spacing: -0.0220em; font-size: 17px; font-weight: 600; }
.dialog p { margin-top: 8px; letter-spacing: -0.0160em; font-size: 14px; color: var(--ink-muted); }
.dialog .acts { margin-top: 18px; display: grid; gap: 8px; }

.panel {
  position: absolute; z-index: 40; top: 12px; bottom: 12px; right: 12px;
  width: min(280px, 70%); padding: 18px;
  background: var(--material-sheet-bg);
  backdrop-filter: blur(var(--material-sheet-blur)) saturate(var(--material-sat));
  -webkit-backdrop-filter: blur(var(--material-sheet-blur)) saturate(var(--material-sat));
  border-top: 1px solid var(--material-sheet-edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-sheet);
  will-change: transform, opacity;
}
.panel[hidden] { display: none; }

.toast {
  position: absolute; z-index: 50; left: 50%; bottom: 18px;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; max-width: calc(100% - 36px);
  letter-spacing: -0.0160em; font-size: 14px;
  background: var(--material-menu-bg);
  backdrop-filter: blur(var(--material-menu-blur)) saturate(var(--material-sat));
  -webkit-backdrop-filter: blur(var(--material-menu-blur)) saturate(var(--material-sat));
  border-top: 1px solid var(--material-menu-edge);
  border-radius: 999px;
  box-shadow: var(--elevation-menu);
  will-change: transform, opacity;
}
.toast[hidden] { display: none; }

.card {
  background: var(--canvas-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-raised);
  padding: 18px;
}
.card h4 { letter-spacing: -0.0220em; font-size: 17px; font-weight: 600; }
.card p { margin-top: 6px; letter-spacing: -0.0160em; font-size: 14px; color: var(--ink-muted); }

.list { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--canvas-raised); }
.list-row { position: relative; overflow: hidden; touch-action: pan-y; }
.list-row + .list-row { border-top: 1px solid var(--line); }
.list-row .face {
  position: relative; z-index: 1; background: var(--canvas-raised);
  padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  will-change: transform;
}
.list-row .face .t { letter-spacing: -0.0180em; font-size: 15px; }
.list-row .face .s { letter-spacing: -0.0130em; font-size: 13px; color: var(--ink-dim); margin-top: 2px; }
.list-row .actions {
  position: absolute; inset: 0 0 0 auto; z-index: 0;
  display: flex; align-items: stretch;
}
.list-row .actions button {
  font: inherit; letter-spacing: -0.0160em; font-size: 14px;
  border: 0; cursor: pointer; padding: 0 20px;
  background: var(--feature); color: var(--feature-on);
}

.sheet {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  z-index: 40; touch-action: none;
  background: var(--material-sheet-bg);
  backdrop-filter: blur(var(--material-sheet-blur)) saturate(var(--material-sat));
  -webkit-backdrop-filter: blur(var(--material-sheet-blur)) saturate(var(--material-sat));
  border-top: 1px solid var(--material-sheet-edge);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: var(--elevation-sheet);
  will-change: transform;
}
.sheet .grabber { display: grid; place-items: center; padding: 10px 0 6px; cursor: grab; }
.sheet .grabber i { display: block; width: 40px; height: 5px; border-radius: 999px; background: var(--line-strong); }
.sheet .sheet-body { padding: 8px 20px 20px; display: grid; gap: 12px; }
.sheet h4 { letter-spacing: 0.0110em; font-size: 21px; font-family: var(--font-display); font-weight: 600; }

/* ─── PHONE FRAME ────────────────────────────────────────────────────────── */
/* cross-device rule 11. The app snaps to a phone-width column and centres; it
   never stretches to fill the window. */
.phone {
  width: 100%; max-width: var(--frame-w); margin: 0 auto;
  height: 720px; position: relative; overflow: hidden;
  background: var(--canvas);
  border: 1px solid var(--line-strong);
  border-radius: 34px;
  box-shadow: var(--elevation-modal);
}
.phone .screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; }
.phone .screen .pad { padding: 84px 18px calc(var(--chrome-h-tabbar) + 24px); display: grid; gap: 12px; }


.chart-card { width: 100%; padding: 20px; background: var(--canvas-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); }
.chart-card > h4 { font-family: var(--font-mono); letter-spacing: -0.0100em; font-size: 12px; color: var(--ink-dim); margin-bottom: 14px; }
.chart-card > p { margin-top: 14px; letter-spacing: -0.0130em; font-size: 13px; color: var(--ink-muted); }
.chart-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; width: 100%; }

.tabs { width: 100%; }
.tabs .strip { display: flex; gap: 22px; border-bottom: 1px solid var(--line); position: relative; }
.tabs .strip button { font: inherit; letter-spacing: -0.0180em; font-size: 15px; background: transparent; border: 0; color: var(--ink-muted); cursor: pointer; padding: 0 0 12px; }
.tabs .strip button[aria-selected="true"] { color: var(--ink); }
.tabs .underline { position: absolute; bottom: -1px; left: 0; height: 2px; background: var(--feature); border-radius: 2px; will-change: transform, width; }
.tabs .tab-panel { padding-top: 16px; letter-spacing: -0.0180em; font-size: 15px; color: var(--ink-muted); }

.accordion { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--canvas-raised); }
.acc-row + .acc-row { border-top: 1px solid var(--line); }
.acc-row > button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; font: inherit; letter-spacing: -0.0180em; font-size: 15px; text-align: left; color: var(--ink); background: transparent; border: 0; cursor: pointer; padding: 15px 18px; }
.acc-row > button svg { flex: none; color: var(--ink-dim); will-change: transform; }
.acc-body { overflow: hidden; height: 0; }
.acc-body > div { padding: 0 18px 16px; letter-spacing: -0.0160em; font-size: 14px; color: var(--ink-muted); }

.crumbs { display: flex; align-items: center; gap: 6px; letter-spacing: -0.0160em; font-size: 14px; color: var(--ink-muted); flex-wrap: wrap; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs svg { color: var(--ink-dim); }
.crumbs [aria-current] { color: var(--ink); }

.pager { display: flex; align-items: center; gap: 4px; }
.pager button { font: inherit; letter-spacing: -0.0160em; font-size: 14px; min-width: 36px; height: 36px; border-radius: var(--radius-sm); background: transparent; border: 0; color: var(--ink-muted); cursor: pointer; }
.pager button[aria-current="page"] { background: var(--feature); color: var(--feature-on); }
.pager button:disabled { opacity: 0.3; cursor: default; }

.avatar { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: var(--canvas-sunk); border: 1px solid var(--line-strong); letter-spacing: -0.0130em; font-size: 13px; font-weight: 500; color: var(--ink-muted); flex: none; }
.avatar.lg { width: 52px; height: 52px; letter-spacing: -0.0220em; font-size: 17px; }
.stack { display: flex; }
.stack .avatar + .avatar { margin-left: -10px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-strong); letter-spacing: -0.0130em; font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.chip.solid { background: var(--feature); color: var(--feature-on); border-color: var(--feature); }
.chip svg { flex: none; }
.chip .up { color: var(--up); }
.chip .down { color: var(--down); }

.meter { width: 100%; max-width: 380px; }
.meter .track { height: 6px; border-radius: 999px; background: var(--canvas-raised); overflow: hidden; }
.meter .fill { height: 100%; border-radius: 999px; background: var(--feature); }
.meter .row { display: flex; justify-content: space-between; margin-bottom: 8px; letter-spacing: -0.0130em; font-size: 13px; }
.meter .row b { font-weight: 500; }
.meter .row span { color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.skeleton { border-radius: var(--radius-sm); background: var(--canvas-raised); position: relative; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--line), transparent); animation: shimmer var(--dur-shimmer) linear infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

.empty { width: 100%; text-align: center; padding: 40px 20px; }
.empty .glyph { color: var(--ink-dim); margin-bottom: 14px; }
.empty h4 { letter-spacing: -0.0220em; font-size: 17px; font-weight: 600; }
.empty p { margin: 8px auto 18px; letter-spacing: -0.0160em; font-size: 14px; color: var(--ink-muted); max-width: 40ch; }

.banner { width: 100%; display: grid; grid-template-columns: 20px 1fr auto; gap: 14px; align-items: start; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--canvas-raised); border: 1px solid var(--line); }
.banner svg { color: var(--ink-muted); margin-top: 1px; }
.banner .t { letter-spacing: -0.0160em; font-size: 14px; }
.banner .s { letter-spacing: -0.0130em; font-size: 13px; color: var(--ink-muted); margin-top: 3px; }
.banner.stern { border-left: 3px solid var(--feature); }

.stepper { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.step { display: grid; gap: 8px; position: relative; padding-right: 14px; }
.step .dot { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line-strong); display: grid; place-items: center; letter-spacing: -0.0100em; font-size: 11px; color: var(--ink-dim); background: var(--canvas-sunk); }
.step[data-state="done"] .dot { background: var(--feature); border-color: var(--feature); color: var(--feature-on); }
.step[data-state="now"] .dot { border-color: var(--feature); color: var(--ink); }
.step .t { letter-spacing: -0.0160em; font-size: 14px; color: var(--ink-muted); }
.step[data-state="now"] .t { color: var(--ink); font-weight: 500; }
.step .bar { position: absolute; left: 26px; right: 0; top: 10px; height: 1px; background: var(--line); }
.step[data-state="done"] .bar { background: var(--feature); }
.step:last-child .bar { display: none; }

.table { width: 100%; border-collapse: collapse; letter-spacing: -0.0160em; font-size: 14px; }
.table th { text-align: left; font-weight: 500; letter-spacing: -0.0100em; font-size: 12px; text-transform: uppercase; color: var(--ink-dim); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line-strong); }
.table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
.table tr:last-child td { border-bottom: 0; }
.table-wrap { width: 100%; overflow-x: auto; }

.attach { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--canvas-raised); }
.attach .glyph { color: var(--ink-muted); flex: none; }
.attach .meta { min-width: 0; flex: 1; }
.attach .meta b { display: block; letter-spacing: -0.0160em; font-size: 14px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach .meta span { letter-spacing: -0.0100em; font-size: 12px; color: var(--ink-dim); }

.dropzone { width: 100%; max-width: 420px; padding: 30px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-muted); letter-spacing: -0.0160em; font-size: 14px; }
.dropzone .glyph { color: var(--ink-dim); margin-bottom: 10px; }

.searchfield { position: relative; width: 100%; max-width: 380px; }
.searchfield svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-dim); }
.searchfield .input { padding-left: 40px; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; width: 100%; }
.stat { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--canvas-raised); }
.stat .l { letter-spacing: -0.0130em; font-size: 13px; color: var(--ink-muted); }
.stat .v { margin-top: 8px; font-family: var(--font-display); letter-spacing: 0.0040em; font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .f { margin-top: 10px; display: flex; align-items: center; gap: 8px; letter-spacing: -0.0100em; font-size: 12px; color: var(--ink-dim); }
.stat .f .up { color: var(--up); display: inline-flex; align-items: center; gap: 4px; }
.stat .f .down { color: var(--down); display: inline-flex; align-items: center; gap: 4px; }
.stat .spark { color: var(--ink-dim); margin-left: auto; }

.feed { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--canvas-raised); }
.feed-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start; padding: 13px 16px; }
.feed-row + .feed-row { border-top: 1px solid var(--line); }
.feed-row .glyph { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--canvas-sunk); border: 1px solid var(--line); color: var(--ink-muted); }
.feed-row .t { letter-spacing: -0.0160em; font-size: 14px; }
.feed-row .s { letter-spacing: -0.0130em; font-size: 13px; color: var(--ink-dim); margin-top: 2px; }
.feed-row time { letter-spacing: -0.0100em; font-size: 12px; color: var(--ink-dim); white-space: nowrap; }

.tip { position: relative; display: inline-flex; }
.tip .bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--material-menu-bg); backdrop-filter: blur(var(--material-menu-blur)) saturate(var(--material-sat)); -webkit-backdrop-filter: blur(var(--material-menu-blur)) saturate(var(--material-sat)); border-top: 1px solid var(--material-menu-edge); box-shadow: var(--elevation-menu); letter-spacing: -0.0130em; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; }
.tip:hover .bubble, .tip:focus-within .bubble { opacity: 1; }

@media (max-width: 620px) {
  .stepper { grid-auto-flow: row; }
  .step .bar { display: none; }
}