/* Palette from the Model Colors iOS app: primary blue #004D78, emphasis
   orange #FE9700. The app uses blue emphasis in light mode and orange in dark
   mode — mirrored here via --accent. */
:root { color-scheme: light dark; --fg: #1a1a1a; --bg: #ffffff; --brand: #004D78; --accent: #004D78; }
@media (prefers-color-scheme: dark) { :root { --fg: #eee; --bg: #161616; --accent: #FE9700; } }
/* An explicit choice (set by theme.js) overrides the system setting. The
   attribute selectors outrank the media query above by specificity. */
:root[data-theme="light"] { color-scheme: light; --fg: #1a1a1a; --bg: #ffffff; --accent: #004D78; }
:root[data-theme="dark"]  { color-scheme: dark;  --fg: #eee;    --bg: #161616; --accent: #FE9700; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.6; }
.site-header { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(128,128,128,.25); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.logo { height: 40px; width: 40px; border-radius: 9px; }
.brand-title { font-weight: 700; font-size: 1.25rem; }
.site-nav { display: flex; gap: 1rem; }
.site-nav a { text-decoration: none; color: inherit; }
.site-nav a.active { color: var(--accent); font-weight: 600; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.theme-toggle { font: inherit; font-size: .85rem; cursor: pointer; padding: .25rem .6rem; border: 1px solid rgba(128,128,128,.4); border-radius: 6px; background: transparent; color: inherit; }
.lang-switcher { position: relative; font-size: .85rem; }
.lang-switcher > summary { cursor: pointer; list-style: none; text-transform: uppercase; padding: .25rem .55rem; border: 1px solid rgba(128,128,128,.4); border-radius: 6px; user-select: none; }
.lang-switcher > summary::-webkit-details-marker { display: none; }
.lang-switcher > summary::after { content: " \25be"; opacity: .7; }
.lang-menu { position: absolute; right: 0; margin: .35rem 0 0; padding: .35rem; list-style: none; background: var(--bg); border: 1px solid rgba(128,128,128,.4); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); max-height: 60vh; overflow-y: auto; min-width: 12rem; z-index: 10; }
.lang-menu li { margin: 0; }
.lang-menu a { display: block; padding: .3rem .6rem; border-radius: 4px; text-decoration: none; color: inherit; white-space: nowrap; }
.lang-menu a:hover { background: rgba(128,128,128,.15); }
.lang-menu a.active { color: var(--accent); font-weight: 700; }
.content { max-width: 44rem; margin: 0 auto; padding: 2rem 1.5rem; }
.content a { color: var(--accent); text-underline-offset: 2px; }
.content img { max-width: 100%; height: auto; }
.content table { border-collapse: collapse; }
.content th, .content td { border: 1px solid rgba(128,128,128,.4); padding: .3rem .6rem; }
.site-footer { padding: 2rem 1.5rem; border-top: 1px solid rgba(128,128,128,.25); font-size: .85rem; opacity: .8; }