/* US-012: the public status page stylesheet. Tokens and rules are taken directly from the closed design (decision #27) - design/foundations/colors.html + typography.html + spacing-layout.html, design/pages/public-*.html and design/components/*.html - not re-derived. The tone colours are the exact values design/components/status-badge.html measured contrast against (ink-on-tint: operational 5.46:1, degraded 5.24:1, partial 5.55:1, major 7.12:1, maintenance 7.01:1, unavailable 6.55:1 - all exceed WCAG 2.2 AA's 4.5:1 for normal text). The amber tone (--dg-ink/--dg-tint) is a darkened tint, not the standard amber-on-white the design explicitly rejects for failing contrast (US-012 AC2). Consolidated here, per this story's own scoping note, are the row/group emphasis variants (crow--hit, crow--mo, crow--root, crow--dep, crow--mnt, sys--bad, s-mo--w, s-mt--w) that the design leaves defined per page rather than in one shared component file. crow--hit is the design/pages/public-degraded.html row emphasis (amber, DEGRADED/PARTIAL_OUTAGE); crow--mo is a MAJOR_OUTAGE row that carries no root-cause/dependency distinction yet (see crow--root/crow--dep below) - same red tint as crow--root, since neither design page shows a plain, undifferentiated major-outage row. */ :root { --brand: #517634; --brand-dark: #2F4620; --brand-tint: #EEF2E8; --page: #F4F5F6; --surface: #FFFFFF; --surface-sunken: #FAFBFB; --hover: #F1F3F4; --ink: #16191C; --ink-muted: #5A6169; --line: #DCE0E4; --line-strong: #767F88; --op-ink: #0B6E4F; --op-tint: #E4F3EC; --op-bar: #35A074; --op-edge: #C2E2D2; --dg-ink: #8A5A00; --dg-tint: #FBF0DA; --dg-bar: #B37F14; --dg-edge: #F0DDAF; --dg-deep: #5E3D00; --po-ink: #A33C10; --po-tint: #FBE9E0; --po-bar: #C7551F; --po-edge: #F2CFBC; --mo-ink: #96150F; --mo-tint: #FBE3E1; --mo-bar: #96150F; --mo-edge: #F3C9C6; --mo-deep: #6E1009; --mt-ink: #1C4E8F; --mt-tint: #E4EDF9; --mt-bar: #2C6BB8; --mt-edge: #C9DBF3; --mt-deep: #14395F; --un-ink: #4A5560; --un-tint: #ECEEF1; --un-bar: #7E8891; --un-edge: #D8DDE2; --un-deep: #333C46; --focus: #1C4E8F; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-pill: 999px; --sh-1: 0 1px 2px rgba(22, 25, 28, .06); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } *, *::before, *::after { box-sizing: border-box } html { -webkit-text-size-adjust: 100% } body { margin: 0; background: var(--page); color: var(--ink); font: 400 15px/1.6 var(--font) } h1, h2, h3, h4, p, ul, ol, table { margin: 0 } a { color: var(--brand); text-underline-offset: 2px } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px } summary { list-style: none } summary::-webkit-details-marker { display: none } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap } /* skip link */ .skip { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--ink); padding: 10px 14px; border: 2px solid var(--focus); border-radius: 0 0 var(--r-md) 0; z-index: 9; font-weight: 600 } .skip:focus { left: 0 } /* masthead */ .mast { background: var(--brand-dark); color: #fff; border-bottom: 3px solid var(--brand) } .mast__in { max-width: 912px; margin: 0 auto; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap } .mast__b { display: flex; align-items: center; gap: 10px; font: 650 16.5px/1.2 var(--font); letter-spacing: -.004em } .mast__b svg { width: 22px; height: 22px; display: block; flex: none } .mast__b small { display: block; font: 400 11.5px/1.3 var(--font); opacity: .78; letter-spacing: 0; margin-top: 2px } .wrap { max-width: 912px; margin: 0 auto; padding: 24px 16px 64px } @media (min-width: 880px) { .wrap { padding-left: 24px; padding-right: 24px } } /* verdict */ .verdict { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--op-ink); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 22px 20px } .verdict__r { display: flex; align-items: center; gap: 14px } .verdict__ic { color: var(--op-ink); flex: none } .verdict__ic svg { width: 38px; height: 38px; display: block } .verdict__h { font: 700 30px/1.22 var(--font); letter-spacing: -.018em; color: var(--op-ink) } @media (max-width: 479px) { .verdict__h { font-size: 22px } .verdict__ic svg { width: 28px; height: 28px } } .verdict--dg { border-top-color: var(--dg-ink) } .verdict--dg .verdict__ic, .verdict--dg .verdict__h { color: var(--dg-ink) } .verdict--po { border-top-color: var(--po-ink) } .verdict--po .verdict__ic, .verdict--po .verdict__h { color: var(--po-ink) } .verdict--mo { border-top-color: var(--mo-ink) } .verdict--mo .verdict__ic, .verdict--mo .verdict__h { color: var(--mo-ink) } .verdict--mt { border-top-color: var(--mt-ink) } .verdict--mt .verdict__ic, .verdict--mt .verdict__h { color: var(--mt-ink) } .verdict--un { border-top-color: var(--un-ink) } .verdict--un .verdict__ic, .verdict--un .verdict__h { color: var(--un-ink) } /* freshness - variant 1 (fresh) */ .fresh { display: flex; align-items: center; gap: 9px; font: 500 13.5px/1.5 var(--font); color: var(--ink-muted); flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line) } .fresh__d { width: 9px; height: 9px; border-radius: 50%; background: var(--op-bar); border: 1px solid var(--op-ink); flex: none } .fresh b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums } /* freshness - variant 2 (stale) */ .stale { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; margin-top: 14px; background: var(--dg-tint); border: 1px solid var(--dg-edge); border-left: 4px solid var(--dg-ink); border-radius: var(--r-md); padding: 13px 15px } .stale__ic { color: var(--dg-ink); padding-top: 1px } .stale__ic svg { width: 20px; height: 20px; display: block } .stale__t { font: 600 14.5px/1.45 var(--font); color: var(--dg-deep) } .stale__b { font: 400 13px/1.6 var(--font); color: #6B4A0A; margin-top: 4px; max-width: 74ch } .stale__m { font: 500 12.5px/1.5 var(--mono); font-variant-numeric: tabular-nums; color: var(--dg-deep); margin-top: 7px } /* freshness - variant 3 (frozen / PROBER_SUSPECT). Unreachable today - see FreshnessView's Javadoc. */ .frozen { background: var(--surface); border: 1px solid var(--un-edge); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); margin-bottom: 20px } .frozen__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px 20px; background: repeating-linear-gradient(135deg, #E7EAED 0 6px, #F1F3F5 6px 12px); border-bottom: 1px solid var(--un-edge) } .frozen__ic { width: 42px; height: 42px; border-radius: 50%; background: var(--surface); border: 2px dashed var(--un-ink); color: var(--un-ink); display: flex; align-items: center; justify-content: center; flex: none } .frozen__ic svg { width: 22px; height: 22px; display: block } .frozen__k { font: 600 10.5px/1.4 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--un-deep) } .frozen__t { font: 650 19px/1.35 var(--font); letter-spacing: -.008em; color: var(--un-deep); margin-top: 5px } .frozen__b { font: 400 14px/1.65 var(--font); color: #3E4750; margin-top: 8px; max-width: 70ch } .frozen__b strong { color: var(--un-deep) } .frozen__facts { display: grid; gap: 0; grid-template-columns: 1fr; border-bottom: 1px solid var(--un-edge) } @media (min-width: 620px) { .frozen__facts { grid-template-columns: repeat(3, 1fr) } } .ff { padding: 13px 20px; border-bottom: 1px solid var(--un-edge) } @media (min-width: 620px) { .ff { border-bottom: 0; border-right: 1px solid var(--un-edge) } .ff:last-child { border-right: 0 } } .ff:last-child { border-bottom: 0 } .ff__k { font: 600 10.5px/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted) } .ff__v { font: 600 15px/1.4 var(--mono); font-variant-numeric: tabular-nums; margin-top: 3px } .frozen__act { padding: 14px 20px; background: var(--surface-sunken); font: 400 13px/1.6 var(--font); color: var(--ink-muted) } .frozen__act b { color: var(--ink); font-weight: 600 } /* section heads */ .sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 32px 0 12px } .sh h2 { font: 600 19px/1.35 var(--font); letter-spacing: -.006em } /* open-incident banner slot (US-015 populates it; see index.html's own comment) */ .ob { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; background: var(--mo-tint); border: 1px solid var(--mo-edge); border-left: 4px solid var(--mo-ink); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 20px } .ob__ic { color: var(--mo-ink); padding-top: 2px } .ob__ic svg { width: 22px; height: 22px; display: block } .ob__t { font: 650 16px/1.4 var(--font); color: var(--mo-deep) } /* status badge - the atom of the page: shape + text + colour, always together (AC2) */ .sb { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); font-weight: 600; white-space: nowrap; border: 1px solid transparent; font-size: 12.5px; line-height: 1; padding: 5px 10px 5px 7px; max-width: 100% } .sb span:last-child { overflow: hidden; text-overflow: ellipsis } .sb svg { width: 14px; height: 14px; flex: none; display: block } .sb--md { font-size: 14px; padding: 7px 12px 7px 9px } .sb--md svg { width: 16px; height: 16px } .s-op { color: var(--op-ink); background: var(--op-tint); border-color: var(--op-edge) } .s-dg { color: var(--dg-ink); background: var(--dg-tint); border-color: var(--dg-edge) } .s-po { color: var(--po-ink); background: var(--po-tint); border-color: var(--po-edge) } .s-mo { color: var(--mo-ink); background: var(--mo-tint); border-color: var(--mo-edge) } .s-mo--w { background: #fff } .s-mt { color: var(--mt-ink); background: var(--mt-tint); border-color: var(--mt-edge) } .s-mt--w { background: #fff } .s-un { color: var(--un-ink); background: var(--un-tint); border-color: var(--un-edge) } /* system group */ .sys { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden } .sys + .sys { margin-top: 12px } .sys--bad { border-color: var(--mo-edge) } .sys__head { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; min-height: 56px } .sys__head:hover { background: var(--hover) } .sys__tw { color: var(--line-strong); display: flex; align-items: center; justify-content: center } .sys__tw svg { width: 18px; height: 18px; display: block; transition: transform .12s ease } @media (prefers-reduced-motion: reduce) { .sys__tw svg { transition: none } } .sys[open] .sys__tw svg { transform: rotate(90deg) } .sys__t { min-width: 0 } .sys__nm { font: 600 19px/1.3 var(--font); letter-spacing: -.006em; overflow-wrap: anywhere } .sys__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end } .count { font: 500 12.5px/1.3 var(--font); color: var(--ink-muted); white-space: nowrap } .count b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums } .sys__body { border-top: 1px solid var(--line); background: var(--surface-sunken) } .sys__seclbl { font: 600 10.5px/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding: 12px 16px 6px } @media (max-width: 719px) { .sys__head { grid-template-columns: 20px minmax(0, 1fr); row-gap: 9px } .sys__nm { font-size: 17px } .sys__right { grid-column: 2 / -1; justify-content: flex-start } } /* component row - one per component, one tab stop, 44px minimum (AC per component-row.html) */ .crow { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center; padding: 11px 16px 11px 28px; text-decoration: none; color: inherit; border-top: 1px solid var(--line); background: var(--surface); min-height: 44px } .crow:hover { background: var(--hover) } .crow--hit { background: var(--dg-tint) } .crow--hit:hover { background: #F8EBD0 } /* MAJOR_OUTAGE's own row emphasis - distinct from crow--hit's amber (design/pages/ public-degraded.html's only crow--hit definition is DEGRADED). Same red tint as crow--root below, used until a dependency reference lets a MAJOR_OUTAGE row be told apart as root-cause vs dependent (see crow--root/crow--dep's own comment). */ .crow--mo { background: var(--mo-tint) } .crow--mo:hover { background: #F8DAD7 } /* crow--root (the root-cause row) and crow--dep (a row impaired only because of another component, design/pages/public-major-outage.html) are intentionally never emitted by IndexPageModelFactory today - telling either apart from a plain crow--mo row needs a dependency reference PublicComponentResponse does not carry yet (see ComponentRowView's own Javadoc). Defined here so wiring that data through, in a later story, is a renderer change rather than a design one. */ .crow--root { background: var(--mo-tint) } .crow--root:hover { background: #F8DAD7 } .crow--dep { background: #FEF7F6 } .crow--mnt { background: repeating-linear-gradient(45deg, #F5F9FE 0 6px, #FFFFFF 6px 12px) } .crow--mnt:hover { background: var(--mt-tint) } .crow__nm { font: 600 14.5px/1.35 var(--font); min-width: 0; overflow-wrap: anywhere } @media (min-width: 640px) { .crow { grid-template-columns: minmax(0, 1fr) auto; gap: 16px } } @media (max-width: 639px) { .crow { padding-left: 20px } } /* real