/* ============================================================================
   ORCA DEVS — pos.css
   The Orca POS section: the trade switcher and the till prototype inside it.

   The colours here are not invented. They are the product's own tokens, from
   shared/src/theme.css in the ORCA-POS repo: the amber is the logo flame used
   as a FILL with near-black on top, and the four space states are the fixed,
   colour-blind-safe set the till uses and never reuses for anything else. The
   old deep red is gone from the product, so it is gone from here too.
   ========================================================================== */
.pos-sec{ background:var(--paper-2); border-block:1px solid var(--line-2) }

.pos-demo{
  --o-brand:#f09c30; --o-brand-text:#a85d00; --o-on-brand:#16181c;
  --o-canvas:#faf8f5; --o-card:#ffffff; --o-raised:#f5f2ed;
  --o-line:#e7e1d8; --o-line-soft:#f0ece5;
  --o-ink:#16181c; --o-ink-2:#5c6068; --o-ink-3:#8b9098;
  --o-ok:#0e7a4e; --o-ok-tint:#dcf3e8;
  --o-warn:#a85d00; --o-warn-tint:#fdf4e6;
  --o-bad:#c4321e;  --o-bad-tint:#fbe8e4;
  --o-run:#d9e9fb;  --o-run-edge:#3d84cc;
  --o-bill:#d6f0e2; --o-bill-edge:#26a05c;
  --o-paid:#fdeec2; --o-paid-edge:#a87c10;
  --o-res:#e9dff8;  --o-res-edge:#8a63c4;

  margin-top:clamp(26px,3.4vw,40px);
}

/* ------------------------------------------------------------------ tabs */
.pd-tabs{
  display:flex; flex-wrap:wrap; gap:7px;
  margin-bottom:clamp(16px,2vw,22px);
}
.pd-tab{
  padding:8px 15px; border-radius:var(--pill);
  border:1px solid var(--line-2); background:var(--paper);
  font-size:13.5px; font-weight:560; color:var(--ink-2); cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .18s var(--ease);
}
.pd-tab:hover{ color:var(--ink); border-color:var(--line); transform:translateY(-1px) }
.pd-tab[aria-selected="true"]{
  background:var(--o-brand); border-color:var(--o-brand); color:var(--o-on-brand);
  font-weight:680;
}

/* -------------------------------------------------------------- the layout */
.pd-body{
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  align-items:start;
}

/* ------------------------------------------------------------- the till */
.pd-stage{
  background:var(--o-canvas);
  border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh-2);
  container-type:inline-size;
  min-width:0;
}
.pd-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 13px; background:var(--o-card);
  border-bottom:1px solid var(--o-line);
}
.pd-brand{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.07em;
  background:var(--o-brand); color:var(--o-on-brand);
  padding:3px 8px; border-radius:5px;
}
.pd-who{ font-size:13px; font-weight:650; color:var(--o-ink); letter-spacing:-.01em }
.pd-net{ margin-left:auto; font-family:var(--mono); font-size:9.5px; color:var(--o-ink-3) }

.pd-screen{ padding:12px; display:grid; gap:10px }

/* zone strip, shared by the grid / time / job screens */
.pd-zones{ display:flex; flex-wrap:wrap; align-items:center; gap:5px }
.pd-zones i{
  font-style:normal; font-size:11px; font-weight:600; white-space:nowrap;
  padding:4px 10px; border-radius:var(--pill);
  background:var(--o-raised); color:var(--o-ink-2);
}
.pd-zones i.on{ background:var(--o-brand); color:var(--o-on-brand) }
.pd-rate{
  margin-left:auto; font-style:normal; font-family:var(--mono);
  font-size:10.5px; font-weight:500; color:var(--o-brand-text);
  background:var(--o-warn-tint); padding:4px 9px; border-radius:var(--pill);
}

