/* shadowbox_css 18 Oct 2026: salute's shadow box for every gate. Built from salute-herocard.css (the case)
   and salute-uniform.css (the devices); salute keeps its own copy. Colours come from the gate's mem tokens. */
.mem-shadowbox{--sal-card-bg:var(--mem-card-bg,var(--mem-surface,#fff));--sal-border:var(--mem-border,rgba(0,0,0,.12));--sal-t1:var(--mem-t1,inherit);--sal-t2:var(--mem-t2,inherit);--sal-t3:var(--mem-t3,var(--mem-t2,inherit));--sal-gold:var(--mem-accent,var(--mem-primary,#c9a84c));margin:.5rem 0 1rem}
.mem-shadowbox .mem-uniform{padding:.5rem 0}
.mem-shadowbox .mem-uniform-empty{color:var(--ds-t2,#6b6459);font-size:.9rem;max-width:46ch;line-height:1.6}
.mem-shadowbox .mem-uniform-board{display:flex;align-items:center;justify-content:center;gap:1.3rem;flex-wrap:wrap;margin:.25rem auto .9rem}
.mem-shadowbox .mem-uniform-column{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.mem-shadowbox .mem-uniform-rank img{height:132px;width:auto;display:block;margin:0 auto}
.mem-shadowbox .mem-uniform-rank{margin:0}
.mem-shadowbox .mem-uniform-rack{display:flex;flex-direction:column;gap:2px}
.mem-shadowbox .mem-uniform-rack-row{display:flex;gap:2px;justify-content:center}
.mem-shadowbox .mem-uniform-ribbon img{width:110px;height:30px;display:block;object-fit:fill}
.mem-shadowbox .mem-uniform-ribbon.is-rescinded{opacity:.45}
.mem-shadowbox .mem-uniform-list{width:100%;border-collapse:collapse;font-size:.82rem}
.mem-shadowbox .mem-uniform-list th{text-align:left;font-weight:600;color:var(--ds-t2,#6b6459); border-bottom:1px solid var(--ds-border,#ddd8cf);padding:.35rem .5rem}
.mem-shadowbox .mem-uniform-list td{padding:.32rem .5rem;border-bottom:1px solid var(--ds-border-soft,#eee9e0)}
.mem-shadowbox .mem-uniform-rack--unit{margin-top:.45rem;padding-top:.45rem;border-top:1px solid var(--ds-border-soft,#eee9e0)}
.mem-shadowbox .mem-uniform-board{gap:.7rem}
.mem-shadowbox .mem-uniform-rank img{height:90px}
.mem-shadowbox .mem-uniform-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.mem-shadowbox .mem-uniform-badge img{display:block;width:100%;height:100%;object-fit:contain}
.mem-shadowbox .mem-uniform-badge.is-w3{width:240px;height:80px}
.mem-shadowbox .mem-uniform-badge.is-w2{width:160px;height:80px}
.mem-shadowbox .mem-uniform-badge.is-w15{width:120px;height:80px}
.mem-shadowbox .mem-uniform-badge.is-qual{width:120px;height:50px}
.mem-shadowbox .mem-uniform-badge.is-tab{width:280px;height:30px}
.mem-shadowbox .mem-uniform-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end}
.mem-shadowbox .mem-uniform-badges--above{flex-direction:column;align-items:center;justify-content:center;gap:2px;margin-bottom:4px}
.mem-shadowbox .mem-uniform-badges--below{justify-content:center;margin-top:4px}
.mem-shadowbox .mem-uniform-badges--tab{flex-direction:column;gap:4px;align-items:flex-start}
.mem-shadowbox .mem-uniform-shoulder{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:center;flex:0 0 auto}
.mem-shadowbox .mem-uniform-unit{margin:0;display:flex;flex-direction:column;align-items:center;gap:3px;max-width:160px}
.mem-shadowbox .mem-uniform-unit img{display:block;width:auto;height:auto;max-width:130px;max-height:150px;object-fit:contain}
.mem-shadowbox .mem-uniform-unit figcaption{font-size:.62rem;line-height:1.15;text-align:center;color:var(--mem-t2);letter-spacing:.02em;max-width:110px}
.mem-shadowbox .mem-uniform-badge.is-wings{width:240px;height:70px}
.mem-shadowbox .mem-uniform-badge.is-occ{width:240px;height:80px}
.mem-shadowbox .mem-uniform-ribbon.is-askable,.mem-shadowbox .mem-uniform-badge.is-askable,.mem-shadowbox .mem-uniform-rank.is-askable,.mem-shadowbox .mem-uniform-unit.is-askable{cursor:pointer;transition:transform .12s ease,filter .12s ease}
.mem-shadowbox .mem-uniform-ribbon.is-askable:hover,.mem-shadowbox .mem-uniform-badge.is-askable:hover,.mem-shadowbox .mem-uniform-rank.is-askable:hover,.mem-shadowbox .mem-uniform-unit.is-askable:hover{transform:translateY(-2px);filter:brightness(1.12)}
.mem-shadowbox .mem-uniform-ribbon{position:relative;display:inline-block;line-height:0}
.mem-shadowbox .mem-uniform-n{position:absolute;right:2px;bottom:1px;

  font-size:.58rem;font-style:normal;font-weight:800;line-height:1;

  color:#fff;background:rgba(0,0,0,.62);padding:1px 3px;border-radius:2px;}
.mem-shadowbox .mem-uniform-unit.has-tab{gap:0}
.mem-shadowbox .mem-uniform-unit .mem-uniform-unit-tab{display:block;line-height:0;margin:0 0 -1px;position:relative;z-index:1}
.mem-shadowbox .mem-uniform-unit .mem-uniform-unit-tab img{display:block;width:100%;height:auto;max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.mem-shadowbox .mem-uniform-insignia-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:20px;margin-top:8px}
.mem-shadowbox .mem-uniform-insignia-row .mem-uniform-badges--below{margin-top:0;align-items:flex-end}
.mem-shadowbox .mem-uniform-badge.is-csib{width:100px;height:150px}
.mem-shadowbox .mem-uniform-badge.is-id{width:90px;height:90px}
.mem-shadowbox .mem-uniform-shoulder .mem-uniform-badges--tab{flex-basis:100%;align-items:center}
.mem-shadowbox .mem-uniform-shoulder .mem-uniform-badge.is-tab{width:130px;height:36px}
.mem-shadowbox .mem-uniform-badges--qual{justify-content:center;gap:12px;margin:10px 0 6px}
.mem-shadowbox .mem-uniform-badges--qual .mem-uniform-badge.is-qual{width:170px;height:70px}
.mem-shadowbox .mem-uniform-badges--qual .mem-uniform-badge.is-id{width:120px;height:120px}

/* ── The shadow box ─────────────────────────────────────────────────────
   The devices stack, top to bottom, in the order a man is read: his rank, his
   combat badge, his rack, his qualification badges, his tab.
   The board has three children - the rank, the column of badges and rack, and
   the tab - so flex-direction:column is what stacks them. Setting it to row to
   make room for his label turned those three into three columns, which is not
   a shadow box, it is a shelf. His label is positioned out of the stack
   instead. */
.mem-shadowbox{padding:0;width:100%}

.mem-shadowbox .mem-uniform-board{
  position:relative;
  background:var(--sal-card-bg);   /* follows the theme - 10 Oct 2026 */
  border:1px solid var(--sal-border);border-radius:3px;
  box-shadow:inset 0 0 0 10px rgba(0,0,0,.05), inset 0 2px 10px rgba(0,0,0,.09), 0 4px 20px rgba(0,0,0,.14);
  /* Two columns. Left: his rank device with his text under it, top-aligned
     and left-justified. Right: everything he wore, stacked and centred in
     what is left. A rule the full height between them. */
  display:grid;grid-template-columns:auto 1fr;
  align-items:start;width:100%;row-gap:0;
  padding:clamp(1.8rem,4vw,3.4rem);
  gap:clamp(1rem,2.2vw,1.8rem)}

/* His label, out of the stack and against the left edge. */
/* The left column: his rank, then his name under it. */
/* One cell on the left, holding his rank with his name directly under it.
   Not two rows - one column that the two elements flow down. */
.mem-shadowbox .mem-uniform-rank{grid-column:1;grid-row:1;justify-self:start;
  margin:0 0 .9rem}
.mem-sbox-plate{grid-column:1;grid-row:2;
  display:flex;flex-direction:column;gap:.5rem;white-space:nowrap;
  text-align:left;align-items:flex-start;margin:0}
/* The rule between the columns, drawn once by the grid rather than on each
   element, so it runs unbroken the whole height. */
.mem-shadowbox .mem-uniform-board{
  column-gap:0}
/* The rule drawn once, by the board, not on each element - a border on two
   elements breaks wherever they break and leaves a gap between them. This is
   one line down the whole height of the case. */
.mem-shadowbox .mem-uniform-rank,
.mem-sbox-plate{padding-right:clamp(1.5rem,3vw,2.5rem);border-right:none}
.mem-shadowbox .mem-uniform-board::after{
  content:"";position:absolute;top:clamp(1.8rem,4vw,3.4rem);bottom:clamp(1.8rem,4vw,3.4rem);
  left:0;width:1px;background:rgba(0,0,0,.14);
  transform:translateX(var(--sbox-rule,0))}
/* The right column: everything else, stacked and centred. */
.mem-shadowbox .mem-uniform-board > *:not(.mem-sbox-plate):not(.mem-uniform-rank){
  grid-column:2;justify-self:center}
.mem-shadowbox .mem-uniform-column{grid-row:1 / span 2;align-self:center}
.mem-sbox-name{font-size:1.1rem;font-weight:800;line-height:1.3;color:var(--sal-t1)}
.mem-sbox-rank{font-size:.9rem;color:var(--svc-primary,var(--sal-gold));font-weight:600}
.mem-sbox-branch{font-size:.82rem;color:var(--sal-t2)}
.mem-sbox-years{font-size:.76rem;color:var(--sal-t3);letter-spacing:.06em}
.mem-sbox-unit{font-size:.76rem;color:var(--sal-t3);margin-top:.3rem}

/* The devices sized to each other. */
.mem-shadowbox .mem-uniform-column{display:flex;flex-direction:column;align-items:center;
  gap:clamp(.8rem,1.8vw,1.5rem)}
.mem-shadowbox .mem-uniform-rank img{height:clamp(120px,14vw,220px);width:auto}
.mem-shadowbox .mem-uniform-ribbon img{width:clamp(72px,7.5vw,116px);   /* smaller - 10 Oct 2026 */height:auto;aspect-ratio:110/30}
.mem-shadowbox .mem-uniform-rack{gap:4px}
.mem-shadowbox .mem-uniform-rack-row{gap:4px}
.mem-shadowbox .mem-uniform-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.mem-shadowbox .mem-uniform-badge{margin:0}
.mem-shadowbox .mem-uniform-badge.is-w3{width:clamp(210px,23vw,340px);height:auto;aspect-ratio:3/1}

@media (max-width:820px){
  .mem-sbox-plate{position:static;transform:none;white-space:normal;
    text-align:center;align-items:center;width:100%;
    padding:0 0 1.1rem;border-right:none;border-bottom:1px solid rgba(0,0,0,.14)}
}




/* the column rule is placed by salute's script; without it, a border on the left column instead */
.mem-shadowbox .mem-uniform-board::after{display:none}
.mem-sbox-agency{font-size:.82rem;color:var(--sal-t2)}
@media (max-width:820px){.mem-shadowbox .mem-uniform-board{grid-template-columns:1fr}.mem-shadowbox .mem-uniform-board > *{grid-column:1 !important;justify-self:center !important}.mem-shadowbox .mem-uniform-rank{justify-self:center}.mem-shadowbox .mem-sbox-plate{border-right:none}}

/* shadowbox_fit 18 Oct 2026: the case fits what he wore. A man with only his rank gets a small case,
   centred, not a page-wide empty one; the rule between columns only when there is a second column. */
.mem-shadowbox .mem-uniform-board{width:100%} /* shadowbox_full 18 Oct 2026: the case fills the width */
.mem-shadowbox .mem-uniform-rank img{height:auto !important;width:auto !important;max-height:110px;max-width:220px;object-fit:contain}
.mem-shadowbox .mem-uniform-board:has(> :not(.mem-sbox-plate):not(.mem-uniform-rank)) .mem-sbox-plate,
.mem-shadowbox .mem-uniform-board:has(> :not(.mem-sbox-plate):not(.mem-uniform-rank)) .mem-uniform-rank{border-right:1px solid rgba(0,0,0,.14)}
.mem-shadowbox .mem-uniform-board:not(:has(> :not(.mem-sbox-plate):not(.mem-uniform-rank))){grid-template-columns:auto}
.mem-shadowbox .mem-uniform-board:not(:has(> :not(.mem-sbox-plate):not(.mem-uniform-rank))) .mem-sbox-plate,
.mem-shadowbox .mem-uniform-board:not(:has(> :not(.mem-sbox-plate):not(.mem-uniform-rank))) .mem-uniform-rank{padding-right:0}
/* shadowbox_full: a man with only his rank - the case still fills the width, his rank and plate centred in it */
.mem-shadowbox .mem-uniform-board:not(:has(> :not(.mem-sbox-plate):not(.mem-uniform-rank))){justify-content:center;justify-items:center}
.mem-shadowbox .mem-uniform-board:not(:has(> :not(.mem-sbox-plate):not(.mem-uniform-rank))) .mem-uniform-rank{justify-self:center}
.mem-shadowbox .mem-uniform-board:not(:has(> :not(.mem-sbox-plate):not(.mem-uniform-rank))) .mem-sbox-plate{align-items:center;text-align:center}