/*
 * The stage 3 pages' own pieces, beyond the kit's components (plan 12, D12.99): the plan columns
 * of /settings, the rows of /alerts, the official player of /c/:id, the empty cells of the centred
 * tab bar, and the legal links under an app page. A sheet of their own, so the kit's sheets stay
 * as they were. `lq-plancard` is not the pricing page's `lq-plan` (stage 2), whose rules differ.
 */

/*
 * Settings: a plan column. What it gives stands under a line, apart from its price and button;
 * the current plan is outlined; the price reads left to right.
 */
.lq-plancard > .lq-checklist {
  padding-block-start: 16px;
  border-block-start: 1px solid var(--color-border-default);
}

.lq-plancard--current {
  border-color: var(--color-action-primary);
  box-shadow: inset 0 0 0 1px var(--color-action-primary);
}

.lq-plancard__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

/* «الأنسب لأغلب الفرق» beside the name: the recommendation, said in the primary ink. */
.lq-plancard__badge {
  align-items: center;
  color: var(--color-text-primary);
  font-weight: 500;
}

.lq-plancard__badge .lq-icon {
  margin-block-start: 0;
}

/* The terms keep two lines, so the buttons under them line up across the columns. */
.lq-plancard__terms {
  min-height: 36px;
}

/*
 * Settings: the team (D12.170). Members and open invitations are rows in one framed list, as
 * the linked accounts are in Figma (51:425): the face, who it is, the role and the date, and at
 * the end an owner's tools. On phones the tools wrap to a line of their own under the words.
 */
.lq-members {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.lq-member {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
}

.lq-member + .lq-member {
  border-block-start: 1px solid var(--color-border-default);
}

.lq-member > .lq-avatar {
  flex: none;
}

.lq-member > .lq-avatar .lq-icon {
  width: 18px;
  height: 18px;
}

.lq-member__who {
  flex: 1 1 200px;
  min-width: 0;
}

.lq-member__who p {
  overflow-wrap: anywhere;
}

.lq-member__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.lq-member__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.lq-member__tools .lq-input {
  width: auto;
  min-width: 132px;
}

/* The section's status region takes the focus after an error; no ring on a region. */
.lq-team__status:focus {
  outline: none;
  box-shadow: none;
}

/* The head's seat count wraps under the words when the line is short. */
.lq-team .lq-section__head {
  flex-wrap: wrap;
}

.lq-team__seats {
  flex: none;
  white-space: nowrap;
}

.lq-team__seats--full {
  color: var(--color-status-danger);
}

/* The invitation form: the address, the role and the button on one line where it is wide. */
.lq-invite > .lq-grid {
  align-items: end;
}

.lq-invite__submit {
  display: flex;
  align-items: flex-end;
}

.lq-invite__submit .lq-btn {
  width: 100%;
}

/* The plan has no seat left: the form waits, and says so in the danger ink. */
.lq-invite__full {
  color: var(--color-status-danger);
}

.lq-invite__url {
  margin-block-start: 8px;
  font-size: 14px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  /* On a tablet the address takes the line; the role and the button share the next. */
  .lq-invite > .lq-grid > .lq-span-6 {
    grid-column: 1 / -1;
  }

  .lq-invite > .lq-grid > .lq-span-3 {
    grid-column: span 6;
  }
}

@media (max-width: 767px) {
  .lq-member {
    flex-wrap: wrap;
    padding: 16px;
  }

  /* A line of their own under the words, indented past the face; never wider than the row. */
  .lq-member__tools {
    flex: 1 1 100%;
    min-width: 0;
    margin-inline-start: 56px;
  }

  .lq-team__seats {
    white-space: normal;
  }
}

/*
 * Alerts: focus moves to a row's title after «علّم مقروءاً»; scrolled to, it stays clear of the
 * sticky top bar and the phones' tab bar (WCAG 2.4.11).
 */
.lq-alert a,
.lq-alert button {
  scroll-margin-block: calc(var(--topbar-height) + 16px) calc(var(--tabbar-height) + 16px);
}

/*
 * A row already read steps back, as on the old page: its picture faded, its title in the
 * secondary ink. The words keep their contrast; only the picture fades.
 */
.lq-alert--seen > .lq-thumb {
  opacity: 0.6;
}

.lq-alert--seen .lq-moment__quote {
  color: var(--color-text-secondary);
}

/* «جديد»: a red dot at the row's start (28:1354), its word said to screen readers. */
.lq-alert__new {
  flex: none;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-status-live);
}

/*
 * Share: the platform's official player, at the size its frame's attributes give and never wider
 * than its column. A wide video fills a 16:9 box drawn like a thumbnail; a tall one keeps its
 * platform's 325 × 578, centred, and shrinks with its shape on a narrow screen; one of no fixed
 * shape takes the column's width at the height the platform asks.
 */
.lq-player {
  max-width: 100%;
}

.lq-player iframe {
  display: block;
  max-width: 100%;
  border: 0;
}

.lq-player--16x9 {
  aspect-ratio: 16 / 9;
}

.lq-player--16x9 iframe {
  width: 100%;
  height: 100%;
}

.lq-player--9x16 {
  display: flex;
  justify-content: center;
}

.lq-player--9x16 iframe {
  width: 325px;
  height: auto;
  aspect-ratio: 325 / 578;
}

.lq-player--auto iframe {
  width: 100%;
}

/* The centred tab bar's empty cells: nothing to press there. */
.lq-tabbar__spacer {
  pointer-events: none;
}

/* The legal pages under an app page's content, as every public page has them in its footer. */
.lq-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin-block-start: 48px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--color-border-default);
}

.lq-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
  text-decoration: none;
}

.lq-legal-links a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .lq-legal-links {
    gap: 0 16px;
    margin-block-start: 32px;
  }
}

/*
 * Plan 12, stage 8, package I: what the visual pass against Figma added to these pages (the
 * sources, the alerts, the settings, and the shell's «الصق رابطاً»). The kit's own components
 * keep their sheets; these are the pages' arrangements of them.
 */

/* What a page shows only with something in its list stays hidden without, whatever display its
   class gives it. */
.lq-filters[hidden],
.lq-tally[hidden],
.lq-tablefoot[hidden],
.lq-page-head__side[hidden] {
  display: none;
}

/* A page head's end: its primary action, and a line of small print under it (21:55). */
.lq-page-head__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.lq-page-head__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-page-head__meta:empty {
  display: none;
}

.lq-page-head__side .lq-page-head__meta .lq-icon {
  width: 16px;
  height: 16px;
}

/* The counts under a title, each with its dot, split by a thin line: «● 298 يعمل | ● 9 …». */
.lq-tally {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin-block-start: 12px;
  padding: 0;
  list-style: none;
}

.lq-tally > li {
  display: inline-flex;
  align-items: center;
  padding-inline: 16px;
}

.lq-tally > li:first-child {
  padding-inline-start: 0;
}

.lq-tally > li + li {
  border-inline-start: 1px solid var(--color-border-default);
}

.lq-tally .lq-status {
  color: var(--color-text-secondary);
  font: 400 14px / 20px var(--font-ui);
}

.lq-tally .lq-status strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

/* A filter row's visible name at its start: «المنصة» before the chips. */
.lq-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-width: 0;
}

.lq-filterbar__label {
  color: var(--color-text-muted);
  font: 500 12px / 16px var(--font-ui);
}

/* Under a table: what is shown at the start, how it is ordered at the end. */
.lq-tablefoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.lq-tablefoot__sort {
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 18px;
}

.lq-tablefoot .lq-tablefoot__sort .lq-icon {
  width: 16px;
  height: 16px;
  margin-block-start: 1px;
}

/* The sources: a row whose source cannot be reached keeps its line to the red one under it. */
.lq-srow td {
  height: 64px;
}

.lq-srow--failed td {
  border-block-end: 0;
}

/* The red line (21:599) starts under the source's name, and ends where the row does. */
.lq-srow-alert td {
  padding-block: 0 12px;
  padding-inline: 56px 12px;
}

/* R8's ten columns in the frame's 1128 (21:55): 8 on either side of a cell, 12 at the table's
   ends; a wider table scrolls in its frame as before. */
.lq-sources-table th,
.lq-sources-table .lq-srow > td {
  padding-inline: 8px;
}

.lq-sources-table th:first-child,
.lq-sources-table .lq-srow > td:first-child {
  padding-inline-start: 12px;
}

.lq-sources-table th:last-child,
.lq-sources-table .lq-srow > td:last-child {
  padding-inline-end: 12px;
}

/* A table on the page itself, not in a panel: lines between the rows, as the design draws it. */
.lq-table-wrap--flat {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lq-table-wrap--flat .lq-table th {
  border-block-end-color: var(--color-border-default);
  background: transparent;
}

.lq-table-wrap--flat .lq-table tbody tr:last-child td {
  border-block-end: 1px solid var(--color-border-default);
}

.lq-srow-alert:hover {
  background: transparent;
}

.lq-srow-alert .lq-banner {
  align-items: center;
  padding: 10px 16px;
  white-space: normal;
}

.lq-srow-alert .lq-banner__title {
  font: 400 14px / 22px var(--font-ui);
}

/* A source's handle in the interface's face, as drawn; its priority as quiet as a word until
   it is pointed at or focused. */
.lq-sources-table .lq-source__handle {
  font-family: var(--font-ui);
}

.lq-sources-table .lq-source__priority {
  min-height: 36px;
  height: 36px;
  border-color: transparent;
  background-color: transparent;
  font: 500 14px / 20px var(--font-ui);
}

.lq-sources-table .lq-source__priority:hover {
  border-color: var(--color-border-default);
}

/*
 * Package N (R8, Figma 21:55): the sources' second filter row with «رتّب», the pager under the
 * table, the archive walk in a state's cell, and the red line's second line and its button.
 */
.lq-srcfilters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lq-srcfilters[hidden],
.lq-pager[hidden] {
  display: none;
}

/* A row of them: the chips at the start, the search or «رتّب» at the end (21:138, 21:193). Not
   the library's `.lq-filters`, whose quieter pills (library.93d4272b.css) are not the kit's chips the
   frame draws here, 36 high and outlined, the pressed one inked. A column on phones. */
.lq-srcfilters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.lq-srcfilters__row .lq-search {
  width: 304px;
}

/* The row's name and its chips at its start, together. The explore's `.lq-filterbar` (package M,
   library.93d4272b.css) spreads across its whole row; that is not this one's. */
.lq-srcfilters__row > .lq-filterbar {
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: 8px 16px;
}

@media (max-width: 767px) {
  .lq-srcfilters__row {
    flex-direction: column;
    align-items: stretch;
  }

  .lq-srcfilters__row .lq-search {
    width: 100%;
  }
}

/* «رتّب:» and its list, as quiet as the priority's until pointed at or focused (21:226). */
.lq-sortby {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-primary);
}

.lq-srcfilters__row .lq-sortby > .lq-icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
}

.lq-sortby__label {
  font: 500 14px / 20px var(--font-ui);
}

.lq-sortby .lq-sortby__select {
  width: auto;
  min-height: 36px;
  height: 36px;
  padding-block: 0;
  border-color: transparent;
  background-color: transparent;
  font: 500 14px / 20px var(--font-ui);
}

.lq-sortby .lq-sortby__select:hover {
  border-color: var(--color-border-default);
}

