html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--alma-primitive-color-accent-luminous) 12%, transparent), transparent 34%),
    var(--alma-semantic-surface-canvas);
}

.viewer-header {
  min-height: 68px;
  border-bottom: 1px solid var(--alma-semantic-border-default);
  background: color-mix(in srgb, var(--alma-primitive-color-surface-canvas) 94%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left));
}

.viewer-header > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.viewer-wordmark {
  color: var(--alma-semantic-shell-deep);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-decoration: none;
}

.viewer-header > div > span {
  color: var(--alma-semantic-text-secondary);
  font-size: 12px;
}

.viewer-frame {
  width: min(920px, 100%);
  min-width: 0;
  margin: 0 auto;
  padding: 30px max(18px, env(safe-area-inset-right)) max(64px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.connection-error {
  border: 1px solid var(--alma-primitive-color-status-danger);
  border-radius: 14px;
  background: var(--alma-primitive-color-surface-danger-soft);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
}

.connection-error > span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--alma-semantic-status-danger);
  color: var(--alma-primitive-color-surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.connection-error p {
  color: var(--alma-semantic-text-secondary);
  margin-bottom: 0;
}

.login-view {
  min-height: calc(100vh - 132px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.85fr);
  align-items: center;
  gap: 44px;
}

.login-copy h1 {
  max-width: 560px;
  font-size: clamp(31px, 5vw, 50px);
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.login-copy > p:not(.eyebrow) {
  max-width: 540px;
  color: var(--alma-semantic-text-secondary);
  font-size: 17px;
}

.trust-list {
  max-width: 520px;
  border-top: 1px solid var(--alma-semantic-border-default);
  margin-top: 28px;
}

.trust-list div {
  border-bottom: 1px solid var(--alma-semantic-border-default);
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 10px 0;
}

.trust-list dt {
  color: var(--alma-semantic-text-secondary);
}

.trust-list dd {
  font-weight: 650;
  margin: 0;
}

.login-card {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 27px;
}

.login-card h2 {
  margin-bottom: 8px;
}

.login-card label,
.search-card label {
  color: var(--alma-semantic-text-secondary);
  font-size: 13px;
  font-weight: 650;
}

.login-card input,
.search-card input,
.search-card select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--alma-semantic-border-strong);
  border-radius: 10px;
  background: var(--alma-primitive-color-surface-card);
  padding: 9px 12px;
}

.login-card button {
  margin-top: 9px;
}

.login-card small {
  color: var(--alma-semantic-text-muted);
}

.form-error {
  color: var(--alma-semantic-status-danger);
  font-size: 13px;
  margin: 4px 0 0;
}

.viewer-topline {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.viewer-topline h1 {
  font-size: 29px;
  margin-bottom: 3px;
}

.readonly-banner {
  border-left: 4px solid var(--alma-semantic-status-success);
  border-radius: 10px;
  background: var(--alma-primitive-color-surface-success-soft);
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px 15px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.summary-card {
  min-width: 0;
  display: grid;
  padding: 16px;
}

.summary-card span,
.summary-card small {
  color: var(--alma-semantic-text-secondary);
  font-size: 12px;
}

.summary-card strong {
  font-size: 27px;
  font-variant-numeric: tabular-nums;
}

.search-card {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 16px;
}

.search-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px auto;
  gap: 8px;
}

.list-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 27px 2px 10px;
}

.list-heading h2 {
  font-size: 19px;
  margin-bottom: 0;
}

.group-list {
  display: grid;
  gap: 10px;
}

.group-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 17px;
}

.group-card h3 {
  overflow-wrap: anywhere;
  margin-bottom: 3px;
}

.group-card p {
  color: var(--alma-semantic-text-secondary);
  font-size: 13px;
  margin-bottom: 0;
}

.group-card button {
  align-self: center;
}

.detail-card {
  position: relative;
  margin-top: 14px;
  padding: 23px;
}

