@font-face {
  font-family: "Figtree";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-latin-400-normal.7bfd10a3def3.woff2") format("woff2");
}

@font-face {
  font-family: "Figtree";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/figtree-latin-600-normal.4376f5953b85.woff2") format("woff2");
}

@font-face {
  font-family: "Figtree";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/figtree-latin-700-normal.70aaa6879de5.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2");
}

:root {
  --ink: #171a20;
  --muted: #5c5e62;
  --line: #e8e8e8;
  --surface: #ffffff;
  --surface-subtle: #f4f4f4;
  --red: #a12622;
  --red-soft: #fbeceb;
  --yellow: #835b0d;
  --yellow-soft: #fff3cd;
  --green: #20603d;
  --green-soft: #e6f2ea;
  /* Status colours of the work list (#270), one set for every page that follows it:
     red always first, amber important, petrol other cases, grey unknown, indigo forced
     (also on the other pages: one colour for a forced point, #404). */
  --crit: #b4381f;
  --crit-soft: #fbe6e1;
  --amber: #8a5900;
  --amber-soft: #fbefd6;
  --petrol: #0f6b74;
  --petrol-soft: #dcefef;
  /* Design v4 of "I dag" (#316): one accent colour, only for choosing and acting. Links,
     the active menu item, folds and the focus ring use it on every page (#404). */
  --accent: #0f766e;
  --accent-hover: #0b5d56;
  --accent-soft: #e6f3f1;
  --unknown: #5f6b75;
  --unknown-soft: #e7ebee;
  --indigo: #4f5b9c;
  --indigo-soft: #e6e8f5;
  --radius: 6px;
  --width: min(1180px, calc(100% - 32px));
  /* Small, calm motion (#359, Johnny 18 Oct 2026: "animation er helst"): only height,
     opacity, transform and visibility, never a loop, and none at all when the user asks
     for reduced motion (the block below). Motion never signals how serious something is. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit; /* iPhone Safari otherwise uses its own text colour on buttons (#265) */
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-header {
  border-bottom: 1px solid var(--line);
}

.header-bar {
  width: var(--width);
  margin: 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.wordmark {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
}

.context {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.context-label {
  color: var(--muted);
  font-size: 0.875rem;
}

.context-name {
  font-weight: 600;
}

/* "Kun læst" and "Log ud" side by side at the top right (#277). */
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* "Kun læst" on every page (#270): Verner never changes anything in the CTS. */
/* "Kun læst" opens a short explanation (design v4, #316): neutral grey, the accent while open. */
.read-only { position: relative; }
.read-only-badge {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-subtle);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.read-only-badge::-webkit-details-marker { display: none; }
.read-only[open] .read-only-badge { border-color: var(--accent); color: var(--accent); }
.read-only-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 5;
  width: min(300px, calc(100vw - 32px));
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  font-size: 16px;
}

.quiet-button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 6px 12px;
  cursor: pointer;
}

.primary-button {
  border: 0;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
}

.primary-button:hover {
  background: var(--accent-hover);
}

.primary-nav {
  width: var(--width);
  margin: 0 auto;
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.nav-item {
  padding: 10px 12px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.nav-item-active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* "Mere" holds Tvangsstyring, Kørsler and Mail on a phone only (#414). */
.nav-more { display: none; position: relative; }
.nav-more > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; cursor: pointer; list-style: none; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); }
.nav-more[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.nav-more-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 4px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.nav-more-list .nav-item { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-bottom: 0; border-left: 3px solid transparent; }
.nav-more-list .nav-item-active { border-left-color: var(--accent); }

.app-main {
  width: var(--width);
  margin: 0 auto;
  padding: 24px 0 64px;
}

.app-footer {
  width: var(--width);
  margin: 0 auto;
  padding: 16px 0 32px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.app-footer p {
  margin: 0;
}

.view-as-form {
  margin-top: 16px;
}

.view-as-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.view-as-choices button,
.view-as-banner button {
  font-size: 16px;
  min-height: 44px;
}

.view-as-choices button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

.view-as-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: var(--yellow-soft);
  border: 1px solid #e6cf8f;
  border-radius: var(--radius);
}

.view-as-banner p {
  margin: 0;
  font-weight: 600;
}

.app-version {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

h1 {
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 8px;
}

h2 {
  font-size: 1.25rem;
  margin: 32px 0 12px;
}

h3 {
  font-size: 1.05rem;
  margin: 0 0 4px;
}

.lead {
  font-size: 1.1rem;
  margin: 0 0 8px;
}

.meta,
.muted,
.breadcrumb {
  color: var(--muted);
}

.breadcrumb {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.9rem;
  white-space: nowrap;
}

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: 1px;
}

.badge-completed {
  background: var(--green-soft);
  color: var(--green);
}

.badge-degraded {
  background: var(--yellow-soft);
  color: var(--yellow);
}

.badge-failed {
  background: var(--red-soft);
  color: var(--red);
}

.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--muted);
}

.notice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin: 16px 0;
}

.notice-warning {
  background: var(--yellow-soft);
  border: 1px solid #e6cf8f;
}

.messages {
  margin-bottom: 16px;
}

.message {
  padding: 8px 12px;
  border-radius: var(--radius);
  margin: 0 0 8px;
}

.message-success {
  background: var(--green-soft);
}

.message-error {
  background: var(--red-soft);
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 8px;
}

.metric {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.metric-alarms_red {
  border-left: 6px solid var(--red);
}

.metric-alarms_yellow {
  border-left: 6px solid #d9a21b;
}

.metric-manual_count {
  border-left: 6px solid var(--indigo);
}

.metric-label {
  color: var(--muted);
  font-size: 0.9rem;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
}

.metric-change {
  color: var(--muted);
  font-size: 0.875rem;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

th {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface-subtle);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.num {
  text-align: right;
  white-space: nowrap;
}

.reasons {
  margin: 0;
  padding-left: 18px;
}

.score {
  font-weight: 600;
}

.empty {
  padding: 16px;
  background: var(--surface-subtle);
  border-radius: var(--radius);
}

.quiet-list {
  margin-top: 16px;
}

.quiet-list summary {
  /* A tap target on a phone: at least 44 px, and the arrow stays (list-item). */
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  color: var(--accent);
}

.quiet-list ul {
  columns: 3 220px;
  padding-left: 18px;
}

.explain {
  margin-top: 32px;
  padding: 16px 20px;
  background: var(--surface-subtle);
  border-radius: var(--radius);
}

.explain h2 {
  margin-top: 0;
}

.finding-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.finding-alarm_red {
  border-left: 6px solid var(--red);
}

.finding-alarm_yellow {
  border-left: 6px solid #d9a21b;
}

.finding-manual_override {
  border-left: 6px solid var(--indigo);
}

.finding-summary {
  font-size: 1.05rem;
  margin: 4px 0 12px;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0 0 12px;
}

.facts dt {
  color: var(--muted);
  font-size: 0.875rem;
}

.facts dd {
  margin: 0;
}

.hint {
  background: var(--surface-subtle);
  padding: 8px 12px;
  border-radius: var(--radius);
}

.responses h4 {
  margin: 12px 0 4px;
}

.response-form {
  display: grid;
  gap: 8px;
  max-width: 560px;
  margin-top: 12px;
}

.response-form select,
.response-form textarea,
.login input {
  width: 100%;
  padding: 8px;
  border: 1px solid #c9c9c9;
  border-radius: var(--radius);
}

.response-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.response-form button {
  justify-self: start;
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.filter-tabs a {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
}

.filter-tabs .filter-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.closed-list {
  padding-left: 18px;
}

.login {
  max-width: 380px;
  margin: 48px auto;
}

.login form {
  display: grid;
  gap: 6px;
}

.login button {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .metric-strip {
    grid-template-columns: 1fr;
  }

  .header-bar {
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 0;
  }

  /* A phone: "Verner", "Kun læst" and "Log ud" on the first line, customer and CTS under them on one line (#277, #414). */
  .header-bar .context {
    order: 1;
    flex-basis: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
  }

  /* Six tabs do not fit one row at 360 px: four on one row, the rest one tap away under "Mere" (#414). */
  .primary-nav {
    flex-wrap: wrap;
    overflow: visible;
  }

  .nav-wide {
    display: none;
  }

  .nav-more {
    display: block;
  }

  h1 {
    font-size: 1.5rem;
  }

  .rank-table thead {
    display: none;
  }

  .rank-table tr {
    display: grid;
    /* "Tvangsstyret" is the longest label: give its column room at 360 px. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 4fr) minmax(0, 3fr);
    padding: 12px;
    border-bottom: 1px solid var(--line);
  }

  .rank-table td {
    border: 0;
    padding: 2px 0;
  }

  .rank-table .building-cell,
  .rank-table .reasons-cell {
    grid-column: 1 / -1;
  }

  .rank-table td.num {
    text-align: left;
    padding-top: 6px;
  }

  .rank-table td[data-label="Røde"] {
    grid-column: 1;
  }

  .rank-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.875rem;
    color: var(--muted);
  }
}

.muted { color: var(--muted); font-size: 14px; }

/* M3: single alarms and forced points, for technicians on a phone.
   Rules (AGENTS.md, "Sprog i produktet"): body text at least 16 px, card
   titles 18-20 px, no text under 14 px, tap targets at least 44 px high, no
   horizontal scroll at 360 px. */
.items, .item-card, .summary { overflow-wrap: anywhere; }
.summary { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 20px; background: var(--surface-subtle); font-size: 16px; }
.summary p { margin: 4px 0; }
.summary-big { font-size: 19px; font-weight: 600; }
.item-group h2 { margin-top: 24px; font-size: 19px; }
.item-card { border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 12px 16px; margin: 10px 0; background: var(--surface); font-size: 16px; }
.item-card.item-override { border-left-color: var(--indigo); }
.item-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; }
.item-sub { margin: 2px 0 8px; font-size: 16px; color: var(--muted); }
.item-tags { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.item-tags .tag { font-size: 14px; font-weight: 600; padding: 3px 10px; border-radius: 6px; }
.tag-red { background: var(--red-soft); color: var(--red); }
.tag-grey { background: var(--surface-subtle); color: var(--ink); border: 1px solid var(--line); }
.tag-purple { background: var(--indigo-soft); color: var(--indigo); }
.item-line { margin: 4px 0; font-size: 16px; }
.cts-details, .item-answer, .item-collapsed { margin: 8px 0 0; }
.cts-details summary, .item-answer summary, .item-collapsed summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 16px;
}
.cts-details summary, .item-answer summary { color: var(--accent); }
.cts-details ul { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.item-facts { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 6px 0 0; }
.item-facts dt { font-size: 14px; color: var(--muted); }
.item-facts dd { margin: 0; font-size: 14px; }
.item-collapsed { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px; margin: 14px 0; background: var(--surface-subtle); }
.item-collapsed summary { font-weight: 600; }
.plain-list { margin: 4px 0 10px; padding-left: 18px; font-size: 16px; }
.plain-list li { margin: 4px 0; }
.item-response select, .item-response textarea { width: 100%; max-width: 100%; font-size: 16px; min-height: 44px; }
.item-response button, .primary-button, .quiet-button { min-height: 44px; }
.history .table-wrap { overflow-x: auto; }
@media (min-width: 700px) {
  .item-facts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* Mine notifikationer */
.notification-form { margin: 16px 0 24px; }
.choice { padding: 8px 16px; background: var(--surface); }
.choice-label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 18px; font-weight: 600; cursor: pointer; }
.choice-label input[type="checkbox"] { width: 24px; height: 24px; flex: none; margin: 0; }
.choice-help { margin: 0 0 4px; font-size: 16px; color: var(--muted); }
.notice { border-left: 4px solid var(--red); padding: 8px 12px; font-size: 16px; }

/* Tvangsstyring på tværs af bygninger (#182), same rules as the building page. */
.override-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 8px 0; }
.override-facts dt { font-size: 14px; color: var(--muted); }
.override-facts dd { margin: 0; font-size: 16px; }
.override-facts .wide { grid-column: 1 / -1; }
.card-link, .metric-link { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
.metric-link { margin-top: 4px; }
@media (min-width: 700px) {
  .override-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .override-facts .wide { grid-column: auto; }
}
.plant-note { color: var(--muted); }

/* Verner's assessment per case (#223), same rules as the alarm cards. */
.cases { margin: 0 0 24px; overflow-wrap: anywhere; }
.cases h2 { font-size: 19px; }
.case-card { border-left: 1px solid var(--line); }  /* red means alarm, indigo forced; a case has no stripe (#404) */
.case-do { font-size: 17px; }
.case-basis h4 { margin: 10px 0 2px; font-size: 16px; }
.case-alarms { padding-left: 0; list-style: none; }
.case-alarms li { margin: 0; }
/* The technician's judgement per case (#247): the review sheet's three questions. */
.case-judgement { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.judgement-form textarea { width: 100%; max-width: 100%; font-size: 16px; min-height: 44px; }
.judgement-form button { min-height: 44px; }
.judgement-choices { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.judgement-choices legend { font-weight: 600; padding: 0; margin-bottom: 2px; }
.judgement-choices .choice-label { display: flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 400; gap: 8px; margin: 0; }
.judgement-choices input[type="radio"] { width: 22px; height: 22px; margin: 0; }

/* The work list, design v4 (#316, docs/design/i-dag-v4 on PR #315): three numbers, one ranked
   list, the chosen case beside it. One accent colour for choosing and acting; no severity
   colours. Text at least 14 px, buttons and folds at least 44 px (AGENTS.md). On a phone
   the list and the case take turns. */
.work { overflow-wrap: anywhere; }
.work a:not(.work-row):not(.more-link):not(.case-nav-button):not(.all-alarms):not(.pill), .work summary { color: var(--accent); }
.all-alarms-bar { margin: 8px 0 16px; }
.all-alarms { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 10px; background: var(--surface); color: var(--accent); font-weight: 600; text-decoration: none; }
.all-alarms:hover { background: var(--accent-soft); color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; }
.stat { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.stat-wide { grid-column: 1 / -1; }
.stat-label { font-size: 14px; font-weight: 600; color: var(--muted); }
.stat-number { font-size: 40px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-note { font-size: 14px; color: var(--muted); }
.stat-bar { position: relative; display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--line); }
.stat-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--ink); }
.noise-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 20px; font-size: 14px; color: var(--muted); }
.noise-line p { margin: 0; }
.noise-line strong { color: var(--ink); }
.work-warning { display: block; border-left-color: var(--muted); }
.work-split { display: grid; gap: 24px; align-items: start; }
.work-list, .work-detail { min-width: 0; }
.work-group { margin: 0 0 24px; }
.work-group-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.work-group-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.work-count { font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0; }
.work-group-note { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
/* "Alle alarmer" as a link beside "Vigtigt i dag" on a phone, one tap away (Johnny, 5 Nov 2026, #414). */
.all-alarms-link { display: none; }
.unseen-legend { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.unseen-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.work-rows { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.work-rows > * + * { border-top: 1px solid var(--line); }
.work-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; min-height: 64px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.work-row:hover { background: var(--surface-subtle); color: var(--ink); }
.work-row-selected, .work-row-selected:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
/* The rows follow the list's rounded corners, so a chosen first or last row has no square corner (#316). */
.work-rows > :first-child { border-top-left-radius: 11px; border-top-right-radius: 11px; }
.work-rows > :last-child { border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; }
/* Focus stays inside the row: the list clips anything outside it. A browser can show focus on
   the row the page opens at, so the chosen row's focus is a second green ring inside its edge,
   not a frame the list would clip. */
.work-row:focus-visible, .more-link:focus-visible, .more-buildings > summary:focus-visible { outline-offset: -3px; }
.work-row-selected:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.work-row .rank { position: relative; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #c9c9c9; border-radius: 50%; background: var(--surface-subtle); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.work-row-selected .rank { border-color: var(--accent); background: var(--accent); color: #fff; }
.work-row-unseen .rank::after { content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border: 2px solid var(--surface); border-radius: 50%; background: var(--ink); }
.work-row-main { min-width: 0; }
.work-row-title.item-title { display: block; font-size: 18px; font-weight: 500; line-height: 1.3; }
.work-row-unseen .work-row-title.item-title { font-weight: 600; }
.work-row-meta { display: block; font-size: 14px; color: var(--muted); }
/* Many buildings share the same alarm title: the building reads first, in ink (#414). */
.work-row-building { color: var(--ink); font-weight: 600; }
.work-row-side { display: grid; grid-auto-flow: column; gap: 16px; align-items: start; text-align: right; }
.work-row-age { font-size: 14px; font-weight: 600; white-space: nowrap; }
.work-row-when { display: block; font-weight: 400; color: var(--muted); }
.work-row-value { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.work-row-setpoint { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.more-link, .more-buildings > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 14px; color: var(--ink); text-decoration: none; cursor: pointer; }
.more-link:hover, .more-buildings > summary:hover { background: var(--surface-subtle); color: var(--ink); }
.more-name { display: block; font-weight: 600; }
.more-note { display: block; font-size: 14px; color: var(--muted); }
.more-link-zero { min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
.more-link-zero .more-note { display: none; }
.stats-line { display: none; }
.more-count { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.more-count::after { content: "›"; margin-left: 12px; color: var(--muted); }
.more-buildings > summary { list-style: none; }
.more-buildings > summary::-webkit-details-marker { display: none; }
.more-buildings ul { margin: 0; padding: 0 14px 12px 30px; }
.more-buildings li { padding: 4px 0; }
.work-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; min-height: 56px; padding: 12px 16px; font-size: 16px; }
.work-line-why { color: var(--muted); }
.work-line-detail { display: block; font-size: 14px; color: var(--muted); }
.work-case { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-size: 16px; }
.work-case > * { margin: 0; padding: 16px 20px; }
.work-case > * + * { border-top: 1px solid var(--line); }
.work-back { display: none; }
.case-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; background: var(--surface-subtle); border-radius: 16px 16px 0 0; }
.case-position { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.case-nav-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.case-nav-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid #c9c9c9; border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; }
.case-nav-button:hover { border-color: var(--accent); color: var(--ink); }
.case-nav-button.case-next { border-color: var(--accent); background: var(--accent); color: #fff; }
.case-nav-button.case-next:hover { color: #fff; }
.case-head > * { margin: 0; }
.unsee { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.unsee .case-nav-button { font: inherit; font-weight: 600; cursor: pointer; }
.unsee-note { font-size: 14px; color: var(--muted); }
.work-where { font-size: 14px; color: var(--muted); }
.work-case-title { margin-top: 4px; }
.case-part > * { margin: 0; }
.case-part > * + * { margin-top: 10px; }
.case-part-head { font-size: 16px; font-weight: 600; color: var(--ink); }
.case-value { line-height: 1.2; }
.work-meter-value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.work-meter-setpoint { font-size: 14px; color: var(--muted); }
.work-meter { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--line); }
.work-meter-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--muted); }
.work-meter-mark { position: absolute; top: -4px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.work-meter-legend { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.case-alarm { font-size: 14px; color: var(--muted); }
.suspicion-pill { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 1px 10px; border: 1px solid #c9c9c9; border-radius: 6px; background: var(--surface-subtle); font-size: 14px; font-style: normal; font-weight: 600; }
.suspicion-pill::before { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 14px; line-height: 1; }
.suspicion .verner-figure { display: inline-block; margin-right: 6px; vertical-align: -4px; }
.work-important-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.work-badge { padding: 2px 10px; border: 1px solid #c9c9c9; border-radius: 6px; background: var(--surface-subtle); color: var(--ink); font-size: 14px; font-weight: 600; }
.work-todo { padding: 16px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); }
.work-todo-label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 600; color: var(--accent); }
.work-todo-text { margin: 4px 0 0; font-size: 18px; font-weight: 600; line-height: 1.45; }
.case-caution { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(15, 118, 110, .25); font-size: 16px; }
/* Importance, pause and "ikke set" folded under the main question (#414). */
.learn-more { margin-top: 12px; }
.learn-more > summary { list-style: none; }
.learn-more > summary::-webkit-details-marker { display: none; }
.importance { margin-top: 16px; }
.importance-label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--muted); }
.importance .item-line { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.work-why > summary, .learn-more > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--accent); }
.work-why > summary::before, .learn-more > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(-45deg); }
.work-why[open] > summary::before, .learn-more[open] > summary::before { transform: rotate(45deg); }
.work-why > * + * { margin-top: 10px; }
.work-why .card-link { display: block; }
.case-facts { margin: 0; padding-left: 20px; }
.case-facts li + li { margin-top: 4px; }
.work-why-rows { display: grid; gap: 10px; margin: 0; }
.work-why-rows dt { font-size: 14px; font-weight: 600; color: var(--muted); }
.work-why-rows dd { margin: 0; }
/* The Verner figure (#273): only beside Verner's own words, never the CTS's. It does not move. */
.verner-figure { flex: none; display: block; }
.empty-verner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 18px; margin: 16px 0 24px; }
.empty-verner p { margin: 0; }
.login .verner-figure { margin-bottom: 12px; }
.work-judgement { margin: 0; padding: 0; border: 0; }
.work-judgement-head { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--muted); }
.judgement-buttons { min-width: 0; margin: 0; padding: 0; border: 0; }
.judgement-buttons legend { margin-bottom: 8px; padding: 0; font-size: 16px; font-weight: 600; }
.judgement-row { display: flex; gap: 8px; }
.judge-button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; border: 1px solid #c9c9c9; border-radius: 10px; background: var(--surface); font-size: 16px; font-weight: 600; cursor: pointer; }
.judge-button:hover { border-color: var(--accent); }
.judge-button.judge-chosen { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.judgement-texts { display: grid; gap: 8px; }
.judgement-texts label { display: block; margin-bottom: 2px; font-weight: 600; }
.judgement-texts textarea { width: 100%; max-width: 100%; min-height: 44px; padding: 8px; border: 1px solid #c9c9c9; border-radius: var(--radius); font-size: 16px; }
.autosave-status { min-height: 1.5em; color: var(--muted); }
.work-judgement .item-line { font-size: 14px; color: var(--muted); }
/* The pages behind "Mere i Verner" (#316). */
.crumbs { margin: 16px 0 8px; font-size: 14px; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid #c9c9c9; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 16px; }
.pill:hover { border-color: var(--accent); color: var(--ink); }
.pill-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
@media (max-width: 479px) {
  .work-row { grid-template-columns: auto minmax(0, 1fr); }
  /* The alarm time above the value: never off a 360 px row, the same on every row (#414). */
  .work-row-side { grid-column: 2; display: flex; flex-direction: column; gap: 4px; justify-content: start; text-align: left; }
  .stat-number { font-size: 32px; }
}
@media (max-width: 899px) {
  .empty-verner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .empty-verner .verner-figure { width: 72px; height: 72px; }
  .work-detail { display: none; }
  /* The active tab already says "I dag": on a phone the heading is for screen readers only (#414). */
  .today-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* CTS's alarms one tap away (design v4). On the list with "Vigtigt i dag" the link sits in its head instead (#414); an opened case keeps the bar. */
  .all-alarms-bar { position: sticky; top: 0; z-index: 4; margin: 0 -16px 16px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .all-alarms { display: flex; justify-content: center; }
  .work[data-today]:not(.work-opened) .all-alarms-bar-ranked { display: none; }
  .all-alarms-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; font-weight: 600; }
  .all-alarms-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(-45deg); }
  .work-group-ranked .unseen-legend { flex-basis: 100%; }
  /* The computer shows the first case beside the list; a phone shows no case until one is chosen (#277). */
  .work:not(.work-opened) .work-row-selected { background: none; box-shadow: none; }
  .work:not(.work-opened) .work-row-selected .rank { border-color: #c9c9c9; background: var(--surface-subtle); color: var(--ink); }
  .work:not(.work-opened) .work-row-selected:hover { background: var(--surface-subtle); }
  .work:not(.work-opened) .work-row-selected:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
  /* With a case open the phone keeps the heading and any warning, not the list or numbers. */
  .work-opened .work-lead, .work-opened .stats, .work-opened .noise-line, .work-opened .work-list { display: none; }
  .work-opened .work-detail { display: block; }
  .work-opened .work-back { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
  .work-opened .work-back::before { content: ""; width: 8px; height: 8px; border-left: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); }
  .work-case > * { padding: 14px 16px; }
  /* Design council #414: on a phone the ranked list comes first, the day's numbers after it. Only on "I dag" (data-today): Bygninger, Fund and Mail keep their layout. */
  .work[data-today]:not(.work-opened) { display: flex; flex-direction: column; }
  .work[data-today]:not(.work-opened) > .work-overview { display: contents; }
  .work[data-today]:not(.work-opened) > .work-split { order: 1; }
  .work[data-today]:not(.work-opened) .page-head { display: contents; }
  .work[data-today]:not(.work-opened) .work-lead, .work[data-today]:not(.work-opened) .stats-line, .work[data-today]:not(.work-opened) .noise-line { order: 2; }
  .work[data-today]:not(.work-opened) .work-lead { margin: 0 0 8px; font-size: 16px; }
  .work[data-today]:not(.work-opened) .stats { display: none; }
  .work[data-today]:not(.work-opened) .stats-line { display: block; margin: 0 0 8px; }
  .work-group-ranked { display: flex; flex-direction: column; }
  .work-group-ranked .work-group-note { order: 2; margin: 8px 0 0; }
}
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-wide { grid-column: auto; }
  .work-has-case .work-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .work-detail { align-self: start; }  /* the whole case, no inner scroll: the questions stay in reach (#316) */
}
/* Pause on a building or a plant (#334). */
.pause-section { margin: 0 0 24px; overflow-wrap: anywhere; }
.pause-section h2 { font-size: 19px; }
.pause-now { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-subtle); }
.pause-now .item-line { margin: 0 0 6px; }
.pause-box { margin-top: 12px; }
.pause-box > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--accent); }
.pause-form { display: grid; gap: 8px; margin-top: 8px; }
.pause-targets { min-width: 0; margin: 0; padding: 0; border: 0; }
.pause-targets legend { margin-bottom: 4px; padding: 0; font-weight: 600; }
.pause-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; }
.pause-choice input { width: 20px; height: 20px; flex: none; }
.pause-label { font-weight: 600; }
.pause-input { width: 100%; max-width: 100%; min-height: 44px; padding: 8px; border: 1px solid #c9c9c9; border-radius: var(--radius); background: var(--surface); font-size: 16px; }
.pause-button { width: 100%; min-height: 44px; padding: 0 8px; border: 1px solid #c9c9c9; border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 600; cursor: pointer; }
.pause-button:hover { border-color: var(--accent); }
.pause-cases { margin: 0; padding-left: 20px; }
.pause-cases li { min-height: 44px; display: list-item; padding-top: 10px; }

/* Kørsler (#359): each note once at the top, compact rows that only name their numbers. */
.run-key { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.run-notes-key { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); }
.run-notes-key h2 { margin: 0 0 6px; font-size: 16px; }
.run-notes-key ol { margin: 0; padding-left: 24px; }
.run-notes-key li + li { margin-top: 6px; }
.run-notes-key li:target { outline: 2px solid var(--accent); outline-offset: 2px; }
.runs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.run { border-bottom: 1px solid var(--line); scroll-margin-top: 8px; }
.run-head { display: grid; gap: 2px; min-height: 44px; padding: 8px 0; }
summary.run-head { list-style: none; cursor: pointer; }
summary.run-head::-webkit-details-marker { display: none; }
.run-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.run-time { flex: 1 1 auto; font-weight: 600; }
.run-count { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 1px solid #c9c9c9; border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.run-chevron { transition: transform var(--motion-fast) ease-out; }
.run-fold[open] .run-chevron { transform: rotate(90deg); }
.run-sub { font-size: 14px; color: var(--muted); }
.run-sub .mono { color: var(--ink); }
.run-how { flex-basis: 100%; }
.run-refs { margin: 0; padding: 0 0 10px; font-size: 14px; color: var(--muted); }
.run-fold[open] .run-refs { animation: run-fold-in var(--motion-base) ease-out; }
@keyframes run-fold-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.run-problems { margin: 0; padding: 0 0 10px 20px; color: var(--red); }

/* Tvangsstyring (#360): compact rows, the building is the row's one link, no days bar. */
.override-row { display: grid; gap: 0; padding: 8px 16px; margin: 8px 0; }
.override-row > * { margin: 0; }
.override-where { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px; }
.override-place { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; }
.override-where .card-link { display: inline-flex; font-weight: 600; }
.override-plant { color: var(--muted); }
.override-plant::before { content: "·"; margin-right: 8px; }
.override-line { color: var(--muted); }
.override-line strong { color: var(--ink); }
.override-value { display: inline-block; margin-right: 4px; padding: 1px 10px; border-radius: 6px; background: var(--indigo-soft); color: var(--indigo); font-size: 14px; font-weight: 600; }
.override-where .cts-details { margin: 0; }
.override-where .cts-details[open] { grid-column: 1 / -1; }

/* The curve's picture on the case (#321): closed until opened, never wider than the card. */
.case-curves { margin: 8px 0 0; }
.case-curves > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--accent); }
.case-curve { margin: 8px 0 12px; }
.case-curve img { display: block; width: 100%; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.case-curve figcaption { margin-top: 4px; font-size: 14px; color: var(--muted); }

/* The building page as one plant (#248): cases and alarms left, plants right on a computer. */
.building-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
@media (min-width: 1024px) {
  .building-with-side { grid-template-columns: minmax(0, 1fr) 320px; }
  .building-side { align-self: start; }
}
.building-main { min-width: 0; }
.building-side { min-width: 0; overflow-wrap: anywhere; }
.building-plants, .building-forced { margin: 0 0 24px; }
.building-side h2 { margin: 0 0 4px; font-size: 19px; }
.forced-lines { margin: 8px 0 0; padding: 0; list-style: none; }
.forced-line { padding: 6px 0; border-bottom: 1px solid var(--line); }
.forced-line > p { margin: 0; }
.forced-name .override-value { margin: 0 2px; }
.forced-days { font-size: 16px; color: var(--muted); }
.forced-line .item-answer { margin: 0; }
.plant-lines { margin: 8px 0 0; padding: 0; list-style: none; }
.plant-line { padding: 6px 0; border-bottom: 1px solid var(--line); }
.plant-line > p { margin: 0; }
.plant-name { font-weight: 600; }
.plant-link { color: var(--accent); }
.building-main .summary { padding: 10px 16px; margin-bottom: 16px; }
.building-main .summary .cts-details { margin-top: 0; }
.case-card .case-judgement { margin-top: 4px; padding-top: 4px; }
.plant-line .item-tags { margin: 4px 0 2px; }
.plant-values { font-size: 16px; }
.plant-section { font-size: 14px; font-weight: 400; color: var(--muted); }
.plant-others .plant-line:last-child { border-bottom: 0; }
.item-group-label { margin: 16px 0 4px; font-size: 16px; color: var(--muted); }
.item-group .item-card .item-title { font-size: 19px; }
.anchor { display: block; scroll-margin-top: 16px; }
.building-round { margin: 8px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-subtle); }
.building-round-head { margin: 0 0 4px; font-size: 18px; }
.building-round .item-line { margin: 4px 0; }
.case-alarms-head { margin: 10px 0 2px; font-size: 16px; }
.case-alarm-row { padding: 5px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.case-alarm-row:first-child { border-top: 0; padding-top: 2px; }
.case-alarm-row > p { margin: 2px 0; }
.case-alarm-title { font-weight: 600; font-size: 17px; }
.case-alarm-sub { font-weight: 400; font-size: 14px; color: var(--muted); }
.case-alarm-line { font-size: 16px; }
.case-alarm-facts-head { margin: 8px 0 0; font-size: 14px; font-weight: 600; }
/* A case's folds side by side; an opened one takes the whole width (#248). */
.case-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 24px; margin: 8px 0 0; }
.case-links > details { margin: 0; }
.case-links > details[open] { flex-basis: 100%; }
.case-card .case-judgement { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.case-card .case-judgement > p { margin: 0; }
.case-card .case-judgement > details { margin: 0; }
.case-card .case-judgement > details[open] { flex-basis: 100%; }
.item-sub .tag { display: inline-block; margin-right: 6px; padding: 2px 10px; border-radius: 6px; font-size: 14px; font-weight: 600; }
.case-more { margin: 0; }
.case-more > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--accent); }

/* Bygninger, Fund and Mail in the style of "I dag" (#406): rows without a rank, the reasons in
   full, the folds and the explanation below the list. */
.work-row.building-row { grid-template-columns: minmax(0, 1fr); }
.building-reason { display: block; font-size: 16px; }
.buildings-page .stats { margin-top: 16px; }
.page-note { margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.page-head .notice { margin-top: 12px; }
.buildings-why { margin: 24px 0 0; }
.buildings-why > p { margin: 0 0 12px; }
.form-button { margin-top: 16px; }
@media (max-width: 479px) {
  .form-button { width: 100%; }
}

/* Forced points the CTS front page counts other than the forcing lists, per building (#408). */
.override-front-list { margin: 4px 0 8px; padding-left: 20px; font-size: 16px; }
.override-front-list li + li { margin-top: 4px; }