/* «تقرير الدفعة» and its sheets, as the prototype draws them (A2.html .hubl .gblock .wblock .wline .lbar .icards .icard
   .lnk .mbtn.sm .mbtn.quiet, and the spacing block of the mockup review). Every value is a token (tokens/); the owner's
   spacing rule holds: the widgets are a gap apart, a coloured line keeps a gap from the button under it, no clutter. */
.rpage {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding-block: var(--spacing-md) var(--spacing-xl);
}

.rwidget {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.hubl {
  margin: 0;
  padding-inline: var(--spacing-md);
  font-size: var(--font-size-meta);
  font-weight: 800;
  color: var(--app-ink-soft);
}

.gblock {
  display: flex;
  flex-direction: column;
  background-color: var(--app-surface);
  border-block: 1px solid var(--app-line-strong);
}

.rpage [data-part="table"] bdi {
  white-space: nowrap;
}

/* a block of states (loading; a note; an error with its retry): its parts a gap apart */
.wblock {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
  padding: var(--spacing-gap) var(--spacing-md);
}

.oneline {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--app-ink-soft);
}

.wline {
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-row);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-thumb);
  background-color: var(--app-raise);
  color: var(--app-ink);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.7;
}

.wline.bad {
  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
  background-color: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

/* the loading bar: a real bar with a moving fill, never empty grey blocks */
.lbar {
  position: relative;
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--app-line);
}

.lbar i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 40%;
  border-radius: inherit;
  background-color: var(--app-btn);
  animation: lbarmove 1.4s ease-in-out infinite;
}

@keyframes lbarmove {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-250%);
  }
}

.endact {
  padding-inline: var(--spacing-md);
}

/* the buttons of the screen and of its sheets: the shared .mbtn (styles/sheet.css), in its small and its quiet forms */
.rpage .wblock .mbtn,
.rsheet .mbtn {
  width: auto;
}

.rpage .wblock .mbtn {
  align-self: flex-start;
}

.rpage .mbtn.quiet,
.rsheet .mbtn.quiet {
  background-color: var(--app-surface);
  border-color: var(--app-line-strong);
  color: var(--app-ink);
}

.rsheet .mbtn.sm {
  min-height: 36px;
  padding: 0 var(--spacing-row);
  font-size: var(--font-size-meta);
}

.rpage .lnk,
.nb .lnk,
.pricebody .lnk,
.msheet.edit .lnk {
  min-height: 44px;
  padding: 0 var(--spacing-sm);
  border: 0;
  background-color: transparent;
  color: var(--app-btn);
  font-family: inherit;
  font-size: var(--font-size-title);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* the sheet component (components/sheet.js) set as a bottom sheet: fixed to the foot, the page dimmed behind it */
.rsheet {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 45;
  max-height: 82%;
  overflow-y: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--app-ink) 45%, transparent);
}

.rsheet > [data-part="title"] {
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.rsheet > [data-part="text"]:empty {
  display: none;
}

.rsheet .icards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
}

.rsheet .icard,
.msheet.edit .plist {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-row);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-md);
  background-color: var(--app-surface);
  color: var(--app-ink);
}

.rsheet .ic-t {
  font-size: var(--font-size-title);
  font-weight: 800;
  line-height: 1.6;
}

.rsheet .ic-n {
  font-size: var(--font-size-meta);
  line-height: 1.7;
  color: var(--app-ink-soft);
}

.rsheet .ic-b {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.rsheet .ssent {
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.rsheet .glist {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-md);
  background-color: var(--app-surface);
}

.rsheet .mrow {
  min-height: 56px;
  padding: var(--spacing-sm) var(--spacing-row);
  border: 0;
  border-top: 1px solid var(--app-line);
  background-color: transparent;
  color: var(--app-ink);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 800;
  text-align: start;
  cursor: pointer;
}

.rsheet .mrow:first-child {
  border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lbar i {
    animation: none;
  }
}