/* ============================================================
   Product UI — extracted from the GetBack walkthrough decks.
   Scoped under .pui. Every colour is a custom property, so a
   partner skin restyles the whole product UI from brand tokens
   without touching a single line of markup.
   ============================================================ */

.pui {
    --paper:#F7F8F7; --card:#FFFFFF; --ink:#16211F; --muted:#5B7270;
    --teal:#0F3D3E; --teal-soft:#E3ECEA; --amber:#E4A11B; --amber-ink:#7A5406;
    --line:#D8E0DE; --chrome:#EDF1F0;
    --ok:#1E7A46; --ok-bg:#E2F2E8; --info:#175E8F; --info-bg:#E3EEF6;
    --warn:#9A5B0B; --warn-bg:#F8ECD7; --crit:#A33A2A; --crit-bg:#F8E4E0;
    --shadow:0 1px 2px rgba(22,33,31,.06),0 8px 28px rgba(22,33,31,.09);
    --display:"Avenir Next","Segoe UI Variable Display","Segoe UI",-apple-system,"Helvetica Neue",sans-serif;
    --body:"Avenir Next","Segoe UI",-apple-system,"Helvetica Neue",sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  
  color:var(--ink); background:transparent;}
@media (prefers-color-scheme: dark) { .pui {
      --paper:#0D1513; --card:#16211F; --ink:#E8ECEA; --muted:#93A5A2;
      --teal:#8FC1BC; --teal-soft:#1C2B29; --amber:#E4A11B; --amber-ink:#F0C063;
      --line:#283835; --chrome:#1C2926;
      --ok:#6FCB94; --ok-bg:#173226; --info:#7FB6DF; --info-bg:#152B3B;
      --warn:#E0B26A; --warn-bg:#33270F; --crit:#E08A7B; --crit-bg:#361B15;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);
    } }
:root[data-theme="dark"] .pui {
      --paper:#0D1513; --card:#16211F; --ink:#E8ECEA; --muted:#93A5A2;
      --teal:#8FC1BC; --teal-soft:#1C2B29; --amber:#E4A11B; --amber-ink:#F0C063;
      --line:#283835; --chrome:#1C2926;
      --ok:#6FCB94; --ok-bg:#173226; --info:#7FB6DF; --info-bg:#152B3B;
      --warn:#E0B26A; --warn-bg:#33270F; --crit:#E08A7B; --crit-bg:#361B15;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);
    }
:root[data-theme="light"] .pui {
    --paper:#F7F8F7; --card:#FFFFFF; --ink:#16211F; --muted:#5B7270;
    --teal:#0F3D3E; --teal-soft:#E3ECEA; --amber:#E4A11B; --amber-ink:#7A5406;
    --line:#D8E0DE; --chrome:#EDF1F0;
    --ok:#1E7A46; --ok-bg:#E2F2E8; --info:#175E8F; --info-bg:#E3EEF6;
    --warn:#9A5B0B; --warn-bg:#F8ECD7; --crit:#A33A2A; --crit-bg:#F8E4E0;
    --shadow:0 1px 2px rgba(22,33,31,.06),0 8px 28px rgba(22,33,31,.09);
    --display:"Avenir Next","Segoe UI Variable Display","Segoe UI",-apple-system,"Helvetica Neue",sans-serif;
    --body:"Avenir Next","Segoe UI",-apple-system,"Helvetica Neue",sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  }
section.dk .pui, .dk .pui {
      --paper:#0D1513; --card:#16211F; --ink:#E8ECEA; --muted:#93A5A2;
      --teal:#8FC1BC; --teal-soft:#1C2B29; --amber:#E4A11B; --amber-ink:#F0C063;
      --line:#283835; --chrome:#1C2926;
      --ok:#6FCB94; --ok-bg:#173226; --info:#7FB6DF; --info-bg:#152B3B;
      --warn:#E0B26A; --warn-bg:#33270F; --crit:#E08A7B; --crit-bg:#361B15;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);
    }

.pui .browser {
    background:var(--card); border:1px solid var(--line); border-radius:10px;
    box-shadow:var(--shadow); overflow:hidden; font-size:13px;
  }
.pui .browser .bar {
    display:flex; align-items:center; gap:10px; padding:9px 12px;
    background:var(--chrome); border-bottom:1px solid var(--line);
  }
