/* ============================================================ Build & Reason · AI Fundamentals — account / portal chrome Login, account chip, notes drawer, progress bars, admin console. Reuses brand tokens + neumorphism from base.css. ============================================================ */ /* gate: hide the page until auth.js resolves (snippet in ) */ html.br-gating body { visibility: hidden; } /* ---- account chip in the topbar ---- */ .acct-chip{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; color:var(--fg-muted); } .acct-name{ max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .acct-link{ color:var(--accent); text-decoration:none; font-weight:700; } .acct-link:hover{ text-decoration:underline; } .acct-signout{ font:inherit; cursor:pointer; color:var(--fg-muted); background:var(--bg); border:none; border-radius:var(--radius-sm); padding:6px 10px; box-shadow:var(--neu-raised); } .acct-signout:hover{ color:var(--fg); } .acct-signout:active{ box-shadow:var(--neu-inset); } /* ---- no-access / gate message ---- */ .gate-msg{ max-width:520px; margin:18vh auto; padding:0 24px; text-align:center; } .gate-msg h1{ font-size:28px; margin:0 0 10px; } .gate-msg p{ color:var(--fg-muted); line-height:1.6; } .gate-msg a{ color:var(--accent); } /* ---- centered auth card (login) ---- */ .auth-wrap{ min-height:100dvh; display:grid; place-items:center; padding:24px; } .auth-card{ width:min(420px, 100%); background:var(--bg); border-radius:var(--radius-lg); box-shadow:var(--neu-raised-lg); padding:32px 30px; } .auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; } .auth-brand .logomark{ width:34px; height:34px; } .auth-brand b{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.14em; } .auth-brand span{ display:block; font-size:11px; color:var(--fg-faint); } .auth-card h1{ font-size:21px; margin:0 0 4px; } .auth-card .sub{ color:var(--fg-muted); font-size:13px; margin:0 0 22px; } .field{ margin-bottom:14px; } .field label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:6px; } .field input{ width:100%; box-sizing:border-box; font:inherit; font-size:15px; color:var(--fg); background:var(--bg-sunk); border:none; border-radius:var(--radius); padding:12px 14px; box-shadow:var(--neu-inset); } .field input:focus{ outline:2px solid var(--accent-tint); outline-offset:2px; } .btn-primary{ width:100%; font:inherit; font-weight:600; font-size:15px; cursor:pointer; color:#fff; background:var(--accent); border:none; border-radius:var(--radius); padding:13px 16px; margin-top:6px; box-shadow:var(--neu-raised); } .btn-primary:hover{ background:var(--accent-deep); } .btn-primary:active{ box-shadow:var(--neu-inset); } .btn-primary[disabled]{ opacity:.6; cursor:default; } .auth-err{ display:none; margin-top:14px; padding:10px 12px; font-size:13px; color:var(--bad); background:var(--bad-tint); border-radius:var(--radius-sm); } .auth-err.on{ display:block; } /* ---- progress bars on landing cards ---- */ .mprog{ margin-top:12px; } .mprog-track{ height:7px; border-radius:99px; background:var(--bg-sunk); box-shadow:var(--neu-inset); overflow:hidden; } .mprog-fill{ height:100%; background:var(--accent); border-radius:99px; width:0; transition:width .4s var(--ease); } .mprog-label{ margin-top:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; color:var(--fg-faint); text-transform:uppercase; } .mcard.done .mprog-fill{ background:var(--good); } /* ---- notes drawer (module pages) ---- */ .notes-fab{ font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:7px; color:#fff; background:var(--accent); border:none; border-radius:var(--radius-sm); padding:8px 12px; box-shadow:var(--neu-raised); font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; } .notes-fab:hover{ background:var(--accent-deep); color:#fff; } .notes-fab:active{ box-shadow:var(--neu-inset); } .notes-fab .dot{ width:7px; height:7px; border-radius:99px; background:#fff; display:none; } .notes-fab.has-note .dot{ display:inline-block; } .notes-drawer{ position:fixed; top:0; right:0; height:100dvh; width:min(380px, 90vw); background:var(--bg); box-shadow:-12px 0 40px rgba(11,13,16,.14); transform:translateX(100%); transition:transform .28s var(--ease); z-index:60; display:flex; flex-direction:column; } .notes-drawer.open{ transform:none; } .notes-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 12px; border-bottom:1px solid var(--hair); } .notes-head .t{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; } .notes-close{ font:inherit; cursor:pointer; background:none; border:none; font-size:22px; line-height:1; color:var(--fg-muted); } .notes-slide{ padding:14px 20px 6px; font-size:13px; color:var(--fg-faint); } .notes-slide b{ color:var(--fg); } .notes-body{ flex:1; display:flex; flex-direction:column; padding:8px 20px 20px; } .notes-body textarea{ flex:1; width:100%; box-sizing:border-box; resize:none; font:inherit; font-size:15px; line-height:1.6; color:var(--fg); background:var(--bg-sunk); border:none; border-radius:var(--radius); padding:14px; box-shadow:var(--neu-inset); } .notes-body textarea:focus{ outline:2px solid var(--accent-tint); outline-offset:2px; } .notes-status{ margin-top:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-faint); min-height:14px; } /* ---- admin console ---- */ .admin-wrap{ max-width:var(--maxw); margin:0 auto; padding:28px 22px 60px; } .admin-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; } .admin-head h1{ font-size:24px; margin:0; } .admin-head p{ margin:4px 0 0; color:var(--fg-muted); font-size:13px; } .card{ background:var(--bg); border-radius:var(--radius-lg); box-shadow:var(--neu-raised); padding:20px 22px; margin-bottom:22px; } .card h2{ font-size:14px; font-family:var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; margin:0 0 14px; color:var(--fg-muted); } .utable{ width:100%; border-collapse:collapse; font-size:14px; } .utable th{ text-align:left; font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-faint); padding:8px 10px; border-bottom:1px solid var(--hair); } .utable td{ padding:11px 10px; border-bottom:1px solid var(--hair); vertical-align:middle; } .utable tr:last-child td{ border-bottom:none; } .pill{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; padding:3px 8px; border-radius:99px; } .pill.client{ background:var(--accent-tint); color:var(--accent-deep); } .pill.admin{ background:var(--warn-tint); color:var(--warn); } .pill.off{ background:var(--bad-tint); color:var(--bad); } .pill.on{ background:var(--good-tint); color:var(--good); } .ubar{ width:120px; height:6px; border-radius:99px; background:var(--bg-sunk); box-shadow:var(--neu-inset); overflow:hidden; display:inline-block; vertical-align:middle; } .ubar > i{ display:block; height:100%; background:var(--accent); } .row-actions{ display:flex; gap:6px; flex-wrap:wrap; } .mini{ font:inherit; cursor:pointer; font-size:12px; padding:6px 10px; border:none; border-radius:var(--radius-sm); background:var(--bg); color:var(--fg-muted); box-shadow:var(--neu-raised); } .mini:hover{ color:var(--fg); } .mini:active{ box-shadow:var(--neu-inset); } .mini.danger:hover{ color:var(--bad); } .create-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .create-grid .field{ margin:0; } .create-grid .span2{ grid-column:1 / -1; } @media (max-width:620px){ .create-grid{ grid-template-columns:1fr; } } .admin-note{ margin:10px 0 0; padding:10px 12px; background:var(--bg-sunk); border-radius:var(--radius-sm); box-shadow:var(--neu-inset); font-size:13px; color:var(--fg-muted); white-space:pre-wrap; } .toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--fg); color:#fff; padding:11px 18px; border-radius:var(--radius); font-size:13px; box-shadow:var(--neu-raised-lg); opacity:0; transition:opacity .2s; z-index:80; } .toast.on{ opacity:1; } .toast.err{ background:var(--bad); } /* ============================================================ Mobile fit: prevent horizontal overflow introduced by the extra topbar items (Notes + account chip). The base .topbar wraps, but .topbar-right does not — so let it wrap, and guard the page against any residual sideways scroll. ============================================================ */ html, body{ overflow-x:hidden; max-width:100%; } .topbar .topbar-right{ flex-wrap:wrap; justify-content:flex-end; row-gap:8px; min-width:0; } .acct-chip{ flex-wrap:wrap; justify-content:flex-end; } @media (max-width: 760px){ /* controls become a full-width, left-aligned toolbar under the brand, so nothing floats off to the right on its own line */ .topbar .topbar-right{ width:100%; justify-content:flex-start; gap:8px; row-gap:8px; } .notes-fab{ padding:7px 10px; } .acct-chip{ gap:8px; margin-left:auto; } /* sign-out tucks to the right end of the row */ } @media (max-width: 460px){ /* drop the (already-truncated) name; the Sign out control is enough */ .acct-name{ display:none; } .acct-chip{ font-size:10px; } } /* keep the off-canvas notes drawer from extending the scroll width */ .notes-drawer{ width:min(380px, 88vw); max-width:88vw; } /* ---- sign-out confirmation modal ---- */ .confirm-pop{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(11,13,16,0.28); animation:confirmFade .18s var(--ease) both; } .confirm-card{ background:var(--bg); border-radius:var(--radius-lg); box-shadow:var(--neu-raised-lg); padding:26px 28px; max-width:380px; width:100%; text-align:center; animation:confirmPop .22s var(--ease) both; } .confirm-title{ font-size:20px; font-weight:600; color:var(--fg); margin-bottom:8px; } .confirm-text{ font-size:14px; color:var(--fg-muted); line-height:1.55; margin:0 0 20px; } .confirm-text b{ color:var(--fg); font-weight:600; } .confirm-actions{ display:flex; gap:10px; justify-content:center; } .confirm-cancel, .confirm-go{ font:inherit; font-size:14px; font-weight:600; cursor:pointer; border:none; border-radius:var(--radius-sm); padding:11px 20px; box-shadow:var(--neu-raised); } .confirm-cancel{ background:var(--bg); color:var(--fg-muted); } .confirm-cancel:hover{ color:var(--fg); } .confirm-cancel:active{ box-shadow:var(--neu-inset); } .confirm-go{ background:var(--accent); color:#fff; } .confirm-go:hover{ background:var(--accent-deep); } .confirm-go:active{ box-shadow:var(--neu-inset); } @keyframes confirmFade{ from{ opacity:0; } to{ opacity:1; } } @keyframes confirmPop{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }