/* Round 1: the site's own chrome, now that it is one site (owner, 2026-10-08).

   One bar: the wordmark, three sections, and the way into the console. On a
   page of reading the bar is centred over the column it sits above; on a
   working screen (the console, the admin panel) it runs the window, because
   the screen under it does. A section that has pages of its own gets a second,
   quieter row of tabs under the bar. The footer is four short columns, which
   is what a product site has, rather than one line of links in 11px. */

/* ---- The bar ---- */
.site-nav {
  max-width: var(--page, 64rem);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  min-height: 3rem;
  gap: 1.2rem;
  justify-content: flex-start;
}
body.admin-page .site-nav,
body:has(.console-shell) .site-nav { max-width: none; padding: 0 var(--gap); min-height: 2.6rem; }

.wordmark { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.wordmark-logo { width: 22px; height: 22px; }

.main-nav { display: flex; gap: .1rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
  display: inline-flex; align-items: center;
  padding: .35rem .6rem; border-radius: .3rem;
  font-size: .9rem; font-weight: 600; color: #45505e; text-decoration: none; white-space: nowrap;
}
.main-nav a:hover { color: var(--text); background: var(--brand-wash); }
.main-nav a.current { color: var(--accent); background: var(--brand-wash); }

.site-nav > .nav-links { margin-left: auto; flex: none; }
.nav-links a { font-size: .86rem; font-weight: 600; }
.nav-links a.current { color: var(--accent); }
.acct-menu > summary { font-size: .86rem; font-weight: 600; }

@media (max-width: 40rem) {
  .site-nav { flex-wrap: wrap; gap: .4rem .9rem; padding-top: .4rem; padding-bottom: .4rem; }
  .main-nav { order: 3; width: 100%; }
  .main-nav a { padding: .3rem .5rem; font-size: .86rem; }
}

/* ---- The section row under the bar ---- */
.site-subnav { background: #fafbfc; border-top: 1px solid var(--border); margin: 0; }
.site-subnav-inner {
  max-width: var(--page, 64rem); margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none;
}
.site-subnav-inner::-webkit-scrollbar { display: none; }
.site-subnav a {
  height: 2.3rem; padding: 0 .6rem; font-size: var(--fs-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.site-subnav a:hover { color: var(--text); background: transparent; }
.site-subnav a.current { color: var(--text); border-bottom-color: var(--mark); }

/* ---- The footer ---- */
.site-footer {
  max-width: var(--page, 64rem);
  margin: 3rem auto 0;
  padding: 1.6rem clamp(1rem, 4vw, 2rem) 2.2rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .84rem;
}
body.admin-page .site-footer,
body:has(.console-shell) .site-footer { max-width: none; padding-inline: var(--gap); margin-top: 1.5rem; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.2rem 1.5rem;
  margin: 0 0 1.4rem;
}
.footer-grid > div { display: flex; flex-direction: column; gap: .3rem; }
.footer-head {
  margin: 0 0 .25rem;
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text);
}
.footer-grid a { color: #45505e; text-decoration: none; line-height: 1.5; }
.footer-grid a:hover { color: var(--accent); text-decoration: underline; }
.footer-line { margin: 0; max-width: 60ch; line-height: 1.55; }

/* ---- Reference pages on a phone ----
   A key/value row holds a URL that has no spaces, and a code block holds a
   line that must not wrap. Neither may push the page wider than the screen:
   the value breaks where it has to, and the code block scrolls on its own. */
.kv-text { flex-wrap: wrap; gap: 0 .3em; min-width: 0; overflow-wrap: anywhere; }
.kv-value { min-width: 0; }
pre, pre.code-block, .code-block { max-width: 100%; overflow-x: auto; }
@media (max-width: 40rem) {
  .kv-row { grid-template-columns: 1fr; }
  .kv-label { padding-bottom: 0; }
  .kv-text { min-height: 0; }
}

/* ---- The "accept the new terms" bar in the console ----
   A notification bar the way Azure and Dynamics show one (owner, 2026-10-08):
   one amber strip across the top of the content, the message on the left, the
   one button on the far right, nothing floating in the page. */
.console-accept {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #fff4ce; color: #323130;
  border: 0; border-bottom: 1px solid #f2d478; border-radius: 0;
  padding: .55rem clamp(.75rem, 2vw, 1.5rem);
  margin: 0 0 var(--gap);
  font-size: var(--fs-body);
}
.console-accept p { margin: 0; flex: 1 1 24rem; line-height: 1.45; }
.console-accept a { color: inherit; text-decoration: underline; }
.console-accept form { margin: 0 0 0 auto; }
.console-accept .btn { background: #323130; border-color: #323130; color: #fff; padding: .3rem .9rem; }
.console-accept .btn:hover { background: #000; border-color: #000; }
@media (min-width: 900px) {
  /* Edge to edge across the content column, above everything in it. */
  body:has(.console-shell) main > .console-accept { padding-inline: var(--gap); }
}

/* ---- Console: what a first signed-in look found (owner, 2026-10-08) ----
   The heading sat against the bar; the context switcher had no shape of its
   own; a 16rem menu could not fit a 230px sidebar, so it ran out of it on the
   right and, for the account menu, off the left of the window; the role pill
   was the colour of the text beside it; and the grey-on-grey page with faded
   dashes was hard to read. */

/* Air between the bar and the first thing on the page. */
body:has(.console-shell) main > .console-shell + *:not(.console-accept) { padding-top: var(--gap); }
.console-head { margin-bottom: .4rem; }

/* The role pill reads as a pill. */
.console-role {
  font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #1f2a37; background: #e3e6ea; border: 1px solid #c8cdd4; border-radius: 999px;
  padding: .08rem .5rem; white-space: nowrap; flex: none;
}

/* The empty state is a drawn panel, not a faint dashed line. */
.console-empty {
  background: var(--panel); border: 1px dashed #b3bac4; border-radius: var(--radius);
  padding: .6rem 1rem; margin: 1rem 0;
}
.console-empty p { margin: .35rem 0; }

/* ---- The console menu, modelled on a portal's (owner, 2026-10-08) ----
   The account is top right. The sidebar is one tree: what you are working in,
   Sites, then the settings pages of that context, on every page. It folds from
   the button beside the wordmark and resizes from its right edge, and both are
   remembered in this browser. */
:root { --sidebar-w: 230px; }
.console-toggle { display: none; }

/* The context, as a label: a kind over a name. In the narrow toolbar it sits
   on one line at the left. */
.console-context { display: flex; align-items: baseline; gap: .45rem; align-self: center;
                   padding: .3rem .9rem .3rem 0; margin-right: .7rem; border-right: 1px solid rgba(255,255,255,.22); }
.console-context .ctx-kind { color: var(--mark); }
.console-context .ctx-name { color: #fff; }
.console-nav-head { display: none; }

@media (min-width: 900px) {
  .console-toggle { display: inline-block; }
  body:has(.console-shell) main { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  body.console-collapsed:has(.console-shell) main { grid-template-columns: minmax(0, 1fr); }
  body.console-collapsed .console-shell { display: none; }
  body.console-collapsed:has(.console-shell) main > *:not(.console-shell) { grid-column: 1; }

  .console-shell { position: relative; }
  .console-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; }
  .console-resize:hover, body.console-resizing .console-resize { background: rgba(243,178,41,.55); }
  body.console-resizing { user-select: none; cursor: col-resize; }

  .console-context {
    display: grid; gap: .1rem; align-self: auto;
    margin: 0 0 .35rem; padding: .3rem .5rem .7rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .console-context .ctx-name { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .console-nav-head {
    display: block; margin: .55rem .5rem .2rem; color: #8f9aa7;
    font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  }
  .console-subbar { margin-top: .45rem; padding-top: .45rem; border-top: 1px solid rgba(255,255,255,.12); }
  .console-subbar .console-bar-inner { display: block; padding: 0 .6rem; }
  .console-subbar a { padding-left: .8rem; }
}

/* The sidebar wears the organization's colour on its context label; the
   personal scope keeps a neutral grey. */
.console-context { border-left: 4px solid var(--ctx-color, #8f9aa7); }
@media (min-width: 900px) {
  .console-context { padding-left: .55rem; }
  .console-account-nav { margin-top: .45rem; padding-top: .45rem; border-top: 1px solid rgba(255,255,255,.12); }
}

/* A value with a copy button: the field takes the row, the button sits at its end. */
.code-copy .field { width: 100%; box-sizing: border-box; padding-right: 2.6rem; max-width: 42rem; }

/* The colour swatches on the organization page. */
.swatches { display: flex; flex-wrap: wrap; gap: .6rem; margin: .3rem 0 .8rem; }
.swatch { position: relative; display: grid; justify-items: center; gap: .2rem; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch span { display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
               border: 3px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.swatch span i { display: block; width: .8rem; height: .8rem; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.swatch small { font-size: var(--fs-label); color: var(--muted); }
.swatch input:checked + span { border-color: #fff; box-shadow: 0 0 0 2px var(--text); }
.swatch input:focus-visible + span { box-shadow: 0 0 0 3px var(--mark); }

/* The account menu in the top bar: "Self" in a fixed neutral, an organization
   in its own colour. */
.console-acct-self > summary { background: #f1f3f5; border-color: #c8cdd4; color: var(--text); }
.console-acct-self > summary:hover { background: #e6e9ed; }
.console-acct-org > summary { background: var(--acct-color, var(--accent)); border-color: var(--acct-color, var(--accent)); color: var(--acct-fg, #fff); }
.console-acct-org > summary:hover { filter: brightness(1.08); background: var(--acct-color, var(--accent)); }
.console-acct-org > summary .console-acct-label, .console-acct-org > summary .account-icon { color: var(--acct-fg, #fff); }
.console-acct-org .ctx-caret { color: var(--acct-fg, #fff); opacity: .85; }
.acct-id-name { font-size: .84rem; color: var(--text); }
/* The platform scope: the signal red nothing else on the site uses. */
.console-acct-global > summary { background: var(--signal, #D7263D); border-color: var(--signal, #D7263D); color: #fff; }
.console-acct-global > summary:hover, .console-acct-global[open] > summary { filter: brightness(1.08); background: var(--signal, #D7263D); }
/* Open, the button keeps its color: a white summary under white text was no button at all. */
.console-acct-org[open] > summary { background: var(--acct-color, var(--accent)); color: var(--acct-fg, #fff); }
.console-acct-global > summary .console-acct-label, .console-acct-global > summary .account-icon, .console-acct-global .ctx-caret { color: #fff; }
.console-role.role-global { background: var(--signal, #D7263D); color: #fff; border-color: var(--signal, #D7263D); }
.console-acct > summary {
  display: inline-flex; align-items: center; gap: .4rem; height: auto;
  padding: .3rem .6rem; border: 1px solid var(--border); border-radius: .3rem;
  font-size: .86rem; font-weight: 600; color: var(--text);
}
.console-acct > summary:hover { background: var(--brand-wash); }
.console-acct .ctx-caret { font-size: .7rem; color: var(--muted); }
.console-acct-label { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-acct-body { display: flex; flex-direction: column; min-width: 19rem; padding: .35rem; }
.acct-id { display: grid; gap: .2rem; padding: .4rem .5rem .6rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
.acct-id-key, .acct-head { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.acct-head { margin: .4rem .5rem .15rem; }
.acct-id .mono { font-size: .78rem; word-break: break-all; background: var(--brand-wash); color: var(--brand-deep);
                 padding: .3rem .45rem; border-radius: .3rem; user-select: all; }
.console-acct-body a { display: flex; justify-content: space-between; align-items: center; gap: .6rem; width: 100%; box-sizing: border-box; }
.console-acct-body a.current { background: var(--brand-wash); font-weight: 600; }
.console-acct-body a.acct-quiet { color: var(--muted); font-size: .82rem; }
.console-acct-body hr { border: 0; border-top: 1px solid var(--border); margin: .3rem 0; }
.console-acct-body form { margin: 0; }
.console-acct-body .acct-signout { width: 100%; border-top: 0; text-align: left; cursor: pointer; }

/* ---- Creating an organization: the explanation beside the form ---- */
.org-create { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; align-items: start; max-width: 64rem; }
.org-create-about { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; }
.org-create-about h2 { font-size: .95rem; margin: 0 0 .5rem; }
.org-create-about ul { margin: 0; padding-left: 1.1rem; line-height: 1.5; }
.org-create-about li { margin-bottom: .45rem; }
.org-create-form { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; max-width: none; }
.org-create-form .field { width: 100%; box-sizing: border-box; font-size: .95rem; padding: .4rem .55rem; }
.org-create-actions { display: flex; gap: .6rem; align-items: center; margin-top: .6rem; }
.org-create-actions .btn-outline { display: inline-block; padding: .3rem .8rem; border: 1px solid #c8cdd4; border-radius: .25rem; color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--fs-body); }
.org-create-actions .btn-outline:hover { background: #f3f5f7; }

/* ---- Every control measures its box the same way (owner, 2026-10-09) ----
   An input is content-box by default and a button is border-box, so the same
   height gave two different heights everywhere the two sat together. */
input, select, textarea, button, .field, .btn, .copy-btn { box-sizing: border-box; }

/* ---- Controls in a row are one height (owner, 2026-10-09) ----
   An input, a select and a button in the same row each had a height of their
   own. One rule for all three, so a row is a row. */
.console-row > .field, .console-row > select.field, .console-row > input.field, .console-row > .btn {
  height: 2.4rem; min-height: 2.4rem; box-sizing: border-box;
  padding-top: 0; padding-bottom: 0; line-height: 1.2; margin: 0;
}
.console-row > select.field { padding-right: 1.6rem; }

/* ---- Notes in the console: full width, bordered, stacked with no gap, the
   accent and the action at the far right (owner, 2026-10-09) ---- */
body:has(.console-shell) main > .ids-note {
  max-width: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center;
  margin: 0; border: 1px solid #e6cf8a; border-left: 0; border-right: 4px solid #a15c00; border-radius: 0;
  padding: .5rem .8rem;
}
body:has(.console-shell) main > .ids-note:not(.ids-note-warn) { border-color: #b7e0c3; border-right-color: #0a7d2c; }
body:has(.console-shell) main > .ids-note + .ids-note { border-top: 0; }
body:has(.console-shell) main > .ids-note + :not(.ids-note) { margin-top: var(--gap); }
body:has(.console-shell) main > .ids-note > a:last-of-type { margin-left: auto; font-weight: 600; white-space: nowrap; }
.nag-text { flex: 1 1 24rem; }
.nag-close {
  flex: none; background: none; border: 0; font: inherit; font-size: 1.1rem; line-height: 1;
  color: var(--muted); cursor: pointer; padding: .1rem .3rem; border-radius: .2rem; margin-left: .2rem;
}
.nag-close:hover { color: var(--text); background: rgba(0,0,0,.06); }

/* The tip at the foot of a card: ruled off and tinted, wherever it is. The
   card's side padding is the column gutter on a console page, so the tip
   reads that rather than assuming one. */
body:has(.console-shell) main > .console-section, body:has(.console-shell) main > .console-empty { --card-pad: clamp(.75rem, 2vw, 1.5rem); }
.console-section > p.muted:last-child, .console-empty > p.muted:last-child, .kv-more > p.muted:last-child {
  margin: .9rem calc(-1 * var(--card-pad, var(--gap))) calc(-1 * var(--gap)); padding: .55rem var(--card-pad, var(--gap));
  border-top: 1px solid var(--border); background: #f6f7f9; color: var(--muted);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Working screens are square-cornered: a dashboard, not a brochure. */
body:has(.console-shell), body.admin-page { --radius: .15rem; }
body:has(.console-shell) .kv, body.admin-page .kv { border-radius: 0; margin: .5rem 0; border-color: var(--border); }
body:has(.console-shell) .kv > :first-child, body:has(.console-shell) .kv > :last-child { border-radius: 0; }
.kv-flat { border-left: 0; border-right: 0; }
.kv-row { min-height: 0; }
.kv-label { padding: .45rem .8rem; }
.kv-value { padding: .35rem .8rem; }
.kv-group { padding: .35rem .8rem; }

/* A value with its copy button: one height, as wide as the row allows. */
.copy-field { width: 100%; max-width: none; }
.copy-field .field { height: 2.4rem; flex: 1 1 auto; min-width: 0; max-width: none; font-size: .86rem; }
.copy-field .copy-btn { height: 2.4rem; width: 2.6rem; }
.kv .field, .kv input[type="text"], .copy-row .field, .copy-row input[type="text"] { max-width: none; }

/* The information mark, a third smaller (owner, 2026-10-09). */
.info-icon { width: 11px; height: 11px; }
.info { top: -.25em; }

/* The Advanced section folds, and only the dangerous heading inside it is red. */
.console-advanced { border: 1px solid var(--border); }
.console-advanced > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; }
.console-advanced > summary::-webkit-details-marker { display: none; }
.console-advanced > summary::before { content: ""; flex: none; width: .55rem; height: .55rem; margin: 0 .35rem 0 .15rem;
                                       border-right: 2px solid #4b5563; border-bottom: 2px solid #4b5563;
                                       transform: rotate(-45deg); transition: transform .12s; }
.console-advanced[open] > summary::before { transform: rotate(45deg); margin-top: -.25rem; }
.console-advanced > summary h2 { margin: 0; display: inline; }
.console-advanced[open] { border-color: #e3b5b5; }
.console-advanced .danger-head { color: #b00020; font-size: .95rem; margin: .8rem 0 .4rem; }

/* ---- Domains: a grid, rows that open to the record ---- */
.domain-add { margin: .4rem 0 .9rem; max-width: 40rem; }
.domain-grid-wrap { padding: 0; background: transparent; border: 0; border-radius: 0; }
.domain-grid-wrap table { border: 1px solid var(--border); }
.domain-grid { font-size: .8rem; margin: 0; }
.domain-grid td { padding: .3rem .5rem; vertical-align: middle; }
.domain-grid .toggle-col { width: 1.6rem; padding-right: 0; }
.domain-grid .actions-col { width: 2.4rem; text-align: right; }
.domain-grid .domain-name { font-weight: 600; }
.domain-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
              background: none; border: 0; border-radius: .2rem; cursor: pointer; color: var(--text); padding: 0; }
/* The same chevron the admin panel's folding sections use. */
/* Its own class: .row-toggle is the admin panel's masked expander, and sharing
   the name put that mask over this chevron, which is what showed as a speck.
   A chevron drawn from two borders; points right, turns down. */
.domain-toggle::before { content: ""; display: block; width: .5rem; height: .5rem; margin-left: -.15rem;
                      border-right: 2px solid #4b5563; border-bottom: 2px solid #4b5563;
                      transform: rotate(-45deg); transition: transform .12s; }
.domain-toggle:hover { background: rgba(0,0,0,.06); }
tr.is-open .domain-toggle::before { transform: rotate(45deg); margin-left: 0; margin-top: -.2rem; }
tr.domain-detail > td { background: #f8f9fb; border-top: 0; padding: .6rem .8rem .8rem; }
tr.domain-detail > td:first-child { background: #f8f9fb; }
.domain-detail-lead { margin: 0 0 .4rem; }
.domain-detail .kv { max-width: 60rem; }
.domain-detail .console-row { margin-top: .5rem; }
.check-result { display: block; margin: 0 0 .6rem; max-width: 60rem; border-radius: 0; }
.row-menu-list form { margin: 0; }

/* ---- A value with a copy button beside it, not a text field ---- */
.id-inline { display: inline-flex; align-items: center; gap: .4rem; margin: .2rem 0 .5rem; flex-wrap: wrap; }
.id-inline code { font-size: .92rem; background: var(--brand-wash); color: var(--brand-deep); padding: .3rem .55rem; border-radius: .3rem; user-select: all; }
.id-inline .copy-btn { position: static; }

/* ---- The activity log ---- */
/* The table is the panel: the wrapper only scrolls, so the lines run edge to edge. */
.activity-scroll { padding: 0; background: transparent; border: 0; border-radius: 0; }
.activity-scroll table { border: 1px solid var(--border); }
.activity-log { font-size: .78rem; margin: 0; }
.activity-log th.when, .activity-log td.when { white-space: nowrap; width: 1%; }
.activity-log td.when { color: var(--muted); font-variant-numeric: tabular-nums; }
.activity-log td.who { font-weight: 600; white-space: nowrap; }
.activity-log td.detail { color: var(--muted); }
.activity-log td.nowrap { white-space: nowrap; }
.activity-log td { padding: .22rem .5rem; }

/* ---- Danger sections: leaving, deleting ---- */
.console-danger h3 { font-size: .95rem; margin: .6rem 0 .4rem; color: #b00020; }
.danger-list { margin: 0 0 .8rem; padding-left: 1.1rem; line-height: 1.5; max-width: 60rem; }
.danger-list li { margin-bottom: .3rem; }
.console-advanced { border: 1px solid #e3b5b5; }

/* ---- Home page sections ---- */
.home-cta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 .4rem; }
.home-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem;
  padding-top: 1.4rem; border-top: 1px solid var(--border); margin-top: 1.6rem;
}
.home-split > section {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.home-split h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; }
.home-split p { margin: 0 0 .6rem; line-height: 1.55; }
.home-split p:last-child { margin-bottom: 0; }
.home-split .eyebrow { display: block; margin-bottom: .35rem; }
.product-grid h2 a { color: inherit; text-decoration: none; }
.product-grid h2 a:hover { color: var(--accent); }

/* A small form sitting in a table cell: a reason box and a button on one line. */
.inline-form { display: flex; gap: .35rem; align-items: center; margin: 0; }
.inline-form .field-sm { width: 11rem; min-height: 0; padding: .14rem .4rem; font-size: .78rem; }
.inline-form.stacked { flex-direction: column; align-items: stretch; gap: .25rem; }
.inline-form.stacked .field-sm { width: 9rem; }
.cell-break { word-break: break-all; max-width: 18rem; }

/* The per-site terms acceptance: a check on the register form, a notice when the terms moved. */
.console-terms { margin-top: 1rem; align-items: flex-start; line-height: 1.4; }
.console-terms-due { border: 1px solid var(--warn-border, #e0c36a); background: var(--warn-bg, #fff8e1); padding: .6rem .8rem; margin: .4rem 0 .8rem; }
.console-terms-due p { margin: 0 0 .5rem; }

/* A site's own questions during sign-in: boxed and attributed, so nobody
   mistakes them for something IRLProof asks. */
.site-ask { border: 2px solid var(--line); border-left: 6px solid var(--brand); background: #fff; padding: 1rem 1.1rem; margin: 1rem 0; }
.site-ask-head { margin: 0 0 .3rem; font-size: 1.05rem; }
.site-ask-body { margin: 0 0 .8rem; color: var(--muted); }
.site-ask .console-form { margin: 0; }

/* A heading inside a form that groups the fields under it. */
.console-subhead { font-size: 1rem; margin: 1.4rem 0 .2rem; padding-top: .9rem; border-top: 1px solid var(--line); }