/* Card Scout — Solutions Plaza aesthetic (Daikin navy + cyan, light-first). Ported from the SP design system: deep-navy header/primary, bright cyan brand accent, white cards on a cool off-white field, soft gray-blue borders, 0.7rem radii, Inter type. Class names match the existing markup/JS. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap'); :root { /* tells the browser to render native controls (select popups, checkboxes, date pickers, scrollbars) for the active theme — overridden in dark below */ color-scheme: light; /* ---- SP design tokens (HSL, light) ---- */ --bg: hsl(210 33% 98%); --surface: #fff; /* cards / panels */ --surface-2: hsl(213 27% 96%); /* secondary / muted fill */ --surface-3: hsl(213 27% 92%); /* hover / inset */ --text: hsl(215 38% 14%); /* near-black navy */ --muted: hsl(215 14% 44%); --border: hsl(214 25% 89%); --border-strong: hsl(214 22% 82%); --primary: hsl(209 72% 15%); /* deep Daikin navy */ --primary-hover: hsl(209 66% 21%); --primary-fg: #fff; --brand: hsl(196 100% 42%); /* bright cyan */ --brand-hover: hsl(199 92% 36%); --brand-strong: hsl(200 90% 26%); /* cyan text on tint */ --brand-tint: hsl(196 84% 94%); /* pale cyan fill */ --header: hsl(209 72% 13%); /* topbar navy */ --header-fg: hsl(210 40% 96%); --header-muted: hsl(208 28% 72%); --success: hsl(142 60% 34%); --success-tint: hsl(142 52% 94%); --warn: hsl(32 80% 38%); --warn-tint: hsl(40 90% 93%); --danger: hsl(0 66% 47%); --danger-tint: hsl(0 78% 96%); --violet: hsl(265 50% 45%); --violet-tint: hsl(265 70% 96%); --radius: 0.7rem; --radius-sm: calc(var(--radius) - 3px); --radius-lg: calc(var(--radius) + 4px); --ring: hsl(196 100% 42% / 0.35); --shadow-sm: 0 1px 2px hsl(215 30% 20% / 0.06), 0 1px 3px hsl(215 30% 20% / 0.05); --shadow-md: 0 4px 12px hsl(215 35% 22% / 0.08), 0 2px 4px hsl(215 35% 22% / 0.05); --shadow-lg: 0 12px 32px hsl(215 38% 18% / 0.16); --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Fraunces', 'Inter', Georgia, serif; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---- dark theme (SP parity: deep navy field, cyan accent holds) ---- Applied via data-theme="dark" on , set by a no-FOUC inline script in index.html (and manually in the styleguide). Only tokens change; every component reads them, so the whole UI flips with no per-component rules. */ :root[data-theme='dark'] { color-scheme: dark; --bg: hsl(213 38% 8%); --surface: hsl(214 32% 12%); --surface-2: hsl(214 26% 16%); --surface-3: hsl(214 24% 20%); --text: hsl(210 30% 92%); --muted: hsl(214 16% 62%); --border: hsl(214 22% 22%); --border-strong: hsl(214 20% 30%); --primary: hsl(196 100% 45%); /* in dark, cyan carries the primary action */ --primary-hover: hsl(196 92% 52%); --primary-fg: hsl(213 60% 9%); --brand: hsl(196 100% 50%); --brand-hover: hsl(196 92% 58%); --brand-strong: hsl(196 90% 66%); /* cyan text on dark tint */ --brand-tint: hsl(200 70% 16%); --header: hsl(214 40% 10%); --header-fg: hsl(210 36% 90%); --header-muted: hsl(210 18% 64%); --success: hsl(142 56% 56%); --success-tint: hsl(146 40% 14%); --warn: hsl(36 82% 60%); --warn-tint: hsl(36 50% 14%); --danger: hsl(0 72% 64%); --danger-tint: hsl(0 45% 16%); --violet: hsl(265 70% 74%); --violet-tint: hsl(265 40% 18%); --ring: hsl(196 100% 50% / 0.4); --shadow-sm: 0 1px 2px hsl(213 60% 3% / 0.5), 0 1px 3px hsl(213 60% 3% / 0.4); --shadow-md: 0 4px 14px hsl(213 60% 3% / 0.5), 0 2px 6px hsl(213 60% 3% / 0.4); --shadow-lg: 0 16px 40px hsl(213 70% 2% / 0.6); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 15px/1.55 var(--font-sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* thin Daikin-cyan brand rule across the very top of the page */ border-top: 3px solid var(--brand); /* ease the light/dark flip so the toggle feels intentional, not jarring */ transition: background-color .35s var(--ease), color .35s var(--ease); } ::selection { background: var(--brand-tint); color: var(--brand-strong); } /* slim, themed scrollbars (WebKit/Blink) — match the cool surface palette */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } ::-webkit-scrollbar-track { background: transparent; } .hidden { display: none !important; } /* admin-only controls are hidden until boot() tags the body with the admin role, so a non-admin partner never sees scan/edit/manage actions they'd get 403 on. Default-hidden (no data-role yet) avoids a flash of admin UI before auth. */ body:not([data-role='admin']) .admin-only { display: none !important; } .muted { color: var(--muted); } .small { font-size: 12.5px; } .error { color: var(--danger); min-height: 1.2em; font-size: 13px; } h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; } /* ---- controls ---- */ button { cursor: pointer; font: 500 14px/1 var(--font-sans); border-radius: var(--radius-sm); border: 1px solid var(--border-strong); padding: .55rem .85rem; background: var(--surface); color: var(--text); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease, color .15s ease; } button:hover { background: var(--surface-2); border-color: var(--border-strong); } button:active { transform: translateY(1px); } button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } button.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); } button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } button.ghost { background: transparent; border-color: transparent; color: var(--muted); } button.ghost:hover { background: var(--surface-2); color: var(--text); } input, select, textarea { font: 14px/1.4 var(--font-sans); padding: .5rem .65rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); } input::placeholder { color: hsl(215 14% 60%); } input[type='checkbox'] { accent-color: var(--brand); width: 14px; height: 14px; vertical-align: -2px; } label:has(input[type='checkbox']) { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: .3rem; } a { color: var(--brand-strong); text-decoration: none; font-weight: 500; } a:hover { text-decoration: underline; } /* ---- login ---- */ .login { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 50% -10%, var(--brand-tint), transparent 60%), var(--bg); } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.2rem 2rem; width: 340px; display: flex; flex-direction: column; gap: .8rem; box-shadow: var(--shadow-lg); } .login-card h1 { margin: 0 0 .2rem; font-family: var(--font-display); font-size: 1.7rem; color: var(--primary); } .login-card button { background: var(--primary); border-color: var(--primary); color: #fff; padding: .65rem; font-weight: 600; } .login-card button:hover { background: var(--primary-hover); } /* ---- topbar ---- */ .topbar { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.4rem; background: var(--header); color: var(--header-fg); border-bottom: 1px solid hsl(209 60% 20%); position: sticky; top: 0; z-index: 5; box-shadow: var(--shadow-md); } .brand { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #fff; letter-spacing: -0.01em; display: flex; align-items: center; gap: .5rem; } .tabs { display: flex; gap: .15rem; margin-left: 1.2rem; flex: 1; } .tab { background: transparent; border: 0; color: var(--header-muted); padding: .5rem .8rem; border-radius: 0; font-weight: 500; border-bottom: 2px solid transparent; transition: color .15s var(--ease), border-color .2s var(--ease); } .tab:hover { background: transparent; color: #fff; } .tab.active { color: #fff; border-bottom-color: var(--brand); } .who { display: flex; align-items: center; gap: .8rem; } .who .muted { color: var(--header-muted); } .topbar .ghost { color: var(--header-muted); border: 1px solid hsl(209 40% 32%); } .topbar .ghost:hover { background: hsl(209 50% 22%); color: #fff; } main { max-width: 1180px; margin: 0 auto; padding: 1.4rem; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; } .panel-head h2 { margin: .2rem 0; font-size: 1.3rem; color: var(--primary); } .row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } /* ---- badges ---- */ .badge { font-size: 11px; font-weight: 600; padding: .14rem .55rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); vertical-align: middle; letter-spacing: .01em; } .badge.mock { background: var(--warn-tint); color: var(--warn); border-color: hsl(40 70% 80%); } .badge.live { background: var(--success-tint); color: var(--success); border-color: hsl(142 45% 80%); } /* ---- listing cards ---- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .9rem; margin-top: .9rem; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem; display: flex; gap: .8rem; box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); } .card img { width: 66px; height: 92px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); flex: none; border: 1px solid var(--border); } /* Broken/missing photo: keep the slot, show a quiet card glyph instead of a broken-image icon or an empty gap (src is cleared in JS on error). */ .card img.noimg { background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E") center / 26px no-repeat; } .card .body { flex: 1; min-width: 0; } /* Prominent primary CTA at the top of each card — opens the full analysis modal. */ .analysis-btn { display: inline-block; margin: 0 0 .5rem; padding: .32rem .85rem; font: 700 12.5px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--brand); border: 1px solid var(--brand); border-radius: 999px; box-shadow: 0 1px 2px hsl(196 100% 30% / 0.25); } .analysis-btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); transform: translateY(-1px); } .analysis-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .card .title { font-weight: 600; font-size: 13.5px; margin: 0 0 .3rem; color: var(--text); line-height: 1.35; } .card .meta { color: var(--muted); font-size: 12px; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .card .meta > span:first-child { font-weight: 700; color: var(--text); font-size: 13px; } /* score chip — quality at a glance */ .score { font-weight: 800; font-size: 1.2rem; border-radius: var(--radius-sm); padding: .25rem .5rem; min-width: 50px; text-align: center; height: fit-content; border: 1px solid transparent; } .score.hi { background: var(--success-tint); color: var(--success); border-color: hsl(142 45% 82%); } .score.mid { background: var(--warn-tint); color: var(--warn); border-color: hsl(40 70% 82%); } .score.lo { background: var(--surface-2); color: var(--muted); border-color: var(--border); } /* pills — raw/graded + status variants used by app.js */ .pill { font-size: 11px; font-weight: 600; padding: .14rem .5rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); } .pill.raw { background: var(--brand-tint); color: var(--brand-strong); border-color: hsl(196 60% 82%); } .pill.graded { background: var(--violet-tint); color: var(--violet); border-color: hsl(265 45% 86%); } .pill.success { background: var(--success-tint); color: var(--success); border-color: hsl(142 45% 82%); } .pill.warn { background: var(--warn-tint); color: var(--warn); border-color: hsl(40 70% 82%); } .pill.info { background: var(--brand-tint); color: var(--brand-strong); border-color: hsl(196 60% 82%); } .pill.danger { background: var(--danger-tint); color: var(--danger); border-color: hsl(0 70% 88%); } .pill.neutral { background: var(--surface-2); color: var(--muted); border-color: var(--border); } /* C1 condition pills: eligible (green), played/damaged (red), unstated red flag (amber, with a subtle dashed border so a MISSING condition reads as "caution" rather than a hard negative). */ .pill.cond-ok { background: var(--success-tint); color: var(--success); border-color: hsl(142 45% 82%); } .pill.cond-bad { background: var(--danger-tint); color: var(--danger); border-color: hsl(0 70% 88%); } .pill.cond-flag { background: var(--warn-tint); color: var(--warn); border: 1px dashed var(--warn); } /* C3 risk/downside line on each card: per-grade nets + break-even. Wraps on mobile (the app is responsive). pos/neg colorize the net figures. */ .risk-line { margin-top: .3rem; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; line-height: 1.5; } .risk-line .rk-cell b { color: var(--text); font-weight: 700; } .risk-line .rk-sep { opacity: .5; } .risk-line .rk-be { font-weight: 600; color: var(--text); } .pos { color: var(--success); font-weight: 600; } .neg { color: var(--danger); font-weight: 600; } /* Detail-modal outcome table: tighter than the data tables, right-aligned nums. */ .risk-table td, .risk-table th { padding: .4rem .55rem; } .risk-table td:nth-child(2), .risk-table td:nth-child(3), .risk-table td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; } .signals { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; } .signal { font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .12rem .45rem; color: var(--muted); } .signal b { color: var(--text); font-weight: 600; } .card .actions { display: flex; gap: .4rem; margin-top: .55rem; align-items: center; } .card .actions button, .card .actions a { font-size: 12px; padding: .32rem .6rem; } /* ---- tables / forms ---- */ .inline-form { display: flex; gap: .5rem; flex-wrap: wrap; margin: .7rem 0 1.1rem; padding: .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .inline-form input, .inline-form select { flex: 1; min-width: 120px; } .table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .table th, .table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--border); font-size: 13px; } .table thead th { background: var(--surface-2); color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover td { background: var(--brand-tint); } /* Dense tables scroll horizontally inside their own box rather than forcing the whole page to scroll sideways (critical on phones). No-op on wide screens. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- rails grid ---- */ .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow-sm); } .box h3 { margin: 0 0 .7rem; font-size: 1.02rem; color: var(--primary); display: flex; align-items: center; gap: .5rem; } .scorer { border-top: 1px solid var(--border); padding: .55rem 0; } .scorer:first-of-type { border-top: 0; } .scorer .name { font-weight: 600; display: flex; justify-content: space-between; } .status-list { list-style: none; padding: 0; margin: 0; } .status-list li { display: flex; justify-content: space-between; padding: .4rem 0; border-bottom: 1px solid var(--border); } .status-list li:last-child { border-bottom: 0; } .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .45rem; } .dot.on { background: var(--success); box-shadow: 0 0 0 3px var(--success-tint); } .dot.off { background: hsl(215 14% 70%); } /* ---- toast + modal ---- */ .toast { position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; padding: .65rem 1.1rem; border-radius: var(--radius); z-index: 20; box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 500; } .modal { position: fixed; inset: 0; background: hsl(215 40% 18% / 0.5); backdrop-filter: blur(2px); display: grid; place-items: start center; padding: 5vh 1rem; z-index: 30; overflow: auto; } .modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.3rem 1.5rem; width: min(580px, 96vw); box-shadow: var(--shadow-lg); } .modal-card h3 { color: var(--primary); } .modal-card h4 { margin: 1.1rem 0 .35rem; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } /* ---- theme toggle (topbar) ---- */ .theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; background: transparent; color: var(--header-muted); border: 1px solid hsl(209 40% 32%); font-size: 15px; line-height: 1; } .theme-toggle:hover { background: hsl(209 50% 22%); color: #fff; } :root[data-theme='dark'] .theme-toggle { border-color: var(--border-strong); } :root[data-theme='dark'] .theme-toggle:hover { background: var(--surface-2); } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: block; } :root[data-theme='dark'] .theme-toggle .sun { display: block; } :root[data-theme='dark'] .theme-toggle .moon { display: none; } /* ---- motion ---- */ @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes toastUp { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes shimmer { 100% { background-position: 200% 0; } } /* panels fade in when their tab activates; cards rise in with a short stagger */ .panel:not(.hidden) { animation: fade .25s var(--ease) both; } .cards .card { animation: rise .32s var(--ease) both; } .cards .card:nth-child(2) { animation-delay: .04s; } .cards .card:nth-child(3) { animation-delay: .08s; } .cards .card:nth-child(4) { animation-delay: .12s; } .cards .card:nth-child(5) { animation-delay: .16s; } .cards .card:nth-child(n+6) { animation-delay: .2s; } .modal:not(.hidden) { animation: fade .18s var(--ease) both; } .modal-card { animation: pop .26s var(--ease) both; } .toast:not(.hidden) { animation: toastUp .28s var(--ease) both; } @media (prefers-reduced-motion: reduce) { *, .panel:not(.hidden), .cards .card, .modal-card, .toast:not(.hidden) { animation: none !important; transition-duration: .01ms !important; } } /* ---- skeleton loaders ---- */ .skeleton-card { display: flex; gap: .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem; box-shadow: var(--shadow-sm); } .sk { background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--radius-sm); } .skeleton-card .sk.thumb { width: 66px; height: 92px; flex: none; } .skeleton-card .sk.line { height: 11px; margin-bottom: .5rem; } .skeleton-card .sk-body { flex: 1; padding-top: .2rem; } .sk.w70 { width: 70%; } .sk.w90 { width: 90%; } .sk.w40 { width: 40%; } .sk.w55 { width: 55%; } @media (prefers-reduced-motion: reduce) { .sk { animation: none; } } /* ---- empty / placeholder states ---- */ .empty { text-align: center; color: var(--muted); padding: 2.6rem 1rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); } .empty .glyph { font-size: 1.8rem; opacity: .7; display: block; margin-bottom: .5rem; } .empty .lead { color: var(--text); font-weight: 600; margin: 0 0 .2rem; } @media (max-width: 760px) { /* iOS Safari auto-zooms the page when you focus a field under 16px — pin form controls to 16px so tapping an input never zooms/jumps the layout. */ input, select, textarea { font-size: 16px; } main { padding: 1rem .8rem; } /* Topbar: brand + account on row one, tabs scroll on their own row. */ .topbar { flex-wrap: wrap; padding: .55rem .8rem; gap: .5rem; } .brand { font-size: 1.05rem; } /* Account controls flush-right on row 1 (logout ends at the screen edge). */ .who { margin-left: auto; gap: .5rem; } .who #who-name { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* flex: 0 0 100% (NOT just width:100%) is required to beat the base `.tabs { flex: 1 }` flex-basis:0 — without it the tabs stay squeezed on row 1 next to the account controls. This drops them to their own full-width row so the whole menu has room (and logout sits alone at the far right above it). */ .tabs { order: 3; flex: 0 0 100%; width: 100%; margin: .4rem 0 -.1rem; gap: .1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; white-space: nowrap; padding: .55rem .7rem; } /* Panel header + control rows stack; selects/inputs go full width so a long option label can't push the page wider than the screen. */ .panel-head { flex-direction: column; align-items: stretch; gap: .5rem; } .panel-head .row { width: 100%; } /* min-width:0 is essential: a