/**
 * Briefer Design System: Molecules
 *
 * The single source of truth in code for every molecule, and a carbon copy of
 * the "⬢ Molecules" section of the Briefer Design System Figma file: one class
 * here per Figma component, one modifier per Figma variant, one pseudo-class,
 * ARIA state or data attribute per Figma state. Figma is upstream. The
 * organisms built from these (cards, the accordion, the step flow) are in
 * organisms.css.
 *
 * A molecule is a layout of atoms. Nothing here restates an atom's look: a
 * button inside a page header is `.btn`, a checkbox inside a checkbox card is
 * `.checkbox`, and only the arrangement (gaps, paddings, borders of the
 * molecule's own box, the type of its own text) is written down. React reaches
 * these classes through the wrappers in web/components/ui/ (which add props,
 * behaviour and ARIA), and the server-rendered templates use them directly.
 *
 * Every colour, type style, spacing step, radius and shadow is a Foundations
 * token from theme.css; every control is an atom class from atoms.css. Where
 * Figma draws a component with an unbound value (an 8px gap, a 14px checkbox
 * inside the SM card, a 26px icon, a 3px connector) that value is copied as
 * drawn rather than rounded to the nearest token: it is the component's own
 * exception, applied wherever the component is used. Borders sit inside the
 * box, as Figma's strokes do, so a padding is the Figma padding less the
 * border.
 *
 * States Figma does not draw are marked "not in Figma" where they are
 * declared: the app needs them (a mobile layout, a focus ring on a card, an
 * urgent deadline) and they are the only additions.
 *
 * Loaded after atoms.css and before Tailwind's injected sheet, so a layout
 * utility on the same element (`mb-lg`, `grid-cols-3`, `w-full`) still applies.
 */

/* ══════════════════════════════════════════════════════════════════ */
/* Page Header · Section Heading                                        */
/* ══════════════════════════════════════════════════════════════════ */

/* The heading of every /app page: the title in `h1` over the line under it in
   `body-lg`, and an optional LG primary button at the far end. .page-title and
   .page-subtitle stand alone when there is no action. */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.page-header-text { min-width: 0; }
.page-header > .btn { flex-shrink: 0; }
.page-title {
  font: var(--type-h1);
  letter-spacing: var(--type-h1-tracking);
  color: var(--foreground);
  overflow-wrap: break-word;
}
.page-subtitle {
  font: var(--type-body-lg);
  letter-spacing: var(--type-body-lg-tracking);
  color: var(--muted-foreground);
}
.page-title + .page-subtitle { margin-top: var(--space-sm); }
/* Not in Figma: the action drops under the title on a phone. */
@media (max-width: 639px) {
  .page-header { flex-direction: column; }
}

/* The heading of a section or a card: `h4` over a `body` description. */
.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}
.section-title {
  font: var(--type-h4);
  letter-spacing: var(--type-h4-tracking);
  color: var(--foreground);
}
.section-description {
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  color: var(--muted-foreground);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Form Field (Figma "Input")                                           */
/* ══════════════════════════════════════════════════════════════════ */

/* One labelled control: Figma's Header (`label`) and Subtitle (`caption`)
   above, the control (a .field, a .dropdown, a .checkbox-card-grid or an
   .accordion-group), an optional CTA button, and the Caption (`small`) under
   it. The state is set once, on the molecule: .is-error and .is-success colour
   the caption and reach the control's border, the same tokens the atom's own
   aria-invalid / .is-success hooks use for a control outside a form field. */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.form-field-header {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  color: var(--foreground);
}
/* Not in Figma: the "(Optional)" suffix the brief wizard puts on a header. */
.form-field-optional { color: var(--muted-foreground); font-weight: var(--type-body-weight); }
.form-field-label {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--fg-2);
}
.form-field-caption {
  font: var(--type-small);
  letter-spacing: var(--type-small-tracking);
  color: var(--muted-foreground);
}
.form-field > .btn { align-self: flex-start; }
.form-field.is-error .form-field-caption { color: var(--danger-foreground); }
.form-field.is-success .form-field-caption { color: var(--success-foreground); }
.form-field.is-error .field,
.form-field.is-error .dropdown-trigger { border-color: var(--danger-foreground); }
.form-field.is-success .field,
.form-field.is-success .dropdown-trigger { border-color: var(--success-foreground); }

/* ══════════════════════════════════════════════════════════════════ */
/* Checkbox Card · Checkbox Card Group                                  */
/* ══════════════════════════════════════════════════════════════════ */

/* A selectable option: a bordered card around a real .checkbox and its title,
   on a <label> so the whole card toggles it. .checkbox-card is the SM size
   (title in `caption`); .checkbox-card-md the MD size (title in `label`).
   Selected follows the checkbox itself. */
