/* Beyond Memories Admin: BM's own components on top of the vendored shell. Tokens only (bm-tokens.css). */
.skip{position:absolute; left:8px; top:-60px; z-index:200; background:var(--gold); color:var(--navy); padding:10px 16px; border-radius:var(--pill); font-weight:600; text-decoration:none}
.skip:focus{top:8px}
html.locked, html.locked body{overflow:hidden}
#gate{flex-direction:column}
#gate .gatelogo{margin-top:auto} #gate .box{margin:0 0 auto}
.wrap{max-width:1240px}
.pagehead h1:focus{outline:none}
.pagehead h1:focus-visible{outline:2px solid var(--navy); outline-offset:4px}

/* shared */
.pill.gold{background:var(--gold-soft); color:var(--gold-ink)}
.pills{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:2px 0 0}
.small{font-size:12.5px}
.sub{display:block; font-size:12px; font-weight:400}
.stamp{margin:-8px 0 14px; font-size:13px}
.foot{font-size:12.5px; border-top:1px solid var(--line); padding:10px 18px !important}
.lead{padding:12px 18px 0 !important; font-size:13.5px}
.subh{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0; padding:14px 18px 8px; border-top:1px solid var(--line)}
.zero{color:var(--ink-3)}
.chipn{display:inline-block; min-width:18px; margin-left:4px; padding:0 6px; border-radius:var(--pill); background:var(--chip); color:var(--ink); font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"] .chipn{background:var(--gold); color:var(--navy)}
.chip.alert .chipn{background:var(--risk-soft); color:var(--risk)}
.chip.alert[aria-pressed="true"] .chipn{background:var(--paper); color:var(--risk)}
.rowlink{white-space:nowrap; appearance:none; border:0; background:none; padding:0; font:inherit; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
.rowlink:hover{text-decoration-color:var(--ink)}
.tbl th[scope="row"]{text-align:left; font-weight:500; font-size:13.5px; letter-spacing:0; text-transform:none; color:var(--ink); background:none; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl tr.hl th, .tbl tr.hl td{background:var(--gold-soft)}
.tbl tr.totrow th, .tbl tr.totrow td{background:var(--surface-2); font-weight:600}
.tbl .rate{font-weight:600}
.pager{display:flex; align-items:center; justify-content:center; gap:12px; margin:4px 0 24px}
.toolbar .pick{font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--field); border-radius:10px; padding:7px 10px; min-width:0; max-width:100%}
.toolbar.pad0{padding:12px 18px 4px; margin:0}
.filters{gap:10px 14px}
.fl{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); font-weight:500}
.seg{display:inline-flex; gap:4px}
.seg .chip{padding:4px 11px; font-size:12.5px}
.hide-md{}
@media (max-width:1180px){ .tbl .hide-md{display:none} }

/* Home */
.homegrid{display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr); gap:0 18px; align-items:start}
.homegrid .col{min-width:0}
@media (max-width:1180px){ .homegrid{grid-template-columns:minmax(0,1fr)} }
.cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card .s{margin-top:2px}
.dl{font-weight:600; font-variant-numeric:tabular-nums}
.dl.up{color:var(--ok)} .dl.down{color:var(--risk)}
.cmp th[scope="row"] .pill{margin-top:4px}
.launch{color:var(--gold-ink); font-weight:600; font-size:12.5px; white-space:nowrap}
.rail .launch, .topbar .launch{color:var(--gold)}
.tbl tr.launchrow th, .tbl tr.launchrow td{box-shadow:inset 0 2px 0 var(--gold)}
.hours td.mk, .hours th.mk{padding-left:6px; padding-right:10px; width:1%}
.status-list b .launch{font-size:inherit}

/* Orders: the drawer */
.kv.top{margin:14px 0 0}
.lines{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.line{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:12px 14px}
.lhead{display:flex; gap:12px; justify-content:space-between; align-items:flex-start}
.lt{min-width:0} .lt b{font-weight:600}
.lm{flex:none; text-align:right}
.ldisc{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 12px; font-size:13px}
.pvs{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 0}
.pv{margin:0; width:132px}
.pv img{display:block; width:132px; height:132px; object-fit:contain; border-radius:10px; background:var(--navy); border:1px solid var(--line)}
.pv figcaption{display:flex; justify-content:space-between; gap:6px; font-size:12px; color:var(--ink-2); margin-top:4px}
.pv.broken img{visibility:hidden}
.pv.broken > a{display:block; position:relative; width:132px; height:132px; border-radius:10px; background:var(--surface-2); border:1px dashed var(--line-2)}
.pv.broken > a::after{content:"Picture not loaded"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; font-size:12px; color:var(--ink-3)}
.attrs{display:grid; grid-template-columns:minmax(0,170px) minmax(0,1fr); gap:6px 12px; margin:12px 0 0; font-size:13.5px}
.attr{display:contents}
.attr dt{color:var(--ink-3)} .attr dd{margin:0; overflow-wrap:anywhere; font-weight:500}
.totals dd{text-align:left}
.addr{margin:0; line-height:1.5}
.olines{list-style:none; margin:0; padding:0}
.olines li{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; padding:9px 0; border-top:1px solid var(--line)}
.olines li:first-child{border-top:0}
@media (max-width:520px){ .attrs{grid-template-columns:minmax(0,1fr)} .attr dd{margin-bottom:6px} .kv{grid-template-columns:96px minmax(0,1fr)} .pv, .pv img, .pv.broken > a{width:120px} .pv img, .pv.broken a{height:120px} }

/* Discounts */
.offers{list-style:none; margin:0; padding:6px 0 0}
.offer{padding:12px 18px; border-top:1px solid var(--line)}
.offer:first-child{border-top:0}
.ohead{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.ohead b{font-weight:600}
.offer p{margin:4px 0 0; font-size:13.5px}
.offer .link{font-size:inherit}

/* phones and tablets */
@media (max-width:860px){
  .pagehead{margin:0 0 10px}
  .stamp{margin:0 0 10px}
  .panel > h2{flex-wrap:wrap}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .card{padding:12px 14px} .card .v{font-size:24px} .card .s{font-size:12px}
  .drawer-box{padding:18px 16px 36px}
}
@media (max-width:520px){
  .toolbar .search{flex-basis:100%}
  .toolbar #ofind .btn, #cfind .btn{flex:1 1 auto}
  .filters .fl{flex:1 1 140px} .filters .pick{flex:1 1 auto}
  .tbl td, .tbl th, .tbl th[scope="row"]{padding:9px 8px}
  .tbl{font-size:13px}
  .lhead{flex-wrap:wrap}
}

/* an .sr label inside a scrolling table must stay inside it (absolute children escape a non-positioned scroller) */
.scroll{position:relative}
.show-sm.pills{display:none}
@media (max-width:860px){ .tbl .show-sm.pills{display:flex} }
/* Team on phones: one card per person */
@media (max-width:520px){
  .tbl.staff thead{display:none}
  .tbl.staff, .tbl.staff tbody{display:block}
  .tbl.staff tr{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line)}
  .tbl.staff tr:last-child{border-bottom:0}
  .tbl.staff td{display:block; padding:0 !important; border:0}
  .tbl.staff td:first-child{grid-column:1 / -1}
  .tbl.staff td.hide-sm{display:none}
  .tbl.staff td[data-l]::before{content:none}
  .tbl.staff td:last-child{grid-column:1 / -1}
  .tbl.staff .rowacts{justify-content:flex-start; margin:0}
  .tbl.staff .rolepick{width:100%}
}