/* Dolly Digital typography and colour values match css/site.css. */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
}
@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/oswald-latin.woff2') format('woff2');
}
:root {
  --bg: #000;
  --paper: #141414;
  --ink: #fff;
  --muted: #adadad;
  --line: #303030;
  --blue: #367def;
  --blue-2: #5b97f5;
  --operational: #43dba1;
  --degraded: #ff8900;
  --outage: #ff6688;
  --unknown: #adadad;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--bg);
  color-scheme: dark;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.55; }
a { color: var(--blue-2); text-underline-offset: 4px; }
a:hover { color: var(--ink); }
button, a { touch-action: manipulation; }
button, select { font: inherit; }
:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link { position: absolute; top: -100px; left: 20px; padding: 12px 20px; background: var(--ink); color: var(--bg); z-index: 10; }
.skip-link:focus { top: 12px; color: var(--bg); }
.top, main { width: min(1040px, calc(100% - 48px)); margin-inline: auto; }
.top { min-height: 92px; padding-block: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.brand > span { font-family: Oswald, Arial, sans-serif; font-size: 18px; font-weight: 500; letter-spacing: .16em; }
.brand-sub { display: block; font-family: Montserrat, Arial, sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .2em; color: var(--muted); margin-top: 3px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border: 1px solid #666; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 700; color: var(--ink); }
.button:hover { border-color: var(--blue-2); }
button.button { background: transparent; cursor: pointer; }
.account { display: flex; align-items: center; gap: 16px; min-width: 0; }
.signed-in { margin: 0; display: grid; justify-items: end; text-align: right; font-size: 12px; color: var(--muted); min-width: 0; }
.signed-in strong { color: var(--ink); font-size: 13px; font-weight: 600; }
.signed-in-label { font-size: 11px; }
.signed-in strong, .signed-in-email { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.button:disabled { opacity: .55; cursor: default; border-color: #666; }
.intro { padding: 40px 0 28px; }
h1, .section-head h2, .tab-panel > h3 { font-family: Oswald, Arial, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
h1 { font-size: clamp(36px, 5vw, 48px); line-height: 1.1; margin: 0 0 16px; }
h1::after { content: ''; display: block; width: 48px; height: 3px; background: var(--blue); margin-top: 20px; }
h2 { font-size: 20px; margin: 0; }
h3 { font-size: 19px; margin: 32px 0 16px; }
p { line-height: 1.7; }
.intro > p { color: var(--muted); font-size: 14px; margin: 0; }
.overall { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid currentColor; border-radius: 12px; padding: 26px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.operational { color: var(--operational); }
.degraded { color: var(--degraded); }
.outage { color: var(--outage); }
.unknown { color: var(--unknown); }
.status-icon { width: 38px; height: 38px; border: 2px solid currentColor; border-radius: 50%; display: grid; place-items: center; }
.status-icon::after { content: '•'; font-size: 26px; }
.operational .status-icon::after { content: '✓'; font-size: 22px; }
.degraded .status-icon::after, .outage .status-icon::after { content: '!'; font-size: 22px; font-weight: 700; }
.overall h2 { color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1.45; }
.overall p { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.updated { color: var(--muted); font-size: 11px; line-height: 1.7; white-space: nowrap; }
.overall-meta { display: grid; justify-items: end; gap: 10px; text-align: right; }
.check-now { display: grid; justify-items: end; gap: 6px; }
.check-now[hidden] { display: none; }
.check-now-status { margin: 0; max-width: 280px; font-size: 11px; line-height: 1.6; color: var(--muted); text-wrap: balance; }
.section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin: 36px 0 16px; }
.section-head h2 { font-size: 23px; }
.muted, .caption { color: var(--muted); font-size: 12px; }
.caption { line-height: 1.8; }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 16px; }
.service, .panel, .check { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.service { display: flex; flex-direction: column; }
.service-description { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.service-title { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 15px; font-weight: 700; }
.state { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.state::before { content: ''; background: currentColor; width: 7px; height: 7px; border-radius: 50%; }
.numbers { display: flex; flex-wrap: wrap; gap: 20px 56px; padding-top: 24px; margin-top: auto; }
.numbers strong { display: block; font-family: Oswald, Arial, sans-serif; font-size: 32px; font-weight: 500; line-height: 1.2; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.numbers span { font-size: 11px; color: var(--muted); }
.period { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; gap: 2px; }
.period button { min-height: 44px; border: 0; border-radius: 999px; padding: 8px 15px; background: transparent; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.period button:hover { color: var(--ink); }
.period button[aria-pressed=true] { background: var(--ink); color: #111; box-shadow: inset 0 -3px 0 var(--blue); }
/* Tabs: one part of the page at a time, so the page stays short. The bar stays at the top while
   scrolling, in the style of the period switch, and scrolls sideways on a phone. The admin tabs
   only appear after sign-in (status.js). The overall status above the bar stays on every tab. */
.tab-panel:not(.active) { display: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.section-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 2px; margin: 24px 0 0; padding: 10px 0; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 15px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; }
.section-nav a[hidden] { display: none; }
.section-nav a:hover { color: var(--ink); }
.section-nav a[aria-current=true] { background: var(--ink); color: #111; box-shadow: inset 0 -3px 0 var(--blue); }
/* The admin tabs get their own outlined group with a lock and "Admin only", so after sign-in it is
   clear they were added and that visitors do not see them. The same blue outline and lock mark every
   other admin-only part of the page, without repeating the words. The group is hidden while none of
   its links show. The negative margin keeps the bar at the same height. */
.nav-admin { flex: none; display: flex; align-items: center; gap: 2px; margin: -4px 0 -4px 10px; padding: 3px; border: 1px solid rgba(91, 151, 245, .45); border-radius: 999px; }
.nav-admin:not(:has(> a:not([hidden]))) { display: none; }
.admin-label { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-2); white-space: nowrap; }
.nav-admin > .admin-label { padding: 0 8px 0 12px; }
.admin-label svg { flex: none; }
.admin-note { margin: -4px 0 0; }
/* Links to the sites behind the services: a Links button at the right end of the admin group, after
   sign-in, that opens a small menu (request of 30 September, replacing a row of links on the Services
   tab). The bar scrolls sideways and clips what sticks out, so the menu is fixed to the window and
   placed under the button by status.js. On a phone it spans the width of the page. */
.nav-links { flex: none; display: inline-flex; }
.nav-links[hidden] { display: none; }
.nav-links button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px 8px 15px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.nav-links button:hover, .nav-links button[aria-expanded=true] { color: var(--ink); }
.nav-links button[aria-expanded=true] svg { transform: rotate(180deg); }
.nav-links-menu { position: fixed; z-index: 6; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border: 1px solid rgba(91, 151, 245, .45); border-radius: 12px; background: var(--paper); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.nav-links-menu[hidden] { display: none; }
.nav-links-menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; text-decoration: none; }
.nav-links-menu a:hover, .nav-links-menu a:focus-visible { background: rgba(91, 151, 245, .15); color: var(--ink); }
main [id] { scroll-margin-top: 84px; }
.bars-title { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; font-weight: 600; margin-bottom: 18px; }
.check-summary { font-size: 12px; margin: 12px 0 18px; }
.service > .check-summary:last-child { margin-bottom: 0; }
/* Misses and slow checks are named, but in grey: only a low rate or a current outage gets colour. */
.check-summary .note { color: var(--muted); }
.bars { display: flex; gap: 4px; min-height: 38px; }
.bar { flex: 1; background: currentColor; border-radius: 3px; min-width: 1px; }
.bar.unknown { background: #383838; }
/* A day with a small share of problems: green, with a cap in the state colour. */
.bar.partial { background: linear-gradient(to bottom, currentColor var(--cap), var(--operational) var(--cap)); }
.bar.partial.unknown { color: var(--unknown); }
.axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 12px; }
.history-item + .history-item { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 24px; }
.legend { display: flex; gap: 12px 24px; flex-wrap: wrap; margin-top: 18px; font-size: 11px; }
.legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; background: currentColor; border-radius: 2px; margin-right: 7px; }
.empty { margin: 0; color: var(--muted); font-size: 13px; }
.incident { padding: 16px 0; border-bottom: 1px solid var(--line); }
.incident:first-child { padding-top: 0; }
.incident:last-child { border: 0; padding-bottom: 0; }
.incident strong { font-size: 14px; }
.incident p { font-size: 12px; color: var(--muted); margin: 7px 0 0; }
.badge { font-size: 11px; padding: 7px 12px; border: 1px solid var(--blue); color: var(--blue-2); border-radius: 999px; }
.notice { background: #281b0b; border: 1px solid #674016; padding: 16px; font-size: 13px; border-radius: 8px; margin: 16px 0; }
.maintenance h2 { margin: 0 0 8px; font-size: 20px; }
.maintenance p { margin: 8px 0; }
.maintenance a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 14px; }
.check h3 { margin: 0 0 8px; font-size: 15px; }
.check a { font-size: 11px; overflow-wrap: anywhere; }
.check dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; }
.check dt { color: var(--muted); }
.check dd { margin: 0; text-align: right; }
.check ul { padding-left: 18px; font-size: 11px; color: var(--outage); overflow-wrap: anywhere; }
.screenshots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 16px; }
.screenshots figure { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
/* The whole capture, banner included: desktop fills the frame, mobile shows as a narrow phone view. */
.screenshots img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: contain; background: #222; }
.screenshots figcaption { font-size: 12px; padding: 14px; }
.screenshots a { display: block; cursor: zoom-in; }
.viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.viewer::backdrop { background: rgba(0, 0, 0, .7); }
body:has(.viewer[open]) { overflow: hidden; }
.viewer-bar { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.viewer-caption { margin: 0; flex: 1; min-width: 0; font-size: 14px; }
.viewer-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.viewer-stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: 16px 80px; overflow: hidden; }
.viewer-stage img { max-width: 100%; max-height: 100%; cursor: zoom-in; }
.viewer.actual-size .viewer-stage { display: block; overflow: auto; text-align: center; }
.viewer.actual-size .viewer-stage img { max-width: none; max-height: none; vertical-align: top; cursor: zoom-out; }
.viewer-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 1px solid #666; border-radius: 50%; background: rgba(0, 0, 0, .6); color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; }
.viewer-nav:hover:not(:disabled) { border-color: var(--blue-2); }
.viewer-nav:disabled { opacity: .3; cursor: default; }
.viewer-previous { left: 16px; }
.viewer-next { right: 16px; }
.screenshots figcaption ul { margin: 8px 0 0; padding-left: 18px; font-size: 11px; color: var(--outage); overflow-wrap: anywhere; }
.shot-error { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 16px; background: #222; color: var(--outage); font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.azure-health { padding: 16px 20px; }
.health-group + .health-group { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.health-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 12px; color: var(--muted); }
.health-header h4 { margin: 0; font-size: 13px; color: var(--ink); }
.health-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); align-items: start; gap: 0 24px; }
.health-list:not(:empty) { margin-top: 8px; }
.health-resource { min-width: 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.health-resource summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 8px; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; list-style: none; }
.health-resource summary::-webkit-details-marker { display: none; }
.health-resource summary::after { content: ''; width: 6px; height: 6px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(45deg); }
.health-resource[open] summary::after { transform: rotate(225deg); }
.health-name { min-width: 0; overflow-wrap: anywhere; }
.health-name a { text-decoration: none; }
.health-name a:hover { text-decoration: underline; }
.resource-type { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); }
.health-resource p { margin: 0 0 12px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.health-note { margin: 12px 0 4px; }
.health-links { display: flex; flex-wrap: wrap; gap: 0 20px; font-size: 12px; }
.health-links a { display: inline-flex; align-items: center; min-height: 44px; }
.azure-alerts > .caption { margin: 0 0 12px; }
.azure-alert { border-bottom: 1px solid var(--line); padding: 14px 0; font-size: 12px; overflow-wrap: anywhere; }
.alert-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.alert-title > a { font-weight: 600; }
.azure-alert p { margin: 6px 0 0; color: var(--muted); }
/* TLS certificates: a card per site with the figure, the facts and a small chart on shared scales.
   Thin blue line, recessive grid, dots for renewals and the latest measurement. */
.tls { display: grid; gap: 16px; }
.tls-site { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; min-width: 0; }
.tls-head { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 8px 24px; }
.tls-head h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 4px; font-size: 15px; }
.tls-head a { font-size: 11px; overflow-wrap: anywhere; }
.tls-days { margin: 0; display: grid; justify-items: end; font-size: 11px; color: var(--muted); }
.tls-days strong { font-family: Oswald, Arial, sans-serif; font-size: 32px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.tls-meta { margin: 8px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.tls-when { margin: 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--muted); }
.tls-when strong { color: var(--ink); font-weight: 600; }
.tls-problem { color: var(--outage); }
.tls-chart { position: relative; margin-top: 16px; }
.tls-chart svg { display: block; max-width: 100%; overflow: visible; font-family: inherit; }
.tls-grid { stroke: #262626; stroke-width: 1; }
.tls-zero { stroke: #5a5a5a; stroke-width: 1; }
.tls-expired { fill: var(--outage); fill-opacity: .1; }
.tls-tick { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.tls-line { fill: none; stroke: var(--blue-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tls-dot { fill: var(--blue-2); stroke: var(--paper); stroke-width: 2; }
.tls-gap { stroke: var(--outage); stroke-width: 2; }
.tls-cross { stroke: var(--muted); stroke-width: 1; }
.tls-tip { position: absolute; top: -8px; pointer-events: none; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 11px; line-height: 1.5; color: var(--muted); white-space: nowrap; }
.tls-tip strong { display: block; color: var(--ink); font-size: 13px; }
.tls-tip span { display: block; }
.run-picker { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); margin: 20px 0; }
.run-field { display: grid; gap: 6px; max-width: 100%; }
.run-picker select { background: var(--paper); color: var(--ink); border: 1px solid #666; border-radius: 7px; padding: 10px; min-height: 44px; max-width: 100%; }
.run-navigation { display: flex; flex-wrap: wrap; gap: 8px; }
.run-picker button { background: var(--paper); color: var(--ink); border: 1px solid #666; border-radius: 7px; padding: 10px 14px; min-height: 44px; cursor: pointer; }
.run-picker button:hover:not(:disabled) { border-color: var(--blue-2); }
.run-picker button[aria-pressed=true] { border-color: var(--blue); color: var(--blue-2); }
.run-picker :disabled { opacity: .45; cursor: default; }
footer { border-top: 1px solid var(--line); margin-top: 48px; padding: 24px 0 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; color: var(--muted); font-size: 11px; }
footer strong { color: var(--ink); font-family: Oswald, Arial, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .12em; }
footer p { margin: 0; }
footer > a { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; font-weight: 600; }
@media (max-width: 600px) {
  .top, main { width: calc(100% - 40px); }
  .top { min-height: 80px; gap: 10px; }
  .brand { gap: 10px; }
  .brand > span { font-size: 16px; letter-spacing: .12em; }
  .brand img { width: 32px; height: 32px; }
  .brand-sub { font-size: 8px; }
  .button { font-size: 11px; padding: 9px 14px; }
  .viewer-bar { padding: 8px 12px; gap: 10px; }
  .viewer-caption { font-size: 12px; }
  .viewer-stage { padding: 10px 6px; }
  .viewer-nav { width: 42px; height: 42px; font-size: 24px; }
  .viewer-previous { left: 6px; }
  .viewer-next { right: 6px; }
  .account { flex-direction: column; align-items: flex-end; gap: 6px; }
  .signed-in-label, .signed-in-email { display: none; }
  .signed-in strong { max-width: 130px; font-size: 11px; }
  .intro { padding: 30px 0 24px; }
  .intro > p { font-size: 13px; }
  .overall { padding: 20px; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .overall h2 { font-size: 16px; }
  .overall-meta { grid-column: 2; justify-items: start; text-align: left; }
  .updated { white-space: normal; }
  .check-now { justify-items: start; }
  .check-now-status { max-width: none; }
  .section-head { margin-top: 30px; }
  .section-head > .muted { display: none; }
  .nav-links-menu { left: 20px; right: 20px; min-width: 0; }
  .section-head h2 { font-size: 21px; }
  .period button { padding-inline: 13px; }
  .panel, .service, .check, .tls-site { padding: 19px; }
  .tls-days { justify-items: start; }
  .bars { gap: 1px; }
  .numbers { gap: 20px 28px; }
  .health-resource summary { grid-template-columns: minmax(0, 1fr) 8px; grid-template-areas: 'name arrow' 'state arrow'; gap: 3px 10px; }
  .health-name { grid-area: name; }
  .health-resource summary > .state { grid-area: state; }
  .health-resource summary::after { grid-area: arrow; }
  footer { align-items: start; flex-direction: column; gap: 10px; }
  footer > a { margin-left: 0; }
}