.checkbox-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(8px - 2px);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: transparent;
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out);
}
/* Figma resizes the Checkbox atom it holds to 14px in the SM card (between the
   atom's SM and MD) and keeps it at 16px in the MD card. */
.checkbox-card > .checkbox { width: 14px; height: 14px; }
.checkbox-card > .checkbox::before { width: 10px; height: 10px; }
.checkbox-card-md {
  gap: var(--space-sm);
  padding: calc(var(--space-md) - 2px) calc(var(--space-sm) - 2px);
}
.checkbox-card-md > .checkbox { width: 16px; height: 16px; }
.checkbox-card-md > .checkbox::before { width: 12px; height: 12px; }
.checkbox-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}
.checkbox-card-title {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--foreground);
}
.checkbox-card-md .checkbox-card-title {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
}
.checkbox-card-description {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--muted-foreground);
}
.checkbox-card:has(> .checkbox:checked) { border-color: var(--primary); }
/* Disabled: Figma hides the box and mutes the title. */
.checkbox-card:has(> .checkbox:disabled) { cursor: not-allowed; }
.checkbox-card:has(> .checkbox:disabled) > .checkbox { opacity: 0; }
.checkbox-card:has(> .checkbox:disabled) .checkbox-card-title { color: var(--muted-foreground); }
/* Not in Figma: the focus ring moves from the box to the card it fills. */
.checkbox-card > .checkbox:focus-visible { outline: none; }
.checkbox-card:has(> .checkbox:focus-visible) { outline: 2px solid var(--ring); outline-offset: 0; }

/* A caption label over a grid of checkbox cards. The grid's column count is
   layout, set by the caller (`grid-cols-2 md:grid-cols-3`). */
.checkbox-card-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.checkbox-card-group-label {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--fg-2);
}
.checkbox-card-grid {
  display: grid;
  gap: var(--space-xs);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Radio Card                                                           */
/* ══════════════════════════════════════════════════════════════════ */

/* One choice of a single-select: a bordered card around a real .radio, on a
   <label>. Horizontal (the default) sets the radio beside an `h4` title and a
   `caption` description. .radio-card-vertical stacks an icon, the centred text
   and a badge slot, and pins the radio to the top-right corner. Disabled hides
   the radio, mutes the title and icon, and shows the badge (Figma's "Coming
   Soon"), whose space is reserved in every state so a row of cards stays level.
   The icon is drawn at 26px, as Figma sizes it. */
.radio-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: calc(var(--space-lg) - 2px) calc(var(--space-lg) - 2px) calc(var(--space-lg) - 2px) calc(var(--space-sm) - 2px);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out);
}
.radio-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}
.radio-card-title {
  font: var(--type-h4);
  letter-spacing: var(--type-h4-tracking);
  color: var(--foreground);
}
.radio-card-description {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--muted-foreground);
}
.radio-card-icon { display: inline-flex; color: var(--foreground); transition: color var(--duration-base) var(--ease-out); }
.radio-card-icon > svg { width: 26px; height: 26px; }
.radio-card-badge { visibility: hidden; }

.radio-card-vertical {
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: calc(var(--space-lg) - 2px) calc(var(--space-sm) - 2px);
  text-align: center;
}
.radio-card-vertical > .radio {
  position: absolute;
  top: calc(var(--space-sm) - 2px);
  right: calc(var(--space-sm) - 2px);
}
.radio-card-vertical .radio-card-text { align-items: center; gap: var(--space-xs); }

.radio-card:has(> .radio:checked) { border-color: var(--primary); }
.radio-card:has(> .radio:checked) .radio-card-icon { color: var(--primary); }
.radio-card:has(> .radio:disabled) { cursor: not-allowed; }
.radio-card:has(> .radio:disabled) > .radio { opacity: 0; }
.radio-card:has(> .radio:disabled) .radio-card-title,
.radio-card:has(> .radio:disabled) .radio-card-icon { color: var(--muted-foreground); }
.radio-card:has(> .radio:disabled) .radio-card-badge { visibility: visible; }
/* Not in Figma: the focus ring moves from the dot to the card it fills. */
.radio-card > .radio:focus-visible { outline: none; }
.radio-card:has(> .radio:focus-visible) { outline: 2px solid var(--ring); outline-offset: 0; }

/* .radio-card-sm is the compact horizontal card the agency's closed-brief card
   lists its shortlist with ("Who was hired from your shortlist?"): the title in
   `label` and the description in `small`. Drawn in the Agency View Rework
   file's final frames; the Radio Cards component set does not have it yet. */