/* «الصفحة 1 من 32» between its arrows (21:766). */
.lq-pager {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lq-pager__text {
  color: var(--color-text-primary);
  font: 500 12px / 16px var(--font-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lq-srow__kind {
  color: var(--color-text-secondary);
}

/* The archive walk in place of the dot («Archive progress»): the words and how far, a 4px bar
   filling from the start. */
.lq-srcarchive {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 128px;
}

.lq-srcarchive__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--color-text-secondary);
  font: 500 12px / 16px var(--font-ui);
}

.lq-srcarchive__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-srcarchive__value {
  color: var(--color-text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lq-srcarchive__bar {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  appearance: none;
}

.lq-srcarchive__bar::-webkit-progress-bar {
  background: var(--color-bg-muted);
}

.lq-srcarchive__bar::-webkit-progress-value {
  border-radius: var(--radius-full);
  background: var(--color-action-primary);
}

.lq-srcarchive__bar::-moz-progress-bar {
  border-radius: var(--radius-full);
  background: var(--color-action-primary);
}

/* The red line (21:599): why and when on one line, «أعد المحاولة» at its end. */
.lq-srow-alert .lq-banner {
  padding-block: 6px;
  padding-inline: 12px 8px;
}

.lq-srow-alert .lq-banner > .lq-icon {
  margin-block-start: 0;
}

.lq-srow-alert .lq-banner__body {
  flex-flow: row wrap;
  align-items: baseline;
  gap: 0 8px;
}

.lq-srow-alert .lq-banner__title {
  font: 500 14px / 22px var(--font-ui);
}

.lq-srow-alert .lq-banner__text {
  font: 400 14px / 22px var(--font-ui);
}

@media (max-width: 767px) {
  .lq-srow-alert td {
    padding-inline: 0;
  }

  .lq-srow-alert .lq-banner {
    flex-wrap: wrap;
  }
}

/* The first source (56:1313): the form and its example at the start, what may be followed at
   the end; one column under 1280. */
.lq-srcempty {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: start;
  margin-block-start: 24px;
}

.lq-srcempty__start,
.lq-srcempty__kinds {
  min-width: 0;
}

/* What may be followed is read after the form, a step aside in the page. */
.lq-srcempty__kinds {
  padding-block-start: 8px;
}

.lq-srcempty__form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.lq-srcempty__form .lq-field {
  flex: 1;
  min-width: 0;
}

.lq-srcempty__works {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-srcempty__glyph {
  display: inline-flex;
}

.lq-srcexample {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.lq-srcexample__list {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  list-style: none;
}

.lq-srcexample__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
}

.lq-srcexample__row + .lq-srcexample__row {
  border-block-start: 1px solid var(--color-border-default);
}

.lq-srcexample__row > .lq-thumb {
  flex: none;
  width: 112px;
}

.lq-srcexample__row .lq-thumb__slot--bottom {
  inset-block-end: 6px;
  inset-inline-end: 6px;
}

.lq-srcexample__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lq-srcexample__title {
  font: 500 16px / 24px var(--font-ui);
}

.lq-kinds {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-block-start: 1px solid var(--color-border-default);
  list-style: none;
}

.lq-kind {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 20px;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-kind__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

.lq-kind__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lq-kind__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 700 16px / 24px var(--font-heading);
}

.lq-kind__eg {
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

/* One choice among a few as pills (24:680's «الأولوية»): the chosen one filled with ink. */
.lq-pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lq-pills > legend {
  margin-block-end: 8px;
  padding: 0;
}

.lq-pills__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lq-pills__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding-inline: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
  cursor: pointer;
}

.lq-pills__option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.lq-pills .lq-pills__option .lq-icon {
  width: 16px;
  height: 16px;
}

.lq-pills__option:has(input:checked) {
  border-color: var(--color-action-primary);
  background: var(--color-action-primary);
  color: var(--color-action-on-primary);
}

.lq-pills__option:has(input:focus-visible) {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* A dialog as a sheet along the end edge (24:680), its foot kept at the bottom; the actions at
   the start of the foot and the small print at its end, as drawn. */
@media (min-width: 768px) {
  .lq-dialog--side {
    inset-block: 16px;
    inset-inline: auto 16px;
    width: min(420px, calc(100vw - 32px));
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
    margin: 0;
  }

  .lq-dialog--side > .lq-dialog__inner {
    min-height: 100%;
    padding: 32px 24px 0;
  }

  .lq-dialog--side .lq-dialog__foot {
    position: sticky;
    inset-block-end: 0;
    flex-direction: row-reverse;
    margin-block-start: auto;
    margin-inline: -24px;
    padding: 16px 24px;
    border-block-start: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
  }

  .lq-dialog--side .lq-dialog__actions {
    margin-inline: 0 auto;
  }
}

@media (max-width: 1279px) {
  .lq-srcempty {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .lq-page-head__side {
    align-items: flex-start;
  }

  .lq-tally > li {
    padding-inline: 12px;
  }

  /* The table scrolls sideways on a phone; the red line stays in view at its start. */
  .lq-srow-alert .lq-banner {
    position: sticky;
    inset-inline-start: 0;
    max-width: calc(100vw - 32px);
  }

  .lq-srcempty__form {
    flex-direction: column;
    align-items: stretch;
  }

  .lq-srcexample__row {
    flex-wrap: wrap;
  }

  .lq-srcexample__row > .lq-thumb {
    width: 96px;
  }
}

/*
 * The alerts (28:1354): the saved searches in a column at the start, the feed beside it, by day;
 * one column under 1280, the feed first.
 */
.lq-alertsgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.lq-alertfeed__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  border-block-end: 1px solid var(--color-border-default);
}

/* The filter as the design's underlined tabs: the chosen one in ink over an amber line. */
.lq-alertfeed__head .lq-chips {
  gap: 24px;
}

.lq-alertfeed__head .lq-chip {
  height: 44px;
  margin-block-end: -1px;
  padding-inline: 2px;
  border: 0;
  border-block-end: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 16px;
}

.lq-alertfeed__head .lq-chip[aria-pressed="true"] {
  border-block-end-color: var(--color-accent-amber);
  background: transparent;
  color: var(--color-text-primary);
  font-weight: 700;
}

.lq-alertfeed__head .lq-chip[aria-pressed="true"] .lq-chip__count {
  color: var(--color-text-muted);
  opacity: 1;
}

.lq-alertday {
  display: flex;
  flex-direction: column;
}

.lq-alertday__title {
  padding-block: 20px 8px;
  color: var(--color-text-muted);
  font: 500 12px / 18px var(--font-ui);
}

.lq-alertday > .lq-moments {
  border-block-start: 0;
}

/* A row of the feed: the dot, the picture, the words, and what to do at the end. */
.lq-alertfeed .lq-moment {
  align-items: center;
  gap: 16px;
  padding-block: 16px;
}

.lq-alertfeed .lq-moment > .lq-thumb {
  width: 122px;
  border-radius: var(--radius-sm);
}

.lq-alertfeed .lq-moment__body {
  gap: 6px;
}

.lq-alertfeed .lq-moment__quote {
  font: 700 16px / 26px var(--font-ui);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.lq-alertfeed .lq-moment__quote a {
  color: inherit;
  text-decoration: none;
}

.lq-alertfeed .lq-moment__quote a:hover {
  text-decoration: underline;
}

.lq-alertfeed .lq-moment > .lq-moment__actions {
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* The side column: the searches as rows, then where the alerts reach the person. */
.lq-alertside {
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-width: 0;
}

.lq-alertside > .lq-section + .lq-section {
  margin-block-start: 0;
}

.lq-searchlist {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-block-start: 1px solid var(--color-border-default);
  list-style: none;
}

.lq-searchrow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 16px;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-searchrow__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lq-searchrow__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lq-searchrow .lq-searchrow__title .lq-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.lq-searchrow__title .lq-input {
  min-height: 36px;
}

.lq-searchrow__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline-start: 24px;
}

.lq-searchrow__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.lq-searchrow__new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-primary);
  font: 500 12px / 16px var(--font-ui);
}

.lq-searchrow__new::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-status-live);
}

.lq-searchrow__tools {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

/* The mail of a search, on: the icon in ink on a tinted ground; off, the quiet icon alone. */
.lq-searchrow__tools .lq-iconbtn[aria-pressed="true"] {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.lq-delivery__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--color-border-default);
}

.lq-delivery[hidden] {
  display: none;
}

@media (min-width: 1280px) {
  .lq-alertsgrid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 10fr);
    gap: 24px;
  }

  .lq-alertside {
    grid-row: 1;
    grid-column: 1;
  }

  .lq-alertfeed {
    grid-row: 1;
    grid-column: 2;
  }
}

