/* Culture Of One — Demo Clinic Operating System Shared design system. Lifted from the live client dashboards (Jane / Jeremy / Daniel): light theme, white cards, semantic status colours fixed across every page. Two brand skins toggle via : CO1 (black/gold) and Meridian (clinic teal). Data-encoding colours (--good/--warn/--bad, chart palettes) NEVER rebrand. */ :root{ --bg:#f4f6f8; --card:#fff; --ink:#12212e; --muted:#6b7a88; --accent:#0e7c86; --accent2:#12a3b0; /* Meridian teal (default skin) */ --brand:#0e7c86; /* brandbar top rule + avatar tint */ --warn:#c8871b; --good:#1f9d55; --bad:#c0492f; /* fixed meaning, every client */ --line:#e4e9ee; --hl:#eef7f8; --bar-bill:#12a3b0; --bar-cost:#cfe6e9; /* chart fills (fixed) */ --barbg:#fff; --bartext:var(--ink); --logo:var(--accent); } /* CO1 house skin — black chrome, gold accent */ html[data-brand="co1"]{ --accent:#9a7b1f; --accent2:#c6a24e; /* gold, darkened for white-text contrast */ --brand:#c6a24e; --barbg:#0c0d10; --bartext:#f3ead0; --logo:#c6a24e; } *{box-sizing:border-box;margin:0;padding:0} body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg);color:var(--ink);padding:24px;max-width:1120px;margin:0 auto} a{color:var(--accent)} h1{font-size:24px;letter-spacing:-.01em} h2{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px} .sub{color:var(--muted);font-size:14px;margin-top:2px} /* header band ---------------------------------------------------------- */ .brandbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--barbg); color:var(--bartext);border-radius:14px;padding:13px 20px;margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,.06);border-top:4px solid var(--brand)} .brandbar .wm{font-weight:800;font-size:18px;letter-spacing:.01em;color:var(--logo);white-space:nowrap} .brandbar .wm small{display:block;font-weight:500;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--bartext);opacity:.7} .brandbar .bt{font-size:15px;font-weight:700;color:var(--bartext)} .brandbar .right{margin-left:auto;display:flex;align-items:center;gap:12px} .brandbar .right a{color:var(--bartext);opacity:.85;font-size:13.5px;text-decoration:none} .brandbar .right a:hover{opacity:1} .demo{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em; padding:2px 8px;border-radius:9px;background:#f4cccc;color:#8a2c1c} .bswitch{border:1px solid rgba(255,255,255,.25);background:transparent;color:var(--bartext); font:600 12px system-ui;padding:5px 11px;border-radius:20px;cursor:pointer;opacity:.9} html[data-brand="meridian"] .bswitch{border-color:var(--line)} .bswitch:hover{opacity:1} .crumb{margin-left:auto} .crumb a{color:var(--accent);font-size:14px;text-decoration:none} /* KPI tiles ------------------------------------------------------------ */ .hero{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0} .stat{background:var(--card);border-radius:14px;padding:18px 20px;flex:1;min-width:150px; box-shadow:0 1px 3px rgba(0,0,0,.06)} .stat .n{font-size:30px;font-weight:700;letter-spacing:-.02em} .stat .l{color:var(--muted);font-size:13px;margin-top:3px;line-height:1.35} .stat.big .n{color:var(--accent)} .stat.good .n{color:var(--good)} .stat.warn .n{color:var(--warn)} .stat.bad .n{color:var(--bad)} .stat.hl{border-top:4px solid var(--good)} /* cards ---------------------------------------------------------------- */ .card{background:var(--card);border-radius:14px;padding:20px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.06)} .card h2+.sub{margin-bottom:8px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:760px){.grid2{grid-template-columns:1fr}} /* nav cards (home hub -> spokes) --------------------------------------- */ .navgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px} @media(max-width:760px){.navgrid{grid-template-columns:1fr}} .nav{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line); border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.05);transition:.15s} .nav:hover{border-color:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)} .nav .ico{font-size:26px;line-height:1} .nav .nt{font-weight:700;font-size:16px} .nav .nd{color:var(--muted);font-size:12.5px;margin-top:2px} .nav .arr{margin-left:auto;color:var(--muted);font-size:20px} /* tabs + segmented toggles --------------------------------------------- */ .tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .tab{border:1px solid var(--line);background:#fff;color:var(--ink);padding:7px 14px;border-radius:20px; cursor:pointer;font-size:14px;transition:.15s} .tab:hover{border-color:var(--accent2)} .tab.on{background:var(--accent);color:#fff;border-color:var(--accent)} .seg{display:flex;border:1px solid var(--line);border-radius:20px;overflow:hidden} .seg button{border:0;background:#fff;padding:7px 16px;cursor:pointer;font-size:14px;color:var(--ink)} .seg button.on{background:var(--accent2);color:#fff} .spacer{margin-left:auto} /* tables --------------------------------------------------------------- */ table{width:100%;border-collapse:collapse;font-size:14px} thead th{color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase; letter-spacing:.03em;padding:6px 10px;text-align:right;border-bottom:1px solid var(--line)} thead th:first-child{text-align:left} tbody td{padding:8px 10px;border-top:1px solid var(--line);text-align:right} tbody td:first-child{text-align:left} tr.tot td{font-weight:700;border-top:2px solid var(--ink)} tr.own td{color:var(--muted)} tr.sub td:first-child{padding-left:24px;color:var(--muted)} tr.head td{font-weight:700;background:#fafcfc} .pos{color:var(--good)} .neg{color:var(--bad)} .amb{color:var(--warn)} /* insight callouts ----------------------------------------------------- */ .ins{border-left:3px solid var(--accent);background:#f0f8f9;padding:12px 14px;border-radius:0 8px 8px 0; margin:10px 0;font-size:14.5px} .ins.good{border-color:var(--good);background:#eefaf1} .ins.warn{border-color:var(--warn);background:#fdf6ec} .ins.bad{border-color:var(--bad);background:#fbeeeb} html[data-brand="co1"] .ins{background:#faf6ea} /* pills + status tags -------------------------------------------------- */ .pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;background:#eef3f5; color:var(--muted);margin-left:6px} .tag{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:10px} .tag.ok{background:#d9ead3;color:#1f6b3b} .tag.rev{background:#fce5cd;color:#8a5a13} .tag.bad{background:#f4cccc;color:#8a2c1c} /* avatars -------------------------------------------------------------- */ .avi{display:inline-flex;width:26px;height:26px;border-radius:50%;vertical-align:-8px;margin-right:8px; background:color-mix(in srgb,var(--brand) 14%,#fff);color:var(--brand);font-size:11px;font-weight:700; align-items:center;justify-content:center} .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px} /* funnel (marketing) --------------------------------------------------- */ .flow{display:flex;flex-wrap:wrap;align-items:stretch;margin:14px 0 4px} .step{flex:1;min-width:110px;padding:12px 10px;text-align:center;position:relative} .step .fn{font-size:24px;font-weight:700} .step .fl{font-size:12px;color:var(--muted);margin-top:2px} .step:not(:last-child):after{content:"→";position:absolute;right:-8px;top:34%;color:var(--muted);font-size:18px} /* wf two-col table (unit economics) ------------------------------------ */ .wf{width:100%;border-collapse:collapse;font-size:14.5px} .wf td{padding:9px 10px;border-top:1px solid var(--line)} .wf td:last-child{text-align:right;font-weight:700} /* gates (target vs actual) --------------------------------------------- */ .gate{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px} .gate .g{min-width:190px;font-weight:700} .gate .s{color:var(--muted)} /* sliders (simulator) -------------------------------------------------- */ .lever{margin:14px 0} .lever .lt{font-weight:700;font-size:14px} .lever .kv{color:var(--accent);font-weight:700} .lever .ld{color:var(--muted);font-size:12.5px;margin:2px 0 6px} input[type=range]{width:100%;accent-color:var(--accent)} .meter{height:16px;border-radius:8px;border:1px solid var(--line);overflow:hidden;position:relative; background:linear-gradient(90deg,#1f9d55,#c8871b 55%,#c0492f)} .meter .fill{position:absolute;top:0;right:0;height:100%;background:var(--card);opacity:.82} .meter .tick{position:absolute;top:-3px;width:1px;height:22px;background:var(--ink);opacity:.5} /* chart helpers -------------------------------------------------------- */ svg .gl{stroke:var(--line);stroke-width:1} svg .axt{fill:var(--muted);font-size:11px} svg .dl{fill:var(--ink);font-size:11.5px;font-weight:700} svg .dlm{fill:var(--muted);font-size:11px} .bar{fill:var(--bar-bill)} .bar.dim{fill:var(--bar-cost)} .legend{font-size:12px;color:var(--muted);margin:6px 0} .legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin:0 5px -1px 12px} .foot{color:var(--muted);font-size:12px;margin:22px 0 8px;line-height:1.6} .hint{color:var(--muted);font-size:14px;padding:12px 14px;background:#fafcfc;border:1px dashed var(--line); border-radius:8px;margin:8px 0}