.detail-card .close-button {
  position: absolute;
  top: 12px;
  right: 12px;
}

.detail-card h2 {
  padding-right: 62px;
}

.policy-list {
  display: grid;
  gap: 9px;
}

.policy-row {
  border: 1px solid var(--alma-semantic-border-default);
  border-radius: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 13px;
}

.policy-row strong,
.policy-row span {
  display: block;
  overflow-wrap: anywhere;
}

.policy-row span {
  color: var(--alma-semantic-text-secondary);
  font-size: 13px;
}

.policy-dialog {
  width: min(720px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  border: 0;
  border-radius: 18px;
  box-shadow: var(--alma-primitive-shadow-overlay);
  padding: 23px;
}

.policy-dialog::backdrop {
  background: color-mix(in srgb, var(--alma-primitive-color-shell-deep) 63%, transparent);
}

.dialog-topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.dialog-topline h2 {
  margin-bottom: 0;
}

.dialog-topline > button {
  flex-shrink: 0;
  white-space: nowrap;
}

.policy-number {
  border-bottom: 1px solid var(--alma-semantic-border-default);
  color: var(--alma-semantic-action-primary);
  font-size: 25px;
  font-weight: 700;
  padding-bottom: 14px;
}

.policy-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  margin-bottom: 23px;
}

.fact {
  border-bottom: 1px solid var(--alma-semantic-border-default);
  display: grid;
  gap: 2px;
  padding: 8px 0;
}

.fact span {
  color: var(--alma-semantic-text-secondary);
  font-size: 12px;
}

.fact strong {
  overflow-wrap: anywhere;
}

.component-list {
  display: grid;
  gap: 10px;
}

.component-card {
  border: 1px solid var(--alma-semantic-border-default);
  border-left: 4px solid var(--alma-semantic-action-primary);
  border-radius: 10px;
  padding: 13px;
}

.component-card.rider {
  border-left-color: var(--alma-semantic-accent-prestige);
}

.component-card p {
  color: var(--alma-semantic-text-secondary);
  font-size: 13px;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .login-view {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .login-copy h1 {
    font-size: 34px;
  }
}

@media (max-width: 430px) {
  .viewer-header {
    min-height: 62px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .viewer-frame {
    padding-top: 20px;
  }

  .viewer-header .status-pill {
    max-width: 145px;
    font-size: 11px;
  }

  .login-copy h1 {
    font-size: 31px;
  }

  .login-card {
    padding: 20px;
  }

  .viewer-topline,
  .readonly-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .summary-grid {
    gap: 7px;
  }

  .summary-card {
    padding: 12px;
  }

  .summary-card strong {
    font-size: 23px;
  }

  .search-row {
    grid-template-columns: minmax(0, 1fr) 106px;
  }

  .search-row button {
    grid-column: 1 / -1;
  }

  .group-card,
  .policy-row {
    grid-template-columns: 1fr;
  }

  .group-card button,
  .policy-row button {
    width: 100%;
  }

  .policy-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .viewer-header > div > span {
    display: none;
  }

  .viewer-frame {
    padding-right: 14px;
    padding-left: 14px;
  }

  .summary-card small {
    display: none;
  }
}

/* Carry operations reuse the existing cards, typography and detail layout. */
.carry-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pagination { justify-content: center; margin-top: 16px; }
#carry-settings { margin-bottom: 22px; }
#carry-settings form, #unlock-form { display: grid; gap: 9px; }
#carry-settings details { overflow-wrap: anywhere; }
#carry-settings input[type=file] { font-size: 13px; }
#replace-preview, #delete-confirm { border-left: 4px solid var(--alma-semantic-status-warning); padding: 12px; }
#carry-message { padding: 12px; background: var(--alma-semantic-surface-card); }
#dataset-info { overflow-wrap: anywhere; }

.dialog-topline { align-items: flex-start; }