/* Home, "Score cards": the customer portal's Home since Oct 1, 2026 (Austin chose it
   over design A for being simpler; it was the Sep 30 design preview "Home B"). An
   overview line, a row of tinted score cards (one big number, a short label, a thin
   bar, one button), a dark post-style card, then design A's "Feed us photos" card
   (styled by portal.css) beside "Your to-do" and "Your reports". Happlo navy and
   orange, the existing tokens only. The gecko is a small greeting avatar. Phone first;
   on desktop the tabs become a left rail. Everything here is scoped to .pb-* or
   body[data-home=b] (portal.html; the sales demo's portal frame sets it only for its
   Home B view). */
.pb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- overview line */
.pb-top{display:flex;flex-direction:column;gap:16px;margin:0 0 20px}
.pb-hello{display:flex;gap:12px;align-items:flex-start}
.pb-avatar{width:56px;height:56px;border-radius:50%;background:var(--gecko-ground);overflow:hidden;border:2px solid var(--orange)}
.pb-avatar img{width:100%;height:100%;object-fit:contain}
.pb-hello>div{min-width:0;flex:1}
.pb-kicker{margin:0 0 2px;font:700 13px/18px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text)}
.pb-top h1{font:400 22px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--ink-muted);overflow-wrap:anywhere}
.pb-name{display:block;font-weight:800;font-size:26px;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.pb-where{display:block;margin-top:6px}
.pb-where select{margin:0;font-weight:700}
.pb-month{display:inline-flex;align-items:flex-start;gap:8px;margin:10px 0 0;font:600 15px/22px var(--font-body);color:var(--ink)}
.pb-month::before{content:'';flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--ink-muted)}
.pb-month.is-good::before{background:var(--rank-1-3)}
.pb-month.is-mixed::before{background:var(--rank-8-10)}
.pb-month.is-slow::before{background:var(--rank-11-20)}
.pb-month.is-start::before,.pb-month.is-first::before{background:var(--orange)}
.pb-actions{display:grid;grid-template-columns:1fr;gap:10px}

