/* KeySigner console: the iPhone app's teal and neutrals, system type, a dense admin table. */
:root {
  --bg: #F3F5F4; --surface: #FFFFFF; --ink: #17201E; --muted: #5A6561; --line: #DCE1DF;
  --accent: #0F766E; --accent-ink: #FFFFFF; --accent-soft: #DDF0EC;
  --good: #146C43; --good-soft: #DDF3E6; --warn: #8A4B00; --warn-soft: #FFEFD6; --bad: #B42318; --bad-soft: #FDE8E6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101514; --surface: #182120; --ink: #E6ECEA; --muted: #9AA6A2; --line: #2B3533;
    --accent: #4FC2B5; --accent-ink: #0B1413; --accent-soft: #163A36;
    --good: #6FD39C; --good-soft: #15372A; --warn: #F2C46D; --warn-soft: #3A2E14; --bad: #FF8A80; --bad-soft: #3D1B19;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.45; }
h1, h2 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 13px; }
a[href="sig://customer-inbox"] { color: var(--accent); text-underline-offset: .15em; }
.error { color: var(--bad); background: var(--bad-soft); border-radius: 8px; padding: 8px 12px; }
button, input { font: inherit; }
button { border-radius: 8px; padding: 8px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.quiet { background: transparent; }
button.danger { color: var(--bad); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.signin-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.signin-card h1 { font-size: 24px; }
.signin-card label { font-weight: 600; margin-top: 8px; }
.token-signin { display: flex; flex-direction: column; gap: 10px; }
.signin-card input { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg); color: var(--ink); }

.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px max(16px, 3vw); background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.org { display: flex; align-items: center; gap: 10px; }
.org h1 { font-size: 18px; }
.mark { width: 18px; height: 28px; color: var(--accent); flex: none; }
.signin-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; text-decoration: none; }
.signin-card a:not(.signin-brand) { color: var(--accent); }
.signin-brand .brand-mark { width: 16px; height: 25px; color: var(--accent); }
.who { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.body { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px max(16px, 3vw); align-items: flex-start; }
nav { flex: 0 0 180px; display: flex; flex-direction: column; gap: 4px; }
nav a { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 8px; }
nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* The four nouns first, then the Organization group under its own label (docs/ontology.md). */
.nav-nouns, .nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.nav-label { padding: 0 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
nav a:focus-visible, select:focus-visible, button:focus-visible, h2:focus-visible, h3:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.badge { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; text-align: center; }
.page-picker { display: none; }
.notice { flex: 1 1 100%; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.inbox-group, .kind-group { display: flex; flex-direction: column; gap: 10px; }
.inbox-group > h3, .kind-group > h3, .holder-group > h3 { margin: 6px 0 0; font-size: 17px; }
.finding-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.finding-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; background: var(--bad-soft); border-radius: 10px; }
.kind-chip { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.request-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#holder-groups { display: flex; flex-direction: column; gap: 18px; }
.holder-group { display: flex; flex-direction: column; gap: 8px; }
.device-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.device { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.device-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.device-head button { margin-left: auto; }
.device .key-list { list-style: none; margin: 0; padding: 0; }
.device .key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.device .key > span { min-width: 0; overflow-wrap: anywhere; }
.attested-badge { background: var(--good-soft); color: var(--good); }
.body > section { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section-head h2 { font-size: 22px; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
.member { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; min-width: 0; }
.chip { overflow-wrap: anywhere; }
.member code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.you { font-size: 12px; color: var(--muted); }
.warning-text { color: var(--warn); font-weight: 600; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.member-chip { display: inline-flex; align-items: center; gap: 4px; }
.chip-remove { border: 0; background: transparent; padding: 0 2px; font-size: 15px; line-height: 1; color: var(--muted); cursor: pointer; }
.decided { display: flex; flex-direction: column; gap: 6px; }
.person { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.person-email { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.status { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.status.active { background: var(--good-soft); color: var(--good); }
.status.suspended { background: var(--warn-soft); color: var(--warn); }
.status.invited { background: var(--accent-soft); color: var(--accent); }
.actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

dialog { border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--surface); color: var(--ink); width: min(420px, calc(100% - 32px)); }
dialog::backdrop { background: rgb(0 0 0 / .35); }
dialog form { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset label { display: flex; gap: 10px; align-items: center; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
#remove-dialog .dialog-actions { flex-wrap: wrap; }
#remove-selection, .saved-removal-id { overflow-wrap: anywhere; }
#saved-removals button { min-height: 44px; max-width: 100%; white-space: normal; }
#remove-dialog .dialog-actions button { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#remove-confirm { color: var(--bg); }
#remove-dialog button:disabled { background: var(--bg); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.panel h3 { margin: 0; font-size: 17px; }
.signing-policy-change :is(h4, h5, p, ul) { margin-block: 0; }
.signing-policy-change h5 { font-size: 14px; }
.recovery-attention-list { display: flex; flex-direction: column; gap: 12px; }
.recovery-attention-item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.recovery-attention-item p { margin: 4px 0 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.secret { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.secret code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; color: var(--ink); }
.inline-form, .download { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form input { flex: 1 1 260px; min-width: 0; }
.grid-form { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; align-items: center; }
#key-policy-error { grid-column: 1 / -1; margin: 0; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
input[type="url"], input[type="date"], .grid-form input, .inline-form input { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--bg); color: var(--ink); }
.event { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }

.result { background: var(--accent-soft); color: var(--ink); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.plain-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.no-keys { color: var(--warn); font-weight: 600; }
button.danger-fill { background: var(--bad); border-color: var(--bad); color: #FFFFFF; }
@media (prefers-color-scheme: dark) { button.danger-fill { color: var(--bg); } }
select { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; background: var(--bg); color: var(--ink); }
.rule { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rule label { font-size: 13px; color: var(--muted); }
.finding { color: var(--bad); font-weight: 600; }
.approvers { list-style: none; padding-left: 0; }
.table-title { margin: 6px 0 0; font-size: 17px; }
.approval-settings { margin-bottom: 16px; }
.approval-settings summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.approval-settings .approval { margin-top: 4px; }
.approval { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.approval h3 { margin: 0; font-size: 15px; font-weight: 600; }
.approval p { margin: 0; flex-basis: 100%; }
.approval .actions { margin-left: auto; }
.fee-month { display: flex; flex-direction: column; gap: 8px; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.figures div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.figures dt { font-size: 13px; color: var(--muted); }
.figures dd { margin: 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
#waiting-block { display: flex; flex-direction: column; gap: 8px; }
#waiting-block p { margin: 0; }
#releases .status { align-self: flex-start; }

/* Phones: each person becomes a card — member and status on top, roles, then the actions. */
@media (max-width: 640px) {
  /* Phones pick the page from a labeled list instead of the side links. */
  nav { flex-basis: 100%; min-width: 0; }
  nav .nav-nouns, nav .nav-group { display: none; }
  .page-picker { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
  .page-picker select { width: 100%; min-height: 44px; }
  .device-head button { margin-left: 0; flex: 1 1 100%; }
  .table-wrap { background: transparent; border: 0; overflow: visible; }
  .table-wrap table, .table-wrap tbody { display: block; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap tr { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding: 14px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
  .table-wrap td { display: block; padding: 0; border: 0; }
  .table-wrap td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .table-wrap td:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
  .table-wrap td:nth-child(4) { grid-column: 1 / -1; }
  .table-wrap td:nth-child(4):empty { display: none; }
  /* Tables whose cells carry their column name show it above each value, since the header row is hidden. */
  .table-wrap td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .actions { justify-content: stretch; }
  .actions button { flex: 1; }
  .grid-form { grid-template-columns: 1fr; }
  #audit table tr, #inbox table tr, #accounts table tr, #keys table tr, #invitations-part table tr { grid-template-columns: 1fr; }
  #audit td:nth-child(n), #inbox td:nth-child(n), #accounts td:nth-child(n), #keys td:nth-child(n), #invitations-part td:nth-child(n) { grid-column: 1; grid-row: auto; justify-self: start; }
}
button { white-space: nowrap; }
.account-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
button.small { min-height: 32px; padding: 4px 10px; font-size: 0.85rem; }
.plain-fieldset { border: 0; margin: 0; padding: 0; }
.key-list { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
dialog.wide { width: min(640px, calc(100% - 32px)); }
.access-layout { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.access-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#access-dialog :is(h2, h3, p, strong, summary) { overflow-wrap: anywhere; }
#access-dialog .access-heading { flex-wrap: wrap; }
#access-dialog .access-heading h2 { min-width: 0; }
#access-dialog button, .review-access { min-height: 44px; white-space: normal; }
#access-content { display: flex; flex-direction: column; gap: 16px; }
#access-content h3 { margin: 0; }
#access-content details { border-top: 1px solid var(--line); padding-top: 8px; }
#access-content summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 600; }
#access-content summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.access-id { font-size: .875em; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.access-warning { font-weight: 600; }
.access-records { list-style: none; padding: 0; margin: 0; }
.access-records li { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.access-note { padding-top: 12px; }
#access-dialog button:disabled { cursor: wait; }
.revocation { display: flex; flex-direction: column; gap: 8px; }
code.command { display: block; padding: 10px; border-radius: 8px; background: var(--surface-2, rgb(0 0 0 / .05)); font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
#safes-body code { overflow-wrap: anywhere; word-break: break-all; }
.scope-accounts { flex-direction: column; align-items: flex-start; margin: 6px 0 0 22px; }
#scope-options { display: flex; flex-direction: column; gap: 6px; }

#passkey-choice:not([hidden]) { display: flex; flex-direction: column; gap: 4px; max-width: 100%; }
#passkey-select { background-image: none; padding: 4px; min-height: 96px; max-width: 100%; }
#passkey-select option { padding: 12px 8px; min-height: 44px; }

.signing-policy-rule { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-md); }
.signing-policy-rule .hint { grid-column: 1 / -1; margin: 0; }

#suspend-dialog .dialog-actions { flex-wrap: wrap; }
#suspend-dialog .dialog-actions button { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#suspend-dialog button:disabled { background: var(--bg); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
#suspend-selection, #suspend-accounts { overflow-wrap: anywhere; }

button.suspend-key { min-height: 44px; }
@media (prefers-color-scheme: dark) {
  #suspend-confirm:not(:disabled) { color: var(--bg); }
}