/* Display settings (prefs.js): text size, font, page colour, dark mode. */
html[data-ui-size="sm"] { font-size: 90%; }
html[data-ui-size="lg"] { font-size: 112.5%; }
html[data-ui-size="xl"] { font-size: 125%; }
html[data-ui-font="system"] body, html[data-ui-font="system"] body * { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; }

/* Page colour: the main colour of headers, buttons and titles. */
html[data-ui-accent="blue"] { --navy: #1d4fb8; --navy-2: #2f66d0; --navy-3: #163d8f; --shadow: 29, 79, 184; }
html[data-ui-accent="sky"] { --navy: #0369a1; --navy-2: #0284c7; --navy-3: #075985; --on-dark-muted: #d6eefa; --shadow: 3, 105, 161; }
html[data-ui-accent="grey"] { --navy: #4b5563; --navy-2: #6b7280; --navy-3: #374151; --on-dark-muted: #e5e7eb; --shadow: 75, 85, 99; }
html[data-ui-accent="orange"] { --navy: #c2410c; --navy-2: #ea580c; --navy-3: #9a3412; --on-dark-muted: #ffedd5; --shadow: 194, 65, 12; }

/* Dark mode: the whole page is inverted, then the header bars, pictures
   and videos are turned back so they keep their real colours. */
html.ui-dark { filter: invert(.92) hue-rotate(180deg); background: #fff; }
html.ui-dark :is(img, video, canvas, iframe, .topbar, .mbar, .keep-colours) { filter: invert(1) hue-rotate(180deg); }
html.ui-dark :is(.topbar, .mbar, .keep-colours) :is(img, video, canvas, iframe) { filter: none; }

/* English (i18n.js) */
html[dir="ltr"] .ar, html[dir="ltr"] .back { direction: rtl; }

/* The «العرض» section of the settings pages. */
.uip { display: flex; flex-direction: column; gap: 14px; }
.uip-row { display: flex; flex-direction: column; gap: 6px; }
.uip-name { font-size: .85rem; color: var(--grey); }
.uip-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.uip-seg button { flex: 1 1 auto; min-width: 64px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--navy); font: inherit; font-size: .88rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.uip-seg button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.uip-seg i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.uip-reset { align-self: flex-start; background: none; border: 0; color: var(--grey); text-decoration: underline; font: inherit; font-size: .82rem; padding: 4px 0; cursor: pointer; }
.uip-save { display: flex; gap: 8px; margin-top: 4px; }
.uip-save button { flex: 1; padding: 12px; border-radius: 12px; font: inherit; font-size: .95rem; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--navy); }
.uip-save .uip-ok { background: var(--navy); border-color: var(--navy); color: #fff; flex: 2; }
.uip-save .uip-ok:disabled { opacity: .45; cursor: default; }
.uip-note { margin: 0; font-size: .82rem; color: #1f7a3f; }
.uip-note.wait { color: var(--grey); }

/* Samsung Internet and Chrome darken pages on their own when the phone is in
   dark mode, unless the site has its own dark mode in its styles; this rule
   tells them it does (the switch above), so «فاتح» stays light. The same
   is in the <meta name="color-scheme"> of each page. */
html { color-scheme: only light; }
@media (prefers-color-scheme: dark) {
  html:not(.ui-dark) { color-scheme: only light; }
}