.pui .browser .dots {display:flex; gap:5px}
.pui .browser .dots i {width:9px; height:9px; border-radius:50%; background:var(--line); display:block}
.pui .browser .url {
    flex:1; background:var(--card); border:1px solid var(--line); border-radius:6px;
    padding:3px 10px; font-family:var(--mono); font-size:11.5px; color:var(--muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
.pui .topbar {
    display:flex; align-items:center; gap:10px; padding:10px 16px;
    background:var(--tb,#0F3D3E); color:#fff;
  }
.pui .topbar .lg {display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.02em}
.pui .topbar .lg .mk {width:20px; height:20px; border-radius:var(--tbmk-r,5px); background:var(--tbmk,#E4A11B); color:var(--tbmk-ink,#0F3D3E); display:grid; place-items:center; font-size:12px; font-weight:800}
.pui .topbar .sp {flex:1}
.pui .topbar .u {font-size:11.5px; opacity:.85}
.pui .topbar.ns {background:#264B8F}
.pui .topbar.ns .lg .mk {background:#FFFFFF; color:#264B8F; border-radius:5px}
.pui .s20note {display:block; margin-top:12px; color:var(--muted); font-size:12px; max-width:60ch}
.pui .pad {padding:16px 18px}
.pui .ui-h {display:flex; align-items:baseline; gap:10px; margin-bottom:12px}
.pui .ui-h b {font-family:var(--display); font-size:15px; font-weight:700}
.pui .ui-h span {color:var(--muted); font-size:11.5px}
.pui .btn {
    display:inline-block; background:var(--teal); color:var(--paper); border-radius:6px;
    padding:5px 12px; font-weight:600; font-size:12px;
  }
:root:not([data-theme="light"]) .pui .btn {color:#0D1513}
:root:not([data-theme="dark"]) .pui .btn {color:#fff}
:root[data-theme="light"] .pui .btn {color:#fff}
.pui .btn.ghost {background:transparent; color:var(--teal); border:1px solid var(--teal)}
.pui .btn.amb {background:var(--amber); color:#3A2A05}
.pui table.ui {width:100%; border-collapse:collapse; font-size:12.5px}
.pui table.ui th {
    text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--muted); font-weight:600; padding:6px 10px; border-bottom:1px solid var(--line);
  }
.pui table.ui td {padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.pui table.ui tr:last-child td {border-bottom:none}
.pui table.ui .r {text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
.pui .ref {font-family:var(--mono); font-size:11.5px}
.pui .chip {
    display:inline-block; border-radius:999px; padding:2px 9px; font-size:10.5px; font-weight:600;
    letter-spacing:.02em; white-space:nowrap;
  }
.pui .chip.ok {background:var(--ok-bg); color:var(--ok)}
.pui .chip.info {background:var(--info-bg); color:var(--info)}
.pui .chip.warn {background:var(--warn-bg); color:var(--warn)}
.pui .chip.crit {background:var(--crit-bg); color:var(--crit)}
.pui .chip.teal {background:var(--teal-soft); color:var(--teal)}
.pui .fields {display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:6px}
.pui .fld {display:flex; flex-direction:column; gap:3px}
.pui .fld label {font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600}
.pui .fld .in {border:1px solid var(--line); border-radius:6px; padding:6px 9px; background:var(--paper); font-size:12px; min-height:29px}
.pui .fld.wide {grid-column:1/-1}
.pui .callout {
    margin-top:12px; background:var(--teal-soft); border-radius:8px; padding:10px 14px;
    font-size:12.5px; display:flex; gap:10px; align-items:baseline;
  }
.pui .callout b {color:var(--teal)}
.pui .tl {display:flex; flex-direction:column; gap:0; margin-top:4px}
.pui .tl .st {display:flex; gap:12px; align-items:flex-start; position:relative; padding-bottom:14px}
.pui .tl .st::before {content:""; position:absolute; left:6.5px; top:16px; bottom:0; width:2px; background:var(--line)}
.pui .tl .st:last-child::before {display:none}
.pui .tl .st i {width:15px; height:15px; border-radius:50%; border:2px solid var(--line); background:var(--card); flex:none; margin-top:2px}
.pui .tl .st.done i {background:var(--ok); border-color:var(--ok)}
.pui .tl .st.now i {background:var(--amber); border-color:var(--amber)}
.pui .tl .st b {font-size:12.5px; font-weight:600; display:block}
.pui .tl .st small {color:var(--muted); font-size:11px}
.pui .steps {display:flex; flex-direction:column; gap:6px}
.pui .steps .s {
    display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:8px;
    padding:8px 12px; font-size:12.5px; background:var(--paper);
  }
.pui .steps .s i {
    width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:none;
    font-size:10.5px; font-weight:700; background:var(--line); color:var(--muted); font-family:var(--mono);
  }
.pui .steps .s.done {border-color:var(--ok)}
.pui .steps .s.done i {background:var(--ok-bg); color:var(--ok)}
.pui .steps .s.now {border-color:var(--amber); background:var(--card); box-shadow:var(--shadow)}
.pui .steps .s.now i {background:var(--amber); color:#3A2A05}
.pui .steps .s small {margin-left:auto; color:var(--muted); font-size:10.5px}
.pui .saga {display:flex; flex-direction:column; gap:10px; margin-top:8px}
.pui .saga .row {display:flex; align-items:center; gap:10px}
.pui .saga .node {
    background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 14px;
    box-shadow:var(--shadow); font-size:13px; flex:1;
  }
.pui .saga .node b {display:block; font-size:13.5px}
.pui .saga .node small {color:var(--muted); font-size:11.5px}
.pui .saga .arrow {color:var(--muted); font-size:16px; flex:none}
.pui .saga .node.v {border-left:3px solid var(--teal)}
.pui .saga .node.hi {border-left:3px solid var(--amber)}
.pui .tiles {display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px}
.pui .tile {background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:10px 12px}
.pui .tile small {display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600}
.pui .tile b {font-family:var(--mono); font-size:17px; font-variant-numeric:tabular-nums}
.pui .tile b em {font-style:normal; font-size:11px; color:var(--muted)}
.pui .lines {font-size:12.5px}
.pui .lines .ln {display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--line)}
.pui .lines .ln span:last-child {font-family:var(--mono); font-variant-numeric:tabular-nums}
.pui .lines .ln.total {border-bottom:none; font-weight:700; padding-top:9px}
.pui .lines .ln.total span:last-child {color:var(--ok)}
.pui .pair {display:grid; grid-template-columns:1fr 1fr; gap:20px}
.pui .pair {grid-template-columns:1fr}
.pui .org {display:flex; flex-direction:column; gap:14px; align-items:stretch; margin-top:8px}
.pui .org .lvl {display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.pui .org .box {
    background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 16px;
    box-shadow:var(--shadow); text-align:center; min-width:140px; flex:1;
  }
.pui .org .box b {font-family:var(--display); font-size:13.5px; display:block}
.pui .org .box small {color:var(--muted); font-size:11px}
.pui .org .box.tenant {border-top:3px solid var(--amber); flex:none; min-width:340px}
.pui .org .box.role {border-top:3px solid var(--teal)}
.pui .org .tag {
    display:inline-block; margin-top:6px; font-size:10px; text-transform:uppercase; letter-spacing:.08em;
    font-weight:700; color:var(--amber-ink);
  }
.pui .cred {width:100%; border-collapse:collapse; font-size:14px}
.pui .cred th {text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:8px 12px; border-bottom:2px solid var(--line)}
.pui .cred td {padding:9px 12px; border-bottom:1px solid var(--line)}
.pui .cred td:first-child {font-family:var(--mono); font-size:13px}

/* ---- responsive -------------------------------------------------
   The decks were authored for 1920-wide slides. Below ~760px the
   mockups letterbox rather than shrink to illegibility: they scroll
   inside their own container and the page never scrolls sideways. */
.pui { --pui-scale: 1; }
.pui .browser { max-width: 100%; }
.pui table.ui { width: 100%; }

@media (max-width: 900px) {
  .pui { font-size: 15px; }
  .pui .fields { grid-template-columns: 1fr; }
  .pui .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pui .pair { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* keep wide tables/diagrams readable without breaking the page */
  .pui .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pui .scroll-x > * { min-width: 560px; }
  .pui .tiles { grid-template-columns: 1fr; }
  .pui .saga .row { flex-wrap: wrap; }
  .pui .browser .url { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .pui * { animation: none !important; transition: none !important; }
}