/* Success Market look over Operator's ui_kit.css and program_inventory.css, which stay
   untouched copies. Written for a phone first; wider screens are added at the end. */
:root{
  --site-navy:#012967;--site-gutter-l:max(16px,env(safe-area-inset-left));--site-gutter-r:max(16px,env(safe-area-inset-right));
  --xo-bg:#001C4C;--xo-surface:#05306F;--xo-surface-2:#0C3A80;--xo-surface-3:#16488F;
  --xo-line:#1F4B8E;--xo-line-strong:#4A75B8;--xo-text:#F4F7FD;--xo-text-2:#CBD9F0;--xo-muted:#A9C0E0;
  --xo-accent:#8DB8FF;--xo-accent-hover:#A9CBFF;--xo-accent-soft:#143F86;--xo-focus:#B7D3FF;
  --xo-ok:#86E2B2;--xo-ok-bg:#0A3B46;--xo-ok-line:#2F8F72;
  --xo-warn:#FFD08A;--xo-warn-bg:#3A3430;--xo-warn-line:#B98B45;
  --xo-info:#B7D3FF;--xo-font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--xo-bg);color:var(--xo-text);min-height:100vh;min-height:100dvh;padding-bottom:env(safe-area-inset-bottom);-webkit-tap-highlight-color:transparent}
button,a,summary,select,input{touch-action:manipulation}
p,small{color:var(--xo-text-2)}
h1,h2,h3{letter-spacing:-.01em}
header,section{padding:16px var(--site-gutter-r) 16px var(--site-gutter-l)}
.warning{color:var(--xo-warn)}

/* Controls: 16px text stops iOS zooming into a field; 44px is a comfortable fingertip. */
input,select{font:400 16px/1.3 var(--xo-font);min-height:44px;width:100%;box-sizing:border-box;padding:10px 12px;color:var(--xo-text);background:var(--xo-surface);border:1px solid var(--xo-line-strong);border-radius:8px}
input::placeholder{color:var(--xo-muted);opacity:1}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--xo-focus);outline-offset:2px}
.xo-btn{min-height:44px;padding:9px 14px;border-radius:8px;border-color:var(--xo-line-strong);background:var(--xo-surface-2);text-decoration:none;box-sizing:border-box}
.xo-btn--primary,.xo-btn--primary:hover:not(:disabled){background:#fff;border-color:#fff;color:var(--site-navy)}
.xo-btn--primary:hover:not(:disabled){background:#E4EDFB}

/* Top bar */
.site-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:10px;background:var(--site-navy);border-bottom:1px solid var(--xo-line)}
.site-logo{display:block;flex:none;line-height:0;border-radius:4px}
.site-logo img{display:block;height:34px;width:auto}
.site-user{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;margin-left:auto;color:var(--xo-text-2)}
.site-who{display:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--xo-fs-sm)}
.site-title-block{padding-bottom:12px;background:var(--site-navy)}
.site-title-block h1{margin:0 0 4px;font-size:22px;line-height:1.2}
.site-title-block p{margin:0;font-size:14px}
.site-note{margin:8px 0 10px;font-size:13px;line-height:1.45;max-width:90ch}

/* Snapshot and search */
.site-picker{display:block;margin-bottom:6px;color:var(--xo-text-2);font-size:var(--xo-fs-sm)}
.inv-read p{margin:10px 0 0}
#progress{color:var(--xo-text-2)}
.site-new{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--xo-info)}
.site-title{margin:0 0 12px;font-size:17px;line-height:1.3}
#search{display:block;max-width:none}

/* Groups */
#devices h3{position:sticky;top:0;z-index:2;margin:16px calc(-1 * var(--site-gutter-r)) 6px calc(-1 * var(--site-gutter-l));padding:8px var(--site-gutter-r) 8px var(--site-gutter-l);font-size:15px;background:var(--xo-bg)}
#devices h3 small{margin-left:6px;font-weight:400;color:var(--xo-muted)}

/* Rows open with our own chevron, so a wrapped name lines up properly. */
details{background:var(--xo-surface);border-color:var(--xo-line)}
summary{display:flex;align-items:flex-start;gap:10px;list-style:none;overflow-wrap:anywhere}
summary::-webkit-details-marker{display:none}
summary::before{content:"";flex:none;width:7px;height:7px;margin:7px 3px 0 2px;border-right:2px solid var(--xo-text-2);border-bottom:2px solid var(--xo-text-2);transform:rotate(-45deg);transition:transform .16s ease}
details[open]>summary::before{transform:rotate(45deg)}
.inv-device{margin:6px 0;padding:0;border-radius:10px}
.inv-device>summary{padding:12px;min-height:44px;box-sizing:border-box}
.inv-device>.warning{margin:0 12px 10px}
.inv-device-line{display:block;width:auto;flex:1;min-width:0}
.inv-device-line>b{display:block;font-weight:600;line-height:1.3}
.site-device-meta{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:3px}
.site-device-meta small{color:var(--xo-muted);font-size:13px}
.inv-device-line .xo-pill{margin:7px 0 0}

