/* The site's stylesheet. Lifted out of _Layout.cshtml unchanged on 2026-09-23 so a
   design can be replaced or overridden without touching the layout, and so the
   browser can cache it. Razor comments became CSS comments; nothing else changed.
   The Blind-ID button has its own stylesheet, generated from brand/. */

/* One measure for the header, the body and the footer, so they line up
   whatever a page asks for. Prose wants a narrow column; a table with
   seven columns does not, and the dashboard read as squashed at the
   reading width (owner, 2026-09-11). A page widens all three together
   by setting BodyClass, never main alone, which would leave the header
   rule ending short of the content under it. */
:root {
    /* The brand, from the Blind-ID kit (owner, 2026-09-17). Everything
       that used to be blue reads from these. */
    /* 44rem is a column of prose. It was applied to the whole site,
       so pages holding tables, cards and side-by-side content were
       squeezed into a phone-width strip on a desktop (owner,
       2026-09-22). The page is wide; text inside it is what stays
       narrow, via .prose. */
    --page: 76rem;
    --brand: #4A2C5E;          /* plum */
    --brand-deep: #331F42;
    --brand-soft: #8E74A8;     /* lavender */
    --brand-wash: #F4F0F7;
    --brand-line: #DCD2E6;
    --accent: #F4D35E;         /* butter */
    --signal: #D7263D;         /* the sign */
}
body.wide-page { --page: 76rem; }
/* Running text stays readable inside a wide page: about 70 characters,
   which is the measure a 44rem body was there to give. */
.prose { max-width: 42rem; }
main > p, main > ul, main > ol, main > blockquote, main > h2 + p { max-width: 42rem; }
/* An admin panel is a working surface, not an article. It gets the
   window, with a sensible ceiling so the tables do not stretch into
   unreadable lines on a wide monitor. */
/* The panel takes the window. Reserving margins either side of a
   working surface wastes the screen it needs (owner, 2026-09-22). */
body.admin-page { --page: none; }
body.admin-page main { max-width: none; padding-left: 1.2rem; padding-right: 1.2rem; }
/* Collapsed: the sidebar shrinks to nothing and the content takes it. */
body.admin-page.admin-collapsed .admin-shell { grid-template-columns: minmax(0, 1fr); }
body.admin-page.admin-collapsed .admin-nav { display: none; }
.admin-toggle { background: none; border: 0; font: inherit; font-size: 1.05rem; line-height: 1;
                color: #5b5566; cursor: pointer; padding: .2rem .35rem; margin: 0 .3rem 0 0;
                border-radius: .2rem; }
.admin-toggle:hover { color: var(--brand-deep); background: var(--brand-wash); }
/* The form that opens under a row: labelled controls in a row that
   wraps, not a stack of full-width boxes. */
.admin-grid-form { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: end;
                   padding: .5rem 0; }