/* ---------------------------------------------------------------- buttons */
.pb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:2px solid var(--ink);border-radius:var(--radius-control);background:transparent;color:var(--ink);font:700 15px/20px var(--font-body);text-decoration:none;text-align:center;cursor:pointer}
.pb-btn:hover{background:#ffffff99}
.pb-btn.is-big{min-height:52px;font-size:17px}
.pb-btn.is-orange{background:var(--orange);border-color:var(--orange);color:var(--ink-on-orange)}
.pb-btn.is-orange:hover{background:var(--orange-hover);border-color:var(--orange-hover)}
.pb-btn.is-navy{background:var(--surface-navy);border-color:var(--surface-navy);color:var(--ink-on-navy)}
.pb-btn.is-navy:hover{background:var(--navy-hover)}
.pb-btn.is-white{background:var(--surface-card);border-color:var(--surface-card);color:var(--ink)}
.pb-btn.is-white:hover{background:var(--surface-tint)}
.pb-btn:disabled{background:var(--line);border-color:var(--line);color:var(--ink-muted);cursor:not-allowed}
.pb-top .pb-btn.is-big:not(.is-orange){background:var(--surface-card)}

/* ---------------------------------------------------------------- score cards */
.pb-cards{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.pb-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:18px;border-radius:18px;border:1px solid #10243c14}
.pb-card.is-maps{background:var(--status-good-fill)}
.pb-card.is-ai{background:var(--status-info-fill)}
.pb-card.is-reviews{background:var(--status-warn-fill)}
.pb-card.is-posts{background:var(--orange-tint)}
.pb-card.is-na{background:var(--surface-card);border:2px dashed var(--line)}
.pb-card h3{font:700 15px/20px var(--font-body);letter-spacing:0;color:var(--ink)}
.pb-big{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px;margin:0}
.pb-big b{font:800 44px/1 var(--font-display);letter-spacing:-.04em;color:var(--ink)}
.pb-big span{font:600 15px/20px var(--font-body);color:var(--ink)}
.pb-detail{margin:0;font-size:14px;line-height:20px;color:var(--ink-muted)}
.pb-card:not(.is-na) .pb-detail{color:var(--ink)}
.pb-na{margin:6px 0 0;font:700 18px/24px var(--font-display);color:var(--ink-muted)}
/* The thin bar with its percent beside it. */
.pb-bar{display:flex;align-items:center;gap:10px;width:100%;margin-top:2px}
.pb-bar progress{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:8px;border:0;border-radius:999px;background:#ffffffcc;overflow:hidden;color:var(--ink)}
.pb-bar progress::-webkit-progress-bar{background:#ffffffcc;border-radius:999px}
.pb-bar progress::-webkit-progress-value{background:var(--ink);border-radius:999px}
.pb-bar progress::-moz-progress-bar{background:var(--ink);border-radius:999px}
.pb-bar span{flex:none;font:800 15px/20px var(--font-display);color:var(--ink)}
.pb-change{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;margin:0;padding:2px 10px 2px 8px;border-radius:12px;background:var(--surface-card);font:700 14px/20px var(--font-body)}
.pb-change.is-up{color:var(--status-good-text)}
.pb-change.is-up::before{content:'▲';font-size:10px}
.pb-change.is-down{color:var(--status-bad-text)}
.pb-change.is-down::before{content:'▼';font-size:10px}
.pb-change.is-same{color:var(--ink-muted)}
.pb-card .pb-btn{margin-top:auto;align-self:stretch}
/* A gap above each card's button; the button sits at the card's bottom so a row lines up. */
.pb-card::after{content:'';order:1;height:4px}
.pb-card>.pb-btn{order:2}
/* The dark card: post style. */
.pb-card.is-dark{background:var(--surface-navy);border-color:var(--surface-navy);color:var(--ink-on-navy)}
.pb-card.is-dark h3{color:var(--orange)}
.pb-dark-say{margin:0;font:800 22px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink-on-navy)}
.pb-card.is-dark .pb-detail{color:var(--ink-on-navy)}

/* ---------------------------------------------------------------- to-do and reports */
/* Photos first (full width on phones; the left half on desktop), so the gecko on the
   photo card needs room above it. */
.pb-row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:40px}
.pb-col{display:grid;gap:16px;align-content:start;min-width:0}
.pb-row .pt-photos{margin:0 6px 6px 0}
.pb-panel{background:var(--surface-card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card);padding:18px}
.pb-panel h2{font-size:20px;margin:0 0 10px}
.pb-todo-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pb-todo-list li{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--surface-tint);border-left:6px solid var(--orange)}
.pb-todo-list li.is-review{background:var(--status-warn-fill);border-left-color:var(--status-warn-text)}
.pb-todo-list b{font:700 17px/22px var(--font-display)}
.pb-todo-list p{margin:2px 0 0;font-size:15px;line-height:22px}
.pb-todo-list .pb-btn{align-self:stretch}
.pb-empty{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--status-good-fill)}
.pb-empty p{margin:0;font-size:16px;line-height:22px}
.pb-check{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--status-good-text);color:var(--surface-card);font:800 20px/1 var(--font-body)}
.pb-reports .pb-btn{width:100%}
.pb-facts{margin:12px 0 0;display:grid;gap:0}
.pb-facts div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.pb-facts dt{color:var(--ink-muted);font-size:15px}
.pb-facts dd{margin:0;font-weight:700;text-align:right}
.pb-facts small{font-weight:400;color:var(--ink-muted)}
.pb-reports>.pb-detail{margin-top:8px}

@media (min-width:600px){
 .pb-cards{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
 .pb-actions{grid-template-columns:repeat(2,max-content)}
 .pb-todo-list li{flex-direction:row;align-items:center;justify-content:space-between}
 .pb-todo-list .pb-btn{align-self:center;flex:none;min-width:150px}
}
@media (min-width:900px){
 /* The tabs become a left rail beside the page. */
 body[data-home=b]:has(.pt-tabs:not([hidden])){min-height:100vh;display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto 1fr}
 body[data-home=b] .pt-top{grid-column:1/-1}
 body[data-home=b] .pt-tabs{grid-column:1;grid-row:2;position:static;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:6px;padding:24px 14px;border:0;border-right:1px solid var(--line);background:var(--surface-card)}
 body[data-home=b] .pt-tabs a{justify-content:flex-start;min-width:0;padding:0 16px;font-size:16px}
 body[data-home=b] main{grid-column:2;grid-row:2;width:100%}
 .pb-top{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
 .pb-top h1{font-size:24px}
 .pb-name{font-size:34px}
 .pb-avatar{width:64px;height:64px}
 .pb-actions{flex:none}
 .pb-cards{gap:16px;margin-bottom:24px}
 .pb-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:20px}
 .pb-col{gap:20px}
 .pb-panel{padding:22px 24px}
}