@media (max-width: 767px) {
  /* On a phone the row keeps its picture beside the words; the actions take a line under. */
  .lq-alertfeed .lq-moment {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }

  .lq-alertfeed .lq-alert__new {
    align-self: flex-start;
    margin-block-start: 8px;
  }

  .lq-alertfeed .lq-moment > .lq-thumb {
    width: 96px;
  }

  .lq-alertfeed .lq-moment__body {
    flex: 1 1 160px;
  }

  .lq-alertfeed .lq-moment > .lq-moment__actions {
    flex: 1 1 100%;
    flex-direction: row;
    justify-content: flex-start;
  }
}

/*
 * The settings (51:425, 130:36) and their own nav («Settings nav», its items «SubNav/…»), one
 * rule for every settings page (D12.262): from 1280 the nav a column of 216 at the start of the
 * page that stays in view, the section 48 beside it (864 of the 1128); under 1280, and on the
 * templates' pages that keep their full width, a row that wraps above the content, its items 44
 * high on a phone.
 */
.lq-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.lq-settings__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.lq-subnav {
  min-width: 0;
}

.lq-page > .lq-subnav {
  margin-block-end: 24px;
}

.lq-subnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lq-subnav__item {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
  text-decoration: none;
}

.lq-subnav__item:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.lq-subnav__item[aria-current] {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
  font-weight: 600;
}

/* The month's meters in one framed row: the figure large, the meter under it, what is left. */
.lq-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.lq-meters__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}

.lq-meters__cell + .lq-meters__cell {
  border-inline-start: 1px solid var(--color-border-default);
}

.lq-meters__label {
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-meters__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.lq-meters .lq-meters__value strong {
  font: 800 28px / 40px var(--font-heading);
  font-variant-numeric: tabular-nums;
}

.lq-meters__of {
  color: var(--color-text-secondary);
  font: 400 14px / 20px var(--font-ui);
}

.lq-meters__note {
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

@media (min-width: 1280px) {
  .lq-settings {
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 48px;
  }

  .lq-settings > .lq-subnav {
    position: sticky;
    inset-block-start: calc(var(--topbar-height) + 24px);
  }

  .lq-settings > .lq-subnav .lq-subnav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }
}

@media (max-width: 767px) {
  .lq-settings {
    gap: 16px;
  }

  .lq-page > .lq-subnav {
    margin-block-end: 16px;
  }

  .lq-subnav__item {
    min-height: 44px;
  }

  .lq-meters {
    grid-template-columns: minmax(0, 1fr);
  }

  .lq-meters__cell {
    padding: 16px;
  }

  .lq-meters__cell + .lq-meters__cell {
    border-inline-start: 0;
    border-block-start: 1px solid var(--color-border-default);
  }
}

/*
 * «الصق رابطاً» (flow 1, 50:945): the video found under the box, «تعرّفنا على الفيديو» in the
 * success ink over it; the way to upload the file instead at the foot's start.
 */
.lq-paste__said {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font: 500 12px / 18px var(--font-ui);
}

.lq-paste .lq-paste__said .lq-icon {
  width: 16px;
  height: 16px;
  color: var(--color-status-success);
}

.lq-paste .lq-vrow__title {
  white-space: normal;
}

/* The video found (50:1036): 12 around it, the line that says so beside the picture. */
.lq-paste .lq-dialog__panel {
  padding: 12px;
}

/* A standing video's picture in a standing frame (Figma 50:1037: TikTok's, 54 by 96). */
.lq-paste .lq-vrow > .lq-thumb.lq-thumb--tall {
  width: 54px;
  aspect-ratio: 9 / 16;
}

/* The box and what is said under it (R36, package N): the link being read, or the refusal. */
.lq-paste__box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lq-paste__status {
  color: var(--color-text-secondary);
  font: 400 14px / 22px var(--font-ui);
}

.lq-paste__upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--target-min);
  color: var(--color-text-primary);
  font: 500 14px / 20px var(--font-ui);
  text-underline-offset: 4px;
}

