/* Extra styles for the live app (on top of style.css from the prototype) */
html,body{min-height:100%}
.tabs button.tablink{background:none;border:0;border-bottom:3px solid transparent;padding:8px 0;font-weight:600;font-size:.92rem;color:var(--fg);cursor:pointer}
.tabs button.tablink:hover{color:var(--sky)}
.signin{max-width:520px;width:100%;justify-self:center}
.signin .or{margin-block:4px}
.btn.google{background:var(--surface);color:var(--fg);border:1px solid var(--input);display:inline-flex;align-items:center;gap:10px}
.banner{border-radius:10px;padding:12px 14px;font-size:.92rem}
.banner.info{background:#e6f6fc;color:#01507a}
.banner.warn{background:var(--warn-soft);color:var(--warn)}
:root[data-theme="dark"] .banner.info{background:#063a52;color:#7fd6f5}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .banner.info{background:#063a52;color:#7fd6f5}}
.photoGrid{display:flex;gap:6px;flex-wrap:wrap}
.photoGrid a img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block}
.details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 16px;font-size:.86rem;background:var(--sunk);border-radius:8px;padding:12px}
.details b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-family:var(--f-display)}
.sigimg{max-width:260px;background:#fff;border:1px solid var(--line);border-radius:6px}
tr.open td{background:var(--sunk)}
.partner .acts{display:flex;gap:6px;flex-wrap:wrap}
.check.urgent{background:var(--bad-soft);color:var(--bad);border-radius:8px;padding:10px 12px}
.check.urgent b{color:var(--bad)}
/* Signature box: always white with dark ink, even in dark mode, so the signature is easy to see. */
.sigpad{background:#ffffff !important;border:2px solid #9ca3af !important;color-scheme:light}
.sigwrap .linkbtn{color:#014265}
/* Update 7: 7-step tracker, job history, clear buttons */
.track{grid-template-columns:repeat(7,minmax(0,1fr))}
.step span{font-size:.66rem;line-height:1.15}
@media (max-width:560px){.step span{display:none}}
.stagenow{margin-top:-4px}
.ref-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.timeline{list-style:none;margin:6px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line);display:grid;gap:6px;font-size:.86rem}
.timeline li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;position:relative}
.timeline li::before{content:"";position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.timeline .when{color:var(--muted);font-size:.78rem}
.panel-head .acts{display:flex;gap:14px;flex-wrap:wrap}
.xbtn{background:none;border:0;color:var(--muted);font-size:1rem;line-height:1;padding:0 2px 0 6px;cursor:pointer}
.xbtn:hover{color:var(--bad)}
.howfill{display:inline-block;margin-left:8px;font-size:.72rem;font-weight:700;border-radius:6px;padding:2px 7px;background:var(--sunk);color:var(--muted)}
/* Update 9: text-update switch for plumbers */
.hero-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.smsopt{display:flex;gap:8px;align-items:flex-start;max-width:320px;font-size:.86rem;color:rgba(255,255,255,.9);background:rgba(255,255,255,.08);border-radius:10px;padding:10px 12px;cursor:pointer}
.smsopt input{accent-color:var(--gold);margin-top:3px}
.smsopt small{display:block;color:rgba(255,255,255,.65);font-size:.72rem;margin-top:2px}
/* Update 10: referral partners, services, cleaning payouts */
.track.short{grid-template-columns:repeat(4,minmax(0,1fr))}
.cleanbox{display:grid;gap:4px;min-width:190px}
.cleanbox .inv{width:96px;padding:4px 6px;margin-left:4px}
.cleanbox .check{font-size:.8rem}
select[data-otype]{width:auto;padding:5px 8px;border-radius:8px;border:1px solid var(--line);font-size:.82rem;font-weight:600;background:var(--surface);color:var(--fg)}
optgroup{font-weight:700}