/* Desktop parity uses shared controls and palette, not phone rail geometry or
   scroll-driven visibility. Pane resize remains owned by reader-resize. */
@media(min-width:761px){
 html[data-reader-skin] body.real-mode #main-panel .workspace-head{--reader-tool-space:138px;display:grid;grid-template-columns:var(--reader-tool-space) minmax(0,1fr) var(--reader-tool-space);align-items:center;gap:0;padding:10px 8px 6px;text-align:center}
 html[data-reader-skin] body.real-mode #main-panel[data-reader-controls=compact] .workspace-head{--reader-tool-space:44px;padding:8px 6px 4px;gap:0}
 html[data-reader-skin] body.real-mode #main-panel .workspace-head>div:first-child{grid-column:2;grid-row:1;min-width:0;text-align:center}
 html[data-reader-skin] body.real-mode #main-panel .workspace-head .head-tools{grid-column:3;grid-row:1;display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:3px;min-width:0;width:100%;max-width:none}
 html[data-reader-skin] body.real-mode #main-panel .workspace-head #view-title{padding:0;border-left:0;text-align:center}
 html[data-reader-skin] body.real-mode #main-panel .reader-heading-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px 7px;min-width:0;text-align:center}
 html[data-reader-skin] body.real-mode #main-panel .reader-heading-meta .eyebrow{margin:0}
 html[data-reader-skin] body.real-mode #main-panel .reader-heading-meta .clock{display:inline-flex;align-items:center;gap:4px;min-height:0;margin:0;font-size:calc(10px * var(--ui-text-scale,1));line-height:1.4;white-space:nowrap}
 html[data-reader-skin] body.real-mode #main-panel .head-tools .reader-daily-entry{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;min-width:44px;width:44px;min-height:44px;height:44px;padding:5px}
 html[data-reader-skin] body.real-mode #main-panel .reader-daily-entry span:not([data-icon]){position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}

 /* Keep the active paint inside its full-size hit area, so the group rim and
    neighboring label remain separate even in a resized desktop column. */
 html[data-reader-skin=hybrid] body.real-mode #main-panel #reader-navigation{width:auto;margin:3px 6px 6px;padding:3px 5px;min-width:0}
 html[data-reader-skin=hybrid] body.real-mode #main-panel #reader-navigation .reader-mode-row{gap:6px}
 html[data-reader-skin=hybrid] body.real-mode #main-panel #reader-navigation .reader-mode-row>button[aria-pressed=true]{position:relative;isolation:isolate;background:transparent;box-shadow:none}
 html[data-reader-skin=hybrid] body.real-mode #main-panel #reader-navigation .reader-mode-row>button[aria-pressed=true]::before{content:"";position:absolute;z-index:-1;inset:3px 2px;border-radius:inherit;pointer-events:none;background:linear-gradient(145deg,color-mix(in srgb,var(--bluefill) 84%,var(--text)),var(--bluefill));box-shadow:var(--reader-capsule-shadow)}
 html[data-reader-skin] body.real-mode .topbar #account-menu>.login-entry,
 html[data-reader-skin] body.real-mode #main-panel #reader-navigation .reader-period-row>button{border:0;box-shadow:none}
 html[data-reader-skin] body.real-mode #sidebar .sidebar-edit-shortcuts,
 html[data-reader-skin] body.real-mode .reader-side-shortcuts button{color:var(--reader-action-ink,var(--blue));min-height:44px;background:var(--panel)}
 html[data-reader-skin] body.real-mode .reader-side-shortcuts button{width:100%;margin:0;gap:3px;padding:4px 0;box-sizing:border-box;border:0}
 html[data-reader-skin] body.real-mode .reader-side-shortcuts button svg{width:20px;height:20px;flex:none}
 html[data-reader-skin] body.real-mode :is(.reader-side-shortcuts button,#sidebar .sidebar-edit-shortcuts):is(:hover,:focus-visible){background:var(--bluefill)}

 /* Reuse the navy already established on phones. Semantic state fills and
    independent light-mode colors keep their existing values. */
 html[data-theme=dark] body.real-mode{--reader-page-surface:#0b111a;--bg:var(--reader-page-surface);--panel:var(--reader-page-surface);--raised:var(--reader-page-surface);--sidebar:var(--reader-page-surface)}
 html[data-reader-skin][data-theme=dark] body.real-mode :is(.topbar,.terminal,#sidebar,#reader-market-rail){background:var(--reader-page-surface)}
 html[data-reader-skin][data-theme=dark] body.real-mode #main-panel,
 html[data-reader-skin][data-theme=dark] body.real-mode #main-panel :is(.workspace-head,#reader-navigation,.feed-controls,.feed-controls>.toolbar,.list-context,.story-row){background:var(--reader-page-surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(min-width:761px) and (forced-colors:active){
 html[data-reader-skin=hybrid] body.real-mode #main-panel #reader-navigation .reader-mode-row>button[aria-pressed=true]{background:Highlight;color:HighlightText;box-shadow:none}
 html[data-reader-skin=hybrid] body.real-mode #main-panel #reader-navigation .reader-mode-row>button[aria-pressed=true]::before{display:none}
}

/* Use system text/canvas and an inset selection outline. In Chromium, forcing
   HighlightText on glass controls can paint an opaque text backplate. */
@media(min-width:761px) and (forced-colors:active){
 html[data-reader-skin][data-theme] body.real-mode :is(
 #reader-navigation .reader-mode-row>button[aria-pressed=true],
 #reader-navigation .reader-period-row>button[aria-pressed=true],
 #right-panel .story-panel-navigation>[data-detail-tab][aria-pressed=true],
 #right-panel .overview-home-nav>button[aria-current=page],
 #sidebar nav button.active,
 #sidebar nav button[aria-current=page],
 #right-panel .story-workspace-toolbar .detail-top :is(.story-reaction-button,.story-save,.story-follow)[aria-pressed=true]
 ){forced-color-adjust:none;background:Canvas;color:ButtonText;box-shadow:none;outline:2px solid Highlight;outline-offset:-2px;}
}