/* customer360: doc 208 item 1, Customer 360: one customer on one page, with one timeline. A PREVIEW screen's own styles, loaded only where it is switched on.
   Doc 202's glass through app.css's tokens and BO-UI's shared classes; every rule here is this screen's (c360-). No side
   stripes; status is a dot and a label. */

/* The header: who, which lane, and the actions. */
.c360-who{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.4rem 1.2rem;margin:0 0 1rem}
.avatar.c360-av{width:64px;height:64px;font:400 1.6rem/1 var(--austin);text-transform:none}
.avatar.c360-av.sm{width:30px;height:30px;font-size:.8rem}
.c360-id{min-width:0}
.c360-id .eyebrow{margin-bottom:.35rem}
.c360-id h1{margin:0 0 .35rem;font-size:clamp(2.1rem,3.2vw,2.9rem);overflow-wrap:anywhere}
.c360-id .ui2-head{margin:0}
.c360-lead{margin:0;color:var(--lead);font-size:.95rem;line-height:1.45;max-width:40rem}
.c360-acts{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}
.c360-acts .btn .ui2-icon{width:16px;height:16px}
.c360-status{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:0 0 1.1rem;font-size:.88rem}
.c360-status .st{white-space:normal}

/* Tabs and the timeline's source filters: plain words with a count, the current one on a soft fill. */
.c360-tabs,.c360-views{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 1.2rem;padding:0 0 .9rem;border-bottom:1px solid var(--row)}
.c360-views{display:inline-flex;padding:.3rem;border:1px solid var(--line);border-radius:999px;background:rgba(8,14,30,.35)}
.c360-tabs a,.c360-views a{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:0 1rem;border-radius:999px;color:var(--lead);
  font:600 .88rem/1 var(--sans);text-decoration:none;border:1px solid transparent}
