/* Shared look for every office page (same as the demo). Pages keep their own layout rules and
   read these color tokens. Light/dark: follows the computer unless the toggle picks one. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --bg:#f3f5f7; --card:#ffffff; --text:#141d29; --muted:#4a5565; --line:#d9dfe6; --lane:#eef1f4; --soft:#eef1f4;
  --accent:#1f5fbf; --accent-bg:#e3ecfa; --ok:#11704a; --ok-bg:#ddf1e6; --warn:#8f4c05; --warn-bg:#fbebd2;
  --bad:#a8231b; --bad-bg:#fbe3e1; --ex-bg:#e4e8ed; --done:#6b7684; --plan:#c4ccd6;
  --sans:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0f141a; --card:#18202a; --text:#eef2f6; --muted:#b4bfcc; --line:#2e3946; --lane:#202a35; --soft:#202a35;
  --accent:#8ab4f5; --accent-bg:#1c2d48; --ok:#5fd9a0; --ok-bg:#153527; --warn:#f6b45e; --warn-bg:#3a2b15;
  --bad:#ff958c; --bad-bg:#40201d; --ex-bg:#2b3644; --done:#8793a1; --plan:#3b4756; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg:#0f141a; --card:#18202a; --text:#eef2f6; --muted:#b4bfcc; --line:#2e3946; --lane:#202a35; --soft:#202a35;
  --accent:#8ab4f5; --accent-bg:#1c2d48; --ok:#5fd9a0; --ok-bg:#153527; --warn:#f6b45e; --warn-bg:#3a2b15;
  --bad:#ff958c; --bad-bg:#40201d; --ex-bg:#2b3644; --done:#8793a1; --plan:#3b4756; color-scheme: dark; }

/* Page rules like `.actions { display:flex }` must not un-hide elements marked hidden. */
[hidden] { display: none !important; }

body { font-family: var(--sans) !important; font-size: 14.5px; background: var(--bg); color: var(--text); }
/* Small print stays readable: never below 13px, and grey text has strong contrast in both themes. */
.note, .small { font-size: 13px !important; }
.muted { color: var(--muted); }
code, .mono, .num { font-family: var(--mono); }
header h1 { font-weight: 600; letter-spacing: -0.01em; }
header a { font-weight: 500; text-decoration: none; padding: 4px 8px; border-radius: 6px; }
header a:hover { background: var(--accent-bg); }
header a[aria-current="page"] { background: var(--accent-bg); color: var(--accent); }
/* Filled buttons: white text on the dark-blue accent in light mode, dark text on the light-blue accent in dark mode. */
button.primary, .primary, button.on, .seg button.on { color: #fff; }
:root[data-theme="dark"] :is(button.primary, .primary, button.on, .seg button.on) { color: #0f141a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(button.primary, .primary, button.on, .seg button.on) { color: #0f141a; } }

.theme-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.theme-toggle button { border: none; border-radius: 0; padding: 5px 9px; font-size: 13px; background: var(--card); color: var(--text); cursor: pointer; }
.theme-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--card); }

/* Text only screen readers hear. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }