/* ============================================================
   PASSAGE by Khoshà — irccreq.css
   The IRCC requests panel (inside the case modal) and the register
   at #/ircc-requests.

   House tokens only — --paper/--bone/--ink/--gold/--red and the existing
   .panel, .pill, .btn, .chip, .tbl and .fld classes from styles.css. No new
   colour is invented here; a deadline that is late uses the same --red the
   rest of the app uses for late, so "red" means one thing in this product.

   Everything is written to work at 390px as well as 1440: the panel lives
   inside a modal that is full-width on a phone, and the register's table is
   inside the existing .tbl-wrap scroller.
   ============================================================ */

.irq-panel { margin-top: 6px; background: var(--bone); }
.irq-panel .panel-title .hint { font-weight: 400; }

/* ---------- loading / error ---------- */
.irq-skel { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 2px; }
.irq-skel-bar {
  height: 12px; border-radius: 99px;
  background: linear-gradient(90deg, var(--bone-2) 25%, var(--paper) 50%, var(--bone-2) 75%);
  background-size: 300% 100%; animation: irqShimmer 1.4s ease-in-out infinite;
}
.irq-skel-bar.short { width: 58%; }
@keyframes irqShimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

.irq-err {
  border: 1px solid rgba(140, 59, 46, .3); background: rgba(140, 59, 46, .07);
  color: var(--red); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px;
}

.irq-blurb, .irq-note, .irq-foot {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); margin: 6px 0 2px;
}
.irq-foot { color: var(--ink-faint); font-size: 11.5px; margin-top: 12px; }
.panel-foot { padding: 0 4px; }

/* ---------- one request ---------- */
.irq-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.irq-list.muted-list { opacity: .78; }

.irq-row {
  background: var(--paper); border: 1px solid var(--stroke);
  border-radius: var(--r-sm); padding: 11px 13px;
}
.irq-row.closed { background: transparent; border-style: dashed; }
/* An answered request with nothing to prove it is the one state a file
   review actually cares about, so it is marked on the row itself. */
.irq-row.noproof { border-color: rgba(140, 59, 24, .4); }

.irq-row-main {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  justify-content: space-between;
}
.irq-kind { font-family: var(--disp); font-weight: 600; font-size: 14.5px; }
.irq-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.irq-meta { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.irq-instr {
  font-size: 12.5px; color: var(--ink); margin-top: 6px;
  white-space: pre-wrap; border-left: 2px solid var(--stroke); padding-left: 9px;
}
.irq-answer { font-size: 12.5px; color: var(--green); margin-top: 6px; font-weight: 600; }
.irq-proofline { margin-top: 4px; }

/* ---------- the deadline chip ---------- */
.irq-due {
  display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  padding: 2px 9px; border-radius: 99px;
  background: var(--bone-2); color: var(--ink-soft); white-space: nowrap;
}
.irq-due.warm { background: rgba(169, 130, 76, .16); color: var(--gold-deep); }
.irq-due.hot  { background: rgba(169, 130, 76, .28); color: var(--gold-deep); }
.irq-due.late { background: rgba(140, 59, 46, .14); color: var(--red); }
.irq-due.none { background: transparent; border: 1px dashed var(--stroke); color: var(--ink-faint); font-weight: 400; }
.irq-due.done { background: transparent; color: var(--ink-faint); font-weight: 400; padding-left: 0; }

/* ---------- proof ----------
   hydrateIcons() REPLACES the <i data-ic> with a bare <svg> that carries no
   width or height of its own, so a rule written against `i` matches nothing
   and the icon renders at its intrinsic 300px. Size the svg, not the i —
   that is what the rest of the app's icon rules do. */
.irq-proof { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; flex-wrap: wrap; }
.irq-proof svg { width: 14px; height: 14px; flex: 0 0 14px; }
.irq-proof.ok { color: var(--green-soft); }
.irq-proof.missing { color: var(--red); font-weight: 600; }
.irq-proof-doc { display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; text-underline-offset: 2px; }
.irq-proof-doc svg { width: 13px; height: 13px; flex: 0 0 13px; }
.irq-proof-ref { color: var(--ink-soft); }

/* ---------- row actions ---------- */
.irq-rowacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.irq-danger { color: var(--red); }
.irq-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.irq-toggle {
  background: none; border: 0; padding: 8px 0 2px;
  font: 600 12px/1.4 var(--body); color: var(--ink-soft); text-align: left;
}
.irq-toggle:hover { color: var(--ink); }

/* ---------- the inline form ----------
   Inline, never a second modal: a nested modal would replace the case modal
   and throw away whatever was typed into the IRCC number and UCI above. */
.irq-form {
  margin-top: 10px; padding: 12px; border-radius: var(--r-sm);
  background: var(--paper); border: 1px solid var(--gold); box-shadow: var(--shadow-soft);
}
.irq-row .irq-form { margin-top: 12px; }
.irq-formhead {
  font-family: var(--disp); font-weight: 600; font-size: 13.5px; margin-bottom: 9px;
}
.irq-formnote { font-size: 11.5px; color: var(--ink-faint); line-height: 1.6; margin-top: 6px; }
.irq-form textarea {
  width: 100%; border: 1px solid var(--stroke); border-radius: var(--r-sm);
  padding: 8px 10px; background: var(--paper); resize: vertical; line-height: 1.5;
}
.irq-file { font-size: 12px; margin-top: 6px; max-width: 100%; }

/* ---------- the register ---------- */
.irq-tiles {
  display: grid; gap: 10px; margin: 12px 0;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.irq-tile {
  background: var(--paper); border: 1px solid var(--stroke);
  border-radius: var(--r-md); padding: 13px 15px;
}
.irq-tile-n { font-family: var(--disp); font-size: 26px; font-weight: 700; line-height: 1.1; }
.irq-tile-l { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.irq-tile.late { border-color: rgba(140, 59, 46, .35); }
.irq-tile.late .irq-tile-n { color: var(--red); }
.irq-tile.hot .irq-tile-n { color: var(--gold-deep); }
.irq-tile.warn { border-color: rgba(169, 130, 76, .4); }

.irq-reg .irq-tr { cursor: pointer; }
.irq-reg .irq-tr:hover { background: var(--bone); }
.irq-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }

/* ---------- phone ---------- */
@media (max-width: 720px) {
  .irq-row-main { flex-direction: column; align-items: flex-start; gap: 4px; }
  .irq-rowacts .btn { flex: 1 1 auto; }
  .irq-tiles { grid-template-columns: repeat(2, 1fr); }
  .irq-tile { padding: 11px 12px; }
  .irq-tile-n { font-size: 22px; }
  .irq-form { padding: 10px; }
}

/* ---------- the register draws 100 rows and offers the rest ----------
   Added 25 Sep 2026: a 400-request register built 5,183 DOM nodes on every
   chip click. The tiles above still count every match; this only limits what
   is drawn. */
.irq-more {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-top: 1px solid var(--rule);
}
.irq-more .muted { font-size: 12px; }