/* Tailwind-inspired, scope-safe utilities for MedEx dashboards. Everything is scoped under .medexp-tw so themes remain unaffected. This is a minimal, performance-focused subset (not full Tailwind). */ /* Base typography for the Tailwind-scoped dashboard shell */ .medexp-tw{ font-family:var(--medexp-font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial); color:var(--medexp-text, #0f172a); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Keep links sane inside the app shell (WP themes often style anchors aggressively) */ .medexp-tw a{ color:inherit; text-decoration:none; } .medexp-tw a:hover{ text-decoration:none; } .medexp-tw h1{ font-size:clamp(1.35rem, 2vw, 1.9rem); letter-spacing:-0.02em; } .medexp-tw h2{ font-size:1.15rem; letter-spacing:-0.01em; } :where(.medexp-tw) { --tw-gray-50:#f9fafb; --tw-gray-100:#f3f4f6; --tw-gray-200:#e5e7eb; --tw-gray-300:#d1d5db; --tw-gray-400:#9ca3af; --tw-gray-500:#6b7280; --tw-gray-600:#4b5563; --tw-gray-700:#374151; --tw-gray-900:#111827; --tw-indigo-500:var(--medexp-brand-blue, #1a4f9c); --tw-indigo-600:var(--medexp-brand-blue, #1a4f9c); --tw-emerald-500:var(--medexp-brand-teal, #00a676); --tw-amber-500:#f59e0b; --tw-rose-500:#f43f5e; --tw-white:#ffffff; /* Extended palette for enterprise dashboard */ --tw-slate-600:#475569; --tw-slate-900:#0f172a; --tw-sky-600:var(--medexp-brand-blue, #1a4f9c); --tw-amber-600:#d97706; --tw-emerald-600:var(--medexp-brand-teal, #00a676); --tw-emerald-700:color-mix(in srgb, var(--medexp-brand-teal, #00a676) 80%, black 20%); /* Spacing + shadow tokens */ --tw-space-4:1rem; --tw-shadow:0 10px 25px rgba(2,6,23,.08); color: var(--tw-gray-900); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Full-bleed dashboard wrapper Many WordPress themes constrain .entry-content width. When the dashboard is embedded via shortcode, we expand it to viewport width so it feels like a first-class SaaS app. */ .medexp-dashboardPage.medexp-tw{ position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; } .medexp-dashboardPage .tw-shell{min-height:100vh;background:radial-gradient(900px 420px at 20% -10%, rgba(var(--medexp-brand-blue-rgb,26,79,156),.18), transparent 60%), radial-gradient(900px 420px at 80% -10%, rgba(var(--medexp-brand-teal-rgb,0,166,118),.10), transparent 60%), var(--tw-gray-50);} /* Preflight-ish */ :where(.medexp-tw) *, :where(.medexp-tw) *::before, :where(.medexp-tw) *::after { box-sizing: border-box; } :where(.medexp-tw) a { color: inherit; text-decoration: none; } :where(.medexp-tw) button { font: inherit; } /* Layout */ :where(.medexp-tw) .min-h-screen{min-height:100vh;} :where(.medexp-tw) .w-full{width:100%;} :where(.medexp-tw) .max-w-7xl{max-width:80rem;} :where(.medexp-tw) .mx-auto{margin-left:auto;margin-right:auto;} :where(.medexp-tw) .flex{display:flex;} :where(.medexp-tw) .inline-flex{display:inline-flex;} :where(.medexp-tw) .grid{display:grid;} :where(.medexp-tw) .hidden{display:none;} :where(.medexp-tw) .block{display:block;} :where(.medexp-tw) .flex-col{flex-direction:column;} :where(.medexp-tw) .items-center{align-items:center;} :where(.medexp-tw) .items-start{align-items:flex-start;} :where(.medexp-tw) .justify-between{justify-content:space-between;} :where(.medexp-tw) .justify-center{justify-content:center;} :where(.medexp-tw) .gap-2{gap:0.5rem;} :where(.medexp-tw) .gap-3{gap:0.75rem;} :where(.medexp-tw) .gap-4{gap:1rem;} :where(.medexp-tw) .gap-6{gap:1.5rem;} :where(.medexp-tw) .h-2{height:0.5rem;} :where(.medexp-tw) .h-3{height:0.75rem;} :where(.medexp-tw) .h-10{height:2.5rem;} :where(.medexp-tw) .rounded-full{border-radius:9999px;} :where(.medexp-tw) .overflow-hidden{overflow:hidden;} :where(.medexp-tw) .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} :where(.medexp-tw) .text-center{text-align:center;} :where(.medexp-tw) .p-2{padding:0.5rem;} :where(.medexp-tw) .p-3{padding:0.75rem;} :where(.medexp-tw) .p-4{padding:1rem;} :where(.medexp-tw) .p-6{padding:1.5rem;} :where(.medexp-tw) .px-3{padding-left:0.75rem;padding-right:0.75rem;} :where(.medexp-tw) .px-4{padding-left:1rem;padding-right:1rem;} :where(.medexp-tw) .px-6{padding-left:1.5rem;padding-right:1.5rem;} :where(.medexp-tw) .py-2{padding-top:0.5rem;padding-bottom:0.5rem;} :where(.medexp-tw) .py-3{padding-top:0.75rem;padding-bottom:0.75rem;} :where(.medexp-tw) .py-4{padding-top:1rem;padding-bottom:1rem;} :where(.medexp-tw) .mt-2{margin-top:0.5rem;} :where(.medexp-tw) .mt-4{margin-top:1rem;} :where(.medexp-tw) .mt-6{margin-top:1.5rem;} /* Typography */ :where(.medexp-tw) .text-xs{font-size:0.75rem;line-height:1rem;} :where(.medexp-tw) .text-sm{font-size:0.875rem;line-height:1.25rem;} :where(.medexp-tw) .text-base{font-size:1rem;line-height:1.5rem;} :where(.medexp-tw) .text-lg{font-size:1.125rem;line-height:1.75rem;} :where(.medexp-tw) .text-2xl{font-size:1.5rem;line-height:2rem;} :where(.medexp-tw) .font-medium{font-weight:500;} :where(.medexp-tw) .font-semibold{font-weight:600;} :where(.medexp-tw) .font-bold{font-weight:700;} :where(.medexp-tw) .tracking-tight{letter-spacing:-0.015em;} :where(.medexp-tw) .text-gray-900{color:var(--tw-gray-900);} :where(.medexp-tw) .text-gray-700{color:var(--tw-gray-700);} :where(.medexp-tw) .text-gray-600{color:var(--tw-gray-600);} :where(.medexp-tw) .text-gray-500{color:var(--tw-gray-500);} :where(.medexp-tw) .text-indigo-600{color:var(--tw-indigo-600);} /* Surfaces */ :where(.medexp-tw) .bg-white{background-color:var(--tw-white);} :where(.medexp-tw) .bg-gray-50{background-color:var(--tw-gray-50);} :where(.medexp-tw) .bg-gray-100{background-color:var(--tw-gray-100);} :where(.medexp-tw) .border{border-width:1px;border-style:solid;} :where(.medexp-tw) .border-gray-200{border-color:var(--tw-gray-200);} :where(.medexp-tw) .rounded-lg{border-radius:0.75rem;} :where(.medexp-tw) .rounded-xl{border-radius:1rem;} :where(.medexp-tw) .rounded-2xl{border-radius:1.25rem;} :where(.medexp-tw) .shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.06);} :where(.medexp-tw) .shadow{box-shadow:0 10px 20px rgba(0,0,0,0.08);} /* WP theme global button:hover override. Many WP themes add border-color / outline on button:hover / :focus. Neutralize for ALL buttons inside our dashboard wrapper. */ .medexp-tw button:hover, .medexp-tw button:focus{ outline: none !important; border-color: inherit !important; } .medexp-tw button.tw-btn:hover{ border-color: transparent !important; } .medexp-tw button.tw-btn-secondary:hover{ border-color: rgba(var(--medexp-brand-blue-rgb,26,79,156),0.38) !important; } .medexp-tw button.tw-btn-ghost:hover{ border-color: transparent !important; } /* Buttons */ :where(.medexp-tw) .tw-btn{ border-radius:9999px; padding:0.65rem 1.15rem; font-weight:900; letter-spacing:-0.01em; transition:transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1), filter 0.2s cubic-bezier(0.4,0,0.2,1), background-color 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.2s cubic-bezier(0.4,0,0.2,1), color 0.2s cubic-bezier(0.4,0,0.2,1); /* Ensure icons align horizontally with button labels */ display:inline-flex; cursor:pointer; align-items:center; justify-content:center; gap:0.55rem; line-height:1.1; } /* Our default icon class is block-level for standalone usage; in buttons it must be inline. */ :where(.medexp-tw) .tw-btn .tw-ico{display:inline-block;} :where(.medexp-tw) .tw-btn:active{transform:translateY(1px);} :where(.medexp-tw) .tw-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(var(--medexp-brand-blue-rgb,26,79,156),.18), 0 10px 22px rgba(17,24,39,.08);} :where(.medexp-tw) .tw-btn-primary{background:var(--medexp-primary-grad, var(--medexp-brand-teal, #00a676));color:#fff;border:1px solid rgba(0,0,0,0.06);box-shadow:0 14px 26px -20px rgba(var(--medexp-brand-teal-rgb,0,166,118),0.95), 0 10px 18px -14px rgba(0,0,0,0.18);text-shadow:0 1px 1px rgba(0,0,0,0.22);} :where(.medexp-tw) .tw-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 32px -22px rgba(var(--medexp-brand-teal-rgb,0,166,118),0.95), 0 18px 26px -18px rgba(0,0,0,0.18);filter:brightness(0.96);} :where(.medexp-tw) .tw-btn-secondary{background:rgba(255,255,255,0.98);color:var(--medexp-brand-blue, #1a4f9c);border:2px solid rgba(var(--medexp-brand-blue-rgb,26,79,156),0.38);box-shadow:0 10px 18px -16px rgba(var(--medexp-brand-navy-rgb,15,23,42),0.14);} :where(.medexp-tw) .tw-btn-secondary:hover{background-color:var(--tw-gray-50);} :where(.medexp-tw) .tw-btn-ghost{background:transparent;border:1px solid transparent;color:var(--tw-gray-700);} :where(.medexp-tw) .tw-btn-ghost:hover{background-color:var(--tw-gray-100);} /* Button contrast fixes WP themes + our non-specific :where() selectors can cause anchor colors to override button text. Force correct foreground colors for all button variants (including buttons). */ .medexp-tw .tw-btn, .medexp-tw a.tw-btn, .medexp-tw a.tw-btn:visited{ text-decoration:none !important; } .medexp-tw .tw-btn-primary, .medexp-tw a.tw-btn-primary, .medexp-tw a.tw-btn-primary:visited{ color:#fff !important; } .medexp-tw .tw-btn-secondary, .medexp-tw a.tw-btn-secondary, .medexp-tw a.tw-btn-secondary:visited{ color:var(--tw-gray-900) !important; } .medexp-tw .tw-btn-ghost, .medexp-tw a.tw-btn-ghost, .medexp-tw a.tw-btn-ghost:visited{ color:var(--tw-gray-700) !important; } /* Ensure nested spans/icons inside buttons inherit the correct foreground */ .medexp-tw .tw-btn-primary *{ color:inherit !important; } /* WP themes (and our own global .medexp-scope a rule) can override anchor colors. Force button contrast so we never end up with "blue on blue" or dark text on dark buttons. */ .medexp-scope a.tw-btn, .medexp-scope a.tw-btn:visited{ text-decoration:none !important; } .medexp-scope a.tw-btn-primary, .medexp-scope a.tw-btn-primary:visited{ color:#fff !important; } .medexp-scope a.tw-btn-secondary, .medexp-scope a.tw-btn-secondary:visited{ color:var(--tw-gray-900) !important; } .medexp-scope a.tw-btn-ghost, .medexp-scope a.tw-btn-ghost:visited{ color:var(--tw-gray-700) !important; } /* If a button contains nested tags (e.g., ), keep the foreground consistent */ .medexp-scope .tw-btn-primary *{ color:inherit !important; } /* Ensure button-like cursor on Tailwind buttons in scoped containers */ .medexp-scope .tw-btn{ cursor:pointer; } .medexp-scope .tw-btn[disabled], .medexp-scope .tw-btn:disabled{ cursor:not-allowed; } /* WP themes sometimes override anchor colors inside scoped containers. :where() selectors have 0 specificity, so we add explicit, higher-specificity guards. */ .medexp-tw a.tw-btn, .medexp-tw a.tw-btn:visited{ text-decoration:none !important; } .medexp-tw a.tw-btn-primary, .medexp-tw a.tw-btn-primary:visited{ color:#fff !important; } .medexp-tw a.tw-btn-secondary, .medexp-tw a.tw-btn-secondary:visited{ color:var(--tw-gray-900) !important; } .medexp-tw a.tw-btn-ghost, .medexp-tw a.tw-btn-ghost:visited{ color:var(--tw-gray-700) !important; } .medexp-tw a.tw-btn *{ color:inherit !important; } :where(.medexp-tw) button[disabled]{cursor:not-allowed;} /* Inputs */ :where(.medexp-tw) .tw-input{width:100%;padding:0.65rem 0.85rem;border-radius:0.85rem;border:1px solid var(--tw-gray-200);background:var(--tw-white);color:var(--tw-gray-900);outline:none;transition:border-color .12s ease, box-shadow .12s ease;} :where(.medexp-tw) .tw-input:focus{border-color:rgba(var(--medexp-brand-blue-rgb,26,79,156),.8);box-shadow:0 0 0 4px rgba(var(--medexp-brand-blue-rgb,26,79,156),.16);} /* Nav */ :where(.medexp-tw) .tw-shell{position:relative;} :where(.medexp-tw) .tw-overlay{display:none;} :where(.medexp-tw) .tw-navClose{display:none;} :where(.medexp-tw) .tw-sidebar{width:18rem;flex:0 0 18rem;position:sticky;top:0;align-self:flex-start;height:100vh;padding:1.25rem;background:linear-gradient(180deg,#fff,rgba(249,250,251,.6));border-right:1px solid var(--tw-gray-200);} :where(.medexp-tw) .tw-navlink{display:flex;align-items:center;gap:0.65rem;padding:0.6rem 0.75rem;border-radius:0.85rem;color:var(--tw-gray-700);font-weight:600;} :where(.medexp-tw) .tw-navlink:hover{background:var(--tw-gray-50);} :where(.medexp-tw) .tw-navlink:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(var(--medexp-brand-blue-rgb,26,79,156),.14);} :where(.medexp-tw) .tw-navlink.is-active{background:rgba(var(--medexp-brand-blue-rgb,26,79,156),.10);color:var(--tw-indigo-600);} :where(.medexp-tw) .tw-navicon{width:1.15rem;height:1.15rem;display:inline-flex;align-items:center;justify-content:center;} :where(.medexp-tw) .tw-topbar{position:sticky;top:0;z-index:40;background:rgba(249,250,251,.86);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--tw-gray-200);} :where(.medexp-tw) .tw-topbar__inner{max-width:88rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;gap:1rem;} /* Main content width/padding (matches topbar) */ :where(.medexp-tw) .tw-main{max-width:88rem;margin:0 auto;padding:1.5rem;} @media (min-width: 1024px){ :where(.medexp-tw) .tw-main{padding:1.75rem 2rem;} } :where(.medexp-tw) .tw-card{border-radius:18px;box-shadow:0 1px 0 rgba(17,24,39,.02), 0 4px 14px rgba(2,6,23,.05), 0 12px 32px rgba(2,6,23,.03);border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);} :where(.medexp-tw) .tw-card__pad{padding:1.35rem;} @media (min-width: 1024px){ :where(.medexp-tw) .tw-card__pad{padding:1.5rem;} } :where(.medexp-tw) .tw-kicker{font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-gray-500);font-weight:700;} /* Dashboard components */ :where(.medexp-tw) .tw-muted{color:var(--tw-gray-600);font-size:0.9375rem;line-height:1.35rem;} :where(.medexp-tw) .tw-title{font-size:1.5rem;line-height:2rem;font-weight:800;letter-spacing:-0.02em;} :where(.medexp-tw) .tw-h2{font-size:1.125rem;line-height:1.6rem;font-weight:800;letter-spacing:-0.01em;} :where(.medexp-tw) .tw-sectionhead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;row-gap:.75rem;flex-wrap:wrap;margin-bottom:0.9rem;} :where(.medexp-tw) .tw-sectionhead__sub{margin-top:0.25rem;color:var(--tw-gray-500);font-size:0.875rem;} :where(.medexp-tw) .tw-divider{height:1px;background:rgba(148,163,184,.15);margin:1rem 0;} :where(.medexp-tw) .tw-progress{background:rgba(148,163,184,.15);border-radius:9999px;overflow:hidden;height:0.45rem;position:relative;} :where(.medexp-tw) .tw-progress__fill{height:100%;background:linear-gradient(90deg, #3BC6C2, #117673);width:0;border-radius:inherit;position:relative;overflow:hidden;transition:width .4s cubic-bezier(.34,1.56,.64,1);} /* Shine sweep on progress fill */ :where(.medexp-tw) .tw-progress__fill::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.30) 40%, rgba(255,255,255,.30) 60%, transparent 100%); animation:twProgressShine 1.8s ease-in-out infinite; } @keyframes twProgressShine{0%{transform:translateX(-120%);}100%{transform:translateX(250%);}} :where(.medexp-tw) .tw-statRow{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;} :where(.medexp-tw) .tw-stat{font-size:2.1rem;line-height:1;font-weight:800;letter-spacing:-0.02em;} :where(.medexp-tw) .tw-statSmall{font-size:0.875rem;font-weight:700;color:var(--tw-gray-600);} :where(.medexp-tw) .tw-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.75rem;} :where(.medexp-tw) .tw-tile{border:1px solid var(--tw-gray-200);border-radius:1rem;padding:0.9rem;background:var(--tw-white);transition:transform .08s ease, box-shadow .12s ease;} :where(.medexp-tw) .tw-tile:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(0,0,0,0.08);} :where(.medexp-tw) .tw-tile__title{font-weight:800;color:var(--tw-gray-900);font-size:0.875rem;line-height:1.15rem;} :where(.medexp-tw) .tw-tile__meta{margin-top:0.35rem;color:var(--tw-gray-500);font-size:0.75rem;font-weight:700;} :where(.medexp-tw) .tw-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.75rem;} :where(.medexp-tw) .tw-badgeCard{border:1px solid var(--tw-gray-200);border-radius:1rem;padding:0.85rem;background:var(--tw-white);display:flex;gap:0.75rem;align-items:center;} :where(.medexp-tw) .tw-badgeIcon{width:2.25rem;height:2.25rem;border-radius:0.9rem;display:flex;align-items:center;justify-content:center;background:rgba(var(--medexp-brand-blue-rgb,26,79,156),.12);color:var(--tw-indigo-600);font-weight:800;} :where(.medexp-tw) .tw-badgeLabel{font-weight:800;font-size:0.875rem;line-height:1.15rem;} /* ── Redesigned Badges v2 ── */ :where(.medexp-tw) .tw-badgeFilters{display:flex;gap:0.5rem;margin-bottom:1.25rem;flex-wrap:wrap;} :where(.medexp-tw) .tw-badgeFilter{display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.85rem;border-radius:999px;border:1px solid var(--tw-gray-200);background:var(--tw-white);font-size:0.8rem;font-weight:700;color:var(--tw-gray-600);cursor:pointer;transition:all .15s;} :where(.medexp-tw) .tw-badgeFilter:hover{border-color:rgba(23,157,153,.3);color:#179D99;} :where(.medexp-tw) .tw-badgeFilter.is-active{background:rgba(23,157,153,.08);color:#179D99;border-color:rgba(23,157,153,.25);} :where(.medexp-tw) .tw-badgeFilter__count{background:rgba(148,163,184,.12);border-radius:999px;padding:0.05rem 0.4rem;font-size:0.7rem;min-width:1.2rem;text-align:center;line-height:1.4;} :where(.medexp-tw) .tw-badgeFilter.is-active .tw-badgeFilter__count{background:rgba(23,157,153,.12);} :where(.medexp-tw) .tw-badgeGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;} :where(.medexp-tw) .tw-badgeCard2{display:flex;gap:0.85rem;align-items:flex-start;padding:1rem;border-radius:1rem;border:1px solid var(--tw-gray-200);background:var(--tw-white);transition:transform .1s,box-shadow .15s;} :where(.medexp-tw) .tw-badgeCard2:not(.is-locked):hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08);} :where(.medexp-tw) .tw-badgeCard2.is-locked{opacity:.5;} :where(.medexp-tw) .tw-badgeCard2__icon{width:3rem;height:3rem;flex-shrink:0;border-radius:0.85rem;display:flex;align-items:center;justify-content:center;} :where(.medexp-tw) .tw-badgeCard2__emoji{font-size:1.35rem;} :where(.medexp-tw) .tw-badgeCard2.is-locked .tw-badgeCard2__emoji{filter:grayscale(1);} :where(.medexp-tw) .tw-badgeCard2__info{flex:1;min-width:0;} :where(.medexp-tw) .tw-badgeCard2__title{font-weight:800;font-size:0.875rem;line-height:1.25;color:var(--tw-gray-900);} :where(.medexp-tw) .tw-badgeCard2__desc{font-size:0.75rem;color:var(--tw-gray-500);font-weight:600;margin-top:0.15rem;line-height:1.35;} :where(.medexp-tw) .tw-badgeTierLabel{display:inline-block;font-size:0.6rem;font-weight:800;color:#179D99;background:rgba(23,157,153,.1);border-radius:999px;padding:0.1rem 0.4rem;vertical-align:middle;margin-left:0.2rem;} :where(.medexp-tw) .tw-badgeCard2.is-locked .tw-badgeTierLabel{opacity:.4;} :where(.medexp-tw) .tw-badgeCard2__progress{margin-top:0.4rem;display:flex;align-items:center;gap:0.45rem;} :where(.medexp-tw) .tw-badgeTierDots{display:flex;gap:0.2rem;flex-shrink:0;} :where(.medexp-tw) .tw-badgeTierDot{width:6px;height:6px;border-radius:50%;background:rgba(148,163,184,.2);} :where(.medexp-tw) .tw-badgeTierDot.is-filled{background:#179D99;} :where(.medexp-tw) .tw-badgeProgressBar{flex:1;height:5px;border-radius:999px;background:rgba(148,163,184,.1);overflow:hidden;} :where(.medexp-tw) .tw-badgeProgressBar__fill{height:100%;border-radius:999px;background:rgba(23,157,153,.45);transition:width .3s ease;} :where(.medexp-tw) .tw-badgeCard2__progText{font-size:0.65rem;font-weight:700;color:var(--tw-gray-400);white-space:nowrap;} /* ── Leaderboard Redesign ── */ .medexp-lbStats{display:flex;gap:0.75rem;margin-bottom:1.25rem;} .medexp-lbStatPill{flex:1;display:flex;align-items:center;gap:0.65rem;padding:0.75rem 0.85rem;border-radius:0.85rem;background:rgba(245,158,11,.04);border:1px solid rgba(245,158,11,.1);} .medexp-lbStatPill__emoji{font-size:1.3rem;flex-shrink:0;} .medexp-lbStatPill__val{font-weight:800;font-size:1.1rem;color:var(--tw-gray-900);line-height:1.2;} .medexp-lbStatPill__label{font-size:0.7rem;font-weight:700;color:var(--tw-gray-400);line-height:1;} .medexp-lbOptRow{display:flex;align-items:center;margin-bottom:1rem;} .medexp-lbToggleLabel{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.8rem;font-weight:700;color:var(--tw-gray-500);cursor:pointer;} .medexp-lbToggleLabel input[type="checkbox"]{width:16px;height:16px;accent-color:#179D99;} /* CTA card (opt-in) */ .medexp-lbCta{text-align:center;padding:2.5rem 1.5rem;border-radius:1rem;background:linear-gradient(135deg,rgba(245,158,11,.04),rgba(251,191,36,.06));border:1px dashed rgba(245,158,11,.2);} .medexp-lbCta__icon{font-size:2.5rem;margin-bottom:0.5rem;} .medexp-lbCta__title{font-weight:800;font-size:1.1rem;color:var(--tw-gray-900);margin-bottom:0.35rem;} .medexp-lbCta__desc{font-size:0.85rem;color:var(--tw-gray-500);font-weight:600;margin-bottom:1.25rem;line-height:1.5;} .medexp-lbCta__btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.65rem 1.5rem;border-radius:999px;border:none;background:linear-gradient(135deg,#F59E0B,#FBBF24);color:#fff;font-weight:800;font-size:0.9rem;cursor:pointer;box-shadow:0 4px 12px rgba(245,158,11,.25);transition:transform .1s,box-shadow .15s;} .medexp-lbCta__btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(245,158,11,.3);} .medexp-lbCta__btn svg.tw-ico{width:16px;height:16px;} /* Podium */ .medexp-lbPodium{display:flex;align-items:flex-end;justify-content:center;gap:0.5rem;padding:1.5rem 0 0.5rem;} .medexp-lbPodiumCol{display:flex;flex-direction:column;align-items:center;flex:1;max-width:120px;} .medexp-lbPodiumCol.is-me .medexp-lbPodiumName{font-weight:800;} .medexp-lbPodiumMedal{font-size:1.4rem;margin-bottom:0.35rem;} .medexp-lbPodiumAvatar{border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.12);margin-bottom:0.4rem;} .medexp-lbPodiumAvatar span{font-weight:800;font-size:1rem;color:#fff;text-transform:uppercase;} .medexp-lbPodiumName{font-size:0.75rem;font-weight:700;color:var(--tw-gray-700);text-align:center;line-height:1.25;margin-bottom:0.15rem;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .medexp-lbPodiumXP{font-size:0.7rem;font-weight:800;color:#F59E0B;margin-bottom:0.5rem;} .medexp-lbPodiumBar{width:100%;max-width:64px;border-radius:8px 8px 0 0;min-height:20px;} .medexp-lbYou{display:inline-block;font-size:0.55rem;font-weight:800;color:#179D99;background:rgba(23,157,153,.1);border-radius:999px;padding:0.05rem 0.35rem;margin-left:0.25rem;vertical-align:middle;} /* Ranked list (positions 4+) */ .medexp-lbRankedList{margin-top:0.5rem;border-top:1px solid var(--tw-gray-200,#e2e8f0);padding-top:0.5rem;} .medexp-lbRow{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0.75rem;border-radius:0.75rem;transition:background .1s;} .medexp-lbRow.is-me{background:rgba(23,157,153,.05);} .medexp-lbRankCircle{width:30px;height:30px;border-radius:50%;background:rgba(22,44,85,.06);display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:800;color:var(--tw-gray-500);flex-shrink:0;} .medexp-lbAvatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,rgba(23,157,153,.15),rgba(22,44,85,.1));display:flex;align-items:center;justify-content:center;flex-shrink:0;} .medexp-lbAvatar span{font-weight:800;font-size:0.8rem;color:var(--tw-gray-600);text-transform:uppercase;} .medexp-lbRowInfo{flex:1;min-width:0;} .medexp-lbRowName{font-weight:700;font-size:0.85rem;color:var(--tw-gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .medexp-lbRowXP{font-size:0.75rem;font-weight:800;color:#F59E0B;background:rgba(245,158,11,.08);border-radius:999px;padding:0.3rem 0.65rem;white-space:nowrap;} /* Tip card */ .medexp-lbTip{display:flex;align-items:center;gap:0.5rem;margin-top:1rem;padding:0.85rem 1rem;border-radius:0.85rem;background:rgba(23,157,153,.04);border:1px solid rgba(23,157,153,.1);font-size:0.8rem;font-weight:600;color:var(--tw-gray-600);line-height:1.4;} .medexp-lbTip svg.tw-ico{width:16px;height:16px;color:#179D99;flex-shrink:0;} @media (max-width:640px){ .medexp-lbStats{flex-direction:column;gap:0.5rem;} .medexp-lbPodiumCol{max-width:100px;} .medexp-lbPodiumAvatar{width:36px!important;height:36px!important;} .medexp-lbPodiumAvatar span{font-size:0.85rem;} } :where(.medexp-tw) .tw-list{display:flex;flex-direction:column;gap:0.75rem;} /* Vertical rhythm: stacked cards should never "touch" */ .medexp-tw .tw-main > .tw-card{ margin-bottom:1.25rem; } .medexp-tw .tw-main > .tw-card:last-child{ margin-bottom:0; } :where(.medexp-tw) .tw-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--tw-gray-200);border-radius:1.1rem;padding:0.95rem;background:var(--tw-white);} :where(.medexp-tw) .tw-row__main{min-width:0;} :where(.medexp-tw) .tw-row__title{font-weight:800;letter-spacing:-0.01em;} :where(.medexp-tw) .tw-row__meta{margin-top:0.25rem;color:var(--tw-gray-500);font-size:0.8125rem;font-weight:700;} :where(.medexp-tw) .tw-row__actions{display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:flex-end;} /* Performance charts */ :where(.medexp-tw) .tw-perfGrid{align-items:stretch;} :where(.medexp-tw) .tw-chartCard{ border:1px solid rgba(148,163,184,.18); border-radius:18px; padding:1rem; background:linear-gradient(180deg, rgba(var(--medexp-brand-blue-rgb,26,79,156),.05), transparent 55%), rgba(255,255,255,.92); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(17,24,39,.02), 0 4px 14px rgba(2,6,23,.05), 0 12px 32px rgba(2,6,23,.03); transition:box-shadow .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1); } :where(.medexp-tw) .tw-chartCard:hover{box-shadow:0 1px 0 rgba(17,24,39,.02), 0 8px 22px rgba(2,6,23,.08), 0 16px 40px rgba(2,6,23,.05);transform:translateY(-2px);} :where(.medexp-tw) .tw-chartWrap{margin-top:.55rem;position:relative;border-radius:14px;overflow:hidden;} :where(.medexp-tw) .tw-chartWrap canvas{ width:100%; height:160px; display:block; background:rgba(249,250,251,.45); border:1px solid rgba(148,163,184,.12); border-radius:14px; } :where(.medexp-tw) .tw-chartWrap canvas[data-chart="study-daily"]{ height:180px; } :where(.medexp-tw) .tw-chartTip{ margin-top:.55rem; display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; color:var(--tw-gray-600); font-size:0.875rem; } :where(.medexp-tw) .tw-chartTip strong{ color:var(--tw-gray-900); font-weight:800; } :where(.medexp-tw) .tw-chartTip em{ font-style:normal; color:var(--tw-gray-500); font-weight:700; } /* Chart theme tokens (read by JS) */ .medexp-tw{ --tw-chart-grid: rgba(148,163,184,.35); --tw-chart-axis: rgba(15,23,42,.62); --tw-chart-accent: var(--tw-indigo-600); --tw-chart-accent2: var(--tw-emerald-600); --tw-chart-accent3: var(--tw-sky-600); } /* ══════════════════════════════════════════════════════════════════════ Performance Chart Wow Animations ══════════════════════════════════════════════════════════════════════ */ /* ── 1. Staggered Card Entrance ── */ @keyframes chartCardEntrance{ from{opacity:0;transform:translateY(22px) scale(0.97);} to{opacity:1;transform:translateY(0) scale(1);} } :where(.medexp-tw) .tw-perfGrid.is-chart-entrance .tw-chartCard{ opacity:0; animation:chartCardEntrance .65s cubic-bezier(.34,1.56,.64,1) both; } :where(.medexp-tw) .tw-perfGrid.is-chart-entrance > :nth-child(1) .tw-chartCard{animation-delay:0s;} :where(.medexp-tw) .tw-perfGrid.is-chart-entrance > :nth-child(2) .tw-chartCard{animation-delay:.1s;} :where(.medexp-tw) .tw-perfGrid.is-chart-entrance > :nth-child(3) .tw-chartCard{animation-delay:.22s;} :where(.medexp-tw) .tw-perfGrid.is-chart-entered .tw-chartCard{ opacity:1; transform:none; } /* ── 2. Chart Canvas Shimmer Sweep (post-draw) ── */ @keyframes chartShimmer{ 0%{left:-60%;} 100%{left:120%;} } :where(.medexp-tw) .tw-chartWrap.is-chart-drawn::after{ content:""; position:absolute; top:0;bottom:0; width:60%; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%); pointer-events:none; border-radius:14px; animation:chartShimmer 1s ease-in-out both; } /* ── 3. Subtle glow pulse on card ── */ @keyframes chartGlow{ 0%{box-shadow:0 1px 0 rgba(17,24,39,.02), 0 4px 14px rgba(2,6,23,.05), 0 0 0 rgba(59,198,194,0);} 50%{box-shadow:0 1px 0 rgba(17,24,39,.02), 0 8px 22px rgba(2,6,23,.08), 0 0 18px rgba(59,198,194,.12);} 100%{box-shadow:0 1px 0 rgba(17,24,39,.02), 0 4px 14px rgba(2,6,23,.05), 0 0 0 rgba(59,198,194,0);} } :where(.medexp-tw) .tw-chartCard.is-chart-glowing{ animation:chartGlow 1.8s ease-in-out 1; } /* ── 4. Tip counter fade-in ── */ :where(.medexp-tw) .tw-perfGrid.is-chart-entrance .tw-chartTip{ opacity:0; } :where(.medexp-tw) .tw-perfGrid.is-chart-entered .tw-chartTip{ opacity:1; transition:opacity .4s ease .1s; } /* Better focus + hover affordances */ :where(.medexp-tw) .tw-btn{border-radius:9999px;padding:0.65rem 1.15rem;font-weight:900;letter-spacing:-0.01em;transition:transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1), filter 0.2s cubic-bezier(0.4,0,0.2,1), background-color 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.2s cubic-bezier(0.4,0,0.2,1), color 0.2s cubic-bezier(0.4,0,0.2,1);} :where(.medexp-tw) .tw-navlink:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(var(--medexp-brand-blue-rgb,26,79,156),.16);} :where(.medexp-tw) button[disabled]{cursor:not-allowed;} /* Sidebar polish */ :where(.medexp-tw) .tw-sidebar{background:linear-gradient(180deg, var(--tw-white), rgba(249,250,251,.75));} :where(.medexp-tw) .tw-navlink{transition:background-color .12s ease, color .12s ease, transform .08s ease;} :where(.medexp-tw) .tw-navlink:hover{transform:translateY(-1px);} /* Use space more efficiently on wide screens */ @media (min-width: 1280px){ :where(.medexp-tw) .tw-grid-12{gap:1.5rem;} } @media (max-width: 640px){ :where(.medexp-tw) .tw-tiles{grid-template-columns:repeat(2,minmax(0,1fr));} :where(.medexp-tw) .tw-badges{grid-template-columns:repeat(2,minmax(0,1fr));} :where(.medexp-tw) .tw-badgeGrid{grid-template-columns:1fr;} } /* Layout grid helpers */ :where(.medexp-tw) .tw-grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.25rem;align-items:start;} /* Fill vertical gaps in mixed-height rows by stretching items to the row height */ :where(.medexp-tw) .tw-grid-12.tw-grid-stretch{align-items:stretch;} :where(.medexp-tw) .tw-col-8{grid-column:span 8 / span 8;} :where(.medexp-tw) .tw-col-7{grid-column:span 7 / span 7;} :where(.medexp-tw) .tw-col-6{grid-column:span 6 / span 6;} :where(.medexp-tw) .tw-col-5{grid-column:span 5 / span 5;} :where(.medexp-tw) .tw-col-4{grid-column:span 4 / span 4;} :where(.medexp-tw) .tw-col-3{grid-column:span 3 / span 3;} :where(.medexp-tw) .tw-col-12{grid-column:span 12 / span 12;} /* Mobile responsive */ @media (max-width: 1023px){ :where(.medexp-tw) .tw-navClose{display:inline-flex;} :where(.medexp-tw) .tw-sidebar{position:fixed;inset:0 auto 0 0;transform:translateX(-105%);transition:transform .18s ease;z-index:60;box-shadow:0 20px 40px rgba(0,0,0,.18);} :where(.medexp-tw) .tw-shell.is-nav-open .tw-sidebar{transform:translateX(0);} :where(.medexp-tw) .tw-overlay{display:none;position:fixed;inset:0;background:rgba(17,24,39,.35);z-index:50;} :where(.medexp-tw) .tw-shell.is-nav-open .tw-overlay{display:block;} :where(.medexp-tw) .tw-grid-12{grid-template-columns:1fr;} :where(.medexp-tw) .tw-heatgrid{grid-template-columns:repeat(2,minmax(0,1fr));} :where(.medexp-tw) .tw-col-12,:where(.medexp-tw) .tw-col-8,:where(.medexp-tw) .tw-col-7,:where(.medexp-tw) .tw-col-6,:where(.medexp-tw) .tw-col-5,:where(.medexp-tw) .tw-col-4,:where(.medexp-tw) .tw-col-3{grid-column:auto;} } /* Small, tasteful badges */ :where(.medexp-tw) .tw-pill{display:inline-flex;align-items:center;gap:0.4rem;padding:0.3rem 0.6rem;border-radius:999px;background:rgba(255,255,255,.60);backdrop-filter:blur(6px);border:1px solid rgba(148,163,184,.22);font-size:0.75rem;font-weight:800;color:rgba(15,23,42,.65);} /* Support diagnostics status pills */ :where(.medexp-tw) .tw-pillOk{background:rgba(var(--medexp-brand-teal-rgb,0,166,118),.12);border-color:rgba(var(--medexp-brand-teal-rgb,0,166,118),.25);color:rgba(6,95,70,1);} :where(.medexp-tw) .tw-pillErr{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.22);color:rgba(153,27,27,1);} /* Keep existing MedEx widgets inside Tailwind shell looking consistent */ :where(.medexp-tw) .medexp-courseSearch{border-radius:1.25rem;} :where(.medexp-tw) .medexp-courseSearch.medexp-card{border:none;box-shadow:none;padding:0;background:transparent;} /* ========================================================================== */ /* Princeton Premium dashboard theme overrides */ /* - White sidebar + crisp borders */ /* - Blue active nav pill */ /* - Flatter buttons + cards */ /* ========================================================================== */ /* Palette closer to screenshots */ :where(.medexp-tw){ --tw-gray-50:#f8fafc; --tw-gray-100:#f3f4f6; --tw-gray-200:#e5e7eb; --tw-gray-700:#374151; --tw-gray-900:#111827; --tw-indigo-500:var(--medexp-brand-blue); --tw-indigo-600:var(--medexp-brand-blue); } .medexp-dashboardPage .tw-shell{background:radial-gradient(900px 420px at 20% -10%, rgba(var(--medexp-brand-blue-rgb,26,79,156),.18), transparent 60%), radial-gradient(900px 420px at 80% -10%, rgba(var(--medexp-brand-teal-rgb,0,166,118),.10), transparent 60%), var(--tw-gray-50);} :where(.medexp-tw) .tw-sidebar{ background:#fff; border-right:1px solid var(--tw-gray-200); } :where(.medexp-tw) .tw-navlink{border-radius:0.75rem;} :where(.medexp-tw) .tw-navlink:hover{background:var(--tw-gray-100);transform:none;} :where(.medexp-tw) .tw-navlink.is-active{background:var(--tw-indigo-600);color:#fff;} :where(.medexp-tw) .tw-navlink.is-active .tw-navicon{color:#fff;} /* Topbar: white, no glass */ :where(.medexp-tw) .tw-topbar{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--tw-gray-200);} /* Cards: subtle */ :where(.medexp-tw) .tw-card{border-radius:18px;box-shadow:0 1px 0 rgba(17,24,39,.02), 0 4px 14px rgba(2,6,23,.05), 0 12px 32px rgba(2,6,23,.03);border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);} /* Buttons: solid blue primary; outlined secondary */ :where(.medexp-tw) .tw-btn{border-radius:9999px;padding:0.65rem 1.15rem;font-weight:900;letter-spacing:-0.01em;transition:transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1), filter 0.2s cubic-bezier(0.4,0,0.2,1), background-color 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.2s cubic-bezier(0.4,0,0.2,1), color 0.2s cubic-bezier(0.4,0,0.2,1);} :where(.medexp-tw) .tw-btn-primary{background:var(--medexp-primary-grad, var(--medexp-brand-teal, #00a676));color:#fff;border:1px solid rgba(0,0,0,0.06);box-shadow:0 14px 26px -20px rgba(var(--medexp-brand-teal-rgb,0,166,118),0.95), 0 10px 18px -14px rgba(0,0,0,0.18);text-shadow:0 1px 1px rgba(0,0,0,0.22);} :where(.medexp-tw) .tw-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 32px -22px rgba(var(--medexp-brand-teal-rgb,0,166,118),0.95), 0 18px 26px -18px rgba(0,0,0,0.18);filter:brightness(0.96);} :where(.medexp-tw) .tw-btn-secondary{background:rgba(255,255,255,0.98);color:var(--medexp-brand-blue, #1a4f9c);border:2px solid rgba(var(--medexp-brand-blue-rgb,26,79,156),0.38);box-shadow:0 10px 18px -16px rgba(var(--medexp-brand-navy-rgb,15,23,42),0.14);} :where(.medexp-tw) .tw-btn-secondary:hover{background:var(--tw-gray-50);} /* Typography */ :where(.medexp-tw) .tw-title{font-size:1.65rem;} :where(.medexp-tw) .tw-muted{color:#6b7280;} /* === Enterprise polish additions (Metric strip, Roadmap, Empty states, Skeletons, User menu) === */ /* Metric header strip */ :where(.medexp-tw) .tw-metricStrip, :where(.medexp-tw) .tw-metrics{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--tw-space-4); margin-top:1.25rem; } /* Hide KPI strip when non-relevant dashboard subtab is active */ :where(.medexp-tw) .tw-metricStrip[hidden]{display:none !important;} /* ── Stat metric cards — iOS GameStyle-inspired ───────────────────── Each card gets a colorful wash gradient bg, a 2px gradient stroke border, frosted glass feel, and a bold shadow. Per-card accent colors mirror the native app's GameStyle.accentPair(). ─────────────────────────────────────────────────────────────────── */ /* CSS custom props for per-card accent pairs (matching iOS GameStyle) */ :where(.medexp-tw) .tw-metric--streak{ --_a:#FB923C; --_b:#FB7185; color:#EA580C; } :where(.medexp-tw) .tw-metric--q7{ --_a:#38BDF8; --_b:#8B5CF6; color:#6366F1; } :where(.medexp-tw) .tw-metric--xp{ --_a:#38BDF8; --_b:#8B5CF6; color:#6366F1; } :where(.medexp-tw) .tw-metric--acc{ --_a:#A3E635; --_b:#3BC6C2; color:#16A34A; } :where(.medexp-tw) .tw-metric--time{ --_a:#8B5CF6; --_b:#38BDF8; color:#7C3AED; } :where(.medexp-tw) .tw-metric--countdown{ --_a:#F472B6; --_b:#A78BFA; color:#9333EA; } :where(.medexp-tw) .tw-metric--cat{ --_a:#3BC6C2; --_b:#179D99; color:#117673; } :where(.medexp-tw) .tw-metric{ grid-column:span 2 / span 2; border-radius:18px; padding:1.05rem 1.1rem; padding-right:3.6rem; /* room for absolute-positioned icon badge */ position:relative; overflow:hidden; min-height:148px; display:flex; flex-direction:column; /* Frosted card base */ background:rgba(255,255,255,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); /* iOS-style gradient stroke border (2px, 55% opacity) */ border:2px solid transparent; background-clip:padding-box; /* Rich depth shadow like iOS */ box-shadow: 0 1px 0 rgba(17,24,39,.03), 0 10px 22px rgba(2,6,23,.07), 0 24px 48px rgba(2,6,23,.05); transition:transform .2s ease, box-shadow .2s ease; } :where(.medexp-tw) .tw-metric:hover{ transform:translateY(-2px); box-shadow: 0 1px 0 rgba(17,24,39,.03), 0 14px 32px rgba(2,6,23,.10), 0 32px 56px rgba(2,6,23,.06); } /* ── Wash gradient + top shine (iOS washGradient — subtle color wash via ::before) ── */ :where(.medexp-tw) .tw-metric::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background: /* Shine / reflection at top-left */ radial-gradient(ellipse 75% 45% at 20% 0%, rgba(255,255,255,.50) 0%, transparent 60%), /* Color wash */ linear-gradient( 135deg, color-mix(in srgb, var(--_a, #38BDF8) 22%, transparent) 0%, color-mix(in srgb, var(--_b, #8B5CF6) 16%, transparent) 45%, rgba(255,255,255,.88) 100% ); } /* ── Stroke gradient border (iOS strokeGradient — 2px, 55% opacity) ── */ :where(.medexp-tw) .tw-metric::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:2px; background:linear-gradient(135deg, var(--_a, #38BDF8), var(--_b, #8B5CF6), var(--_a, #38BDF8)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; } :where(.medexp-tw) .tw-metric__label{ font-size:.72rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; color:rgba(15,23,42,.55); position:relative; z-index:1; padding-right:2.6rem; /* prevent overlap with icon badge */ } :where(.medexp-tw) .tw-metric__value{ font-size:1.65rem; font-weight:900; letter-spacing:-0.03em; margin-top:.35rem; position:relative; z-index:1; color:rgba(15,23,42,.92); } :where(.medexp-tw) .tw-metric__sub{ font-size:.85rem; color:rgba(15,23,42,.55); font-weight:700; margin-top:.15rem; position:relative; z-index:1; } :where(.medexp-tw) .tw-spark{display:block;margin-top:.6rem;height:34px;width:100%;position:relative;z-index:1} :where(.medexp-tw) .tw-spark polyline{fill:none;stroke:currentColor;stroke-width:2.5;opacity:.85;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px currentColor)} /* Area fill under sparkline (polygon element) */ :where(.medexp-tw) .tw-spark polygon{fill:currentColor;opacity:.10;} :where(.medexp-tw) .tw-metric__dots, :where(.medexp-tw) .tw-streakDots{ display:flex; gap:.4rem; margin-top:auto; padding-top:.55rem; position:relative; z-index:1; } :where(.medexp-tw) .tw-dot, :where(.medexp-tw) .tw-streakDot{ width:30px; height:36px; border-radius:8px; background:rgba(100,116,139,.10); border:1px solid rgba(100,116,139,.12); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; transition:all .18s cubic-bezier(.34,1.56,.64,1); } /* Day label from data-label attribute */ :where(.medexp-tw) .tw-dot::before{ content:attr(data-label); font-size:.52rem; font-weight:800; letter-spacing:.02em; color:rgba(100,116,139,.45); line-height:1; } /* Day number dot indicator */ :where(.medexp-tw) .tw-dot::after{ content:""; width:6px; height:6px; border-radius:999px; background:rgba(100,116,139,.20); } /* Active day — uses the metric card's accent color */ :where(.medexp-tw) .tw-dot.is-on{ background:linear-gradient(135deg, color-mix(in srgb, var(--_a) 25%, transparent), color-mix(in srgb, var(--_b) 20%, transparent)); border-color:color-mix(in srgb, var(--_a) 35%, transparent); } :where(.medexp-tw) .tw-dot.is-on::before{ color:currentColor; opacity:.70; } :where(.medexp-tw) .tw-dot.is-on::after{ background:currentColor; opacity:.85; box-shadow:0 0 4px currentColor; } /* Today marker — ring highlight */ :where(.medexp-tw) .tw-dot.is-today{ border-color:color-mix(in srgb, var(--_a) 55%, transparent); box-shadow:0 0 0 2px color-mix(in srgb, var(--_a) 15%, transparent); } @media (max-width: 1100px){ :where(.medexp-tw) .tw-metric{grid-column:span 4 / span 4;} } /* On phones + small tablets we still want 2-up KPI cards. Compact the internals so labels/values/sparks fit without overlap. */ @media (max-width: 560px){ :where(.medexp-tw) .tw-metric{ grid-column:span 6 / span 6; padding:0.85rem; padding-right:2.9rem; /* keep room for the icon badge */ min-height:132px; } :where(.medexp-tw) .tw-metric__label{font-size:.68rem;line-height:1.05;} :where(.medexp-tw) .tw-metric__value{font-size:1.35rem;} :where(.medexp-tw) .tw-metric__sub{font-size:.78rem;line-height:1.2;} :where(.medexp-tw) .tw-spark{height:28px;} :where(.medexp-tw) .tw-metric__icon{top:.65rem;right:.65rem;width:2.05rem;height:2.05rem;border-radius:999px;} :where(.medexp-tw) .tw-dot, :where(.medexp-tw) .tw-streakDot{width:24px;height:30px;} :where(.medexp-tw) .tw-dot::before{font-size:.48rem;} :where(.medexp-tw) .tw-dot::after{width:5px;height:5px;} :where(.medexp-tw) .tw-metric svg, :where(.medexp-tw) .tw-metric canvas{max-width:100%;} } /* Ultra-small devices can drop back to 1-up if needed */ @media (max-width: 340px){ :where(.medexp-tw) .tw-metric{grid-column:span 12 / span 12;} } /* Top-right user menu */ :where(.medexp-tw) .tw-userMenu{position:relative} :where(.medexp-tw) .tw-userMenu__btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.5rem .65rem; border-radius:999px; border:1px solid rgba(226,232,240,.85); background:rgba(255,255,255,.7) !important; color:var(--tw-gray-900,#0f172a) !important; backdrop-filter:blur(10px); box-shadow:var(--tw-shadow); cursor:pointer; } :where(.medexp-tw) .tw-avatar{ display:inline-flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem; border-radius:999px; background:rgba(var(--medexp-brand-blue-rgb,26,79,156),.12); color:var(--tw-indigo-600); font-weight:800; } :where(.medexp-tw) .tw-userMenu__name{font-weight:800;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12rem} :where(.medexp-tw) .tw-userMenu__caret{opacity:.7} :where(.medexp-tw) .tw-userMenu__drop{ position:absolute; right:0; top:calc(100% + .55rem); min-width:240px; z-index:60; background:rgba(255,255,255,.88); backdrop-filter:blur(14px); border:1px solid rgba(226,232,240,.85); border-radius:16px; box-shadow:0 18px 55px rgba(2,6,23,.18); padding:.55rem; display:none; } :where(.medexp-tw) .tw-userMenu.is-open .tw-userMenu__drop{display:block} :where(.medexp-tw) .tw-userMenu__meta{font-size:.82rem;color:var(--tw-slate-600);padding:.55rem .65rem .35rem .65rem;font-weight:800} :where(.medexp-tw) .tw-userMenu__drop a{display:block;padding:.6rem .65rem;border-radius:12px;font-weight:800;color:var(--tw-slate-900);text-decoration:none} :where(.medexp-tw) .tw-userMenu__drop a:hover{background:rgba(var(--medexp-brand-blue-rgb,26,79,156),.10)} :where(.medexp-tw) .tw-userMenu__sep{height:1px;background:rgba(148,163,184,.35);margin:.35rem .35rem} /* Roadmap timeline */ :where(.medexp-tw) .tw-roadmap{display:grid;grid-template-columns:1fr;gap:1rem} :where(.medexp-tw) .tw-roadmapNext{border:1px solid rgba(226,232,240,.85);border-radius:16px;padding:1rem;background:rgba(255,255,255,.60);backdrop-filter:blur(12px)} :where(.medexp-tw) .tw-roadmapNext__kicker{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-slate-600)} :where(.medexp-tw) .tw-roadmapNext__title{font-size:1.05rem;font-weight:800;letter-spacing:-0.02em;margin-top:.25rem} :where(.medexp-tw) .tw-roadmapNext__meta{font-size:.85rem;color:var(--tw-slate-600);margin-top:.15rem} :where(.medexp-tw) .tw-roadmapNext__actions{display:flex;gap:.6rem;margin-top:.85rem;flex-wrap:wrap} :where(.medexp-tw) .tw-roadmapList{list-style:none;margin:0;padding:0;display:grid;gap:.7rem} /* Some WP themes disable grid-gap on lists via legacy resets; add a physical margin so items never "touch" */ :where(.medexp-tw) .tw-roadmapItem{display:grid;grid-template-columns:28px 1fr;gap:.8rem;align-items:flex-start;position:relative;margin-bottom:.7rem} :where(.medexp-tw) .tw-roadmapItem:last-child{margin-bottom:0} :where(.medexp-tw) .tw-roadmapDot{width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;background:rgba(var(--medexp-brand-blue-rgb,26,79,156),.12);color:var(--tw-indigo-600)} :where(.medexp-tw) .tw-roadmapItem.is-upcoming .tw-roadmapDot{background:rgba(100,116,139,.15);color:rgba(100,116,139,.8)} :where(.medexp-tw) .tw-roadmapItem.is-current .tw-roadmapDot{background:linear-gradient(135deg,var(--tw-emerald-600),var(--tw-emerald-500));color:#fff} :where(.medexp-tw) .tw-roadmapBody{padding:.85rem 1rem;border-radius:16px;border:1px solid rgba(226,232,240,.85);background:rgba(255,255,255,.55);backdrop-filter:blur(10px)} :where(.medexp-tw) .tw-roadmapLabel{font-weight:800;letter-spacing:-0.02em} :where(.medexp-tw) .tw-roadmapMeta{margin-top:.15rem;font-size:.85rem;color:var(--tw-slate-600)} /* Roadmap controls + row affordances */ :where(.medexp-tw) .tw-roadmapTools{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; } :where(.medexp-tw) .tw-roadmapTools__left{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; } :where(.medexp-tw) .tw-roadmapTools__right{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } :where(.medexp-tw) .tw-roadmapTools__chk{ display:inline-flex; align-items:center; gap:.45rem; font-weight:800; color:var(--tw-slate-600); font-size:.86rem; user-select:none; } :where(.medexp-tw) .tw-roadmapTools__chk input{ width:18px; height:18px; } :where(.medexp-tw) .tw-input.tw-input-small{ padding:.42rem .65rem; border-radius:999px; font-size:.9rem; font-weight:800; width:auto; } :where(.medexp-tw) .tw-roadmapBodyLink{ display:block; text-decoration:none; color:inherit; } :where(.medexp-tw) .tw-roadmapBodyHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:.85rem; } :where(.medexp-tw) .tw-roadmapCta{ flex:0 0 auto; padding-left:.2rem; } :where(.medexp-tw) .tw-roadmapItem.is-done{ opacity:.78; } :where(.medexp-tw) .tw-roadmapItem.is-done .tw-roadmapBody{ background:rgba(255,255,255,.40); } :where(.medexp-tw) .tw-roadmapFold{ border:1px solid rgba(226,232,240,.85); border-radius:16px; padding:.75rem .85rem; background:rgba(255,255,255,.45); backdrop-filter:blur(10px); } :where(.medexp-tw) .tw-roadmapFold summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.75rem; font-weight:900; color:var(--tw-slate-900); } :where(.medexp-tw) .tw-roadmapFold summary::-webkit-details-marker{display:none;} :where(.medexp-tw) .tw-roadmapSummary__count{ display:inline-flex; align-items:center; justify-content:center; min-width:2.05rem; height:1.65rem; padding:0 .55rem; border-radius:999px; border:1px solid rgba(148,163,184,.35); background:rgba(148,163,184,.12); color:var(--tw-slate-700); font-size:.85rem; font-weight:900; } /* Roadmap mode toggle (Roadmap / Schedule) */ :where(.medexp-tw) .tw-roadmapMode{ display:inline-flex; align-items:center; gap:.25rem; padding:.18rem; border-radius:999px; border:1px solid rgba(148,163,184,.25); background:rgba(148,163,184,.12); } :where(.medexp-tw) .tw-roadmapModeBtn{ appearance:none; border:none; background:transparent; color:var(--tw-slate-700); font:inherit; font-weight:900; font-size:.86rem; line-height:1; padding:.48rem .72rem; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; user-select:none; } :where(.medexp-tw) .tw-roadmapModeBtn:hover{ background:rgba(15,23,42,.04); } :where(.medexp-tw) .tw-roadmapModeBtn.is-active{ background:#fff; border:1px solid rgba(var(--medexp-brand-blue-rgb,26,79,156), .22); color:var(--tw-slate-900); box-shadow:0 1px 2px rgba(15,23,42,.06); } :where(.medexp-tw) .tw-roadmapTools__sep{ width:1px; height:22px; background:rgba(148,163,184,.35); margin:0 .25rem; border-radius:999px; } /* Schedule view (timeline) */ :where(.medexp-tw) .tw-scheduleHead{ max-width: 72ch; } :where(.medexp-tw) .tw-schedule{ display:grid; gap:1rem; } :where(.medexp-tw) .tw-scheduleRow{ display:grid; grid-template-columns:88px 24px 1fr; gap:1rem; align-items:flex-start; } :where(.medexp-tw) .tw-scheduleChip{ display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:.42rem .8rem; border-radius:999px; border:1px solid rgba(226,232,240,.95); background:rgba(255,255,255,.70); color:var(--tw-slate-900); font-weight:900; font-size:.88rem; } :where(.medexp-tw) .tw-scheduleRow.is-today .tw-scheduleChip{ border-color:rgba(var(--medexp-brand-blue-rgb,26,79,156), .35); background:rgba(var(--medexp-brand-blue-rgb,26,79,156), .08); } :where(.medexp-tw) .tw-scheduleTrack{ position:relative; display:flex; justify-content:center; min-height:34px; /* * Ensure the timeline connects across variable-height day cards. * We keep rows top-aligned (so chips and cards align nicely), but * the track column must stretch to the full row height so the line can * run behind the entire card and into the next row. */ align-self:stretch; } :where(.medexp-tw) .tw-scheduleLine{ position:absolute; top:0; bottom:-1rem; /* extend into next row gap */ left:50%; transform:translateX(-50%); width:2px; background:rgba(148,163,184,.35); border-radius:999px; } /* * In the last row we still need a short connector so the line reaches the final dot. * We stop the line at the dot center (margin-top + radius) rather than extending * into a non-existent next-row gap. */ :where(.medexp-tw) .tw-scheduleRow.is-last .tw-scheduleLine{ bottom: calc(100% - (0.55rem + 7px)); } :where(.medexp-tw) .tw-scheduleDot{ width:14px; height:14px; border-radius:999px; border:2px solid rgba(148,163,184,.55); background:#fff; margin-top:.55rem; position:relative; z-index:1; } :where(.medexp-tw) .tw-scheduleRow.is-done .tw-scheduleDot{ background:linear-gradient(135deg,var(--tw-emerald-600),var(--tw-emerald-500)); border-color:rgba(16,185,129,.25); } :where(.medexp-tw) .tw-scheduleRow.is-today .tw-scheduleDot{ border-color:rgba(var(--medexp-brand-blue-rgb,26,79,156), .45); box-shadow:0 0 0 4px rgba(var(--medexp-brand-blue-rgb,26,79,156), .12); } :where(.medexp-tw) .tw-scheduleCard{ border:1px solid rgba(226,232,240,.85); border-radius:16px; padding:.85rem 1rem; background:rgba(255,255,255,.55); backdrop-filter:blur(10px); } :where(.medexp-tw) .tw-scheduleTasks{ display:grid; gap:.65rem; } :where(.medexp-tw) .tw-scheduleTask{ display:flex; gap:.65rem; align-items:flex-start; } :where(.medexp-tw) .tw-scheduleTask__check{ width:20px; height:20px; flex:0 0 auto; margin-top:.2rem; color:rgba(100,116,139,.92); } :where(.medexp-tw) .tw-scheduleTask.is-done .tw-scheduleTask__check{ color:var(--tw-emerald-600); } :where(.medexp-tw) .tw-scheduleTask__main{ flex:1; min-width:0; } :where(.medexp-tw) .tw-scheduleTask__label{ font-weight:900; text-decoration:none; color:inherit; display:inline-block; } :where(.medexp-tw) .tw-scheduleTask__label:hover{ text-decoration:underline; } :where(.medexp-tw) .tw-scheduleTask__sub{ margin-top:.12rem; font-size:.86rem; color:var(--tw-slate-600); } /* Empty states */ :where(.medexp-tw) .tw-empty{display:flex;gap:1rem;align-items:center;padding:1rem;border:1px dashed rgba(148,163,184,.55);border-radius:16px;background:rgba(255,255,255,.45)} :where(.medexp-tw) .tw-empty__img{width:120px;height:96px;flex:0 0 auto;display:block} :where(.medexp-tw) .tw-empty__img svg{width:100%;height:100%;display:block} :where(.medexp-tw) .tw-empty__title{font-weight:800;letter-spacing:-0.02em} :where(.medexp-tw) .tw-empty__body{margin-top:.15rem;color:var(--tw-slate-600)} :where(.medexp-tw) .tw-empty__cta{margin-top:.8rem} /* ── Centered empty state (analytics variants: performance, weak, heatmap) ── */ :where(.medexp-tw) .tw-empty.tw-empty--centered{ flex-direction:column; text-align:center; align-items:center; padding:2.25rem 1.75rem 1.75rem; gap:.6rem; border-style:solid; border-color:rgba(var(--medexp-brand-blue-rgb,26,79,156),.08); border-radius:20px; background: radial-gradient(ellipse 60% 50% at 12% 18%, rgba(var(--medexp-brand-blue-rgb,26,79,156),.07) 0%, transparent 70%), radial-gradient(ellipse 50% 45% at 88% 78%, rgba(var(--medexp-brand-teal-rgb,0,166,118),.06) 0%, transparent 70%), linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(248,250,252,.97) 100%); box-shadow:0 1px 0 rgba(17,24,39,.02), 0 8px 28px rgba(2,6,23,.06); animation:chartCardEntrance .55s cubic-bezier(.34,1.56,.64,1) both; } :where(.medexp-tw) .tw-empty--centered .tw-empty__img{ width:180px; height:140px; animation:twFloat 5s ease-in-out infinite; filter:drop-shadow(0 6px 16px rgba(2,6,23,.06)); } :where(.medexp-tw) .tw-empty__accent{ width:40px; height:3px; border-radius:999px; background:linear-gradient(90deg, rgba(var(--medexp-brand-teal-rgb,0,166,118),.45), rgba(var(--medexp-brand-blue-rgb,26,79,156),.25)); } :where(.medexp-tw) .tw-empty--centered .tw-empty__title{ font-size:1.15rem; font-weight:900; color:rgba(15,23,42,.88); } :where(.medexp-tw) .tw-empty--centered .tw-empty__body{ font-size:.9rem; line-height:1.55; color:rgba(15,23,42,.50); max-width:280px; margin-left:auto; margin-right:auto; margin-top:.2rem; } :where(.medexp-tw) .tw-empty--centered .tw-empty__cta{margin-top:.85rem;} :where(.medexp-tw) .tw-empty--centered .tw-empty__cta .tw-btn-primary{ box-shadow:0 2px 8px rgba(var(--medexp-brand-teal-rgb,0,166,118),.18), 0 8px 20px rgba(var(--medexp-brand-teal-rgb,0,166,118),.12); } /* Hero empty state: Flashcards — premium look */ :where(.medexp-tw) .tw-empty.tw-empty--hero{ padding:1.65rem 1.75rem; border-style:solid; border-color:rgba(var(--medexp-brand-blue-rgb,26,79,156),.10); border-radius:20px; background: radial-gradient(ellipse 65% 55% at 8% 15%, rgba(var(--medexp-brand-blue-rgb,26,79,156),.08) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 90% 75%, rgba(var(--medexp-brand-teal-rgb,0,166,118),.06) 0%, transparent 70%), linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(248,250,252,.96) 100%); box-shadow:0 1px 0 rgba(17,24,39,.02), 0 12px 36px rgba(17,24,39,.07); } :where(.medexp-tw) .tw-empty.tw-empty--hero .tw-empty__content{min-width:0;flex:1 1 auto;} :where(.medexp-tw) .tw-empty.tw-empty--hero .tw-empty__title{font-size:1.35rem;font-weight:950;color:rgba(15,23,42,.90);} :where(.medexp-tw) .tw-empty.tw-empty--hero .tw-empty__body{font-size:.95rem;line-height:1.5;color:rgba(15,23,42,.60);} :where(.medexp-tw) .tw-empty.tw-empty--flashcards .tw-empty__img{ width:200px;height:150px;animation:twFloat 5s ease-in-out infinite; filter:drop-shadow(0 8px 20px rgba(2,6,23,.08)); } :where(.medexp-tw) .tw-empty.tw-empty--flashcards .tw-empty__img svg{width:100%;height:100%;display:block;} @keyframes twFloat{ 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-10px) scale(1.02);} } :where(.medexp-tw) .tw-empty__badges{margin-top:.75rem;display:flex;gap:.5rem;flex-wrap:wrap;} :where(.medexp-tw) .tw-empty__badge{ display:inline-flex;align-items:center;gap:.35rem; padding:.3rem .65rem;border-radius:999px; border:1px solid rgba(var(--medexp-brand-blue-rgb,26,79,156),.12); background:rgba(var(--medexp-brand-blue-rgb,26,79,156),.05); color:rgba(15,23,42,.72); font-size:.78rem;font-weight:800; transition:background .15s ease, border-color .15s ease; } :where(.medexp-tw) .tw-empty__badge:hover{ background:rgba(var(--medexp-brand-blue-rgb,26,79,156),.08); border-color:rgba(var(--medexp-brand-blue-rgb,26,79,156),.20); } :where(.medexp-tw) .tw-empty__actions{margin-top:1rem;display:flex;gap:.65rem;flex-wrap:wrap;align-items:center;} :where(.medexp-tw) .tw-empty__actions .tw-btn-primary{ box-shadow:0 2px 8px rgba(var(--medexp-brand-teal-rgb,0,166,118),.18), 0 8px 20px rgba(var(--medexp-brand-teal-rgb,0,166,118),.12); } :where(.medexp-tw) .tw-empty__meta{margin-top:.75rem;font-size:.86rem;color:rgba(15,23,42,.50);font-weight:700;} :where(.medexp-tw) .tw-empty__limits{margin-top:.9rem;display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end;} :where(.medexp-tw) .tw-empty__limits label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;color:var(--tw-slate-600);font-weight:800;} :where(.medexp-tw) .tw-empty__limits input{ width:118px;padding:.55rem .6rem;border-radius:12px; border:1px solid rgba(148,163,184,.55); background:rgba(255,255,255,.75); } :where(.medexp-tw) .tw-empty__reset{ font-size:.85rem;color:rgba(15,23,42,.72); text-decoration:underline;background:none;border:none;padding:0;cursor:pointer; } /* ── Skeleton loaders (premium shimmer) ── */ @keyframes twShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} :where(.medexp-tw) .tw-skelList{display:grid;gap:.7rem} :where(.medexp-tw) .tw-skelRow{display:flex;gap:.8rem;align-items:center;padding:.65rem .4rem} :where(.medexp-tw) .tw-skelAvatar{ width:38px;height:38px;border-radius:14px; background:linear-gradient(90deg, rgba(148,163,184,.12) 25%, rgba(148,163,184,.24) 37%, rgba(148,163,184,.12) 63%); background-size:400% 100%; animation:twShimmer 1.4s ease-in-out infinite; } :where(.medexp-tw) .tw-skelLines{flex:1;display:grid;gap:.5rem} :where(.medexp-tw) .tw-skelLine{ height:13px;border-radius:8px; background:linear-gradient(90deg, rgba(148,163,184,.12) 25%, rgba(148,163,184,.24) 37%, rgba(148,163,184,.12) 63%); background-size:400% 100%; animation:twShimmer 1.4s ease-in-out infinite; } :where(.medexp-tw) .tw-skelLine--sub{height:10px;opacity:.85} :where(.medexp-tw) .tw-skelPill{ width:72px;height:24px;border-radius:999px; background:linear-gradient(90deg, rgba(148,163,184,.12) 25%, rgba(148,163,184,.24) 37%, rgba(148,163,184,.12) 63%); background-size:400% 100%; animation:twShimmer 1.4s ease-in-out infinite; } /* Generic dashboard skeleton blocks (used for course switching + async loads) */ :where(.medexp-tw) .tw-skelChart{ height:48px;border-radius:12px; background:linear-gradient(90deg, rgba(148,163,184,.12) 25%, rgba(148,163,184,.24) 37%, rgba(148,163,184,.12) 63%); background-size:400% 100%; animation:twShimmer 1.4s ease-in-out infinite; } :where(.medexp-tw) .tw-skelCard .tw-skelBlock{ margin-top:.8rem; border-radius:14px; background:rgba(148,163,184,.04); padding:.35rem .25rem; } :where(.medexp-tw) .tw-skelHead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem} :where(.medexp-tw) .tw-metricStrip.tw-skelStrip .tw-metric{min-height:132px} :where(.medexp-tw) .tw-metricStrip.tw-skelStrip .tw-metric .tw-skelLines{margin-top:.65rem} /* Skeleton metric cards — subtle shimmer overlay */ :where(.medexp-tw) .tw-skelMetric{ position:relative;overflow:hidden; } :where(.medexp-tw) .tw-skelMetric::after{ content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(90deg, transparent 25%, rgba(148,163,184,.06) 37%, transparent 63%); background-size:400% 100%; animation:twShimmer 1.8s ease-in-out infinite; pointer-events:none; } /* Skeleton card should look clean — no heavy border/shadow while loading */ :where(.medexp-tw) .tw-skelCard{ border-color:rgba(148,163,184,.10) !important; box-shadow:0 1px 4px rgba(2,6,23,.03) !important; overflow:hidden; position:relative; } /* Full-card shimmer sweep */ :where(.medexp-tw) .tw-skelCard::after{ content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(90deg, transparent 25%, rgba(148,163,184,.05) 37%, transparent 63%); background-size:400% 100%; animation:twShimmer 2s ease-in-out infinite; pointer-events:none; } /* Shimmer overlays for async charts */ :where(.medexp-tw) .tw-chartCard.is-loading .tw-chartWrap::after{ content:""; position:absolute; inset:0; border-radius:14px; background:linear-gradient(90deg, rgba(148,163,184,.18) 25%, rgba(148,163,184,.35) 37%, rgba(148,163,184,.18) 63%); background-size:400% 100%; animation:twShimmer 1.2s ease-in-out infinite; pointer-events:none; } :where(.medexp-tw) .tw-chartCard.is-loading .tw-chartWrap canvas{opacity:0.18} :where(.medexp-tw) .tw-chartCard.is-loading .tw-chartTip{opacity:0.5} :where(.medexp-tw) .tw-chartCard.is-loading{ animation:twSkeletonPulse 1.6s ease-in-out infinite; } @keyframes twSkeletonPulse{0%,100%{opacity:1}50%{opacity:.85}} /* XL layout: widen left column (roadmap + heatmap) */ @media (min-width: 1280px){ :where(.medexp-tw) .tw-col-8{grid-column:span 9 / span 9;} :where(.medexp-tw) .tw-col-4{grid-column:span 3 / span 3;} } /* === Iconography + final dashboard polish (0.4.32) === */ /* Inline SVG icon — base styling */ :where(.medexp-tw) svg.tw-ico{ width:1.15rem; height:1.15rem; display:block; flex-shrink:0; fill:none; stroke:currentColor; } :where(.medexp-tw) .tw-navicon svg.tw-ico{width:1.15rem;height:1.15rem;} :where(.medexp-tw) .tw-btn svg.tw-ico{width:1.1rem;height:1.1rem;} :where(.medexp-tw) .tw-inlineIco{ font-size:1rem; display:inline-block; vertical-align:-0.18em; line-height:1; } /* Brand mark (sidebar) */ :where(.medexp-tw) .tw-brandMark{ width:2.15rem; height:2.15rem; border-radius:0.9rem; background:linear-gradient(135deg,var(--tw-indigo-600),var(--tw-sky-500)); color:#fff; box-shadow:0 12px 26px rgba(79,70,229,.20); } :where(.medexp-tw) .tw-brandIco{width:1.25rem;height:1.25rem;} .tw-brandLink{display:flex;align-items:center;justify-content:flex-start;text-decoration:none;/* Align logo mark with sidebar icon column */padding-left:0.75rem;} .tw-brandLogo{display:block;height:auto;width:auto;max-height:48px;max-width:140px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(15,23,42,0.10));} .tw-topbarLogo{display:none;align-items:center;justify-content:center;text-decoration:none;} .tw-topbarLogoImg{display:block;height:auto;width:auto;max-height:32px;max-width:120px;object-fit:contain;} @media (max-width:960px){.tw-topbarLogo{display:flex;}} /* Metric icon badge — iOS GameIconBadge style (gradient circle, white icon) */ :where(.medexp-tw) .tw-metric__icon{ position:absolute; top:.75rem; right:.75rem; width:2.2rem; height:2.2rem; border-radius:999px; display:flex; align-items:center; justify-content:center; z-index:2; /* Gradient fill using per-card accent vars */ background:linear-gradient(135deg, var(--_a, #38BDF8), var(--_b, #8B5CF6)); box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 8px 18px rgba(0,0,0,.08); overflow:hidden; } /* Screen-blend radial shine on badge (iOS) */ :where(.medexp-tw) .tw-metric__icon::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient( circle at 30% 25%, rgba(255,255,255,.40) 0%, transparent 65% ); mix-blend-mode:screen; pointer-events:none; } :where(.medexp-tw) .tw-metricIco{ width:1.15rem; height:1.15rem; color:#fff !important; filter:drop-shadow(0 1px 2px rgba(0,0,0,.2)); position:relative; z-index:1; } /* Make roadmap/current marker clearer than a mysterious green dot */ :where(.medexp-tw) .tw-roadmapItem.is-current .tw-roadmapDot{ box-shadow:0 10px 22px rgba(var(--medexp-brand-teal-rgb,0,166,118),.22); } /* Dashboard should feel like an "app"—hide theme chrome only on the dashboard */ body.medexp-dashboard header.site-header, body.medexp-dashboard .site-header, body.medexp-dashboard #masthead, body.medexp-dashboard footer, body.medexp-dashboard .site-footer, body.medexp-dashboard #colophon{ display:none !important; } body.medexp-dashboard .site-content, body.medexp-dashboard .content-area, body.medexp-dashboard #primary{ padding:0 !important; margin:0 !important; max-width:none !important; } /* Roadmap legend (clarifies current vs upcoming vs done) */ :where(.medexp-tw) .tw-roadmapLegend{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin:.35rem 0 .75rem; color:var(--tw-slate-600); font-size:.82rem; } :where(.medexp-tw) .tw-legendItem{display:inline-flex;gap:.45rem;align-items:center;} :where(.medexp-tw) .tw-legendDot{ width:1.35rem; height:1.35rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; background:rgba(100,116,139,.10); color:var(--tw-slate-700); } :where(.medexp-tw) .tw-legendDot.is-current{background:rgba(var(--medexp-brand-teal-rgb,0,166,118),.14);color:var(--tw-emerald-700);} :where(.medexp-tw) .tw-legendDot.is-done{background:rgba(var(--medexp-brand-blue-rgb,26,79,156),.12);color:var(--tw-indigo-700);} /* === Study Plan / Roadmap visual polish ===================================== */ /* "Next up" card: richer background, more prominent */ :where(.medexp-tw) .tw-roadmapNext{ border:1px solid rgba(var(--medexp-brand-blue-rgb,26,79,156),.12); background: radial-gradient(700px 220px at 5% 0%, rgba(var(--medexp-brand-blue-rgb,26,79,156),.06), transparent 55%), radial-gradient(500px 200px at 90% 100%, rgba(var(--medexp-brand-teal-rgb,0,166,118),.05), transparent 50%), rgba(255,255,255,.75); box-shadow:0 1px 0 rgba(17,24,39,.02), 0 10px 28px rgba(17,24,39,.06); padding:1.2rem 1.3rem; } :where(.medexp-tw) .tw-roadmapNext__kicker{ font-size:.72rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:rgba(var(--medexp-brand-blue-rgb,26,79,156),.7); } :where(.medexp-tw) .tw-roadmapNext__title{ font-size:1.08rem; font-weight:900; letter-spacing:-0.02em; color:var(--tw-slate-900); } /* Roadmap item cards: subtle hover lift */ :where(.medexp-tw) .tw-roadmapBody{ transition:box-shadow .15s ease, border-color .15s ease; } :where(.medexp-tw) .tw-roadmapBodyLink:hover .tw-roadmapBody{ border-color:rgba(var(--medexp-brand-blue-rgb,26,79,156),.18); box-shadow:0 1px 0 rgba(17,24,39,.02), 0 8px 22px rgba(17,24,39,.07); } /* Current item: stronger visual emphasis */ :where(.medexp-tw) .tw-roadmapItem.is-current .tw-roadmapBody{ border-color:rgba(var(--medexp-brand-teal-rgb,0,166,118),.25); background:rgba(var(--medexp-brand-teal-rgb,0,166,118),.04); } /* Roadmap tools bar: slightly more separation */ :where(.medexp-tw) .tw-roadmapTools{ padding-bottom:.85rem; border-bottom:1px solid rgba(15,23,42,.05); margin-bottom:.25rem; } /* Week/Later kicker headings */ :where(.medexp-tw) .tw-kicker{ font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--tw-slate-500); } /* Goals sidebar card polish */ :where(.medexp-tw) .tw-goalStat{ background:linear-gradient(135deg, rgba(255,255,255,.70) 0%, rgba(248,250,252,.60) 100%); border:1.5px solid rgba(148,163,184,.18); border-radius:14px; backdrop-filter:blur(6px); } :where(.medexp-tw) .tw-goalStat .tw-kicker{font-size:.68rem;color:var(--tw-gray-500);} :where(.medexp-tw) .tw-goalStat .tw-statNum{ font-size:1.55rem; font-weight:950; letter-spacing:-0.03em; color:var(--tw-gray-900); margin-top:.15rem; } /* Tables (sortable/filterable) */ :where(.medexp-tw) .tw-tableTools{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem;} :where(.medexp-tw) .tw-tableWrap{overflow:auto;border:1px solid var(--tw-gray-200);border-radius:1rem;background:var(--tw-white);} :where(.medexp-tw) .tw-table{width:100%;border-collapse:separate;border-spacing:0;min-width:640px;} :where(.medexp-tw) .tw-table thead th{position:sticky;top:0;background:rgba(249,250,251,.92);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--tw-gray-200);text-align:left;padding:.7rem .85rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-gray-500);} :where(.medexp-tw) .tw-table .tw-thNum{text-align:right;} :where(.medexp-tw) .tw-table tbody td{border-bottom:1px solid var(--tw-gray-100);padding:.8rem .85rem;vertical-align:top;font-size:.9rem;color:var(--tw-gray-800);} :where(.medexp-tw) .tw-table tbody tr:hover td{background:rgba(var(--medexp-brand-blue-rgb,26,79,156),.04);} :where(.medexp-tw) .tw-table tbody tr:last-child td{border-bottom:none;} :where(.medexp-tw) .tw-tdNum{text-align:right;font-variant-numeric:tabular-nums;} :where(.medexp-tw) .tw-tdTitle{font-weight:800;letter-spacing:-0.01em;} :where(.medexp-tw) .tw-tdSub{margin-top:.2rem;color:var(--tw-gray-500);font-size:.8rem;font-weight:700;} :where(.medexp-tw) .tw-tdEmpty{padding:1rem;color:var(--tw-gray-500);font-weight:700;} :where(.medexp-tw) .tw-thBtn{display:inline-flex;align-items:center;gap:.45rem;background:transparent;border:none;padding:0;color:inherit;font:inherit;cursor:pointer;} :where(.medexp-tw) .tw-thBtn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(var(--medexp-brand-blue-rgb,26,79,156),.16);border-radius:.4rem;} :where(.medexp-tw) .tw-thBtn.is-sort-asc::after{content:'▲';font-size:.65rem;opacity:.75;} :where(.medexp-tw) .tw-thBtn.is-sort-desc::after{content:'▼';font-size:.65rem;opacity:.75;} /* Sidebar course switcher */ :where(.medexp-tw) .tw-courseSwitch .tw-input{padding-top:.6rem;padding-bottom:.6rem;} /* Topbar course switcher */ :where(.medexp-tw) .tw-courseTopSwitch{display:flex;align-items:center;gap:.55rem;min-width:0;} :where(.medexp-tw) .tw-courseTopSwitch__label{font-size:.85rem;font-weight:800;color:var(--tw-gray-600);white-space:nowrap;} :where(.medexp-tw) .tw-courseTopSwitch__select{min-width:15rem;max-width:22rem;padding:.5rem .75rem;font-size:.92rem;} :where(.medexp-tw) .tw-courseTopSwitch__pill{display:inline-flex;align-items:center;max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.48rem .75rem;border-radius:.85rem;border:1px solid var(--tw-gray-200);background:#fff !important;font-weight:800;color:var(--tw-gray-900) !important;} @media (max-width: 640px){ :where(.medexp-tw) .tw-courseTopSwitch__label{display:none;} :where(.medexp-tw) .tw-courseTopSwitch__select{min-width:10rem;max-width:14rem;} :where(.medexp-tw) .tw-courseTopSwitch__pill{max-width:14rem;} } :where(.medexp-tw) .tw-courseDropdown{position:relative;min-width:0;display:inline-flex;} :where(.medexp-tw) .tw-courseDropdown__btn{display:flex;align-items:center;justify-content:space-between;gap:.65rem;min-width:15rem;max-width:22rem;width:100%;padding:.56rem .9rem;border:1px solid var(--tw-gray-200);border-radius:9999px;background:#fff;color:var(--tw-gray-900);font-weight:800;box-shadow:0 1px 0 rgba(17,24,39,.03);cursor:pointer;} :where(.medexp-tw) .tw-courseDropdown__btn:hover{border-color:var(--tw-gray-300);box-shadow:0 1px 0 rgba(17,24,39,.04),0 12px 28px rgba(15,23,42,.10);} :where(.medexp-tw) .tw-courseDropdown__btn:focus{outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.22),0 12px 28px rgba(15,23,42,.10);} :where(.medexp-tw) .tw-courseDropdown__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} :where(.medexp-tw) .tw-courseDropdown__chev{flex:0 0 auto;font-size:.9rem;opacity:.65;transform:translateY(-1px);} .tw-courseDropdown__chevIco{width:18px;height:18px;display:block;} :where(.medexp-tw) .tw-courseDropdown.is-open .tw-courseDropdown__chev{transform:translateY(-1px) rotate(180deg);opacity:.8;} :where(.medexp-tw) .tw-courseDropdown__menu{position:absolute;top:calc(100% + .55rem);left:0;right:0;z-index:60;background:#fff;border:1px solid var(--tw-gray-200);border-radius:18px;box-shadow:0 18px 44px rgba(15,23,42,.14);padding:.55rem;} :where(.medexp-tw) .tw-courseDropdown__searchWrap{padding:.25rem .25rem .45rem;} :where(.medexp-tw) .tw-courseDropdown__search{width:100%;padding:.55rem .75rem;border:1px solid var(--tw-gray-200);border-radius:14px;background:var(--tw-gray-50);font-weight:700;} :where(.medexp-tw) .tw-courseDropdown__search:focus{outline:none;background:#fff;border-color:var(--tw-gray-300);box-shadow:0 0 0 3px rgba(59,130,246,.18);} :where(.medexp-tw) .tw-courseDropdown__list{max-height:340px;overflow:auto;padding:.15rem;} :where(.medexp-tw) .tw-courseDropdown__opt{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:.62rem .75rem;border-radius:14px;background:transparent;border:0;cursor:pointer;font-weight:800;color:var(--tw-gray-900);} :where(.medexp-tw) .tw-courseDropdown__opt:hover{background:var(--tw-gray-50);} :where(.medexp-tw) .tw-courseDropdown__opt[aria-selected="true"]{background:rgba(59,130,246,.10);} :where(.medexp-tw) .tw-courseDropdown__opt:focus{outline:none;background:var(--tw-gray-50);box-shadow:inset 0 0 0 2px rgba(59,130,246,.25);} /* ------------------------------------------------------------------------- Unified dashboard dropdowns (all into SelectWoo/Select2. Our general