/* Reader skin system — integrated local candidate, 28 October 2026.
   Presentation roles replace the historical four-view overrides. All real-reader
   feeds, panels and shared layers use the same role owners. Geometry, data,
   route selection, theme/skin/density/text-size preferences remain independent.
   Logo artwork, embedded providers, inline metadata and continuous rail cells
   are not standalone control cards. This file must load after reader geometry. */
html[data-reader-skin] body.real-mode{
 --reader-skin-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --reader-skin-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
 --reader-skin-font:var(--reader-skin-mono);
 --reader-control-radius:0px;
 --reader-group-radius:0px;
 --reader-dialog-radius:0px;
 --reader-appearance-radius:0px;
 --reader-skin-bevel-hi:color-mix(in srgb,var(--text) 18%,var(--raised));
 --reader-skin-bevel-lo:color-mix(in srgb,var(--bg) 75%,var(--line));
 --reader-skin-bevel:inset 2px 2px 0 var(--reader-skin-bevel-hi),inset -2px -2px 0 var(--reader-skin-bevel-lo);
 --reader-skin-pressed:inset 2px 2px 0 var(--reader-skin-bevel-lo),inset -2px -2px 0 var(--reader-skin-bevel-hi);
 --reader-skin-focus:var(--blue);
 --reader-action-ink:var(--blue);
 --reader-material:var(--panel);
 --reader-material-blur:none;
 --reader-material-rim:color-mix(in srgb,var(--text) 32%,var(--line));
 --reader-material-elevation:0 8px 24px color-mix(in srgb,var(--bg) 38%,transparent);
 --reader-capsule-shadow:inset 0 1px 0 color-mix(in srgb,var(--blue) 60%,var(--line)),0 3px 7px color-mix(in srgb,var(--bg) 28%,transparent);
 font-family:var(--reader-skin-font);
 font-variant-numeric:tabular-nums;
}
html[data-reader-skin=hybrid] body.real-mode{
 --reader-skin-font:var(--reader-skin-sans);
 --reader-control-radius:16px;
 --reader-group-radius:24px;
 --reader-dialog-radius:28px;
 --reader-appearance-radius:14px;
}
html[data-reader-skin][data-theme=light] body.real-mode{
 /* Existing account/admin secondary ink: legible on the reader's light raised
    surfaces. Only consumers of the semantic muted role inherit this shade. */
 --muted:#616c7e;
 --reader-skin-bevel-hi:var(--panel);
 --reader-skin-bevel-lo:color-mix(in srgb,var(--text) 20%,var(--line));
 --reader-skin-focus:#235bd4;
 --reader-action-ink:#235bd4;
 --reader-material-rim:var(--panel);
 --reader-material-elevation:0 8px 24px color-mix(in srgb,var(--text) 12%,transparent);
 --reader-capsule-shadow:inset 0 1px 0 var(--panel),0 3px 7px color-mix(in srgb,var(--text) 13%,transparent);
}
/* The existing light action color belongs to the period role in every feed,
   including saved/radar/signal/newest. Other blue consumers keep their palette. */
html[data-reader-skin][data-theme=light] body.real-mode #main-panel .reader-period-row{
 --blue:#235bd4;
}

/* Human-facing text: override legacy font shorthands on actual text roles,
   not SVG/icon artwork or a universal descendant selector. Body-owned layers
   are explicit so opening an editor is not dependent on the underlying route. */
