/* The public status page: the customer's page, not Upglory's. Calm and sure
   of itself on a bad day. The verdict is the largest line on the page, the
   strip is the one signature, the customer's accent (--brand, set in the
   editor) marks their logo and the subscribe button, never a state.
   It carries no script in the product (PRODUCT.md 4.6). */
.pub-body { --brand: var(--ink); --brand-ink: var(--ground); background: var(--ground); color: var(--ink); margin: 0; font: 400 var(--t-body)/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
.pub-body ::selection { background: var(--accent-ground); color: var(--ink); }
.pub-top { position: relative; isolation: isolate; padding-bottom: var(--s-8); }
.pub-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--tone-ground) 0%, color-mix(in srgb, var(--tone-ground) 45%, var(--ground)) 60%, var(--ground) 100%); }
.pub-top--down { --tone: var(--down); --tone-ground: var(--down-ground); }
.pub-top--up { --tone: var(--up); --tone-ground: var(--up-ground); }
.pub-top--maint { --tone: var(--pending); --tone-ground: var(--pending-ground); }
.pub-wrap { max-width: 50rem; margin: 0 auto; padding: 0 var(--gutter); }

.pub-head { display: flex; align-items: center; gap: .75rem; height: 4.5rem; }
.pub-logo { width: 2.25rem; height: 2.25rem; border-radius: .625rem; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font: 600 .875rem var(--font-title); }
.pub-head b { font: 600 1.125rem var(--font-title); letter-spacing: -.01em; }
.pub-head nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.pub-head .d-btn { height: 2.25rem; }
.pub-btn { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pub-btn:hover { background: color-mix(in srgb, var(--brand) 86%, var(--ground)); border-color: transparent; }

.pub-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; align-items: center; padding: var(--s-7) 0 0; }
.pub-mark { position: relative; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; }
.pub-mark::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--tone) 14%, transparent); }
.pub-mark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--tone); opacity: 0; animation: pub-ping 2.6s var(--ease) infinite; }
.pub-top--up .pub-mark::after { animation-duration: 4s; }
.pub-mark i { position: relative; width: 1.25rem; height: 1.25rem; background: var(--tone); border-radius: 50%; }
.pub-top--down .pub-mark i { width: 1.125rem; height: 1.125rem; border-radius: 3px; transform: rotate(45deg); }
.pub-top--maint .pub-mark i { background: none; border: 3px solid var(--tone); }
@keyframes pub-ping { 0% { transform: scale(.7); opacity: .7; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
.pub-hero h1 { margin: 0; font: 600 clamp(1.875rem, 1.1rem + 2.6vw, 2.75rem)/1.08 var(--font-title); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.pub-hero p { grid-column: 2; margin: .5rem 0 0; font-size: 1.0625rem; color: var(--ink-2); }
.pub-hero .pub-when { grid-column: 2; margin-top: .75rem; font: 500 var(--t-data-s) var(--font-data); color: color-mix(in srgb, var(--tone) 50%, var(--ink-2)); display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-variant-ligatures: none; }
.pub-hero .pub-when > span { display: inline-flex; align-items: center; gap: .375rem; }
.pub-hero .pub-when > span:first-child::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--tone); }

/* The open incident: stage, updates, when the next one comes. */
.pub-incident { margin-top: var(--s-7); background: var(--surface); border-radius: var(--r-3); box-shadow: 0 1px 0 var(--line), 0 .75rem 2rem -1.25rem rgba(18, 19, 21, .25); overflow: hidden; }
.pub-incident__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: var(--s-5) var(--s-6) 0; }
.pub-incident__head h2 { margin: 0; font: 600 1.25rem/1.25 var(--font-title); letter-spacing: -.01em; }
.pub-incident__head span { font: 500 var(--t-data-s) var(--font-data); color: var(--ink-3); white-space: nowrap; font-variant-ligatures: none; }
/* The track runs from the left edge to the right edge: the first dot at the left, the last at the right, a line only between dots. Each of the first three steps owns the line from its dot to the next (D-513); the last is just its dot, with its label ending at the right edge. */
.pub-stages { list-style: none; display: flex; margin: var(--s-5) var(--s-6) 0; padding: 0; counter-reset: st; }
.pub-stages li { position: relative; flex: 1 1 0; min-width: 0; padding-top: 1.125rem; font-size: var(--t-small); color: var(--ink-3); }
.pub-stages li:last-child { flex: 0 0 .75rem; display: flex; justify-content: flex-end; white-space: nowrap; }
.pub-stages li:not(:last-child)::before { content: ""; position: absolute; top: .3125rem; left: .375rem; right: -.375rem; height: 2px; background: var(--line-2); }
.pub-stages li::after { content: ""; position: absolute; top: 0; left: 0; width: .75rem; height: .75rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); box-sizing: border-box; }
.pub-stages li:has(+ .is-done)::before, .pub-stages li:has(+ .is-now)::before { background: var(--tone); }
.pub-stages li.is-done::after, .pub-stages li.is-now::after { border-color: var(--tone); background: var(--tone); }
.pub-stages li.is-now { color: var(--ink); font-weight: 600; }
.pub-stages li.is-now::after { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 20%, transparent); }
.pub-updates { list-style: none; margin: var(--s-5) 0 0; padding: 0 var(--s-6); display: grid; }
.pub-updates li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .125rem 1rem; padding: .875rem 0; border-top: 1px solid var(--line); }
.pub-updates time { font: 500 var(--t-data) var(--font-data); color: var(--ink-2); grid-row: span 2; font-variant-ligatures: none; }
.pub-updates b { font-size: var(--t-small); font-weight: 600; }
.pub-updates p { margin: 0; color: var(--ink-2); max-width: 60ch; }
.pub-incident__foot { display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between; padding: .875rem var(--s-6); background: var(--surface-2); border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-2); }
.pub-incident__foot b { color: var(--ink); font-weight: 600; }

/* Maintenance, planned or running: one quiet line with its window. */
.pub-maint { display: flex; align-items: center; gap: .875rem; margin-top: var(--s-5); padding: .875rem 1.125rem; border-radius: var(--r-3); background: color-mix(in srgb, var(--pending-ground) 70%, var(--surface)); color: var(--ink); }
.pub-maint .d-i { color: var(--pending); width: 1.25rem; height: 1.25rem; }
.pub-maint b { display: block; font-weight: 600; }
.pub-maint span { font-size: var(--t-small); color: var(--ink-2); }

/* Services: groups on one surface, a row per service with its 90 days. */
.pub-section { margin-top: var(--s-8); }
.pub-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: var(--s-4); }
.pub-section h2 { margin: 0; font: 600 1.25rem var(--font-title); letter-spacing: -.01em; }
.pub-section > header span { font-size: var(--t-small); color: var(--ink-3); }
.pub-section > header span b { font: 600 var(--t-data) var(--font-data); color: var(--ink); font-variant-ligatures: none; }
.pub-services { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.pub-group + .pub-group { border-top: 1px solid var(--line); }
.pub-group h3 { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 1rem var(--s-5) .25rem; font: 600 var(--t-small) var(--font-ui); color: var(--ink-3); }
.pub-group ul { list-style: none; margin: 0; padding: 0 var(--s-5) .5rem; }
.pub-row { padding: .875rem 0 1rem; }
.pub-row + .pub-row { border-top: 1px dashed var(--line); }
.pub-row__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .625rem; }
.pub-row__head b { font-weight: 500; font-size: 1rem; }
.pub-strip { height: 2.25rem; gap: 3px; }
.pub-strip i { border-radius: 2px; }
.pub-axis { display: flex; justify-content: space-between; margin-top: .5rem; font: 400 var(--t-data-s) var(--font-data); color: var(--ink-3); font-variant-ligatures: none; }
.pub-axis b { font-weight: 600; color: var(--ink-2); }