.lq-dialog .lq-paste__upload .lq-icon {
  width: 18px;
  height: 18px;
}

/* The platforms' chips and the rights' badges the module clones from: never shown. */
.lq-paste__parts,
.lq-paste [hidden],
.lq-dialog .lq-btn[hidden] {
  display: none;
}

/*
 * Work package K (plan 12, stage 8): the onboarding and the vertical browse. Their rules sit here
 * rather than in a sheet of their own, so the kit's list of sheets (lib/assets.ts) stays as it is
 * (D12.239).
 */

/*
 * The onboarding (Figma 56:838 and 56:1083, D12.230): a card over the app drawn dimmed behind it.
 * On phones the card is the screen, and its footer stays at the bottom while the step scrolls.
 */
.lq-onboard__backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  overflow: hidden;
  background: var(--color-bg-canvas);
}

.lq-onboard__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--backdrop);
}

.lq-onboard__nav {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 104px 24px 24px;
  border-inline-end: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
}

.lq-onboard__navbar {
  width: 70%;
  height: 12px;
  border-radius: 6px;
  background: var(--color-bg-muted);
}

.lq-onboard__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 32px 24px;
  padding: 236px 32px 32px;
}

.lq-onboard__tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lq-onboard__pic {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}

.lq-onboard__line {
  width: 80%;
  height: 10px;
  border-radius: 5px;
  background: var(--color-bg-muted);
}

.lq-onboard {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 48px 24px;
}

.lq-onboard:focus {
  outline: none;
}

.lq-onboard__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 640px;
  padding: 32px;
  border-radius: var(--radius-xl);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-overlay);
}

.lq-onboard__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.lq-onboard__progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lq-onboard__step {
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-onboard__segments {
  display: flex;
  gap: 6px;
}

.lq-onboard__seg {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border-strong);
}

.lq-onboard__seg--done {
  background: var(--color-action-primary);
}

.lq-onboard__titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lq-onboard__title {
  font: 700 28px / 42px var(--font-heading);
}

.lq-onboard__title:focus {
  outline: none;
}

.lq-onboard__lede {
  color: var(--color-text-secondary);
  font: 400 16px / 28px var(--font-ui);
}

.lq-onboard__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lq-onboard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.lq-onboard__label {
  padding: 0;
  color: var(--color-text-primary);
  font: 500 16px / 24px var(--font-ui);
}

.lq-onboard__section > legend.lq-onboard__label {
  margin-block-end: 12px;
}

.lq-onboard__count {
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

/* The status region takes no place in the card until it says something. */
.lq-onboard__status:not(:has(.lq-banner)) {
  position: absolute;
}

.lq-onboard .lq-search {
  width: 100%;
}

/* The platforms a source can be followed on, under the search box: small print and chips. */
.lq-onboard__platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-block-start: -12px;
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

/* The box searches as it is typed in; «/» still reaches it, without the key drawn (Figma). */
.lq-onboard .lq-search .lq-kbd {
  display: none;
}

.lq-onboard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--color-border-default);
}

.lq-onboard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* One answer of a single choice (Figma «RoleOption»): the row is the target; chosen, 2px of ink. */
.lq-roleoption {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 80px;
  padding: 14px 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  cursor: pointer;
}

.lq-roleoption + .lq-roleoption {
  margin-block-start: -4px;
}

.lq-roleoption:has(.lq-roleoption__radio:checked) {
  border-color: var(--color-action-primary);
  box-shadow: inset 0 0 0 1px var(--color-action-primary);
}

.lq-roleoption:has(.lq-roleoption__radio:focus-visible) {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

.lq-roleoption__radio {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-bg-surface);
  appearance: none;
  cursor: pointer;
}

.lq-roleoption__radio:checked {
  border-color: var(--color-action-primary);
  background: var(--color-action-primary);
  box-shadow: inset 0 0 0 3px var(--color-bg-surface);
}

.lq-roleoption__radio:focus-visible {
  outline: none;
}

.lq-roleoption__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.lq-roleoption:has(.lq-roleoption__radio:checked) .lq-roleoption__icon {
  background: var(--color-bg-muted);
}

.lq-roleoption__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lq-roleoption__title {
  font: 500 16px / 24px var(--font-ui);
}