.admin-grid-form label { display: flex; flex-direction: column; gap: .15rem;
                         font-size: .78rem; color: #4a4455; }
.admin-grid-form .field { margin: 0; padding: .25rem .4rem; font-size: .85rem; width: 9.5rem; }
.admin-grid-form .admin-grid-wide .field { width: 22rem; }

/* One control per line, label above field, field the full width. The
   row shape above is right for a toolbar and wrong anywhere narrow: in
   a slide-out and under an expanded row it wrapped labels away from
   their fields and squeezed every box (owner, 2026-09-22). */
.stack-form { display: flex; flex-direction: column; gap: .55rem; }
.stack-form label { display: flex; flex-direction: column; gap: .22rem;
                    font-size: .76rem; font-weight: 600; letter-spacing: .02em;
                    text-transform: uppercase; color: #3a3446; }
.stack-form label .hint { font-weight: 400; text-transform: none; letter-spacing: 0;
                          font-size: .78rem; color: #6b6478; }
.stack-form .field, .stack-form select.field, .stack-form textarea.field {
    width: 100%; margin: 0; padding: .35rem .5rem; font-size: .9rem; box-sizing: border-box; }
.stack-form textarea.field { min-height: 5rem; resize: vertical; }
.stack-form label:has(input[type=checkbox]) { flex-direction: row; align-items: center;
                                              gap: .45rem; font-size: .88rem; color: #23202b; }
.stack-form label:has(input[type=checkbox]) input { margin: 0; }
/* The action sits at the end, on the right, where a panel's action goes. */
.stack-actions { display: flex; justify-content: flex-end; gap: .5rem;
                 border-top: 1px solid var(--brand-line); padding-top: .7rem; margin-top: .3rem; }
.stack-form > .btn { align-self: flex-end; }
/* The acknowledgement reads as a statement, not another field. */
.stack-form label.ack { background: #fff8e1; border: 1px solid #e8d9a8; border-radius: .3rem;
                        padding: .5rem .6rem; }
/* The overflow menu on a table row. Destructive actions live in here
   rather than sitting in the row inviting a click. */
.acct-menu { position: relative; }
.acct-menu > summary { list-style: none; cursor: pointer; padding: .3rem .7rem;
                       border: 1px solid var(--brand-line); border-radius: .25rem;
                       font-size: .9rem; color: #23202b; white-space: nowrap; }
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-menu > summary:hover { background: var(--brand-wash); }
.acct-menu-body { position: absolute; right: 0; z-index: 40; margin-top: .3rem;
                  background: #fff; border: 1px solid var(--brand-line); border-radius: .3rem;
                  box-shadow: 0 8px 22px rgba(20, 12, 32, .15); min-width: 11rem;
                  display: flex; flex-direction: column; padding: .25rem; }
.acct-menu-body a, .acct-signout { padding: .45rem .6rem; text-align: left; font: inherit;
                                   font-size: .9rem; color: #23202b; text-decoration: none;
                                   background: none; border: 0; border-radius: .22rem;
                                   cursor: pointer; width: 100%; }
.acct-menu-body a:hover, .acct-signout:hover { background: var(--brand-wash); }
.acct-signout { color: #b00020; border-top: 1px solid var(--brand-line); border-radius: 0; }
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; cursor: pointer; width: 1.5rem; height: 1.3rem;
                      display: inline-flex; align-items: center; justify-content: center;
                      border: 0; border-radius: .2rem; font-size: .9rem; line-height: 1;
                      color: #6b6478; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover { background: var(--brand-wash); color: var(--brand-deep); }
/* Reserved on every row, so rows are the same height whether or not
   there is anything to do on them (owner, 2026-09-22). */
.dense-log td.w-menu { width: 1.5rem; padding-left: .2rem; padding-right: .2rem; }
.dense-log td.w-menu > .row-menu { display: block; min-height: 1.3rem; }
.row-menu-body { position: absolute; right: 0; z-index: 30; margin-top: .25rem;
                 background: #fff; border: 1px solid var(--brand-line); border-radius: .3rem;
                 box-shadow: 0 6px 18px rgba(20, 12, 32, .13); padding: .5rem; min-width: 13rem; }
.admin-grid-form label:has(input[type=checkbox]) { flex-direction: row; align-items: center;
                                                   gap: .35rem; font-size: .9rem; }
body { font: 16px/1.5 system-ui, sans-serif; margin: 0; color: #111; background: #fff; }
/* The side gutter grows a little on a narrow window, so text is never against
   the glass, and stays modest on a wide one where the column already has room
   (owner, 2026-09-23). */
main { max-width: var(--page); margin: 0 auto; padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 3rem; }
/* An admin page starts at the top. 24px of reading margin under the
   bar reads as another empty row of chrome (owner, 2026-09-22). */
body.admin-page main { padding: 0; max-width: none; }
body.admin-page .admin-shell { padding: 0 1.2rem; gap: 0; min-height: calc(100vh - 8rem); }
body.admin-page .admin-nav { padding: .8rem .9rem .8rem 0; }
body.admin-page .admin-body { padding: .8rem 0 .8rem 1.6rem; min-width: 0; }
a { color: var(--brand); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.banner { background: #b00020; color: #fff; text-align: center; padding: .4rem 1rem; font-size: .9rem; }
/* One rule for every button, whether it is a <button> or an <a>.
   A <button> inherits neither the page font nor a predictable
   line-height, and an <a> has no button box at all, so the two rendered
   at different heights side by side and a .btn-link patch only papered
   over it (owner, 2026-09-11). Naming the font, the line-height and the
   box model here makes them identical by construction. */
.btn { display: inline-flex; align-items: center; justify-content: center;
       box-sizing: border-box; font: inherit; font-size: 1rem; line-height: 1.25;
       background: var(--brand); color: #fff; padding: .6rem 1rem;
       border: 0; border-radius: .25rem; cursor: pointer; text-decoration: none;
       vertical-align: top; }
.btn-lg { font-size: 1.05rem; padding: .8rem 1.5rem; }
.btn-outline { display: inline-block; border: 1px solid var(--brand); color: var(--brand); padding: .35rem .8rem;
       border-radius: .25rem; font-size: .9rem; text-decoration: none; }
.muted { color: #555; font-size: .9rem; }
/* Visible to a screen reader, to nobody else. For places where a glyph
   carries the meaning and the word has to exist somewhere. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid #ddd; }
/* Prose disclosures get breathing room. Components built from details
   must not: the account menu is a details, so this rule was adding
   16px above and below it and making the whole header 58px tall, and it
   was the spacing between every publishing row too. It cost ten rounds
   of looking at the wrong properties (owner, 2026-09-22). */
details { margin: 1rem 0; }
.acct-menu, .row-menu, .platform-row, .console-switch-menu,
details.tidy, details.admin-section { margin: 0; }
.qr { width: 220px; height: 220px; }

/* site chrome */
.site-header { border-bottom: 1px solid #eee; }
/* ---- Developer console, docked toolbars (owner, 2026-09-15) ---- */
.biz-tabs { display: flex; align-self: stretch; margin: 0; }
.biz-tabs a { display: flex; align-items: center; height: 2.1rem; padding: 0 .6rem; color: #334;
              white-space: nowrap; flex: none;
              text-decoration: none; font-weight: 600; font-size: .84rem;
              border-bottom: 2px solid transparent; }
.biz-tabs a:hover { color: var(--brand); background: var(--brand-wash); }
.biz-tabs a.current { color: var(--brand); border-bottom-color: var(--brand); }
.nav-links { font-size: .86rem; }
.acct-menu > summary { padding: 0 .5rem; font-size: .82rem; height: 1.55rem; white-space: nowrap;
                       display: inline-flex; align-items: center; }
@media (max-width: 640px) { .biz-tabs { margin: 0; width: 100%; } .biz-tabs a { padding: 0 .5rem; } }
.ctx-personal { --ctx: #334155; --ctx-soft: #eef2f6; --ctx-line: #cbd5e1; }
.ctx-org { --ctx: #0f5e57; --ctx-soft: #e4f3f0; --ctx-line: #b5ddd5; }
.console-shell { margin: -1.5rem calc(50% - 50vw) 1.5rem; }
.console-bar-inner { max-width: var(--page); margin: 0 auto; padding: 0 1rem; display: flex; align-items: stretch; flex-wrap: wrap; }
.console-toolbar { background: var(--ctx); color: #fff; }
.console-toolbar details > summary { list-style: none; cursor: pointer; }
.console-toolbar details > summary::-webkit-details-marker { display: none; }
.ctx-switch, .account-menu { position: relative; display: flex; }
.ctx-switch > summary { display: flex; align-items: baseline; gap: .5rem; align-self: center;
                        padding: .3rem 1rem .3rem 0; margin-right: .8rem; border-right: 1px solid rgba(255,255,255,.22); }
.ctx-kind { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.ctx-name { font-weight: 700; font-size: .95rem; }
.ctx-caret { font-size: .75rem; opacity: .8; align-self: center; }
.console-tabs { display: flex; align-items: stretch; overflow-x: auto; }
.console-tabs { gap: .25rem; }
.console-tabs a { display: flex; align-items: center; padding: 0 1rem; min-height: 2.35rem; color: rgba(255,255,255,.82);
                  text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.console-tabs a:hover { color: #fff; background: rgba(255,255,255,.08); }
.console-tabs a.current { color: #fff; border-bottom-color: #fff; background: rgba(255,255,255,.14); }
.account-menu { margin-left: auto; }
.account-menu > summary { display: flex; align-items: center; gap: .45rem; padding: 0 0 0 1rem; color: rgba(255,255,255,.9); font-weight: 600; }
.account-menu > summary.current { color: #fff; }
.ctx-menu { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 16rem; list-style: none; margin: 0; padding: .3rem 0;
            background: #fff; color: #1e293b; border: 1px solid #cbd5e1; border-radius: 0 0 .4rem .4rem; box-shadow: 0 8px 22px rgba(15,23,42,.14); }
.ctx-menu-right { left: auto; right: 0; }
.ctx-menu-id { display: grid; gap: .2rem; padding: .5rem .85rem .6rem; border-bottom: 1px solid var(--brand-line); }
.ctx-menu-id .console-key { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5b5566; }
.ctx-menu-id .mono { font-size: .82rem; word-break: break-all; background: var(--brand-wash); color: var(--brand-deep);
                     padding: .3rem .45rem; border-radius: .3rem; user-select: all; }
.ctx-menu a, .ctx-menu-button { display: flex; justify-content: space-between; align-items: center; gap: .6rem; width: 100%;
                                padding: .5rem .85rem; color: #1e293b; text-decoration: none; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.ctx-menu a:hover, .ctx-menu-button:hover, .ctx-menu a.current { background: #eef4fb; }
.ctx-menu-new { border-top: 1px solid var(--brand-line); }
.console-subbar { background: var(--ctx-soft); border-bottom: 1px solid var(--ctx-line); }
.console-subbar a { display: flex; align-items: center; padding: .4rem 1rem; color: #1e293b; text-decoration: none; font-weight: 600;
                    border-bottom: 2px solid transparent; }
.console-subbar a:hover { color: var(--ctx); }
.console-subbar a.current { color: var(--ctx); border-bottom-color: var(--ctx); }
/* Details grid: one height per row, whether or not a value can be copied. */
/* No overflow clipping here: an info card opened inside the grid has to be
   able to spill past its edge. The corners are rounded on the rows instead. */
.kv { border: 1px solid #d7dee8; border-radius: .5rem; background: #fff; margin: .75rem 0; }
.kv > :first-child { border-top-left-radius: calc(.5rem - 1px); border-top-right-radius: calc(.5rem - 1px); }
.kv > :last-child { border-bottom-left-radius: calc(.5rem - 1px); border-bottom-right-radius: calc(.5rem - 1px); }
.kv-group { background: #f3f6fa; padding: .45rem .9rem; font-size: .76rem; font-weight: 700; letter-spacing: .07em;
            text-transform: uppercase; color: #475569; border-bottom: 1px solid var(--brand-line); }
.kv-row { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; align-items: center; min-height: 3.5rem;
          border-bottom: 1px solid var(--brand-line); }
.kv-row:last-child { border-bottom: 0; }
.kv-label { padding: .5rem .9rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.kv-value { padding: .5rem .9rem; min-width: 0; }
.kv-text { display: flex; align-items: center; min-height: 2.5rem; }
.copy-field { display: flex; align-items: stretch; }
.copy-field .field { height: 2.5rem; margin: 0; border-radius: .35rem 0 0 .35rem; background: #fbfcfd; min-width: 0; }
.copy-field .copy-btn { position: static; height: 2.5rem; width: 2.75rem; border: 1px solid #ccd3dc; border-left: 0;
                        border-radius: 0 .35rem .35rem 0; background: #fff; }
.kv-row-secret { background: #fff7e0; }
.kv-row-secret .kv-label::before { content: "\1F512"; }
.kv-row-secret .copy-field .field { background: #fff; border-color: #c98a00; font-weight: 700; }
.kv-row-secret .copy-field .copy-btn { border-color: #c98a00; }
.kv-secret-note { margin: .45rem 0 0; font-size: .88rem; color: #6b4200; }
.kv-more { margin: .7rem 0; }
.kv-more > summary { cursor: pointer; font-weight: 600; color: var(--brand); padding: .35rem 0; }
.kv-more-note { margin: .3rem 0; }
.kv-hint { font-size: .92rem; color: #444; margin: .4rem 0 .8rem; }
.kv-hint-strong { font-size: 1rem; color: #111; background: #eef2f6; padding: .1rem .4rem; border-radius: .25rem; }
@media (max-width: 640px) { .kv-row { grid-template-columns: 1fr; } .kv-label { padding-bottom: 0; } }
/* (i) help icons. */
/* Raised like an exponent: its top meets the top of the text, then it is
   lifted by relative positioning, which never changes the line's height.
   align-self does the same job where the label is a flex container. */
.info { position: relative; top: -.35em; display: inline-block; vertical-align: text-top; align-self: flex-start;
        line-height: 0; margin-left: .2rem;
        cursor: help; outline: none; font-weight: 400; color: #5b7aa6; }
.info-icon { display: block; border-radius: 50%; box-shadow: 0 1px 2px rgba(15,23,42,.25), 0 0 0 2px rgba(91,122,166,.14); }
.info:hover, .info:focus { color: var(--brand); }
.info:focus-visible .info-icon { box-shadow: 0 0 0 3px rgba(4,81,153,.35); }
.info-card { display: none; position: absolute; left: -.6rem; bottom: calc(100% + .4rem); line-height: 1.45; width: max-content; max-width: min(21rem, 80vw);
             background: #0f172a; color: #fff; font-size: .82rem; font-weight: 400; font-style: normal; line-height: 1.45; letter-spacing: 0;
             text-transform: none; white-space: normal; text-align: left; padding: .55rem .7rem; border-radius: .35rem; z-index: 50;
             box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.info:hover .info-card, .info:focus .info-card { display: block; }
.domain-row-value { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.domain-row-value .kv-text { gap: .7rem; flex-wrap: wrap; }
.domain-remove { margin: 0; }
.domain-card { border: 1px solid #d7dee8; border-radius: .5rem; padding: .2rem 1rem 1rem; margin: .8rem 0; background: #fff; }
.domain-card-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.domain-card-head h3 { margin: .7rem 0; }
/* Actions that should take intent open a dialog: say what happens, then
   Cancel or do it (owner, 2026-09-15). A button that both opens and cancels
   a panel read as two buttons for one thing. */
.btn-secondary { background: #fff; color: #1e293b; border: 1px solid #cbd5e1; }
.btn-secondary:hover { background: #f4f7fb; }
.btn-danger-outline.btn { background: #fff; padding: .6rem 1rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.confirm-dialog { border: 0; border-radius: .6rem; padding: 0; width: min(32rem, calc(100vw - 2rem)); color: #111;
                  box-shadow: 0 20px 60px rgba(15,23,42,.35); }
.confirm-dialog::backdrop { background: rgba(15,23,42,.5); }
.confirm-dialog-body { padding: 1.3rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.confirm-dialog-body h2 { margin: 0 0 .2rem; font-size: 1.25rem; border: 0; padding: 0; }
.confirm-dialog-body p { margin: 0 0 .3rem; }
.confirm-dialog-body .field { margin: 0; }
.member-row { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; min-height: 2.9rem; }
.member-row .member-who { flex: 1 1 16rem; min-width: 0; flex-wrap: wrap; gap: .1rem .6rem; }
.member-row .member-who .mono { word-break: break-all; }
.member-row .member-actions { flex: 0 0 auto; }
.member-name { font-weight: 600; }
.member-id { font-size: .82rem; }
.member-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.member-actions .console-row { margin: 0; }
/* Activity: one line per thing somebody did. */
.activity-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .8rem 0; }
.activity-list { list-style: none; margin: 0; padding: 0; border: 1px solid #d7dee8; border-radius: .5rem; background: #fff; }
.activity-list li { display: grid; grid-template-columns: 11rem 1fr; gap: .2rem 1rem; padding: .7rem .9rem; border-bottom: 1px solid var(--brand-line); }
.activity-list li:last-child { border-bottom: 0; }
.activity-when { color: #555; font-size: .88rem; }
.activity-what strong { font-weight: 600; }
.activity-meta { grid-column: 2; color: #667; font-size: .84rem; }
@media (max-width: 640px) { .activity-list li { grid-template-columns: 1fr; } .activity-meta { grid-column: 1; } }
/* Explanations on the consent page: closed, so the page stays one
   decision, and one tap from an answer. */
.consent-why { margin: .15rem 0 .3rem; }
.consent-why > summary { cursor: pointer; color: var(--brand); font-size: .84rem; }
.consent-why p { font-size: .88rem; color: #333; margin: .3rem 0 .2rem; }
.consent-why-wide > summary { font-weight: 600; }
.consent-math { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem;
                background: #f3f6fa; border: 1px solid var(--brand-line); border-radius: .35rem;
                padding: .6rem .7rem; overflow-x: auto; white-space: pre; }
.table-scroll { overflow-x: auto; }
.contract-table .field { margin: 0; }
.contract-table th { font-size: .85rem; color: #445; }
.contract-required { text-align: center; }
.signin-log { font-size: .92rem; }
.signin-log td { vertical-align: top; }
.signin-agent { color: #555; font-size: .85rem; max-width: 22rem; }
.code-block { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem;
              background: #f3f6fa; border: 1px solid var(--brand-line); border-radius: .35rem;
              padding: .7rem .8rem; overflow-x: auto; white-space: pre; }
.console-search { margin: .6rem 0 1rem; }
.status-days { display: flex; gap: 1px; margin-top: .35rem; height: 1.4rem; width: 100%; }
.status-days span { flex: 1 1 0; border-radius: 1px; }
.status-ok { background: #2e9e5b; } .status-some { background: #e0b43a; }
.status-bad { background: #d0453a; } .status-none { background: #dde2e8; }
.docs-nav { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0 0 1.2rem; padding-bottom: .6rem;
            border-bottom: 1px solid var(--brand-line); font-size: .95rem; }
.docs-nav a { text-decoration: none; }
.docs-nav a.current { font-weight: 600; text-decoration: underline; }
.console-search .field { flex: 1 1 16rem; min-width: 0; margin: 0; }
.usage-chart { display: flex; align-items: flex-end; gap: 2px; height: 8rem; padding: .3rem 0;
               border-bottom: 1px solid #d5dbe2; }
.usage-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.usage-bar span { display: block; width: 100%; min-height: 1px; background: #2f6fde; border-radius: 2px 2px 0 0; }
.usage-axis { display: flex; justify-content: space-between; font-size: .8rem; margin-top: .3rem; }
.receipt-token { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem;
                 word-break: break-all; background: #f3f6fa; border: 1px solid var(--brand-line);
                 border-radius: .35rem; padding: .6rem; }
@media print { .console-shell, .no-print, header, footer { display: none !important; } }
.dependent-sites { margin: .2rem 0 0; padding-left: 1.2rem; }
.dependent-sites li { margin: .2rem 0; }
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
/* A row's rarely used actions, behind a menu button at its right edge. */
.row-menu { position: relative; margin: 0 0 0 auto; }
.row-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
                      width: 2.2rem; height: 2.2rem; border-radius: .35rem; color: #475569; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover, .row-menu[open] > summary { background: #eef2f6; color: #111; }
.row-menu-list { position: absolute; right: 0; top: calc(100% + .2rem); z-index: 40; min-width: 12rem; padding: .3rem 0;
                 background: #fff; border: 1px solid #cbd5e1; border-radius: .4rem; box-shadow: 0 8px 22px rgba(15,23,42,.14); }
.row-menu-item { display: block; width: 100%; padding: .5rem .9rem; background: none; border: 0; font: inherit;
                 text-align: left; cursor: pointer; color: #1e293b; }
.row-menu-item:hover, .row-menu-item:focus-visible { background: #eef4fb; }
.row-menu-danger { color: #b00020; }
/* Developer console. */
.linklike { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; cursor: pointer; text-decoration: underline; }
.console-bar { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; flex-wrap: wrap;
               border: 1px solid var(--brand-line); border-radius: .5rem; padding: .5rem .8rem; margin: 0 0 1.2rem; background: #f7fafd; }
.console-switch-menu { position: relative; }
.console-switch-menu summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; gap: .5rem; align-items: center; }
.console-switch-menu summary::after { content: "\25BE"; color: #667; font-size: .8rem; }
.console-switch-menu ul { position: absolute; z-index: 5; left: 0; top: 1.9rem; min-width: 16rem; list-style: none; margin: 0;
                          padding: .3rem 0; background: #fff; border: 1px solid var(--brand-line); border-radius: .4rem; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.console-switch-menu li a { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem .8rem; color: #222; text-decoration: none; }
.console-switch-menu li a:hover, .console-switch-menu li a.current { background: #eef4fb; }
.console-switch-new { border-top: 1px solid var(--brand-line); }
.console-role { font-size: .75rem; font-weight: 600; color: #556; background: #e8edf3; border-radius: .25rem; padding: .1rem .45rem; }
.console-links { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .95rem; }
.console-tab { display: inline-block; padding: .4rem .8rem; border: 1px solid transparent; border-radius: .3rem;
               color: #334; text-decoration: none; font-weight: 600; }
.console-tab:hover { background: #fff; border-color: var(--brand-line); color: var(--brand); }
.console-tab.current { background: #fff; border-color: var(--brand); color: var(--brand); }
.console-tab-button { background: none; font: inherit; cursor: pointer; }
.console-rename > summary { cursor: pointer; display: inline-block; list-style: none; }
.console-rename > summary::-webkit-details-marker { display: none; }
.console-rename[open] > summary { display: none; }
.console-rename .console-row { margin-top: .5rem; }
.console-record { border: 1px solid var(--brand-line); border-radius: .4rem; overflow: hidden; margin: .6rem 0; }
.console-record > div { display: flex; flex-wrap: wrap; gap: .2rem .8rem; padding: .55rem .8rem; border-bottom: 1px solid var(--brand-line); align-items: center; }
.console-record > div:last-child { border-bottom: 0; }
.console-record .console-key { min-width: 7rem; font-weight: 600; }
.console-signout { display: inline; }
.console-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.console-head h1 { margin: .2rem 0; }
.console-list { list-style: none; margin: .6rem 0 1rem; padding: 0; border: 1px solid var(--brand-line); border-radius: .4rem; }
.console-list > li { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; padding: .65rem .85rem; border-bottom: 1px solid var(--brand-line); }
.console-list > li:last-child { border-bottom: 0; }
.console-list-main { flex: 1 1 16rem; display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 0; }
.console-site-name { font-weight: 700; }
.console-mode { font-size: .78rem; font-weight: 700; border-radius: .25rem; padding: .15rem .5rem; }
.console-mode-testing { background: #fff3d6; color: #7a4a00; }
.console-mode-live { background: #dff3e5; color: #0a5d23; }
.console-empty { border: 1px dashed var(--brand-line); border-radius: .5rem; padding: .4rem 1rem; margin: 1rem 0; }
.console-section { border-top: 1px solid var(--brand-line); margin-top: 1.4rem; padding-top: .2rem; }
.console-danger h2 { color: #b00020; }
.console-secret { border: 2px solid #a15c00; border-radius: .5rem; padding: .2rem 1rem 1rem; background: #fffaf0; }
.console-form { display: flex; flex-direction: column; gap: .35rem; max-width: 40rem; }
.console-form .btn { align-self: flex-start; margin-top: .6rem; }
.console-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.console-row { align-items: center; }
.console-row .field { flex: 1 1 14rem; width: auto; }
/* A field and its button sit on one line at one height (owner, 2026-09-15). */
.console-row > .field, .console-row > .btn, .console-row > select.field { height: 2.75rem; margin: 0; }
.console-values .console-key { font-weight: 600; min-width: 11rem; display: inline-block; }
.console-values li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.console-values .code-copy { flex: 1 1 18rem; }
.console-problems { color: #7a1020; }
.console-kind { border: 0; padding: 0; margin: .6rem 0; display: flex; flex-direction: column; gap: .3rem; }
.console-check { display: flex; gap: .5rem; align-items: flex-start; margin: .4rem 0; }
.console-signin { max-width: 30rem; margin: 1rem auto; }
.console-methods { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.console-methods .btn { width: 100%; }
.console-email { margin-top: 1.2rem; }
.console-fineprint { margin-top: 1.5rem; }
.console-dns { flex-basis: 100%; }
.connect-testing { background: #fff3d6; color: #7a4a00; border-radius: .3rem; padding: .35rem .7rem; font-size: .9rem; }
.admin-limits { display: flex; flex-direction: column; gap: .3rem; max-width: 26rem; }
/* Business landing. */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.product-card { border: 1px solid var(--brand-line); border-radius: .5rem; padding: .3rem 1rem 1rem; background: #fff; }
.product-card h2 { font-size: 1.15rem; margin: .7rem 0 .3rem; }
.product-soon { font-size: .75rem; font-weight: 700; background: #e8edf3; color: #556; border-radius: .25rem; padding: .1rem .45rem; margin-left: .3rem; }
.site-nav { max-width: var(--page); margin: 0 auto; padding: 0 1rem; display: flex;
            align-items: center; justify-content: space-between; gap: 0 .9rem;
            flex-wrap: nowrap; min-height: 2.1rem; }
/* The tabs give way before the bar does: they scroll sideways rather
   than wrapping onto a second line and doubling its height. */
.site-nav > .biz-tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.site-nav > .biz-tabs::-webkit-scrollbar { display: none; }
.site-nav > .nav-links { flex: none; }
/* Every row of the bar is one height, set here and nowhere else, so a
   change to it cannot be undone by an item's own padding. */
.site-nav > * { min-height: 0; }
.wordmark { font-weight: 800; font-size: .95rem; color: #111; text-decoration: none;
            letter-spacing: -.02em; display: inline-flex; align-items: center; gap: .5rem; }
.wordmark-logo { display: block; border-radius: .3rem; flex: 0 0 auto; }
.nav-links { display: flex; align-items: center; gap: .5rem .9rem; font-size: .95rem;
             flex-wrap: wrap; }
@media (max-width: 33rem) {
    .site-nav { justify-content: flex-start; }
    .nav-links { font-size: .88rem; width: 100%; }
}
.nav-links a { color: #333; text-decoration: none; }
.nav-links a:hover { color: var(--brand); }
/* With the sections now tabs, what is left in nav-links is the account
   and the sign-in. They belong at the far end, away from the tabs, so
   the two are not read as one row of links. */
.biz-tabs + .nav-links { margin-left: auto; }
.nav-signin { display: inline-flex; align-items: center; margin-left: .6rem; }
.nav-signin-btn { font: 600 .92rem/1 inherit; color: #fff; background: var(--brand); border: 0;
                  border-radius: .4rem; padding: .48rem .9rem; cursor: pointer; }
.nav-signin-btn:hover { filter: brightness(1.08); }
.nav-signin-btn:focus-visible { outline: 3px solid var(--butter, #F4D35E); outline-offset: 2px; }
.nav-cta { background: var(--brand); color: #fff !important; padding: .4rem .9rem; border-radius: .25rem;
           border: 0; font: inherit; cursor: pointer; }
.site-footer { max-width: var(--page); margin: 2rem auto 0; padding: 1.5rem 1rem 2.5rem;
               border-top: 1px solid #eee; color: #777; font-size: .85rem; }
.site-footer a { color: #555; }

.devfield-row { display: flex; align-items: center; justify-content: space-between;
                 gap: .5rem; margin-top: 1rem; }
.devfield-row p { margin: 0; }
/* The one-time handoff page: a single dedicated action, not a page of
   site chrome. Square-ish and nearly full width so it is unmissable
   and easy to hit on a phone. */
.tap-target { display: flex; flex-direction: column; align-items: center;
              justify-content: center; gap: .6rem; width: 100%; max-width: 22rem;
              aspect-ratio: 1 / 1; margin: 1.5rem auto; padding: 1.5rem;
              background: var(--brand); color: #fff; border: 0; border-radius: 1.25rem;
              font: inherit; font-size: 1.35rem; font-weight: 700; line-height: 1.3;
              text-align: center; cursor: pointer; }
.tap-target:disabled { opacity: .55; cursor: default; }
/* Success belongs ON the button the user just pressed, not in small
   text further down the page. */
.tap-target.done { background: #0a7d2c; opacity: 1; }
.tap-target.busy { background: #2b6ca3; }
.tap-target .sub { font-size: .95rem; font-weight: 400; opacity: .9; }
.tap-target svg, .tap-target img { width: 3.5rem; height: 3.5rem; }
.handoff-page .site-nav .nav-links { display: none; }
.list-controls { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
                 margin: 1rem 0 .6rem; }
.list-controls .field { max-width: 20rem; }
.chk { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; color: #444; }
th .sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
           color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
th .sort:hover { color: var(--brand); }
th .sort.asc::after  { content: "\2191"; font-size: .8em; }
th .sort.desc::after { content: "\2193"; font-size: .8em; }
.easy-signin { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 1rem; }
.easy-signin .btn[disabled] { opacity: .5; cursor: default; }
.copy-btn { display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 28px; height: 28px; padding: 0; border: 1px solid #ccc; border-radius: .3rem;
            background: #fff; color: #555; cursor: pointer; }
.copy-btn:hover { background: #f4f4f4; color: #111; }
.copy-btn .icon-check { display: none; }
.copy-btn.copied { color: #0a7d2c; border-color: #0a7d2c; }
.copy-btn.copied .icon-copy { display: none; }
.copy-btn.copied .icon-check { display: block; }

.key { color: #7c3aed; font-weight: 700; }

/* Admin stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
             gap: .7rem; margin: 1rem 0; }
.stat { border: 1px solid #ddd; border-radius: .5rem; padding: .8rem .9rem; background: #fafafa; }
.stat-n { display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-l { display: block; font-size: .8rem; color: #666; text-transform: uppercase;
          letter-spacing: .04em; margin-top: .2rem; }

/* State coverage table */
.coverage th, .coverage td { white-space: nowrap; }
.cov-yes { color: #0a7d2c; font-weight: 600; }
.cov-no { color: #b00020; }
.cov-unknown { color: #888; }
.quick-check { border: 2px solid #0a7d2c; background: #f2fbf4; border-radius: .5rem;
               padding: .3rem 1.1rem 1rem; margin: 1.5rem 0; }
.quick-check h2 { color: #0a7d2c; }
.state-check-link { display: inline-block; margin-top: .6rem; font-size: .95rem; }

/* Legal pages: the distinctive block is visually separated from the
   boilerplate, so a reader can tell at a glance which part is worth
   their attention. */
/* A quiet status marker, not a warning. It says the document is not
   final; it must never editorialise about its own standing, which
   reads as the operator undermining their own policy page. */
.draft-banner { display: inline-block; background: #f2f2f2; border: 1px solid #d4d4d4;
                color: #5c5c5c; border-radius: .25rem; padding: .12rem .5rem;
                margin: 0 0 1rem; font-size: .72rem; letter-spacing: .06em;
                text-transform: uppercase; }
/* The publish instructions. Styled as the primary next action rather
   than as help text: it is the one thing a person must do for the
   proof to mean anything. */
.publish-guide { border: 2px solid var(--brand); background: var(--brand-wash); border-radius: .5rem;
                 padding: .4rem 1.1rem 1.1rem; margin: 1.5rem 0; }
.publish-guide h2 { color: var(--brand); }
/* Copy button sitting on the code block rather than floating above it. */
.code-copy { position: relative; }
.code-copy .copy-btn { position: absolute; top: .5rem; right: .5rem; z-index: 1;
                       background: #fff; border: 1px solid #ccc; border-radius: .25rem; }
.publish-platform { color: var(--brand); }
.publish-where { font-size: 1.05rem; margin: .2rem 0 .6rem; }
.publish-steps { margin: 0; padding-left: 1.3rem; }
.publish-steps li { margin: .3rem 0; }
.publish-caveat { margin: .8rem 0 0; }
/* Recovery. Amber rather than red: it is a thing to do, not a thing
   that has gone wrong. */
.recovery-block { border: 1px solid #d9cb96; background: #fffdf5; border-radius: .5rem;
                  padding: .4rem 1.1rem 1.1rem; margin: 2rem 0 0; }
.recovery-warn { border-left: 3px solid #a15c00; padding: .5rem .8rem; margin: .5rem 0;
                 background: #fff8e8; }
.recovery-code { background: #fff; border: 1px solid #d9cb96; border-radius: .4rem;
                 padding: 1rem; margin: .5rem 0; font-size: 1.15rem; letter-spacing: .06em;
                 overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
/* The sign-in page a site sends people to. Seen at every sign-in, so
   it is built for the first phone screen: brand line, one heading,
   three short facts, the button. Detail folds away underneath. */
.connect-brand { display: flex; align-items: center; gap: .45rem; justify-content: center;
                 padding: .55rem 1rem; border-bottom: 1px solid #eee; font-weight: 800;
                 font-size: .95rem; letter-spacing: -.01em; color: #111; }
body.connect-page { --page: 34rem; }
body.connect-page main { padding-top: 1rem; padding-bottom: 2rem; }
.connect-title { font-size: 1.35rem; line-height: 1.25; margin: 0 0 .7rem; }
.connect-lede { margin: 0 0 1rem; }
.connect-facts { list-style: none; margin: 0 0 1rem; padding: 0; border: 1px solid var(--brand-line);
                 border-radius: .5rem; overflow: hidden; }
.connect-facts li { padding: .6rem .85rem; border-bottom: 1px solid var(--brand-line); font-size: .95rem;
                    line-height: 1.4; }
.connect-facts li:last-child { border-bottom: 0; }
.connect-facts li:nth-child(2) { background: var(--brand-wash); }
.connect-cta { width: 100%; }
.connect-action .signin-note { margin: .35rem 0 0; }
/* Under the button: the handover to the phone. Prominent, because it
   is the moment control leaves this page (owner, 2026-09-14). */
.signin-hint { margin: .7rem 0 0; border-left: 3px solid var(--brand); background: var(--brand-wash);
               border-radius: .3rem; padding: .55rem .8rem; }
.signin-hint p { margin: 0; }
.signin-hint-main { font-size: .98rem; color: #111; line-height: 1.4; }
.signin-hint-sub { font-size: .82rem; color: #4a5a6a; margin-top: .3rem !important; }
.signin-hint-link { white-space: nowrap; }

/* The Blind-ID sign-in button. Mark on the left in its own square, the
   action beside it, a darker docked strip naming the method underneath:
   the shape people already know from "Sign in with Microsoft" and the
   rest, so this reads as a provider's button and not a generic one
   (owner, 2026-09-14). */
/* The IDs are the point of this panel; adding one sits quietly beside
   them (owner, 2026-09-21). */
.domain-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .4rem; font-size: .85rem; }
.domain-chip { border: 1px solid var(--brand-line); background: var(--brand-wash); color: var(--brand-deep);
               border-radius: 999px; padding: .15rem .65rem; font-size: .82rem; cursor: pointer; }
.domain-chip:hover { border-color: var(--brand); }
.check-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; scroll-margin-top: 5rem; }
.check-result { font-size: .85rem; color: #7a3b00; background: #fff6e8; border: 1px solid #f0d9b5;
                border-radius: .3rem; padding: .35rem .6rem; flex: 1 1 18rem; }
.match-gate { border: 1px solid var(--brand-line); border-radius: .5rem; padding: 1rem; margin: .8rem 0; }
.match-title { font-size: 1.05rem; margin: 0 0 .4rem; }
.match-gate form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .7rem 0 0; }
.match-input { width: 8.5rem; font-size: 1.8rem; letter-spacing: .3em; text-align: center;
               text-transform: uppercase; margin: 0; padding: .55rem .4rem; }
.match-error { color: #b00020; font-size: .9rem; margin: .5rem 0 0; }
/* Admin panel: sidebar and dense content, the shape every admin panel
   has. Not cards, because a card says "this is a thing on its own" and
   a list of settings is not eleven separate things. */
.admin-shell { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: 1.6rem;
               align-items: stretch; min-height: calc(100vh - 12rem); }
.admin-nav { border-right: 1px solid var(--brand-line); padding-right: .9rem; }
.admin-nav-sticky { position: sticky; top: 1rem; display: flex; flex-direction: column;
                    gap: .9rem; font-size: .88rem; }
.admin-nav-group { display: flex; flex-direction: column; }
.admin-nav-head { font-size: .68rem; font-weight: 700; letter-spacing: .09em;
                  text-transform: uppercase; color: #6b6478; padding: 0 .4rem .25rem; }
.admin-nav a { color: #23202b; text-decoration: none; padding: .26rem .45rem; border-radius: .22rem;
               border-left: 2px solid transparent; }
.admin-nav a:hover { background: var(--brand-wash); }
.admin-nav a.current { background: var(--brand-wash); border-left-color: var(--brand);
                       color: var(--brand-deep); font-weight: 600; }
.admin-nav a.admin-nav-danger { color: #b00020; }
.admin-body > h1:first-child { margin-top: 0; }
@media (max-width: 52rem) {
    .admin-shell { grid-template-columns: 1fr; gap: 1rem; }
    .admin-shell { min-height: 0; }
    .admin-nav { border-right: 0; border-bottom: 1px solid var(--brand-line); padding: 0 0 .7rem; }
    .admin-nav-sticky { position: static; flex-direction: row; flex-wrap: wrap; gap: .5rem 1.1rem; }
    .admin-nav-head { display: none; }
}
/* Figures at the top of the dashboard: a row of numbers, not a wall of
   boxes. The number is the point, so it is the only large thing. */
.admin-figures { display: flex; flex-wrap: wrap; gap: 0 1.8rem; margin: 0 0 .9rem;
                 padding: 0 0 .7rem; border-bottom: 1px solid var(--brand-line); }
.admin-figure { display: flex; flex-direction: column; }
.admin-figure b { font-size: 1.25rem; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.admin-figure span { font-size: .76rem; color: #6b6478; }
.admin-figure.warn b { color: #a15c00; }
.admin-figure.bad b { color: #b00020; }
/* Settings: a heading, a rule, and the controls. No border, no padding,
   no shadow. They are sections of one page, not eleven products. */
.admin-section { margin: 1.6rem 0 0; }
/* A section that folds. The heading is the control, so a long settings
   page opens as a list of headings rather than everything at once. */
details.admin-section > summary { list-style: none; cursor: pointer; font-size: 1rem;
                                  font-weight: 600; padding-bottom: .3rem; margin-bottom: .15rem;
                                  border-bottom: 1px solid var(--brand-line);
                                  display: flex; align-items: center; gap: .45rem; }
details.admin-section > summary::-webkit-details-marker { display: none; }
details.admin-section > summary::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; mask: url('/icons/expand_circle_down.svg') center / contain no-repeat; -webkit-mask: url('/icons/expand_circle_down.svg') center / contain no-repeat; background-color: #6b6478; transition: transform .15s; }
details.admin-section[open] > summary::before { transform: rotate(180deg); }
details.admin-section > summary:hover { color: var(--brand-deep); }
/* The slide-out. Used for creating something, so the list it is created
   from stays on screen behind it. */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(30rem, 100%);
          background: #fff; border-left: 1px solid var(--brand-line); z-index: 60;
          box-shadow: -14px 0 34px rgba(20, 12, 32, .16); padding: 1.1rem 1.2rem;
          overflow-y: auto; }
.drawer[hidden] { display: none; }
.drawer-head { display: flex; align-items: baseline; justify-content: space-between;
               gap: 1rem; margin-bottom: .6rem; }
.drawer-head h2 { margin: 0; font-size: 1.05rem; }
.drawer-close { background: none; border: 0; font: inherit; font-size: 1.3rem; line-height: 1;
                color: #6b6478; cursor: pointer; padding: 0 .2rem; }
.drawer-close:hover { color: #23202b; }
.drawer-scrim { position: fixed; inset: 0; background: rgba(20, 12, 32, .28); z-index: 55; }
.drawer-scrim[hidden] { display: none; }
.admin-section > h2 { font-size: 1rem; margin: 0 0 .15rem; padding-bottom: .3rem;
                      border-bottom: 1px solid var(--brand-line); }
.admin-section > p { margin: .45rem 0; }
/* A certificate running out is not an error yet, and an expired one is. */
.dense-log tr.expiring td { background: #fff8e1; }
/* One cell can be the problem without the whole row being one. */
/* Named by a published list and not in this build: the one row type
   that wants attention on a page of settled ones. */
.dense-log tr.row-new td { background: #eef7ff; }
.pill-new { background: #1d6fb8; color: #fff; font-size: .68rem; font-weight: 600;
            border-radius: .8rem; padding: .05rem .45rem; margin-left: .3rem;
            text-transform: uppercase; letter-spacing: .04em; }
.dense-log td.cell-warn { background: #fff8e1; }
.dense-log td.cell-bad { background: #fdecef; color: #7a0016; }
.dense-log tr.expired td { background: #fdecef; color: #7a0016; }
/* The wallet's own failures. Loud enough to be read before the status
   line moves on, and it stays until the next attempt clears it. */
.wallet-error { color: #b00020; font-size: .95rem; line-height: 1.4; margin: .7rem 0 0;
                border-left: 3px solid #b00020; padding: .1rem 0 .1rem .6rem; }
.match-warning { font-size: .85rem; color: #5b5566; margin: .8rem 0 0; }
.handoff-code-label { margin: .2rem 0 .1rem; font-size: .85rem; }
.handoff-code { font-size: 1.6rem; letter-spacing: .28em; font-weight: 700; margin: 0 0 .4rem; }
.add-id { display: flex; align-items: center; justify-content: space-between; gap: .8rem .9rem;
          flex-wrap: wrap; margin-top: .6rem; }
.add-id-why { font-size: .8rem; flex: 1 1 18rem; margin: 0; }
.add-id-action { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.add-id-action .signin-form { margin: 0; }
.add-id-action .signin-hint { border: 0; background: none; margin: 0; padding: 0; font-size: .74rem; text-align: right; }
.add-id-action .wallet-help, .add-id-action .signin-note { font-size: .78rem; }
.log-controls { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin: .8rem 0 .5rem; }
.log-modes { display: inline-flex; border: 1px solid var(--brand-line); border-radius: .35rem; overflow: hidden; }
.log-mode { background: #fff; border: 0; padding: .3rem .8rem; font: inherit; font-size: .82rem; cursor: pointer; color: #444; }
.log-mode + .log-mode { border-left: 1px solid var(--brand-line); }
.log-mode.current { background: var(--brand); color: #fff; }
.log-filter { flex: 1 1 14rem; min-width: 0; margin: 0; padding: .3rem .5rem; font-size: .85rem; }
.log-count { font-size: .8rem; }
.dense-log { width: 100%; border-collapse: collapse; font-size: .82rem; }
.dense-log th { text-align: left; font-weight: 700; color: #3a3446; border-bottom: 2px solid var(--brand-line);
                padding: .3rem .5rem; white-space: nowrap; font-size: .74rem;
                text-transform: uppercase; letter-spacing: .04em; }
.dense-log td { padding: .28rem .5rem; border-bottom: 1px solid #e3dfe9; vertical-align: middle;
                line-height: 1.35; }
/* Banding and a hover, because a grid of forty rows separated by a line
   you can barely see is a wall of text (owner, 2026-09-22). */
.dense-log tbody tr:nth-child(even) > td { background: #faf9fc; }
.dense-log tbody tr:hover > td { background: #f1ecf7; }
.dense-log th { background: #f4f2f7; }
.dense-log th { padding: .2rem .45rem; }
/* A button sized for a table row. A full-size one sets the row height
   and turns a dense grid back into a list (owner, 2026-09-22). */
/* A button and its count on one baseline, which a paragraph with a
   span floating beside it never managed (owner, 2026-09-22). */
.admin-toolbar { display: flex; align-items: center; gap: .7rem; margin: .5rem 0 .6rem; }
.btn-sm { font-size: .78rem; padding: .16rem .5rem; border-radius: .2rem; line-height: 1.3; }
.dense-log td > .btn, .dense-log td > form > .btn { margin: 0; }
/* Disclosure triangles, drawn by us. The browser's default marker is a
   solid black arrowhead that belongs to no part of this design. */
details.tidy > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
                         gap: .4rem; padding: .25rem 0; }
details.tidy > summary::-webkit-details-marker { display: none; }
details.tidy > summary::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; mask: url('/icons/expand_circle_down.svg') center / contain no-repeat; -webkit-mask: url('/icons/expand_circle_down.svg') center / contain no-repeat; background-color: #6b6478; transition: transform .15s; }
details.tidy[open] > summary::before { transform: rotate(180deg); }
details.tidy > div, details.tidy > p, details.tidy > ul { margin: .1rem 0 .5rem 1.1rem; }
/* Tabs inside a page, for two views of one thing. */
.subtabs { border-bottom: 1px solid var(--brand-line); margin: .2rem 0 .9rem; }
.subtabs a { font-size: .85rem; padding: .35rem .7rem; }
/* A list with real edges. It was rows of text floating between hairlines,
   with a tinted band that covered the summary and not the row
   (owner, 2026-09-22). */
.platform-list { border: 1px solid #d8d3e0; border-radius: .3rem; overflow: hidden; }
.platform-row { border-bottom: 1px solid #d8d3e0; }
.platform-row:last-child { border-bottom: 0; }
details.platform-row > summary { font-size: .9rem; gap: .55rem;
                                padding: .3rem .7rem .3rem .85rem;
                                min-height: 1.8rem; background: #fff; }
details.platform-row:nth-of-type(even) > summary { background: #faf9fc; }
details.platform-row > summary:hover { background: #f1ecf7; }
.platform-row > summary:hover::before, .platform-row[open] > summary::before { background-color: var(--brand); }
details.platform-row[open] > summary { background: var(--brand-wash); color: var(--brand-deep);
                                      border-bottom: 1px solid #d8d3e0; }
.platform-row[open] { background: #fcfbfd; }
.platform-row .pill { font-size: .68rem; font-weight: 600; border-radius: .8rem;
                      padding: .05rem .5rem; letter-spacing: .03em; }
.pill-unreviewed { background: #eceaf1; color: #4a4455; }
.pill-edited { background: #dff3e5; color: #0a5d23; }
.pill-missing { background: #fdecef; color: #7a0016; }
.platform-row .stack-form { margin: 0; max-width: 40rem; padding: .7rem .6rem .9rem 1.6rem; }
.cert-detail { display: grid; gap: .15rem .8rem; padding: .35rem .2rem .5rem 1.6rem;
               font-size: .8rem; }
.cert-detail > div { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.cert-detail .console-key { min-width: 8rem; font-weight: 600; }
.w-toggle { width: 1.4rem; padding-right: 0 !important; }
.row-toggle { border: 0; background: none; cursor: pointer; font-size: 0; padding: 0;
              width: 1rem; height: 1rem; vertical-align: middle;
              mask: url('/icons/expand_circle_down.svg') center / contain no-repeat;
              -webkit-mask: url('/icons/expand_circle_down.svg') center / contain no-repeat;
              background-color: #6b6478; transition: transform .15s; }
.row-toggle:hover { background-color: var(--brand); }
.row-toggle[aria-expanded="true"] { transform: rotate(180deg); background-color: var(--brand); }
.row-toggle-unused { color: var(--brand); font-size: .7rem;
              padding: 0 .15rem; line-height: 1; }
.row-detail td { background: var(--brand-wash); }
.detail-grid { display: grid; grid-template-columns: max-content 1fr; gap: .1rem .7rem; margin: .2rem 0;
               font-size: .78rem; }
.detail-grid dt { color: #5b5566; }
.detail-grid dd { margin: 0; word-break: break-all; }
.dense-log tr:hover td { background: var(--brand-wash); }
.dense-log .nowrap { white-space: nowrap; }
.dense-log .tnum { font-variant-numeric: tabular-nums; }
.dense-log .ellipsis { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-more > summary { cursor: pointer; font-size: .78rem; color: var(--brand); }
.row-more[open] > summary { margin-bottom: .2rem; }
.log-foot { font-size: .8rem; margin-top: .5rem; }
.signin-review { display: flex; align-items: center; justify-content: center; gap: .45rem;
                  margin: .55rem 0 0; font-size: .82rem; color: #5b5566; cursor: pointer; }
.review-value { display: block; word-break: break-all; margin-bottom: .15rem; }
.connect-cta-wrap { margin: 1.1rem 0 .3rem; }
.connect-detail { border: 1px solid #ddd; border-radius: .4rem; background: #fafafa;
                  padding: .55rem .9rem; margin: .9rem 0 0; }
.connect-detail > summary { cursor: pointer; font-weight: 600; }
.connect-detail .consent-card { margin: .7rem 0 0; }
.connect-page .wallet-help { max-width: none; }
@media (max-width: 33rem) {
    body.connect-page main { padding-top: .75rem; }
    .connect-title { font-size: 1.2rem; }
}

/* The page a site sends people to before their wallet opens. Ruled
   rows in one card, so each question it answers reads as its own
   line rather than a wall of reassurance (owner, 2026-09-13). These
   were missing entirely when the page first shipped. */
.consent-lede { font-size: 1.1rem; margin: .4rem 0 1.25rem; }
.consent-card { border: 1px solid var(--brand-line); border-radius: .5rem; background: #fff;
                margin: 1rem 0 1.5rem; overflow: hidden; }
.consent-row { padding: .9rem 1.1rem; border-bottom: 1px solid var(--brand-line); }
.consent-row:last-child { border-bottom: 0; }
.consent-row p { margin: .2rem 0; }
.consent-row .id-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
                         color: #5b6b7b; margin: 0 0 .35rem; font-weight: 700; }
.consent-subject { font-size: 1.05rem; word-break: break-all; background: #f4f8fc;
                   border: 1px solid #d6e3f0; border-radius: .3rem; padding: .45rem .6rem;
                   display: inline-block; }
.consent-sample { background: #f4f8fc; border: 1px solid #d6e3f0; border-radius: .25rem;
                  padding: .05rem .35rem; word-break: break-all; }
.consent-fields { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.consent-fields li { margin: .2rem 0; }
/* The one sentence that answers the moment of fear. Set apart so it
   cannot be skimmed past on the way to the button. */
.consent-emphasis { border-left: 3px solid var(--brand); background: var(--brand-wash);
                    padding: .55rem .8rem; border-radius: .25rem; margin: .5rem 0 0; }
.consent-next { background: #fafbfc; }
.consent-actions { margin: 1.25rem 0 0; }

/* The shared wallet sign-in control. */
.signin-note { margin: .5rem 0 0; }
/* Empty until a sign-in is under way; an empty line left a visible gap
   between the button's hint and the ID help. */
.signin-note:empty { display: none; }
.signin-links { margin: .5rem 0 0; }
.wallet-help { border: 1px solid #ddd; border-radius: .4rem; background: #fafafa;
               padding: .55rem .9rem; margin: .9rem 0 0; max-width: 40rem; }
.wallet-help > summary { cursor: pointer; font-weight: 600; }
.wallet-help-body > p { margin: .6rem 0 .2rem; }
.wallet-help-row { border-top: 1px solid #e6e6e6; padding: .55rem 0 .1rem; margin-top: .55rem; }
.wallet-help-row p { margin: .15rem 0; }
.wallet-help-title { font-weight: 700; }
/* A short note with a coloured edge: green says fine, amber says attention. */
.ids-note { border-left: 3px solid #0a7d2c; background: #f2fbf4; padding: .55rem .8rem;
            border-radius: .25rem; margin: .6rem 0; }
.ids-note-warn { border-left-color: #a15c00; background: #fff8e8; }
.recover-form { max-width: 30rem; }
.recover-input { width: 100%; box-sizing: border-box; font-size: 1.1rem;
                 letter-spacing: .08em; text-transform: uppercase; padding: .6rem .7rem; }
.form-error { border-left: 3px solid #b00020; background: #fff5f5; color: #b00020;
              padding: .6rem .9rem; border-radius: .25rem; margin: 1rem 0; font-weight: 600; }
/* home page marketing sections */
.hero { padding: 1.5rem 0 .5rem; }
.hero h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 1rem; }
.lede { font-size: 1.1rem; color: #333; max-width: 38rem; }
.steps, .trust { padding: 2rem 0; border-top: 1px solid #eee; margin-top: 1.5rem; }
.step-list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1.25rem; }
.step-list li { display: flex; gap: 1rem; align-items: flex-start; }
.step-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff;
            display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; }
.trust-list { list-style: none; padding: 2px 5px; display: flex; flex-wrap: wrap;
              gap: 1rem 1.15rem; margin: 1.5rem 0; }
.trust-list li { background: var(--brand-wash); color: var(--brand); padding: .45rem 1rem; border-radius: 999px;
                 font-size: .9rem; font-weight: 600; position: relative; }
/* A bold "prohibited" mark over each item: a ring hugging the pill plus a
   slash struck through the word, like a no-symbol, not a small centred
   emoji. Semi-transparent red so the label stays readable underneath. */
.trust-list li::before,
.trust-list li::after {
    content: ""; position: absolute; pointer-events: none; color: #d11a1a;
}
.trust-list li::before {   /* the ring */
    inset: -5px; border: 3px solid currentColor; border-radius: 999px; opacity: .7;
}
.trust-list li::after {    /* the slash through the label ("\", ISO prohibition) */
    left: -7px; right: -7px; top: 50%; height: 3px; background: currentColor;
    opacity: .7; transform: translateY(-50%) rotate(14deg);
}

/* The test sign-in row, on test deployments with the wallet sidecar wired up.
   A desktop browser that has the Digital Credentials API but no wallet cannot
   otherwise get past the sign-in to look at the pages behind it. */
.dev-quick-signin { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
                    margin: .6rem 0 0; font-size: .8rem; }