@import './theme.css';
@import './public-header.css';

/* Reading pages use the same surfaces, controls and preference as the app. */
html[data-app-theme] .policy-page { --policy-ink: var(--app-text); --policy-muted: var(--app-muted); --policy-paper: var(--app-bg); --policy-green: var(--app-surface); --policy-gold: var(--app-accent); }
html[data-app-theme] .policy-page { color: var(--app-text); background: var(--app-bg); }
html[data-app-theme] .policy-page .public-header-shell { font-weight: 500; line-height: 1.5; }
html[data-app-theme] .policy-page .public-brand, html[data-app-theme] .policy-page .public-account { color: var(--app-text); }
html[data-app-theme] .policy-page .public-brand svg { color: var(--app-accent); }
html[data-app-theme] .policy-page .public-header nav a { color: var(--app-muted); }
html[data-app-theme] .policy-page .public-header nav a:hover, html[data-app-theme] .policy-page .public-header nav a[aria-current] { color: var(--app-accent); }
html[data-app-theme] .policy-page .policy-nav { top: 128px; }
html[data-app-theme] .policy-page .policy-skip:focus { position: fixed; z-index: 110; }
html[data-app-theme] .policy-page :is(.policy-contents,.policy-nav,.blog-feature,.blog-formula,.blog-close,.blog-values th,.blog-values td) { border-color: var(--app-border); }
html[data-app-theme] .policy-page :is(.policy-footer,.blog-footer,.blog-feature-note) { background: var(--app-surface); color: var(--app-text); }
html[data-app-theme] .policy-page :is(.policy-footer small,.blog-footer p) { color: var(--app-muted); }
html[data-app-theme] .policy-page .blog-feature-note dl div { border-color: var(--app-border); }
html[data-app-theme] .policy-page :is(.blog-values thead,.blog-example) { background: var(--app-raised); }
html[data-app-theme] .policy-page .blog-action { background: var(--app-button); color: var(--app-on-button); }
html[data-app-theme] .policy-page .blog-action:hover { background: var(--app-button); filter: brightness(1.08); }
html[data-app-theme] .policy-page .theme-toggle-button[hidden], html[data-app-theme] .policy-page .theme-toggle small[hidden] { display: none; }
html[data-app-theme] .blog-page .blog-disclosure { font-size: 14px; color: var(--app-muted); }
html[data-app-theme] .blog-page .blog-comparison-wrap { max-width: 100%; overflow-x: auto; margin: 24px 0; }
html[data-app-theme] .blog-page .blog-comparison { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; line-height: 1.6; }
html[data-app-theme] .blog-page .blog-comparison caption { text-align: left; padding: 0 0 14px; font-weight: 600; }
html[data-app-theme] .blog-page .blog-comparison :is(th,td) { padding: 16px; vertical-align: top; border-bottom: 1px solid var(--app-border); }
html[data-app-theme] .blog-page .blog-comparison thead { background: var(--app-raised); }
html[data-app-theme] .blog-page .blog-comparison th[scope="row"] { width: 25%; }
html[data-app-theme] .blog-page .blog-comparison td:nth-child(2) { width: 25%; font-variant-numeric: tabular-nums; }
html[data-app-theme] .blog-page .blog-comparison small { display: block; margin-top: 8px; font-size: 13px; font-weight: 400; }
html[data-app-theme] .blog-page .blog-comparison-note { font-size: 14px; }
@media (max-width: 760px) {
  .policy-page .policy-nav { position: static; }
  html[data-app-theme] .blog-page .blog-comparison { min-width: 650px; }
}
@media print {
  .policy-page .public-header-shell { display: none; }
  html[data-app-theme] .policy-page { --app-text: #000; --app-muted: #333; --app-bg: #fff; --app-surface: #fff; --app-raised: #eee; --app-border: #888; color: #000; background: #fff; }
  html[data-app-theme] .blog-page .blog-comparison-wrap { overflow: visible; }
  html[data-app-theme] .blog-page .blog-comparison { min-width: 0; }
}