/* a floor of spaces */
.pd-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px }
.pd-t{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  padding:9px 10px; border-radius:10px;
  background:var(--o-card); border:1px solid var(--o-line);
}
.pd-t b{ font-size:12.5px; font-weight:750; letter-spacing:-.01em; color:var(--o-ink) }
.pd-t i{ font-style:normal; font-family:var(--mono); font-size:11px; color:var(--o-ink-2) }
.pd-t u{
  text-decoration:none; font-size:8.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; opacity:.75;
}
.pd-t.pd-free{ background:var(--o-card); color:var(--o-ink-3) }
.pd-t.pd-free b, .pd-t.pd-free i{ color:var(--o-ink-3) }
.pd-run { background:var(--o-run);  border-color:color-mix(in srgb, var(--o-run-edge) 32%, transparent) }
.pd-bill{ background:var(--o-bill); border-color:color-mix(in srgb, var(--o-bill-edge) 32%, transparent) }
.pd-paid{ background:var(--o-paid); border-color:color-mix(in srgb, var(--o-paid-edge) 32%, transparent) }
.pd-res { background:var(--o-res);  border-color:color-mix(in srgb, var(--o-res-edge) 32%, transparent) }
.pd-t.pd-run b, .pd-t.pd-run i, .pd-t.pd-run u{ color:#0b4a7a }
.pd-t.pd-bill b, .pd-t.pd-bill i, .pd-t.pd-bill u{ color:#14603c }
.pd-t.pd-paid b, .pd-t.pd-paid i, .pd-t.pd-paid u{ color:#6b4e06 }
.pd-t.pd-res b, .pd-t.pd-res i, .pd-t.pd-res u{ color:#4b2a73 }

.pd-legend{
  display:flex; flex-wrap:wrap; gap:4px 13px;
  font-family:var(--mono); font-size:9.5px; color:var(--o-ink-2);
  padding-top:2px;
}
.pd-legend span{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap }
.pd-legend span::before{
  content:''; width:10px; height:10px; border-radius:3px; border:1px solid rgba(0,0,0,.12);
}
.pd-legend .pd-run::before { background:var(--o-run) }
.pd-legend .pd-bill::before{ background:var(--o-bill) }
.pd-legend .pd-paid::before{ background:var(--o-paid) }
.pd-legend .pd-res::before { background:var(--o-res) }

/* spaces charged by time */
.pd-time{ display:grid; gap:6px }
.pd-tr{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  padding:9px 11px; border-radius:10px;
  background:var(--o-card); border:1px solid var(--o-line);
}
.pd-tr b{ font-size:12.5px; font-weight:700; color:var(--o-ink); min-width:0 }
.pd-tr em{
  font-style:normal; font-family:var(--mono); font-size:12px;
  font-variant-numeric:tabular-nums; color:var(--o-ink-2);
}
.pd-tr u{ text-decoration:none; font-size:11px; color:var(--o-ink-2); white-space:nowrap }
.pd-tr i{
  font-style:normal; font-size:8.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 8px; border-radius:var(--pill);
  background:var(--o-raised); color:var(--o-ink-2); white-space:nowrap;
}
.pd-tr.pd-run { background:var(--o-run) }
.pd-tr.pd-run b, .pd-tr.pd-run em, .pd-tr.pd-run u{ color:#0b4a7a }
.pd-tr.pd-run i{ background:rgba(61,132,204,.2); color:#0b4a7a }
.pd-tr.pd-pre { background:var(--o-paid) }
.pd-tr.pd-pre b, .pd-tr.pd-pre em, .pd-tr.pd-pre u{ color:#6b4e06 }
.pd-tr.pd-pre i{ background:rgba(168,124,16,.2); color:#6b4e06 }
.pd-tr.pd-free b, .pd-tr.pd-free em, .pd-tr.pd-free u{ color:var(--o-ink-3) }

/* a bill pad at a counter */
.pd-scan{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:10px;
  border:1px dashed color-mix(in srgb, var(--o-brand) 55%, var(--o-line));
  background:var(--o-warn-tint); color:var(--o-brand-text);
  font-size:12px; font-weight:560;
}
.pd-pad{
  background:var(--o-card); border:1px solid var(--o-line);
  border-radius:10px; padding:11px 13px;
}
.pd-ph{
  display:flex; justify-content:space-between; gap:10px; padding-bottom:8px;
  border-bottom:1px solid var(--o-line-soft);
  font-family:var(--mono); font-size:10.5px; color:var(--o-ink-3);
}
.pd-line{
  display:grid; grid-template-columns:minmax(0,1fr) auto 78px;
  gap:10px; align-items:baseline; padding:6px 0; font-size:12.5px; color:var(--o-ink);
}
.pd-line em{ font-style:normal; font-family:var(--mono); font-size:11px; color:var(--o-ink-3) }
.pd-line b{
  text-align:right; font-family:var(--mono); font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.pd-sep{ height:1px; background:var(--o-line); margin:6px 0 2px }
.pd-sub b{ font-weight:700 }
.pd-mut{ color:var(--o-ink-3) }
.pd-mut b{ font-family:inherit; font-size:11.5px; font-weight:500 }
.pd-tot{ font-size:14px; font-weight:750; color:var(--o-ink); padding-top:4px }
.pd-tot b{ font-size:14px; font-weight:750 }
.pd-pay{ display:flex; gap:7px; flex-wrap:wrap }
.pd-btn{
  padding:9px 16px; border-radius:9px; font-size:12.5px; font-weight:640;
  background:var(--o-card); border:1px solid var(--o-line); color:var(--o-ink-2);
}
.pd-btn.pd-pri{
  background:var(--o-brand); border-color:var(--o-brand); color:var(--o-on-brand);
  margin-left:auto;
}

/* work in, work out */
.pd-jobs{ display:grid; gap:6px }
.pd-job{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"id who state" "desc desc state";
  padding:9px 11px; border-radius:10px;
  background:var(--o-card); border:1px solid var(--o-line);
}
.pd-job b{ grid-area:id; font-family:var(--mono); font-size:11.5px; color:var(--o-ink) }
.pd-job em{ grid-area:who; font-style:normal; font-size:12.5px; font-weight:640; color:var(--o-ink) }
.pd-job > span{ grid-area:desc; font-size:11.5px; color:var(--o-ink-2); min-width:0 }
.pd-job i{
  grid-area:state; font-style:normal; font-size:8.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  padding:4px 9px; border-radius:var(--pill);
  background:var(--o-raised); color:var(--o-ink-2);
}
.pd-j-in    i{ background:var(--o-run);  color:#0b4a7a }
.pd-j-ready i{ background:var(--o-bill); color:#14603c }
.pd-j-unpaid{ border-color:color-mix(in srgb, var(--o-bad) 40%, transparent) }
.pd-j-unpaid i{ background:var(--o-bad-tint); color:var(--o-bad) }
.pd-j-done  i{ background:var(--o-raised); color:var(--o-ink-3) }
.pd-j-done b, .pd-j-done em, .pd-j-done > span{ opacity:.6 }

.pd-note{
  margin:0; font-size:11.5px; line-height:1.55; color:var(--o-ink-2);
  background:var(--o-raised); border-radius:9px; padding:9px 11px;
}

/* --------------------------------------------------------------- the rail */
.pd-side{ display:grid; gap:14px; align-content:start; min-width:0 }
.pd-suits{
  margin:0; font-family:var(--mono); font-size:11px; line-height:1.7;
  color:var(--ink-3); letter-spacing:.01em;
}
.pd-block{
  background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:14px 16px 15px;
}
.pd-block h4{
  margin:0 0 10px; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
}
.pd-words{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.pd-words li{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:13px; padding-bottom:6px; border-bottom:1px solid var(--line-3);
}
.pd-words li:last-child{ border-bottom:0; padding-bottom:0 }
.pd-words span{ color:var(--ink-3) }
.pd-words b{ font-weight:680; color:var(--ink) }
.pd-caps{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.pd-caps li{ display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.45 }
.pd-caps li svg{ flex-shrink:0; margin-top:3px }
.pd-caps li.yes{ color:var(--ink-2) } .pd-caps li.yes svg{ color:var(--kelp) }
.pd-caps li.no{ color:var(--ink-4) }  .pd-caps li.no svg{ color:var(--ink-4) }

/* ---------------------------------------------------------------- narrow */
@container (max-width: 460px){
  .pd-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px }
  .pd-t{ padding:7px 8px }
  .pd-t u{ display:none }
  .pd-tr{ grid-template-columns:minmax(0,1fr) auto auto; gap:8px }
  .pd-tr u{ display:none }
  .pd-line{ grid-template-columns:minmax(0,1fr) auto 64px }
}
@container (max-width: 330px){
  .pd-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pd-zones i:not(.on){ display:none }
}
@media (max-width: 940px){
  .pd-body{ grid-template-columns:1fr }
}
@media (max-width: 560px){
  .pd-tab{ padding:7px 12px; font-size:12.5px }
  .pd-tabs{ gap:6px }
}

/* ------------------------------------------------------- the four surfaces */
.pos-parts{
  margin-top:clamp(24px,3vw,36px);
  display:grid; gap:clamp(12px,1.5vw,18px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.pp-part{
  position:relative; padding:clamp(18px,2vw,22px) clamp(16px,1.8vw,20px);
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.pp-part::before{
  content:''; position:absolute; inset:0 auto auto 0; width:100%; height:2px;
  border-radius:var(--r-sm) var(--r-sm) 0 0; background:#f09c30; opacity:.8;
}
.pp-n{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ink-4);
}
.pp-part h3{
  margin:6px 0 7px; font-size:1rem; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); line-height:1.2;
}
.pp-part p{ margin:0; font-size:13px; line-height:1.58; color:var(--ink-3) }

.pos-cta{
  margin-top:clamp(22px,2.6vw,30px);
  display:flex; flex-wrap:wrap; gap:12px;
}

@media (max-width: 940px){ .pos-parts{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width: 560px){
  .pos-parts{ grid-template-columns:1fr }
  .pos-cta{ flex-direction:column; align-items:stretch }
  .pos-cta .btn{ width:100% }
}