.canon-preference-columns { grid-template-columns: 1fr; } .app-editor-drawer { width: 100%; } } /* Platform geometry v2 — shared scaling, readable settings and widescreen dock. */ :root { --platform-max: 3040px; --platform-gutter: clamp(24px, 2.25vw, 56px); --platform-inset: clamp(48px, 4.5vw, 112px); --widget-dock-width: clamp(360px, 22vw, 430px); } .dashboard-topbar-inner, .dashboard-workspace { width: calc(100% - var(--platform-inset)); max-width: var(--platform-max); } .dashboard-workspace { grid-template-columns: clamp(248px, 15vw, 292px) minmax(0, 1fr); gap: clamp(24px, 2vw, 36px); } .dashboard-rail { padding: 20px; } .rail-intro span, .rail-favorites nav a small, .rail-widget-link small, .rail-empty-action small, .rail-deck-health p, .rail-deck-health > button { font-size: 12px; line-height: 1.45; } .rail-favorites nav a strong, .rail-widget-link strong, .rail-empty-action strong, .rail-favorites > header > span, .rail-deck-health > header > span { font-size: 14px; } .app-tile.standard { isolation: isolate; overflow: hidden; border-color: color-mix( in srgb, var(--stitch-border) 88%, var(--stitch-primary) 12% ); background: linear-gradient( 145deg, color-mix(in srgb, var(--stitch-surface) 94%, var(--stitch-primary) 6%), var(--stitch-surface) ); } .app-tile.standard::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: 3px; background: linear-gradient( 180deg, var(--stitch-primary), var(--stitch-success-bright) ); opacity: 0; transition: opacity 180ms ease; } .app-tile.standard:hover, .app-tile.standard:focus-visible { border-color: color-mix( in srgb, var(--stitch-primary) 46%, var(--stitch-border) ); box-shadow: 0 16px 34px rgb(0 0 0 / 0.13); transform: translateY(-3px); } .app-tile.standard:hover::before, .app-tile.standard:focus-visible::before { opacity: 1; } .app-tile.standard .tile-arrow { opacity: 0.42; transition: opacity 160ms ease, transform 160ms ease; } .app-tile.standard:hover .tile-arrow, .app-tile.standard:focus-visible .tile-arrow { opacity: 1; transform: translate(2px, -2px); } .quick-launch-home { display: grid; gap: 10px; padding-bottom: 12px; } .quick-links-section { padding: 0 10px 12px; } .quick-links-section > h2 { margin: 0; padding: 10px 10px 12px; color: var(--stitch-text-muted); font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; } .quick-links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .search-results .quick-links-grid > a { min-width: 0; min-height: 108px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-rows: 1fr; align-items: center; gap: 12px; border: 1px solid var(--stitch-border) !important; border-radius: 13px !important; padding: 14px; background: color-mix(in srgb, var(--stitch-surface) 82%, transparent); } .search-results .quick-links-grid > a:hover, .search-results .quick-links-grid > a:focus-visible { border-color: color-mix( in srgb, var(--stitch-primary) 48%, var(--stitch-border) ) !important; background: var(--stitch-primary-soft); transform: translateY(-2px); } .quick-links-grid > a > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; } .quick-links-grid > a strong, .quick-links-grid > a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quick-links-grid > a strong { font-size: 14px; } .quick-links-grid > a small { color: var(--stitch-text-muted); font-size: 12px; } .quick-links-grid .result-icon { width: 46px; height: 46px; } .settings-topbar { padding-right: max( calc(var(--platform-gutter) + 30px), calc((100vw - var(--platform-max)) / 2 + 30px) ); padding-left: max( calc(var(--platform-gutter) + 30px), calc((100vw - var(--platform-max)) / 2 + 30px) ); } .settings-layout { width: calc(100% - var(--platform-inset)); max-width: var(--platform-max); grid-template-columns: clamp(300px, 18vw, 348px) minmax(0, 1fr); margin: 0 auto; } .settings-content, .settings-page[data-section="appearance"] .settings-content { max-width: none; padding-right: clamp(40px, 4vw, 76px); padding-left: clamp(40px, 4vw, 76px); font-size: 16px; } .settings-sidebar nav button { font-size: 15.5px; font-weight: 520; } .settings-sidebar h1, .settings-sidebar .local-note { font-size: 13px; line-height: 1.45; } .settings-heading .eyebrow { font-size: 13px; } .settings-heading h2 { font-size: clamp(34px, 2vw, 40px); line-height: 1.15; } .settings-heading > p:last-child { max-width: 900px; font-size: 17px; line-height: 1.6; } .settings-content :where(input, select, textarea, button) { font-size: 15px; } .settings-content :where(.setting-label, label > span, .results-note) { font-size: 13px; line-height: 1.45; } .settings-content :where( .management-title small, .management-card small, .widget-option > p, .widget-option > header small, .integration-list article small, .security-callout small, .toggle-list article small, .appearance-advanced small, .integration-section-heading small ) { font-size: 13px; line-height: 1.55; } .settings-content :where( .management-title strong, .management-card strong, .widget-option strong, .toggle-list article strong, .integration-list article strong ) { font-size: 15px; } .management-table-head, .filter-pills button, .pagination span, .favorite-editor > summary { font-size: 13px; } @media (min-width: 1900px) { .dashboard-canvas { padding-right: calc(var(--widget-dock-width) + 32px); } .dashboard-insights-panel { position: fixed; z-index: 20; top: 96px; right: max(var(--platform-gutter), calc((100vw - var(--platform-max)) / 2)); width: var(--widget-dock-width); max-height: calc(100vh - 120px); overflow: auto; margin: 0; background: color-mix(in srgb, var(--stitch-surface) 92%, transparent); box-shadow: 0 20px 70px rgb(0 0 0 / 0.18); backdrop-filter: blur(20px); scrollbar-width: thin; } .dashboard-insights-panel > summary { position: sticky; z-index: 3; top: 0; min-height: 76px; background: color-mix(in srgb, var(--stitch-surface) 96%, transparent); backdrop-filter: blur(16px); } .dashboard-insights-panel .dashboard-widgets { padding: 18px; } .dashboard-insights-panel .widgets-grid { grid-template-columns: 1fr; } .dashboard-insights-panel .widget-shell.widget-size-wide { grid-column: auto; } .dashboard-insights-panel .widgets-section > header { align-items: flex-start; gap: 14px; } .dashboard-insights-panel .widgets-actions { width: 100%; } .dashboard-insights-panel .widgets-edit, .dashboard-insights-panel .widgets-refresh { flex: 1 1 0; justify-content: center; } .dashboard-canvas .app-grid { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); } .dashboard-canvas .app-grid.feature-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } } @media (min-width: 2600px) { .dashboard-canvas .app-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .category-card-grid, .integration-list, .settings-page[data-section="favorites"] .compact-list { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }