pub const STYLE: &str = "/* Visual language borrowed from site/src/pages/proto-f/index.astro on\n * purpose: this is the same instrument-panel register (bordered readout\n * boxes, a technical overlay, a travelling-wave field underneath) applied\n * to real operational data instead of commit counts. The field is\n * decoration; every rule below that touches a value or a label exists to\n * keep it legible over that field, never the other way around. */\n\n:root {\n --paper: #ececec;\n --ink: #0a0a0a;\n --panel-bg: rgba(236, 236, 236, 0.94);\n --live: #0a5c1e;\n --not-implemented: #555555;\n --unreachable: #8a1a1a;\n --border: 2px solid var(--ink);\n}\n\n* { box-sizing: border-box; }\n\nhtml, body {\n margin: 0;\n background: var(--paper);\n color: var(--ink);\n font: 14px/1.5 ui-monospace, \"SF Mono\", \"JetBrains Mono\", monospace;\n}\n\n#field {\n position: fixed;\n inset: 0;\n z-index: 0;\n}\n\nheader.col, main {\n position: relative;\n z-index: 1;\n}\n\nheader.col {\n max-width: 40rem;\n margin: 0 auto;\n padding: 24px 20px 12px;\n background: var(--panel-bg);\n border-bottom: var(--border);\n}\n\nh1 {\n font-size: 1.25em;\n font-weight: normal;\n margin: 0 0 12px;\n}\n\n/* Every control on this page is built by the signed-in render, so the\n * focus ring is defined here, once, for all of them: an operator who\n * reaches a control by keyboard has to be able to see which one is about\n * to fire. */\na:focus-visible,\nbutton:focus-visible,\ninput:focus-visible {\n outline: 3px solid #1a4fd6;\n outline-offset: 2px;\n}\n\n.signin-note {\n font-size: 12px;\n color: #333;\n max-width: 34rem;\n margin: 12px 0 0;\n}\n\nmain {\n max-width: 60rem;\n margin: 0 auto;\n padding: 20px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n gap: 20px;\n}\n\n.readout {\n border: var(--border);\n background: var(--panel-bg);\n padding: 14px 16px;\n /* High-contrast, opaque background: the wave field must never make a\n * value or a label harder to read, at any amplitude. */\n /* A grid item\'s default `min-width: auto` refuses to shrink below its\n * content\'s min-content size, which an unbroken placeholder token or a\n * DID is wide enough to blow past any column width on a narrow screen.\n * `min-width: 0` lets the track (and this item) actually shrink to the\n * `minmax(260px, 1fr)`/`1fr` the layout asks for, and `overflow-wrap`\n * lets a long unbreakable string wrap inside it instead of forcing the\n * width back out. */\n min-width: 0;\n overflow-wrap: anywhere;\n}\n\n.panel-body {\n overflow-x: auto;\n}\n\n.readout h2 {\n font-size: 1em;\n font-weight: bold;\n margin: 0 0 10px;\n text-transform: lowercase;\n}\n\n.panel-body dl {\n margin: 0;\n font-size: 13px;\n}\n.panel-body dt { color: #333; margin-top: 6px; }\n.panel-body dd { margin: 0; font-weight: bold; }\n\n.panel-body table {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n}\n.panel-body th, .panel-body td {\n text-align: left;\n padding: 3px 6px 3px 0;\n border-bottom: 1px solid #bbb;\n}\n\n/* The three panel states, made visually distinct at a glance rather than\n * only by the text inside them \u{2014} a `data-state` attribute drives all three,\n * so a screenshot alone shows which is which. */\n.readout[data-state=\"live\"] { border-color: var(--live); }\n.readout[data-state=\"live\"] h2::after { content: \" \\2014 live\"; color: var(--live); font-weight: normal; font-size: 0.8em; }\n\n.readout[data-state=\"not-implemented\"] { border-color: var(--not-implemented); border-style: dashed; }\n.readout[data-state=\"not-implemented\"] h2::after { content: \" \\2014 not implemented\"; color: var(--not-implemented); font-weight: normal; font-size: 0.8em; }\n.readout[data-state=\"not-implemented\"] .panel-body { color: #444; font-style: italic; }\n\n.readout[data-state=\"unreachable\"] { border-color: var(--unreachable); }\n.readout[data-state=\"unreachable\"] h2::after { content: \" \\2014 unreachable\"; color: var(--unreachable); font-weight: normal; font-size: 0.8em; }\n.readout[data-state=\"unreachable\"] .panel-body { color: var(--unreachable); font-weight: bold; }\n\n.hint {\n font-size: 11px;\n color: #444;\n margin: 8px 0 0;\n}\n\n.trust-note {\n border-color: var(--ink);\n}\n.trust-note p {\n font-size: 12px;\n margin: 0;\n}\n\n/* The operator\'s own records, one row each. The left edge marks the rows\n naming an account this deployment holds; a row for somewhere else is an\n ordinary thing for an operator\'s repository to carry, so it is drawn in\n the page\'s own ink rather than in the colour of a failure. */\n.operator-records {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.operator-records li {\n border-left: 3px solid var(--not-implemented);\n padding-left: 8px;\n margin-bottom: 10px;\n}\n.operator-records li[data-hosted=\"here\"] {\n border-left-color: var(--live);\n}\n.operator-records li dl + dl {\n margin-top: 6px;\n}\n\n/* A panel nobody has signed in to is not a failure and not an unbuilt\n epic: it is the ordinary state of a control with a door in front of it,\n so it reads as neither red nor grey. */\n.readout[data-state=\"signed-out\"] { border-style: solid; }\n\n/* The e-stop panel\'s own controls. Bordered and square like every other\n readout on this page: this is an instrument panel, not a web form. */\n.estop-state {\n font-weight: bold;\n margin: 0 0 8px;\n}\n\n.estop-controls {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 12px;\n}\n\n.estop-controls button,\n.filter-controls button,\na.signin {\n font: inherit;\n font-size: 12px;\n padding: 6px 10px;\n border: var(--border);\n background: transparent;\n color: var(--ink);\n cursor: pointer;\n}\n\na.signin {\n display: inline-block;\n text-decoration: none;\n}\n\n/* What the server said when it refused a control: the operator pressed it\n and nothing happened, so it reads in the colour of a failure. */\n.refusal {\n margin: 8px 0 0;\n font-size: 12px;\n font-weight: bold;\n color: var(--unreachable);\n}\n\n/* Revoke ends every token and releasing does not bring them back, so it\n does not look like the other two. */\n.estop-controls button[data-action=\"revoke\"] {\n border-color: var(--unreachable);\n color: var(--unreachable);\n font-weight: bold;\n}\n\n.estop-controls button:hover,\n.filter-controls button:hover,\na.signin:hover {\n background: var(--ink);\n color: var(--paper);\n}\n\n.estop-controls button[data-action=\"revoke\"]:hover {\n background: var(--unreachable);\n color: var(--paper);\n}\n\n/* Never `outline: none`: this page\'s controls stop a swarm, and a keyboard\n operator has to be able to see which one is about to fire. */\n.estop-controls button:focus-visible,\n.filter-controls button:focus-visible,\na.signin:focus-visible {\n outline: 3px solid var(--ink);\n outline-offset: 2px;\n}\n\n/* Scoped to this panel: the about panel has its own `dl` and its own\n layout, and a rule written for the counts here would silently restyle\n it. */\n#panel-estop dl {\n display: grid;\n grid-template-columns: auto auto;\n gap: 2px 12px;\n margin: 0;\n font-size: 12px;\n}\n#panel-estop dt { color: #444; }\n#panel-estop dd { margin: 0; text-align: right; }\n\n/* The per-app panels carry tables rather than a handful of values, so each\n takes the whole row instead of one 260px column, and they sit under the\n one filter that drives all three. */\n#panel-accounts,\n#panel-app-filter,\n#panel-grants,\n#panel-refusal-log,\n#panel-writes {\n grid-column: 1 / -1;\n}\n\n.app-filter,\n.account-filter {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: 10px 16px;\n}\n\n.filter-field {\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-size: 12px;\n color: #333;\n}\n\n.filter-field input,\n.filter-field select {\n font: inherit;\n font-size: 12px;\n padding: 5px 8px;\n border: var(--border);\n background: transparent;\n color: var(--ink);\n min-width: 18rem;\n max-width: 100%;\n}\n\n.filter-controls {\n display: flex;\n gap: 8px;\n margin: 0;\n}\n\n/* Ending an app\'s logins cannot be undone by putting them back, so it is\n drawn the way the stop\'s own irreversible setting is. */\nbutton.end-logins,\nbutton.delete-accounts,\nbutton.remove-credential {\n font: inherit;\n font-size: 11px;\n padding: 3px 8px;\n border: 2px solid var(--unreachable);\n background: transparent;\n color: var(--unreachable);\n font-weight: bold;\n cursor: pointer;\n white-space: nowrap;\n}\n\nbutton.end-logins:hover,\nbutton.delete-accounts:hover,\nbutton.remove-credential:hover {\n background: var(--unreachable);\n color: var(--paper);\n}\n\nbutton.end-logins:focus-visible,\nbutton.delete-accounts:focus-visible,\nbutton.remove-credential:focus-visible,\nbutton.show-account:focus-visible {\n outline: 3px solid var(--ink);\n outline-offset: 2px;\n}\n\nbutton.show-account {\n font: inherit;\n font-size: 11px;\n padding: 3px 8px;\n border: var(--border);\n background: transparent;\n color: var(--ink);\n cursor: pointer;\n white-space: nowrap;\n}\n\nbutton.show-account:hover {\n background: var(--ink);\n color: var(--paper);\n}\n\n.filter-field input[type=\"checkbox\"] {\n min-width: 0;\n align-self: flex-start;\n}\n\n/* Account names are long and the columns beside them short, so the\n listing scrolls sideways rather than breaking a word across lines. */\n.table-scroll {\n overflow-x: auto;\n}\n#panel-accounts th,\n#panel-accounts td {\n white-space: nowrap;\n}\n\n#panel-accounts dl {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 2px 12px;\n font-size: 12px;\n}\n#panel-accounts dt { margin-top: 0; }\n\n.account-detail h3 {\n font-size: 13px;\n margin: 14px 0 6px;\n overflow-wrap: anywhere;\n}\n\n.account-detail table {\n margin-top: 10px;\n}\n\n/* A fingerprint or an issuer is long, and the remove button beside it has\n to stay in view at a phone\'s width, so that column wraps. */\n#panel-accounts .account-credentials td:nth-child(2) {\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.credential-add {\n margin-top: 10px;\n}\n\n/* The homepage at `/` (`src/home.rs`) borrows this sheet. Its boxes hold a\n few lines each, so each keeps its own height, and the claim command\n wraps rather than scrolling out of its box. */\nbody[data-claim] main { align-items: start; }\nbody[data-claim] pre {\n margin: 10px 0 0;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n font-weight: bold;\n}\n\n@media (max-width: 700px) {\n main { grid-template-columns: 1fr; }\n header.col { padding: 16px; }\n}\n\n/* Landing pages (`didbot_brand::page`): one outcome box under the\n wordmark, as narrow as the header above it. */\nbody.landing main { display: block; max-width: 40rem; padding: 20px; }\n.wordmark svg { display: block; width: 100%; height: auto; margin: 0 0 12px; }\n.landing h1 { overflow-wrap: anywhere; margin: 0; }\n.landing .readout p { margin: 0 0 10px; }\n.landing .readout ul { margin: 0 0 10px; padding-left: 20px; }\n.landing .readout .next { font-weight: bold; }\n.landing .readout .label { color: #333; }\n.landing .readout code { overflow-wrap: anywhere; }\n.landing .readout a.signin { margin-top: 4px; }\n.readout[data-tone=\"done\"] { border-color: var(--live); }\n.readout[data-tone=\"waiting\"] { border-style: dashed; }\n.readout[data-tone=\"refused\"] { border-color: var(--unreachable); }\n.readout[data-tone=\"refused\"] h2 { color: var(--unreachable); }\n";Expand description
The dashboard’s stylesheet, then what a landing page adds to it.