/* Ryse Insights Suite v9 - Extracted from ryse_full_8.html */ :root{--blue:#4B77F6;--navy:#44476A;--yellow:#FFF997;--bg:#FDFCF3;--white:#FFFFFF;--card:#FFFFFF;--dark:#44476A;--muted:#52526C;--border:#E8E6DA;--bt:#D6F7FE; --cs:#7AE973;--ce:#4B77F6;--cm:#FFCE7B;--cel:#FF6E50;--cc:#E6364C;--cp:#0F408F;--toast:#44476A; --bgs:#EAFBE8;--bge:#D6F7FE;--bgm:#FFF6E6;--bgel:#FFEFE9;--bgc:#FFE2DC; --bds:#B7F0B2;--bde:#B9D0FB;--bdm:#FFE0AE;--bdel:#FFC3B5;--bdc:#FBC3BB} /* ── Health-score band tokens (design system v10) ── Two guides per band: solid (text/titles) + gradient (charts/gauges/fills). Bands: Thriving 81-100 · Stable 61-80 · Strained 41-60 · At Risk 21-40 · Critical 0-20 */ :root{ --band-thrive:#7AE973;--band-stable:#4B77F6;--band-strain:#FFCE7B;--band-risk:#FF6E50;--band-crit:#E6364C; --grad-thrive:linear-gradient(135deg,#1DB49F,#7AE973,#CAFFA6); --grad-stable:linear-gradient(135deg,#0F408F,#4B77F6,#D6F7FE); --grad-strain:linear-gradient(135deg,#FF9E2C,#FFCE7B); --grad-risk:linear-gradient(135deg,#FF6E50,#FFCE7B); --grad-crit:linear-gradient(135deg,#820048,#E6364C); --grad-brand:linear-gradient(90deg,#4B77F6,#0F408F); } /* Regional Snapshot top-row layouts stack on narrow screens */ @media(max-width:920px){.phn-toprow,.phn-alert-compliance-row{grid-template-columns:1fr !important}} /* High contrast mode */ [data-contrast="high"]{--dark:#000000;--muted:#333333;--border:#666666;--bg:#ffffff;--white:#ffffff} [data-contrast="high"] .card{border-width:2px !important} [data-contrast="high"] .btn-s,[data-contrast="high"] .btn-p{border-width:2px !important;font-weight:700 !important} /* Font size presets */ [data-fontsize="small"]{font-size:12px !important} [data-fontsize="default"]{font-size:14px !important} [data-fontsize="large"]{font-size:16px !important} [data-fontsize="xlarge"]{font-size:18px !important} /* ───────── Dark mode ───────── Deep brand-blue chrome over a charcoal-navy canvas. Toggled via [data-theme="dark"] on (Settings → Display). The brand yellow accent is preserved; status colours are lightened for contrast and their pastel tints become translucent so they read on dark surfaces. Auth and landing screens already sit on a fixed brand-blue gradient, so they look the same in both themes. */ [data-theme="dark"]{ /* surfaces */ --bg:#0F1626; /* app base + content canvas */ --bt:#19223C; /* subtle insets, selected rows, highlight panels */ --white:#1B2541; /* elevated surface */ --card:#1B2541; /* cards, popovers, topbar */ --border:#2D3961; /* hairlines */ /* text */ --dark:#EAF2FF; /* primary text + headings */ --navy:#EAF2FF; --muted:#98A3C6; /* secondary text */ /* brand */ --blue:#5C86FF; /* accent blue: buttons, links, focus rings */ --toast:#283358; /* dark toast / tooltip surface (keeps light text) */ /* status foreground (lightened for dark bg) */ --cs:#7AE973;--ce:#6E9BFF;--cm:#FFCE7B;--cel:#FF6E50;--cc:#FF5A6E;--cp:#8FB6F7; /* status backgrounds (translucent tints) */ --bgs:rgba(122,233,115,.13);--bge:rgba(96,165,250,.13);--bgm:rgba(251,191,36,.13);--bgel:rgba(251,146,60,.13);--bgc:rgba(230,54,76,.13); /* status borders */ --bds:rgba(122,233,115,.42);--bde:rgba(96,165,250,.42);--bdm:rgba(251,191,36,.42);--bdel:rgba(251,146,60,.42);--bdc:rgba(230,54,76,.42); } /* Deep brand-blue chrome */ [data-theme="dark"] .sidebar{background:linear-gradient(180deg,#1B2E6B 0%,#101E4A 100%)} [data-theme="dark"] .topbar{background:var(--card);border-bottom-color:#22366F} [data-theme="dark"] .content{background:var(--bg)} /* Form controls: give inputs a distinct well on dark */ [data-theme="dark"] .sinp,[data-theme="dark"] .fx, [data-theme="dark"] input[type=text],[data-theme="dark"] input[type=email],[data-theme="dark"] input[type=password], [data-theme="dark"] input[type=search],[data-theme="dark"] input[type=number],[data-theme="dark"] input[type=date], [data-theme="dark"] input[type=month],[data-theme="dark"] input[type=tel],[data-theme="dark"] textarea,[data-theme="dark"] select{ background:#111A30;color:var(--dark);border-color:var(--border)} [data-theme="dark"] ::placeholder{color:#69749B} /* Cards lean on the border for definition since soft shadows vanish on dark */ [data-theme="dark"] .card{box-shadow:0 1px 2px rgba(0,0,0,.35)} /* Scrollbars */ [data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16)} /* Brand-yellow chips/badges keep dark ink (yellow is constant in both themes, so var(--dark) would flip to near-white and vanish on the yellow) */ [data-theme="dark"] .tb-service-active,[data-theme="dark"] .tb-plan, [data-theme="dark"] .service-pill-btn.active,[data-theme="dark"] .review-badge.urgent, [data-theme="dark"] .templates-badge.custom{color:#44476A} /* Skip to content link */ .skip-link{position:absolute;top:-40px;left:0;background:var(--blue);color:#fff;padding:8px 16px;z-index:10000;font-size:14px;font-weight:600;border-radius:0 0 8px 0;transition:top .2s} .skip-link:focus{top:0} /* Focus indicators */ :focus-visible{outline:2px solid var(--blue) !important;outline-offset:2px !important} *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%;font-family:'Inter',sans-serif;background:var(--bg);color:var(--dark);font-size:14px;line-height:1.5} button{font-family:inherit;cursor:pointer;border:none;background:none;border-radius:10px} input,select,textarea{font-family:inherit} .screen{display:none;min-height:100vh;align-items:center;justify-content:center} .screen.active{display:flex} .abg{background:transparent;overflow:hidden;position:relative;z-index:1} .abg>*{position:relative;z-index:1} /* --- Landing screen visuals --- */ .landing-orb{display:none!important} .landing-orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(255,249,145,.25),transparent 70%);top:-180px;right:-120px;animation:orbDrift1 20s ease-in-out infinite} .landing-orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(255,233,74,.18),transparent 70%);bottom:-200px;left:-150px;animation:orbDrift2 24s ease-in-out infinite} .landing-orb-3{width:300px;height:300px;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation:orbDrift3 18s ease-in-out infinite} @keyframes orbDrift1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-60px,80px) scale(1.05)}66%{transform:translate(40px,40px) scale(.95)}} @keyframes orbDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,-60px) scale(1.1)}} @keyframes orbDrift3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.4)}} .landing-grid{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,black,transparent)} /* PHN searchable dropdown */ .phn-search-wrap{position:relative} .phn-search-input{padding-right:36px !important;cursor:pointer} .phn-search-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;transition:transform .2s} .phn-search-wrap.open .phn-search-chevron{transform:translateY(-50%) rotate(180deg)} .phn-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--card);border:2px solid var(--blue);border-radius:14px;max-height:240px;overflow-y:auto;z-index:20;box-shadow:0 12px 32px rgba(75,119,246,.18);padding:6px} .phn-dropdown.open{display:block} .phn-dropdown-item{padding:10px 14px;border-radius:10px;cursor:pointer;font-size:13px;color:var(--blue);font-weight:500;transition:background .15s,color .15s} .phn-dropdown-item:hover{background:rgba(75,119,246,.08)} .phn-dropdown-item.selected{background:var(--blue);color:#fff;font-weight:600} .phn-dropdown-state{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700;padding:8px 14px 4px;pointer-events:none} .phn-dropdown-empty{padding:16px;text-align:center;color:var(--muted);font-size:12px} .phn-dropdown::-webkit-scrollbar{width:6px} .phn-dropdown::-webkit-scrollbar-track{background:transparent} .phn-dropdown::-webkit-scrollbar-thumb{background:rgba(75,119,246,.2);border-radius:3px} .landing-headline{font-size:36px;font-weight:800;color:var(--yellow);line-height:1.2;margin:0 0 10px;letter-spacing:-.5px; animation:headFadeUp .8s ease-out both} .landing-sub{font-size:12px;color:#fff;line-height:1.6;margin:0 auto 28px;max-width:380px; animation:headFadeUp .8s ease-out .15s both} @keyframes headFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} /* Shared auth backdrop - orbs, grid, trend line behind all auth screens */ .auth-backdrop{position:fixed;inset:0;z-index:0;background:radial-gradient(135% 120% at 85% -10%,rgba(255,249,145,.20) 0%,rgba(255,249,145,0) 46%),linear-gradient(160deg,#4A77FF 0%,var(--blue) 58%,#325CE0 100%);pointer-events:none;overflow:hidden} .auth-backdrop .landing-orb,.auth-backdrop .landing-grid{position:absolute} /* Animated trend line background */ .landing-trend{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.8} /* CTA buttons */ .landing-btn-primary{width:100%;padding:14px 28px;border-radius:50px;border:none; background:linear-gradient(135deg,var(--yellow),#FFF997);color:var(--blue); font-size:15px;font-weight:700;cursor:pointer;transition:all .25s ease;letter-spacing:.3px; box-shadow:0 4px 20px rgba(255,249,145,.25);animation:headFadeUp .8s ease-out .45s both} .landing-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,249,145,.4)} .landing-btn-secondary{width:100%;padding:14px 28px;border-radius:50px; border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06); color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:all .25s ease; letter-spacing:.3px;backdrop-filter:blur(8px);animation:headFadeUp .8s ease-out .55s both} .landing-btn-secondary:hover{border-color:rgba(255,249,145,.5);background:rgba(255,255,255,.12);transform:translateY(-1px)} .shell{display:none;height:100vh;overflow:hidden} .shell.active{display:flex} .sidebar{width:228px;background:var(--blue);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto} .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0} .topbar{background:var(--card);border-bottom:3px solid var(--blue);padding:0 24px;display:flex;align-items:center;gap:10px;height:56px;flex-shrink:0;box-shadow:none;overflow:visible;position:relative;z-index:100} .content{flex:1;overflow-y:auto;padding:32px 36px;background:var(--bg);overflow-x:hidden}.content.no-scrollbar::-webkit-scrollbar{display:none}.content.no-scrollbar{scrollbar-width:none} .sb-logo{padding:22px 18px 18px;border-bottom:none} .sb-mark{background:none;color:var(--yellow);font-size:24px;font-weight:800;padding:0;border-radius:0;display:inline-block;letter-spacing:-.3px;font-family:'Familjen Grotesk',sans-serif} .sb-tag{color:rgba(255,255,255,.45);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;margin-top:2px} .sb-nav{flex:1;padding:14px 10px;overflow-y:auto} .sb-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;color:#fff;font-size:12.5px;font-weight:500;cursor:pointer;transition:.18s;margin-bottom:1px} .sb-item:hover{background:rgba(255,255,255,.08);color:#fff} .sb-item.active{background:rgba(255,255,255,.1);color:var(--yellow);font-weight:600} .sb-sub{padding-left:32px!important;font-size:12.5px!important;opacity:.7}.sb-sub:hover{opacity:1}.sb-sub.active{opacity:1} .sb-item svg{flex-shrink:0;opacity:.6} .sb-item.active svg{opacity:1} .sb-sub{padding-left:16px} .sb-sub .sb-item{font-size:11.5px;padding:6px 12px} .sb-bottom{padding:10px;border-top:1px solid rgba(255,255,255,.08)} .sb-more-menu .sb-item{padding-left:20px;font-size:11.5px;opacity:.85} .sb-more-menu .sb-item:hover{opacity:1} .pill{padding:5px 14px;border-radius:16px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--blue);color:var(--blue);background:transparent;margin-right:4px} .pill.active{background:var(--blue);color:#fff} .sinp{padding:7px 14px;border-radius:14px;border:1.5px solid var(--border);font-size:12px;outline:none;width:180px;background:var(--bt);color:var(--dark)}.sinp::placeholder{color:var(--muted)} /* ── Topbar buttons (consistent system) ── */ .tb-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:18px;border:1.5px solid var(--border);font-size:11.5px;font-weight:600;font-family:inherit;color:var(--dark);background:var(--card);cursor:pointer;white-space:nowrap;transition:.15s;height:36px;box-sizing:border-box;outline:none} .tb-btn:hover{border-color:var(--blue);color:var(--blue)} .tb-btn svg{flex-shrink:0;opacity:.6} .tb-btn:hover svg{opacity:1} .tb-service-active{border-color:var(--yellow);background:var(--yellow);font-weight:700;color:var(--dark)} .tb-service-active:hover{border-color:#FFF997;background:#FFF997;color:var(--dark)} .tb-service-active.tb-portfolio{border-color:var(--blue);background:var(--blue);color:#fff} .tb-service-active.tb-portfolio:hover{border-color:#0F408F;background:#0F408F;color:#fff} .tb-plan{border-color:var(--yellow);background:var(--yellow);font-weight:700;color:var(--dark)} .tb-plan:hover{border-color:#FFF997;background:#FFF997;color:var(--dark)} .tb-search{width:160px;background:var(--card);cursor:text;font-weight:400;color:var(--dark)} .tb-search::placeholder{color:var(--muted);font-weight:500} .tb-search:focus{border-color:var(--blue)} .tb-user{padding:4px 12px 4px 4px} .tb-avatar{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0} .tb-username{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Topbar dropdown */ .tb-dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--white,#fff);border:1.5px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:200px;z-index:999;overflow:hidden} .tb-dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;color:var(--dark);transition:.1s;margin:1px 4px} .tb-dropdown-item:hover{background:var(--bt,var(--bt))} .tb-dropdown-item svg{opacity:.5;flex-shrink:0} .tb-dropdown-item:hover svg{opacity:.8} .tb-dropdown-active{background:rgba(75,119,246,.06);color:var(--blue);font-weight:600} .tb-dropdown-active svg{opacity:1;color:var(--blue)} #tb-switch-menu{left:0;right:auto} .page{display:none;opacity:0;transform:translateY(6px)}.page.active{display:block;animation:pageFadeIn .25s ease-out forwards} @keyframes pageFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} @keyframes dlgPop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}} /* Streamlined wizard navigation buttons */ .wiz-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px} .wiz-back{display:inline-flex;align-items:center;gap:5px;background:transparent;color:rgba(255,255,255,.85);border:none;font-family:inherit;font-size:13px;font-weight:600;padding:9px 6px;cursor:pointer;border-radius:10px;transition:.15s} .wiz-back:hover{color:#fff} .wiz-next{display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:var(--blue);border:none;font-family:inherit;font-size:13px;font-weight:700;padding:11px 22px;cursor:pointer;border-radius:14px;transition:.15s} .wiz-next:hover{filter:brightness(1.04);transform:translateY(-1px)} .wiz-stream-opt{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.18);border-radius:10px;cursor:pointer;font-size:11.5px;color:#fff;line-height:1.35;transition:.15s;background:rgba(255,255,255,.04)} .wiz-stream-opt:hover{border-color:rgba(255,249,145,.5);background:rgba(255,255,255,.08)} .wiz-stream-opt input{accent-color:var(--yellow);margin-top:1px;flex-shrink:0} .ph{background:linear-gradient(135deg,var(--bt),rgba(255,249,145,.08));padding:24px 28px;border-radius:16px;margin-bottom:24px;position:relative;overflow:hidden;border:1px solid rgba(75,119,246,.06)} .ph h1{font-size:22px;font-weight:700;margin-bottom:4px;letter-spacing:-.2px}.ph p{font-size:12.5px;color:var(--muted);line-height:1.6} .card{background:var(--white);border-radius:16px;border:1px solid var(--border);padding:24px 26px;margin-bottom:20px;box-shadow:0 1px 2px rgba(68,71,106,.05)} .mast-pill{width:auto!important;border-radius:22px!important;padding:8px 30px 8px 14px!important;font-size:12px!important;font-weight:600!important;height:auto!important;min-height:0!important;line-height:1.2!important;background-color:var(--white)} .phn-grouphdr{display:flex;align-items:center;gap:12px;margin:30px 0 16px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)} .phn-grouphdr::after{content:"";flex:1;height:1px;background:var(--border)} .phn-grouphdr:first-child{margin-top:0} .card-title{font-size:11px;font-weight:700;margin-bottom:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--dark)} .dg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px} .dc{background:var(--white);border-radius:14px;border:1px solid var(--border);padding:18px;cursor:pointer;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.03)} .dc:hover{border-color:var(--blue);box-shadow:0 6px 20px rgba(75,119,246,.1)} .dc-num{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)} .dc-name{font-size:12.5px;font-weight:600;margin-top:2px} .dc-score{font-size:24px;font-weight:700;margin-top:6px} .dc-summary{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5} .rb{display:inline-block;padding:2px 9px;border-radius:9px;font-size:10px;font-weight:600} .rb-s{background:var(--bgs);color:var(--cs);border:1px solid var(--bds)} .rb-e{background:var(--bge);color:var(--ce);border:1px solid var(--bde)} .rb-m{background:var(--bgm);color:var(--cm);border:1px solid var(--bdm)} .rb-el{background:var(--bgel);color:var(--cel);border:1px solid var(--bdel)} .rb-c{background:var(--bgc);color:var(--cc);border:1px solid var(--bdc)} .tip{background:var(--bt);border-left:3px solid var(--blue);padding:12px 16px;border-radius:0 9px 9px 0;margin-bottom:16px;font-size:12px;line-height:1.6} .tip-src{font-size:10.5px;color:var(--muted);font-style:italic;margin-top:3px} .rc-box{background:linear-gradient(135deg,var(--blue),var(--blue));color:#fff;padding:16px 20px;border-radius:11px;margin-bottom:18px} .rc-box .q{font-size:12.5px;font-style:italic;line-height:1.65;opacity:.9} .rc-box .src{font-size:10.5px;opacity:.5;margin-top:5px} .fg{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px} .fi{display:flex;flex-direction:column} .fl{font-size:11.5px;font-weight:500;margin-bottom:4px}.fl .req{color:var(--cc)} .fx{padding:9px 13px;border-radius:14px;border:1.5px solid var(--border);font-size:13px;outline:none;background:var(--card);transition:.18s;width:100%} .fx:focus{border-color:var(--blue)} /* Single, clean focus indicator on form fields (border colour only) — no double outline */ .fx:focus,.fx:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none !important;box-shadow:none} /* Ryse-branded native elements (feedback modal, etc.) */ select:not(.fx){appearance:none !important;-webkit-appearance:none !important;-moz-appearance:none !important;padding-right:32px !important;background-image:url("data:image/svg+xml;utf8,") !important;background-repeat:no-repeat !important;background-position:right 11px center !important;background-size:11px !important;cursor:pointer} /* Ryse-branded custom dropdown panel that replaces the native option list */ .ryse-select-panel{position:absolute;z-index:10000;background:var(--card);border:2px solid var(--blue);border-radius:14px;box-shadow:0 12px 32px rgba(75,119,246,.18);padding:6px;max-height:280px;overflow-y:auto;min-width:140px;font-family:inherit;animation:ryseSelectFade .14s ease-out} @keyframes ryseSelectFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} .ryse-select-panel-item{padding:9px 14px;border-radius:10px;cursor:pointer;font-size:13px;color:var(--dark);font-weight:500;transition:background .12s,color .12s;white-space:nowrap;display:flex;align-items:center;justify-content:space-between;gap:10px} .ryse-select-panel-item:hover{background:rgba(75,119,246,.08);color:var(--blue)} .ryse-select-panel-item.selected{background:var(--blue);color:#fff;font-weight:600} .ryse-select-panel-item.selected:hover{background:var(--blue);color:#fff} .ryse-select-panel-item[data-disabled="true"]{color:var(--muted);cursor:not-allowed;opacity:.6} .ryse-select-panel-item[data-disabled="true"]:hover{background:transparent;color:var(--muted)} .ss-missing{border-color:var(--cc) !important;background:#fff7f7 !important;box-shadow:0 0 0 2px rgba(230,54,76,.12)} .ryse-select-panel-group{padding:8px 14px 4px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);pointer-events:none} .ryse-select-panel-group:not(:first-child){border-top:1px solid var(--border);margin-top:4px} .ryse-select-panel::-webkit-scrollbar{width:6px} .ryse-select-panel::-webkit-scrollbar-track{background:transparent} .ryse-select-panel::-webkit-scrollbar-thumb{background:rgba(75,119,246,.25);border-radius:3px} .fh{font-size:10.5px;color:var(--muted);margin-top:2px} .fb{font-size:10.5px;color:var(--blue);margin-top:2px;font-style:italic} .tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:2px solid var(--border);flex-wrap:wrap} .tab{padding:8px 14px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;position:relative;transition:.15s} .tab.active{color:var(--blue);font-weight:600} .tab.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--blue);border-radius:1px} .tp{display:none}.tp.active{display:block} .btn{padding:12px 20px;border-radius:25px;font-size:13px;font-weight:600;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:6px;text-transform:none;letter-spacing:normal;min-height:44px} .btn-p{background:var(--blue);color:#fff;box-shadow:0 2px 6px rgba(75,119,246,.25)}.btn-p:hover{background:#2D55D4;box-shadow:0 4px 12px rgba(75,119,246,.3)} .btn-s{background:var(--card);color:var(--blue);border:1.5px solid var(--border)}.btn-s:hover{background:var(--bt);border-color:var(--blue)} .btn-y{background:var(--yellow);color:#2D55D4;border:1px solid #EFE08A}.btn-y:hover{background:#FFF77A;color:#1E45B8;border-color:#E7D45F} .btn-w{background:var(--card);color:var(--blue);padding:10px 22px;border-radius:14px;font-size:14px;font-weight:600;width:100%;text-align:center;cursor:pointer} .sc-card{background:var(--white);border:1px solid var(--border);border-radius:13px;padding:20px;margin-bottom:14px;transition:box-shadow .2s ease,border-color .2s ease}.sc-card:hover{box-shadow:0 2px 12px rgba(75,119,246,.06);border-color:rgba(75,119,246,.15)} .sc-card-v2{position:relative;background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:20px 22px;transition:box-shadow .2s,border-color .2s;display:flex;flex-direction:column} .sc-card-v2:hover{box-shadow:0 4px 20px rgba(75,119,246,.08);border-color:rgba(75,119,246,.2)} .sc-card-v2[data-fav="true"]{border-color:#FF9E2C;box-shadow:0 0 0 1px rgba(246,192,0,.15)} .sc-card-v2.hidden{display:none!important} .sc-metric-card{background:rgba(75,119,246,.05);border:1px solid rgba(75,119,246,.1);border-radius:10px;padding:12px 14px;flex:1} .sc-metric-card .sc-metric-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:4px} .sc-metric-card .sc-metric-value{font-size:22px;font-weight:800;color:var(--blue);line-height:1.1} .sc-metric-card .sc-metric-context{font-size:10px;color:var(--muted);margin-top:2px} .sc-metric-card.warning .sc-metric-value{color:var(--cel)} .sc-metric-card.danger .sc-metric-value{color:var(--cc)} .sc-metric-card.success .sc-metric-value{color:var(--cs)} .sc-card-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 0} .sc-card-domain-tag{font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 10px;border-radius:20px;background:var(--bt);color:var(--blue)} .sc-card-domain-tag[data-d="workforce"]{background:var(--bge);color:var(--blue)} .sc-card-domain-tag[data-d="clinical"]{background:var(--bt);color:var(--ce)} .sc-card-domain-tag[data-d="demand"]{background:#EAF2FF;color:var(--cm)} .sc-card-domain-tag[data-d="financial"]{background:var(--bgc);color:var(--cc)} /* Feedback FAB (Alpha Testing) */ .feedback-fab{position:relative;width:42px;height:42px;border-radius:50%;background:var(--card);color:var(--blue);border:2px solid var(--blue);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;flex-shrink:0} .feedback-fab:hover{transform:scale(1.08);box-shadow:0 4px 16px rgba(75,119,246,.25)} .feedback-fab::after{content:'';position:absolute;top:-2px;right:-2px;width:10px;height:10px;background:var(--cm);border-radius:50%;border:2px solid #fff} /* Chat Widget */ .chat-fab{position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:50%;background:var(--yellow);color:var(--blue);border:none;cursor:pointer;box-shadow:none;display:flex;align-items:center;justify-content:center;z-index:9998;transition:transform .2s} .chat-fab:hover{transform:scale(1.08)} .chat-fab.has-badge::after{content:'';position:absolute;top:2px;right:2px;width:12px;height:12px;background:var(--cs);border-radius:50%;border:2px solid #fff} .chat-panel{position:fixed;bottom:88px;right:24px;width:380px;height:520px;background:var(--card);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.18);z-index:9998;display:none;flex-direction:column;overflow:hidden;border:1px solid var(--border)} .chat-panel.open{display:flex} .chat-header{padding:14px 16px;background:linear-gradient(135deg,var(--blue),var(--blue));color:#fff;display:flex;justify-content:space-between;align-items:center;flex-shrink:0} .chat-header h3{margin:0;font-size:14px;font-weight:700} .chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px} .chat-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:12.5px;line-height:1.6;animation:fadeIn .2s ease} .chat-msg.bot{background:var(--bt);color:var(--dark);align-self:flex-start;border-bottom-left-radius:4px} .chat-msg.user{background:var(--blue);color:#fff;align-self:flex-end;border-bottom-right-radius:4px} .chat-msg.bot .chat-msg-label{font-size:9.5px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px} .chat-msg a{color:var(--blue);text-decoration:underline} .chat-msg.user a{color:#fff} .chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px} .chat-suggestion{padding:5px 12px;border:1px solid var(--border);border-radius:20px;font-size:11px;color:var(--blue);cursor:pointer;background:var(--card);transition:.15s} .chat-suggestion:hover{background:var(--bt);border-color:var(--blue)} .chat-input-wrap{padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center;background:var(--bt);flex-shrink:0} .chat-input{flex:1;border:1.5px solid var(--border);border-radius:10px;padding:8px 12px;font-size:12px;outline:none;font-family:inherit;resize:none} .chat-input:focus{border-color:var(--blue)} .chat-send{width:34px;height:34px;border-radius:50%;background:var(--blue);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s} .chat-send:hover{background:#2b5ae0} @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} @keyframes letterIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes loadBar{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes lgFlow{from{stroke-dashoffset:320}to{stroke-dashoffset:0}} .sc-card-domain-tag[data-d="strategic"]{background:linear-gradient(135deg,var(--bge),var(--bt));color:var(--blue);border:1px solid rgba(75,119,246,.15)} .sc-fav-btn{background:none;border:none;font-size:18px;cursor:pointer;color:#ccc;transition:.15s;line-height:1} .sc-fav-btn:hover,.sc-fav-btn.active{color:#FF9E2C} .sc-card-title{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:14px;line-height:1.3} .sc-card-title em{font-style:normal;color:var(--blue)} .sc-card-results{display:flex;gap:10px;margin-top:14px} .sc-card-subtitle{font-size:11.5px;color:var(--muted);padding:0 16px 12px;line-height:1.4} .sc-card-body{padding:0 16px 12px} .sc-card-results{padding:0 16px 10px} .sc-card-insight{padding:0 16px 14px;font-size:11px;color:var(--muted);font-style:italic;line-height:1.5} .sc-card-links{padding:8px 16px;border-top:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap} .sc-card-links a{font-size:10.5px;color:var(--blue);text-decoration:none;display:flex;align-items:center;gap:3px} .sc-card-links a:hover{text-decoration:underline} .sc-slider-wrap{position:relative;padding:4px 0} .sc-slider-v2{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,#FFC3B5 0%,#e8e0c0 50%,#b4d4b4 100%);outline:none} .sc-slider-v2::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--white);border:2px solid var(--blue);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.12)} .sc-slider-v2.neutral{background:linear-gradient(90deg,var(--border) 0%,#b0c4f5 50%,var(--border) 100%)} /* scenario card tools (info + edit + favourite) */ .sc-card-tools{display:flex;align-items:center;gap:2px} .sc-tool-btn{background:none;border:none;cursor:pointer;color:#c2c8d2;padding:3px;line-height:0;border-radius:6px;transition:.15s} .sc-tool-btn:hover{color:var(--blue);background:rgba(75,119,246,.08)} .sc-tool-btn.active{color:var(--blue)} /* info / edit popovers */ .sc-info-pop,.sc-edit-pop{display:none;position:absolute;top:42px;right:16px;z-index:40;width:300px;max-width:calc(100% - 32px);background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 30px rgba(20,30,55,.16);padding:14px 16px} .sc-info-pop.open,.sc-edit-pop.open{display:block} .sc-pop-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--dark);margin-bottom:8px} .sc-pop-close{background:none;border:none;font-size:18px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px} .sc-pop-close:hover{color:var(--dark)} .sc-pop-body{font-size:11.5px;color:var(--muted);line-height:1.6} .sc-pop-sub{font-size:10.5px;color:var(--muted);line-height:1.5;margin-bottom:10px} .sc-edit-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;margin-bottom:9px} .sc-edit-row label{font-size:11px;color:var(--dark);font-weight:500} .sc-edit-input{width:90px;text-align:right;font-size:12px;font-weight:700;color:var(--dark);border:1px solid var(--border);border-radius:7px;padding:4px 8px;background:var(--card)} .sc-edit-input.overridden{border-color:var(--blue);background:rgba(75,119,246,.05)} .sc-edit-hint{grid-column:1 / -1;font-size:9.5px;color:var(--muted);margin-top:-3px} .sc-edit-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)} .sc-edit-actions .btn{font-size:10.5px;padding:5px 12px} /* combined card slider labels */ .sc-cmb-label{display:flex;flex-direction:column;font-size:12px;font-weight:600;color:var(--dark);margin-bottom:6px} .sc-cmb-sub{font-size:10px;font-weight:500;color:var(--muted);margin-top:1px} .sc-result-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f5f5f5;font-size:12px} .sc-result-row:last-child{border-bottom:none} .sc-result-label{color:var(--muted)} .sc-result-val{font-weight:700;font-size:13px} /* ── Submission form (provider pop-out) ── */ #sub-form-body > .fi{margin-bottom:16px} #sub-form-body > .sub-section{margin-bottom:16px} #sub-form-body > *:last-child{margin-bottom:0} .sub-intro{font-size:11.5px;color:var(--muted);line-height:1.5;background:var(--bt);border-radius:8px;padding:10px 12px;margin-bottom:16px;border-left:3px solid var(--blue)} .sub-intro.urgent{border-left-color:var(--cc);background:var(--bgc);color:#7F1D1D} .sub-section{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px} .sub-section-title{font-size:11.5px;font-weight:700;color:var(--dark);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px} .sub-shelp{font-size:10.5px;color:var(--muted);line-height:1.4;margin-bottom:10px} .sub-field{margin-bottom:12px} .sub-field:last-child{margin-bottom:0} .sub-fhelp{font-size:10px;color:var(--muted);line-height:1.4;margin:-2px 0 5px} .sub-opt{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:var(--dark);line-height:1.4;cursor:pointer} .sub-opt input{accent-color:var(--blue);margin-top:2px;flex-shrink:0} .sub-opt-row{display:flex;flex-wrap:wrap;gap:12px} .sub-opt-col{display:flex;flex-direction:column;gap:7px} /* ── Submission template editor (commissioner) ── */ .sub-tpl-sec{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px;background:var(--bt)} .sub-tpl-sec-head{display:flex;align-items:center;gap:8px} .sub-tpl-sec-head input{flex:1;min-width:0} .sub-tpl-sec-tools{display:flex;gap:4px;flex-shrink:0} .sub-tpl-mini{width:24px;height:24px;border:1px solid var(--border);background:var(--card,#fff);border-radius:6px;cursor:pointer;font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:center;padding:0;transition:.12s} .sub-tpl-mini:hover{border-color:var(--blue);color:var(--blue)} .sub-tpl-mini.danger:hover{border-color:var(--cc);color:var(--cc)} .sub-tpl-fields{display:flex;flex-direction:column;gap:8px;margin-top:10px} .sub-tpl-field{border:1px solid var(--border);border-radius:8px;padding:10px;background:var(--card,#fff)} .sub-tpl-field-row{display:flex;align-items:center;gap:6px} .sub-tpl-req{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--muted);flex-shrink:0;cursor:pointer;white-space:nowrap} .sub-tpl-req input{accent-color:var(--blue)} .sub-tpl-cond{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:10px;color:var(--muted)} .sub-tpl-cond input{flex:1;min-width:0} .sc-result-val.positive{color:var(--cs)} .sc-result-val.negative{color:var(--cc)} .sc-result-val.neutral{color:var(--dark)} .sc-center-val{text-align:center;font-size:36px;font-weight:800;margin:10px 0 6px;color:var(--blue);line-height:1} .sc-center-sub{text-align:center;font-size:11px;color:var(--muted);margin-bottom:12px} .sc-title{font-size:13.5px;font-weight:600;margin-bottom:3px} .sc-desc{font-size:11.5px;color:var(--muted);margin-bottom:10px;line-height:1.5} .sc-slider{width:100%;margin:6px 0;accent-color:var(--blue)} .sc-label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)} .sc-val{font-size:12.5px;font-weight:600;color:var(--blue);text-align:center;margin:4px 0} .sc-output{background:var(--bt);border-radius:9px;padding:14px;margin-top:10px} .sc-row{display:flex;justify-content:space-between;padding:4px 0;font-size:12px} .sc-row-label{color:var(--muted)}.sc-row-val{font-weight:600} .sc-insight{display:flex;gap:8px;margin-top:10px;font-size:12px;line-height:1.55;padding:10px;background:var(--bt);border-radius:9px;align-items:flex-start} .proj{border:1px solid var(--border);border-radius:11px;padding:14px 16px;margin-bottom:8px;display:flex;gap:12px} .proj-if{font-size:11px;font-weight:700;color:var(--blue);min-width:22px} .proj-txt{font-size:12px;line-height:1.55;color:var(--muted)} .ap-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px} .ap-table th{text-align:left;padding:8px 10px;background:var(--bt);font-weight:600;font-size:11px;border-bottom:2px solid var(--border)} .ap-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top} .ap-table tr:last-child td{border-bottom:none} .ar{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}.ar:last-child{border:none} .rg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} .rcard{background:var(--white);border:1px solid var(--border);border-radius:11px;padding:16px;cursor:pointer;transition:.2s} .rcard:hover{border-color:var(--blue)} .rcard h4{font-size:12.5px;font-weight:600;margin-bottom:3px} .rcard p{font-size:11.5px;color:var(--muted);line-height:1.5} .rcard-tag{font-size:9.5px;font-weight:600;color:var(--blue);background:var(--bt);padding:2px 7px;border-radius:6px;margin-top:6px;display:inline-block} .wiz-dots{display:flex;gap:3px;margin-bottom:24px} .wiz-dot{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.15)} .wiz-dot.active{background:var(--yellow)}.wiz-dot.done{background:var(--card)} .wiz-step{display:none}.wiz-step.active{display:block} .sopt{border:1.5px solid rgba(255,255,255,.2);border-radius:14px;padding:10px 14px;cursor:pointer;transition:.2s;color:#fff;margin-bottom:4px} .sopt:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05)} .sopt.selected{border-color:#fff;background:rgba(255,255,255,.1)} .sopt h4{font-size:12.5px;font-weight:600}.sopt p{font-size:11px;opacity:.7;margin-top:1px} .sopt-compact{flex:1;min-width:0;text-align:center;padding:8px 6px;margin-bottom:0} .sopt-compact h4{font-size:11.5px}.sopt-compact p{font-size:10px;margin-top:0} .wb{padding:22px 26px;background:linear-gradient(135deg,var(--bt),rgba(255,249,145,.18));border-radius:14px;margin-bottom:22px;position:relative;overflow:hidden} .wb h1{font-size:24px;font-weight:700;color:var(--blue)}.wb-date{font-size:11.5px;color:var(--blue);opacity:.7;margin-bottom:5px}.wb-sub{font-size:12.5px;color:var(--muted);margin-top:3px} .auth-card{background:var(--card);border-radius:28px;padding:36px;width:100%;max-width:400px;box-shadow:0 8px 32px rgba(0,0,0,.15)} .auth-card h2{font-size:20px;font-weight:700;color:var(--dark);margin-bottom:18px} .auth-card .fi{margin-bottom:12px}.auth-card .fx{width:100%;border-radius:14px} .auth-card .btn{border-radius:14px} .auth-card .btn-p{border-radius:14px} .live-box{background:var(--bt);border-radius:9px;padding:14px;margin-top:10px} .live-row{display:flex;justify-content:space-between;padding:5px 0;font-size:12.5px} .live-label{color:var(--muted)}.live-val{font-weight:600} .metric-circles{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0} .metric-circle{text-align:center;flex:1;min-width:100px} .metric-circle .val{font-size:22px;font-weight:700;display:block} .metric-circle .label{font-size:11px;color:var(--muted);margin-top:2px} .metric-circle .bench{font-size:10px;color:var(--blue);font-style:italic;margin-top:1px} .metric-circle .bench-num{display:block;font-size:9.5px;color:var(--muted);margin-top:4px;padding-top:4px;border-top:1px solid var(--border);font-weight:500} .kpi-table{width:100%;border-collapse:collapse;font-size:12px} .kpi-table th{text-align:left;padding:8px;background:var(--bt);font-weight:600;font-size:11px} .kpi-table td{padding:8px;border-bottom:1px solid var(--border)} .kpi-status{padding:2px 8px;border-radius:6px;font-size:10px;font-weight:600;display:inline-block} .kpi-on{background:var(--bgs);color:var(--cs)}.kpi-below{background:var(--bgm);color:var(--cm)}.kpi-critical{background:var(--bgc);color:var(--cc)} .flag-item{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border)} .flag-item:last-child{border:none} .flag-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0} .flag-text{font-size:12.5px;line-height:1.5} .domain-header{margin-bottom:20px} .domain-header h1{font-size:20px;font-weight:700;margin-bottom:4px} .domain-header p{font-size:12.5px;color:var(--muted);line-height:1.6} .domain-score-box{display:flex;align-items:center;gap:16px;margin:16px 0} .domain-score-num{font-size:42px;font-weight:700} .domain-score-hero{display:flex;align-items:stretch;gap:0;margin-bottom:20px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(248,250,252,.9));border-radius:16px;border:1.5px solid var(--border);position:relative;overflow:visible} .score-left{display:flex;align-items:center;gap:24px;padding:24px 28px;flex:1} .score-donut-wrap{position:relative;width:150px;height:150px;flex-shrink:0} .score-donut-svg{transform:rotate(-90deg)} .score-donut-track{fill:none;stroke:#fff;stroke-width:8} .score-donut-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)} .score-donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center} .score-donut-center .score-val{font-size:38px;font-weight:800;line-height:1} .score-donut-center .score-of{font-size:11px;color:var(--muted);margin-top:3px} .score-meta{flex:1} .score-meta .score-band{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:8px} .score-meta .score-desc{font-size:12.5px;color:var(--muted);line-height:1.6} .score-qoq{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;margin-top:6px} .score-qoq.up{color:var(--cs)} .score-qoq.down{color:var(--cc)} .score-qoq.flat{color:var(--muted)} .tier-scale-col{border-left:1.5px solid var(--border);padding:16px 20px;display:flex;flex-direction:column;justify-content:center;gap:0;min-width:200px;background:rgba(248,250,252,.5)} .tier-scale-col h4{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .tier-bar{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:4px 8px;padding:4px 8px;border-radius:6px;transition:.15s} .tier-bar.active{background:rgba(0,0,0,.04)} .tier-bar-fill{width:6px;height:18px;border-radius:3px;flex-shrink:0} .tier-bar-label{font-size:10px;font-weight:600;width:50px} .tier-bar-range{font-size:9px;color:var(--muted)} .tier-bar.active .tier-bar-label{font-weight:800} .tier-bar.active .tier-bar-fill{width:8px;height:22px} .tier-bar-tip{font-size:9px;color:var(--muted);line-height:1.4;margin-top:2px;grid-column:2/4;padding-left:0} .bench-coming-soon .bench-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.55);z-index:2;border-radius:14px} .bench-coming-soon .bench-overlay span{background:var(--blue);color:#fff;font-size:13px;font-weight:700;letter-spacing:.5px;padding:6px 20px;border-radius:20px} .bench-coming-soon .bench-overlay p{font-size:11px;color:var(--muted);margin:8px 24px 0;text-align:center;max-width:380px;line-height:1.5} .chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .chart-cell{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 14px 10px;position:relative;transition:.15s} .chart-cell:hover{border-color:var(--blue);box-shadow:0 2px 12px rgba(75,119,246,.06)} .chart-cell canvas{width:100%;height:170px;display:block} .chart-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:.15s} .chart-cell:hover .chart-actions{opacity:1} .chart-act{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted);transition:.1s} .chart-act:hover{background:var(--bt);color:var(--blue);border-color:var(--blue)} @media(max-width:900px){.chart-grid{grid-template-columns:1fr}} .domain-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .domain-2col>.card{margin-bottom:0} @media(max-width:900px){.domain-2col{grid-template-columns:1fr}} .domain-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .domain-topbar .btn{padding:8px 18px;font-size:12px} .link-action{color:var(--blue);font-size:11px;cursor:pointer;text-decoration:none;font-weight:500;padding:6px 0;min-height:44px;display:inline-flex;align-items:center} .proj-card{border:1.5px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:8px;transition:.2s;background:var(--card)} .proj-card:hover{border-color:var(--blue);box-shadow:0 2px 12px rgba(75,119,246,.08);transform:translateY(-1px)} .proj-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .proj-card-tag{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);background:var(--bt);padding:2px 8px;border-radius:10px} .proj-card-arrow{color:var(--blue);font-size:14px;opacity:0;transition:.15s} .proj-card:hover .proj-card-arrow{opacity:1} .proj-card-body{font-size:12px;color:var(--dark);line-height:1.6} .proj-card-cta{font-size:10px;color:var(--blue);font-weight:500;margin-top:8px;opacity:0;transition:.15s} .proj-card:hover .proj-card-cta{opacity:1} .link-action:hover{text-decoration:underline} .chart-fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:500;display:flex;align-items:center;justify-content:center} .chart-fullscreen-inner{background:var(--card);border-radius:16px;padding:24px;width:85vw;max-width:900px;max-height:85vh;position:relative} .chart-fullscreen-inner canvas{width:100%;height:400px} .chart-fs-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center} .quick-links{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap} canvas{max-width:100%} ::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:rgba(75,119,246,.2);border-radius:4px} .benchmark{font-size:10.5px;color:var(--blue);font-style:italic;margin-top:2px} .research-callout{background:linear-gradient(135deg,var(--blue),var(--blue));color:#fff;padding:14px 18px;border-radius:11px;margin-bottom:16px;font-size:12px;line-height:1.6} .research-callout em{font-style:italic;opacity:.9} .research-callout .src{font-size:10.5px;opacity:.5;margin-top:4px} .loc-check{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px} .setup-options{max-height:400px;overflow-y:auto} .rec-card{background:var(--white);border:1px solid var(--border);border-radius:11px;padding:14px;margin-bottom:8px} .rec-card .rec-domain{font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)} .rec-card .rec-action{font-size:12.5px;font-weight:600;margin:4px 0} .rec-card .rec-detail{font-size:11.5px;color:var(--muted);line-height:1.5} .rec-card .rec-meta{display:flex;gap:8px;margin-top:8px;align-items:center} .ig{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px} .ig .fi{display:flex;flex-direction:column} .ig .fi .fx{padding:7px 10px;font-size:12.5px} .ig .fi .fl{font-size:11px} .inp-step{display:none}.inp-step.active{display:block} .inp-nav{display:flex;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)} .inp-progress-wrap{margin-bottom:18px} .inp-progress-bar{height:4px;background:var(--border);border-radius:2px;margin-bottom:10px;overflow:hidden} .inp-progress-fill{height:100%;background:var(--blue);border-radius:2px;transition:width .3s ease} .inp-progress-label{font-size:11px;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center} .inp-progress-label strong{color:var(--dark)} .inp-step-dot{flex:1;padding:7px 6px;text-align:center;font-size:10px;font-weight:500;color:var(--muted);background:var(--bt);border-radius:6px;cursor:pointer;transition:.15s;border:1.5px solid transparent} .inp-step-dot.active{background:var(--bt);color:var(--blue);font-weight:600;border-color:var(--blue)} .inp-step-dot.done{background:var(--bgs);color:var(--cs);border-color:var(--bds)} .inp-step-dot:hover{background:var(--bt)} .gov-check{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;font-size:11.5px;transition:.15s} .gov-check:hover{border-color:var(--blue);background:var(--bt)} .gov-check input[type="checkbox"]{accent-color:var(--blue)} .gov-check input:checked+span{font-weight:600;color:var(--blue)} @media(max-width:900px){.ig{grid-template-columns:1fr}.inp-step-dot{font-size:8px;padding:5px 3px}} @media(max-width:600px){ .ig{gap:8px 0} .ig .fi .fx{padding:12px 14px;font-size:16px;border-radius:12px} .ig .fi .fl{font-size:12px;margin-bottom:6px} .inp-nav{flex-direction:column;gap:8px} .inp-nav .btn{width:100%;justify-content:center;padding:14px 20px;font-size:14px} .inp-step-dot{font-size:0;padding:8px 4px;min-height:6px}.inp-step-dot::before{content:'';display:block;width:100%;height:4px;border-radius:2px;background:currentColor;opacity:.3}.inp-step-dot.active::before,.inp-step-dot.done::before{opacity:1} .inp-progress-wrap{position:sticky;top:0;z-index:10;background:var(--bt);padding:8px 0 4px;margin:-10px -12px 12px;padding-left:12px;padding-right:12px} .card{padding:16px 14px;border-radius:10px} .card-title{font-size:14px} .wb h1{font-size:20px} .wb-sub{font-size:13px} } .info-wrap{display:flex;align-items:center;gap:4px} /* Info glyph: a real lowercase 'i' in the normal typeface (never drawn, never italic). */ .info-btn{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--blue);background:var(--card);color:var(--blue);font-family:inherit;font-size:10px;font-weight:700;font-style:normal;text-transform:lowercase;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:.15s;position:relative;vertical-align:middle} .info-btn:hover{background:var(--blue);color:#fff} /* Body copy inside info / help bubbles is lowercase + upright across all three dashboards. Titles (.info-title) keep their case. Evidence lines (.info-evidence) are no longer italic. */ .info-popup{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:280px;background:var(--card,#fff);border:1px solid var(--border);border-radius:10px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:1000;font-size:11.5px;line-height:1.6;color:var(--dark);font-weight:400;font-style:normal;font-family:'Inter',sans-serif;text-align:left;pointer-events:auto;text-transform:none;letter-spacing:normal} .info-popup::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--card,#fff)} .info-popup::before{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--border)} .info-popup.show{display:block} .info-popup .info-title{display:block;font-weight:700;color:var(--dark);text-transform:none;letter-spacing:normal;margin-bottom:4px;font-size:12px} .info-popup .info-evidence{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--border);color:var(--muted);font-size:10.5px;text-transform:none} .info-popup-portal{display:block !important;position:fixed !important;transform:none !important;bottom:auto !important;right:auto !important;height:auto !important;overflow:visible !important} .info-popup-portal::before,.info-popup-portal::after{display:none !important} .info-popup.info-popup-below{bottom:auto;top:calc(100% + 8px)} .info-popup.info-popup-below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--card,#fff)} .info-popup.info-popup-below::before{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--border)} .info-popup .info-title{font-weight:600;font-size:11px;color:var(--blue);margin-bottom:8px;letter-spacing:.3px;display:block;padding-bottom:4px;text-transform:none} .info-popup .info-evidence{margin-top:6px;padding-top:6px;border-top:1px solid var(--border);font-size:10.5px;color:var(--muted);font-style:normal} @media(max-width:900px){.dg{grid-template-columns:repeat(2,1fr)}.fg{grid-template-columns:1fr}.info-popup{width:220px;left:0;transform:none}.info-popup::after,.info-popup::before{left:12px}} /* Responsive: topbar */ @media(max-width:1200px){ .topbar{padding:0 12px;gap:6px} .tb-btn{font-size:10.5px;padding:6px 10px;height:32px} .tb-search{width:120px} } @media(max-width:900px){ .topbar{flex-wrap:wrap;height:auto;padding:8px 12px;gap:4px} .tb-search{display:none} .topbar>div[style*="flex:1"]{display:none} } @media(max-width:600px){ .topbar{padding:6px 8px} .tb-btn{font-size:9.5px;padding:5px 8px;height:30px;gap:4px} .tb-username{display:none} } /* Responsive: content area */ @media(max-width:1100px){ .content{padding:16px 18px} } @media(max-width:900px){ .content{padding:12px 14px} #snapshot-domain-cards{grid-template-columns:repeat(2,1fr)!important} } @media(max-width:600px){ .content{padding:10px 12px} #snapshot-domain-cards{grid-template-columns:1fr!important} .dg{grid-template-columns:1fr!important} } /* Responsive: snapshot hero row */ @media(max-width:1100px){ #page-snapshot>div:nth-child(3){grid-template-columns:240px 1fr!important} #page-snapshot>div:nth-child(3)>div:nth-child(3){display:none} } @media(max-width:768px){ #page-snapshot>div:nth-child(3){grid-template-columns:1fr!important} } /* Responsive: domain pages */ @media(max-width:900px){ .domain-2col{grid-template-columns:1fr!important} .domain-topbar{flex-wrap:wrap;gap:8px} } /* Responsive: modals */ @media(max-width:600px){ .modal-box{max-width:95vw;padding:18px;margin:10px} } /* Responsive: settings, reports */ @media(max-width:900px){ .kpi-table{font-size:11px} .kpi-table th,.kpi-table td{padding:6px 6px} } /* Responsive: PHN dashboard grids */ @media(max-width:1100px){ .phn-acuity-grid,.phn-outcomes-grid,.phn-action-row,.phn-bench-grid,.phn-crisis-grid{grid-template-columns:1fr!important} } @media(max-width:900px){ .phn-traffic-table{font-size:11px} .phn-traffic-table th,.phn-traffic-table td{padding:6px 6px} .phn-score-pill{width:30px!important;height:30px!important;font-size:10px!important} } /* Responsive: off-canvas sidebar drawer (<=900px) */ .tb-burger{display:none;align-items:center;justify-content:center;width:38px;height:36px;padding:0;border-radius:11px;border:1.5px solid var(--border);background:var(--card);color:var(--dark);cursor:pointer;flex-shrink:0} .tb-burger:hover{border-color:var(--blue);color:var(--blue)} .tb-burger svg{opacity:.75} .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(20,22,40,.45);z-index:1200;opacity:0;transition:opacity .22s ease} @media(max-width:900px){ .tb-burger{display:inline-flex} .sidebar{position:fixed;top:0;left:0;bottom:0;width:262px;max-width:84vw;z-index:1300;transform:translateX(-100%);transition:transform .24s ease;box-shadow:none} .shell.nav-open .sidebar{transform:translateX(0);box-shadow:6px 0 28px rgba(0,0,0,.22)} .shell.nav-open .sidebar-backdrop{display:block;opacity:1} } .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:2000;align-items:center;justify-content:center} .modal-overlay.show{display:flex} .modal-box{background:var(--card);border-radius:14px;padding:28px;width:100%;max-width:420px;box-shadow:0 12px 40px rgba(0,0,0,.2)} .modal-box h2{font-size:18px;font-weight:700;margin-bottom:16px} .service-pill-btn{padding:10px 16px;border-radius:22px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);color:var(--muted);background:transparent;margin-right:2px;white-space:nowrap;transition:.18s;min-height:44px;display:inline-flex;align-items:center} .service-pill-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--bt)} .service-pill-btn.active{color:var(--dark);border-color:var(--yellow);background:var(--yellow)} .service-color-bar{height:3px;background:var(--blue);position:absolute;bottom:0;left:0;right:0;border-radius:0 0 2px 2px;transition:.3s} .user-menu-item:hover{background:var(--bt,var(--bt))} /* PHN settings: grouped left-rail navigation */ .phn-settings-layout{display:flex;gap:22px;align-items:flex-start} .phn-settings-nav{flex:0 0 212px;display:flex;flex-direction:column;gap:1px;position:sticky;top:0} .phn-settings-panels{flex:1;min-width:0} .phn-set-navgroup{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);padding:14px 12px 5px} .phn-set-navgroup:first-child{padding-top:0} .phn-set-navitem{padding:8px 12px;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--dark);cursor:pointer;transition:.15s} .phn-set-navitem:hover{background:var(--bt)} .phn-set-navitem.active{background:var(--blue);color:#fff;font-weight:600} @media(max-width:760px){ .phn-settings-layout{flex-direction:column;gap:14px} .phn-settings-nav{flex:none;width:100%;flex-direction:row;flex-wrap:wrap;gap:5px;position:static} .phn-set-navgroup{width:100%;padding:6px 2px 1px} .phn-set-navitem{border:1.5px solid var(--border)} .phn-set-navitem.active{border-color:var(--blue)} } /* Service setup: level-of-care dual-thumb range slider */ .ss-loc{position:relative;height:30px} .ss-loc-track{position:absolute;top:13px;left:0;right:0;height:6px;background:var(--border);border-radius:3px} .ss-loc-fill{position:absolute;top:0;height:100%;background:var(--blue);border-radius:3px} .ss-loc-range{position:absolute;top:5px;left:0;width:100%;height:20px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;pointer-events:none} .ss-loc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--card);border:3px solid var(--blue);cursor:pointer;pointer-events:auto;box-shadow:0 1px 4px rgba(0,0,0,.22)} .ss-loc-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--card);border:3px solid var(--blue);cursor:pointer;pointer-events:auto;box-shadow:0 1px 4px rgba(0,0,0,.22)} .ss-loc-range:focus{outline:none} /* PHN Commissioner Dashboard */ .phn-stat-value{font-size:36px;font-weight:800;color:var(--dark);line-height:1} .phn-stat-label{font-size:11px;color:var(--muted);margin-top:4px} .phn-stat-sub{font-size:10px;margin-top:6px;font-weight:600} .phn-traffic-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px} .phn-traffic-table th{text-align:left;padding:7px 10px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--border);white-space:nowrap} .phn-traffic-table td{padding:4px 10px;border-bottom:1px solid var(--border);vertical-align:middle} .phn-traffic-table tr:hover td{background:var(--bt)} .phn-traffic-table tr{cursor:pointer;transition:.15s} .phn-score-pill{display:inline-block;padding:4px 0;border-radius:9px;font-size:11.5px;font-weight:700;color:#fff;min-width:42px;text-align:center;letter-spacing:.2px;box-shadow:0 1px 2px rgba(68,71,106,.12)} .phn-alert-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:9px;margin-bottom:6px;transition:.15s} .phn-alert-item:hover{filter:brightness(0.97)} .phn-alert-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px} .phn-submission-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:9px;margin-bottom:4px;border:1px solid var(--border)} .phn-standing-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:12px;font-size:11px;font-weight:700} .phn-kpi-card{padding:14px;border:1px solid var(--border);border-radius:10px;text-align:center} .phn-kpi-val{font-size:24px;font-weight:800;color:var(--dark)} .phn-kpi-label{font-size:10.5px;color:var(--muted);margin-top:2px} .phn-kpi-sub{font-size:10px;margin-top:6px;font-weight:600} .phn-bar{height:6px;border-radius:3px;overflow:hidden;background:var(--border)} .phn-bar-fill{height:100%;border-radius:3px;transition:width .6s ease} /* PHN sidebar label */ .sb-phn-badge{font-size:7px;font-weight:700;letter-spacing:.8px;background:rgba(255,249,145,.2);color:var(--yellow);padding:2px 8px;border-radius:8px;margin-left:auto} /* ──────────────────────────────────────────────── Action Centre Review Modal Large, card-based, Ryse-branded review workspace ──────────────────────────────────────────────── */ .review-modal-overlay{position:fixed;inset:0;background:rgba(26,26,52,.55);display:flex;align-items:center;justify-content:center;z-index:9500;padding:24px;animation:reviewFade .16s ease-out} @keyframes reviewFade{from{opacity:0}to{opacity:1}} .review-modal{background:var(--card,#fff);border:1px solid var(--border);border-radius:18px;width:100%;max-width:820px;max-height:92vh;display:flex;flex-direction:column;padding:0;box-shadow:0 24px 60px rgba(26,26,52,.35);overflow:hidden} .review-modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px 14px;border-bottom:1px solid var(--border)} .review-modal-kicker{font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--blue);margin-bottom:4px} .review-modal-title{font-family:'Familjen Grotesk','Inter',sans-serif;font-size:22px;font-weight:700;color:var(--dark);line-height:1.2} .review-modal-sub{margin-top:6px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap} .review-close{background:transparent;border:0;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:8px;transition:.15s} .review-close:hover{background:var(--bt);color:var(--dark)} .review-modal-body{flex:1;overflow-y:auto;padding:18px 24px;display:flex;flex-direction:column;gap:14px} .review-card{border:1px solid var(--border);border-radius:14px;padding:16px 18px;background:var(--card)} .review-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap} .review-section-title{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)} .review-section-subtitle{font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin-top:10px} .review-summary{font-size:13.5px;line-height:1.6;color:var(--dark);margin-top:6px} .review-action{margin-top:8px;padding:8px 12px;background:rgba(75,119,246,.06);border-left:3px solid var(--blue);border-radius:6px;font-size:12.5px;color:var(--dark)} .review-docs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .review-doc-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:var(--bt);border:1px solid var(--border);border-radius:8px;font-size:11.5px;color:var(--dark)} .review-doc-chip::before{content:'↓';font-weight:700;color:var(--blue)} .review-muted{color:var(--muted)} .review-template-picker{display:flex;align-items:center;gap:8px} .review-fields{display:flex;flex-direction:column;gap:10px;padding-top:4px} .review-field{display:flex;flex-direction:column;gap:5px} .review-field > label{font-size:12px;font-weight:500;color:var(--dark)} .review-input{padding:8px 12px;font-size:13px} .review-yesno{display:flex;gap:6px} .review-yn-btn{padding:6px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;transition:.15s;min-height:36px} .review-yn-btn:hover{border-color:var(--blue);color:var(--blue)} .review-yn-btn.active{border-color:var(--blue);color:var(--blue);background:rgba(75,119,246,.08);font-weight:600} .review-yn-btn.active.yes{border-color:var(--cs);color:#0B5A20;background:var(--bgs)} .review-yn-btn.active.no{border-color:var(--cc);color:#A11226;background:var(--bgc)} .review-rating{display:flex;gap:4px} .review-rating-btn{width:34px;height:34px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s} .review-rating-btn:hover{border-color:var(--blue);color:var(--blue)} .review-rating-btn.active{border-color:var(--blue);background:var(--blue);color:#fff} .review-notes-wrap{margin-top:12px;display:flex;flex-direction:column;gap:6px} .review-notes{resize:vertical;min-height:70px;font-size:12.5px;line-height:1.5} .review-notes-helpers{display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* Communication timeline */ .review-timeline{display:flex;flex-direction:column;gap:0;margin-top:4px;padding-left:4px} .review-tl-item{position:relative;display:flex;gap:14px;padding:10px 0 10px 2px} .review-tl-item::before{content:'';position:absolute;left:7px;top:16px;bottom:-6px;width:2px;background:var(--border)} .review-tl-item:last-child::before{display:none} .review-tl-dot{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;border:3px solid #fff;background:var(--blue);box-shadow:0 0 0 1px var(--blue);flex-shrink:0;margin-top:3px} .review-tl-item.ok .review-tl-dot{background:var(--cs);box-shadow:0 0 0 1px var(--cs)} .review-tl-item.bad .review-tl-dot{background:var(--cc);box-shadow:0 0 0 1px var(--cc)} .review-tl-content{flex:1;padding-bottom:2px} .review-tl-meta{font-size:11px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px} .review-tl-tag{display:inline-block;padding:1px 7px;border-radius:6px;background:var(--bt);color:#0F408F;border:1px solid #EAF2FF;font-size:9.5px;letter-spacing:.4px;text-transform:lowercase;font-weight:600} .review-tl-body{font-size:12.5px;color:var(--dark);line-height:1.55;margin-top:2px;white-space:pre-wrap} .review-comment-add{margin-top:12px;display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px dashed var(--border)} .review-comment-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} /* Badges inside review modal / timeline */ .review-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.2px;text-transform:lowercase} .review-badge.approved{background:var(--bgs);color:#0B5A20;border:1px solid var(--bds)} .review-badge.declined{background:var(--bgc);color:#A11226;border:1px solid var(--bdc)} .review-badge.pending{background:var(--bge);color:#1D4ED8;border:1px solid var(--bde)} .review-badge.noted{background:var(--bt);color:#0F408F;border:1px solid #8FB6F7} .review-badge.urgent{background:var(--yellow);color:var(--dark);border:1px solid #FFE0AE} /* Callout used inside modals */ .review-callout{background:rgba(75,119,246,.06);border-left:3px solid var(--blue);padding:9px 12px;border-radius:8px;font-size:11.5px;color:var(--dark);line-height:1.5} /* Footer strip */ .review-modal-footer{display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid var(--border);background:#FCFCFA;flex-wrap:wrap} .review-modal-footer .btn{min-height:36px} .review-export-wrap{position:relative} .review-export-menu{position:absolute;bottom:calc(100% + 6px);right:0;display:flex;flex-direction:column;background:var(--card);border:1.5px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:180px;padding:4px;z-index:10} .review-export-menu button{background:transparent;border:0;padding:8px 12px;text-align:left;font-size:12px;color:var(--dark);cursor:pointer;border-radius:6px;transition:.12s;font-weight:500} .review-export-menu button:hover{background:var(--bt);color:var(--blue)} .review-inline-alert{margin:0 20px;padding:8px 12px;border-radius:8px;background:var(--bgc);color:#A11226;border:1px solid var(--bdc);font-size:12px} /* Email-export dialog */ .review-email-modal{max-width:640px} .review-email-overlay{z-index:9600} /* Toast for modal actions */ .review-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);padding:10px 18px;background:var(--toast);color:#fff;border-radius:10px;font-size:12.5px;z-index:10000;opacity:0;transition:opacity .18s,transform .18s;box-shadow:0 8px 24px rgba(0,0,0,.25);text-transform:lowercase} .review-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .review-toast.error{background:#A11226} /* ──────────────────────────────────────────────── Templates settings tab ──────────────────────────────────────────────── */ .templates-filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px} .templates-table{width:100%;border-collapse:collapse;font-size:12.5px} .templates-table th{text-align:left;padding:8px 10px;font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;border-bottom:2px solid var(--border)} .templates-table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle} .templates-table tr:hover td{background:var(--bt)} .templates-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.2px;text-transform:lowercase} .templates-badge.standard{background:rgba(75,119,246,.08);color:var(--blue);border:1px solid rgba(75,119,246,.2)} .templates-badge.custom{background:var(--yellow);color:var(--dark);border:1px solid #FFE0AE} .templates-actions{display:flex;gap:4px;justify-content:flex-end} .templates-action-btn{padding:4px 10px;border:1px solid var(--border);border-radius:7px;background:var(--card);font-size:11px;color:var(--muted);cursor:pointer;font-weight:500;transition:.15s} .templates-action-btn:hover{border-color:var(--blue);color:var(--blue)} .templates-action-btn.danger:hover{border-color:var(--cc);color:#A11226} .token-chip{display:inline-block;padding:2px 8px;margin:2px 4px 2px 0;background:rgba(75,119,246,.08);color:var(--blue);border:1px solid rgba(75,119,246,.2);border-radius:8px;font-size:10.5px;font-family:'SFMono-Regular',Consolas,monospace;cursor:pointer;transition:.12s} .token-chip:hover{background:var(--blue);color:#fff} .templates-editor{display:flex;flex-direction:column;gap:14px} .templates-field-row{display:grid;grid-template-columns:1fr 150px 40px;gap:8px;align-items:end} .templates-field-remove{background:transparent;border:0;color:#A11226;cursor:pointer;font-size:18px;padding:0 4px} /* ──────────────────────────────────────────────── Reports landing page ──────────────────────────────────────────────── */ .reports-card{background:var(--card,#fff);border:1.5px solid var(--border);border-radius:14px;padding:18px 20px;transition:border-color .15s,box-shadow .15s,transform .15s;display:flex;flex-direction:column} .reports-card:hover{border-color:var(--blue);box-shadow:0 8px 20px rgba(75,119,246,.08);transform:translateY(-1px)} .custom-section-chk{transition:.15s;user-select:none} .custom-section-chk:hover{border-color:var(--blue);background:rgba(75,119,246,.04)} .custom-section-chk:has(input:checked){border-color:var(--blue);background:rgba(75,119,246,.06)} /* ──────────────────────────────────────────────── Service Comparison (Commissioner) ──────────────────────────────────────────────── */ .comparison-page{display:flex;flex-direction:column;gap:14px} .comparison-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 16px} .comparison-mode{display:flex;gap:4px;padding:4px;background:var(--bt);border-radius:12px;flex-shrink:0} .cmp-mode-btn{padding:7px 16px;border:0;border-radius:9px;background:transparent;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px;transition:.15s} .cmp-mode-btn:hover{color:var(--blue)} .cmp-mode-btn.active{background:var(--card);color:var(--blue);box-shadow:0 2px 6px rgba(75,119,246,.12)} .cmp-mode-icon{font-size:14px;line-height:1} .comparison-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1} .cmp-filter{display:flex;flex-direction:column;gap:3px} .cmp-filter-label{font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)} .cmp-search{font-size:12px} .comparison-picker-card{padding:16px 18px} .cmp-picker-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px;flex-wrap:wrap} .cmp-picker-card-title{font-size:14px;font-weight:700;color:var(--dark)} .cmp-picker-card-sub{font-size:11.5px;color:var(--muted);margin-top:2px} .cmp-service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px} .cmp-service-chip{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border:1.5px solid var(--border);border-radius:9px;cursor:pointer;transition:.15s;background:var(--card)} .cmp-service-chip:hover{border-color:var(--blue);background:rgba(75,119,246,.03)} .cmp-service-chip.active{border-color:var(--blue);background:rgba(75,119,246,.06)} .cmp-service-chip.filtered-out{opacity:.45;cursor:not-allowed} .cmp-service-chip.filtered-out:hover{border-color:var(--border);background:var(--card)} .cmp-service-chip input{accent-color:var(--blue);margin-top:3px;flex-shrink:0} .cmp-service-chip-body{display:flex;flex-direction:column;min-width:0;flex:1} .cmp-service-chip-name{font-size:12.5px;font-weight:600;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cmp-service-chip-meta{font-size:10.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .comparison-pickers{padding:14px 16px} .cmp-picker-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .cmp-picker-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);min-width:64px} .comparison-chart-card{padding:18px 20px} .comparison-table-card{padding:16px 18px;overflow-x:auto} .cmp-chart-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;gap:14px;flex-wrap:wrap} .cmp-chart-title{font-family:'Familjen Grotesk','Inter',sans-serif;font-size:16px;font-weight:700;color:var(--dark)} .cmp-chart-sub{font-size:11.5px;color:var(--muted);margin-top:2px} .cmp-chart-svg{display:block;max-width:100%} .cmp-bar-row{cursor:pointer;transition:opacity .12s} .cmp-bar-row:hover{opacity:.75} .cmp-bar-fill{transition:.2s} .cmp-scatter-dot{cursor:pointer;transition:.15s} .cmp-scatter-dot:hover circle{r:11} .comparison-table{width:100%;border-collapse:collapse;font-size:12.5px} .comparison-table th{text-align:left;padding:8px 10px;font-size:9.5px;font-weight:700;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;border-bottom:2px solid var(--border);white-space:nowrap} .comparison-table td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle;cursor:pointer} .comparison-table tr:hover td{background:var(--bt)} .cmp-band-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle} /* Scorecard mode */ .sc-chip{display:inline-flex;align-items:center;padding:3px 10px;font-size:11px;border:1px solid var(--border);border-radius:999px;cursor:pointer;background:var(--card);color:var(--muted);transition:.12s;user-select:none} .sc-chip:hover{border-color:var(--blue);color:var(--blue)} .sc-chip.active{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600} .scorecard-matrix{width:100%;border-collapse:separate;border-spacing:2px;font-size:11.5px} .scorecard-matrix th{padding:8px 10px;font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);text-align:left;white-space:nowrap} .scorecard-matrix th.sc-sticky{position:sticky;left:0;background:var(--card,#fff);z-index:2} .scorecard-matrix td{padding:10px 12px;white-space:nowrap} .scorecard-matrix td.sc-name{font-weight:600;color:var(--dark);background:var(--card,#fff);position:sticky;left:0;z-index:1;border-right:2px solid var(--border);cursor:pointer} .scorecard-matrix tr:hover td.sc-name{background:var(--bt)} .sc-cell{text-align:center;min-width:60px;border-radius:6px;color:#fff;font-weight:600;cursor:pointer} .sc-cell-value{font-size:11.5px} .sc-band-good{background:var(--cs)} .sc-band-mid{background:var(--cm)} .sc-band-bad{background:var(--cc)} .sc-band-null{background:var(--muted);opacity:.5} /* Trend small-multiples */ .trend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px} .trend-card{border:1px solid var(--border);border-radius:10px;padding:10px 12px 4px;cursor:pointer;transition:.15s;background:var(--card,#fff)} .trend-card:hover{border-color:var(--blue);box-shadow:0 4px 12px rgba(75,119,246,.08)} .trend-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px} .trend-card-name{font-size:11.5px;font-weight:600;color:var(--dark)} /* Regional Snapshot tabs (Overview + 6 domains) */ .phn-snaptabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:4px 0 22px} .phn-snaptab{background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);padding:10px 15px;border-radius:8px 8px 0 0;transition:color .15s,background .15s} .phn-snaptab:hover{color:var(--dark);background:var(--bt)} .phn-snaptab.active{color:var(--blue);border-bottom-color:var(--blue)} /* Domain sub-pages under Regional Snapshot in the commissioner nav */ .sb-item.sb-subnav{padding-left:34px;font-size:12.5px} .sb-item.sb-subnav svg{width:15px;height:15px;opacity:.85}