/* D-426: a group's count beside its name; a day's and an incident's
   figures as short labelled facts, label over value, on one baseline. */
.pub-group__name { display: inline-flex; align-items: baseline; gap: .5rem; min-width: 0; }
.pub-group__count { font-weight: 400; }
.pub-dayrows .pub-row__head { align-items: baseline; margin-bottom: 0; }
.pub-dayfacts, .pub-facts { display: flex; flex-wrap: wrap; gap: .625rem 2.25rem; margin: .75rem 0 0; }
.pub-dayfacts > div, .pub-facts > div { display: grid; gap: .125rem; min-width: 0; }
.pub-dayfacts dt, .pub-facts dt { font-size: var(--t-small); color: var(--ink-3); }
.pub-dayfacts dd, .pub-facts dd { margin: 0; font: 500 var(--t-data) var(--font-data); color: var(--ink); }
.pub-dayfacts dd a { font: 500 1rem/1.45 var(--font-ui); color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.pub-dayrow__note { margin: .625rem 0 0; font-size: var(--t-small); color: var(--ink-3); max-width: 68ch; }
.pub-facts { margin: var(--s-5) var(--s-6) 0; }
.pub-hero .pub-hero__links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }

/* Earlier incidents: the write-up, signed and dated (D-88). */
.pub-past { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pub-past li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .25rem 1.25rem; padding: 1.125rem 0; border-top: 1px solid var(--line); }
.pub-past li:first-child { border-top: 0; padding-top: 0; }
.pub-past time { font: 500 var(--t-data) var(--font-data); color: var(--ink-2); font-variant-ligatures: none; }
.pub-past h3 { margin: 0; font-size: 1rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; }
.pub-past h3 span { font: 400 var(--t-data-s) var(--font-data); color: var(--ink-3); font-variant-ligatures: none; }
.pub-past p { grid-column: 2; margin: .25rem 0 0; color: var(--ink-2); max-width: 62ch; }
.pub-past small { grid-column: 2; font-size: var(--t-small); color: var(--ink-3); }
.pub-more { margin-top: var(--s-4); }

/* Subscribe: the one thing a visitor can do. */
.pub-sub { margin-top: var(--s-8); padding: var(--s-6); border-radius: var(--r-3); background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-5); align-items: center; }
.pub-sub h2 { margin: 0; font: 600 1.25rem/1.25 var(--font-title); letter-spacing: -.01em; }
.pub-sub p { margin: .375rem 0 0; font-size: var(--t-small); color: var(--ink-2); }
.pub-sub form { display: flex; flex-wrap: wrap; gap: .5rem; }
.pub-sub .d-input { flex: 1 1 12rem; height: var(--control); }
.pub-sub [data-sub-msg] { flex-basis: 100%; margin: 0; color: var(--down); }
.pub-feeds { grid-column: 1 / -1; display: flex; gap: 1rem; padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-3); }
.pub-feeds a { color: var(--ink-2); display: inline-flex; align-items: center; gap: .375rem; }

/* The footer: the page's name with the credit across from it, then its
   facts as one quiet column, then the feeds and the badge. On a phone it
   stacks, the credit last. */
.pub-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name credit" "facts facts" "links links" "zone zone"; align-items: baseline; gap: .5rem var(--s-7); margin: var(--s-8) 0; padding-top: var(--s-6); border-top: 1px solid var(--line); font-size: var(--t-small); line-height: 1.5; color: var(--ink-3); }
.pub-foot button { border: 0; background: none; padding: 0; font: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.pub-foot a { color: var(--ink-2); }
.pub-foot__name { grid-area: name; justify-self: start; min-width: 0; font: 600 var(--t-body)/1.3 var(--font-title); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.pub-foot__facts { grid-area: facts; display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.pub-foot__facts li { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.pub-foot__links { grid-area: links; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; }
.pub-foot > .pub-credit { grid-area: credit; justify-self: end; white-space: nowrap; }
.pub-foot > .pub-zone { grid-area: zone; }

/* D-426: footer and meta lines laid out by spacing, never a separator. */
.pub-years, .pub-chart__ranges { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.pub-chart__ranges { gap: .25rem .75rem; }
.pub-years { gap: .25rem .75rem; }
.pub-histfoot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; margin: var(--s-4) 0 0; }
.pub-histfoot .pub-more { margin-top: 0; }
.pub-histfoot > span { font-size: var(--t-small); color: var(--ink-3); }
.pub-zone__mine { margin-left: .75rem; text-decoration: underline; text-underline-offset: .15em; }

@media (max-width: 40em) {
  .pub-head nav .pub-hide-phone { display: none; }
  .pub-hero { grid-template-columns: 1fr; row-gap: 1rem; padding-top: var(--s-5); }
  .pub-hero p, .pub-hero .pub-when { grid-column: 1; }
  .pub-mark { width: 2.75rem; height: 2.75rem; }
  .pub-incident__head, .pub-updates, .pub-incident__foot { padding-inline: var(--s-4); }
  .pub-incident__head { flex-direction: column; gap: .25rem; }
  .pub-stages { margin-inline: var(--s-4); }
  .pub-facts { margin-inline: var(--s-4); gap: .625rem 1.5rem; }
  .pub-dayfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem 1rem; }
  .pub-dayfacts > div:has(a) { grid-column: 1 / -1; }
  .pub-stages li { font-size: .75rem; }
  .pub-updates li { grid-template-columns: 1fr; }
  .pub-updates time { grid-row: auto; font-size: var(--t-data-s); }
  .pub-group h3, .pub-group ul { padding-inline: var(--s-4); }
  .pub-strip { height: 2rem; gap: 2px; }
  .pub-strip i:nth-child(-n+60) { display: none; }
  .pub-axis span:first-child { font-size: 0; }
  .pub-axis span:first-child::after { content: "30 days ago"; font-size: var(--t-data-s); }
  .pub-past li { grid-template-columns: 1fr; }
  .pub-past p, .pub-past small { grid-column: 1; }
  .pub-sub { grid-template-columns: 1fr; padding: var(--s-5); }
  .pub-sub .d-input, .pub-sub .d-btn { height: var(--tap); flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pub-mark::after { animation: none; } }

/* ---- Links, the incident page, the optional parts. ---------------------- */
.pub-body a:not(.d-btn):not(.d-tip__a) { color: inherit; }
.pub-home { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.pub-back { display: inline-flex; align-items: center; gap: .375rem; margin-top: var(--s-4); font-size: var(--t-small); color: var(--ink-2); text-decoration: none; }
.pub-back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .15em; }
.pub-hero--incident { padding-top: var(--s-5); }
.pub-hero--incident p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.pub-incident__head h2 a, .pub-past h3 a { text-decoration: none; }
.pub-incident__head h2 a:hover, .pub-past h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.pub-writeup { margin-top: var(--s-7); max-width: 62ch; }
.pub-writeup h2 { margin: 0 0 .5rem; font: 600 1.25rem var(--font-title); }
.pub-writeup p { margin: 0; font-size: 1.0625rem; color: var(--ink-2); }
.pub-writeup small { display: block; margin-top: .75rem; color: var(--ink-3); }
.pub-foot > a { color: var(--ink-2); }
/* The footer's links read as links in the quiet group, after the page's
   own link reset above; the name is the group's one strong line. */
.pub-body .pub-foot__facts a:not(.d-btn), .pub-body .pub-foot__links a:not(.d-btn) { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
.pub-body .pub-foot__facts a:not(.d-btn):hover, .pub-body .pub-foot__links a:not(.d-btn):hover { color: var(--ink); text-decoration-color: currentColor; }
.pub-body .pub-foot a.pub-foot__name { color: var(--ink); text-decoration: none; }
.pub-body .pub-foot a.pub-foot__name:hover { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 40em) {
  .pub-foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "facts" "links" "credit" "zone"; gap: .625rem; }
  .pub-foot__facts { gap: .375rem; }
  .pub-foot__links { gap: 0 1.5rem; margin-top: .25rem; }
  .pub-foot > .pub-credit { justify-self: start; margin-top: var(--s-4); }
  /* A thumb's target without spreading the lines apart. */
  .pub-foot__facts a, .pub-foot__links a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
}
.pub-chart { display: none; margin: var(--s-5) 0 0; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.pub-chart figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; font-size: var(--t-small); color: var(--ink-3); }
.pub-chart figcaption b { font-weight: 600; color: var(--ink); }
.pub-body.show-chart .pub-chart { display: block; }
.pub-body.no-uptime .pub-axis span:nth-child(2) { visibility: hidden; }
.pub-body.no-credit .pub-credit { display: none; }
.pub-body.logo-instead .pub-head b { display: none; }
.pub-body.logo-instead .pub-logo { width: auto; padding: 0 .875rem; height: 2.5rem; font-size: 1rem; letter-spacing: -.01em; }
.pub-body.logo-instead .pub-logo::after { content: " Example Shop"; white-space: pre; }
.pub-body.no-logo .pub-logo { display: none; }
.pub-row[hidden], .pub-group[hidden] { display: none; }
.pub-jumps { display: none; }

/* ---- Headline type: sans (default), serif, mono. ------------------------ */
.pub-body[data-face="serif"] :is(h1, h2, .pub-head b) { font-family: "Source Serif 4", Georgia, serif; letter-spacing: -.01em; }
.pub-body[data-face="serif"] .pub-hero h1 { letter-spacing: -.02em; }
.pub-body[data-face="mono"] :is(h1, h2, .pub-head b) { font-family: var(--font-data); letter-spacing: -.03em; font-variant-ligatures: none; }
.pub-body[data-face="mono"] .pub-hero h1 { font-size: clamp(1.625rem, 1rem + 2.2vw, 2.375rem); letter-spacing: -.05em; }

/* ---- The band: the verdict's colour (default) or the page's own. ------ */
.pub-body[data-band="brand"] .pub-top { --tone-ground: color-mix(in srgb, var(--brand) 16%, var(--ground)); }
.pub-body[data-band="brand"] .pub-hero .pub-when { color: var(--ink-2); }

/* ---- Layout: Plain. One narrow column, no colour. ----------------------- */
.pub-body[data-layout="plain"] .pub-top::before { background: none; }
.pub-body[data-layout="plain"] .pub-wrap { max-width: 40rem; }
.pub-body[data-layout="plain"] .pub-hero { grid-template-columns: 1fr; padding-top: var(--s-6); }
.pub-body[data-layout="plain"] .pub-hero p, .pub-body[data-layout="plain"] .pub-hero .pub-when { grid-column: 1; }
.pub-body[data-layout="plain"] .pub-mark { display: none; }
.pub-body[data-layout="plain"] .pub-hero h1 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); color: var(--tone); }
.pub-body[data-layout="plain"] .pub-incident { box-shadow: none; border: 1px solid var(--line); }
.pub-body[data-layout="plain"] .pub-maint { background: var(--surface); border: 1px solid var(--line); }
.pub-body[data-layout="plain"] .pub-services { border: 0; background: none; }
.pub-body[data-layout="plain"] .pub-group h3, .pub-body[data-layout="plain"] .pub-group ul { padding-inline: 0; }
.pub-body[data-layout="plain"] .pub-sub { grid-template-columns: 1fr; background: none; padding: var(--s-5) 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }

/* ---- Layout: Grid. A dark bar and components two across. ---------------- */
.pub-body[data-layout="grid"] .pub-top { background: #121315; color: #F1EEE6; padding-bottom: var(--s-7); --ink: #F1EEE6; --ink-2: #BEBAB0; --ink-3: #8F8B82; --line: rgba(241, 238, 230, .12); --surface: #1A1C20; --surface-2: #202328; }
.pub-body[data-layout="grid"] .pub-top::before { background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 22%, transparent), transparent 70%); }
.pub-body[data-layout="grid"] .pub-wrap { max-width: 68rem; }
.pub-body[data-layout="grid"] .pub-logo { background: #F1EEE6; color: #121315; }
.pub-body[data-layout="grid"] .pub-btn { background: #F1EEE6; border-color: #F1EEE6; color: #121315; }
.pub-body[data-layout="grid"] .pub-head .d-btn--quiet { color: #BEBAB0; }
.pub-body[data-layout="grid"] .pub-maint { background: rgba(241, 238, 230, .08); }
.pub-body[data-layout="grid"] .pub-incident { box-shadow: none; }
.pub-body[data-layout="grid"] .pub-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); background: none; border: 0; }
.pub-body[data-layout="grid"] .pub-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.pub-body[data-layout="grid"] .pub-group + .pub-group { border-top: 1px solid var(--line); }
.pub-body[data-layout="grid"] .pub-group:only-child, .pub-body[data-layout="grid"] .pub-group:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pub-body[data-layout="grid"] .pub-strip { height: 1.75rem; gap: 2px; }
@media (max-width: 56.25em) { .pub-body[data-layout="grid"] .pub-services { grid-template-columns: 1fr; } }

/* ---- Layout: Docs. A rail of jumps beside the page. ---------------------- */
@media (min-width: 50em) {
  .pub-body[data-layout="docs"] { display: grid; grid-template-columns: 15rem minmax(0, 1fr); grid-template-areas: "jumps top" "jumps main"; align-content: start; }
  .pub-body[data-layout="docs"] > .pub-top { grid-area: top; }
  .pub-body[data-layout="docs"] > main { grid-area: main; }
  .pub-body[data-layout="docs"] .pub-jumps { grid-area: jumps; position: sticky; top: 0; align-self: start; height: 100vh; display: grid; align-content: start; gap: 2px; padding: var(--s-6) var(--s-4); border-right: 1px solid var(--line); background: var(--surface); }
  .pub-body[data-layout="docs"] .pub-jumps__name { font: 600 1rem var(--font-title); margin: 0 .5rem var(--s-4); }
  .pub-body[data-layout="docs"] .pub-jumps a { padding: .375rem .5rem; border-radius: var(--r-1); color: var(--ink-2); text-decoration: none; font-size: var(--t-small); }
  .pub-body[data-layout="docs"] .pub-jumps a:hover { background: var(--surface-2); color: var(--ink); }
  .pub-body[data-layout="docs"] .pub-jumps .pub-jumps__sub { padding-left: 1.25rem; }
  .pub-body[data-layout="docs"] .pub-top::before { background: none; }
  .pub-body[data-layout="docs"] .pub-head .pub-logo, .pub-body[data-layout="docs"] .pub-head b { display: none; }
  .pub-body[data-layout="docs"] .pub-wrap { max-width: 52rem; margin: 0; padding-inline: var(--s-8); }
  .pub-body[data-layout="docs"] .pub-hero { border-bottom: 1px solid var(--line); padding-bottom: var(--s-6); }
}
.pub-body :target { scroll-margin-top: 1.5rem; }
.pub-tagline { grid-column: 2; margin: .25rem 0 0 !important; font-size: var(--t-body) !important; color: var(--ink-3) !important; }
.pub-body[data-layout="plain"] .pub-tagline { grid-column: 1; }
.pub-body[data-layout="grid"] .pub-top { --line-2: rgba(241, 238, 230, .2); --line-strong: rgba(241, 238, 230, .34); }

/* The credit carries Upglory's mark: five bars, one day dipped. */
.pub-credit a { display: inline-flex; align-items: center; gap: .375rem; margin-left: .25rem; font: 700 var(--t-small) var(--font-title); color: var(--ink) !important; text-decoration: none; letter-spacing: -.01em; }
.pub-credit a svg { width: 1.375rem; height: .5rem; fill: currentColor; }
.pub-credit a:hover { color: var(--accent-ink) !important; }
@media (min-width: 50em) { .pub-body[data-layout="docs"] .pub-wrap { margin: 0 auto; padding-inline: var(--s-7); } }

/* ---- States drawn for brief 23. Each rule is a part the product renders
   that no component in the kit covers; the reason sits on the rule. ---- */
/* The history row: on a phone the header's History link is hidden, so the
   page carries it as one row with the 90-day count (c-sp-history-phone). */
.pub-histrow { display: none; }
@media (max-width: 40em) {
  .pub-histrow { display: flex; align-items: center; gap: .5rem; min-height: var(--tap); margin-top: var(--s-6); padding: .75rem 1rem; text-decoration: none; }
  .pub-histrow b { font-weight: 600; }
  .pub-histrow .d-meta { margin-left: auto; text-align: right; }
  .pub-histrow .d-i { flex: none; color: var(--ink-3); }
}
/* The zone picker with no script: a details element whose summary reads
   as the footer's link, and the whole list as rows, two columns wide. */
.pub-zone { flex-basis: 100%; }
.pub-zone summary { display: inline-block; cursor: pointer; color: var(--ink-2); text-decoration: underline; text-underline-offset: .15em; list-style: none; }
.pub-zone summary::-webkit-details-marker { display: none; }
.pub-zone summary:hover, .pub-zone[open] summary { color: var(--ink); }
.pub-zone > p { margin: .75rem 0 .25rem; max-width: 62ch; }
.pub-zone .d-rows { columns: 2; column-gap: var(--s-7); }
.pub-zone .d-rows li { break-inside: avoid; grid-template-columns: minmax(0, 1fr) auto; }
.pub-zone .d-rows a { color: var(--ink-2); }
.pub-zone .d-rows a[aria-current] { color: var(--ink); font-weight: 600; }
@media (max-width: 40em) { .pub-zone .d-rows { columns: 1; } .pub-zone summary { padding: .75rem 0; } .pub-zone .d-rows a { min-height: var(--tap); } .pub-zone .d-rows li { align-items: center; padding: 0; } .pub-zone .d-rows a { display: flex; align-items: center; } }
/* The band's chip: only when the band carries the brand, so the state
   still has a word once the colour stops being the answer (D-150). */
.pub-hero [data-band-chip] { display: none; margin-left: .375rem; font-family: var(--font-ui); letter-spacing: 0; vertical-align: .35em; }
.pub-body[data-layout="banner"][data-band="brand"] .pub-hero [data-band-chip] { display: inline-flex; }
/* Grid: the verdict itself is the chip in the dark bar (c-sp-bar__chip);
   the kit has no chip at headline size. */
.pub-body[data-layout="grid"] .pub-verdict { padding: 0 .35em; border-radius: var(--r-3); background: color-mix(in srgb, var(--tone) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 45%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Keep history diagnostics within the existing public day card at phone width. */
@media (max-width: 56.25em) {
  .pub-strip .d-tip { min-width: 0; width: 13rem; max-width: calc(100vw - 3rem); }
  .pub-strip i:nth-child(n+75):nth-child(-n+80) .d-tip { left: 50%; right: auto; transform: translate(-50%, 4px); }
  .pub-strip i:nth-child(n+75):nth-child(-n+80):is(:hover, :focus-within) .d-tip { transform: translate(-50%, 0); }
  .pub-strip i:nth-child(n+75):nth-child(-n+80) .d-tip::after { left: 50%; right: auto; }
}