/* ============================================================
   order.components.css · Order Reliability band-strip layer
   ------------------------------------------------------------
   EXTENDS Atlas. Loaded LAST in shell.html — AFTER
   trade.components.css + finance.components.css — so it layers
   on top of the shipped order-card + finance components.

   Mints ONLY the new .oc-band* band-strip REGION classes for the
   order-card reliability (trust) layer: a thin strip embedded in
   the shipped .ordercard that surfaces the per-deal M5 band.

   Every value resolves to an existing supply.tokens.css var(--…).
   Nothing global/shipped is redefined here:
     · .btn.danger is NOT redefined (ships in finance/export).
     · .fn-* are NOT redefined (ship in finance.components.css —
       bandchip / manifest / ack / received / note are reused).
   ============================================================ */

/* ============================================================
   THE BAND REGION — a quiet trust sub-layer inside .ordercard.
   Dashed top rule + a faintly warmer ground so it reads as a
   SECONDARY band of the deal, never competing with the lifeline.
   ============================================================ */
.oc-band{ border-top:1px dashed var(--line2);
  background:color-mix(in srgb, var(--surface2) 55%, var(--surface));
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.oc-band .ob-hd{ display:flex; align-items:center; gap:.45rem; }
.oc-band .ob-hd .ic{ width:15px; height:15px; flex:0 0 15px; color:var(--brand2); display:inline-flex; }
.oc-band .ob-hd .ic svg{ width:100%; height:100%; display:block; }
.oc-band .ob-hd .lbl{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:var(--fw-bold); }
.oc-band .ob-hd .grow{ flex:1; }
.oc-band .ob-hd .scope{ font-size:var(--fs-2xs); color:var(--muted); font-family:var(--mono); }

/* one band line (a direction: you→them, or them→you). Reuses the
   .fn-received idiom; this neutral row is for the OUTBOUND / mine side. */
.oc-bandrow{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:.6rem var(--s4); }
.oc-bandrow .rl{ flex:1; min-width:0; font-size:var(--fs-sm); color:var(--ink2); line-height:1.45; }
.oc-bandrow .rl b{ display:block; color:var(--ink); font-weight:var(--fw-semi); }
.oc-bandrow .rl .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.oc-bandrow .ra{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
/* shared (mine, already sent) — verified accent + a ✓ marker */
.oc-bandrow.shared{ border-color:var(--pv-verified-ln); background:var(--pv-verified-bg); }
.oc-bandrow.shared .rl b{ color:var(--pv-verified); display:inline-flex; align-items:center; gap:.3rem; }
.oc-bandrow.shared .rl b::before{ content:"✓"; font-weight:var(--fw-x); }

/* the inline MINI-SHARE — band-only, verified by eye. Expands in place
   (no route change) so the deal context stays on screen (mobile-first).
   The manifest + ack inside are reused verbatim from finance. */
.oc-share{ display:flex; flex-direction:column; gap:var(--s3);
  border:1.5px solid var(--brand); border-radius:var(--r);
  background:color-mix(in srgb, var(--brand-soft) 22%, var(--surface)); padding:var(--s4); }
.oc-share .ss-top{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.oc-share .ss-top .sl{ flex:1; min-width:0; font-size:var(--fs-xs); color:var(--ink2); line-height:1.4; }
.oc-share .ss-top .sl b{ color:var(--ink); font-weight:var(--fw-semi); }
.oc-share .ss-acts{ display:flex; gap:var(--s3); }
.oc-share .ss-acts .btn{ flex:1; justify-content:center; }

/* the no-consent CTA — composes .fn-note.priv + an action; this just
   gives the action row its spacing. Invites to the Finance tab (M5). */
.oc-bandcta{ display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }
.oc-bandcta .grow{ flex:1; }

/* the suppressed / hidden state, made legible in review: a faint inline
   note explaining WHEN the strip is intentionally not shown. */
.oc-bandnone{ display:flex; align-items:center; gap:.45rem;
  border-top:1px dashed var(--line2); padding:.6rem var(--s4);
  font-size:var(--fs-2xs); color:var(--muted); line-height:1.4; }
.oc-bandnone .g{ opacity:.7; }

/* ============================================================
   RESPONSIVE / touch
   ============================================================ */
@media (pointer:coarse){
  .oc-share .ss-acts .btn, .oc-bandcta .btn, .oc-bandrow .ra .btn{ min-height:44px; }
}
@media (max-width:480px){
  .oc-bandrow{ align-items:flex-start; }
  .oc-bandrow .ra{ width:100%; }
  .oc-bandrow .ra .btn{ flex:1; justify-content:center; }
  .oc-share .ss-acts{ flex-direction:column-reverse; }
}

/* ============================================================
   Post-deal CONTACT BRIDGE region (.oc-contact / .occ-*) — Design C.
   Same EXTENDS-Atlas discipline as the band strip above: a quiet strip
   embedded in the shipped .ordercard, below the lifeline/band, above the
   foot — never eclipsing the lifecycle or the grade-armor buttons (SPEC §7).
   Grower = actionable (open/withdraw); buyer = passive (waiting / a callable
   number). All values resolve to existing supply.tokens.css var(--…).
   ============================================================ */
.oc-contact{ border-top:1px dashed var(--line2);
  background:color-mix(in srgb, var(--surface2) 55%, var(--surface));
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.oc-contact .occ-hd{ display:flex; align-items:center; gap:.45rem; }
.oc-contact .occ-hd .ic{ width:15px; height:15px; flex:0 0 15px; color:var(--brand2); display:inline-flex; }
.oc-contact .occ-hd .ic svg{ width:100%; height:100%; display:block; }
.oc-contact .occ-hd .lbl{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:var(--fw-bold); }
.oc-contact .occ-hd .grow{ flex:1; }
.oc-contact .occ-hd .scope{ font-size:var(--fs-2xs); color:var(--muted); font-family:var(--mono); }

/* a generic contact line: text block + action area (grower affordance / buyer wait) */
.occ-row{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:.65rem var(--s4); }
.occ-row .cl{ flex:1; min-width:0; font-size:var(--fs-sm); color:var(--ink2); line-height:1.45; }
.occ-row .cl b{ display:block; color:var(--ink); font-weight:var(--fw-semi); }
.occ-row .ca{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.occ-row.open{ border-color:var(--pv-verified-ln); background:var(--pv-verified-bg); }
.occ-row.open .cl b{ color:var(--pv-verified); display:inline-flex; align-items:center; gap:.3rem; }
.occ-row.open .cl b::before{ content:"✓"; font-weight:var(--fw-x); }
.occ-row.wait{ border-style:dashed; border-color:var(--pv-stale-ln); background:var(--pv-stale-bg); }
.occ-row.wait .cl{ color:var(--muted); }
.occ-row.wait .cl b{ color:var(--ink2); }
.occ-row .ca .occ-wic{ width:18px; height:18px; color:var(--muted); display:inline-flex; }
.occ-row .ca .occ-wic svg{ width:100%; height:100%; display:block; }

/* THE REVEAL — the buyer's payoff: the grower's real number, mono, callable */
.occ-phone{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  border:1px solid var(--pv-official-ln); border-radius:var(--r);
  background:var(--pv-official-bg); padding:var(--s4); }
.occ-phone .occ-pmain{ flex:1; min-width:0; }
.occ-phone .occ-plab{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.08em;
  color:var(--pv-official); font-weight:var(--fw-bold); display:flex; align-items:center; gap:.35rem; }
.occ-phone .occ-plab .ic{ width:13px; height:13px; display:inline-flex; }
.occ-phone .occ-plab .ic svg{ width:100%; height:100%; display:block; }
.occ-phone .occ-num{ font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--ink); letter-spacing:.01em;
  line-height:1.15; margin-top:2px; }
.occ-phone .occ-pwho{ font-size:var(--fs-2xs); color:var(--muted); margin-top:2px; }
.occ-phone .occ-pacts{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
a.occ-call{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  text-decoration:none; font:inherit; font-weight:var(--fw-bold); cursor:pointer;
  border:1px solid var(--brand); background:var(--brand); color:#fff;
  padding:.6rem 1.05rem; border-radius:var(--r-sm); min-height:44px; white-space:nowrap;
  transition:background .14s, box-shadow .14s, transform .05s; }
a.occ-call:hover{ background:var(--brand2); border-color:var(--brand2); box-shadow:var(--sh-sm); }
a.occ-call:active{ transform:translateY(1px); }
a.occ-call .ic{ width:17px; height:17px; display:inline-flex; }
a.occ-call .ic svg{ width:100%; height:100%; display:block; }
/* the LINE flag — a flag, NOT a button (no add-link is constructible v1) */
.occ-flag{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  font-size:var(--fs-2xs); font-weight:var(--fw-semi); color:var(--pv-verified);
  background:var(--pv-verified-bg); border:1px solid var(--pv-verified-ln);
  padding:.28rem .55rem; border-radius:var(--r-pill); }
.occ-flag .ic{ width:13px; height:13px; display:inline-flex; }
.occ-flag .ic svg{ width:100%; height:100%; display:block; }

/* THE NOTE — calm legal/honesty line; ochre WARN for the "can't be recalled" caution */
.occ-note{ display:flex; gap:.55rem; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface2);
  padding:.55rem .7rem; font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.occ-note .ic{ width:16px; height:16px; flex:0 0 16px; margin-top:1px; color:var(--muted); display:inline-flex; }
.occ-note .ic svg{ width:100%; height:100%; display:block; }
.occ-note b{ color:var(--ink); font-weight:var(--fw-semi); }
.occ-note.warn{ background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 38%, transparent); color:var(--ink2); }
.occ-note.warn .ic{ color:var(--warn); } .occ-note.warn b{ color:var(--warn); }

/* the action row under the grower affordance (open copy + button) */
.occ-cta{ display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }
.occ-cta .grow{ flex:1; }
.occ-cta .btn .ic{ width:16px; height:16px; display:inline-flex; margin-right:-.1rem; }
.occ-cta .btn .ic svg{ width:100%; height:100%; display:block; }

/* suppressed / hidden (cancelled deal) — faint inline note */
.oc-contactnone{ display:flex; align-items:center; gap:.45rem;
  border-top:1px dashed var(--line2); padding:.6rem var(--s4);
  font-size:var(--fs-2xs); color:var(--muted); line-height:1.4; }
.oc-contactnone .g{ opacity:.7; }

@media (pointer:coarse){
  .occ-cta .btn, .occ-row .ca .btn, a.occ-call{ min-height:44px; }
}
@media (max-width:480px){
  .occ-row{ align-items:flex-start; }
  .occ-row .ca{ width:100%; }
  .occ-row .ca .btn{ flex:1; justify-content:center; }
  .occ-phone{ align-items:flex-start; }
  .occ-phone .occ-pacts{ width:100%; }
  .occ-phone .occ-pacts a.occ-call{ flex:1; }
}