html[data-reader-skin] body.real-mode :is(#main-panel,#sidebar,#right-panel,#reader-market-rail,.topbar,#dialog,#reader-sidebar-editor,.reader-popover,.reader-appearance-panel,.reader-shortcut-dialog,.reader-hint,.ticker,.reader-footer) :is(h1,h2,h3,h4,p,button,a,input,select,textarea,label,summary,small,span,time,dt,dd,th,td,strong,b,em,mark),
html[data-reader-skin] body.real-mode :is(.story-reporting,.reader-sidebar-editor,.reader-hint,.reader-popover,.reader-appearance-panel,.reader-shortcut-dialog,.account-menu-body,.reader-footer,.list-context,.reader-selection,.row-time,.row-meta,.row-category,.clock,.eyebrow,.nav-label,.ticker-label,.widget-tag,.shortcut-kicker,.reader-history-status,.reader-storage-status,.quick-source-heading,.reader-overview-status,.reader-rail-caption,.mobile-rail-visibility,.reader-side-shortcuts button,.market-mobile-minimize,.compare-source,.compare-legend,.compare-original,.article-times,.story-reporting-eyebrow,.detail-tabs){
 font-family:var(--reader-skin-font);
 font-variant-numeric:tabular-nums;
}
html[data-reader-skin] body.real-mode :is(code,kbd,samp),
html[data-reader-skin] body.real-mode :is(#main-panel,#sidebar,#right-panel,#reader-market-rail,.topbar,#dialog,#reader-sidebar-editor,.reader-popover,.reader-appearance-panel,.reader-shortcut-dialog,.reader-hint,.ticker,.reader-footer) :is(code,kbd,samp) :is(span,strong,b,em){
 font-family:var(--reader-skin-mono);
}

/* Stable standalone control families. Fields have a separate role; rows,
   inline links, native checkboxes and closed rail cells are not rounded here. */
html[data-reader-skin] body.real-mode :is(.search-wrap,.topbar .icon-button,.topbar .login-entry,#sidebar nav button,#sidebar .sidebar-edit-shortcuts,#sidebar .sidebar-bottom>button),
html[data-reader-skin] body.real-mode #main-panel :is(.reader-mode-row>button,.reader-help,.reader-nav-options>summary,.head-tools .icon-button,.reader-daily-entry,.story-row .row-more),
html[data-reader-skin] body.real-mode .story-reporting>.detail-top :is(button,a,summary),
html[data-reader-skin] body.real-mode :is(.story-navigation>button,.detail-actions>button,.mobile-story-actions>button,.story-reaction-button,.reaction-retry),
html[data-reader-skin] body.real-mode #reader-navigation :is(.reader-extra-tools>button:not(.reader-help),.reader-nav-body>button),
html[data-reader-skin] body.real-mode :is(.source-categories button,.health-filters button,.quick-source-options button,.reader-filter-actions>.control-button),
html[data-reader-skin] body.real-mode #dialog-body :is(.primary-button,.modal-actions>button,.radar-rule>button,.radar-rules>button,.topics>button,.source-option,.widget-setting .icon-button),
html[data-reader-skin] body.real-mode :is(.dialog-head .icon-button,.reader-popover-close,.reader-action-list>button,.reader-action-list>a,.reader-action-times>summary),
html[data-reader-skin] body.real-mode .reader-sidebar-editor :is(.sidebar-editor-head>button,.sidebar-editor-row>button,.sidebar-editor-actions>button),
html[data-reader-skin] body.real-mode :is(button.primary-button,a.primary-button,.member-hub-actions>a.plus-button,.detail-original-link.article-read-link,.new-stories,.shortcut-open,.shortcut-close,.launcher-close,.launcher-help,button.launcher-tile),
html[data-reader-skin] body.real-mode :is(.market-return,.market-size-toggle,.market-close,.market-column-tools button,.market-view>.widget-head>button[data-panel=dashboard]),
html[data-reader-skin] body.real-mode #right-panel :is(.overview-home-nav button,.panel-tabs>button,.member-hub-actions>a,.member-hub-actions>button,.snapshot-stats>button),
html[data-reader-skin] body.real-mode .story-reporting>.detail-tabs>button{
 border-radius:var(--reader-control-radius);
}
html[data-reader-skin] body.real-mode :is(.reader-nav-body,.compare-choices,#dialog-body,.reader-sidebar-editor) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
 border-radius:var(--reader-control-radius);
}
html[data-reader-skin] body.real-mode :is(.reader-appearance-open,.reader-appearance-panel>header>button,.reader-appearance-group>div>button){
 border-radius:var(--reader-appearance-radius);
}
html[data-reader-skin=hybrid] body.real-mode .reader-appearance-group>div>button{
 font-weight:600;
}
html[data-reader-skin] body.real-mode .sidebar.open .reader-custom-nav>a{
 border-radius:var(--reader-control-radius);
}
@media(min-width:761px){
 html[data-reader-skin] body.real-mode .sidebar .reader-custom-nav>a{
  border-radius:var(--reader-control-radius);
 }
}
/* A wide header is the same appearance choice family, not a second tiny UI. */
@media(min-width:1600px){
 html[data-reader-skin] body.real-mode .reader-appearance-inline .reader-appearance-group>div>button{
  min-height:44px;
 }
}

/* Content and structural regions remain opaque. No new margins, padding,
   widths, grids or clipping are introduced by the skin. */
html[data-reader-skin] body.real-mode #main-panel :is(.workspace-head,.feed-controls),
html[data-reader-skin] body.real-mode #right-panel :is(.member-hub,.overview-section,.overview-home-nav,.panel-controls),
html[data-reader-skin] body.real-mode :is(.source-health,.radar-intro),
html[data-reader-skin] body.real-mode .story-reporting>.detail-tabs,
html[data-reader-skin] body.real-mode .story-controls-compact .story-more-body{
 border-radius:var(--reader-group-radius);
}
html[data-reader-skin] body.real-mode #right-panel :is(.member-hub,.overview-section,.overview-home-nav,.panel-controls),
html[data-reader-skin] body.real-mode :is(.source-health,.radar-intro,.compare-card){
 background:var(--panel);
}
html[data-reader-skin] body.real-mode :is(#dialog,#reader-sidebar-editor,.reader-shortcut-dialog){
 border-radius:var(--reader-dialog-radius);
 background:var(--panel);
}
html[data-reader-skin] body.real-mode :is(.reader-popover,.reader-appearance-panel){
 border-radius:var(--reader-group-radius);
 background:var(--panel);
}
html[data-reader-skin] body.real-mode .reader-hint{
 border-radius:var(--reader-control-radius);
}
html[data-reader-skin] body.real-mode .compare-card{
 border-radius:var(--reader-group-radius);
}

/* mIRC: opaque title/tool rows, internal two-pixel bevels and squared switch
   controls. Case changes belong to chrome, never to publisher story titles. */
html[data-reader-skin=current] body.real-mode :is(.topbar,#sidebar){
 background:var(--raised);
 box-shadow:var(--reader-skin-bevel);
}
html[data-reader-skin=current] body.real-mode #main-panel .workspace-head{
 background:linear-gradient(90deg,var(--bluefill),var(--raised));
 box-shadow:var(--reader-skin-bevel);
}
html[data-reader-skin=current] body.real-mode #main-panel :is(#reader-navigation,.feed-controls>.toolbar,.list-context){
 background:var(--raised);
 border-radius:0;
 box-shadow:var(--reader-skin-bevel);
}
html[data-reader-skin=current] body.real-mode #main-panel .workspace-head #view-title{
 font-weight:600;
 font-size:calc(20px * var(--ui-text-scale,1));
 line-height:1.25;
 letter-spacing:-.02em;
 text-transform:uppercase;
}
html[data-reader-skin=current] body.real-mode :is(.widget-head h2,.sidebar-editor-head small,.detail-tabs>button,.panel-tabs>button){
 text-transform:uppercase;
}
html[data-reader-skin=current] body.real-mode :is(.search-wrap,.topbar .icon-button,.topbar .login-entry,#sidebar nav button,#sidebar .sidebar-edit-shortcuts,#sidebar .sidebar-bottom>button),
html[data-reader-skin=current] body.real-mode #main-panel :is(.reader-mode-row>button,.reader-period-row>button,.reader-help,.reader-nav-options>summary,.reader-daily-entry,.head-tools .icon-button),
html[data-reader-skin=current] body.real-mode #right-panel :is(.overview-home-nav button,.panel-tabs>button,.member-hub-actions>a,.member-hub-actions>button,.snapshot-stats>button),
html[data-reader-skin=current] body.real-mode .story-reporting :is(.detail-top button,.detail-top a,.detail-top summary,.detail-tabs>button,.story-navigation>button,.compare-choices select),
html[data-reader-skin=current] body.real-mode .reader-sidebar-editor :is(.sidebar-editor-head>button,.sidebar-editor-row>button,.sidebar-editor-actions>button),
html[data-reader-skin=current] body.real-mode .reader-appearance-group>div>button{
 box-shadow:var(--reader-skin-bevel);
}
html[data-reader-skin=current] body.real-mode :is(#reader-navigation button[aria-pressed=true],#sidebar nav button.active,#sidebar nav button[aria-current=page],.panel-tabs>button.active,.overview-home-nav button[aria-current=page],.detail-tabs>button.active,.reader-appearance-group button[aria-pressed=true]){
 box-shadow:var(--reader-skin-pressed);
}
html[data-reader-skin=current] body.real-mode #right-panel :is(.member-hub,.overview-section,.overview-home-nav,.panel-controls),
html[data-reader-skin=current] body.real-mode :is(.compare-card,.source-health,.radar-intro,#dialog,#reader-sidebar-editor,.reader-popover,.reader-appearance-panel,.reader-shortcut-dialog,.reader-hint){
 box-shadow:var(--reader-skin-bevel);
}
html[data-reader-skin=current] body.real-mode #right-panel :is(.overview-section>.widget-head,.member-hub>.plus-kicker),
html[data-reader-skin=current] body.real-mode .sidebar-editor-head{
 background:var(--bluefill);
 box-shadow:var(--reader-skin-bevel);
}
html[data-reader-skin=current] body.real-mode :is(.detail-tabs,.compare-source){
 background:var(--raised);
 box-shadow:var(--reader-skin-bevel);
}
html[data-reader-skin=current] body.real-mode .story-reporting-title{
 background:var(--bluefill);
 box-shadow:inset 2px 0 var(--blue);
}
html[data-reader-skin=current] body.real-mode :is(.member-hub h2,.compare-card h3){font-weight:500}
html[data-reader-skin=current] body.real-mode .compare-card{border:1px solid var(--line)}
html[data-reader-skin=current] body.real-mode .compare-card h3{line-height:1.5}
html[data-reader-skin=current] body.real-mode #main-panel .story-row{border-radius:0}
html[data-reader-skin=current] body.real-mode #main-panel .story-row.selected{box-shadow:inset 2px 0 var(--blue)}

/* Glass: sans hierarchy, soft controls and low-weight frames. Continuous
   mobile rail cells deliberately stay flat; reading surfaces stay opaque. */
html[data-reader-skin=hybrid] body.real-mode #main-panel .workspace-head #view-title{
 font-size:calc(28px * var(--ui-text-scale,1));
 line-height:1.15;
 font-weight:650;
 letter-spacing:-.02em;
}
html[data-reader-skin=hybrid] body.real-mode :is(.member-hub h2,.story-reporting-title,.compare-card h3,.sidebar-editor-head h2,.source-profile h2,.empty-state h2){
 font-weight:650;
 letter-spacing:-.02em;
}
html[data-reader-skin=hybrid] body.real-mode #main-panel :is(.reader-period-row>button,.toolbar #signal-controls>button,#active-filters button),
html[data-reader-skin=hybrid] body.real-mode #sidebar nav button.active{
 border-radius:999px;
}
html[data-reader-skin=hybrid] body.real-mode #main-panel .story-row{
 border-radius:14px;
 background:var(--panel);
 box-shadow:none;
 border-top-color:color-mix(in srgb,var(--line) 55%,var(--panel));
}
html[data-reader-skin=hybrid] body.real-mode #main-panel .story-row.selected{box-shadow:inset 3px 0 var(--blue)}
html[data-reader-skin=hybrid] body.real-mode #right-panel :is(.member-hub,.overview-section),
html[data-reader-skin=hybrid] body.real-mode :is(.source-health,.radar-intro){
 box-shadow:none;
 border-color:color-mix(in srgb,var(--line) 55%,var(--panel));
}
html[data-reader-skin=hybrid] body.real-mode .compare-card{
 border-color:transparent;
 box-shadow:0 3px 12px color-mix(in srgb,var(--bg) 16%,transparent);
}
html[data-reader-skin=hybrid][data-theme=light] body.real-mode .compare-card{box-shadow:0 3px 12px color-mix(in srgb,var(--text) 6%,transparent)}
html[data-reader-skin=hybrid] body.real-mode :is(#dialog,#reader-sidebar-editor,.reader-shortcut-dialog,.reader-popover){box-shadow:var(--reader-hybrid-dialog-shadow)}

/* Exactly one filtered plane per navigation region. A modal/appearance layer
   replaces the underlying material via tokens; it cannot leave nested blur. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html[data-reader-skin=hybrid] body.real-mode{
  --reader-material:linear-gradient(125deg,color-mix(in srgb,var(--text) 14%,transparent),transparent 40%,color-mix(in srgb,var(--blue) 10%,transparent)),color-mix(in srgb,var(--panel) 72%,transparent);
  --reader-material-blur:blur(24px);
 }
 html[data-reader-skin=hybrid][data-theme=light] body.real-mode{
  --reader-material:linear-gradient(125deg,color-mix(in srgb,var(--panel) 70%,transparent),transparent 42%,color-mix(in srgb,var(--blue) 6%,transparent)),color-mix(in srgb,var(--panel) 72%,transparent);
 }
}
html[data-reader-skin=hybrid] body.real-mode:is(:has(dialog[open]),:has(#reader-appearance-panel:not([hidden]))){
 --reader-material:var(--panel);
 --reader-material-blur:none;
}
html[data-reader-skin=hybrid] body.real-mode :is(#reader-navigation,.story-reporting>.detail-tabs){
 border-radius:var(--reader-group-radius);
 background:var(--reader-material);
 box-shadow:inset 0 1px 0 var(--reader-material-rim),inset 0 -1px 0 color-mix(in srgb,var(--blue) 22%,var(--line)),var(--reader-material-elevation);
 -webkit-backdrop-filter:var(--reader-material-blur);
 backdrop-filter:var(--reader-material-blur);
}
html[data-reader-skin=hybrid] body.real-mode :is(#reader-navigation :is(.reader-mode-row,.reader-period-row)>button[aria-pressed=true],.story-reporting>.detail-tabs>button.active){
 color:var(--text);
 background:linear-gradient(145deg,color-mix(in srgb,var(--bluefill) 84%,var(--text)),var(--bluefill));
 box-shadow:var(--reader-capsule-shadow);
 -webkit-backdrop-filter:none;
 backdrop-filter:none;
}
html[data-reader-skin=hybrid] body.real-mode :is(#reader-navigation :is(.reader-mode-row,.reader-period-row)>button,.story-reporting>.detail-tabs>button){
 transition:transform 180ms ease-out,opacity 180ms ease-out;
 transform:translateY(0);
}
@media(hover:hover) and (pointer:fine){
 html[data-reader-skin=hybrid] body.real-mode :is(#reader-navigation :is(.reader-mode-row,.reader-period-row)>button,.story-reporting>.detail-tabs>button):not(:disabled):hover{transform:translateY(-1px)}
}
html[data-reader-skin=hybrid] body.real-mode :is(#reader-navigation :is(.reader-mode-row,.reader-period-row)>button,.story-reporting>.detail-tabs>button):not(:disabled):active{
 transform:translateY(1px);
 opacity:.96;
}
html[data-reader-skin=hybrid] body.real-mode #reader-appearance-panel{
 background:var(--panel);
 border-color:color-mix(in srgb,var(--text) 22%,var(--line));
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 25%,transparent),0 12px 32px color-mix(in srgb,var(--bg) 48%,transparent);
 -webkit-backdrop-filter:none;
 backdrop-filter:none;
}
html[data-reader-skin=hybrid][data-theme=light] body.real-mode #reader-appearance-panel{box-shadow:inset 0 1px 0 var(--panel),0 12px 32px color-mix(in srgb,var(--text) 14%,transparent)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html[data-reader-skin=hybrid] body.real-mode #reader-appearance-panel{
  background:linear-gradient(130deg,color-mix(in srgb,var(--text) 8%,transparent),transparent 45%),color-mix(in srgb,var(--panel) 88%,transparent);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
 }
}
html[data-reader-skin=hybrid] body.real-mode #reader-appearance-panel:not([hidden]){animation:reader-appearance-entry 180ms ease-out both}
@keyframes reader-appearance-entry{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Light text-only action ink. The legacy desktop --blue remains available
   to branding, illustrations, headline accents and semantic signal palettes.
   These are the existing blue text/control roles, not every blue element. */
html[data-reader-skin][data-theme=light] body.real-mode :is(.reader-daily-entry,.new-stories,.source-count,.article-original,.archive-search-link,.all-news-reset,.activity-retry,.arrival-jump,.arrival-label,.new-member-label,.reader-mode-row small),
html[data-reader-skin][data-theme=light] body.real-mode :is(.plus-button,.plus-kicker,.small-action,.overview-intro button,.member-buttons .member-login,.narrative-tiles .tile-action,.health-label,.overview-categories b,.coverage-story small b),
html[data-reader-skin][data-theme=light] body.real-mode :is(.outbound,.detail-source a,.source-categories button,.source-article>a,.source-tools button,.source-profile .detail-actions .primary-button,.source-option.active,.source-option[aria-pressed=true]),
html[data-reader-skin][data-theme=light] body.real-mode :is(.story-plus-badge,.story-reporting>.detail-top button,.story-reporting>.detail-top a,.story-reporting>.detail-top summary,.story-navigation>button:not(:disabled),.story-context>summary,.reporting-method>summary,.timeline .article-read-link,.detail-original-link,.community-tab,.reaction-retry,.reaction-account-link),
html[data-reader-skin][data-theme=light] body.real-mode :is(.radar-intro button,.modal-text a,.topics button.active,.story-reaction-button[aria-pressed=true],.quick-source-options button[aria-pressed=true],.health-filters [aria-pressed=true],.grouping-review summary,.grouping-review-item button,.trend-method summary),
html[data-reader-skin][data-theme=light] body.real-mode :is(.reader-popover a,.reader-popover>button,.reader-public-guide a,.shortcut-open,.shortcut-kicker,.launcher-credit a,.reader-news-return),
html[data-reader-skin][data-theme=light] body.real-mode :is(.sidebar-edit-shortcuts,.account-reader-links a,.sidebar-editor-row button,.sidebar-editor-actions [data-editor-save],.mobile-install-shortcut,.account-menu-entry a:first-child,.topbar .account-menu>.login-entry),
html[data-reader-skin][data-theme=light] body.real-mode :is(.market-return,.market-size-toggle,.market-close,.market-column-tools button,.market-external-quotes a,.market-open,.market-toggle,.weather-fold,.weather-zoom-label,.weather-refresh,.weather-picker summary,.weather-search button,.weather-choice a,.weather-info summary),
html[data-reader-skin][data-theme=light] body.real-mode :is(.news-counts a,.community-recent a,.comments-actions a,.comments-actions button,.mini-comment .story-ref,.delete-undo,.poll-foot button){
 color:var(--reader-action-ink);
}
html[data-reader-skin][data-theme=light] body.real-mode #main-panel :is(.article-original,.source-count,.row-meta [data-category]),
html[data-reader-skin][data-theme=light] body.real-mode #reader-navigation .reader-mode-row small,
html[data-reader-skin][data-theme=light] body.real-mode #active-filters button,
html[data-reader-skin][data-theme=light] body.real-mode #feed-footer button,
html[data-reader-skin][data-theme=light] body.real-mode #toast [data-reader-undo],
html[data-reader-skin][data-theme=light] body.real-mode .reader-filter-actions #quick-filters button.active{
 color:var(--reader-action-ink);
}
/* Current uses blue selected text; Hybrid's already dark selected label keeps
   its own material rule. A readable label need not recolor its surrounding glow. */
html[data-reader-skin=current][data-theme=light] body.real-mode :is(#reader-navigation .reader-mode-row>button[aria-pressed=true],.panel-tabs>button.active,.detail-tabs>button.active,.quick-bar button.active,.segmented button.active){
 color:var(--reader-action-ink);
}
html[data-reader-skin][data-theme=light] body.real-mode :is(.reader-daily-entry:hover,.reader-footer a:hover,.site-credit a:hover,.source-profile-link:hover,.publisher-links a:hover,.row-category:hover,.row-category:focus-visible,.sidebar-bottom .legal-entry:hover,.reader-custom-nav a:hover,.overview-home-nav button:hover,.widget-head button:hover,.coverage-story:hover>span),
html[data-reader-skin][data-theme=light] body.real-mode :is(.reader-action-list>button,.reader-action-list>a,.reader-action-times>summary):hover,
html[data-reader-skin][data-theme=light] body.real-mode .account-menu-body :is(a,button):hover,
html[data-reader-skin][data-theme=light] body.real-mode .reader-appearance-open:is(:hover,[aria-expanded=true]),
html[data-reader-skin][data-theme=light] body.real-mode :is(.story-row .row-more:hover,.story-row .row-more[aria-expanded=true],.dense [data-action=density]){
 color:var(--reader-action-ink);
}
/* Functional icon-only controls share the legible ink; artwork does not. */
html[data-reader-skin][data-theme=light] body.real-mode :is(.pulse-refresh-button,.reader-side-shortcuts button,.reader-feed-arrows button,.market-mini-open,.market-mobile-minimize,.mobile-rail-visibility){
 color:var(--reader-action-ink);
}

/* Shared, explicit focus role. Do not turn off native hidden/disabled behavior.
   Focus is not clipped by any skin surface, including a selected capsule. */
html[data-reader-skin] body.real-mode :is(#main-panel,#right-panel,#sidebar,#dialog,#reader-sidebar-editor,#reader-appearance-panel,.topbar,.reader-popover,.reader-shortcut-dialog) :is(button,a,input,select,textarea,summary):focus-visible{
 outline:2px solid var(--reader-skin-focus);
 outline-offset:2px;
}
/* Only confirmed standalone close/return roles get larger targets. Metadata,
   rail column widths and native fields keep their existing geometry owners. */
html[data-reader-skin] body.real-mode :is(.market-return,.market-view>.widget-head>button[data-panel=dashboard]){
 min-height:44px;
 min-width:44px;
 padding:4px 8px;
}
@media(max-width:760px){
 html[data-reader-skin] body.real-mode #sidebar:not(.open) :is(nav button,.sidebar-bottom>button,.sidebar-edit-shortcuts,.reader-custom-nav>a){
  border-radius:0;
 }
 html[data-reader-skin] body.real-mode #sidebar:not(.open) nav button{box-shadow:none}
 html[data-reader-skin=current] body.real-mode #main-panel .workspace-head #view-title{font-size:calc(18px * var(--ui-text-scale,1))}
 html[data-reader-skin=hybrid] body.real-mode #main-panel .workspace-head #view-title{font-size:calc(20px * var(--ui-text-scale,1))}
 html[data-reader-skin=current] body.real-mode #main-panel .story-row .story-title{font-size:calc(15px * var(--ui-text-scale,1));line-height:1.4}
}
html[data-reader-skin=current] body.real-mode #main-panel[data-reader-controls=compact] .workspace-head #view-title{font-size:calc(18px * var(--ui-text-scale,1))}
html[data-reader-skin=hybrid] body.real-mode #main-panel[data-reader-controls=compact] .workspace-head #view-title{font-size:calc(20px * var(--ui-text-scale,1))}

