/* ============================================================
   THE SUBMISSION RECORD — submission.css (agent C, CONTRACT 10)

   Everything structural is already in styles.css: .panel, .panel-title,
   .pill, .btn, .frow/.fld, .m-*, .empty, .hint. These are only the rules this
   feature adds, all prefixed `sb-` so nothing here can reach another screen.
   .ftype (the file-type badge) is docrequest.js's own and is never redefined
   here — the package list draws a file exactly the way the document request
   does, deliberately.
   ============================================================ */

/* ---------- the header ---------- */
.sb-head{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.sb-head-l{flex:1 1 320px;min-width:0}
.sb-head-r{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sb-kicker{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.sb-title{font-family:var(--disp);font-size:24px;font-weight:700;letter-spacing:-.01em;margin:2px 0 8px}
.sb-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sb-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;
  font-size:11.5px;font-weight:600;border:1px solid var(--stroke);color:var(--ink-soft);background:var(--bone)}
.sb-chip-lock{border-color:rgba(30,58,51,.3);color:var(--green);background:rgba(30,58,51,.07)}
.sb-chip-open{color:var(--ink-faint)}
.sb-chip-ov{border-color:rgba(169,130,76,.45);color:var(--gold-deep);background:rgba(169,130,76,.1)}
.sb-lock-ic{width:13px;height:13px;flex:0 0 13px}

/* ---------- the grid of panels ---------- */
.sb-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.sb-grid > .panel{margin:0}
.sb-span{grid-column:1 / -1}

/* ---------- facts ---------- */
.sb-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:4px}
.sb-facts-3{grid-template-columns:repeat(3,1fr)}
.sb-fact{min-width:0}
.sb-fact-l{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:4px}
.sb-fact-v{font-size:14.5px;line-height:1.4;color:var(--ink);word-break:break-word}
.sb-fact-v.sb-empty{color:var(--ink-faint)}
.sb-fact-s{font-size:11px;color:var(--ink-faint);margin-top:3px;line-height:1.45}
.sb-mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}

.sb-ms{font-weight:600}
.sb-ms-not_assessed{color:var(--ink-faint);font-weight:500}
.sb-ms-yes{color:var(--green)}
.sb-ms-no{color:var(--red)}
.sb-ms-unclear{color:var(--gold-deep)}

.sb-quote{margin-top:12px;padding:11px 14px;border-left:2px solid var(--gold);
  background:rgba(169,130,76,.06);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:13px;line-height:1.55;white-space:pre-line}

/* ---------- notes and hints ---------- */
.sb-note{color:var(--ink-soft);font-size:13px;line-height:1.55;padding:8px 0}
.sb-err{color:var(--red)}
.sb-hint{margin-top:12px;color:var(--ink-faint);font-size:11.5px;line-height:1.55}
/* The one sentence on this screen that must not be skimmed: PASSAGE is not
   doing the immigration arithmetic and is saying so. */
.sb-hint-hard{color:var(--ink-soft);border-top:1px solid var(--stroke-soft);padding-top:10px}