.c360-tabs a:hover,.c360-views a:hover{color:#fff;background:rgba(255,255,255,.05)}
.c360-tabs a[aria-current=page],.c360-views a[aria-current=page]{color:#fff;background:rgba(50,95,255,.28);border-color:rgba(124,152,255,.45)}
:is(.c360-tabs,.c360-views,.c360-chip,.c360-days) .n{font-weight:400;color:var(--quiet);font-variant-numeric:tabular-nums}
.c360-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;margin:0 0 1rem}
.c360-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.c360-chip{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:0 .85rem;border:1px solid rgba(209,221,255,.2);border-radius:999px;
  background:rgba(255,255,255,.04);color:#eef2fb;font:500 .8rem/1 var(--sans);cursor:pointer}
.c360-chip:hover{background:rgba(255,255,255,.08)}
.c360-chip[aria-pressed=true]{background:rgba(50,95,255,.28);border-color:rgba(124,152,255,.5)}

/* Tiles and the two columns. */
.c360-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0 0 1rem}
.c360-tiles .card{margin:0}
.c360-tiles .stat.attn dd{color:var(--warn)}
.c360-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1rem;align-items:start}
.c360-main,.c360-side{display:grid;gap:1rem;min-width:0}
.c360-main > .card,.c360-side > .card{margin:0}
.c360-h{margin:0 0 1rem;font:500 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)}
.c360-chead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem;margin:0 0 1rem}
.c360-chead .c360-h{margin:0}
.c360-more{display:inline-flex;align-items:center;gap:.4rem;color:#fff;font:600 .82rem/1 var(--sans);text-decoration:none}
.c360-more .ui2-icon{width:15px;height:15px}

/* What waits on us. */
.c360-wait{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem 1.2rem;align-items:center;padding:.85rem 0;border-top:1px solid var(--row)}
.c360-wait:first-of-type{border-top:0;padding-top:0}
.c360-wait b{display:block;font-weight:500;color:#fff}
.c360-waited{font-size:.82rem;color:var(--warn);white-space:nowrap}

/* The journey from paid to first payout, one line. */
.c360-journey{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0 0 .6rem;padding:0;list-style:none}
.c360-journey li{padding:0 .5rem 0 0;font-size:.8rem;color:var(--muted);min-width:0}
.c360-journey li::before{content:"";display:block;height:4px;border-radius:4px;margin:0 0 .7rem;background:rgba(209,221,255,.14)}
.c360-journey li.done::before{background:var(--teal)}
.c360-journey li.now::before{background:linear-gradient(90deg,var(--azure) 55%,rgba(209,221,255,.14) 55%)}
.c360-journey span{display:block}
.c360-journey .sub{margin-top:.1rem}
.c360-journey b{display:block;font:400 1rem/1.15 var(--austin);color:#fff;margin-bottom:.2rem}
.c360-journey li.next b,.c360-journey li.skip b{color:var(--quiet)}

/* An event: time, icon, words, source. */
.c360-feed{list-style:none;margin:0;padding:0}
.c360-ev{display:grid;grid-template-columns:3.4rem 32px minmax(0,1fr) auto;gap:.2rem .9rem;align-items:start;padding:.7rem 0;position:relative}
.c360-ev time{font-size:.8rem;color:var(--quiet);padding-top:.45rem;font-variant-numeric:tabular-nums}
.c360-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(209,221,255,.2);
  background:rgba(8,14,30,.55);color:var(--icon)}
.c360-ic .ui2-icon{width:15px;height:15px}
.c360-ev.no .c360-ic{color:var(--warn)}
.c360-what{min-width:0;padding-top:.35rem;font-size:.92rem;color:#fff}
.c360-what .sub{margin-top:.2rem}
.c360-src{font-size:.78rem;color:var(--quiet);padding-top:.45rem;white-space:nowrap;text-align:right}
.c360-open{padding:0;border:0;background:none;color:#fff;font:600 .92rem/1.4 var(--sans);text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(209,221,255,.35);text-underline-offset:3px}
.c360-tell{margin:.8rem 0 .2rem;padding:1rem 1.1rem;border:1px solid rgba(124,152,255,.4);border-radius:18px;background:rgba(50,95,255,.08)}
.c360-tell[hidden]{display:none}
.c360-tell .eyebrow{margin-bottom:.4rem}
.c360-say{margin:0 0 .8rem;font-size:.92rem;line-height:1.5;color:#fff}
.c360-tell dl.kv{margin:0 0 .9rem}
.c360-tell .btn .ui2-icon{width:14px;height:14px}
.c360-none{color:var(--muted);font-size:.86rem}
.c360-group + .c360-group{margin-top:1rem}
.c360-group h3{margin:0 0 .2rem;font:600 .72rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)}

/* Checks and the side lists. */
.c360-checks,.c360-days,.c360-recent{list-style:none;margin:0;padding:0}
.c360-checks li,.c360-days li,.c360-recent li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem 0;border-top:1px solid var(--row)}
.c360-checks li:first-child,.c360-days li:first-child,.c360-recent li:first-child{border-top:0;padding-top:0}
.c360-checks .st{white-space:normal;font-size:.9rem}
.c360-checks .c360-src{padding:0}
.c360-days button{padding:0;border:0;background:none;color:#eef2fb;font:400 .88rem/1.3 var(--sans);cursor:pointer;text-align:left}
.c360-days button:hover{color:#fff;text-decoration:underline}
.c360-recent a{display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;min-width:0;font-size:.9rem}
.c360-recent a:hover span:last-child{text-decoration:underline}
.c360-recent time{font-size:.78rem;color:var(--quiet);white-space:nowrap}
.c360-about{display:flex;gap:.8rem;align-items:flex-start;padding:1.1rem 1.3rem}
.c360-about .ui2-icon{color:var(--icon);margin-top:.15rem}
.c360-about .note{margin:0}

/* Finding a customer. */
.c360-findcard form{display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem}
.c360-findcard .search{flex:1 1 auto;min-width:0}
.c360-findcard .search input{min-width:0}
.c360-findcard kbd{flex:none}
.c360-hints{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin:0 0 1rem;font-size:.84rem;color:var(--quiet)}
.c360-hints b{color:#eef2fb;font-weight:600}
.c360-match{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem 1.1rem;align-items:center;margin:0 0 1rem;padding:1.1rem 1.2rem;
  border:1px solid rgba(124,152,255,.45);border-radius:20px;background:rgba(50,95,255,.08)}
.c360-match h2{margin:.2rem 0;font:400 1.6rem/1.1 var(--austin);overflow-wrap:anywhere}
.c360-match .btn .ui2-icon{width:15px;height:15px}
.c360-nomatch{margin:0 0 1rem}
.c360-nm{display:flex;align-items:center;gap:.6rem;margin:0 0 .5rem;font:400 1.35rem/1.2 var(--austin);color:#fff}
.c360-nm .ui2-icon{color:var(--warn);width:22px;height:22px}
.c360-try{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.c360-try div{padding:.9rem 1rem;border:1px solid var(--line);border-radius:16px;background:rgba(8,14,30,.35)}
.c360-try b{display:block;margin-bottom:.25rem;color:#fff;font-weight:600;font-size:.9rem}
.c360-try span{font-size:.84rem;color:var(--muted)}
.c360-table table{width:100%}
.c360-table td .st{white-space:normal}

@media (max-width:1180px){
  .c360-split{grid-template-columns:minmax(0,1fr)}
  .c360-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .c360-who{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.6rem .9rem}
  .avatar.c360-av{width:48px;height:48px;font-size:1.2rem}
  .c360-id h1{font-size:1.8rem}
  .c360-acts{grid-column:1 / -1;justify-content:stretch}
  .c360-acts .btn{flex:1 1 auto}
  .c360-status{gap:.45rem 1rem;font-size:.82rem}
  .c360-tabs a,.c360-views a{padding:0 .8rem}
  .c360-views{display:flex;border-radius:22px}
  .c360-tiles .stat dd{font-size:1.6rem}
  .c360-journey{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1rem}
  .c360-wait{grid-template-columns:minmax(0,1fr) auto}
  .c360-wait .sub{grid-column:1 / -1}
  .c360-ev{grid-template-columns:3rem 28px minmax(0,1fr);row-gap:0}
  .c360-ic{width:28px;height:28px}
  .c360-ev .c360-src{grid-column:3;text-align:left;padding-top:.15rem}
  .c360-match{grid-template-columns:auto minmax(0,1fr)}
  .c360-match .btn{grid-column:1 / -1}
  .c360-try{grid-template-columns:minmax(0,1fr)}
  .c360-findcard kbd{display:none}
  .c360-tell{padding:.9rem}
  .c360-tell dl.kv div{flex-direction:column;gap:.2rem}
  .c360-tell dl.kv dd{text-align:left}
}
/* The find screen: room between its intro and the search. */
.c360-lead + .c360-split{margin-top:1.4rem}