.lq-roleoption__desc {
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

/* A topic to follow: the tick shows only while it is pressed. */
.lq-topicchip[aria-pressed="false"] .lq-icon {
  display: none;
}

.lq-topicchip:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.lq-skel--chip {
  width: 72px;
  height: 36px;
  border-radius: var(--radius-full);
}

.lq-skel--avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

/* A source to follow (Figma «SourceSuggestion»): picture, name, platform, rights, its line, switch. */
.lq-sourcelist {
  display: flex;
  flex-direction: column;
}

.lq-sourcerow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-sourcerow__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lq-sourcerow__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.lq-sourcerow__title {
  min-width: 0;
  color: var(--color-text-primary);
  font: 500 16px / 24px var(--font-ui);
  overflow-wrap: anywhere;
}

.lq-sourcerow__meta {
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

/* The switch keeps its drawn size; its target reaches 44 around it. */
.lq-sourcerow .lq-toggle::after {
  content: "";
  position: absolute;
  inset: -10px -4px;
}

.lq-sourcelist__empty {
  padding-block: 8px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .lq-onboard__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lq-onboard__nav {
    padding-inline: 16px;
  }
}

@media (max-width: 767px) {
  /* The card is the screen: the page is its surface to the edges. */
  .lq-onboard-page {
    background: var(--color-bg-surface);
  }

  .lq-onboard__backdrop {
    display: none;
  }

  .lq-onboard {
    display: block;
    padding: 0;
  }

  .lq-onboard__card {
    min-height: 100vh;
    max-width: none;
    gap: 20px;
    padding: 16px 16px 0;
    border-radius: 0;
    box-shadow: none;
  }

  .lq-onboard__title {
    font-size: 22px;
    line-height: 34px;
  }

  .lq-onboard__seg {
    width: 28px;
  }

  .lq-onboard__foot {
    position: sticky;
    inset-block-end: 0;
    margin-block-start: auto;
    padding-block: 12px 16px;
    background: var(--color-bg-surface);
  }

  .lq-roleoption {
    min-height: 72px;
    padding: 12px 14px;
    gap: 12px;
  }
}

/*
 * The vertical browse (Figma 56:2136, D12.234): always dark. On a wide screen, a 9:16 column in
 * the middle with the next and previous buttons beside it; on a phone, the screen between the top
 * and the tab bar, without the top bar. Each reel fills the column and the column snaps to it.
 */
.lq-watch-page .lq-main {
  padding: 0;
}

.lq-watch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: calc(100vh - var(--topbar-height));
  padding: 16px;
}

.lq-watch__col {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-950);
}

.lq-watch .lq-tabs {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 3;
  justify-content: center;
  gap: 4px;
  padding-block-start: 4px;
  padding-inline: 56px;
  border: 0;
  pointer-events: none;
}

.lq-watch .lq-tab {
  padding-inline: 12px;
  pointer-events: auto;
}

.lq-watch .lq-tab[aria-selected="true"]::after {
  inset-inline: 12px;
  inset-block-end: 0;
}

.lq-watch .lq-tabpanel {
  height: 100%;
}

.lq-watch .lq-tabpanel:focus-visible {
  box-shadow: inset 0 0 0 3px var(--color-border-focus);
}

.lq-watch__search {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 8px;
  z-index: 4;
}

.lq-watch__status {
  position: absolute;
  inset-block-start: 60px;
  inset-inline: 12px;
  z-index: 4;
}

.lq-watch__list {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.lq-watch__list::-webkit-scrollbar {
  display: none;
}

.lq-watch__message {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 72px 24px 24px;
  text-align: center;
}

.lq-watch__message .lq-empty {
  padding: 0;
}

.lq-watch__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 120px;
}

.lq-watch__prev svg {
  transform: rotate(180deg);
}

.lq-watch__keys {
  color: var(--color-text-secondary);
  text-align: center;
}

.lq-watch__link {
  flex-wrap: nowrap;
}

.lq-watch__link .lq-input {
  flex: 1;
  min-width: 0;
}

.lq-reel {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--ink-950);
  color: var(--color-text-primary);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.lq-reel__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.lq-reel__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lq-reel__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-overlay-scrim);
  color: var(--white);
}

.lq-reel__play svg {
  width: 32px;
  height: 32px;
}

.lq-reel__play:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.lq-reel--playing .lq-reel__poster,
.lq-reel--playing .lq-reel__play {
  display: none;
}

.lq-reel__frame,
.lq-reel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  border: 0;
  background: var(--ink-950);
}

.lq-reel__video {
  object-fit: contain;
}

/* The organization's file's sound, on or off: at the reel's top start, clear of the feeds' tabs
   and of the rail (D12.286). */
.lq-reel__mute {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 8px;
  z-index: 3;
}

/* Muted: the speaker struck through. */
.lq-reel__mute[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 2px;
  height: 24px;
  margin: auto;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}

/* A wide player in a tall reel: the platform's 16:9 in the middle, the ground around it. */
.lq-reel__frame--wide {
  inset-block: 0;
  height: auto;
  margin-block: auto;
  aspect-ratio: 16 / 9;
}