/* ---------- the row a case shows ---------- */
.sb-rows{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.sb-row{display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:11px 14px;border:1px solid var(--stroke-soft);border-radius:var(--r-sm);
  background:var(--bone);transition:border-color .15s ease,background .15s ease}
.sb-row:hover{border-color:var(--gold);background:var(--bone-2)}
.sb-row-l{min-width:0}
.sb-row-t{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.sb-row-s{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:2px}
.sb-row-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sb-lock{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--green)}

.sb-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.sb-do .sb-actions{margin-top:4px}

/* ---------- the master-pipeline warning ---------- */
.sb-master{margin-top:16px;border-left:3px solid var(--gold);font-size:13px;line-height:1.55;
  background:rgba(169,130,76,.07)}
/* The pipeline declining on purpose is not a warning — see masterNote(). */
.sb-master-q{border-left-color:var(--stroke);background:transparent;color:var(--ink-faint);
  font-size:12px;padding-top:10px;padding-bottom:10px}

/* ---------- the package ---------- */
.sb-sealed{display:flex;gap:11px;align-items:flex-start;margin:4px 0 14px;padding:12px 14px;
  border-radius:var(--r-sm);background:rgba(30,58,51,.06);border:1px solid rgba(30,58,51,.16);
  font-size:12.5px;line-height:1.55;color:var(--green)}
.sb-sealed .sb-lock-ic{width:16px;height:16px;flex:0 0 16px;margin-top:2px}
.sb-hash{margin-top:6px;font-size:11px;color:var(--ink-faint);letter-spacing:.03em}

.sb-kind{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-deep);margin:16px 0 6px}
.sb-kind:first-of-type{margin-top:6px}
.sb-docs{display:flex;flex-direction:column;gap:6px}
.sb-doc{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  border:1px solid var(--stroke-soft);background:var(--paper)}
.sb-doc-gone{background:rgba(140,59,46,.05);border-color:rgba(140,59,46,.2)}
.sb-doc-n{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.35}
.sb-doc-n a{text-decoration:underline;text-underline-offset:2px}
.sb-doc-l{display:block;font-size:11px;color:var(--ink-faint)}
.sb-doc-m{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.sb-doc-s{font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.sb-doc-h{font-size:10.5px;color:var(--ink-faint);letter-spacing:.03em}
.sb-x{border:none;background:transparent;color:var(--ink-faint);font-size:18px;line-height:1;
  padding:2px 6px;border-radius:6px}
.sb-x:hover{color:var(--red);background:rgba(140,59,46,.08)}

.sb-ft{font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--ink-faint)}

/* ---------- history ---------- */
.sb-events{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.sb-ev{padding:9px 12px;border-radius:var(--r-sm);background:var(--bone);border:1px solid var(--stroke-soft)}
/* An override is the one line in this list somebody will come looking for
   years later. It does not get to look like the others. */
.sb-ev-hard{background:rgba(169,130,76,.09);border-color:rgba(169,130,76,.4)}
.sb-ev-h{display:flex;gap:12px;justify-content:space-between;align-items:baseline;flex-wrap:wrap}
.sb-ev-t{font-size:12.5px;font-weight:600}
.sb-ev-w{font-size:11px;color:var(--ink-faint)}
.sb-ev-r{margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--ink)}
.sb-ev-d{margin-top:5px;display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--ink-soft)}

/* ---------- dialogs ---------- */
.sb-override,.sb-lockwarn{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;margin-bottom:14px;
  border-radius:var(--r-sm);background:rgba(169,130,76,.1);border:1px solid rgba(169,130,76,.4);
  font-size:12.5px;line-height:1.55}
.sb-lockwarn{display:block}
.sb-override .sb-lock-ic{width:16px;height:16px;flex:0 0 16px;margin-top:2px}
.sb-warn{margin-top:9px;padding-top:9px;border-top:1px solid rgba(169,130,76,.35);color:var(--red-soft);font-weight:500}
/* Not inside a .fld — styles.css sizes a textarea through that wrapper, so
   without this the one box on the screen that matters most is 200px wide. */
.sb-reason textarea{border-color:var(--gold);width:100%;display:block;
  padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--gold);
  background:var(--paper);line-height:1.5;resize:vertical}

.sb-pick{max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:6px;margin:6px 0 4px;
  padding-right:2px}
.sb-pick-r{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  border:1px solid var(--stroke-soft);cursor:pointer}
.sb-pick-r:hover{border-color:var(--gold);background:var(--bone)}
.sb-pick-n{flex:1 1 auto;min-width:0;font-size:13.5px}
.sb-pick-s{display:block;font-size:11px;color:var(--ink-faint)}

.sb-findings{display:flex;flex-direction:column;gap:7px;margin:6px 0}
.sb-finding{padding:9px 12px;border-radius:var(--r-sm);background:rgba(140,59,46,.07);
  border:1px solid rgba(140,59,46,.25);font-size:12.5px;line-height:1.5}
.sb-finding span{display:block;color:var(--ink-soft)}

/* ---------- the strip inside the case modal ---------- */
.sb-strip{background:var(--bone)}
.sb-strip .sb-row{background:var(--paper)}

/* ---------- phone ----------
   The grid collapses to one column and the fact grids to two, then one. The
   package rows keep their checksum on a second line rather than truncating
   it: a hash that is cut off is a hash nobody can compare. */
@media (max-width:980px){
  .sb-grid{grid-template-columns:1fr}
  .sb-facts-3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .sb-title{font-size:20px}
  .sb-head-r{width:100%}
  .sb-head-r .btn{flex:1 1 auto}
  .sb-facts,.sb-facts-3{grid-template-columns:1fr}
  .sb-row{flex-direction:column;align-items:flex-start;gap:8px}
  .sb-row-r{justify-content:flex-start}
  .sb-doc{flex-wrap:wrap}
  /* The metadata and the remove button share the wrapped second line rather
     than taking one each — and the checksum stays whole, because a hash cut
     off halfway is a hash nobody can compare. */
  .sb-doc-m{flex:1 1 auto;padding-left:34px}
  .sb-x{margin-left:auto}
  .sb-actions .btn{flex:1 1 auto}
}