/* FIDO account portal. Matches the Powermeter look (see bopowermeter/australia/customer_experience.php).
   CSP allows only same-origin assets: no web fonts, icons are inline SVG. */
:root{--accent:#3b7ddd;--accent-soft:#3b7ddd1a;--ok:#1c9b5f;--warn:#b7791f;--danger:#c0392b;--text:#212529;--body:#495057;--muted:#6c757d;--line:#e5e9f5;--card-line:#eaeef5;--bg:#f5f7fb;color-scheme:light}
*{box-sizing:border-box}
html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.55;color:var(--body);background:var(--bg)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--text);line-height:1.25}
p{margin:0 0 .75rem}p:last-child{margin-bottom:0}
.icon{width:1.15em;height:1.15em;fill:currentColor;flex:none;vertical-align:-.2em}
.logo{width:100%;height:100%;display:block}
.muted{color:var(--muted);font-size:.9rem}.center{text-align:center}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9ec2f2;outline-offset:2px}

/* Top bar */
.topbar{background:#fff;box-shadow:0 0 2rem 0 rgba(33,37,41,.1);position:sticky;top:0;z-index:10}
.topbar-inner{max-width:1040px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center}.brand img{height:32px;width:auto;display:block}
.brand-divider{width:1px;height:28px;background:#dee2e6}
.brand-product{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:1.05rem;color:var(--text);letter-spacing:.02em}
.brand-product img{border-radius:6px}
.topbar-user{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.topbar-user form{margin:0}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem;flex:none}
.user-email{font-size:.875rem;color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Page */
.page{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:28px 24px 40px}
.page-header{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.page-icon{width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;padding:10px}
.page-icon .icon{width:24px;height:24px}
.page-header h1{font-size:1.4rem;font-weight:600;margin:0}
.page-header p{color:var(--muted);font-size:.85rem;margin:2px 0 0}
.foot{max-width:1040px;width:100%;margin:0 auto;padding:16px 24px 28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.foot a{display:inline-flex;align-items:center;gap:6px}

/* Cards */
.card{background:#fff;border:1px solid var(--card-line);border-radius:8px;box-shadow:0 1px 3px rgba(20,30,60,.06);margin-bottom:20px}
.card-header{display:flex;align-items:center;gap:8px;padding:14px 20px;background:#f7f9ff;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0}
.card-header .icon{color:var(--accent);width:20px;height:20px}
.card-header h2{font-size:1rem;font-weight:600;margin:0}
.header-logo{width:20px;height:20px;display:inline-flex}
.card-body{padding:20px}
.card-footer{padding:14px 20px;border-top:1px solid var(--line);background:#fafbfe;border-radius:0 0 8px 8px;font-size:.85rem;color:var(--muted)}
.card-footer p{margin-bottom:.4rem}

/* Buttons */
.btn,.fc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:1px solid #c5d5f7;border-radius:6px;background:#f0f4ff;color:var(--accent);font:inherit;font-size:.875rem;font-weight:500;line-height:1.3;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover,.fc-btn:hover{background:#e3ebfd;text-decoration:none}
.btn-primary,.fc-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover,.fc-btn-primary:hover{background:#326abc;border-color:#326abc}
.btn-ghost{background:#fff;border-color:#dee2e6;color:var(--body)}.btn-ghost:hover{background:#f1f3f5}
.fc-btn-danger{background:#fff;border-color:#f1c0bb;color:var(--danger)}.fc-btn-danger:hover{background:#fdf1f0}
.btn:disabled,.fc-btn:disabled{opacity:.55;cursor:not-allowed}
.btn-google{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 20px 0 14px;border:1px solid #dadce0;border-radius:6px;background:#fff;color:#3c4043;font-weight:500;font-size:.95rem;text-decoration:none;transition:background .15s,box-shadow .15s}
.btn-google:hover{background:#f8faff;box-shadow:0 1px 3px rgba(60,64,67,.2);text-decoration:none}
.btn-google .logo{width:20px;height:20px}

/* Alerts and callouts */
.alert{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-radius:6px;border-left:3px solid currentColor;font-size:.9rem}
.alert .icon{margin-top:2px}
.alert-ok{background:#1c9b5f14;color:var(--ok)}.alert-ok strong{color:var(--ok)}
.alert-error{background:#c0392b12;color:var(--danger)}
.alert[hidden]{display:none}
.callout{background:#3b7ddd0d;border:1px solid #d6e3f8;border-left:3px solid var(--accent);border-radius:8px;padding:16px 20px;margin-bottom:20px}
.callout-title{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--accent);margin-bottom:8px}
.callout ol{margin:0 0 10px;padding-left:20px}.callout li{margin-bottom:6px}
.callout-note{font-size:.825rem;color:var(--muted)}

/* Sign-in card */
.auth-card{max-width:480px;margin:32px auto 20px;padding:36px 32px 24px;text-align:center}
.auth-mark{width:64px;height:64px;margin:0 auto 18px;border-radius:16px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;padding:10px}
.auth-mark img{display:block}
.auth-card h1{font-size:1.35rem;font-weight:600;margin:0 0 8px}
.auth-card>p{color:var(--muted);margin-bottom:22px}
.auth-providers{margin:28px -32px 0;padding:20px 32px 4px;border-top:1px solid var(--line);text-align:left}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.provider-row{display:flex;align-items:center;gap:14px;padding:10px 0}
.provider-row+.provider-row{border-top:1px dashed var(--line)}
.provider-row strong{display:block;color:var(--text);font-weight:600;font-size:.925rem}
.provider-row span:not(.provider-logo){font-size:.825rem;color:var(--muted)}
.provider-logo{width:40px;height:40px;border:1px solid var(--card-line);border-radius:10px;padding:9px;background:#fff;flex:none;display:flex}
.auth-foot{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px 0 0;font-size:.8rem;color:var(--muted)}

/* Asana test */
.inline-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0}
.inline-form label{font-weight:600;font-size:.875rem;color:var(--text)}
select{font:inherit;font-size:.9rem;padding:7px 10px;border:1px solid #ced4da;border-radius:6px;background:#fff;color:var(--text);min-width:200px}
.task-list{margin:0;padding-left:20px}

/* Connected accounts (rendered by accounts.js) */
.accounts-card .loading{padding:20px;margin:0;color:var(--muted)}
#accounts>p:not([class]){padding:20px 20px 0}#accounts>.fc-btn,#accounts>button{margin:12px 20px 20px}
.fc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:#f7f9ff;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0}
.fc-head h2{font-size:1rem;font-weight:600;margin:0}
.fc-head p{font-size:.825rem;color:var(--muted);margin:2px 0 0}
.fc-status{margin:16px 20px 0;padding:10px 14px;border-radius:6px;background:#b7791f14;border-left:3px solid var(--warn);color:#8a5a12;font-size:.875rem}
.fc-status:empty{display:none}
.fc-body{padding:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fc-provider{border:1px solid var(--card-line);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:14px;background:#fff}
.fc-provider.is-connected{box-shadow:inset 3px 0 0 0 var(--ok)}
.fc-provider-top{display:flex;align-items:center;gap:12px}
.fc-logo{width:40px;height:40px;border:1px solid var(--card-line);border-radius:10px;padding:9px;flex:none;display:flex;background:#fff}
.fc-provider-name{flex:1;min-width:0}
.fc-provider-name h3{font-size:.975rem;font-weight:600;margin:0}
.fc-provider-name p{font-size:.8rem;color:var(--muted);margin:2px 0 0;overflow-wrap:anywhere}
.fc-chip{font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid currentColor;white-space:nowrap}
.fc-chip-ok{color:var(--ok);background:#1c9b5f14}.fc-chip-off{color:var(--muted);background:#6c757d0f}
.fc-perms{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.fc-perms li{font-size:.75rem;padding:3px 10px;border-radius:12px;background:#f0f4ff;color:var(--accent);border:1px solid #c5d5f7}
.fc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.fc-note{font-size:.8rem;color:var(--muted);margin:0}
.fc-section{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;margin:8px 0 0}
.fc-pending{grid-column:1/-1;border:1px solid #f1d9a7;border-radius:8px;padding:16px;background:#fffaf0;box-shadow:inset 3px 0 0 0 var(--warn)}
.fc-pending strong{display:block;color:var(--text);text-transform:capitalize;margin-bottom:8px}
.fc-pending pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.75rem;background:#fff;border:1px solid #f1e3c4;border-radius:6px;padding:10px;margin:0 0 12px;max-height:240px;overflow:auto}

/* Permissions dialog */
.fc-dialog{max-width:500px;width:calc(100% - 32px);border:none;border-radius:12px;padding:0;color:var(--body);box-shadow:0 20px 50px rgba(20,30,60,.25)}
.fc-dialog::backdrop{background:rgba(20,30,60,.45)}
.fc-dialog-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);background:#f7f9ff}
.fc-dialog-head h2{font-size:1.05rem;font-weight:600;margin:0}
.fc-dialog-head .fc-logo{width:36px;height:36px;padding:7px}
.fc-dialog-body{padding:18px 22px}
.fc-dialog-body>p{font-size:.875rem}
.fc-option{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:8px 0;border:1px solid var(--card-line);border-radius:8px;cursor:pointer;font-size:.9rem;color:var(--text)}
.fc-option:hover{background:#f7f9ff}
.fc-option input{width:16px;height:16px;accent-color:var(--accent);margin:0}
.fc-fine{font-size:.78rem;color:var(--muted);margin:12px 0 0}
.fc-dialog-status{font-size:.85rem;color:var(--danger);margin:10px 0 0}.fc-dialog-status:empty{display:none}
.fc-dialog-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--line)}

@media(max-width:640px){
 .topbar-inner{padding:10px 16px;gap:10px}.brand img{height:26px}.brand-divider{display:none}
 .user-email{display:none}.btn-ghost span{display:none}.btn-ghost{padding:8px 10px}
 .page{padding:20px 16px 32px}.foot{padding:12px 16px 24px}
 .auth-card{margin-top:12px;padding:28px 20px 20px}.auth-providers{margin:24px -20px 0;padding:18px 20px 4px}
 .fc-body{padding:16px;grid-template-columns:1fr}
}