/* Programs */
.site-program{margin:0 8px 8px;padding:0;background:var(--xo-surface-2);border-radius:8px}
.site-program>summary{padding:11px 10px;font-weight:400}
.site-program-title{flex:1;min-width:0}
.site-program-title b{display:block;font-weight:600;line-height:1.3}
.site-program-title small{display:block;margin-top:2px;font-size:13px;color:var(--xo-text-2)}
.site-program-title small.warning{color:var(--xo-warn);font-weight:600}
.site-program>p{margin:0 10px 8px;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.site-program-info{color:var(--xo-muted)}

/* Clips: position badge on the preview, text beside it. */
.site-materials{list-style:none;margin:0;padding:0 10px 4px;counter-reset:clip}
.site-materials li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:start;margin:0;padding:10px 0;border-top:1px solid var(--xo-line);counter-increment:clip}
.site-thumb{position:relative;display:block;aspect-ratio:1408/960;border-radius:6px;overflow:hidden;background:var(--xo-bg)}
.site-thumb::after{content:counter(clip);position:absolute;top:0;left:0;min-width:20px;padding:1px 5px;box-sizing:border-box;border-bottom-right-radius:6px;background:#001C4CE6;color:#fff;font:600 12px/1.4 var(--xo-font);text-align:center}
.site-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.site-no-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-sizing:border-box;border:1px dashed var(--xo-line-strong);border-radius:6px;color:var(--xo-muted);font-size:12px;line-height:1.1;text-align:center}
.site-material{min-width:0}
.site-material b{display:block;font-weight:600;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.site-material small{display:block;margin-top:3px;font-size:13px;line-height:1.35;color:var(--xo-text-2)}
.site-material .site-client{color:var(--xo-info);font-weight:600}

/* Users: each table row is a card on a phone. */
.site-add{display:grid;gap:8px}
.site-add label{font-size:var(--xo-fs-sm);color:var(--xo-text-2)}
.site-credentials{margin-top:12px;padding:12px;border:1px solid var(--xo-warn-line);border-radius:8px;background:var(--xo-warn-bg)}
.site-credentials p{margin:0 0 8px;color:var(--xo-text)}
.site-credentials code{font-size:16px;user-select:all;overflow-wrap:anywhere}
.site-table table,.site-table tbody,.site-table tr,.site-table td{display:block}
.site-table tr:has(th){display:none}
.site-table tr{margin:0 0 8px;padding:10px 12px;border:1px solid var(--xo-line);border-radius:10px;background:var(--xo-surface)}
.site-table td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;border:0;text-align:right}
.site-table td::before{content:attr(data-label);flex:none;color:var(--xo-muted);font-size:13px;text-align:left}
.site-table td.site-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;padding-top:8px;text-align:left}
.site-table td.site-actions::before{display:none}
.site-actions .xo-btn{flex:1 1 130px}
.site-events{max-height:none}

