/* The owned stylesheet of the enterprise pages (pages design 4.1 and 4.6). It reads the custom properties of the
   vendored tokens.css that the build publishes beside it, so light and dark follow the brand tokens. It references no
   file and pulls in no other stylesheet, and the pages carry no style attribute (section 3, rule 4). Every layout wraps or stacks
   before it can overflow a 390-pixel viewport: long unbroken values (addresses, setup keys, names) break anywhere, and
   the QR image never grows past its container. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ph-paper);
  color: var(--ph-ink);
  font-family: var(--ph-sans);
  font-size: 1rem;
  line-height: 1.55;
}

[hidden] {
  display: none !important;
}

.page {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 var(--ph-5) var(--ph-8);
}

/* Header */

.site-header {
  border-bottom: 1px solid var(--ph-line);
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ph-3) var(--ph-5);
  padding: var(--ph-4) 0;
}

.lockup {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ph-2);
  color: var(--ph-ink);
  text-decoration: none;
}

.lockup .mark {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
}

.lockup .product {
  font-family: var(--ph-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ph-tr-micro);
  text-transform: uppercase;
  color: var(--ph-mute);
}

.company {
  font-weight: 600;
  color: var(--ph-ink);
  padding-left: var(--ph-4);
  border-left: 1px solid var(--ph-line);
  overflow-wrap: anywhere;
  min-width: 0;
}

.who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ph-2) var(--ph-4);
  margin-left: auto;
  min-width: 0;
}

.account {
  font-size: var(--ph-t-small);
  overflow-wrap: anywhere;
}

.signout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--ph-2);
}

.note,
.meta {
  color: var(--ph-mute);
  font-size: var(--ph-t-small);
}

/* Type */

main {
  display: block;
  padding-block: var(--ph-6);
}

main:focus {
  outline: none;
}

h1 {
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: var(--ph-lh-head);
  letter-spacing: var(--ph-tr-head);
  font-weight: 650;
  margin: 0 0 var(--ph-2);
  overflow-wrap: anywhere;
}

h1:focus {
  outline: none;
}

h2 {
  font-size: 1.1875rem;
  line-height: var(--ph-lh-head);
  letter-spacing: -0.01em;
  font-weight: 650;
  margin: var(--ph-6) 0 var(--ph-3);
}

h3 {
  font-size: var(--ph-t-small);
  font-weight: 600;
  color: var(--ph-mute);
  margin: var(--ph-5) 0 var(--ph-2);
}

p {
  margin: 0 0 var(--ph-3);
  max-width: var(--ph-measure);
}

.heading {
  margin-bottom: var(--ph-5);
}

.lead {
  color: var(--ph-mute);
  font-size: 1.0625rem;
}

a {
  color: var(--ph-deep);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ph-tide);
}

bdi,
code {
  overflow-wrap: anywhere;
}

time {
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--ph-mute);
  font-weight: 400;
}

.loading {
  color: var(--ph-mute);
}

/* Controls */

/* A button is a block of inline text, not a flex container: a label made of text and an isolated address must wrap as
   one run of words ("Continue as <address>"), which separate flex items do not. */
button,
.button {
  font: inherit;
  font-weight: 600;
  display: inline-block;
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--ph-deep);
  border-radius: var(--ph-r-md);
  background: var(--ph-deep);
  color: var(--ph-paper);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  cursor: pointer;
}

button:hover,
.button:hover {
  background: var(--ph-tide);
  border-color: var(--ph-tide);
  color: var(--ph-paper);
}

button:disabled {
  opacity: 0.55;
  cursor: progress;
}

button.secondary,
.button.secondary {
  background: transparent;
  color: var(--ph-deep);
}

button.secondary:hover,
.button.secondary:hover {
  background: var(--ph-shoal-soft);
  color: var(--ph-ink);
}

button.quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ph-deep);
  min-height: 2.25rem;
  padding-inline: var(--ph-2);
}

button.quiet:hover {
  background: var(--ph-shoal-soft);
  color: var(--ph-ink);
}

button.danger {
  background: transparent;
  border-color: var(--ph-bad);
  color: var(--ph-bad);
}

button.danger:hover {
  background: var(--ph-bad);
  border-color: var(--ph-bad);
  color: var(--ph-paper);
}

:focus-visible {
  outline: 2px solid var(--ph-deep);
  outline-offset: 2px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ph-3);
  margin: var(--ph-4) 0;
}