/* Fallback declarations own the same semantic surfaces as normal material.
   They do not compete with separate native-dialog background declarations. */
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 html[data-reader-skin=hybrid][data-theme] body.real-mode :is(#reader-navigation,.story-reporting>.detail-tabs),
 html[data-reader-skin=hybrid][data-theme] body.real-mode #reader-appearance-panel{
  background:var(--panel);
  border-color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
 }
}
@media(prefers-reduced-motion:reduce),(forced-colors:active){
 html[data-reader-skin=hybrid] body.real-mode :is(#reader-navigation :is(.reader-mode-row,.reader-period-row)>button,.story-reporting>.detail-tabs>button):not(:disabled):is(:hover,:active),
 html[data-reader-skin=hybrid] body.real-mode :is(#reader-navigation :is(.reader-mode-row,.reader-period-row)>button,.story-reporting>.detail-tabs>button),
 html[data-reader-skin=hybrid] body.real-mode #reader-appearance-panel:not([hidden]){
  transition:none;
  animation:none;
  transform:none;
  opacity:1;
 }
}
@media(forced-colors:active){
 html[data-reader-skin][data-theme] body.real-mode{--reader-action-ink:LinkText}
 html[data-reader-skin] body.real-mode{
  --reader-skin-focus:Highlight;
  --reader-skin-bevel:none;
  --reader-skin-pressed:none;
 }
 html[data-reader-skin][data-theme] body.real-mode :is(.topbar,#sidebar,#main-panel .workspace-head,#main-panel #reader-navigation,#main-panel .story-row,#main-panel .feed-controls>.toolbar,#main-panel .list-context,#right-panel .member-hub,#right-panel .overview-section,#right-panel .overview-home-nav,#right-panel .panel-controls,.story-reporting>.detail-tabs,.story-reporting-title,.compare-card,.compare-source,.source-health,.radar-intro,#dialog,#reader-sidebar-editor,.reader-shortcut-dialog,.reader-popover,#reader-appearance-panel,.reader-hint){
  background:Canvas;
  color:CanvasText;
  border-color:CanvasText;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
 }
 html[data-reader-skin][data-theme] body.real-mode :is(#reader-navigation button,.panel-tabs>button,.detail-tabs>button,#sidebar nav button,.reader-appearance-group button){box-shadow:none}
 html[data-reader-skin][data-theme] body.real-mode :is(#reader-navigation :is(.reader-mode-row,.reader-period-row)>button[aria-pressed=true],.story-reporting>.detail-tabs>button.active,#sidebar nav button.active,.panel-tabs>button.active,.overview-home-nav button[aria-current=page],.reader-appearance-group button[aria-pressed=true]){
  background:Highlight;
  color:HighlightText;
  box-shadow:none;
 }
 html[data-reader-skin][data-theme] body.real-mode :is(#main-panel,#right-panel,#sidebar,#dialog,#reader-sidebar-editor,#reader-appearance-panel,.topbar,.reader-popover,.reader-shortcut-dialog) :is(button,a,input,select,textarea,summary):focus-visible{
  outline:2px solid Highlight;
  outline-offset:2px;
 }
}