/* Login */
.site-login{display:grid;place-items:center;box-sizing:border-box;padding:max(24px,env(safe-area-inset-top)) var(--site-gutter-r) max(24px,env(safe-area-inset-bottom)) var(--site-gutter-l);background:radial-gradient(120% 80% at 50% 0%,#0A3C88 0%,var(--site-navy) 45%,var(--xo-bg) 100%)}
.login-card{width:100%;max-width:380px}
.login-logo{display:block;width:min(100%,240px);height:auto;margin:0 auto 28px}
.login-card h1{margin:0 0 4px;font-size:22px;text-align:center}
.login-card>p{margin:0 0 20px;color:var(--xo-text-2);text-align:center}
.login-card label{display:block;margin:14px 0 6px;font-size:var(--xo-fs-sm);color:var(--xo-text-2)}
.login-card input{background:#00215C}
.login-card button{width:100%;margin-top:20px;font-size:15px}
.login-card .login-error{margin:12px 0 0;color:#FFC9CF}

/* Entry logo. Transform and opacity only, about two seconds; see intro.js. */
.site-intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--site-navy);cursor:pointer;-webkit-user-select:none;user-select:none}
.site-intro-logo{width:min(74vw,460px)}
.site-intro-logo svg{display:block;width:100%;height:auto;overflow:visible}
.site-intro-mark,.site-intro-word{transform-box:fill-box;transform-origin:center}
.is-playing .site-intro-mark{animation:site-mark-in 1100ms cubic-bezier(.22,1,.36,1) both}
.is-playing .site-intro-word{animation:site-word-in 620ms cubic-bezier(.22,1,.36,1) 560ms both}
.is-playing .site-intro-logo{animation:site-logo-out 420ms cubic-bezier(.4,0,.7,.2) 1580ms both}
.site-intro.is-playing{animation:site-intro-out 420ms ease-in 1580ms forwards}
.site-intro.is-skipping{animation:site-intro-skip 140ms ease-out forwards}
@keyframes site-mark-in{
  0%{opacity:0;transform:translateX(var(--site-intro-shift,0)) scale(.7)}
  40%{opacity:1;transform:translateX(var(--site-intro-shift,0)) scale(1)}
  52%{transform:translateX(var(--site-intro-shift,0)) scale(1)}
  100%{opacity:1;transform:none}
}
@keyframes site-word-in{from{opacity:0;transform:translateX(calc(var(--site-intro-shift,40px) * -.3))}to{opacity:1;transform:none}}
@keyframes site-logo-out{to{transform:scale(1.05)}}
@keyframes site-intro-out{to{opacity:0}}
@keyframes site-intro-skip{to{opacity:0}}
@keyframes site-page-in{from{transform:translateY(10px)}to{transform:none}}
.site-revealing body>:not(.site-intro):not(script){animation:site-page-in 520ms cubic-bezier(.22,1,.36,1) both}
@media (prefers-reduced-motion:reduce){
  .is-playing .site-intro-mark,.is-playing .site-intro-word,.is-playing .site-intro-logo,.site-revealing body>:not(.site-intro):not(script){animation:none}
  .site-intro.is-playing{animation:site-intro-out 260ms ease 500ms forwards}
  summary::before{transition:none}
}

/* A very narrow phone keeps the text column usable. */
@media (max-width:359px){.site-materials li{grid-template-columns:96px minmax(0,1fr)}.site-logo img{height:30px}}

/* Wider than a phone */
@media (min-width:480px){.site-who{display:block}}
@media (min-width:761px){
  :root{--site-gutter-l:24px;--site-gutter-r:24px}
  .site-logo img{height:38px}
  .xo-btn{min-height:38px}
  input,select{min-height:40px;font-size:15px}
  #snapshot-select{max-width:480px}
  #search{max-width:560px}
  .inv-device-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
  .site-device-meta{margin:0;gap:0 14px}
  .inv-device-line .xo-pill{margin:0 0 0 auto}
  .inv-device>summary{padding:11px 14px}
  summary::before{margin-top:6px}
  .site-program{margin:0 12px 10px}
  .site-program>summary{padding:10px 12px}
  .site-program>p{margin:0 12px 8px}
  .site-materials{padding:0 12px 6px}
  .site-materials li{grid-template-columns:104px minmax(0,1fr);gap:14px;padding:8px 0;align-items:center}
  .site-add{grid-template-columns:auto minmax(0,320px) auto;align-items:center}
  .site-credentials,.site-title-block p{max-width:760px}
  .site-table table{display:table;border-collapse:collapse}
  .site-table tbody{display:table-row-group}
  .site-table tr,.site-table tr:has(th){display:table-row;margin:0;padding:0;border:0;background:none}
  .site-table th,.site-table td,.site-table td.site-actions{display:table-cell;padding:8px;border-bottom:1px solid var(--xo-line);text-align:left;vertical-align:middle}
  .site-table th{color:var(--xo-muted);font-size:13px;font-weight:600}
  .site-table td::before{display:none}
  .site-actions .xo-btn{margin:2px 6px 2px 0}
  .site-events{max-height:50vh;overflow:auto}
}

/* Install offer on a phone */
.site-install{display:flex;align-items:center;gap:10px;margin:10px var(--site-gutter-r) 0 var(--site-gutter-l);padding:10px 12px;background:var(--xo-surface-2);border:1px solid var(--xo-line-strong);border-radius:12px;font-size:14px;line-height:1.35}
.login-card .site-install{margin:16px 0 0}
.site-install p{flex:1 1 auto;min-width:0;margin:0;color:var(--xo-text)}
.site-install-icon{flex:0 0 auto;width:40px;height:40px;border-radius:9px}
.login-card .site-install .site-install-go,.site-install-go{flex:0 0 auto;width:auto;margin:0}
.login-card .site-install .site-install-close,.site-install-close{flex:0 0 auto;width:36px;height:36px;min-height:36px;margin:0;padding:0;background:transparent;border:0;color:var(--xo-text-2);font-size:22px;line-height:1;cursor:pointer}