.radio-card-sm .radio-card-title {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
}
.radio-card-sm .radio-card-description {
  font: var(--type-small);
  letter-spacing: var(--type-small-tracking);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Response Card · Media Link Card · Response Actions Key · Notes Bar  */
/* ══════════════════════════════════════════════════════════════════ */

/* One production company's response to a brief: name, company and showreel
   link, then the triage actions as MD icon buttons. data-state is "new",
   "saved", "shortlisted" or "discarded": it picks which actions the wrapper
   offers, tints the active one, and dims a discarded card. */
.response-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: calc(var(--space-md) - 1px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card);
  overflow: hidden;
  transition: opacity var(--duration-base) var(--ease-out);
}
.response-card-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}
.response-card-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.response-card-name {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  color: var(--foreground);
  overflow-wrap: break-word;
}
.response-card-company {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--muted-foreground);
}
/* Figma sets the card's showreel link in `caption`, not the Link atom's
   `label`. */
.response-card-details > .link {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
}
.response-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}
/* Saved is the one primary button Figma paints in pending blue. */
.response-card[data-state="saved"] .response-card-actions > .btn-primary { background-color: var(--pending); }
.response-card[data-state="discarded"] { opacity: 0.65; }

/* An outbound link to a showreel: a play icon button, `label` title over a
   `small` note, and the external-link glyph. On an <a>. */
.media-link-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: calc(var(--space-sm) - 1px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--card);
  color: inherit;
  text-decoration: none;
}
.media-link-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.media-link-card-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.media-link-card-title {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  color: var(--foreground);
}
.media-link-card-note {
  font: var(--type-small);
  letter-spacing: var(--type-small-tracking);
  color: var(--muted-foreground);
}
.media-link-card > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted-foreground);
}

/* The legend for the response card's icon actions: 20px glyph and `caption`
   per item. */
.actions-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xs) 0;
  border-radius: var(--radius-md);
}
.actions-key-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--muted-foreground);
}
.actions-key-item > svg { width: 20px; height: 20px; flex-shrink: 0; }

/* The header of a response's internal notes: a disclosure (`label` title,
   count badge, 16px chevron) and an SM outline "add" button at the far end. */
.notes-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.notes-bar-disclosure {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0;
  border: 0;
  background: none;
  color: var(--foreground);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  cursor: pointer;
}
.notes-bar-disclosure:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.notes-bar-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted-foreground);
  transition: transform var(--duration-base) var(--ease-out);
}
.notes-bar-disclosure[aria-expanded="true"] .notes-bar-chevron { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════════════ */
/* Step Counter · Progress Bar                                          */
/* ══════════════════════════════════════════════════════════════════ */

/* A row of .step atoms joined by connectors: a 3px line in the border colour,
   level with the centre of the 40px circles. */
.step-counter {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.step-counter > .step { flex-shrink: 0; }
.step-connector {
  flex: 1;
  height: 3px;
  margin-top: calc(20px - 1.5px);
  background-color: var(--border);
}
/* Not in Figma: seven circles leave no room for labels on a phone. */
@media (max-width: 639px) {
  .step-counter .step-label { display: none; }
}

/* A `caption` count beside a track whose fill is the share done. */
.progress-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.progress-bar-label {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--muted-foreground);
  white-space: nowrap;
}
.progress-bar-track {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background-color: var(--secondary);
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--accent);
  transition: width var(--duration-slow) var(--ease-out);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Metadata Tag · Meta Item · Stat Card · Carousel Card                 */
/* ══════════════════════════════════════════════════════════════════ */

/* A brief's metadata in `caption`: the type and platform as boxed tags, the
   deadline and budget as plain text. */
.meta-tag {
  display: inline-flex;
  align-items: center;
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--muted-foreground);
  white-space: nowrap;
}
.meta-tag-type,
.meta-tag-platform {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--bg-3);
}

/* An inline label and value pair in `label`. The row that holds several
   (.meta-row) adds the separators, as Figma's note asks the parent to: the
   Brief Card draws them as 3px dots, `sm` apart from the items. */
.meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  min-width: 0;
}
.meta-item-label { color: var(--muted-foreground); white-space: nowrap; }
.meta-item-value { color: var(--foreground); }
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--space-sm);
}
.meta-row-separator {
  width: 3px;
  height: 3px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--muted-foreground);
}

/* A small figure on a brief card: `caption` label over a 16px primary icon and
   the value, also in `caption`, on a secondary tile. */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  background-color: var(--secondary);
  box-shadow: var(--shadow-sm);
}
.stat-card-label {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--muted-foreground);
}
.stat-card-value {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--foreground);
}
.stat-card-value > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--primary);
}
/* Not in Figma: a deadline inside a week reads in the warning tone. */
.stat-card[data-urgent="true"] .stat-card-value { color: var(--warning-foreground); }

/* The two further Stat Card looks the agency landing page draws (Agency View
   Rework file, final frames; the Stat Card component has one variant so far).
   .stat-card-count is a response figure on the agency's brief card: flat, the
   label in `label` and foreground, over the `caption` value (a figure, or the
   shortlist with a 16px foreground icon). data-emphasis="new" is the figure a
   brief with unseen responses leads with: a success-subtle tile inside a bg-3
   stroke, in accent-active. */
.stat-card-count { box-shadow: none; }
.stat-card-count .stat-card-label {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  color: var(--foreground);
}
.stat-card-count .stat-card-value > svg { color: var(--foreground); }
.stat-card-count[data-emphasis="new"] {
  background-color: var(--success-subtle);
  box-shadow: inset 0 0 0 1px var(--bg-3);
}
.stat-card-count[data-emphasis="new"] .stat-card-label,
.stat-card-count[data-emphasis="new"] .stat-card-value { color: var(--accent-active); }

/* .stat-card-lg is a Briefs Overview tile: the figure in `h2` over its name in
   `h4`, both foreground, `lg` padding, flat. The label stays first in the
   markup (it names the figure for a screen reader) and shows second. */
.stat-card-lg {
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-md);
  padding: var(--space-lg);
  box-shadow: none;
}
.stat-card-lg .stat-card-label {
  font: var(--type-h4);
  letter-spacing: var(--type-h4-tracking);
  color: var(--foreground);
}
.stat-card-lg .stat-card-value {
  font: var(--type-h2);
  letter-spacing: var(--type-h2-tracking);
}

/* A brief's title with an optional link beside it, over a media link card, on
   a secondary tile: one slide of a showreel carousel. */
.carousel-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--secondary);
  overflow: hidden;
}
.carousel-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.carousel-card-title {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  color: var(--foreground);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════ */
/* Carousel · Submission Strip                                          */
/* ══════════════════════════════════════════════════════════════════ */

/* A horizontally scrolling row with a previous and a next arrow either side
   (the agency's "Your next watch" row of carousel cards, and the closed-brief
   card's row of radio cards). Figma draws the arrows as bare 20px glyphs; here
   they are MD ghost icon buttons, the atom with that glyph size, so they can be
   pressed. .carousel-paged shows --carousel-per-view slides at a time (both set
   by the wrapper); without it slides keep their own width. .carousel-compact closes
   the track's gap from `lg` to `sm`. Drawn in the Agency View Rework file's
   final frames. */
.carousel {
  --carousel-gap: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
.carousel-compact { --carousel-gap: var(--space-sm); }
/* Not in Figma: an arrow with nowhere to go dims to fg-4 (the ghost icon
   button's disabled glyph is its resting colour, which reads as pressable),
   and with every slide on show both arrows hide but keep their space. */
.carousel > .icon-btn:disabled { color: var(--fg-4); }
.carousel-still > .icon-btn { visibility: hidden; }
.carousel-track {
  display: flex;
  flex: 1;
  gap: var(--carousel-gap);
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { flex: 0 0 auto; scroll-snap-align: start; }
.carousel-paged .carousel-track > * {
  flex-basis: calc((100% - (var(--carousel-per-view) - 1) * var(--carousel-gap)) / var(--carousel-per-view));
}
/* Not in Figma: fewer slides at a time on smaller screens. */
@media (max-width: 1023px) {
  .carousel-paged .carousel-track > * {
    flex-basis: calc((100% - var(--carousel-gap)) / 2);
  }
}
@media (max-width: 639px) {
  .carousel-paged .carousel-track > * { flex-basis: 100%; }
}

/* The strip under the app header that tells an agency a production company
   has just responded: a `small` line (the company in the label weight) beside
   a 12px bell, centred on a `secondary` bar. The whole strip opens the
   responses; the close control at the far end is not in Figma (the strip needs
   a way to be put away without leaving the page). Drawn in the Agency View
   Rework file's final frames. */
.submission-strip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) calc(var(--space-2xl) + var(--space-sm));
  border-radius: var(--radius-md);
  background-color: var(--secondary);
}
.submission-strip-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--foreground);
  font: var(--type-small);
  letter-spacing: var(--type-small-tracking);
  text-align: center;
  cursor: pointer;
}
.submission-strip-link > svg { width: 12px; height: 12px; flex-shrink: 0; }
.submission-strip-link:hover { text-decoration: underline; }
.submission-strip-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.submission-strip-company { font-weight: var(--type-label-weight); }
.submission-strip > .icon-btn {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
}