/* Layout for contributor pages. Shared tokens and controls are in /static/helm.css. */
@font-face {
  font-family: "Inter";
  src: url("/static/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
.sign-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: var(--w-settings);
}
.sign-content:has(.sign-welcome),
.sign-content:has(.asset-workspace) {
  max-width: none;
}
:where(.sign-content) > h1 + p {
  color: var(--k-text-secondary);
  line-height: var(--t-regular-lh-spaced);
}
.sign-content p {
  overflow-wrap: anywhere;
}
.sign-content :is(form:not(.inline), fieldset, section) {
  min-width: 0;
}
.sign-content form:not(.inline) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-4);
}
.sign-content :where(form) > button {
  align-self: flex-start;
}
.sign-content label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-weight: var(--fw-medium);
}
.sign-content label:has(input[type="checkbox"]),
.sign-content label:has(input[type="radio"]) {
  flex-direction: row;
  align-items: flex-start;
  font-weight: var(--fw-regular);
}
.sign-content input[type="checkbox"],
.sign-content input[type="radio"] {
  accent-color: var(--k-fill-primary);
  width: var(--icon-16);
  height: var(--icon-16);
  flex: none;
  margin: var(--sp-0-5) 0 0;
}
.sign-content fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--pad-card);
  border: 1px solid var(--k-fill-quaternary);
  border-radius: var(--r-12);
  margin: 0;
}
.sign-content legend {
  font-weight: var(--fw-semibold);
  padding: 0 var(--sp-2);
}
.sign-content textarea {
  resize: vertical;
}
.sign-content table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.sign-content :is(td, th) {
  text-align: left;
  vertical-align: top;
  padding: var(--pad-cell-y) var(--pad-cell-x);
  border-bottom: 1px solid var(--k-fill-quaternary);
  overflow-wrap: anywhere;
}
.sign-content th {
  font-weight: var(--fw-medium);
  color: var(--k-text-secondary);
  font-size: var(--t-mini);
}
.sign-content :is(td, th):first-child {
  padding-left: 0;
}
.sign-content :is(td, th):last-child {
  padding-right: 0;
}
.sign-content output:not(:empty) {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-6);
  background: var(--k-bg-secondary);
  color: var(--k-text-secondary);
  overflow-wrap: anywhere;
}
.sign-content output:empty,
.sign-content #tp-uploads:empty {
  display: none;
}
.sign-content output[data-kind="error"] {
  background: var(--k-red-muted);
  color: var(--k-red-emphasis);
}
.sign-content output[data-kind="done"] {
  background: var(--k-green-muted);
  color: var(--k-green-emphasis);
}
.sign-content details {
  padding: var(--sp-4);
  border: 1px solid var(--k-fill-quaternary);
  border-radius: var(--r-8);
}
.sign-content details summary {
  color: var(--k-text-secondary);
  font-weight: var(--fw-medium);
}
.sign-content details[open] > summary {
  margin-bottom: var(--sp-4);
}
.sign-content .field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--k-fill-quaternary);
}
.field .label {
  color: var(--k-text-secondary);
}
.json {
  margin: 0;
  padding-left: var(--sp-4);
  overflow-wrap: anywhere;
}
dl.json {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--sp-2);
}
.json dt {
  color: var(--k-text-secondary);
}
.json dd {
  min-width: 0;
}
.sign-content .ceremony-view {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--pad-card);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-medium);
}
.ceremony-view h3 {
  margin-top: var(--sp-5);
}
.digest-line {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--k-text-secondary);
}
.digest-line code {
  color: var(--k-text-primary);
}
.sign-content .problem {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border: 1px solid var(--k-fill-quaternary);
  border-radius: var(--r-8);
}
.sign-content .thumbnails {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.thumbnails li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.thumbnails img {
  border-radius: var(--r-6);
  border: 1px solid var(--k-fill-quaternary);
}
.dev-banner {
  padding: var(--sp-3) var(--sp-4);
  background: var(--k-amber-muted);
  color: var(--k-amber-emphasis);
  border-radius: var(--r-6);
  font-size: var(--t-mini);
  line-height: var(--t-mini-lh);
}
.dev-banner select,
.dev-banner button {
  margin-left: var(--sp-2);
}
.sign-welcome,
.asset-workspace {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.sign-welcome-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--w-prose);
  align-items: start;
  gap: var(--sp-8);
}
.sign-welcome-intro > div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.sign-welcome-intro p {
  max-width: var(--w-prose);
  color: var(--k-text-secondary);
  line-height: var(--t-regular-lh-spaced);
}
.sign-welcome .ui-surface h2 {
  font-size: var(--t-regular);
}
.sign-welcome .ui-surface ol {
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: var(--k-text-secondary);
  margin: 0;
}
.sign-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.sign-action {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--pad-card);
  text-decoration: none;
  border: 1px solid var(--k-fill-quaternary);
  border-radius: var(--r-12);
}
.sign-action .ui-icon {
  color: var(--k-text-secondary);
}
.sign-action p {
  font-size: var(--t-small);
  line-height: var(--t-regular-lh);
  color: var(--k-text-secondary);
}
.sign-auth-intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.sign-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.upload-dropzone {
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--k-field-edge);
  border-radius: var(--r-8);
  background: var(--k-bg-secondary);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.upload-dropzone label {
  width: 100%;
}
.upload-dropzone input[type="file"] {
  background: transparent;
  box-shadow: none;
  padding: var(--sp-2) 0;
}
.upload-dropzone .ui-icon {
  width: var(--icon-32);
  height: var(--icon-32);
}
.asset-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.asset-stats > div {
  padding: var(--sp-4);
  border: 1px solid var(--k-fill-quaternary);
  border-radius: var(--r-8);
}
.asset-stats dt {
  color: var(--k-text-secondary);
  font-size: var(--t-mini);
}
.asset-stats dd {
  font-size: var(--t-title-small);
  line-height: var(--t-title-small-lh);
  margin-top: var(--sp-2);
  font-feature-settings: var(--k-features-tnum);
}
.asset-selector {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--k-fill-quaternary);
  border-radius: var(--r-6);
}
.asset-selector span {
  overflow-wrap: anywhere;
}
.sign-content .ui-auth {
  align-self: center;
}
.sign-content .ui-auth button {
  align-self: stretch;
}
.sign-content:has(.ui-auth) {
  max-width: none;
}
.sign-content .ui-steps p {
  line-height: var(--t-mini-lh);
}
@media (hover: hover) {
  .sign-action:hover {
    border-color: var(--k-fill-tertiary);
    background: var(--k-bg-secondary);
  }
}
@media (max-width: 1100px) {
  .sign-welcome-intro {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .sign-actions,
  .sign-upload {
    grid-template-columns: 1fr;
  }
  .sign-content .field {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
  .sign-content :is(td, th) {
    padding: var(--sp-2) var(--sp-1);
  }
  .asset-stats {
    gap: var(--sp-2);
  }
  .asset-stats > div {
    padding: var(--sp-3);
  }
  .dev-banner {
    font-size: var(--t-mini);
  }
}
@media (pointer: coarse) {
  .sign-content button,
  .sign-content label:has(input[type="checkbox"]),
  .sign-content label:has(input[type="radio"]),
  .sign-content summary {
    min-height: var(--h-touch);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

.holder-fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 640px) {
  .holder-fields {
    grid-template-columns: 1fr;
  }
}

.sign-content .field > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .sign-content .field {
    grid-template-columns: minmax(0, 1fr);
  }
  .sign-content :is(.assets, .passkeys) {
    display: block;
  }
  .sign-content :is(.assets, .passkeys) thead {
    position: absolute;
    width: var(--sp-px);
    height: var(--sp-px);
    overflow: hidden;
    clip-path: inset(50%);
  }
  .sign-content :is(.assets, .passkeys) tbody {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }
  .sign-content :is(.assets, .passkeys) tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    border: 1px solid var(--k-fill-quaternary);
    border-radius: var(--r-8);
    padding: var(--sp-4);
  }
  .sign-content :is(.assets, .passkeys) td {
    display: block;
    border: 0;
    padding: 0;
    min-width: 0;
  }
  .sign-content :is(.assets, .passkeys) td:first-child,
  .sign-content .assets td:last-child {
    grid-column: 1 / -1;
  }
  .sign-content :is(.assets, .passkeys) td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--t-mini);
    line-height: var(--t-mini-lh);
    color: var(--k-text-tertiary);
    margin-bottom: var(--sp-1);
  }
}