/* «دفعة جديدة» as the owner-approved prototype draws it (A2.html: .field .dropz .ffile .pstrip .segc .mhint .band .bar .msheet,
   and the spacing block of the mockup review, rule 13). Every value is a token (tokens/): the blocks are a gap apart, a
   coloured box (a red row, a band, a red line) keeps that gap from what is around it, a ✕ never touches the words, and
   every loading state is a real bar. The classes the report screen also draws (.gblock .hubl .wblock .wline .lbar .oneline
   .endact) are styles/report.css's; what this screen needs different is said once here, under .nb. */
.nb {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl);
}

.nb .gblock {
  gap: var(--spacing-gap);
  margin-inline: calc(-1 * var(--spacing-md));
  padding: var(--spacing-gap) var(--spacing-md);
}

.nb .hubl {
  margin: var(--spacing-sm) var(--spacing-xs) 0;
  padding-inline: 0;
}

.nb .endact {
  padding-inline: 0;
}

.nb .field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.nb .field > label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 22px;
  font-size: var(--font-size-meta);
  font-weight: 700;
  color: var(--app-ink-soft);
}

.nb .oneline {
  display: block;
}

/* the divider between two facts in one line */
.nb .vr,
.msheet .vr,
.pitem .vr,
.rvempty .vr,
.rsheet .vr {
  display: inline-block;
  flex: none;
  width: 1.5px;
  height: 0.95em;
  margin-inline: var(--spacing-sm);
  border-radius: var(--radius-sm);
  background-color: var(--app-ink-soft);
  vertical-align: -0.12em;
}

/* the (!): a circled mark in a 44 px target that takes no height from its label */
.mhint {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-block: calc(-1 * var(--spacing-gap));
  border: 0;
  background-color: transparent;
  color: var(--app-btn);
  cursor: pointer;
}

.mhint span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.6px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-meta);
  font-weight: 800;
  line-height: 1;
}

.mhint span::before {
  content: "!";
}

/* «الأسعار في الملفات»: the two modes */
.nb .segc {
  display: inline-flex;
  align-self: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-thumb);
  background-color: var(--app-raise);
}

.nb .segc button {
  min-height: 40px;
  padding: 0 var(--spacing-md);
  border: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--app-ink-soft);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.nb .segc button.on {
  background-color: var(--app-btn);
  color: var(--app-btn-ink);
}

/* the upload box and what came of it */
.nb .nb-upload,
.nb .nb-files {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
}

.nb .nb-files:empty {
  display: none;
}

/* the chat's files (US2): their row with «أضف من المحادثة», and the ones the method does not take with their ✕ */
.nb [data-part="chat-files"],
.nb [data-part="not-fitting"] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
}

.nb .dropz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: 96px;
  padding: var(--spacing-gap);
  border: 1.5px dashed var(--app-line-strong);
  border-radius: var(--radius-thumb);
  background-color: var(--app-surface);
  color: var(--app-ink-soft);
  font-size: var(--font-size-title);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.nb .dropz svg {
  width: 22px;
  height: 22px;
  color: var(--app-btn);
  stroke-width: 2;
}

.nb .ffile {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 52px;
  padding: var(--spacing-sm) var(--spacing-row);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-thumb);
  background-color: var(--app-surface);
}

.nb .ffile .fn {
  flex: 1;
  min-width: 0;
  color: var(--app-ink);
  font-size: var(--font-size-title);
  font-weight: 700;
}

.nb .ffile .fn small {
  display: block;
  color: var(--app-ink-soft);
  font-size: var(--font-size-meta);
  font-weight: 600;
}

.nb .ffile.bad {
  border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);
  background-color: color-mix(in srgb, var(--color-danger) 8%, var(--app-surface));
}

.nb .ffile .why {
  display: block;
  margin-block-start: var(--spacing-xs);
  color: color-mix(in srgb, var(--color-danger) 70%, var(--app-ink));
  font-size: var(--font-size-meta);
  font-weight: 700;
  line-height: 1.7;
}

/* its ✕ sits in the corner, clear of the words */
.hdicon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-thumb);
  background-color: transparent;
  color: var(--app-ink-soft);
  cursor: pointer;
}

.hdicon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.nb .ffile > .hdicon {
  align-self: flex-start;
  margin-block-start: calc(-1 * var(--spacing-xs));
  margin-inline-end: calc(-1 * var(--spacing-sm));
}

.nb .ffile .bar,
.nb .band .bar {
  display: block;
  height: 6px;
  margin-block-start: var(--spacing-sm);
  border-radius: var(--radius-pill);
  background-color: var(--app-line);
  overflow: hidden;
}

.nb .ffile .bar i,
.nb .band .bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--app-btn);
}

.nb .upstack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
}

.nb .pstrip {
  display: flex;
  gap: var(--spacing-sm);
  padding-block-end: var(--spacing-xs);
  overflow-x: auto;
}

.nb .pstrip button {
  flex: none;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-thumb);
  background-color: var(--app-raise);
  overflow: hidden;
  cursor: pointer;
}

.nb .pstrip button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the loading state: the words over the bar */
.nb .wait,
.msheet .wait {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* the stale copy of Nexa: one band, its sentence and its buttons */
.nb .band {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  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);
}

.nb .band p {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.7;
}

.nb .band.bad {
  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
  background-color: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: color-mix(in srgb, var(--color-danger) 70%, var(--app-ink));
}

.nb .band .sacts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/* the red line under the supplier field */
.nb .err {
  display: block;
  margin-block-start: var(--spacing-sm);
  color: color-mix(in srgb, var(--color-danger) 70%, var(--app-ink));
  font-size: var(--font-size-meta);
  font-weight: 700;
  line-height: 1.7;
}

/* the buttons of this screen and of its sheets, in the forms the prototype draws */
.nb .mbtn.sm,
.msheet .mbtn.sm {
  width: auto;
  min-height: 36px;
  padding: 0 var(--spacing-row);
  font-size: var(--font-size-meta);
}

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

.nb .mbtn.off,
.nb .mbtn:disabled,
.msheet .mbtn:disabled {
  opacity: 0.45;
}

.msheet .mbtn.danger {
  border-color: var(--color-danger);
  background-color: var(--app-surface);
  color: color-mix(in srgb, var(--color-danger) 70%, var(--app-ink));
}

/* the sheets of this screen: the confirm, the explainers, the viewer. Their parts a gap apart. */
.msheet.stack .msheet-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
}

.msheet.stack .ssent,
.msheet.stack .gtext {
  margin: 0;
}

.msheet.stack .sacts {
  margin-top: 0;
}

.msheet .gtext {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-inline-start: var(--spacing-lg);
  color: var(--app-ink-soft);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.msheet .kvl {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-thumb);
  overflow: hidden;
}

.msheet .kvr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap);
  min-height: 44px;
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--app-line);
  font-size: var(--font-size-title);
}

.msheet .kvr:first-child {
  border-top: 0;
}

.msheet .kvr > span:first-child {
  color: var(--app-muted);
  white-space: nowrap;
}

.msheet .kvr > b {
  color: var(--app-ink);
  font-weight: 700;
  text-align: end;
}

/* a message at the foot of the screen (components/toast.js adds the node, takes it away again, and leaves the look to the page) */
[data-part="toast"] {
  position: fixed;
  inset-inline: 0;
  inset-block-end: var(--spacing-md);
  z-index: 60;
  width: max-content;
  max-width: calc(100% - 2 * var(--spacing-md));
  margin-inline: auto;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-thumb);
  background-color: var(--app-ink);
  color: var(--app-bg);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.6;
}