.narrow {
  max-width: 36rem;
}

.stack {
  display: grid;
  gap: var(--ph-4);
  max-width: 30rem;
  margin: var(--ph-4) 0;
}

.stack > button {
  justify-self: start;
}

.field {
  display: grid;
  gap: var(--ph-1);
  min-width: 0;
}

label,
legend {
  font-weight: 600;
  font-size: var(--ph-t-small);
}

input[type="text"],
input[type="email"],
input[type="number"] {
  font: inherit;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-sm);
  background: var(--ph-card);
  color: var(--ph-ink);
}

input[type="number"] {
  max-width: 8rem;
}

input[inputmode="numeric"][autocomplete="one-time-code"] {
  font-family: var(--ph-mono);
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  max-width: 12rem;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex: none;
  accent-color: var(--ph-deep);
}

fieldset.choice {
  display: grid;
  gap: var(--ph-2);
  min-width: 0;
  margin: 0;
  padding: var(--ph-3) var(--ph-4);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-md);
}

.option {
  display: flex;
  align-items: center;
  gap: var(--ph-2);
  min-width: 0;
}

.option label {
  font-weight: 400;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

/* Notices and states */

.notice {
  max-width: var(--ph-measure);
  margin: var(--ph-4) 0;
  padding: var(--ph-3) var(--ph-4);
  border: 1px solid color-mix(in srgb, var(--ph-brass) 35%, var(--ph-line));
  border-radius: var(--ph-r-md);
  background: var(--ph-brass-soft);
  overflow-wrap: anywhere;
}

.notice > p:last-child {
  margin-bottom: 0;
}

.notice > p + button,
.notice > p + a {
  margin-top: var(--ph-2);
}

.notice.confirm {
  border-color: color-mix(in srgb, var(--ph-good) 45%, var(--ph-line));
  background: var(--ph-card);
}

.notice[data-state="not-found"],
.notice[data-state="maintenance"] {
  border-color: var(--ph-line);
  background: var(--ph-card);
}

.notice[data-state="not-found"] h1 {
  font-size: 1.5rem;
}

.confirm {
  color: var(--ph-ink);
}

p.confirm {
  font-weight: 600;
}

.status:empty {
  display: none;
}

.state {
  max-width: 36rem;
}

/* Panels and lists */

.panel {
  margin: var(--ph-5) 0;
  padding: var(--ph-4) var(--ph-5);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-lg);
  background: var(--ph-card);
}

.panel h2 {
  margin-top: 0;
}

.panel > :last-child {
  margin-bottom: 0;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ph-3);
  margin-bottom: var(--ph-3);
}

.page-head .heading {
  margin-bottom: var(--ph-2);
  min-width: 0;
}

.toolbar {
  display: flex;
  gap: var(--ph-2);
}

.cards {
  display: grid;
  gap: var(--ph-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  min-width: 0;
  padding: var(--ph-3) var(--ph-4);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-md);
  background: var(--ph-card);
}

.card[data-status="removed"],
.card[data-state="revoked"],
.card[data-state="expired"] {
  background: transparent;
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ph-2);
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.card .meta {
  margin: var(--ph-1) 0 0;
}

.label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tag {
  font-family: var(--ph-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-mute);
  padding: 0 var(--ph-2);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-pill);
}

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ph-2);
  margin-top: var(--ph-3);
}

.tools:empty {
  display: none;
}

.tools > fieldset,
.tools > .actions,
.confirm-box {
  flex: 1 1 100%;
}

.confirm-box p {
  margin-bottom: var(--ph-2);
}

.tools > .actions {
  margin: 0;
}

/* Second factor */

.steps {
  display: grid;
  gap: var(--ph-5);
  margin: var(--ph-4) 0;
  padding-left: 1.25rem;
}

.steps > li {
  padding-left: var(--ph-1);
}

.qr-frame {
  display: inline-block;
  max-width: 100%;
  padding: var(--ph-3);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-md);
  background: #fff;
}

.qr {
  display: block;
  width: min(15rem, 100%);
  height: auto;
}

.secret {
  display: block;
  padding: var(--ph-3);
  border-radius: var(--ph-r-sm);
  background: var(--ph-paper-deep);
  font-family: var(--ph-mono);
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  word-spacing: 0.3em;
}

/* Reviews, releases and audience groups (E4 design 4.1) */

.company-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ph-2) var(--ph-4);
  margin: 0 0 var(--ph-4);
  font-size: var(--ph-t-small);
}

