/*!*********************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***! \*********************************************************************************************************************************************************************************************************************************************************************/ /* =========================================================================== Design system — ported from the full-system mock (tokens.css + shared.css). Single source of visual truth for the v2 host apps; loaded once in layout.tsx. The mock-only chrome (.mockbar) is intentionally NOT ported — it exists only in the static mock to switch demo states and is never part of the real product. White-label: brand strings render through copy/tokens, never a platform literal. =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* Brand */ --brand-primary: oklch(44% 0.145 252); --brand-primary-hover: oklch(38% 0.145 252); --brand-primary-light: oklch(95% 0.040 252); --brand-primary-mid: oklch(86% 0.072 252); --brand-on-primary: oklch(99% 0.003 252); /* Semantic */ --sem-success: oklch(51% 0.140 152); --sem-success-light: oklch(95% 0.045 152); --sem-success-text: oklch(38% 0.140 152); --sem-warning: oklch(64% 0.150 76); --sem-warning-light: oklch(96% 0.050 76); --sem-warning-text: oklch(45% 0.130 76); --sem-danger: oklch(51% 0.185 20); --sem-danger-light: oklch(96% 0.045 20); --sem-danger-text: oklch(40% 0.185 20); --sem-ai: oklch(51% 0.155 290); --sem-ai-light: oklch(95% 0.050 290); --sem-ai-text: oklch(40% 0.155 290); --sem-audit: oklch(47% 0.080 220); --sem-audit-light: oklch(95% 0.025 220); --sem-compliance: oklch(49% 0.130 166); --sem-compliance-light: oklch(95% 0.045 166); /* Surfaces */ --surf-canvas: oklch(96.8% 0.007 65); --surf-panel: oklch(95.2% 0.009 65); --surf-raised: oklch(99.5% 0.002 65); --surf-sunken: oklch(93.5% 0.011 65); --surf-inverse: oklch(21% 0.015 250); --surf-overlay: oklch(10% 0.010 250 / 0.5); /* Borders */ --brd-subtle: oklch(89.5% 0.009 65); --brd-default: oklch(83% 0.012 65); --brd-strong: oklch(72% 0.015 65); --brd-focus: var(--brand-primary); --brd-danger: var(--sem-danger); --brd-success: var(--sem-success); /* Text */ --txt-primary: oklch(20% 0.015 50); --txt-secondary: oklch(44% 0.014 50); --txt-muted: oklch(61% 0.010 50); --txt-disabled: oklch(72% 0.008 50); --txt-inverse: oklch(97% 0.006 65); --txt-link: var(--brand-primary); --txt-danger: var(--sem-danger-text); --txt-success: var(--sem-success-text); --txt-ai: var(--sem-ai-text); --txt-warning: var(--sem-warning-text); /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Radius */ --r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-full: 9999px; /* Typography */ --f-ui: 'Plus Jakarta Sans', -apple-system, sans-serif; --f-mono: 'JetBrains Mono', 'Fira Code', monospace; --fz-xs: 11px; --fz-sm: 12px; --fz-base: 13px; --fz-md: 14px; --fz-lg: 15px; --fz-xl: 17px; --fz-2xl: 20px; --fz-3xl: 24px; --fz-4xl: 30px; --fz-5xl: 38px; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relax: 1.65; /* Shadows */ --sh-xs: 0 1px 2px oklch(0% 0 0 / 0.04); --sh-sm: 0 1px 3px oklch(0% 0 0 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.04); --sh-md: 0 4px 8px oklch(0% 0 0 / 0.07), 0 1px 3px oklch(0% 0 0 / 0.05); --sh-lg: 0 8px 20px oklch(0% 0 0 / 0.09), 0 2px 6px oklch(0% 0 0 / 0.06); --sh-focus: 0 0 0 3px oklch(44% 0.145 252 / 0.25); --sh-focus-danger: 0 0 0 3px oklch(51% 0.185 20 / 0.25); /* Component heights */ --h-input: 36px; --h-input-sm: 30px; --h-input-lg: 44px; --h-btn: 36px; --h-btn-sm: 30px; --h-btn-lg: 44px; /* Motion */ --dur-fast: 120ms; --dur-normal: 200ms; --dur-slow: 350ms; --ease-std: cubic-bezier(0.2, 0, 0.0, 1.0); --ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1.0); /* Z-index */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-modal: 200; --z-toast: 300; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ── Base ── */ * { margin:0; padding:0; box-sizing:border-box; } body { font-family:var(--f-ui); font-size:var(--fz-base); color:var(--txt-primary); background:var(--surf-canvas); line-height:var(--lh-normal); } button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; } a { color:var(--txt-link); } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:none; box-shadow:var(--sh-focus); border-radius:var(--r-sm); } .mono { font-family:var(--f-mono); } /* ── App grid + staff nav shell ── */ .app { display:grid; grid-template-columns:232px 1fr; height:100vh; overflow:hidden; } .nav { background:var(--surf-panel); border-right:1px solid var(--brd-subtle); display:flex; flex-direction:column; padding:var(--sp-4) var(--sp-3); gap:2px; } .nav .brand { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3) var(--sp-5); text-decoration:none; color:var(--txt-primary); } .nav .brand .logo { width:26px; height:26px; border-radius:var(--r-md); background:var(--brand-primary); color:var(--brand-on-primary); display:grid; place-items:center; font-weight:700; font-size:var(--fz-md); } .nav .brand span { font-weight:700; font-size:var(--fz-lg); } .nav a.item { display:flex; align-items:center; gap:var(--sp-3); padding:7px var(--sp-3); border-radius:var(--r-md); color:var(--txt-secondary); text-decoration:none; font-weight:500; transition:background var(--dur-fast) var(--ease-std); } .nav a.item:hover { background:var(--surf-sunken); } .nav a.item.active { background:var(--brand-primary-light); color:var(--brand-primary); font-weight:600; } .nav .ic { width:16px; text-align:center; opacity:.85; } .nav .count { margin-left:auto; font-size:var(--fz-xs); font-weight:600; background:var(--brand-primary); color:var(--brand-on-primary); border-radius:var(--r-full); padding:1px 7px; } .nav .count.warn { background:var(--sem-danger); } .nav .section { font-size:var(--fz-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--txt-muted); padding:var(--sp-4) var(--sp-3) var(--sp-1); } .nav .me { margin-top:auto; display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-top:1px solid var(--brd-subtle); } .nav .me .sout { margin-left:auto; font-size:var(--fz-xs); color:var(--txt-muted); text-decoration:underline; text-underline-offset:2px; flex:none; } .nav .me .sout:hover { color:var(--txt-link); } .avatar { width:26px; height:26px; border-radius:var(--r-full); background:var(--sem-compliance-light); color:var(--sem-compliance); font-size:var(--fz-xs); font-weight:700; display:grid; place-items:center; flex:none; } .nav .me small { color:var(--txt-muted); display:block; font-size:var(--fz-xs); } /* ── Top bar ── */ .main { display:flex; flex-direction:column; overflow:hidden; } .topbar { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-3) var(--sp-6); border-bottom:1px solid var(--brd-subtle); background:var(--surf-raised); } .topbar h1 { font-size:var(--fz-xl); font-weight:700; } .search { flex:1 1; max-width:430px; display:flex; align-items:center; gap:var(--sp-2); height:32px; padding:0 var(--sp-3); background:var(--surf-sunken); border:1px solid var(--brd-subtle); border-radius:var(--r-md); color:var(--txt-muted); font-size:var(--fz-sm); } .search kbd { margin-left:auto; font-family:var(--f-mono); font-size:10px; background:var(--surf-raised); border:1px solid var(--brd-default); border-radius:var(--r-xs); padding:1px 5px; } .topbar .right { margin-left:auto; display:flex; align-items:center; gap:var(--sp-3); } .bell { position:relative; width:32px; height:32px; border-radius:var(--r-md); display:grid; place-items:center; } .bell:hover { background:var(--surf-sunken); } .bell .dot { position:absolute; top:5px; right:6px; width:7px; height:7px; border-radius:var(--r-full); background:var(--sem-danger); border:1.5px solid var(--surf-raised); } .content { flex:1 1; overflow-y:auto; padding:var(--sp-5) var(--sp-6); } /* ── Portal (mobile-first) shell ── */ .pwrap { max-width:430px; margin:0 auto; min-height:100vh; background:var(--surf-canvas); display:flex; flex-direction:column; position:relative; border-left:1px solid var(--brd-subtle); border-right:1px solid var(--brd-subtle); } .ptop { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--surf-raised); border-bottom:1px solid var(--brd-subtle); position:-webkit-sticky; position:sticky; top:0; z-index:20; } .ptop .logo { width:26px; height:26px; border-radius:var(--r-md); background:var(--brand-primary); color:var(--brand-on-primary); display:grid; place-items:center; font-weight:700; flex:none; } .ptop .org { font-weight:700; font-size:var(--fz-md); display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--txt-primary); } .ptop .org small { display:block; font-weight:500; font-size:var(--fz-xs); color:var(--txt-muted); } .pgear { width:32px; height:32px; display:grid; place-items:center; border-radius:var(--r-md); color:var(--txt-muted); text-decoration:none; font-size:var(--fz-md); flex:none; } .pgear:hover { background:var(--surf-sunken); } .pbody { flex:1 1; padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-4); padding-bottom:84px; } .pnav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px; display:grid; grid-template-columns:repeat(2,1fr); background:var(--surf-raised); border-top:1px solid var(--brd-default); z-index:30; } .pnav a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 0 12px; font-size:var(--fz-xs); font-weight:600; color:var(--txt-muted); text-decoration:none; } .pnav a.active { color:var(--brand-primary); } .pnav a .pic { font-size:17px; } /* ── Buttons ── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:var(--h-btn-sm, 30px); padding:0 var(--sp-4); border-radius:var(--r-md); font-weight:600; font-size:var(--fz-sm); transition:all var(--dur-fast) var(--ease-std); } .btn.pri { background:var(--brand-primary); color:var(--brand-on-primary); } .btn.pri:hover { background:var(--brand-primary-hover); } .btn.sec { background:var(--surf-raised); border:1px solid var(--brd-default); color:var(--txt-primary); } .btn.sec:hover { border-color:var(--brd-strong); } .btn.danger { background:var(--sem-danger); color:#fff; } .btn.ghost-danger { color:var(--sem-danger-text); } .btn.ghost-danger:hover { background:var(--sem-danger-light); } .btn.lg { height:var(--h-btn); padding:0 var(--sp-5); font-size:var(--fz-md); } .btn.xl { height:44px; padding:0 var(--sp-6); font-size:var(--fz-md); width:100%; } .btn[disabled] { opacity:.55; cursor:not-allowed; } /* ── Badges / chips ── */ .badge { display:inline-flex; align-items:center; height:18px; padding:0 8px; border-radius:var(--r-full); font-size:var(--fz-xs); font-weight:600; } .badge.due { background:var(--sem-warning-light); color:var(--sem-warning-text); } .badge.overdue { background:var(--sem-danger-light); color:var(--sem-danger-text); } .badge.ok { background:var(--sem-success-light); color:var(--sem-success-text); } .badge.compliance { background:var(--sem-compliance-light); color:var(--sem-compliance); } .badge.ai { background:var(--sem-ai-light); color:var(--sem-ai-text); } .badge.audit { background:var(--sem-audit-light); color:var(--sem-audit); } .badge.neutral { background:var(--surf-sunken); color:var(--txt-secondary); } .chip { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 var(--sp-3); border-radius:var(--r-full); border:1px solid var(--brd-default); font-size:var(--fz-sm); font-weight:500; color:var(--txt-secondary); background:var(--surf-raised); cursor:pointer; } .chip:hover { border-color:var(--brd-strong); } .chip.on { background:var(--brand-primary-light); border-color:var(--brand-primary-mid); color:var(--brand-primary); font-weight:600; } /* ── Cards ── */ .card { background:var(--surf-raised); border:1px solid var(--brd-subtle); border-radius:var(--r-lg); box-shadow:var(--sh-xs); } .card .chd { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--brd-subtle); font-weight:600; font-size:var(--fz-md); } .card .chd .right { margin-left:auto; font-size:var(--fz-xs); color:var(--txt-muted); font-weight:500; } .card .cbd { padding:var(--sp-4); } /* ── Forms ── */ .field { display:flex; flex-direction:column; gap:5px; } .field label { font-size:var(--fz-sm); font-weight:600; } .field .hint { font-size:var(--fz-xs); color:var(--txt-muted); } .field .err { font-size:var(--fz-xs); color:var(--txt-danger); } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color:var(--sem-danger); } input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea { font:inherit; height:var(--h-input); padding:0 var(--sp-3); border:1px solid var(--brd-default); border-radius:var(--r-md); background:var(--surf-raised); color:var(--txt-primary); width:100%; } textarea { height:auto; padding:var(--sp-2) var(--sp-3); resize:vertical; } fieldset { border:1px solid var(--brd-subtle); border-radius:var(--r-md); padding:var(--sp-3); } legend { font-size:var(--fz-sm); font-weight:600; padding:0 var(--sp-1); } /* ── Tables ── */ table.dt { width:100%; border-collapse:collapse; font-size:var(--fz-base); } table.dt th { text-align:left; font-size:var(--fz-xs); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--txt-muted); padding:8px var(--sp-3); border-bottom:1px solid var(--brd-default); background:var(--surf-raised); } table.dt td { padding:9px var(--sp-3); border-bottom:1px solid var(--brd-subtle); } table.dt tr:hover td { background:var(--surf-panel); } table.dt .amt { font-family:var(--f-mono); text-align:right; } table.dt .id { font-family:var(--f-mono); font-size:var(--fz-sm); color:var(--txt-secondary); } /* ── States: empty / loading / error ── */ .state { flex:1 1; display:grid; place-items:center; padding:var(--sp-12); text-align:center; } .state .art { width:56px; height:56px; border-radius:var(--r-xl); display:grid; place-items:center; font-size:24px; margin:0 auto var(--sp-4); } .state h3 { font-size:var(--fz-lg); font-weight:700; margin-bottom:var(--sp-1); } .state p { color:var(--txt-secondary); font-size:var(--fz-sm); max-width:340px; margin:0 auto var(--sp-4); } .skel { padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); } .skel .row { height:54px; border-radius:var(--r-md); background:linear-gradient(90deg, var(--surf-sunken) 25%, var(--surf-panel) 50%, var(--surf-sunken) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; } .errband { display:flex; padding:var(--sp-3) var(--sp-4); border:1px solid var(--sem-danger); border-radius:var(--r-md); background:var(--sem-danger-light); color:var(--sem-danger-text); font-size:var(--fz-sm); align-items:center; gap:var(--sp-3); } .errband button { font-weight:700; text-decoration:underline; color:var(--sem-danger-text); margin-left:auto; } /* ── Placeholder (Phase-1 styled-empty: a section whose data lands with later waves) ── */ .placeholder { border:1px dashed var(--brd-default); border-radius:var(--r-lg); background:var(--surf-panel); padding:var(--sp-6); text-align:center; } .placeholder .art { width:48px; height:48px; border-radius:var(--r-xl); display:grid; place-items:center; font-size:20px; margin:0 auto var(--sp-3); background:var(--brand-primary-light); color:var(--brand-primary); } .placeholder h3 { font-size:var(--fz-md); font-weight:700; margin-bottom:var(--sp-1); } .placeholder p { color:var(--txt-secondary); font-size:var(--fz-sm); max-width:420px; margin:0 auto; line-height:var(--lh-normal); } /* ── Timeline ── */ .tl { list-style:none; } .tl li { display:flex; gap:var(--sp-3); position:relative; padding-bottom:var(--sp-4); } .tl li::before { content:''; position:absolute; left:7px; top:18px; bottom:0; width:2px; background:var(--brd-subtle); } .tl li:last-child::before { display:none; } .tl .dot { width:16px; height:16px; border-radius:var(--r-full); flex:none; margin-top:2px; display:grid; place-items:center; font-size:9px; color:#fff; } .tl .dot.done { background:var(--sem-success); } .tl .dot.cur { background:var(--brand-primary); } .tl .dot.pend { background:var(--brd-default); } .tl .ev-t { font-weight:600; font-size:var(--fz-sm); } .tl .ev-m { font-size:var(--fz-xs); color:var(--txt-muted); } .tl .ev-m .id { font-family:var(--f-mono); background:var(--sem-audit-light); color:var(--sem-audit); padding:0 5px; border-radius:var(--r-xs); } /* ── Stepper ── */ .stepper { display:flex; gap:var(--sp-2); align-items:center; } .stepper .st { display:flex; align-items:center; gap:6px; font-size:var(--fz-sm); font-weight:600; color:var(--txt-muted); } .stepper .st .n { width:20px; height:20px; border-radius:var(--r-full); display:grid; place-items:center; font-size:var(--fz-xs); background:var(--surf-sunken); } .stepper .st.done .n { background:var(--sem-success); color:#fff; } .stepper .st.cur { color:var(--brand-primary); } .stepper .st.cur .n { background:var(--brand-primary); color:var(--brand-on-primary); } .stepper .bar { flex:1 1; height:2px; background:var(--brd-subtle); min-width:16px; } /* ── Toast ── */ .toast { position:fixed; bottom:var(--sp-6); right:var(--sp-6); background:var(--surf-inverse); color:var(--txt-inverse); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); box-shadow:var(--sh-lg); font-size:var(--fz-sm); animation:fadeIn var(--dur-normal) var(--ease-std); z-index:var(--z-toast); } /* ── Auth shell (login + onboard) ── */ .authwrap { min-height:100vh; display:grid; place-items:center; padding:var(--sp-6); } .authcol { width:100%; max-width:400px; display:flex; flex-direction:column; gap:var(--sp-5); } .authbrand { display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); text-align:center; } .authbrand .logo { width:44px; height:44px; border-radius:var(--r-xl); background:var(--brand-primary); color:var(--brand-on-primary); display:grid; place-items:center; font-weight:700; font-size:var(--fz-2xl); box-shadow:var(--sh-sm); } .authbrand h1 { font-size:var(--fz-2xl); font-weight:700; line-height:var(--lh-tight); } .authbrand .sub { font-size:var(--fz-sm); color:var(--txt-secondary); } .authcard { padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); } .authcard h2 { font-size:var(--fz-lg); font-weight:700; } .authcard .lead { font-size:var(--fz-sm); color:var(--txt-secondary); margin-top:-10px; line-height:var(--lh-normal); } .row-between { display:flex; align-items:center; justify-content:space-between; } .linkbtn { font-size:var(--fz-sm); font-weight:600; color:var(--txt-link); text-decoration:underline; text-underline-offset:2px; background:none; border:none; padding:0; align-self:flex-start; } .whoami { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); background:var(--surf-sunken); border-radius:var(--r-md); font-size:var(--fz-sm); } .whoami .em { font-weight:600; } .whoami .sw { margin-left:auto; } .trustchk { display:flex; align-items:flex-start; gap:var(--sp-2); font-size:var(--fz-sm); color:var(--txt-secondary); cursor:pointer; } .trustchk input { width:15px; height:15px; margin-top:2px; accent-color:var(--brand-primary); flex:none; } .seclock { display:flex; align-items:center; justify-content:center; gap:6px; font-size:var(--fz-xs); color:var(--txt-muted); } .trustfoot { text-align:center; font-size:var(--fz-xs); color:var(--txt-muted); line-height:var(--lh-relax); } .trustfoot .mono { font-size:10px; } .nopass { display:flex; gap:var(--sp-2); align-items:flex-start; padding:var(--sp-3); background:var(--brand-primary-light); border-radius:var(--r-md); font-size:var(--fz-sm); color:var(--txt-secondary); line-height:var(--lh-normal); } .nopass .ic { flex:none; } .sentto { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); background:var(--surf-sunken); border-radius:var(--r-md); font-size:var(--fz-sm); } .sentto .em { font-weight:600; } .sentto button { margin-left:auto; } .resend { font-size:var(--fz-sm); color:var(--txt-muted); text-align:center; } .resend button[disabled] { color:var(--txt-muted); text-decoration:none; cursor:default; font-weight:500; } .stepdots { display:flex; gap:6px; justify-content:center; } .stepdots span { width:8px; height:8px; border-radius:var(--r-full); background:var(--brd-default); } .stepdots span.on { background:var(--brand-primary); } .expband { display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-3); background:var(--sem-warning-light); color:var(--sem-warning-text); border-radius:var(--r-md); font-size:var(--fz-sm); line-height:var(--lh-normal); } .sentpane, .donepane { display:flex; flex-direction:column; gap:var(--sp-3); text-align:center; } .sentpane .art, .donepane .art { width:52px; height:52px; border-radius:var(--r-full); background:var(--sem-success-light); color:var(--sem-success-text); display:grid; place-items:center; font-size:22px; margin:0 auto; } .codegrid { display:grid; grid-template-columns:1fr 1fr; grid-gap:var(--sp-2); gap:var(--sp-2); background:var(--surf-sunken); border:1px solid var(--brd-subtle); border-radius:var(--r-md); padding:var(--sp-3); } .codegrid code { font-family:var(--f-mono); font-size:var(--fz-sm); } .qrbox { display:grid; place-items:center; grid-gap:var(--sp-2); gap:var(--sp-2); padding:var(--sp-4); background:var(--surf-sunken); border:1px solid var(--brd-subtle); border-radius:var(--r-md); text-align:center; } .qrbox .key { font-family:var(--f-mono); font-size:var(--fz-sm); word-break:break-all; color:var(--txt-secondary); } /* ── Portal desktop layout (founder directive: SMB portal must work on desktop too) ── */ @media (min-width: 900px) { .pwrap { max-width:1160px; display:grid; grid-template-columns:220px 1fr; grid-template-rows:auto 1fr; min-height:100vh; } .ptop { grid-column:1 / -1; padding:var(--sp-3) var(--sp-6); } .pnav { position:static; transform:none; width:auto; max-width:none; grid-column:1; grid-row:2; display:flex; flex-direction:column; gap:2px; padding:var(--sp-4) var(--sp-3); border-top:none; border-right:1px solid var(--brd-subtle); background:var(--surf-panel); align-self:stretch; } .pnav a { flex-direction:row; align-items:center; justify-content:flex-start; gap:var(--sp-3); padding:8px var(--sp-3); border-radius:var(--r-md); font-size:var(--fz-base); position:relative; } .pnav a:hover { background:var(--surf-sunken); } .pnav a.active { background:var(--brand-primary-light); } .pnav a .pic { font-size:15px; width:18px; text-align:center; } .pbody { grid-column:2; grid-row:2; padding:var(--sp-6); padding-bottom:var(--sp-6); max-width:820px; } } /* ── Portal home primitives (greeting, attention cards, pulse) ── */ .greet h1 { font-size:var(--fz-2xl); font-weight:700; letter-spacing:-0.01em; } .greet p { font-size:var(--fz-sm); color:var(--txt-muted); margin-top:2px; } .attn { display:flex; flex-direction:column; gap:var(--sp-2); } a.attn-card { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--surf-raised); border:1px solid var(--brd-subtle); border-radius:var(--r-lg); box-shadow:var(--sh-xs); text-decoration:none; color:var(--txt-primary); transition:border-color var(--dur-fast) var(--ease-std); } a.attn-card:hover { border-color:var(--brd-strong); } .attn-card .stripe { width:4px; align-self:stretch; border-radius:var(--r-full); flex:none; } .attn-card .stripe.danger { background:var(--sem-danger); } .attn-card .stripe.warn { background:var(--sem-warning); } .attn-card .stripe.ok { background:var(--sem-success); } .attn-card .stripe.neutral { background:var(--brd-default); } .attn-card .tx { flex:1 1; min-width:0; } .attn-card .tx b { display:block; font-size:var(--fz-md); font-weight:600; line-height:var(--lh-snug); } .attn-card .tx > span { display:block; font-size:var(--fz-sm); color:var(--txt-muted); margin-top:1px; } .attn-card .go { color:var(--txt-muted); font-size:var(--fz-lg); flex:none; } .sect-h { display:flex; align-items:baseline; gap:var(--sp-2); } .sect-h h2 { font-size:var(--fz-md); font-weight:700; } .sect-h span { font-size:var(--fz-xs); color:var(--txt-muted); } /* ── Signed-link customer shell (the SMB's OWN brand) ── */ .lkwrap { max-width:640px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; padding:var(--sp-5) var(--sp-4) var(--sp-8); gap:var(--sp-4); font-size:var(--fz-md); } .lkbrand { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) 0 var(--sp-2); } .lkbrand .logo { width:42px; height:42px; border-radius:var(--r-lg); background:var(--brand-primary); color:var(--brand-on-primary); display:grid; place-items:center; font-weight:700; font-size:var(--fz-xl); box-shadow:var(--sh-sm); flex:none; } .lkbrand h1 { font-size:var(--fz-2xl); font-weight:700; line-height:var(--lh-tight); } .lkbrand .tag { font-size:var(--fz-sm); color:var(--txt-secondary); } .lkbrand .exp { margin-left:auto; } .badge.exp { background:var(--surf-sunken); color:var(--txt-secondary); height:auto; padding:5px 10px; gap:5px; } .qhead { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2) var(--sp-3); } .qhead h2 { font-size:var(--fz-xl); font-weight:700; } .qmeta { display:grid; grid-template-columns:auto 1fr; grid-gap:4px var(--sp-4); gap:4px var(--sp-4); font-size:var(--fz-sm); } .qmeta dt { color:var(--txt-muted); } .qmeta dd { font-weight:500; } .terms { font-size:var(--fz-sm); color:var(--txt-secondary); line-height:var(--lh-relax); } .lkactions { display:flex; flex-direction:column; gap:var(--sp-2); } .confirm { text-align:center; padding:var(--sp-8) var(--sp-5); } .confirm .art { width:56px; height:56px; border-radius:var(--r-full); display:grid; place-items:center; font-size:26px; margin:0 auto var(--sp-4); } .confirm h3 { font-size:var(--fz-xl); font-weight:700; margin-bottom:var(--sp-2); } .confirm p { color:var(--txt-secondary); max-width:380px; margin:0 auto; line-height:var(--lh-normal); } .lkfoot { margin-top:auto; border-top:1px solid var(--brd-subtle); padding-top:var(--sp-4); display:flex; flex-direction:column; gap:6px; font-size:var(--fz-sm); color:var(--txt-secondary); text-align:center; } .lkfoot .row { display:flex; justify-content:center; gap:var(--sp-4); flex-wrap:wrap; } .lkfoot a { font-weight:600; } .lkfoot .fine { font-size:var(--fz-xs); color:var(--txt-muted); } /* OTP digit row */ .otp { display:flex; gap:var(--sp-2); } .otp input { width:44px; height:50px; text-align:center; font-family:var(--f-mono); font-size:var(--fz-2xl); padding:0; } .otp input:focus { border-color:var(--brand-primary); } /* ── Client detail header + tabs + kv list ── */ .chead { padding:var(--sp-4) var(--sp-6) 0; border-bottom:1px solid var(--brd-subtle); background:var(--surf-raised); } .chead .crumb { font-size:var(--fz-xs); color:var(--txt-muted); margin-bottom:var(--sp-2); } .chead .crumb a { color:var(--txt-link); text-decoration:none; } .chead h2 { font-size:var(--fz-2xl); font-weight:700; } .chead .sub { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin-top:var(--sp-2); font-size:var(--fz-sm); color:var(--txt-secondary); } .chead .tabs { display:flex; gap:var(--sp-1); margin-top:var(--sp-4); } .chead .tabs button { padding:var(--sp-2) var(--sp-3); font-size:var(--fz-sm); font-weight:600; color:var(--txt-muted); border-bottom:2px solid transparent; margin-bottom:-1px; } .chead .tabs button.on { color:var(--brand-primary); border-bottom-color:var(--brand-primary); } .kv { display:grid; grid-template-columns:auto 1fr; grid-gap:var(--sp-2) var(--sp-4); gap:var(--sp-2) var(--sp-4); font-size:var(--fz-sm); } .kv dt { color:var(--txt-muted); } .kv dd { font-weight:500; } /* =========================================================================== BAS approval + lodge surfaces (AMD-V2-BUILD-033) — ported from the mocks portal/bas-approval.html + staff/bas-review.html. Decision bar, amount card, figures table, big terminal states, receipt rows, and the step-up modal. =========================================================================== */ /* page header (portal review screen) */ .ph h1 { font-size:var(--fz-3xl); font-weight:700; line-height:var(--lh-tight); } .ph .sub { font-size:var(--fz-md); color:var(--txt-secondary); margin-top:4px; } /* amount card */ .amount-card { text-align:center; padding:var(--sp-5) var(--sp-4); } .amount-card .lbl { font-size:var(--fz-sm); font-weight:600; color:var(--txt-secondary); } .amount-card .amt { font-family:var(--f-mono); font-size:var(--fz-4xl); font-weight:500; letter-spacing:-0.5px; margin:var(--sp-1) 0 var(--sp-2); } .amount-card .badges { display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; } /* plain-english explanation */ .explain { font-size:var(--fz-md); line-height:var(--lh-relax); } .explain b.m { font-family:var(--f-mono); font-weight:500; font-size:var(--fz-base); } .explain .nb { margin-top:var(--sp-3); padding:var(--sp-2) var(--sp-3); background:var(--sem-compliance-light); color:var(--sem-compliance); border-radius:var(--r-md); font-size:var(--fz-sm); font-weight:500; line-height:var(--lh-normal); } /* figures table (portal) */ table.fig { width:100%; border-collapse:collapse; font-size:var(--fz-base); } table.fig td { padding:8px 0; border-bottom:1px solid var(--brd-subtle); vertical-align:top; } table.fig tr:last-child td { border-bottom:none; font-weight:700; } table.fig .lbl { font-family:var(--f-mono); font-size:var(--fz-sm); color:var(--txt-secondary); width:40px; } table.fig .amt { font-family:var(--f-mono); text-align:right; white-space:nowrap; } table.fig .des small { display:block; color:var(--txt-muted); font-size:var(--fz-xs); font-weight:400; } /* big terminal states (approved / lodged / denied / not-found / done) */ .bigstate { text-align:center; padding:var(--sp-8) var(--sp-4) var(--sp-4); } .bigstate .art { width:64px; height:64px; border-radius:var(--r-full); display:grid; place-items:center; font-size:28px; margin:0 auto var(--sp-4); background:var(--sem-success-light); color:var(--sem-success-text); } .bigstate h2 { font-size:var(--fz-2xl); font-weight:700; } .bigstate p { font-size:var(--fz-md); color:var(--txt-secondary); margin-top:var(--sp-1); } /* receipt rows (portal + staff) */ .receipt .row { display:flex; justify-content:space-between; gap:var(--sp-3); padding:7px var(--sp-4); border-bottom:1px solid var(--brd-subtle); font-size:var(--fz-sm); } .receipt .row:last-child { border-bottom:none; } .receipt .row .k { color:var(--txt-secondary); } .receipt .row .v { font-weight:600; text-align:right; } /* decision bar — a sticky action band at the foot of the review screen */ .decision { position:-webkit-sticky; position:sticky; bottom:0; z-index:var(--z-raised); margin-top:var(--sp-4); padding:var(--sp-4); background:var(--surf-raised); border:1px solid var(--brd-default); border-radius:var(--r-lg); box-shadow:var(--sh-md); display:flex; flex-direction:column; gap:var(--sp-3); } .decision .note { font-size:var(--fz-sm); color:var(--txt-secondary); line-height:var(--lh-normal); } .decision .grp { display:flex; gap:var(--sp-2); } .decision .grp .btn { flex:1 1; } /* staff page header */ .phead { background:var(--surf-raised); border:1px solid var(--brd-subtle); border-radius:var(--r-lg); padding:var(--sp-4) var(--sp-5); } .phead .crumb { font-size:var(--fz-xs); color:var(--txt-muted); margin-bottom:var(--sp-1); } .phead .crumb a { color:var(--txt-link); text-decoration:none; } /* step-up MFA modal (both apps) */ .modal-overlay { position:fixed; inset:0; background:var(--surf-overlay); display:grid; place-items:center; z-index:var(--z-modal); padding:var(--sp-4); animation:fadeIn var(--dur-normal) var(--ease-std); } .modal { width:100%; max-width:400px; background:var(--surf-raised); border-radius:var(--r-xl); box-shadow:var(--sh-lg); padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); } .modal h2 { font-size:var(--fz-xl); font-weight:700; } .modal .modal-lead { font-size:var(--fz-sm); color:var(--txt-secondary); line-height:var(--lh-normal); } .modal .modal-actions { display:flex; gap:var(--sp-2); } .modal .modal-actions .btn { flex:1 1; } /* =========================================================================== Action queue (AMD-V2-BUILD-034) — ported from the Staff Action Queue mock. The split-pane (list + detail) on the staff landing. The list rows are real