/*
  Customer Center page CSS. From docs/prototypes/concept-b-dialogue.html (sections listed in
  packages/ui/README.md under apps/portal), plus the few portal-only pieces. Shared components come
  from tokens.css and components.css; nothing here overrides their tokens.
*/

/* ---------- prototype: sign in ---------- */
.signin{max-width:520px;margin-inline:auto;padding-block:clamp(56px,14vh,140px) 96px;padding-inline:24px;width:100%}

/* ---------- prototype: customer center ---------- */
.vac{position:sticky;top:env(safe-area-inset-top,0px);z-index:31;background:var(--accent);color:var(--accent-ink);font-size:13.5px;font-weight:560}
.vac .in{display:flex;align-items:center;justify-content:center;gap:12px;height:36px;padding-inline:16px}
.vac a{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-xs);background:rgba(0,0,0,.12);font-weight:600;font-size:13px;color:inherit;transition:background-color 120ms var(--ease)}
.vac a:hover{background:rgba(0,0,0,.2)}
.vac a:focus-visible{outline-color:var(--accent-ink)}
.vac ~ .app-bar{top:calc(env(safe-area-inset-top,0px) + 36px)}
.feed{max-width:720px;margin-inline:auto;padding:40px 24px 120px;display:grid;gap:40px}
.proj-h{display:grid;gap:18px}
.proj-h h1{font-size:clamp(28px,3.4vw,36px);font-weight:470;letter-spacing:-.028em;line-height:1.1;text-wrap:balance}
.proj-h .meta{font-size:14px;color:var(--text-3);margin-top:6px}
.next{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-1);padding:22px 22px 20px;display:grid;gap:14px;position:relative}
.next-k{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--text-3)}
.next-k .l{display:inline-flex;align-items:center;gap:10px;color:var(--text-2);font-weight:540}
.next h1,.next h2{font-size:clamp(21px,2.4vw,25px);font-weight:520;letter-spacing:-.018em;line-height:1.2;text-wrap:balance}
.next p{font-size:14.5px;color:var(--text-2)}
.next .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.pay-sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pay-sum b{font-size:30px;font-weight:450;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pay-sum span{color:var(--text-3);font-size:13.5px}
.next .seg{justify-self:start}
.next .mail{background:var(--bg)}
.chg{display:grid;gap:10px}
.chg .row{margin-top:0}
.help-q{display:grid;gap:8px}
.help-q .seg{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.help-q .seg.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.help-q .seg label{justify-content:center;white-space:normal;text-align:center}
@media (max-width:600px){.help-q .seg{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contact-card{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-card .avatar{width:44px;height:44px;font-size:15px}
.contact-card b{display:block;font-weight:580;font-size:15px}
.contact-card span.s{display:block;font-size:13.5px;color:var(--text-3)}
.contact-card .act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:560px){.contact-card{grid-template-columns:44px 1fr}.contact-card .act{grid-column:1/-1;justify-content:flex-start}}
.route-note{font-size:13px;color:var(--text-3);display:flex;gap:8px;align-items:center}

/* ---------- portal: chrome ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--bg-2);color:var(--text);padding:8px 12px;border-radius:var(--r);transition:top 120ms var(--ease)}
.skip:focus{top:12px}
.signin-bar{border-bottom:0}
.switcher{max-width:min(46vw,340px)}
.switcher .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.switcher.static{color:var(--text-2);cursor:default}
.switcher.static:hover{background:transparent}
.pnav{display:flex;gap:2px;margin-right:4px}
.pnav a{display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:var(--r-xs);font-size:13.5px;color:var(--text-3);transition:color 120ms var(--ease),background-color 120ms var(--ease)}
.pnav a:hover{color:var(--text);background:var(--bg-1)}
.pnav a[aria-current=page]{color:var(--text);background:var(--bg-2)}
.help-btn[aria-current=page]{color:var(--text);background:var(--bg-2)}
.show-s,.show-s-grid{display:none}
.menu .menu-form{display:contents}
.menu .menu-form .menu-item{text-align:left}
.menu .menu-item[aria-current=page]{background:var(--bg-2)}
.menu .theme-row .seg button[aria-checked=true]{background:var(--bg-3);color:var(--text)}
.pfoot{max-width:720px;margin:-72px auto 0;padding:0 24px 40px}
.pfoot-in{display:flex;align-items:center;gap:10px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--text-3)}
.pfoot .tz-now{display:inline-flex;align-items:center;gap:6px}
.pfoot .tz-now b{color:var(--text-2);font-weight:540}
.tz-link{color:var(--text-2);border-radius:var(--r-xs);padding:2px 4px;margin:-2px -4px}
.tz-link:hover{color:var(--text);background:var(--bg-2)}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text-3);justify-self:start;margin-bottom:-24px;border-radius:var(--r-xs);transition:color 120ms var(--ease)}
.back:hover{color:var(--text)}
.lnk{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;transition:color 120ms var(--ease),text-decoration-color 120ms var(--ease)}
.lnk:hover{color:var(--text);text-decoration-color:currentColor}
.lnk.sm{font-size:13px;text-decoration:none;color:var(--text-3)}
.lnk.sm:hover{color:var(--text)}
.inline-form{display:contents}
.ro-note{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-3)}
.mut{color:var(--text-3)}
.due-over{color:var(--bad)!important}
.row-i .s.due-over{color:var(--bad)}
.tnum{font-variant-numeric:tabular-nums}

/* rows that are links */
.row-a{color:inherit;transition:background-color 120ms var(--ease);margin-inline:-10px;padding-inline:10px;border-radius:var(--r-xs)}
.row-a:hover{background:var(--bg-1)}
.row-a .act .ic{color:var(--text-3)}
.row-link{color:inherit;border-radius:var(--r-xs)}
.row-link:hover{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.row-i > div:nth-child(2){min-width:0}
.row-i b{overflow-wrap:anywhere}
.ri-ic .lamp{margin:0}
.o-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--text-3)}
.ri-ic.tnum{font-size:12.5px;color:var(--text-2);font-weight:560}
.bill-sum{margin-top:10px;font-size:13px;color:var(--text-3)}

/* ---------- approvals ---------- */
.seg a{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--r-xs);font-size:13px;color:var(--text-3);white-space:nowrap;transition:background-color 160ms var(--ease),color 160ms var(--ease)}
.seg a:hover{color:var(--text)}
.seg a[aria-pressed=true]{background:var(--bg-3);color:var(--text)}
.sec-panels{display:grid;gap:12px}
.js .sec-panels [data-panel]:not([data-active]){display:none}
.mail-h > div{min-width:0}
.mail-l{font-size:12.5px;color:var(--text-3);white-space:nowrap}
.js .mail-l{display:none}
.mail-b p{white-space:pre-line}
.sec-doc{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg);padding:14px;display:grid;gap:8px;font-size:14.5px;color:var(--text-2);line-height:1.55}
.sec-doc h3{font-size:14px;font-weight:560;color:var(--text)}
.next .quote{display:block;margin-top:8px;padding-left:12px;border-left:2px solid var(--line-2);color:var(--text-2)}
.next.approval .file-chip{justify-self:start;margin-top:0}
.next.is-optimistic{animation:tlIn 240ms var(--ease)}

/* primary action stays in reach on phones (approve and pay) */
@media (max-width:600px){
  .act-bar{position:sticky;bottom:0;z-index:5;margin:4px -22px -20px;padding:12px 22px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg-1);border-top:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg)}
  .act-bar .btn-primary{flex:1 1 100%}
  .help-form .act-bar,.resched .sch-bar{margin-inline:-16px;padding-inline:16px;background:var(--bg);border-radius:0}
}

/* ---------- story ---------- */
.tl-text{white-space:pre-line}
.avatar.you{background:var(--bg-3);color:var(--text-2)}
.tl-ic.avatar.team{background:var(--team);color:var(--text)}
.tl-ic.avatar.you{background:var(--bg-3);color:var(--text-2)}
[data-story] .block-h{flex-wrap:wrap}
.tl-ev .tag{margin-left:2px}
.tl-item .file-chip{max-width:100%}
.file-chip .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.composer .avatar{margin-top:8px}

/* ---------- billing and proposals ---------- */
.pay-note{display:flex;align-items:center;gap:10px}
.pay-note .spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-3);border-top-color:var(--good);animation:spin 900ms linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.pay-link{display:grid;gap:6px;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg)}
.pay-link b{font-weight:580;font-size:15px}
.pay-by{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-3)}
.prose{display:grid;gap:10px;font-size:15px;color:var(--text-2);line-height:1.6}
.prose .block-h{margin-bottom:2px}
.plist{display:grid;gap:6px;padding-left:18px;list-style:disc}
.plist li::marker{color:var(--text-4)}
.accept{gap:16px}
.agree{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:14.5px;color:var(--text-2);cursor:pointer}
.agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent)}
.accept .code{margin-top:6px}
.receipt{margin-top:0}

/* ---------- meetings ---------- */
.was{color:var(--text-3);text-decoration-color:var(--text-4)}
.mtg-row .act{flex-wrap:wrap;justify-content:flex-end}
.mtg-row .cancel-q{justify-content:flex-end}
@media (max-width:560px){.mtg-row{grid-template-columns:36px 1fr}.mtg-row .act{grid-column:2;justify-content:flex-start}.mtg-row .cancel-q{justify-content:flex-start}}
.resched .sch{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-1);padding:18px}
.resched > .err{margin-top:12px}

/* ---------- help and forms ---------- */
.help-form,.tz-form{display:grid;gap:22px}
.help-form .field select,.tz-form select{max-width:420px}
.si-field{margin-top:32px}
.si-alt{margin-top:12px}
.code.bad input{border-color:var(--bad)}
.code input{font-family:inherit}

/* ---------- mobile ---------- */
@media (max-width:600px){
  .feed{padding:24px 16px 120px;gap:32px}
  .pfoot{padding-inline:16px}
  .app-bar-in{padding-inline:12px;gap:6px}
  .signin{padding-inline:16px}
  .next{padding:18px 16px 16px}
  .act-bar{margin-inline:-16px;margin-bottom:-16px;padding-inline:16px}
  .show-s{display:inline}
  .show-s-grid{display:grid;gap:2px;padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid var(--line)}
  .switcher{max-width:52vw}
  .code{gap:6px}
  .pay-sum b{font-size:26px}
}
@media (pointer:coarse){
  .btn{--h:44px}
  .btn.sm{--h:44px}
  .seg a,.seg label,.seg button{min-height:40px}
  .menu-item{min-height:44px}
  .switcher{height:44px}
  .pnav a{height:44px}
}
@media (prefers-reduced-motion:reduce){
  .pay-note .spin{animation:none}
  .next.is-optimistic{animation:none}
}