.company-links [aria-current] {
  font-weight: 600;
  color: var(--ph-ink);
}

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ph-3);
  margin: var(--ph-3) 0 var(--ph-4);
}

.toolbar-row .company-links {
  margin: 0;
}

/* The boundary sentence and the withdrawal text: fixed page text, set apart and never folded away. */
.boundary {
  max-width: var(--ph-measure);
  margin: var(--ph-4) 0;
  padding: var(--ph-3) var(--ph-4);
  border: 1px solid var(--ph-deep);
  border-radius: var(--ph-r-md);
  background: var(--ph-card);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lines {
  display: grid;
  gap: var(--ph-2);
  margin: var(--ph-2) 0;
  padding-left: 1.1rem;
}

.lines > li {
  min-width: 0;
  overflow-wrap: anywhere;
}

dl.facts {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
  gap: var(--ph-1) var(--ph-4);
  margin: var(--ph-3) 0;
}

dl.facts > div {
  display: contents;
}

dl.facts dt {
  color: var(--ph-mute);
  font-size: var(--ph-t-small);
}

dl.facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.hash {
  font-family: var(--ph-mono);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: var(--ph-2) 0 var(--ph-3);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ph-t-small);
}

/* break-word, not anywhere: anywhere lets a column shrink below its longest word, and the phone capture showed
   "Required" split across two lines (journey JE6 now checks that no word in a data table does). */
table.data th,
table.data td,
table.data bdi {
  overflow-wrap: break-word;
}

table.data th,
table.data td {
  padding: var(--ph-2) var(--ph-3);
  border-bottom: 1px solid var(--ph-line);
  text-align: left;
  vertical-align: top;
}

table.data th {
  font-weight: 600;
  color: var(--ph-mute);
}

.content-pane {
  max-height: 28rem;
  overflow: auto;
  margin: var(--ph-2) 0 0;
  padding: var(--ph-3);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-sm);
  background: var(--ph-paper-deep);
  font-family: var(--ph-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.packet > div {
  margin-bottom: var(--ph-4);
}

.reason {
  margin: var(--ph-1) 0 0;
  padding: var(--ph-2) var(--ph-3);
  border-radius: var(--ph-r-sm);
  background: var(--ph-paper-deep);
  overflow-wrap: anywhere;
}

.verdict {
  font-weight: 600;
}

.stale {
  color: var(--ph-bad);
}

.kind {
  font-weight: 600;
}

textarea {
  font: inherit;
  width: 100%;
  min-height: 6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-sm);
  background: var(--ph-card);
  color: var(--ph-ink);
  resize: vertical;
}

fieldset.choice.scroll {
  max-height: 16rem;
  overflow: auto;
}

.panel h3 {
  margin-top: 0;
  font-size: 1.0625rem;
  color: var(--ph-ink);
}

.panel > .field,
.panel > fieldset,
.add-member > fieldset {
  margin: var(--ph-3) 0;
}

.change-request {
  margin-top: var(--ph-2);
}

.change-request > p {
  margin-bottom: 0;
}

@media (max-width: 40rem) {
  dl.facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  dl.facts dd {
    margin-bottom: var(--ph-2);
  }

  .toolbar-row > button {
    flex: 1 1 100%;
  }
}

@media (max-width: 40rem) {
  .page {
    padding-inline: var(--ph-4);
  }

  main {
    padding-block: var(--ph-5);
  }

  .company {
    padding-left: 0;
    border-left: 0;
    flex: 1 1 100%;
    order: 3;
  }

  .who {
    margin-left: 0;
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .actions > button,
  .actions > .button {
    flex: 1 1 100%;
  }

  .panel {
    padding: var(--ph-3) var(--ph-4);
  }
}

/* E5: the catalog and the installation sections of the release page (E5 design 4.1). Presentation only: every
   decision on these screens is the service's, and the classes here change nothing a page renders. */

.card.report {
  background: var(--ph-paper-deep);
}

.card.report .cards,
.cards .cards {
  margin-top: var(--ph-2);
}

[data-role="mine"] {
  margin-top: var(--ph-2);
}

[data-role="witness-control"] {
  margin-top: var(--ph-2);
}

[data-role="install-section"] .losses,
[data-role="install-section"] .content {
  margin-top: var(--ph-4);
}

[data-role="check-in"] {
  display: grid;
  justify-items: start;
  gap: var(--ph-2);
}