:root {
  --blue:        #0076FF;
  --blue-soft:   #52AEFF;
  --blue-text:   #005ECC;
  --orange-text: #B24513;
  --yellow-text: #C6A034;

  --bg:          #ebebeb;
  --sheet:       #f4f6f8;
  --surface:     #ffffff;
  --line:        #d0d6dc;
  --line-soft:   #e0e4e8;
  --ink:         #2a2a2a;
  --ink-2:       #444444;
  --ink-3:       #666666;

  --font-sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --step-0: 0.85rem;
  --step-1: 1rem;
  --step-2: 1.2rem;
  --step-3: 1.5rem;
  --step-4: 2rem;
  --step-5: 2.5rem;
  --space-1: 0.3rem;
  --space-2: 0.6rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.5rem;

  --radius: 4px;

  --mdc-theme-primary: var(--blue);
  --mdc-theme-secondary: var(--blue);
  --mdc-theme-on-primary: #ffffff;
  --mdc-theme-on-secondary: #ffffff;
  --mdc-theme-surface: var(--surface);
  --mdc-theme-on-surface: #000000;
  --mdc-theme-background: var(--bg);
  --mdc-theme-error: var(--orange-text);

  --mdc-theme-text-primary-on-background: var(--ink);
  --mdc-theme-text-secondary-on-background: var(--ink-3);
  --mdc-theme-text-hint-on-background: var(--ink-3);
  --mdc-theme-text-disabled-on-background: #9e9e9e;
  --mdc-theme-text-primary-on-light: var(--ink);
  --mdc-theme-text-secondary-on-light: var(--ink-3);
  --mdc-theme-text-hint-on-light: var(--ink-3);
  --mdc-theme-text-disabled-on-light: #9e9e9e;

  --mdc-typography-font-family: var(--font-sans);
  --mdc-typography-headline3-font-size: var(--step-5);
  --mdc-typography-headline3-line-height: 2.875rem;
  --mdc-typography-headline3-font-weight: 600;
  --mdc-typography-headline4-font-size: var(--step-4);
  --mdc-typography-headline4-line-height: 2.3rem;
  --mdc-typography-headline4-font-weight: 600;
  --mdc-typography-headline5-font-size: var(--step-3);
  --mdc-typography-headline5-line-height: 1.8rem;
  --mdc-typography-headline5-font-weight: 600;
  --mdc-typography-headline6-font-size: var(--step-2);
  --mdc-typography-headline6-line-height: 1.5rem;
  --mdc-typography-headline6-font-weight: 600;
  --mdc-typography-body1-font-size: var(--step-1);
  --mdc-typography-body2-font-size: var(--step-0);

  --mdc-layout-grid-margin-desktop: 0px;
  --mdc-layout-grid-margin-tablet: 0px;
  --mdc-layout-grid-margin-phone: 0px;
  --mdc-layout-grid-gutter-desktop: var(--space-3);
  --mdc-layout-grid-gutter-tablet: var(--space-3);
  --mdc-layout-grid-gutter-phone: var(--space-3);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5em;
  color: var(--ink);
  position: relative;
}

a { color: var(--blue); }
a:visited { color: var(--blue); }
a:hover { color: var(--blue-text); }

h1, h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-2);
}
h1 { font-size: var(--step-5); line-height: 1.15; }
h2 { font-size: var(--step-4); line-height: 1.2; }

main {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: var(--space-3) 0;
}

.crumbs { color: var(--ink-3); font-size: var(--step-1); margin: 0 0 var(--space-3); }

.page-head { margin: 0 0 var(--space-4); }
.page-head h1 { margin: 0; }

header {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-3);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.brand {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-4);
  color: var(--blue);
  text-decoration: none;
  line-height: 1.1;
}
.brand:visited { color: var(--blue); }
.tagline { color: var(--ink-3); font-weight: 400; }

.alert-banner {
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 0;
  border: 1px solid var(--yellow-text);
  border-radius: var(--radius);
  background: #fbf6e3;
  color: var(--ink-2);
  font-size: var(--step-0);
}

footer {
  color: var(--ink-3);
  font-size: var(--step-0);
  margin-top: var(--space-4);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}
footer a, footer a:hover, footer a:visited { color: inherit; }
footer p { margin: 0; }
.footer-fine {
  font-size: 0.75rem;
  color: var(--ink-3);
}

input.ctl-radio, input.ctl-check {
  accent-color: var(--blue);
  margin: 0 0.5em 0 0;
  vertical-align: middle;
  cursor: pointer;
}

a.mdc-card:focus-visible {
  outline: 2px solid var(--mdc-theme-primary);
  outline-offset: 2px;
}

img.placeholder {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: var(--space-4) auto;
  image-rendering: pixelated;
}

.notice {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--yellow-text);
  border-radius: var(--radius);
  background: #fbf6e3;
  margin: 0 0 var(--space-4);
}

.cardlink.mdc-card { overflow: hidden; text-decoration: none; }
.cardlink .mdc-card__primary-action {
  display: block;
  color: inherit;
  text-decoration: none;
}

.cardlink__img { display: block; width: 100%; height: auto; }

.cardlink__body {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.cardlink__title { font-weight: 600; font-size: var(--step-2); color: var(--ink); }
.cardlink__meta { color: var(--ink-3); font-size: var(--step-0); }
.cardlink__body .badge { margin-left: auto; }
.cardlink__sub {
  display: block;
  padding: 0 var(--space-4) var(--space-3);
  color: var(--ink-3);
  font-size: var(--step-0);
}

.cardlink--plain .mdc-card__primary-action { padding: var(--space-3) var(--space-4); }

@media only screen and (max-width: 800px) {
  .cardlink__body { padding: var(--space-2) var(--space-3); }
  .cardlink__title { font-size: var(--step-1); }
  .cardlink__sub { padding: 0 var(--space-3) var(--space-3); }
}


.badge {
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 var(--space-1);
  font-size: var(--step-0);
}

.field-note {
  margin: var(--space-1) 0 0;
  color: var(--ink-3);
  font-size: var(--step-0);
  line-height: 1.4;
}

.summary-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  font-size: var(--step-0);
}
.summary-list dt { color: var(--ink-3); }
.summary-list dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.summary-list .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.hint { color: var(--ink-3); font-size: var(--step-0); }
.warn { color: var(--orange-text); font-size: var(--step-0); }

@media only screen and (max-width: 800px) {
  body {
    width: 100%;
  }
  .brand { font-size: var(--step-3); }
  h1 { font-size: var(--step-4); }
}