/*
 * Global materials-drafting queue strip.
 * Mounted at <section data-region="materials-queue">. Hidden when
 * the queue is empty, so the dashboard is unaffected on idle days.
 */

/* Bottom-right toast dock. Narrow column that lives within the
 * right-hand margin so it never encroaches on the main content as
 * the user scrolls. Chips stack vertically (taller, denser) so each
 * request gets a clear row showing company + material type without
 * fighting the reading column for horizontal space.
 *
 *   - position: fixed; bottom: 16px; right: 16px
 *   - width:  300px   (narrow column — fits inside the right margin
 *                      of the dossier reading column at ~1280-1440px
 *                      viewports without overlap)
 *   - max-height: calc(100vh - 120px)  with overflow:auto so a long
 *                      queue scrolls inside its own container instead
 *                      of growing off-screen.
 *
 * Empty queue collapses entirely via the hidden attribute. */
[data-region="materials-queue"] {
  display: block;
  position: fixed;
  bottom: 16px;
  right: 16px;
  left: auto;
  z-index: 39;
  margin: 0;
  padding: 10px 12px;
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: rgba(251, 247, 238, 0.97);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.10));
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(14, 31, 54, 0.10);
  box-sizing: border-box;
}

@media (max-width: 720px) {
  [data-region="materials-queue"] {
    bottom: 12px;
    right: 12px;
    left: auto;
    width: calc(100vw - 24px);
    max-width: 360px;
    padding: 8px 10px;
  }
}

[data-region="materials-queue"][hidden] {
  display: none;
}

.mq__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  margin: 0 0 6px;
}

.mq__head .mq__title {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft, #4a4a4a);
}

.mq__count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--mute, #888);
}

/* Vertical stack of rows so each request gets its own dense line
 * with company + material type clearly visible. Narrow dock width
 * makes horizontal pill packing too cramped, so we stack instead. */
.mq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mq__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--parchment, #FBF7EE);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-left: 3px solid var(--amber, #E7B549);
  border-radius: 8px;
  transition: opacity 200ms ease, border-color 120ms ease;
  width: 100%;
  min-width: 0;
}
.mq__row[data-phase="queued"]   { border-left-color: var(--mute, #999); }
.mq__row[data-phase="complete"] { border-left-color: #2f8a5e; }
.mq__row[data-phase="failed"]   { border-left-color: #b03e3e; }

.mq__pos {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--mute, #888);
  letter-spacing: 0.10em;
  flex-shrink: 0;
  min-width: 12px;
  text-align: center;
}

.mq__elapsed { flex-shrink: 0; }
.mq__phase   { flex-shrink: 0; }
.mq__sep     { flex-shrink: 0; }

/* Two-line layout per row: company + material type on line 1,
 * phase + elapsed on line 2. Title is hidden in the dock to keep
 * each row compact; the title still shows in the tooltip via the
 * row's title attribute. */
.mq__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.mq__line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--serif, Georgia, serif);
  font-size: 12.5px;
  color: var(--navy, #0E1F36);
  line-height: 1.2;
  min-width: 0;
}
.mq__company {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
/* Hide the role title in chip rows only — the dock is for "what is
 * Winky working on right now," not full role context. The full title
 * remains in the row's title attribute for hover discovery.
 * .mq__head .mq__title (the dock header) stays visible. */
.mq__line .mq__title { display: none; }
.mq__line .mq__dot { display: none; }

.mq__meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft, #555);
  min-width: 0;
}
/* Material type label takes whatever width is left and truncates;
 * phase pill + elapsed are fixed-width and never wrap. */
.mq__feature {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mute, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}

/* In the dock, gap between feature/phase/elapsed is enough; drop
 * the bullet separators that were carry-overs from the wider strip
 * layout. */
.mq__sep { display: none; }

.mq__elapsed { font-variant-numeric: tabular-nums; }

.mq__phase {
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid;
  background: rgba(231, 181, 73, 0.12);
  border-color: rgba(231, 181, 73, 0.45);
  color: #8a5a14;
  font-size: 9px;
  letter-spacing: 0.10em;
}
.mq__phase[data-phase="queued"] {
  background: rgba(120, 120, 120, 0.10);
  border-color: rgba(120, 120, 120, 0.35);
  color: var(--ink-soft, #555);
}
.mq__phase[data-phase="complete"] {
  background: rgba(76, 175, 116, 0.16);
  border-color: rgba(76, 175, 116, 0.55);
  color: #2f8a5e;
}
.mq__phase[data-phase="failed"] {
  background: rgba(192, 76, 76, 0.14);
  border-color: rgba(192, 76, 76, 0.50);
  color: #b03e3e;
}

/* Cancel is an icon-style ✕ in the dock since "Cancel" word is
 * redundant with the row context. Hidden label retained for screen
 * readers via aria-label set on the button. */
.mq__cancel {
  font-family: var(--mono);
  font-size: 0;          /* hide the "Cancel" text */
  line-height: 1;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  color: var(--ink-soft, #555);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}
.mq__cancel::before {
  content: "✕";
  font-size: 10px;
  letter-spacing: 0;
  font-family: var(--font-body, sans-serif);
}
.mq__cancel:hover {
  background: rgba(192, 76, 76, 0.08);
  border-color: rgba(192, 76, 76, 0.45);
  color: #b03e3e;
}



/* UX01 C12 (TA-22): while a dossier is open its docket chip carries the
   run, so the fixed dock steps aside instead of covering Download PDF. */
[data-region="materials-queue"][data-dossier-open="true"] {
  display: none;
}