.lq-reel__fallback {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 260px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--color-overlay-scrim);
  color: var(--white);
  font: 400 14px / 24px var(--font-ui);
  text-align: center;
}

/* The scrims the words sit on: the top, the bottom, and the rail's side; nothing to press. */
.lq-reel__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgb(12 16 48 / 0.75), transparent 150px),
    linear-gradient(to top, rgb(12 16 48 / 0.94), transparent 400px),
    linear-gradient(to right, rgb(12 16 48 / 0.55), transparent 150px);
  pointer-events: none;
}

.lq-reel__scrim:dir(ltr) {
  background:
    linear-gradient(to bottom, rgb(12 16 48 / 0.75), transparent 150px),
    linear-gradient(to top, rgb(12 16 48 / 0.94), transparent 400px),
    linear-gradient(to left, rgb(12 16 48 / 0.55), transparent 150px);
}

.lq-reel__rail {
  position: absolute;
  inset-block-end: 32px;
  inset-inline-end: 4px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lq-reel__act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 72px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font: 500 12px / 16px var(--font-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.lq-reel__act:focus-visible {
  outline: none;
}

.lq-reel__act:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.lq-reel__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 20px;
  background: var(--color-overlay-scrim);
  color: var(--white);
}

/* The rail's words: two short lines at most under their button, as Figma sets them. */
.lq-reel__label {
  max-width: 72px;
  overflow-wrap: break-word;
}

.lq-reel__act--moment .lq-reel__btn {
  border-radius: var(--radius-md);
  background: var(--color-accent-amber);
  color: var(--color-text-on-accent);
}

.lq-reel__act:focus-visible .lq-reel__btn {
  box-shadow: var(--focus-ring);
}

.lq-reel__time {
  min-height: 16px;
  color: var(--color-accent-amber-strong);
  font-size: 13px;
  line-height: 16px;
}

.lq-reel__info {
  position: absolute;
  inset-block-end: 36px;
  inset-inline: 16px 92px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-height: 60%;
  overflow-y: auto;
  pointer-events: none;
}

.lq-reel__info > * {
  pointer-events: auto;
}

.lq-reel__publisher,
.lq-reel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lq-reel__source {
  font: 500 16px / 24px var(--font-ui);
}

.lq-reel__when {
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-reel__caption {
  display: -webkit-box;
  overflow: hidden;
  font: 400 14px / 24px var(--font-ui);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.lq-reel__info--open .lq-reel__caption {
  display: block;
  overflow: visible;
}

.lq-reel__desc {
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
  white-space: pre-line;
}

.lq-reel__more {
  min-height: var(--target-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  font: 600 14px / 24px var(--font-ui);
}

.lq-reel__more:focus-visible {
  border-radius: var(--radius-xs);
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The time line, left to right: the drawn track, and the native range whose knob is the playhead. */
.lq-reel__bar {
  position: absolute;
  inset-block-end: 6px;
  inset-inline: 16px;
  z-index: 2;
  height: 24px;
}

.lq-reel__track {
  position: absolute;
  inset-block-start: 7px;
  inset-inline: 0;
  pointer-events: none;
}

.lq-reel__base {
  fill: rgb(255 255 255 / 0.28);
}

.lq-reel__played {
  fill: rgb(255 255 255 / 0.9);
}

.lq-reel__seek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.lq-reel__seek::-webkit-slider-runnable-track {
  height: 24px;
  background: transparent;
}

.lq-reel__seek::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-block-start: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--color-status-live);
  appearance: none;
}

.lq-reel__seek::-moz-range-track {
  background: transparent;
}

.lq-reel__seek::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--color-status-live);
}

.lq-reel__seek:focus-visible {
  border-radius: var(--radius-xs);
  outline: none;
  box-shadow: var(--focus-ring);
}

.lq-reel--skeleton .lq-reel__info {
  width: 60%;
}

.lq-skel--rail {
  width: 48px;
  height: 48px;
  border-radius: 20px;
}

@media (max-width: 767px) {
  .lq-watch-page .lq-shell {
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "main";
  }

  .lq-watch-page .lq-topbar {
    display: none;
  }

  .lq-watch {
    display: block;
    height: calc(100dvh - var(--tabbar-height) - env(safe-area-inset-bottom));
    padding: 0;
  }

  .lq-watch__col {
    width: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }

  /* On a phone the next and previous buttons stand at the start edge, clear of the rail, on
     the scrim the rail's buttons wear. */
  .lq-watch__side {
    position: fixed;
    inset-block-start: 112px;
    inset-inline-start: 8px;
    z-index: 5;
    gap: 8px;
  }

  .lq-watch__side .lq-iconbtn {
    border-color: transparent;
    border-radius: var(--radius-full);
    background: var(--color-overlay-scrim);
    color: var(--white);
  }

  .lq-watch__keys {
    display: none;
  }
}