/* @version APP_VERSION */ /* ── Desktop View (proof of concept) ─────────────────────────────────────── */ /* Every rule here is scoped under [data-view="desktop"], set once by js/device.js on . Mobile's existing CSS has no such scoping and is untouched — the two stylesheets can never collide. */ [data-view="desktop"] .dsk-shell{ display:flex; height:100vh; font-family:'Plus Jakarta Sans',sans-serif; background:var(--bg); } /* Sidebar — desktop's equivalent of mobile's bottom nav bar */ [data-view="desktop"] .dsk-sidebar{ width:220px; flex-shrink:0; background:var(--card); border-right:1px solid var(--bdr); display:flex; flex-direction:column; padding:24px 12px; } [data-view="desktop"] .dsk-logo{ font-size:20px; font-weight:800; color:var(--sf); padding:0 12px 28px; } [data-view="desktop"] .dsk-nav-btn{ display:flex; align-items:center; gap:10px; width:100%; padding:12px; border:none; background:none; border-radius:10px; font-size:14px; font-weight:600; color:var(--tx2); cursor:pointer; text-align:left; margin-bottom:4px; transition:background 0.15s; } [data-view="desktop"] .dsk-nav-btn:hover{ background:var(--sfl); } [data-view="desktop"] .dsk-nav-btn.on{ background:var(--sfl); color:var(--sft); } /* Main content area */ [data-view="desktop"] .dsk-main{ flex:1; overflow-y:auto; padding:32px 40px; } [data-view="desktop"] .dsk-topbar{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:32px; } /* .btn's base style (shared stylesheet) sets width:100% for mobile's full-width buttons — inside a flex topbar that stretched it to fill all remaining space, which is also what squeezed titles onto two lines. Any button placed in a topbar should auto-size instead. */ [data-view="desktop"] .dsk-topbar .btn{ width:auto; } [data-view="desktop"] .dsk-title{ font-size:26px; font-weight:800; color:var(--tx); } [data-view="desktop"] .dsk-sub{ font-size:14px; color:var(--tx3); margin-top:4px; } [data-view="desktop"] .dsk-progress-ring-wrap{ text-align:center; } [data-view="desktop"] .dsk-progress-pct{ font-size:28px; font-weight:800; color:var(--sf); } [data-view="desktop"] .dsk-progress-lbl{ font-size:12px; color:var(--tx3); } [data-view="desktop"] .dsk-sec-lbl{ font-size:13px; font-weight:700; color:var(--tx3); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:14px; } /* "No schedule set" shouldn't compete visually with the main "Today's practices" heading above it — smaller, lighter weight, no uppercase shouting, small icon — same discreet treatment mobile gives it. */ [data-view="desktop"] .dsk-sec-lbl-muted{ font-size:12px; font-weight:500; text-transform:none; letter-spacing:normal; margin-top:24px; display:flex; align-items:center; gap:6px; } [data-view="desktop"] .dsk-sec-lbl-muted i{ font-size:13px; } /* Card grid — desktop's equivalent of mobile's stacked single-column list */ [data-view="desktop"] .dsk-card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; } [data-view="desktop"] .dsk-card{ background:var(--card); border:1px solid var(--bdr); border-radius:14px; padding:18px; cursor:pointer; position:relative; transition:border-color 0.15s, transform 0.1s; } [data-view="desktop"] .dsk-card:hover{ border-color:var(--sf); transform:translateY(-2px); } [data-view="desktop"] .dsk-card.done{ background:var(--sfl); } /* Cross-off — sits quietly in the corner, only visible on card hover, so it never competes with the everyday click-to-complete interaction. */ [data-view="desktop"] .dsk-card-cross{ position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%; border:none; background:none; color:var(--tx3); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.15s; } [data-view="desktop"] .dsk-card:hover .dsk-card-cross{ opacity:0.6; } [data-view="desktop"] .dsk-card-cross:hover{ opacity:1 !important; background:var(--sfl); color:var(--sf); } [data-view="desktop"] .dsk-card-chk{ width:26px; height:26px; border-radius:50%; border:2px solid var(--bdr); display:flex; align-items:center; justify-content:center; margin-bottom:12px; color:transparent; } [data-view="desktop"] .dsk-card-chk.done{ background:var(--sf); border-color:var(--sf); color:#fff; } [data-view="desktop"] .dsk-card-name{ font-size:15px; font-weight:700; color:var(--tx); margin-bottom:4px; } [data-view="desktop"] .dsk-card-name.dt{ color:var(--tx3); } [data-view="desktop"] .dsk-card-meta{ font-size:12px; color:var(--tx3); } [data-view="desktop"] .dsk-empty{ text-align:center; padding:60px 0; color:var(--tx3); } [data-view="desktop"] .dsk-empty i{ font-size:36px; margin-bottom:12px; display:block; } [data-view="desktop"] .dsk-btn-link{ margin-top:18px; background:none; border:none; color:var(--sf); font-weight:600; font-size:13px; cursor:pointer; } /* ── Calendar ─────────────────────────────────────────────────────────────── */ /* Reuses mobile's .cal-hdr/.cal-nav/.cal-month/.cal-grid/.cal-cell/.cal-item classes from the main stylesheet as-is (colors, states, hover) — only the surrounding layout (side-by-side columns instead of stacked) is new here. */ [data-view="desktop"] .dsk-cal-layout{ display:flex; gap:44px; align-items:flex-start; /* Every child below has a max-width, so left-aligning this row (the flex default) just dumps all the leftover space on the right on a wide screen — which is exactly what looked unbalanced. Centering the row distributes that space evenly on both sides instead. */ justify-content:center; } /* Mobile styles .cal-nav as a round touch-target button (border, circular background) — makes sense for a thumb to tap, but reads as an odd floating circle next to a mouse-driven month label. Desktop strips that down to a bare icon click target instead. */ [data-view="desktop"] .cal-hdr .cal-nav{ background:none; border:none; border-radius:0; box-shadow:none; width:auto; height:auto; padding:4px; color:var(--tx2); } [data-view="desktop"] .cal-hdr .cal-nav:hover{ color:var(--sf); } [data-view="desktop"] .dsk-cal-col{ flex:1.3; min-width:340px; max-width:480px; } [data-view="desktop"] .dsk-cal-detail-col{ flex:1; min-width:0; max-width:340px; background:var(--card); border:1px solid var(--bdr); border-radius:14px; padding:16px; /* Fills remaining viewport height below the topbar instead of a fixed 520px, so the list scrolls within itself no matter how many practices a day has, rather than getting cut off by the page edge. */ max-height:calc(100vh - 200px); overflow-y:auto; } /* Fills the space that used to sit empty next to the practice list on wide screens. Purely decorative — no data, no interaction — so it's fine for it to just sit at a fixed width rather than stretching. Extra left margin (on top of the layout's own gap) gives the practice list room to breathe instead of the two cards feeling stacked together. */ [data-view="desktop"] .dsk-quote-banner{ flex:0 0 260px; margin-left:36px; background:linear-gradient(160deg, var(--sfl), var(--card)); border:1px solid var(--bdr); border-radius:14px; padding:22px 18px; align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; } /* This column is purely decorative — no data, nothing to interact with — so it should be the FIRST thing to give up space, not something that forces the calendar and day-detail columns (which have actual information in them) to shrink past a comfortable size on a narrower window. Without this, a fixed flex-shrink:0 here meant the two functional columns absorbed the entire window-narrowing squeeze by themselves, crushing the calendar grid down to illegibility long before this banner gave up even a pixel. */ @media (max-width: 1300px){ [data-view="desktop"] .dsk-quote-banner{ display:none; } } /* Themed icon standing in for a photo — changes together with the quote below it (see _dskRandomQuote()), styled as a soft circular badge in the app's own theme rather than a literal likeness. */ [data-view="desktop"] .dsk-quote-icon{ width:56px; height:56px; border-radius:50%; background:var(--card); border:1px solid var(--bdr); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.04); } [data-view="desktop"] .dsk-quote-icon i{ font-size:24px; color:var(--sf); } [data-view="desktop"] .dsk-quote-text{ font-size:14px; line-height:1.55; color:var(--tx); font-weight:500; } [data-view="desktop"] .dsk-quote-attr{ font-size:12px; color:var(--sft); font-weight:600; } [data-view="desktop"] .dsk-cal-grid .cal-cell{ cursor:pointer; aspect-ratio:1; } /* Only real, clickable days get hover + the stacked day/percentage layout — other-month padding cells stay plain and non-interactive, same as mobile. */ [data-view="desktop"] .dsk-cal-grid .cal-cell:not(.other-month){ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:10px; transition:background 0.12s; } [data-view="desktop"] .dsk-cal-grid .cal-cell:not(.other-month):hover{ background:var(--sfl); } /* Any day with at least one completed practice gets a theme-colored fill — this is the "I practiced that day" signal at a glance, separate from .selected (the day currently shown in the detail panel) and .today (a ring, not a fill) so all three states stay visually distinct even when a cell is more than one of them at once. */ [data-view="desktop"] .dsk-cal-grid .cal-cell.has-data:not(.selected){ background:var(--sfl); color:var(--sft); } [data-view="desktop"] .dsk-cal-grid .cal-cell.has-data:not(.selected):hover{ background:var(--sf); color:#fff; } [data-view="desktop"] .dsk-cal-pct{ font-size:9px; font-weight:700; color:var(--tx3); letter-spacing:0.01em; } [data-view="desktop"] .cal-cell.has-data:not(.selected) .dsk-cal-pct{ color:var(--sft); opacity:0.85; } [data-view="desktop"] .cal-cell.selected .dsk-cal-pct{ color:rgba(255,255,255,0.85); } [data-view="desktop"] .dsk-cal-today-btn{ margin-left:auto; background:none; border:1px solid var(--bdr); border-radius:8px; padding:5px 12px; font-size:12px; font-weight:600; color:var(--tx2); cursor:pointer; } [data-view="desktop"] .dsk-cal-today-btn:hover{ border-color:var(--sf); color:var(--sf); } /* Mobile's .cal-item/.cal-detail-date sizing is tuned for touch targets — generous padding and larger type. Desktop has a mouse and less vertical room per item needed, so this tightens the same shared markup down without touching calendar.js's actual HTML or logic. */ [data-view="desktop"] .dsk-cal-detail-col .cal-detail-date{ font-size:16px; margin-bottom:2px; } [data-view="desktop"] .dsk-cal-detail-col .cal-detail-sub{ font-size:12px; margin-bottom:12px; } [data-view="desktop"] .dsk-cal-detail-col .cal-item{ padding:10px 12px; margin-bottom:6px; border-radius:10px; } [data-view="desktop"] .dsk-cal-detail-col .cal-item-name{ font-size:13px; line-height:1.3; } [data-view="desktop"] .dsk-cal-detail-col .cal-item-meta{ font-size:11px; } /* ── Settings ─────────────────────────────────────────────────────────────── */ /* Structure now comes from _reflowDesktopSettings() (desktop-settings.js), which groups mobile's flat markup into real sections by heading before this layout ever sees it — so what follows is just styling known, deliberate containers, not guessing at where a flat list should split. */ [data-view="desktop"] .dsk-settings-grid{ display:flex; flex-direction:column; gap:24px; /* No hard cap — fills whatever width .dsk-main actually has, instead of leaving a dead strip on the right on wide screens. */ width:100%; } [data-view="desktop"] .dsk-settings-top-row .dsk-settings-section{ display:flex; gap:16px; } [data-view="desktop"] .dsk-settings-top-row .dsk-settings-section > *{ flex:1; margin-bottom:0 !important; } [data-view="desktop"] .dsk-settings-cols-3{ display:grid; /* Manage Practices carries far more content than the other two columns (a growing list vs a handful of static rows), so it gets a slightly larger share of the width rather than an equal three-way split. */ grid-template-columns:1fr 1fr 1.2fr; gap:24px; align-items:start; } [data-view="desktop"] .dsk-settings-col{ display:flex; flex-direction:column; gap:24px; min-width:0; } /* Manage Practices' list length is unbounded (grows as practices are added) while Profile/About are naturally short and fixed — left unconstrained, that height difference is exactly what left big empty gaps under the shorter columns. Capping this one to the viewport and letting it scroll internally keeps the whole row's height close to what the shorter columns actually need. */ [data-view="desktop"] .dsk-settings-col-manage .dsk-settings-section{ max-height:calc(100vh - 260px); overflow-y:auto; } [data-view="desktop"] .dsk-settings-full{ width:100%; } [data-view="desktop"] .dsk-settings-section .sec-lbl{ margin-top:0; margin-bottom:16px; font-size:12px; font-weight:700; letter-spacing:0.04em; color:var(--tx3); } /* Real card boundaries for every section except the top row — the plan card and account bar there are already individually styled, so wrapping them again would just be a card inside a card. Everything else was floating with only hairline dividers before, which is what made the page read as unfinished rather than like a real settings screen. */ [data-view="desktop"] .dsk-settings-cols-3 .dsk-settings-section{ background:var(--card); border:1px solid var(--bdr); border-radius:16px; padding:22px 24px; } /* Rows inside Profile (Nickname, Password) get breathing room and a subtle hover so they read as interactive rows, not just static text. */ [data-view="desktop"] .dsk-settings-section .sr{ padding:12px 0; } [data-view="desktop"] .dsk-settings-section .sr:hover{ background:var(--sfl); margin:0 -12px; padding:12px 12px; border-radius:8px; } /* Export/Reset sat as two disconnected floating buttons below the About card before — grouping them with a divider and their own label reads as a deliberate "data controls" block instead of stray leftover buttons. */ [data-view="desktop"] .dsk-settings-section .btn-outline, [data-view="desktop"] .dsk-settings-section .btn-danger{ margin-top:12px; } [data-view="desktop"] .dsk-settings-section .btn-outline:first-of-type{ margin-top:20px; padding-top:20px; border-top:1px solid var(--bdr); } /* Catch-up page — reuses mobile's .catchup-row as-is, just widens to a comfortable reading column and gives it the same card treatment as every other desktop screen. */ [data-view="desktop"] .dsk-catchup-body{ max-width:640px; } /* Add/Edit Practice modal — mobile shows this as a bottom sheet (align-items:flex-end, set inline via JS), which reads fine on a phone but looks out of place floating at the bottom of a large desktop screen. This overrides it to a properly centered dialog on desktop. !important is needed since the mobile styling is set inline, which normally beats any external stylesheet rule. */ [data-view="desktop"] #practice-modal-bg{ align-items:center !important; } [data-view="desktop"] #practice-modal-bg .modal{ border-radius:20px !important; max-width:480px; width:90%; } /* ── Profile menu (replaces the old Settings page) ───────────────────────── */ [data-view="desktop"] .dsk-profile-wrap{ position:relative; } [data-view="desktop"] .dsk-profile-avatar{ width:38px; height:38px; border-radius:50%; background:var(--sf); color:#fff; border:none; font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; } [data-view="desktop"] .dsk-profile-avatar:hover{ opacity:0.9; } [data-view="desktop"] .dsk-profile-dropdown{ position:absolute; top:48px; right:0; width:290px; background:var(--card); border:1px solid var(--bdr); border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,0.16); overflow:hidden; z-index:500; } [data-view="desktop"] .dsk-profile-header{ padding:16px; background:linear-gradient(135deg,#1a0800,#3D1500); } [data-view="desktop"] .dsk-profile-name-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; } [data-view="desktop"] .dsk-profile-mini-avatar{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.15); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; flex-shrink:0; } [data-view="desktop"] .dsk-profile-name{ font-size:14px; font-weight:600; color:#fff; } [data-view="desktop"] .dsk-profile-email{ font-size:11px; color:#F0997B; } [data-view="desktop"] .dsk-profile-plan{ background:rgba(255,255,255,0.06); border-radius:10px; padding:12px; display:flex; flex-direction:column; align-items:center; } [data-view="desktop"] .dsk-profile-plan-clickable{ cursor:pointer; transition:background 0.15s; } [data-view="desktop"] .dsk-profile-plan-clickable:hover{ background:rgba(255,255,255,0.12); } /* Pro Details modal — same bottom-sheet-on-mobile issue as the Add Practice modal, same fix: center it on desktop instead. */ [data-view="desktop"] #pro-details-bg{ align-items:center !important; } [data-view="desktop"] #pro-details-bg > div{ border-radius:20px !important; max-width:400px; width:90%; } [data-view="desktop"] .dsk-profile-items{ padding:6px; } [data-view="desktop"] .dsk-profile-item{ width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border:none; background:none; font-size:13px; text-align:left; border-radius:8px; color:var(--tx); cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; } [data-view="desktop"] .dsk-profile-item:hover{ background:var(--sfl); } [data-view="desktop"] .dsk-profile-item i{ font-size:16px; color:var(--tx3); width:16px; } [data-view="desktop"] .dsk-profile-item-muted{ color:var(--tx3); font-size:12px; } [data-view="desktop"] .dsk-profile-item-danger{ color:#c0392b; } [data-view="desktop"] .dsk-profile-item-danger i{ color:#c0392b; } [data-view="desktop"] .dsk-profile-divider{ height:1px; background:var(--bdr); margin:6px 4px; } /* ── Manage Practices (dedicated page) ───────────────────────────────────── */ [data-view="desktop"] .dsk-mp-toolbar{ display:flex; gap:12px; margin-bottom:20px; } /* Same root cause as the topbar buttons — .btn's base width:100% (for mobile's full-width buttons) fighting the search box's flex:1 for space, which is what crushed the search input down to icon-only width while the button ballooned to fill almost the entire row. */ [data-view="desktop"] .dsk-mp-toolbar .btn{ width:auto; flex-shrink:0; white-space:nowrap; } [data-view="desktop"] .dsk-mp-search-wrap{ flex:1; position:relative; display:flex; align-items:center; } [data-view="desktop"] .dsk-mp-search-wrap i{ position:absolute; left:14px; color:var(--tx3); font-size:16px; } [data-view="desktop"] .dsk-mp-search{ width:100%; padding:11px 14px 11px 40px; border:1px solid var(--bdr); border-radius:12px; font-size:14px; background:var(--card); color:var(--tx); font-family:'Plus Jakarta Sans',sans-serif; } [data-view="desktop"] .dsk-mp-search:focus{ outline:none; border-color:var(--sf); } [data-view="desktop"] .dsk-mp-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:12px; align-content:start; } [data-view="desktop"] .dsk-mp-list .ob-item{ margin:0; min-height:72px; } /* ── Home timeline view ───────────────────────────────────────────────────── */ [data-view="desktop"] .dsk-timeline{ max-width:480px; } [data-view="desktop"] .dsk-tl-row{ display:flex; gap:14px; } [data-view="desktop"] .dsk-tl-time{ width:64px; flex-shrink:0; text-align:right; font-size:12px; color:var(--tx3); padding-top:2px; } [data-view="desktop"] .dsk-tl-track{ position:relative; flex:1; padding-left:20px; padding-bottom:12px; } /* Gap bands control the visual space AFTER an entry — small/medium/large for genuinely small/medium/large real time gaps, not literally to scale (see the comment in desktop-home.js for why). */ [data-view="desktop"] .dsk-tl-gap-small .dsk-tl-track{ padding-bottom:6px; } [data-view="desktop"] .dsk-tl-gap-medium .dsk-tl-track{ padding-bottom:22px; } [data-view="desktop"] .dsk-tl-gap-large .dsk-tl-track{ padding-bottom:44px; } [data-view="desktop"] .dsk-tl-dot{ position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:50%; background:var(--sf); } [data-view="desktop"] .dsk-tl-dot.done{ background:var(--sf); opacity:0.5; } [data-view="desktop"] .dsk-tl-row:not(:last-child) .dsk-tl-track::before{ content:''; position:absolute; left:4px; top:20px; bottom:0; width:1.5px; background:var(--bdr); } [data-view="desktop"] .dsk-tl-card{ position:relative; background:var(--card); border:1px solid var(--bdr); border-radius:12px; padding:10px 14px; cursor:pointer; transition:border-color 0.15s; } [data-view="desktop"] .dsk-tl-card:hover{ border-color:var(--sf); } [data-view="desktop"] .dsk-tl-card.done{ background:var(--sfl); } [data-view="desktop"] .dsk-tl-card-name{ font-size:14px; font-weight:600; color:var(--tx); } [data-view="desktop"] .dsk-tl-card-name.dt{ color:var(--tx3); } [data-view="desktop"] .dsk-tl-card-meta{ font-size:11px; color:var(--tx3); margin-top:2px; } [data-view="desktop"] .dsk-tl-gap-label{ font-size:11px; color:var(--tx3); padding-left:2px; margin-top:8px; } /* ── Insights log ─────────────────────────────────────────────────────────── */ [data-view="desktop"] .dsk-insights-log{ max-height:400px; overflow-y:auto; } [data-view="desktop"] .dsk-insights-log-row{ display:grid; grid-template-columns:100px 180px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--bdr); font-size:13px; } [data-view="desktop"] .dsk-insights-log-date{ color:var(--tx3); } [data-view="desktop"] .dsk-insights-log-name{ font-weight:600; color:var(--tx); } [data-view="desktop"] .dsk-insights-log-reason{ color:var(--tx2); } [data-view="desktop"] .dsk-insights-log-hdr{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--tx3); border-bottom:1.5px solid var(--bdr); position:sticky; top:0; background:var(--card); } [data-view="desktop"] .dsk-insights-log-row:not(.dsk-insights-log-hdr):nth-child(even){ background:var(--bg); } /* ── Insights KPI row ─────────────────────────────────────────────────────── */ [data-view="desktop"] .insights-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; margin-bottom:20px; } [data-view="desktop"] .insights-kpi{ background:var(--card); border:0.5px solid var(--bdr); border-radius:14px; padding:16px; min-width:0; } [data-view="desktop"] .insights-kpi-val{ font-size:20px; font-weight:700; color:var(--sf); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-view="desktop"] .insights-kpi-lbl{ font-size:12px; color:var(--tx3); margin-top:4px; } /* ── Trend badge ──────────────────────────────────────────────────────────── */ [data-view="desktop"] .insights-trend{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:8px 14px; border-radius:20px; margin-bottom:16px; } [data-view="desktop"] .insights-trend-up{ background:#FEF2F2; color:#B91C1C; } [data-view="desktop"] .insights-trend-down{ background:var(--ok); color:var(--ok-tx); } [data-view="desktop"] .insights-trend-flat{ background:var(--bg); color:var(--tx3); } /* ── Rank row subtitle (top reason for that specific practice) ──────────── */ [data-view="desktop"] .insights-rank-name-wrap{ flex:1; min-width:0; } [data-view="desktop"] .insights-rank-sub{ font-size:11px; color:var(--tx3); margin-top:1px; } /* ── Most skipped: numbered leaderboard, not a bar per row ───────────────── */ [data-view="desktop"] .insights-rank-row{ display:flex; align-items:center; gap:10px; padding:7px 0; } [data-view="desktop"] .insights-rank-badge{ width:22px; height:22px; border-radius:50%; background:var(--bg); color:var(--tx3); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; } [data-view="desktop"] .insights-rank-top .insights-rank-badge{ background:var(--sf); color:#fff; } [data-view="desktop"] .insights-rank-name{ flex:1; font-size:14px; color:var(--tx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-view="desktop"] .insights-rank-top .insights-rank-name{ font-weight:700; color:var(--sf); } [data-view="desktop"] .insights-rank-count{ font-size:14px; font-weight:700; color:var(--tx2); flex-shrink:0; } /* ── Reasons: pill chips instead of bars ─────────────────────────────────── */ [data-view="desktop"] .insights-reason-chips{ display:flex; flex-wrap:wrap; gap:8px; } [data-view="desktop"] .insights-reason-chip{ background:var(--bg); border:0.5px solid var(--bdr); border-radius:20px; padding:7px 12px; font-size:13px; display:flex; align-items:center; gap:6px; } [data-view="desktop"] .insights-reason-chip-top{ background:var(--sfl); border-color:var(--sfg); } [data-view="desktop"] .insights-reason-chip-name{ color:var(--tx); font-weight:600; } [data-view="desktop"] .insights-reason-chip-top .insights-reason-chip-name{ color:var(--sft); } [data-view="desktop"] .insights-reason-chip-count{ color:var(--tx3); font-size:12px; } /* ── By day of week: single-row heat strip, not 7 stacked bars ──────────── */ [data-view="desktop"] .insights-heatmap{ display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; } [data-view="desktop"] .insights-heat-cell{ border-radius:10px; padding:10px 4px; text-align:center; } [data-view="desktop"] .insights-heat-day{ font-size:11px; font-weight:600; color:var(--tx2); text-transform:uppercase; } [data-view="desktop"] .insights-heat-count{ font-size:16px; font-weight:700; color:var(--tx); margin-top:4px; } [data-view="desktop"] .insights-heat-top{ box-shadow:0 0 0 2px var(--sf) inset; } [data-view="desktop"] .insights-heat-strong .insights-heat-day, [data-view="desktop"] .insights-heat-strong .insights-heat-count{ color:#fff; } /* Hide mobile's bottom nav / mobile-only chrome entirely when in desktop view, in case any shared markup still renders it before a screen's own render function replaces #app's contents. */ [data-view="desktop"] .nav{ display:none !important; } /* ── Progress page: Trends/Reasons side by side ────────────────────────────── Mobile stacks these (see index.html's plain .rpt-panels) since there's no room for two columns — desktop has the width to show them as genuinely parallel panels instead. */ [data-view="desktop"] .rpt-panels{ flex-direction:row; gap:32px; } [data-view="desktop"] .rpt-panels .rpt-panel{ flex:1; min-width:0; } /* ── Edit/Add Practice: right-side sliding drawer, not a bottom sheet ────── */ [data-view="desktop"] .modal-side-panel{ animation: dsk-slide-in-right 0.22s ease-out; box-shadow: -12px 0 32px rgba(0,0,0,0.14); } @keyframes dsk-slide-in-right{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }