/* The corporate design of this installation (ADR-0052). */
/* The theme swiss (ADR-0085). */
/* Swiss: the design system of the Swiss Confederation for its websites
   (github.com/swiss/designsystem, MIT; ADR-0120). Its red for links and
   marks, its slate for actions and the bars, grey text, white areas,
   small radii and soft shadows, and its typeface Noto Sans, which ships
   with the UI (assets/fonts, SIL Open Font License 1.1). Light, and a
   dark scheme from the same slate. */
@font-face { font-family: "Noto Sans"; src: url("/assets/fonts/noto-sans-400-normal.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fonts/noto-sans-700-normal.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fonts/noto-sans-400-italic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fonts/noto-sans-700-italic.woff2") format("woff2"); font-weight: 600 900; font-style: italic; font-display: swap; }
:root {
  /* primary: red 50 #ffedee, 600 #d8232a, 700 #bf1f25, 800 #99191e;
     secondary: slate 50 #f0f4f7, 100 #dfe4e9, 500 #46596b, 600 #2f4356, 700 #263645;
     text: grey 200 #e5e7eb, 300 #d1d5db, 500 #6b7280, 800 #1f2937. */
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f0f4f7; --border: #d1d5db; --border-strong: #6b7280;
  --text: #1f2937; --muted: #6b7280;
  --accent: #d8232a; --accent-hover: #99191e; --accent-soft: #ffedee; --accent-ink: #ffffff;
  --row-hover: #f0f4f7; --radius: 3px; --radius-sm: 2px;
  --shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 5px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 2px 6px -1px rgba(0, 0, 0, 0.06), 0 5px 20px -3px rgba(0, 0, 0, 0.08);
  --font-sans: "Noto Sans", Verdana, sans-serif;
  --ch-slate: #46596b; --ch-slate-hover: #2f4356; --ch-bar: #2f4356;
}
/* The bars: a slate strip above a white header with a thin rule, and a
   slate footer, as on the Confederation's sites. */
.top { background: #ffffff; border-top: 6px solid var(--ch-bar); border-bottom: 1px solid #e5e7eb; box-shadow: none; }
#footer { background: var(--ch-bar); color: #ffffff; padding-top: 14px; padding-bottom: 14px; }
#footer a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
/* Links in the text are red and underlined. */
.ProseMirror a, .pm-editor a, .notice a { text-decoration: underline; text-underline-offset: 2px; }
.ProseMirror a:hover, .pm-editor a:hover { color: var(--accent-hover); }
/* Actions (btn--filled): the main one filled in slate; the others
   outlined in red (btn--outline). Corners as small as the system's. */
button, .button { border-radius: var(--radius-sm); box-shadow: none; }
:is(.page-head, .card, .welcome, dialog, form) :is(button, .button):not(.link):not(.icon-btn):not(.segment):not(.watch-bell):not(.pm-toolbar *):not(.primary):not([type=submit]):not(.danger) {
  background: var(--surface); color: var(--accent); border-color: var(--accent); }
:is(.page-head, .card, .welcome, dialog, form) :is(button, .button):not(.link):not(.icon-btn):not(.segment):not(.watch-bell):not(.pm-toolbar *):not(.primary):not([type=submit]):not(.danger):hover {
  background: var(--surface); color: var(--accent-hover); border-color: var(--accent-hover); }
button.primary, .button.primary, button[type=submit]:not(.link):not(.secondary):not(.danger), #nav-new {
  background: var(--ch-slate); border-color: var(--ch-slate); color: #ffffff; }
button.primary:hover, .button.primary:hover, button[type=submit]:not(.link):not(.secondary):not(.danger):hover, #nav-new:hover {
  background: var(--ch-slate-hover); border-color: var(--ch-slate-hover); color: #ffffff; }
#nav-new, #nav .search input, .subnav a { border-radius: var(--radius-sm); }
.segmented .segment[aria-pressed="true"] { background: var(--ch-slate); border-color: var(--ch-slate); color: #ffffff; }
/* Fields: a fine grey frame and a small shadow. */
input, select, textarea { border-color: #6b7280; border-radius: 1px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
/* Tables: a slate-tinted head in small capitals. */
th { background: #f0f4f7; color: #374151; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.02em; }
td { color: #374151; }
table.props th { background: none; text-transform: none; letter-spacing: 0; font-size: inherit; }
/* Headings bold and dark; the page title carries the red mark. */
h1, h2, h3 { font-weight: 700; color: #1f2937; letter-spacing: 0; }
h1 { border-bottom: 3px solid var(--accent); display: inline-block; padding-bottom: 4px; }
.card, .welcome, .home-tile, .space-tile, .tree-box, .board-column { border-color: #e5e7eb; }
.home-tile:hover, .space-tile:hover { box-shadow: var(--shadow-lg), inset 0 -3px 0 var(--accent); }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131b22; --surface: #1c2834; --surface-2: #263645; --border: #46596b; --border-strong: #828e9a;
    --text: #f0f4f7; --muted: #acb4bd;
    --accent: #fc656b; --accent-hover: #fa9da1; --accent-soft: #3a1a1d; --accent-ink: #131b22;
    --row-hover: #263645; --ch-slate: #596978; --ch-slate-hover: #828e9a; --ch-bar: #0d1318;
  }
  .top { background: #1c2834; border-bottom-color: #46596b; }
  th { background: #263645; color: #dfe4e9; }
  td { color: #dfe4e9; }
  h1, h2, h3 { color: #f0f4f7; }
  input, select, textarea { border-color: #828e9a; }
  :is(.page-head, .card, .welcome, dialog, form) :is(button, .button):not(.link):not(.icon-btn):not(.segment):not(.watch-bell):not(.pm-toolbar *):not(.primary):not([type=submit]):not(.danger) { background: transparent; }
  .card, .welcome, .home-tile, .space-tile, .tree-box, .board-column { border-color: #46596b; }
}

:root {
  --font-sans: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
}
body { font-family: var(--font-sans); }